@jenesei-software/jenesei-kit-react 1.3.8 → 1.3.9

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 (216) hide show
  1. package/README.md +0 -20
  2. package/build/{area-AbheP_ot.cjs → area-DnAf310m.cjs} +2 -2
  3. package/build/{area-AbheP_ot.cjs.map → area-DnAf310m.cjs.map} +1 -1
  4. package/build/{area-CH6c_n7-.js → area-Dnq78ow6.js} +2 -2
  5. package/build/{area-CH6c_n7-.js.map → area-Dnq78ow6.js.map} +1 -1
  6. package/build/area-preview.cjs.js +1 -1
  7. package/build/area-preview.es.js +1 -1
  8. package/build/build-info.txt +3 -3
  9. package/build/{component-BuxekWox.cjs → component-BiNPQpCQ.cjs} +2 -2
  10. package/build/{component-BuxekWox.cjs.map → component-BiNPQpCQ.cjs.map} +1 -1
  11. package/build/{component-Bwu-fBEh.js → component-BoHvC24Q.js} +2 -2
  12. package/build/{component-Bwu-fBEh.js.map → component-BoHvC24Q.js.map} +1 -1
  13. package/build/{component-D8qbXvM4.js → component-Bzw_uobM.js} +3 -3
  14. package/build/{component-D8qbXvM4.js.map → component-Bzw_uobM.js.map} +1 -1
  15. package/build/{component-CmotrA_9.js → component-C4ULY0c6.js} +16 -6
  16. package/build/component-C4ULY0c6.js.map +1 -0
  17. package/build/{component-CeWNemV1.cjs → component-CACoGUK9.cjs} +2 -2
  18. package/build/{component-CeWNemV1.cjs.map → component-CACoGUK9.cjs.map} +1 -1
  19. package/build/{component-D7A-4DNQ.cjs → component-CLqcB5mM.cjs} +2 -2
  20. package/build/component-CLqcB5mM.cjs.map +1 -0
  21. package/build/{component-BvLPfi2B.js → component-CQ8fy2gK.js} +2 -2
  22. package/build/{component-BvLPfi2B.js.map → component-CQ8fy2gK.js.map} +1 -1
  23. package/build/{component-vpCWcIhC.js → component-DHM9pbab.js} +3 -3
  24. package/build/component-DHM9pbab.js.map +1 -0
  25. package/build/{component-DfqhPd0e.cjs → component-DHq4T6Ku.cjs} +2 -2
  26. package/build/{component-DfqhPd0e.cjs.map → component-DHq4T6Ku.cjs.map} +1 -1
  27. package/build/{component-BFhXrZ3a.js → component-DfxlJBGv.js} +3 -3
  28. package/build/{component-BFhXrZ3a.js.map → component-DfxlJBGv.js.map} +1 -1
  29. package/build/{component-DUUxsxY6.cjs → component-Dn-VRY7-.cjs} +2 -2
  30. package/build/{component-DUUxsxY6.cjs.map → component-Dn-VRY7-.cjs.map} +1 -1
  31. package/build/component-accordion.cjs.js +1 -1
  32. package/build/component-accordion.d.ts +1 -1
  33. package/build/component-accordion.es.js +1 -1
  34. package/build/component-button-group.cjs.js +1 -1
  35. package/build/component-button-group.d.ts +22 -6
  36. package/build/component-button-group.es.js +1 -1
  37. package/build/component-button.cjs.js +1 -1
  38. package/build/component-button.d.ts +22 -6
  39. package/build/component-button.es.js +1 -1
  40. package/build/component-checkbox-group.cjs.js +1 -1
  41. package/build/component-checkbox-group.d.ts +19 -6
  42. package/build/component-checkbox-group.es.js +1 -1
  43. package/build/component-checkbox.cjs.js +1 -1
  44. package/build/component-checkbox.d.ts +20 -7
  45. package/build/component-checkbox.es.js +1 -1
  46. package/build/component-date-picker.cjs.js +1 -1
  47. package/build/component-date-picker.d.ts +22 -6
  48. package/build/component-date-picker.es.js +1 -1
  49. package/build/component-icon.cjs.js +1 -1
  50. package/build/component-icon.d.ts +16 -3
  51. package/build/component-icon.es.js +3 -2
  52. package/build/component-image-button.cjs.js +1 -1
  53. package/build/component-image-button.d.ts +22 -6
  54. package/build/component-image-button.es.js +1 -1
  55. package/build/component-image-select.cjs.js +1 -1
  56. package/build/component-image-select.d.ts +22 -6
  57. package/build/component-image-select.es.js +1 -1
  58. package/build/component-image-slider.cjs.js +1 -1
  59. package/build/component-image-slider.d.ts +1 -1
  60. package/build/component-image-slider.es.js +1 -1
  61. package/build/component-input-otp.cjs.js +1 -1
  62. package/build/component-input-otp.d.ts +1 -1
  63. package/build/component-input-otp.es.js +1 -1
  64. package/build/component-input.cjs.js +1 -1
  65. package/build/component-input.d.ts +1 -1
  66. package/build/component-input.es.js +2 -2
  67. package/build/component-map.cjs.js +1 -1
  68. package/build/component-map.d.ts +11 -12
  69. package/build/component-map.es.js +2 -2
  70. package/build/component-pagination.cjs.js +1 -1
  71. package/build/component-pagination.d.ts +22 -6
  72. package/build/component-pagination.es.js +1 -1
  73. package/build/component-range.cjs.js +1 -1
  74. package/build/component-range.d.ts +1 -1
  75. package/build/component-range.es.js +1 -1
  76. package/build/component-ripple.cjs.js +1 -1
  77. package/build/component-ripple.es.js +1 -1
  78. package/build/component-select.cjs.js +1 -1
  79. package/build/component-select.d.ts +3 -3
  80. package/build/component-select.es.js +1 -1
  81. package/build/component-separator.d.ts +1 -1
  82. package/build/component-textarea.cjs.js +1 -1
  83. package/build/component-textarea.d.ts +1 -1
  84. package/build/component-textarea.es.js +1 -1
  85. package/build/component-toggle.cjs.js +1 -1
  86. package/build/component-toggle.d.ts +1 -1
  87. package/build/component-toggle.es.js +1 -1
  88. package/build/component-tooltip.cjs.js +1 -1
  89. package/build/component-tooltip.d.ts +4 -4
  90. package/build/component-tooltip.es.js +1 -1
  91. package/build/component-typography.cjs.js +1 -1
  92. package/build/component-typography.d.ts +4 -4
  93. package/build/component-typography.es.js +1 -1
  94. package/build/{component-CMkU2lIg.cjs → component-u_42PteJ.cjs} +9 -9
  95. package/build/component-u_42PteJ.cjs.map +1 -0
  96. package/build/{component.components-BPIVZi-R.js → component.components-DX0DVix5.js} +26 -18
  97. package/build/component.components-DX0DVix5.js.map +1 -0
  98. package/build/{component.components-BWWKHxKD.cjs → component.components-H_qAeBHw.cjs} +3 -3
  99. package/build/component.components-H_qAeBHw.cjs.map +1 -0
  100. package/build/{component.constants-Dtw4932G.js → component.constants-C7DGbAC8.js} +5 -5
  101. package/build/{component.constants-Dtw4932G.js.map → component.constants-C7DGbAC8.js.map} +1 -1
  102. package/build/{component.constants-CmQuESzl.js → component.constants-DjYLZpyY.js} +2 -2
  103. package/build/{component.constants-CmQuESzl.js.map → component.constants-DjYLZpyY.js.map} +1 -1
  104. package/build/{component.constants-D8QVKsqc.cjs → component.constants-DwRduxMm.cjs} +2 -2
  105. package/build/{component.constants-D8QVKsqc.cjs.map → component.constants-DwRduxMm.cjs.map} +1 -1
  106. package/build/{component.constants-DyKCJRH3.cjs → component.constants-veAUxKBd.cjs} +2 -2
  107. package/build/{component.constants-DyKCJRH3.cjs.map → component.constants-veAUxKBd.cjs.map} +1 -1
  108. package/build/{component.styles-CKLd9UoP.cjs → component.styles--Ug3PJQ6.cjs} +2 -2
  109. package/build/{component.styles-CKLd9UoP.cjs.map → component.styles--Ug3PJQ6.cjs.map} +1 -1
  110. package/build/{component.styles-CQbSHrL_.js → component.styles-5CVyEjEh.js} +7 -7
  111. package/build/{component.styles-CQbSHrL_.js.map → component.styles-5CVyEjEh.js.map} +1 -1
  112. package/build/{component.styles-CKArb78Q.js → component.styles-5Xz_H-fR.js} +6 -6
  113. package/build/{component.styles-CKArb78Q.js.map → component.styles-5Xz_H-fR.js.map} +1 -1
  114. package/build/{component.styles-CS_lQRm0.cjs → component.styles-8tkaznu_.cjs} +2 -2
  115. package/build/{component.styles-CS_lQRm0.cjs.map → component.styles-8tkaznu_.cjs.map} +1 -1
  116. package/build/{component.styles-R92hjRRA.cjs → component.styles-Bfhg18CX.cjs} +2 -2
  117. package/build/{component.styles-R92hjRRA.cjs.map → component.styles-Bfhg18CX.cjs.map} +1 -1
  118. package/build/{component.styles-DYAuT7U2.js → component.styles-Bm3Ec-Kd.js} +40 -13
  119. package/build/component.styles-Bm3Ec-Kd.js.map +1 -0
  120. package/build/{component.styles-C-mr1A0b.cjs → component.styles-BuzZQhqS.cjs} +2 -2
  121. package/build/{component.styles-C-mr1A0b.cjs.map → component.styles-BuzZQhqS.cjs.map} +1 -1
  122. package/build/{component.styles-ClU_KFe9.js → component.styles-C1p3V7H6.js} +5 -5
  123. package/build/{component.styles-ClU_KFe9.js.map → component.styles-C1p3V7H6.js.map} +1 -1
  124. package/build/{component.styles-DoUBnv1C.js → component.styles-C3hYZJGh.js} +3 -3
  125. package/build/{component.styles-DoUBnv1C.js.map → component.styles-C3hYZJGh.js.map} +1 -1
  126. package/build/{component.styles-l0Dr5zHf.cjs → component.styles-CISd4naT.cjs} +2 -2
  127. package/build/{component.styles-l0Dr5zHf.cjs.map → component.styles-CISd4naT.cjs.map} +1 -1
  128. package/build/{component.styles-BfzC8j7O.js → component.styles-CggIUAVx.js} +6 -6
  129. package/build/{component.styles-BfzC8j7O.js.map → component.styles-CggIUAVx.js.map} +1 -1
  130. package/build/{component.styles-BMJamWba.cjs → component.styles-Cje8zTpf.cjs} +2 -2
  131. package/build/{component.styles-BMJamWba.cjs.map → component.styles-Cje8zTpf.cjs.map} +1 -1
  132. package/build/{component.styles-DyTB01CW.js → component.styles-CpFA5YrM.js} +4 -4
  133. package/build/{component.styles-DyTB01CW.js.map → component.styles-CpFA5YrM.js.map} +1 -1
  134. package/build/{component.styles-DETkOSnM.cjs → component.styles-Crx4pACx.cjs} +2 -2
  135. package/build/{component.styles-DETkOSnM.cjs.map → component.styles-Crx4pACx.cjs.map} +1 -1
  136. package/build/component.styles-DSle6iuF.cjs +22 -0
  137. package/build/component.styles-DSle6iuF.cjs.map +1 -0
  138. package/build/{component.styles-DkL2qYQQ.js → component.styles-DX_3POUD.js} +2 -2
  139. package/build/{component.styles-DkL2qYQQ.js.map → component.styles-DX_3POUD.js.map} +1 -1
  140. package/build/{component.styles-CMXsg9Uj.js → component.styles-DYS_AJ9F.js} +4 -4
  141. package/build/{component.styles-CMXsg9Uj.js.map → component.styles-DYS_AJ9F.js.map} +1 -1
  142. package/build/{component.styles-B294m7QY.cjs → component.styles-Db3HLiuV.cjs} +2 -2
  143. package/build/{component.styles-B294m7QY.cjs.map → component.styles-Db3HLiuV.cjs.map} +1 -1
  144. package/build/{component.styles-b_DLfQqU.cjs → component.styles-DhAMCZ71.cjs} +2 -2
  145. package/build/{component.styles-b_DLfQqU.cjs.map → component.styles-DhAMCZ71.cjs.map} +1 -1
  146. package/build/{component.styles-usmYNSi8.js → component.styles-DpgkACgI.js} +2 -2
  147. package/build/{component.styles-usmYNSi8.js.map → component.styles-DpgkACgI.js.map} +1 -1
  148. package/build/{component.styles-B5kjhqh4.cjs → component.styles-o7GmI4Ap.cjs} +2 -2
  149. package/build/{component.styles-B5kjhqh4.cjs.map → component.styles-o7GmI4Ap.cjs.map} +1 -1
  150. package/build/{component.styles-BHBTNQ8p.js → component.styles-v0YYECwW.js} +4 -4
  151. package/build/{component.styles-BHBTNQ8p.js.map → component.styles-v0YYECwW.js.map} +1 -1
  152. package/build/{component.types-D05KdxnZ.js → component.types-BBQ18Npa.js} +14 -3
  153. package/build/component.types-BBQ18Npa.js.map +1 -0
  154. package/build/{component.types-D2nk9HlK.js → component.types-BzBjcohg.js} +8 -8
  155. package/build/{component.types-D2nk9HlK.js.map → component.types-BzBjcohg.js.map} +1 -1
  156. package/build/{component.types-gy5Q9qHX.cjs → component.types-DraGq1j_.cjs} +2 -2
  157. package/build/component.types-DraGq1j_.cjs.map +1 -0
  158. package/build/{component.types-DoUkmzRs.cjs → component.types-ydMLhabS.cjs} +2 -2
  159. package/build/{component.types-DoUkmzRs.cjs.map → component.types-ydMLhabS.cjs.map} +1 -1
  160. package/build/consts.cjs.js +1 -1
  161. package/build/consts.cjs.js.map +1 -1
  162. package/build/consts.d.ts +1 -1
  163. package/build/consts.es.js +1 -1
  164. package/build/consts.es.js.map +1 -1
  165. package/build/context-app.cjs.js +1 -1
  166. package/build/context-app.d.ts +1 -1
  167. package/build/context-app.es.js +1 -1
  168. package/build/context-dialog.d.ts +1 -1
  169. package/build/context-sonner.cjs.js +1 -1
  170. package/build/context-sonner.d.ts +5 -4
  171. package/build/context-sonner.es.js +1 -1
  172. package/build/context.constants-B9Yk6CGe.js.map +1 -1
  173. package/build/{context.constants-4kkNHBzR.js → context.constants-Bz_5itIx.js} +4 -4
  174. package/build/{context.constants-4kkNHBzR.js.map → context.constants-Bz_5itIx.js.map} +1 -1
  175. package/build/context.constants-CTfUKury.cjs.map +1 -1
  176. package/build/{context.constants-DKCD80Pp.cjs → context.constants-CV8ycctl.cjs} +2 -2
  177. package/build/{context.constants-DKCD80Pp.cjs.map → context.constants-CV8ycctl.cjs.map} +1 -1
  178. package/build/{context.hooks-DGmZRxkb.cjs → context.hooks-BDEwJHqB.cjs} +2 -2
  179. package/build/{context.hooks-DGmZRxkb.cjs.map → context.hooks-BDEwJHqB.cjs.map} +1 -1
  180. package/build/{context.hooks-Cfr2Mp8e.js → context.hooks-DTdppyho.js} +3 -3
  181. package/build/{context.hooks-Cfr2Mp8e.js.map → context.hooks-DTdppyho.js.map} +1 -1
  182. package/build/index.cjs.js +1 -1
  183. package/build/index.d.ts +37 -21
  184. package/build/index.es.js +40 -39
  185. package/build/{style-BVejuajH.cjs → style-B5u4pW5G.cjs} +2 -2
  186. package/build/{style-BVejuajH.cjs.map → style-B5u4pW5G.cjs.map} +1 -1
  187. package/build/{style-CQOBaUTO.js → style-BQ653xOS.js} +3 -3
  188. package/build/{style-CQOBaUTO.js.map → style-BQ653xOS.js.map} +1 -1
  189. package/build/style-error.cjs.js +1 -1
  190. package/build/style-error.es.js +1 -1
  191. package/build/style-theme.cjs.js +1 -1
  192. package/build/style-theme.d.ts +5 -4
  193. package/build/style-theme.es.js +1 -1
  194. package/build/theme.global-B9t2Fi10.cjs +173 -0
  195. package/build/theme.global-B9t2Fi10.cjs.map +1 -0
  196. package/build/{theme.global-DuEXPcSK.js → theme.global-CFUz5Asg.js} +70 -1
  197. package/build/theme.global-CFUz5Asg.js.map +1 -0
  198. package/build/{use-D0mgQexh.cjs → use-D7IsSb34.cjs} +2 -2
  199. package/build/{use-D0mgQexh.cjs.map → use-D7IsSb34.cjs.map} +1 -1
  200. package/build/{use-BsyZ6-h6.js → use-DTZ8c8_g.js} +5 -5
  201. package/build/{use-BsyZ6-h6.js.map → use-DTZ8c8_g.js.map} +1 -1
  202. package/package.json +2 -1
  203. package/build/component-CMkU2lIg.cjs.map +0 -1
  204. package/build/component-CmotrA_9.js.map +0 -1
  205. package/build/component-D7A-4DNQ.cjs.map +0 -1
  206. package/build/component-vpCWcIhC.js.map +0 -1
  207. package/build/component.components-BPIVZi-R.js.map +0 -1
  208. package/build/component.components-BWWKHxKD.cjs.map +0 -1
  209. package/build/component.styles-CbkvPvEl.cjs +0 -22
  210. package/build/component.styles-CbkvPvEl.cjs.map +0 -1
  211. package/build/component.styles-DYAuT7U2.js.map +0 -1
  212. package/build/component.types-D05KdxnZ.js.map +0 -1
  213. package/build/component.types-gy5Q9qHX.cjs.map +0 -1
  214. package/build/theme.global-B9wIU_rF.cjs +0 -173
  215. package/build/theme.global-B9wIU_rF.cjs.map +0 -1
  216. package/build/theme.global-DuEXPcSK.js.map +0 -1
@@ -1,4 +1,4 @@
1
- "use strict";const e=require("./jsx-runtime-BcGej2Kr.cjs"),i=require("framer-motion"),t=require("react"),s=require("./component-CMkU2lIg.cjs"),n=require("./component.styles-DLU0S0KI.cjs"),o=require("styled-components"),a=require("./component-BV_7tGiu.cjs"),l=require("./component-CeWNemV1.cjs"),d=require("./context.constants-CTfUKury.cjs"),r=require("./theme.global-B9wIU_rF.cjs"),u=require("./component.styles-CbkvPvEl.cjs"),c=o(i.motion.div)`
1
+ "use strict";const e=require("./jsx-runtime-BcGej2Kr.cjs"),i=require("framer-motion"),t=require("react"),s=require("./component-u_42PteJ.cjs"),n=require("./component.styles-DLU0S0KI.cjs"),o=require("styled-components"),a=require("./component-BV_7tGiu.cjs"),l=require("./component-CACoGUK9.cjs"),d=require("./context.constants-CTfUKury.cjs"),r=require("./theme.global-B9t2Fi10.cjs"),u=require("./component.styles-DSle6iuF.cjs"),c=o(i.motion.div)`
2
2
  display: flex;
3
3
  position: absolute;
4
4
  height: 100%;
@@ -19,4 +19,4 @@
19
19
  opacity: 0.8;
20
20
  cursor: pointer;
21
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})},m={duration:.3,ease:[.56,.03,.12,1.04]},g=({params:t,remove:o})=>{var d,r,u,g,h,v,f,j;return e.jsxRuntimeExports.jsxs(a.Stack,{sx:{default:{position:"relative",overflow:"hidden",aspectRatio:2*(null==t?void 0:t.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:m,...(null==t?void 0:t.isLengthOne)?{}:{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==(r=null==(d=(null==t?void 0:t.images)??[])?void 0:d[(null==t?void 0:t.activeImageIndex)??0])?void 0:r.imageSrc,src:null==(g=null==(u=(null==t?void 0:t.images)??[])?void 0:u[(null==t?void 0:t.activeImageIndex)??0])?void 0:g.imageSrc,componentFallback:e.jsxRuntimeExports.jsx(l.Typography,{sx:{default:{variant:"h6"}},children:null==t?void 0:t.failedToLoad})}),null==(v=null==(h=(null==t?void 0:t.images)??[])?void 0:h[(null==t?void 0:t.activeImageIndex)??0])?void 0:v.children]},null==t?void 0:t.activeImageId)}),"function"==typeof(null==t?void 0:t.children)?null==(f=null==t?void 0:t.children)?void 0:f.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==o?void 0:o()}),(null==t?void 0:t.isLengthOne)?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==(j=(null==t?void 0:t.images)??[])?void 0:j.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))})]})]})},h={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})},v={duration:.3,ease:[.56,.03,.12,1.04]},f=[{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=f,exports.ImageSlider=o=>{var p,m,f,j;const{onIndexChange:b}=o,y=t.useMemo(()=>o.images,[o.images]),I=t.useMemo(()=>r.KEY_SIZE_DATA[o.size],[o.size]),w=t.useMemo(()=>`${I.radius}px`,[I.radius]),{isLengthZero:E,direction:R,activeImageId:k,isLengthOne:S,dragEndHandler:z,activeImageIndex:C,swipeToImage:A,skipToImage:T,handleAdd:B}=(i=>{var s;const{onIndexChange:n}=i,o=t.useMemo(()=>r.KEY_SIZE_DATA[i.size],[i.size]),a=t.useMemo(()=>`${o.radius}px`,[o.radius]),l=t.useMemo(()=>i.images,[i.images]),[{activeImageId:u,direction:c},x]=t.useState({activeImageId:(null==(s=null==l?void 0:l[0])?void 0:s.id)??null,direction:0}),p=t.useMemo(()=>1===(null==l?void 0:l.length),[l]),m=t.useMemo(()=>0===(null==l?void 0:l.length),[l]),h=t.useMemo(()=>l.findIndex(e=>e.id===u),[u,l]),v=t.useCallback(e=>{const i=(l.findIndex(e=>e.id===u)+e+l.length)%l.length;x({activeImageId:l[i].id,direction:e})},[u,l]),f=t.useCallback(e=>{const{offset:i,velocity:t}=e,s=Math.abs(i.x)*t.x;s>500||i.x>50?v(-1):(s<-500||i.x<-50)&&v(1)},[v]),j=t.useCallback(e=>{const i=l.findIndex(e=>e.id===u),t=l.findIndex(i=>i.id===e);-1!==t&&t!==i&&x({activeImageId:e,direction:t>i?1:-1})},[u,l]);t.useEffect(()=>{u&&(null==n||n(u))},[u,n]);const{add:b}=d.useDialog({br:a,dragEndHandler:f,images:l,children:i.children,activeImageIndex:h,activeImageId:u,swipeToImage:v,skipToImage:j,direction:c,aspect:i.imageSettings.aspect,genre:i.genre,size:i.size,failedToLoad:i.locales.failedToLoad,isLengthOne:p,propsDialog:{borderRadius:a,padding:"0",background:"whiteStandard"}}),y=t.useCallback(()=>{b({content:(i,t)=>e.jsxRuntimeExports.jsx(g,{params:i,remove:t})})},[b]);return{isLengthZero:m,direction:c,activeImageId:u,isLengthOne:p,dragEndHandler:f,activeImageIndex:h,swipeToImage:v,skipToImage:j,handleAdd:y}})({genre:o.genre,size:o.size,images:y,imageSettings:o.imageSettings,locales:o.locales,onIndexChange:b,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:w,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"})}):E?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:R,children:e.jsxRuntimeExports.jsxs(c,{style:{overflow:"hidden",borderRadius:w},custom:R,variants:h,initial:"initial",animate:"active",exit:"exit",transition:v,...S?{}:{drag:"x",dragConstraints:{left:0,right:0},dragElastic:.5,onDragEnd:(e,i)=>z(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==(p=y[C])?void 0:p.imageSrc,src:null==(m=y[C])?void 0:m.imageSrc,componentFallback:e.jsxRuntimeExports.jsx(l.Typography,{sx:{default:{variant:"h6"}},children:o.locales.failedToLoad})}),null==(f=y[C])?void 0:f.children]},k)}),"function"==typeof(null==o?void 0:o.children)?null==(j=null==o?void 0:o.children)?void 0:j.call(o,{isDialog:!1}):null==o?void 0:o.children,!S&&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:()=>A(-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:()=>A(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:()=>T(i.id),initial:!1,animate:{scale:k===i.id?1.5:1,opacity:k===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:()=>B()})]})})},exports.SliderDot=x,exports.SliderImage=c;
22
- //# sourceMappingURL=component.constants-D8QVKsqc.cjs.map
22
+ //# sourceMappingURL=component.constants-DwRduxMm.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"component.constants-D8QVKsqc.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 { 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, useDialogProps } from '@local/contexts/context-dialog';\nimport { KEY_SIZE_DATA } from '@local/theme';\n\nimport { AnimatePresence, PanInfo, Variants } from 'framer-motion';\nimport { FC, useCallback, useEffect, useMemo, useState } from 'react';\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<ComponentHandleAddProps>({\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 aspect: props.imageSettings.aspect,\n genre: props.genre,\n size: props.size,\n failedToLoad: props.locales.failedToLoad,\n isLengthOne: isLengthOne,\n propsDialog: {\n borderRadius: br,\n padding: '0',\n background: 'whiteStandard',\n },\n });\n const handleAdd = useCallback(() => {\n add({\n content: (params, remove) => <ComponentHandleAdd params={params} remove={remove} />,\n });\n }, [add]);\n\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\ntype ComponentHandleAddProps = {\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 aspect: number;\n failedToLoad: string;\n isLengthOne: boolean;\n} & Pick<ImageSliderProps, 'genre' | 'size'>;\n\nconst ComponentHandleAdd: FC<{\n params?: useDialogProps<ComponentHandleAddProps>;\n remove?: () => void;\n}> = ({ params, remove }) => {\n return (\n <Stack\n sx={{\n default: {\n position: 'relative',\n overflow: 'hidden',\n aspectRatio: `${params?.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 {...(!params?.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 {params?.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 {!params?.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","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","ComponentHandleAdd","params","remove","jsxs","Stack","sx","default","position","overflow","aspectRatio","aspect","width","maxWidth","height","borderRadius","br","tablet","children","jsx","AnimatePresence","custom","style","variants","animate","transition","isLengthOne","drag","dragConstraints","left","right","dragElastic","onDragEnd","_","dragInfo","dragEndHandler","Image","sxStack","alignItems","justifyContent","backgroundColor","black10","pointerEvents","isShowBeforeImage","sxImage","objectFit","alt","_b","images","_a","activeImageIndex","imageSrc","src","_d","_c","componentFallback","Typography","variant","failedToLoad","_f","_e","activeImageId","_g","call","isDialog","Button","bottom","genre","size","icons","type","name","isWidthAsHeight","isHiddenBorder","isRadius","onClick","Fragment","gap","turn","isPlaystationEffect","swipeToImage","transform","map","i","skipToImage","id","IMAGES","padding","flexGrow","isDisabled","sxTypography","weight","onIndexChange","useMemo","KEY_SIZE_DATA","radius","isLengthZero","handleAdd","setActiveImage","useState","length","findIndex","img","useCallback","swipeDirection","nextIndex","offset","velocity","swipePower","Math","abs","imageId","currentIndex","newIndex","useEffect","add","useDialog","imageSettings","locales","propsDialog","background","content","useImageSlider","StackMotion","propsStack","flexDirection","_h","_i","isLoading","display","Icon","primaryColor","noImagesAvailable","top"],"mappings":"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"}
1
+ {"version":3,"file":"component.constants-DwRduxMm.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 { 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, useDialogProps } from '@local/contexts/context-dialog';\nimport { KEY_SIZE_DATA } from '@local/theme';\n\nimport { AnimatePresence, PanInfo, Variants } from 'framer-motion';\nimport { FC, useCallback, useEffect, useMemo, useState } from 'react';\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<ComponentHandleAddProps>({\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 aspect: props.imageSettings.aspect,\n genre: props.genre,\n size: props.size,\n failedToLoad: props.locales.failedToLoad,\n isLengthOne: isLengthOne,\n propsDialog: {\n borderRadius: br,\n padding: '0',\n background: 'whiteStandard',\n },\n });\n const handleAdd = useCallback(() => {\n add({\n content: (params, remove) => <ComponentHandleAdd params={params} remove={remove} />,\n });\n }, [add]);\n\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\ntype ComponentHandleAddProps = {\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 aspect: number;\n failedToLoad: string;\n isLengthOne: boolean;\n} & Pick<ImageSliderProps, 'genre' | 'size'>;\n\nconst ComponentHandleAdd: FC<{\n params?: useDialogProps<ComponentHandleAddProps>;\n remove?: () => void;\n}> = ({ params, remove }) => {\n return (\n <Stack\n sx={{\n default: {\n position: 'relative',\n overflow: 'hidden',\n aspectRatio: `${params?.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 {...(!params?.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 {params?.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 {!params?.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","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","ComponentHandleAdd","params","remove","jsxs","Stack","sx","default","position","overflow","aspectRatio","aspect","width","maxWidth","height","borderRadius","br","tablet","children","jsx","AnimatePresence","custom","style","variants","animate","transition","isLengthOne","drag","dragConstraints","left","right","dragElastic","onDragEnd","_","dragInfo","dragEndHandler","Image","sxStack","alignItems","justifyContent","backgroundColor","black10","pointerEvents","isShowBeforeImage","sxImage","objectFit","alt","_b","images","_a","activeImageIndex","imageSrc","src","_d","_c","componentFallback","Typography","variant","failedToLoad","_f","_e","activeImageId","_g","call","isDialog","Button","bottom","genre","size","icons","type","name","isWidthAsHeight","isHiddenBorder","isRadius","onClick","Fragment","gap","turn","isPlaystationEffect","swipeToImage","transform","map","i","skipToImage","id","IMAGES","padding","flexGrow","isDisabled","sxTypography","weight","onIndexChange","useMemo","KEY_SIZE_DATA","radius","isLengthZero","handleAdd","setActiveImage","useState","length","findIndex","img","useCallback","swipeDirection","nextIndex","offset","velocity","swipePower","Math","abs","imageId","currentIndex","newIndex","useEffect","add","useDialog","imageSettings","locales","propsDialog","background","content","useImageSlider","StackMotion","propsStack","flexDirection","_h","_i","isLoading","display","Icon","primaryColor","noImagesAvailable","top"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- "use strict";const t=require("./jsx-runtime-BcGej2Kr.cjs"),n=require("framer-motion"),e=require("react"),i=require("./component-CMkU2lIg.cjs"),o=require("./component-BV_7tGiu.cjs"),s=12;exports.DEFAULT_COMPONENT_PAGINATION_GAP=s,exports.Pagination=l=>{const a=e.useMemo(()=>0==l.index&&!l.isInfinity,[l.index,l.isInfinity]),r=e.useMemo(()=>l.index==l.length-1&&!l.isInfinity,[l.index,l.isInfinity,l.length]),u=e.useMemo(()=>l.gap??s,[l.gap]),d=e.useMemo(()=>l.lengthData??{},[l.lengthData]),x=e.useCallback(()=>{0==l.index?l.isInfinity&&l.changeIndex(l.length-1):l.changeIndex(l.index-1)},[l]),c=e.useCallback(()=>{l.index==l.length-1?l.isInfinity&&l.changeIndex(0):l.changeIndex(l.index+1)},[l]),h=e.useMemo(()=>{const t=Math.floor(l.viewQuantity/2),n=Math.max(0,Math.min(l.index-t,l.length-l.viewQuantity)),e=Math.min(l.length,n+l.viewQuantity);return Array.from({length:e-n},(t,e)=>n+e)},[l.index,l.viewQuantity,l.length]);return t.jsxRuntimeExports.jsxs(o.Stack,{sx:t=>({...null==l?void 0:l.sx,default:{height:"fit-content",gap:`${u}px`,...(null==l?void 0:l.sx)?"function"==typeof(null==l?void 0:l.sx)?null==l?void 0:l.sx(t).default:null==l?void 0:l.sx.default:{}}}),children:[t.jsxRuntimeExports.jsx(i.Button,{isDisabled:a,isHidden:a,onClick:x,...l.buttonControl,icons:[{type:"id",name:"Arrow2",order:-1,turn:90}],children:!l.buttonControl.isWidthAsHeight&&l.locale.prev}),t.jsxRuntimeExports.jsx(o.Stack,{sx:{default:{width:"fit-content",height:"fit-content",display:"flex",gap:`${u}px`,alignItems:"center",justifyContent:"flex-start"}},children:Array.from({length:l.length}).map((e,o)=>{var s,a;const r=h.includes(o);return t.jsxRuntimeExports.jsx(n.AnimatePresence,{mode:"popLayout",children:r&&t.jsxRuntimeExports.jsx(n.motion.div,{layout:!0,initial:{opacity:0,scale:.8},animate:{opacity:1,scale:1},exit:{opacity:0,scale:.8},transition:{duration:1,ease:"backOut"},children:t.jsxRuntimeExports.jsx(i.Button,{isWidthAsHeight:!0,...o===l.index?l.buttonCount.active:l.buttonCount.inactive,...null==d?void 0:d[o],onClick:()=>l.changeIndex(o),children:(null==(a=null==(s=null==d?void 0:d[o])?void 0:s.icons)?void 0:a.length)?null:o+1})})},o)})}),t.jsxRuntimeExports.jsx(i.Button,{isDisabled:r,isHidden:r,onClick:c,...l.buttonControl,icons:[{type:"id",name:"Arrow2",turn:-90}],children:!l.buttonControl.isWidthAsHeight&&l.locale.next})]})};
2
- //# sourceMappingURL=component.constants-DyKCJRH3.cjs.map
1
+ "use strict";const t=require("./jsx-runtime-BcGej2Kr.cjs"),n=require("framer-motion"),e=require("react"),i=require("./component-u_42PteJ.cjs"),o=require("./component-BV_7tGiu.cjs"),s=12;exports.DEFAULT_COMPONENT_PAGINATION_GAP=s,exports.Pagination=l=>{const a=e.useMemo(()=>0==l.index&&!l.isInfinity,[l.index,l.isInfinity]),r=e.useMemo(()=>l.index==l.length-1&&!l.isInfinity,[l.index,l.isInfinity,l.length]),u=e.useMemo(()=>l.gap??s,[l.gap]),d=e.useMemo(()=>l.lengthData??{},[l.lengthData]),x=e.useCallback(()=>{0==l.index?l.isInfinity&&l.changeIndex(l.length-1):l.changeIndex(l.index-1)},[l]),c=e.useCallback(()=>{l.index==l.length-1?l.isInfinity&&l.changeIndex(0):l.changeIndex(l.index+1)},[l]),h=e.useMemo(()=>{const t=Math.floor(l.viewQuantity/2),n=Math.max(0,Math.min(l.index-t,l.length-l.viewQuantity)),e=Math.min(l.length,n+l.viewQuantity);return Array.from({length:e-n},(t,e)=>n+e)},[l.index,l.viewQuantity,l.length]);return t.jsxRuntimeExports.jsxs(o.Stack,{sx:t=>({...null==l?void 0:l.sx,default:{height:"fit-content",gap:`${u}px`,...(null==l?void 0:l.sx)?"function"==typeof(null==l?void 0:l.sx)?null==l?void 0:l.sx(t).default:null==l?void 0:l.sx.default:{}}}),children:[t.jsxRuntimeExports.jsx(i.Button,{isDisabled:a,isHidden:a,onClick:x,...l.buttonControl,icons:[{type:"id",name:"Arrow2",order:-1,turn:90}],children:!l.buttonControl.isWidthAsHeight&&l.locale.prev}),t.jsxRuntimeExports.jsx(o.Stack,{sx:{default:{width:"fit-content",height:"fit-content",display:"flex",gap:`${u}px`,alignItems:"center",justifyContent:"flex-start"}},children:Array.from({length:l.length}).map((e,o)=>{var s,a;const r=h.includes(o);return t.jsxRuntimeExports.jsx(n.AnimatePresence,{mode:"popLayout",children:r&&t.jsxRuntimeExports.jsx(n.motion.div,{layout:!0,initial:{opacity:0,scale:.8},animate:{opacity:1,scale:1},exit:{opacity:0,scale:.8},transition:{duration:1,ease:"backOut"},children:t.jsxRuntimeExports.jsx(i.Button,{isWidthAsHeight:!0,...o===l.index?l.buttonCount.active:l.buttonCount.inactive,...null==d?void 0:d[o],onClick:()=>l.changeIndex(o),children:(null==(a=null==(s=null==d?void 0:d[o])?void 0:s.icons)?void 0:a.length)?null:o+1})})},o)})}),t.jsxRuntimeExports.jsx(i.Button,{isDisabled:r,isHidden:r,onClick:c,...l.buttonControl,icons:[{type:"id",name:"Arrow2",turn:-90}],children:!l.buttonControl.isWidthAsHeight&&l.locale.next})]})};
2
+ //# sourceMappingURL=component.constants-veAUxKBd.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"component.constants-DyKCJRH3.cjs","sources":["../src/components/pagination/component.constants.ts","../src/components/pagination/component.tsx"],"sourcesContent":["export const DEFAULT_COMPONENT_PAGINATION_GAP = 12\n","import { AnimatePresence, motion } from 'framer-motion'\nimport { FC, useCallback, useMemo } from 'react'\n\nimport { Button } from '@local/components/button'\nimport { Stack } from '@local/components/stack'\n\nimport { DEFAULT_COMPONENT_PAGINATION_GAP, PaginationProps } from '.'\n\nexport const Pagination: FC<PaginationProps> = props => {\n const isDisabledPrevious = useMemo(() => props.index == 0 && !props.isInfinity, [props.index, props.isInfinity])\n const isDisabledNext = useMemo(\n () => props.index == props.length - 1 && !props.isInfinity,\n [props.index, props.isInfinity, props.length]\n )\n\n const gap = useMemo(() => props.gap ?? DEFAULT_COMPONENT_PAGINATION_GAP, [props.gap])\n const lengthData = useMemo(() => props.lengthData ?? {}, [props.lengthData])\n const handlePrevious = useCallback(() => {\n if (props.index == 0) {\n if (props.isInfinity) {\n props.changeIndex(props.length - 1)\n }\n } else {\n props.changeIndex(props.index - 1)\n }\n }, [props])\n\n const handleNext = useCallback(() => {\n if (props.index == props.length - 1) {\n if (props.isInfinity) {\n props.changeIndex(0)\n }\n } else {\n props.changeIndex(props.index + 1)\n }\n }, [props])\n\n const visibleButtons = useMemo(() => {\n const half = Math.floor(props.viewQuantity / 2)\n const start = Math.max(0, Math.min(props.index - half, props.length - props.viewQuantity))\n const end = Math.min(props.length, start + props.viewQuantity)\n return Array.from({ length: end - start }, (_, i) => start + i)\n }, [props.index, props.viewQuantity, props.length])\n\n return (\n <Stack\n sx={theme => ({\n ...props?.sx,\n default: {\n height: 'fit-content',\n gap: `${gap}px`,\n ...(props?.sx ? (typeof props?.sx === 'function' ? props?.sx(theme).default : props?.sx.default) : {})\n }\n })}\n >\n <Button\n isDisabled={isDisabledPrevious}\n isHidden={isDisabledPrevious}\n onClick={handlePrevious}\n {...props.buttonControl}\n icons={[\n {\n type: 'id',\n name: 'Arrow2',\n order: -1,\n turn: 90\n }\n ]}\n >\n {!props.buttonControl.isWidthAsHeight && props.locale.prev}\n </Button>\n\n <Stack\n sx={{\n default: {\n width: 'fit-content',\n height: 'fit-content',\n display: 'flex',\n gap: `${gap}px`,\n alignItems: 'center',\n justifyContent: 'flex-start'\n }\n }}\n >\n {Array.from({ length: props.length }).map((_, i) => {\n const isVisible = visibleButtons.includes(i)\n return (\n <AnimatePresence key={i} mode=\"popLayout\">\n {isVisible && (\n <motion.div\n layout\n initial={{\n opacity: 0,\n scale: 0.8\n }}\n animate={{\n opacity: 1,\n scale: 1\n }}\n exit={{\n opacity: 0,\n scale: 0.8\n }}\n transition={{ duration: 1, ease: 'backOut' }}\n >\n <Button\n isWidthAsHeight\n {...(i === props.index ? props.buttonCount.active : props.buttonCount.inactive)}\n {...lengthData?.[i]}\n onClick={() => props.changeIndex(i)}\n >\n {lengthData?.[i]?.icons?.length ? null : i + 1}\n </Button>\n </motion.div>\n )}\n </AnimatePresence>\n )\n })}\n </Stack>\n\n <Button\n isDisabled={isDisabledNext}\n isHidden={isDisabledNext}\n onClick={handleNext}\n {...props.buttonControl}\n icons={[\n {\n type: 'id',\n name: 'Arrow2',\n turn: -90\n }\n ]}\n >\n {!props.buttonControl.isWidthAsHeight && props.locale.next}\n </Button>\n </Stack>\n )\n}\n"],"names":["DEFAULT_COMPONENT_PAGINATION_GAP","props","isDisabledPrevious","useMemo","index","isInfinity","isDisabledNext","length","gap","lengthData","handlePrevious","useCallback","changeIndex","handleNext","visibleButtons","half","Math","floor","viewQuantity","start","max","min","end","Array","from","_","i","jsxs","Stack","sx","theme","default","height","children","jsx","Button","isDisabled","isHidden","onClick","buttonControl","icons","type","name","order","turn","isWidthAsHeight","locale","prev","width","display","alignItems","justifyContent","map","isVisible","includes","AnimatePresence","mode","motion","div","layout","initial","opacity","scale","animate","exit","transition","duration","ease","buttonCount","active","inactive","next"],"mappings":"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"}
1
+ {"version":3,"file":"component.constants-veAUxKBd.cjs","sources":["../src/components/pagination/component.constants.ts","../src/components/pagination/component.tsx"],"sourcesContent":["export const DEFAULT_COMPONENT_PAGINATION_GAP = 12\n","import { AnimatePresence, motion } from 'framer-motion'\nimport { FC, useCallback, useMemo } from 'react'\n\nimport { Button } from '@local/components/button'\nimport { Stack } from '@local/components/stack'\n\nimport { DEFAULT_COMPONENT_PAGINATION_GAP, PaginationProps } from '.'\n\nexport const Pagination: FC<PaginationProps> = props => {\n const isDisabledPrevious = useMemo(() => props.index == 0 && !props.isInfinity, [props.index, props.isInfinity])\n const isDisabledNext = useMemo(\n () => props.index == props.length - 1 && !props.isInfinity,\n [props.index, props.isInfinity, props.length]\n )\n\n const gap = useMemo(() => props.gap ?? DEFAULT_COMPONENT_PAGINATION_GAP, [props.gap])\n const lengthData = useMemo(() => props.lengthData ?? {}, [props.lengthData])\n const handlePrevious = useCallback(() => {\n if (props.index == 0) {\n if (props.isInfinity) {\n props.changeIndex(props.length - 1)\n }\n } else {\n props.changeIndex(props.index - 1)\n }\n }, [props])\n\n const handleNext = useCallback(() => {\n if (props.index == props.length - 1) {\n if (props.isInfinity) {\n props.changeIndex(0)\n }\n } else {\n props.changeIndex(props.index + 1)\n }\n }, [props])\n\n const visibleButtons = useMemo(() => {\n const half = Math.floor(props.viewQuantity / 2)\n const start = Math.max(0, Math.min(props.index - half, props.length - props.viewQuantity))\n const end = Math.min(props.length, start + props.viewQuantity)\n return Array.from({ length: end - start }, (_, i) => start + i)\n }, [props.index, props.viewQuantity, props.length])\n\n return (\n <Stack\n sx={theme => ({\n ...props?.sx,\n default: {\n height: 'fit-content',\n gap: `${gap}px`,\n ...(props?.sx ? (typeof props?.sx === 'function' ? props?.sx(theme).default : props?.sx.default) : {})\n }\n })}\n >\n <Button\n isDisabled={isDisabledPrevious}\n isHidden={isDisabledPrevious}\n onClick={handlePrevious}\n {...props.buttonControl}\n icons={[\n {\n type: 'id',\n name: 'Arrow2',\n order: -1,\n turn: 90\n }\n ]}\n >\n {!props.buttonControl.isWidthAsHeight && props.locale.prev}\n </Button>\n\n <Stack\n sx={{\n default: {\n width: 'fit-content',\n height: 'fit-content',\n display: 'flex',\n gap: `${gap}px`,\n alignItems: 'center',\n justifyContent: 'flex-start'\n }\n }}\n >\n {Array.from({ length: props.length }).map((_, i) => {\n const isVisible = visibleButtons.includes(i)\n return (\n <AnimatePresence key={i} mode=\"popLayout\">\n {isVisible && (\n <motion.div\n layout\n initial={{\n opacity: 0,\n scale: 0.8\n }}\n animate={{\n opacity: 1,\n scale: 1\n }}\n exit={{\n opacity: 0,\n scale: 0.8\n }}\n transition={{ duration: 1, ease: 'backOut' }}\n >\n <Button\n isWidthAsHeight\n {...(i === props.index ? props.buttonCount.active : props.buttonCount.inactive)}\n {...lengthData?.[i]}\n onClick={() => props.changeIndex(i)}\n >\n {lengthData?.[i]?.icons?.length ? null : i + 1}\n </Button>\n </motion.div>\n )}\n </AnimatePresence>\n )\n })}\n </Stack>\n\n <Button\n isDisabled={isDisabledNext}\n isHidden={isDisabledNext}\n onClick={handleNext}\n {...props.buttonControl}\n icons={[\n {\n type: 'id',\n name: 'Arrow2',\n turn: -90\n }\n ]}\n >\n {!props.buttonControl.isWidthAsHeight && props.locale.next}\n </Button>\n </Stack>\n )\n}\n"],"names":["DEFAULT_COMPONENT_PAGINATION_GAP","props","isDisabledPrevious","useMemo","index","isInfinity","isDisabledNext","length","gap","lengthData","handlePrevious","useCallback","changeIndex","handleNext","visibleButtons","half","Math","floor","viewQuantity","start","max","min","end","Array","from","_","i","jsxs","Stack","sx","theme","default","height","children","jsx","Button","isDisabled","isHidden","onClick","buttonControl","icons","type","name","order","turn","isWidthAsHeight","locale","prev","width","display","alignItems","justifyContent","map","isVisible","includes","AnimatePresence","mode","motion","div","layout","initial","opacity","scale","animate","exit","transition","duration","ease","buttonCount","active","inactive","next"],"mappings":"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"}
@@ -1,4 +1,4 @@
1
- "use strict";const e=require("./jsx-runtime-BcGej2Kr.cjs"),t=require("./consts.cjs.js"),s=require("./use-D0mgQexh.cjs"),i=require("./component-CMkU2lIg.cjs"),r=require("./component.styles-DLU0S0KI.cjs"),o=require("./component-BV_7tGiu.cjs"),n=require("styled-components"),a=require("./component-CeWNemV1.cjs"),l=require("./context.constants-CTfUKury.cjs"),d=require("./theme.global-B9wIU_rF.cjs"),u=require("react"),c=require("./style-BVejuajH.cjs"),g=require("framer-motion"),p=require("./style-fRZ6xrVp.cjs"),m=n.css`
1
+ "use strict";const e=require("./jsx-runtime-BcGej2Kr.cjs"),t=require("./consts.cjs.js"),s=require("./use-D7IsSb34.cjs"),i=require("./component-u_42PteJ.cjs"),r=require("./component.styles-DLU0S0KI.cjs"),o=require("./component-BV_7tGiu.cjs"),n=require("styled-components"),a=require("./component-CACoGUK9.cjs"),l=require("./context.constants-CTfUKury.cjs"),d=require("./theme.global-B9t2Fi10.cjs"),u=require("react"),c=require("./style-B5u4pW5G.cjs"),g=require("framer-motion"),p=require("./style-fRZ6xrVp.cjs"),m=n.css`
2
2
  ${e=>n.css`
3
3
  background: ${e.theme.colors.imageSelect[e.$genre].background.rest};
4
4
  color: ${e.theme.colors.imageSelect[e.$genre].color.rest};
@@ -36,4 +36,4 @@
36
36
  ${m}
37
37
  ${x}
38
38
  `;exports.ImageSelect=p=>{const{onChange:m}=p,x=u.useMemo(()=>d.KEY_SIZE_DATA[p.size],[p.size]),[h,j]=u.useState(p.images||[]),[f,v]=u.useState(!1),$=u.useRef(null),y=n.useTheme(),E=u.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}=s.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 s=u.useMemo(()=>d.KEY_SIZE_DATA[t.size],[t.size]),n=u.useMemo(()=>`${s.radius}px`,[s.radius]),{add:c}=l.useDialog({br:n,propsDialog:{borderRadius:n,padding:"0",background:"whiteStandard"}});return{handleAdd:u.useCallback(s=>{c({content:(n,l)=>e.jsxRuntimeExports.jsxs(o.Stack,{sx:{default:{position:"relative",overflow:"hidden",aspectRatio:2*t.imageSettings.aspect+" / 2",width:"auto",maxWidth:"70dvw",height:"85dvh",borderRadius:null==n?void 0:n.br},tablet:{maxWidth:"95dvw"}},children:[e.jsxRuntimeExports.jsx(r.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(a.Typography,{sx:{default:{variant:"h6"}},children:t.locale.imageFallback})}),e.jsxRuntimeExports.jsx(i.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==l?void 0:l()})]})})},[c,t.imageSettings.aspect,t.locale.imageFallback])}})({size:p.size,locale:p.locale,imageSettings:p.imageSettings,genre:p.genre});return u.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(g.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(t=>t.url&&e.jsxRuntimeExports.jsxs(g.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(r.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:t.name||"image",src:t.url,componentFallback:e.jsxRuntimeExports.jsx(a.Typography,{sx:{default:{variant:"h6"}},children:p.locale.imageFallback})}),e.jsxRuntimeExports.jsx(i.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=t.id,void j(t=>{const s=t.filter(t=>t.id!==e);return null==m||m(s),s});var e}}),e.jsxRuntimeExports.jsx(i.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:()=>t.url&&k({id:t.id,imageSrc:t.url})})]},t.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(a.Typography,{style:{color:y.colors.imageSelect[p.genre].color.rest},sx:{default:{}},children:p.locale.dragAndDrop})},"empty"):null]}),e.jsxRuntimeExports.jsx("input",{ref:$,type:"file",accept:t.ImageSupportedFormatsForInput,multiple:!0,style:{display:"none"},onChange:e=>{e.target.files&&R(e.target.files)}})]}),e.jsxRuntimeExports.jsxs(o.Stack,{sx:{default:{flexGrow:1,gap:x.padding-2+"px"}},children:[e.jsxRuntimeExports.jsx(i.Button,{type:"button",genre:p.genre,size:p.size,sx:{default:{flexGrow:3}},isRadius:!0,onClick:z,children:p.locale.buttonAdd}),e.jsxRuntimeExports.jsx(i.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(c.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-CKLd9UoP.cjs.map
39
+ //# sourceMappingURL=component.styles--Ug3PJQ6.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"component.styles-CKLd9UoP.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 { 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 { motion } from 'framer-motion';\nimport { DragEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport { Button } from '../button';\nimport { Image } from '../image';\nimport { Stack } from '../stack';\nimport { Typography } from '../typography';\nimport { ImageSelectItemProps, ImageSelectListWrapper, ImageSelectProps, ImageSelectWrapper } from '.';\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 ) : null}\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 { 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 { useCallback, useMemo } from 'react'\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":"+fASMA,EAAuBC,EAAAA,GAAAA;IACzBC,GAASD,EAAAA,GAAAA;kBACKC,EAAMC,MAAMC,OAAOC,YAAYH,EAAMI,QAAQC,WAAWC;aAC7DN,EAAMC,MAAMC,OAAOC,YAAYH,EAAMI,QAAQG,MAAMD;;oBAE5CN,EAAMC,MAAMC,OAAOC,YAAYH,EAAMI,QAAQC,WAAWC;eAC7DN,EAAMC,MAAMC,OAAOC,YAAYH,EAAMI,QAAQG,MAAMD;;;oBAG9CN,EAAMC,MAAMC,OAAOC,YAAYH,EAAMI,QAAQC,WAAWC;eAC7DN,EAAMC,MAAMC,OAAOC,YAAYH,EAAMI,QAAQG,MAAMD;;;EAKrDE,EAAsBT,EAAAA,GAAAA;OACtBU,EAA+BC,EAAAA,cAAcV,EAAMW;EAEnDF,EAAkCT,GAAqCD,EAAAA,GAAAA;aACvEC,EAAMY;mBACAZ,EAAMa;EAEZC,EAAkBf,EAAAA,GAAAA;OAClBgB,EAA2BL,EAAAA,cAAcV,EAAMW;EAE/CI,EAA8Bf,GAAqCD,EAAAA,GAAAA;SACvEC,EAAMY,QAAU;EAEZI,EAAqBC,EAAOC,GAAA;;;;IAIrCJ;IACAK;IACAC;EAESC,EAAyBJ,EAAOK,EAAAA,OAAOJ,IAAG;;;;;;IAMnDpB;IACAU;sBCpCwBR,IAC1B,MAAMuB,SAAEA,GAAavB,EAEfwB,EAAOC,UAAQ,IAAMf,gBAAcV,EAAMwB,MAAO,CAACxB,EAAMwB,QAEtDE,EAAQC,GAAaC,EAAAA,SAAiC5B,EAAM0B,QAAU,KAEtEG,EAAgBC,GAAqBF,EAAAA,UAAS,GAE/CG,EAAWC,EAAAA,OAAgC,MAE3C/B,EAAQgC,EAAAA,WAiBRC,EAAeC,EAAAA,YAClBC,IACKA,GACFT,EAAWU,IACT,MAAMC,EAAYF,EAAMG,IAAI,CAACC,EAAMC,KAAA,IAC9BD,EACHE,MAAOL,EAAKM,OAASF,KAEjBG,EAAc,IAAIP,KAASC,GAEjC,OADA,MAAAf,GAAAA,EAAWqB,GACJA,KAIb,CAACrB,IAGGsB,EAAiB,WACrB,OAAAC,EAAAf,EAASgB,UAATD,EAAkBE,UAQZC,eAAgBC,GAAuBC,eAAa,CAC1DC,OAAQlB,EACRmB,OAAQrD,EAAMqD,OACdC,OAAQ,CACNC,OAAQ,CACNC,MAAOxD,EAAMyD,YAAYC,QAAQF,MACjChC,KAAMxB,EAAMyD,YAAYC,QAAQlC,MAElCmC,aAAc,CACZH,MAAOxD,EAAMyD,YAAYG,OAAOJ,MAChChC,KAAMxB,EAAMyD,YAAYG,OAAOpC,OAGnCqC,cAAe,CACbC,QAAS9D,EAAM6D,cAAcC,QAC7BC,SAAU/D,EAAM6D,cAAcE,SAAWrC,EAAOiB,OAChDqB,OAAQhE,EAAM6D,cAAcG,QAE9BjC,cAGIkC,UAAEA,GC/EkB,CAACjE,IAC3B,MAAMwB,EAAOC,UAAQ,IAAMf,gBAAcV,EAAMwB,MAAO,CAACxB,EAAMwB,OACvD0C,EAAKzC,EAAAA,QAAQ,IAAM,GAAGD,EAAKX,WAAY,CAACW,EAAKX,UAE7CsD,IAAEA,GAAQC,YAEb,CACDF,KACAG,YAAa,CACXC,aAAcJ,EACdtD,QAAS,IACTP,WAAY,mBAkFhB,MAAO,CAAE4D,UA/ES9B,EAAAA,YACfoC,IACCJ,EAAI,CACFK,QAAS,CAACC,EAAQC,MAChBC,kBAAAA,KAACC,EAAAA,MAAA,CACCC,GAAI,CACFnB,QAAS,CACPoB,SAAU,WACVC,SAAU,SACVC,YAA6C,EAA7BhF,EAAM6D,cAAcG,OAAvB,OACbiB,MAAO,OACPC,SAAU,QACVC,OAAQ,QACRb,aAAc,MAAAG,OAAA,EAAAA,EAAQP,IAExBkB,OAAQ,CACNF,SAAU,UAIdG,SAAA,GAAAC,kBAAAA,IAACC,EAAAA,MAAA,CACCC,QAASvF,IAAA,CACPyD,QAAS,CACPuB,MAAO,OACPE,OAAQ,OACRM,WAAY,SACZC,eAAgB,SAChBC,gBAAiB1F,EAAM2F,QAAQC,QAC/Bf,SAAU,WACVgB,cAAe,UAGnBC,mBAAiB,EACjBC,QAAS,CACPtC,QAAS,CACPuC,UAAW,YAGfC,IAAK,MAAA3B,OAAA,EAAAA,EAAO4B,SACZC,IAAK,MAAA7B,OAAA,EAAAA,EAAO4B,SACZE,oBACEf,kBAAAA,IAACgB,EAAAA,WAAA,CACCzB,GAAI,CACFnB,QAAS,CACP6C,QAAS,OAIZlB,WAAMhC,OAAOmD,oBAIpBlB,kBAAAA,IAACmB,EAAAA,OAAA,CACC5B,GAAI,CACFnB,QAAS,CACPoB,SAAU,WACV4B,OAAQ,GACRC,MAAO,KAGXnD,MAAM,kBACNhC,KAAK,QACLoF,MAAO,CACL,CACEC,KAAM,KACNC,KAAM,WAGVC,iBAAe,EACfC,gBAAc,EACdC,UAAQ,EACRC,QAAS,IAAM,MAAAxC,OAAA,EAAAA,YAMzB,CAACP,EAAKnE,EAAM6D,cAAcG,OAAQhE,EAAMqD,OAAOmD,kBDZ3BW,CAAa,CACjC3F,KAAMxB,EAAMwB,KACZ6B,OAAQrD,EAAMqD,OACdQ,cAAe7D,EAAM6D,cACrBL,MAAOxD,EAAMwD,QAOf,OAJA4D,EAAAA,UAAU,KACRzF,EAAU3B,EAAM0B,QAAU,KACzB,CAAC1B,EAAM0B,WAGRiD,kBAAAA,KAAA0C,6BAAA,CACEhC,SAAA,CAAAV,yBAAC3D,EAAA,CAAmBZ,OAAQJ,EAAMwD,MAAO7C,MAAOX,EAAMwB,KAAM8F,GAAItH,EAAMsH,GAAIC,IAAKvH,EAAM6E,GAAI2C,OAAQxH,EAAMyH,MACrGpC,SAAA,GAAAV,kBAAAA,KAACtD,EAAA,CACCqG,OAASC,IA7EE,CAACA,UAClBA,EAAEC,kBACE,OAAA9E,EAAA6E,EAAEE,aAAazF,YAAf,EAAAU,EAAsBH,SACxBO,EAAmByE,EAAEE,aAAazF,QA2E5B0F,CAAWH,GACX7F,GAAkB,IAEpBiG,WAAaJ,GAAMA,EAAEC,iBACrBI,YAAa,IAAMlG,GAAkB,GACrCmG,YAAa,IAAMnG,GAAkB,GACrCoG,QAAS,CACPC,YAAatG,EACT5B,EAAMC,OAAOC,YAAYH,EAAMwD,OAAO4E,OAAOC,MAC7CpI,EAAMC,OAAOC,YAAYH,EAAMwD,OAAO4E,OAAO9H,MAEnDgI,WAAY,CAAEC,SAAU,IACxBnI,OAAQJ,EAAMwD,MACd7C,MAAOX,EAAMwB,KAEb6D,SAAA,GAAAV,kBAAAA,KAACrD,EAAAA,OAAOJ,IAAP,CACCoH,WAAY,CACVE,OAAQ,CACND,SAAU,GACVE,KAAM,YACN5B,KAAM,WAGV2B,QAAM,EACNE,MAAO,CAAEC,QAAS,OAAQC,SAAU,OAAQC,IAAQrH,EAAKZ,QAAU,EAAlB,MAEhDyE,SAAA,CAAA3D,EAAOa,IACLuG,GACCA,EAAIC,OACFpE,kBAAAA,KAACrD,EAAAA,OAAOJ,IAAP,CAECwH,MAAO,CACL5D,SAAU,WACVG,MAAO,GAAGjF,EAAM6D,cAAcoB,UAC9BE,OAAQ,GAAGnF,EAAM6D,cAAcsB,WAC/B6D,WAAY,OACZjE,SAAU,SACVT,aAAc,GAAG9C,EAAKX,WACtBoI,SAAU,GAEZT,QAAM,EACNF,WAAY,CACVE,OAAQ,CACND,SAAU,GACVE,KAAM,YACN5B,KAAM,WAIVxB,SAAA,GAAAC,kBAAAA,IAACC,EAAAA,MAAA,CACCC,QAAUvF,IAAAA,CACRyD,QAAS,CACPuB,MAAO,OACPE,OAAQ,OACRM,WAAY,SACZC,eAAgB,SAChBC,gBAAiB1F,EAAM2F,QAAQC,QAC/Bf,SAAU,WACVgB,cAAe,UAGnBC,kBAAmB/F,EAAMkJ,UACzBlD,QAAS,CACPtC,QAAS,CACPuC,UAAWjG,EAAMkJ,UAAY,UAAY,UAG7ChD,IAAK4C,EAAIhC,MAAQ,QACjBV,IAAK0C,EAAIC,IACT1C,oBACEf,kBAAAA,IAACgB,EAAAA,WAAA,CACCzB,GAAI,CACFnB,QAAS,CACP6C,QAAS,OAIZlB,WAAMhC,OAAOmD,oBAIpBlB,kBAAAA,IAACmB,EAAAA,OAAA,CACC5B,GAAI,CACFnB,QAAS,CACPoB,SAAU,WACVqE,IAAK,EACLxC,MAAO,IAGXnD,MAAOxD,EAAMwD,MACbhC,KAAK,QACLoF,MAAO,CACL,CACEC,KAAM,KACNC,KAAM,UAGVC,iBAAe,EACfC,gBAAc,EACdC,UAAQ,EACRC,QAAS,KAAMkC,OA3Kb9B,EA2K0BwB,EAAIxB,QA1KlD3F,EAAWU,IACT,MAAMO,EAAcP,EAAKgH,OAAQP,GAAQA,EAAIxB,KAAOA,GAEpD,OADA,MAAA/F,GAAAA,EAAWqB,GACJA,IAJU,IAAC0E,OA6KJhC,kBAAAA,IAACmB,EAAAA,OAAA,CACC5B,GAAI,CACFnB,QAAS,CACPoB,SAAU,WACV4B,OAAQ,EACRC,MAAO,IAGXnD,MAAOxD,EAAMwD,MACbhC,KAAK,QACLoF,MAAO,CACL,CACEC,KAAM,KACNC,KAAM,aAGVC,iBAAe,EACfC,gBAAc,EACdC,UAAQ,EACRC,QAAS,IAAM4B,EAAIC,KAAO9E,EAAU,CAAEqD,GAAIwB,EAAIxB,GAAInB,SAAU2C,EAAIC,UA3F7DD,EAAIxB,KAgGE,IAAlB5F,EAAOiB,OACN2C,EAAAA,kBAAAA,IAAC,MAAA,CACC4B,QAASrE,EAET6F,MAAO,CACL5D,SAAU,WACVG,MAAO,GAAGjF,EAAM6D,cAAcoB,UAC9BE,OAAQ,GAAGnF,EAAM6D,cAAcsB,WAC/B6D,WAAY,OACZjE,SAAU,SACVT,aAAc,GAAG9C,EAAKX,WACtBoI,SAAU,EACVN,QAAS,OACTlD,WAAY,SACZC,eAAgB,SAChB4D,UAAW,SACXC,OAAQ,WAGVlE,WAAAC,kBAAAA,IAACgB,EAAAA,WAAA,CACCoC,MAAO,CACLnI,MAAON,EAAMC,OAAOC,YAAYH,EAAMwD,OAAOjD,MAAMD,MAErDuE,GAAI,CACFnB,QAAS,CAAA,GAGV2B,WAAMhC,OAAOmG,eAxBZ,SA2BJ,UAGNlE,kBAAAA,IAAC,QAAA,CACCmE,IAAK1H,EACL8E,KAAK,OACL6C,OAAQC,EAAAA,8BACRC,UAAQ,EACRlB,MAAO,CAAEC,QAAS,QAClBpH,SAAWoG,IACLA,EAAEkC,OAAOzH,OAAOc,EAAmByE,EAAEkC,OAAOzH,aAItDuC,EAAAA,kBAAAA,KAACC,EAAAA,MAAA,CAAMC,GAAI,CAAEnB,QAAS,CAAEuF,SAAU,EAAGJ,IAAQrH,EAAKZ,QAAU,EAAlB,OACxCyE,SAAA,GAAAC,kBAAAA,IAACmB,EAAAA,OAAA,CACCI,KAAK,SACLrD,MAAOxD,EAAMwD,MACbhC,KAAMxB,EAAMwB,KACZqD,GAAI,CACFnB,QAAS,CACPuF,SAAU,IAGdhC,UAAQ,EACRC,QAASrE,EAERwC,WAAMhC,OAAOyG,cAEhBxE,kBAAAA,IAACmB,EAAAA,OAAA,CACCQ,UAAQ,EACRJ,KAAK,SACLhC,GAAI,CACFnB,QAAS,CACPuF,SAAU,IAGd/B,QA3OU,KAClBvF,EAAU3B,EAAM+J,eAAiB,IACjC,MAAAxI,GAAAA,EAAWvB,EAAM+J,eAAiB,KA0O1BvG,MAAOxD,EAAMwD,MACbhC,KAAMxB,EAAMwB,KAEX6D,WAAMhC,OAAO2G,2BAInBhK,WAAOyH,OAAQnC,EAAAA,kBAAAA,IAAC2E,EAAAA,aAAA,IAAiBjK,EAAMyH,MAAOjG,MAAM,MAAAxB,OAAA,EAAAA,EAAOyH,MAAMjG,OAAQxB,EAAMwB,OAAW"}
1
+ {"version":3,"file":"component.styles--Ug3PJQ6.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 { 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 { motion } from 'framer-motion';\nimport { DragEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport { Button } from '../button';\nimport { Image } from '../image';\nimport { Stack } from '../stack';\nimport { Typography } from '../typography';\nimport { ImageSelectItemProps, ImageSelectListWrapper, ImageSelectProps, ImageSelectWrapper } from '.';\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 ) : null}\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 { 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 { useCallback, useMemo } from 'react'\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,18 +1,18 @@
1
1
  import { j as jsxRuntimeExports } from "./jsx-runtime-BrDlu8eK.js";
2
2
  import { ListLanguage, MapThemeList } from "./consts.es.js";
3
- import { b as ErrorMessage, a as addError } from "./style-CQOBaUTO.js";
4
- import { K as KEY_SIZE_DATA } from "./theme.global-DuEXPcSK.js";
5
- import { j as Typography, u as usePopover, m as useMergeRefs, P as Popover, g as getFontSizeStyles } from "./component-Bwu-fBEh.js";
3
+ import { b as ErrorMessage, a as addError } from "./style-BQ653xOS.js";
4
+ import { K as KEY_SIZE_DATA } from "./theme.global-CFUz5Asg.js";
5
+ import { j as Typography, u as usePopover, m as useMergeRefs, P as Popover, g as getFontSizeStyles } from "./component-BoHvC24Q.js";
6
6
  import { useVirtualizer } from "@tanstack/react-virtual";
7
7
  import moment from "moment";
8
8
  import { memo, useMemo, useRef, useState, useCallback, useEffect } from "react";
9
- import { c as Button } from "./component-CmotrA_9.js";
10
- import { I as Icon } from "./component.styles-DYAuT7U2.js";
9
+ import { c as Button } from "./component-C4ULY0c6.js";
10
+ import { I as Icon } from "./component.styles-Bm3Ec-Kd.js";
11
11
  import styled, { css } from "styled-components";
12
12
  import { i as addRemoveOutline } from "./style-BgcnmVAY.js";
13
13
  import { a as addSX } from "./style-plT9Ah7t.js";
14
14
  import { motion } from "framer-motion";
15
- import { T as TextArea } from "./component.styles-BHBTNQ8p.js";
15
+ import { T as TextArea } from "./component.styles-v0YYECwW.js";
16
16
  const DEFAULT_LABEL_SELECT_ALL = "Select all option";
17
17
  const DEFAULT_LABEL_PLACEHOLDER = "Select an option";
18
18
  const DEFAULT_LABEL_EMPTY_OPTION = "No options available";
@@ -1015,4 +1015,4 @@ export {
1015
1015
  SelectListOption as l,
1016
1016
  SelectTextArea as m
1017
1017
  };
1018
- //# sourceMappingURL=component.styles-CQbSHrL_.js.map
1018
+ //# sourceMappingURL=component.styles-5CVyEjEh.js.map