sprint-asia-custom-component 0.1.53 → 0.1.54

package/dist/index.js

@@ -101,15 +101,14 @@
   // THIS FILE IS AUTO GENERATED
   function PiBellDuotone(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M208,192H48a8,8,0,0,1-6.88-12C47.71,168.6,56,139.81,56,104a72,72,0,0,1,144,0c0,35.82,8.3,64.6,14.9,76A8,8,0,0,1,208,192Z","opacity":"0.2"}},{"tag":"path","attr":{"d":"M221.8,175.94C216.25,166.38,208,139.33,208,104a80,80,0,1,0-160,0c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.81a40,40,0,0,0,78.38,0H208a16,16,0,0,0,13.8-24.06ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216ZM48,184c7.7-13.24,16-43.92,16-80a64,64,0,1,1,128,0c0,36.05,8.28,66.73,16,80Z"}}]})(props);}function PiCalendarDuotone(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M216,48V88H40V48a8,8,0,0,1,8-8H208A8,8,0,0,1,216,48Z","opacity":"0.2"}},{"tag":"path","attr":{"d":"M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Zm-96-88v64a8,8,0,0,1-16,0V132.94l-4.42,2.22a8,8,0,0,1-7.16-14.32l16-8A8,8,0,0,1,112,120Zm59.16,30.45L152,176h16a8,8,0,0,1,0,16H136a8,8,0,0,1-6.4-12.8l28.78-38.37A8,8,0,1,0,145.07,132a8,8,0,1,1-13.85-8A24,24,0,0,1,176,136,23.76,23.76,0,0,1,171.16,150.45Z"}}]})(props);}function PiDoorOpenDuotone(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M200,40V224H168V40a8,8,0,0,0-8-8h32A8,8,0,0,1,200,40Z","opacity":"0.2"}},{"tag":"path","attr":{"d":"M232,216H208V40a16,16,0,0,0-16-16H64A16,16,0,0,0,48,40V216H24a8,8,0,0,0,0,16H232a8,8,0,0,0,0-16ZM192,40V216H176V40ZM64,40h96V216H64Zm80,92a12,12,0,1,1-12-12A12,12,0,0,1,144,132Z"}}]})(props);}function PiDownloadSimpleDuotone(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M168,112l-40,40L88,112Z","opacity":"0.2"}},{"tag":"path","attr":{"d":"M224,152v56a16,16,0,0,1-16,16H48a16,16,0,0,1-16-16V152a8,8,0,0,1,16,0v56H208V152a8,8,0,0,1,16,0ZM82.34,117.66A8,8,0,0,1,88,104h32V40a8,8,0,0,1,16,0v64h32a8,8,0,0,1,5.66,13.66l-40,40a8,8,0,0,1-11.32,0Zm25,2.34L128,140.69,148.69,120Z"}}]})(props);}function PiFileArrowUpDuotone(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M208,88H152V32Z","opacity":"0.2"}},{"tag":"path","attr":{"d":"M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,51.31,188.69,80H160ZM200,216H56V40h88V88a8,8,0,0,0,8,8h48V216Zm-42.34-77.66a8,8,0,0,1-11.32,11.32L136,139.31V184a8,8,0,0,1-16,0V139.31l-10.34,10.35a8,8,0,0,1-11.32-11.32l24-24a8,8,0,0,1,11.32,0Z"}}]})(props);}function PiFileDuotone(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M208,88H152V32Z","opacity":"0.2"}},{"tag":"path","attr":{"d":"M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,51.31,188.69,80H160ZM200,216H56V40h88V88a8,8,0,0,0,8,8h48V216Z"}}]})(props);}function PiFunnelDuotone(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M221.9,61.38l-67.74,72.31a8,8,0,0,0-2.16,5.47v55.49a8,8,0,0,1-3.56,6.66l-32,21.33A8,8,0,0,1,104,216V139.16a8,8,0,0,0-2.16-5.47L34.1,61.38A8,8,0,0,1,40,48H216A8,8,0,0,1,221.9,61.38Z","opacity":"0.2"}},{"tag":"path","attr":{"d":"M230.6,49.53A15.81,15.81,0,0,0,216,40H40A16,16,0,0,0,28.19,66.76l.08.09L96,139.17V216a16,16,0,0,0,24.87,13.32l32-21.34A16,16,0,0,0,160,194.66V139.17l67.74-72.32.08-.09A15.8,15.8,0,0,0,230.6,49.53ZM40,56h0Zm108.34,72.28A15.92,15.92,0,0,0,144,139.17v55.49L112,216V139.17a15.92,15.92,0,0,0-4.32-10.94L40,56H216Z"}}]})(props);}function PiInfoDuotone(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z","opacity":"0.2"}},{"tag":"path","attr":{"d":"M144,176a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176Zm88-48A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128ZM124,96a12,12,0,1,0-12-12A12,12,0,0,0,124,96Z"}}]})(props);}function PiMagnifyingGlassDuotone(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M192,112a80,80,0,1,1-80-80A80,80,0,0,1,192,112Z","opacity":"0.2"}},{"tag":"path","attr":{"d":"M229.66,218.34,179.6,168.28a88.21,88.21,0,1,0-11.32,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"}}]})(props);}function PiUserCircleDuotone(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M224,128a95.76,95.76,0,0,1-31.8,71.37A72,72,0,0,0,128,160a40,40,0,1,0-40-40,40,40,0,0,0,40,40,72,72,0,0,0-64.2,39.37h0A96,96,0,1,1,224,128Z","opacity":"0.2"}},{"tag":"path","attr":{"d":"M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24ZM74.08,197.5a64,64,0,0,1,107.84,0,87.83,87.83,0,0,1-107.84,0ZM96,120a32,32,0,1,1,32,32A32,32,0,0,1,96,120Zm97.76,66.41a79.66,79.66,0,0,0-36.06-28.75,48,48,0,1,0-59.4,0,79.66,79.66,0,0,0-36.06,28.75,88,88,0,1,1,131.52,0Z"}}]})(props);}function PiWalletDuotone(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M224,88V200a8,8,0,0,1-8,8H56a16,16,0,0,1-16-16V64A16,16,0,0,0,56,80H216A8,8,0,0,1,224,88Z","opacity":"0.2"}},{"tag":"path","attr":{"d":"M216,72H56a8,8,0,0,1,0-16H192a8,8,0,0,0,0-16H56A24,24,0,0,0,32,64V192a24,24,0,0,0,24,24H216a16,16,0,0,0,16-16V88A16,16,0,0,0,216,72Zm0,128H56a8,8,0,0,1-8-8V86.63A23.84,23.84,0,0,0,56,88H216Zm-48-60a12,12,0,1,1,12,12A12,12,0,0,1,168,140Z"}}]})(props);}function PiCheckCircleFill(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm45.66,85.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z"}}]})(props);}function PiFileTextFill(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,176H96a8,8,0,0,1,0-16h64a8,8,0,0,1,0,16Zm0-32H96a8,8,0,0,1,0-16h64a8,8,0,0,1,0,16Zm-8-56V44l44,44Z"}}]})(props);}function PiInfoFill(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm-4,48a12,12,0,1,1-12,12A12,12,0,0,1,124,72Zm12,112a16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40a8,8,0,0,1,0,16Z"}}]})(props);}function PiReceiptFill(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M216,40H40A16,16,0,0,0,24,56V208a8,8,0,0,0,11.58,7.15L64,200.94l28.42,14.21a8,8,0,0,0,7.16,0L128,200.94l28.42,14.21a8,8,0,0,0,7.16,0L192,200.94l28.42,14.21A8,8,0,0,0,232,208V56A16,16,0,0,0,216,40ZM176,144H80a8,8,0,0,1,0-16h96a8,8,0,0,1,0,16Zm0-32H80a8,8,0,0,1,0-16h96a8,8,0,0,1,0,16Z"}}]})(props);}function PiShoppingBagFill(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm-88,96A48.05,48.05,0,0,1,80,88a8,8,0,0,1,16,0,32,32,0,0,0,64,0,8,8,0,0,1,16,0A48.05,48.05,0,0,1,128,136Z"}}]})(props);}function PiWalletFill(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M216,72H56a8,8,0,0,1,0-16H192a8,8,0,0,0,0-16H56A24,24,0,0,0,32,64V192a24,24,0,0,0,24,24H216a16,16,0,0,0,16-16V88A16,16,0,0,0,216,72Zm-36,80a12,12,0,1,1,12-12A12,12,0,0,1,180,152Z"}}]})(props);}function PiEyeClosedLight(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M229.21,165a6,6,0,0,1-10.42,6l-20-35.08a122,122,0,0,1-39,18.09l6.17,37a6,6,0,0,1-4.93,6.91,6.85,6.85,0,0,1-1,.08,6,6,0,0,1-5.91-5L148,156.44a128.86,128.86,0,0,1-40,0L101.92,193A6,6,0,0,1,96,198a6.85,6.85,0,0,1-1-.08A6,6,0,0,1,90.08,191l6.17-37a122,122,0,0,1-39-18.09L37.21,171a6,6,0,1,1-10.42-6l20.85-36.48a152,152,0,0,1-20.31-20.77,6,6,0,0,1,9.34-7.54C53.54,121.11,83.07,146,128,146s74.46-24.89,91.33-45.77a6,6,0,0,1,9.34,7.54,152,152,0,0,1-20.31,20.77Z"}}]})(props);}function PiArchive(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M224,48H32A16,16,0,0,0,16,64V88a16,16,0,0,0,16,16v88a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V104a16,16,0,0,0,16-16V64A16,16,0,0,0,224,48ZM208,192H48V104H208ZM224,88H32V64H224V88ZM96,136a8,8,0,0,1,8-8h48a8,8,0,0,1,0,16H104A8,8,0,0,1,96,136Z"}}]})(props);}function PiCaretDown(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"}}]})(props);}function PiCaretLeft(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"}}]})(props);}function PiCaretRight(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"}}]})(props);}function PiCaretUp(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M213.66,165.66a8,8,0,0,1-11.32,0L128,91.31,53.66,165.66a8,8,0,0,1-11.32-11.32l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,213.66,165.66Z"}}]})(props);}function PiClock(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm64-88a8,8,0,0,1-8,8H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48h48A8,8,0,0,1,192,128Z"}}]})(props);}function PiEye(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M247.31,124.76c-.35-.79-8.82-19.58-27.65-38.41C194.57,61.26,162.88,48,128,48S61.43,61.26,36.34,86.35C17.51,105.18,9,124,8.69,124.76a8,8,0,0,0,0,6.5c.35.79,8.82,19.57,27.65,38.4C61.43,194.74,93.12,208,128,208s66.57-13.26,91.66-38.34c18.83-18.83,27.3-37.61,27.65-38.4A8,8,0,0,0,247.31,124.76ZM128,192c-30.78,0-57.67-11.19-79.93-33.25A133.47,133.47,0,0,1,25,128,133.33,133.33,0,0,1,48.07,97.25C70.33,75.19,97.22,64,128,64s57.67,11.19,79.93,33.25A133.46,133.46,0,0,1,231.05,128C223.84,141.46,192.43,192,128,192Zm0-112a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Z"}}]})(props);}function PiFileArrowDown(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,51.31,188.69,80H160ZM200,216H56V40h88V88a8,8,0,0,0,8,8h48V216Zm-42.34-61.66a8,8,0,0,1,0,11.32l-24,24a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L120,164.69V120a8,8,0,0,1,16,0v44.69l10.34-10.35A8,8,0,0,1,157.66,154.34Z"}}]})(props);}function PiFunnel(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M230.6,49.53A15.81,15.81,0,0,0,216,40H40A16,16,0,0,0,28.19,66.76l.08.09L96,139.17V216a16,16,0,0,0,24.87,13.32l32-21.34A16,16,0,0,0,160,194.66V139.17l67.74-72.32.08-.09A15.8,15.8,0,0,0,230.6,49.53ZM40,56h0Zm108.34,72.28A15.92,15.92,0,0,0,144,139.17v55.49L112,216V139.17a15.92,15.92,0,0,0-4.32-10.94L40,56H216Z"}}]})(props);}function PiImage(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,16V158.75l-26.07-26.06a16,16,0,0,0-22.63,0l-20,20-44-44a16,16,0,0,0-22.62,0L40,149.37V56ZM40,172l52-52,80,80H40Zm176,28H194.63l-36-36,20-20L216,181.38V200ZM144,100a12,12,0,1,1,12,12A12,12,0,0,1,144,100Z"}}]})(props);}function PiInfo(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z"}}]})(props);}function PiMagnifyingGlass(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"}}]})(props);}function PiNotePencil(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M229.66,58.34l-32-32a8,8,0,0,0-11.32,0l-96,96A8,8,0,0,0,88,128v32a8,8,0,0,0,8,8h32a8,8,0,0,0,5.66-2.34l96-96A8,8,0,0,0,229.66,58.34ZM124.69,152H104V131.31l64-64L188.69,88ZM200,76.69,179.31,56,192,43.31,212.69,64ZM224,120v88a16,16,0,0,1-16,16H48a16,16,0,0,1-16-16V48A16,16,0,0,1,48,32h88a8,8,0,0,1,0,16H48V208H208V120a8,8,0,0,1,16,0Z"}}]})(props);}function PiPlus(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"}}]})(props);}function PiTrash(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z"}}]})(props);}function PiUser(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M230.92,212c-15.23-26.33-38.7-45.21-66.09-54.16a72,72,0,1,0-73.66,0C63.78,166.78,40.31,185.66,25.08,212a8,8,0,1,0,13.85,8c18.84-32.56,52.14-52,89.07-52s70.23,19.44,89.07,52a8,8,0,1,0,13.85-8ZM72,96a56,56,0,1,1,56,56A56.06,56.06,0,0,1,72,96Z"}}]})(props);}function PiX(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"}}]})(props);}
 
-  const OutlineButton = _ref => {
-    let {
-      title = "Button",
-      type = "wrap",
-      isActive = true,
-      size = "large",
-      isIconVisible = false,
-      onClick = () => {}
-    } = _ref;
+  const OutlineButton = ({
+    title = "Button",
+    type = "wrap",
+    isActive = true,
+    size = "large",
+    isIconVisible = false,
+    onClick = () => {}
+  }) => {
     const [isPressed, setIsPressed] = React.useState(false);
     const handleButtonPress = () => {
       setIsPressed(true);
@@ -121,7 +120,16 @@
       onClick();
     };
     return /*#__PURE__*/React__default["default"].createElement("button", {
-      className: "\n            ".concat(isPressed && isActive ? 'bg-white text-primary500 border-2 border-primary500 text-primary500' : isActive ? 'bg-white border-2 border-primary500 text-primary500' : 'bg-neutral30 text-neutral80 cursor-default', "\n            ").concat(type === "full" && "w-full", "\n            ").concat(size === "small" && "text-sm h-7 w-32", "\n            ").concat(size === "medium" && "text-md h-8", "\n            ").concat(size === "large" && "text-lg h-10", "\n            ").concat(size === "very large" && "text-xl h-12", "\n            ").concat(size === "extra very large" && "text-2xl h-14", "\n            ").concat(size === "detail division" && "text-sm h-10 w-24", "\n            rounded-lg drop-shadow-md text-center py-1.5 px-4 flex justify-center items-center"),
+      className: `
+            ${isPressed && isActive ? 'bg-white text-primary500 border-2 border-primary500 text-primary500' : isActive ? 'bg-white border-2 border-primary500 text-primary500' : 'bg-neutral30 text-neutral80 cursor-default'}
+            ${type === "full" && "w-full"}
+            ${size === "small" && "text-sm h-7 w-32"}
+            ${size === "medium" && "text-md h-8"}
+            ${size === "large" && "text-lg h-10"}
+            ${size === "very large" && "text-xl h-12"}
+            ${size === "extra very large" && "text-2xl h-14"}
+            ${size === "detail division" && "text-sm h-10 w-24"}
+            rounded-lg drop-shadow-md text-center py-1.5 px-4 flex justify-center items-center`,
       disabled: !isActive,
       onClick: handleClick,
       onMouseDown: handleButtonPress,
@@ -136,29 +144,38 @@
     }), /*#__PURE__*/React__default["default"].createElement("p", null, title)));
   };
 
-  const Alert = _ref => {
-    let {
-      title = "Title",
-      subtitle = "Subtitle",
-      type = "primary",
-      titleLeftButton,
-      titleRightButton,
-      onCloseButton,
-      onClickLeftButton,
-      onClickRightButton
-    } = _ref;
+  const Alert = ({
+    title = "Title",
+    subtitle = "Subtitle",
+    type = "primary",
+    titleLeftButton,
+    titleRightButton,
+    onCloseButton,
+    onClickLeftButton,
+    onClickRightButton
+  }) => {
     return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "\n        ".concat(type === "primary" && "bg-primary50 border-primary600", " \n        ").concat(type === "warning" && "bg-warning50 border-warning800", " \n        ").concat(type === "success" && "bg-success50 border-success600", " \n        ").concat(type === "danger" && "bg-danger50 border-danger500", " \n        w-full flex justify-between p-3 border rounded-md")
+      className: `
+        ${type === "primary" && "bg-primary50 border-primary600"} 
+        ${type === "warning" && "bg-warning50 border-warning800"} 
+        ${type === "success" && "bg-success50 border-success600"} 
+        ${type === "danger" && "bg-danger50 border-danger500"} 
+        w-full flex justify-between p-3 border rounded-md`
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "w-full flex"
     }, /*#__PURE__*/React__default["default"].createElement("div", null, type === "success" ? /*#__PURE__*/React__default["default"].createElement(PiCheckCircleFill, {
       size: "24",
       variant: "Bold",
-      className: "\n                            ".concat(type === "success" && "text-success600", " mr-2")
+      className: `
+                            ${type === "success" && "text-success600"} mr-2`
     }) : /*#__PURE__*/React__default["default"].createElement(PiInfoFill, {
       size: "24",
       variant: "Bold",
-      className: "\n                            ".concat(type === "primary" && "text-primary600", "\n                            ").concat(type === "warning" && "text-warning800", "\n                            ").concat(type === "danger" && "text-danger500", " \n                            mr-2")
+      className: `
+                            ${type === "primary" && "text-primary600"}
+                            ${type === "warning" && "text-warning800"}
+                            ${type === "danger" && "text-danger500"} 
+                            mr-2`
     })), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("p", {
       className: "text-md font-semibold text-black"
     }, title), /*#__PURE__*/React__default["default"].createElement("p", {
@@ -188,14 +205,13 @@
     }))));
   };
 
-  const DangerButton = _ref => {
-    let {
-      title = "Button",
-      type = "wrap",
-      isActive = true,
-      size = "large",
-      onClick = () => {}
-    } = _ref;
+  const DangerButton = ({
+    title = "Button",
+    type = "wrap",
+    isActive = true,
+    size = "large",
+    onClick = () => {}
+  }) => {
     const [isPressed, setIsPressed] = React.useState(false);
     const handleButtonPress = () => {
       setIsPressed(true);
@@ -207,7 +223,16 @@
       onClick();
     };
     return /*#__PURE__*/React__default["default"].createElement("button", {
-      className: "\n            ".concat(isPressed && isActive ? 'bg-danger700 text-white' : isActive ? 'bg-danger500 hover:bg-danger600 text-white' : 'bg-neutral30 text-neutral80 cursor-default', " \n            ").concat(type === "full" && "w-full", "\n            ").concat(size === "small" && "text-sm h-7", "\n            ").concat(size === "medium" && "text-md h-8", "\n            ").concat(size === "large" && "text-lg h-10", "\n            ").concat(size === "very large" && "text-xl h-12", "\n            ").concat(size === "extra very large" && "text-2xl h-14", "\n            ").concat(size === "detail division" && "text-sm h-10", "\n            rounded-lg drop-shadow-md text-center py-1.5 px-4 flex justify-center items-center"),
+      className: `
+            ${isPressed && isActive ? 'bg-danger700 text-white' : isActive ? 'bg-danger500 hover:bg-danger600 text-white' : 'bg-neutral30 text-neutral80 cursor-default'} 
+            ${type === "full" && "w-full"}
+            ${size === "small" && "text-sm h-7"}
+            ${size === "medium" && "text-md h-8"}
+            ${size === "large" && "text-lg h-10"}
+            ${size === "very large" && "text-xl h-12"}
+            ${size === "extra very large" && "text-2xl h-14"}
+            ${size === "detail division" && "text-sm h-10"}
+            rounded-lg drop-shadow-md text-center py-1.5 px-4 flex justify-center items-center`,
       disabled: !isActive,
       onClick: handleClick,
       onMouseDown: handleButtonPress,
@@ -217,14 +242,13 @@
     }, title);
   };
 
-  const PrimaryButton = _ref => {
-    let {
-      title = "Button",
-      type = "wrap",
-      isActive = true,
-      size = "large",
-      onClick = () => {}
-    } = _ref;
+  const PrimaryButton = ({
+    title = "Button",
+    type = "wrap",
+    isActive = true,
+    size = "large",
+    onClick = () => {}
+  }) => {
     const [isPressed, setIsPressed] = React.useState(false);
     const handleButtonPress = () => {
       setIsPressed(true);
@@ -236,7 +260,16 @@
       onClick();
     };
     return /*#__PURE__*/React__default["default"].createElement("button", {
-      className: "\n            ".concat(isPressed && isActive ? 'bg-primary700 text-white' : isActive ? 'bg-primary500 hover:bg-primary600 text-white cursor-pointer' : 'bg-neutral30 text-neutral80 cursor-default', " \n            ").concat(type === "full" && "w-full", "\n            ").concat(size === "small" && "text-sm h-7", "\n            ").concat(size === "medium" && "text-md h-8", "\n            ").concat(size === "large" && "text-lg h-10", "\n            ").concat(size === "very large" && "text-xl h-12", "\n            ").concat(size === "extra very large" && "text-2xl h-14", "\n            ").concat(size === "detail division" && "text-sm h-10", "\n            rounded-lg drop-shadow-md text-center py-1.5 px-4 flex justify-center items-center"),
+      className: `
+            ${isPressed && isActive ? 'bg-primary700 text-white' : isActive ? 'bg-primary500 hover:bg-primary600 text-white cursor-pointer' : 'bg-neutral30 text-neutral80 cursor-default'} 
+            ${type === "full" && "w-full"}
+            ${size === "small" && "text-sm h-7"}
+            ${size === "medium" && "text-md h-8"}
+            ${size === "large" && "text-lg h-10"}
+            ${size === "very large" && "text-xl h-12"}
+            ${size === "extra very large" && "text-2xl h-14"}
+            ${size === "detail division" && "text-sm h-10"}
+            rounded-lg drop-shadow-md text-center py-1.5 px-4 flex justify-center items-center`,
       disabled: !isActive,
       onClick: handleClick,
       onMouseDown: handleButtonPress,
@@ -246,20 +279,22 @@
     }, title);
   };
 
-  const CardInternalProduct = _ref => {
-    let {
-      title = "Loading...",
-      productCode = "Loading...",
-      company = "Loading...",
-      image = "https://picsum.photos/200",
-      isCloseButton = false,
-      mode = "detail",
-      onClick
-    } = _ref;
+  const CardInternalProduct = ({
+    title = "Loading...",
+    productCode = "Loading...",
+    company = "Loading...",
+    image = "https://picsum.photos/200",
+    isCloseButton = false,
+    mode = "detail",
+    onClick
+  }) => {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "w-full"
     }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "\n                ".concat(mode == "detail" && "border-neutral40 bg-white", " \n                ").concat(mode == "add" && "border-black bg-neutral10", " \n                w-full py-2.5 px-4 my-0.5 rounded-md border")
+      className: `
+                ${mode == "detail" && "border-neutral40 bg-white"} 
+                ${mode == "add" && "border-black bg-neutral10"} 
+                w-full py-2.5 px-4 my-0.5 rounded-md border`
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "flex justify-between"
     }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -281,17 +316,23 @@
     }, "x")))));
   };
 
-  const Chip = _ref => {
-    let {
-      title = "Approve",
-      type = "success",
-      onClick
-    } = _ref;
+  const Chip = ({
+    title = "Approve",
+    type = "success",
+    onClick
+  }) => {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "w-fit",
       onClick: onClick
     }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "\n            ".concat(type == "neutral" && "text-neutral300 border-neutral300 bg-neutral30 cursor-pointer", " \n            ").concat(type == "success" && "text-success600 border-success600 bg-success50", " \n            ").concat(type == "primary" && "text-primary500 border-primary500 bg-primary50", " \n            ").concat(type == "dropdown" && "text-primary500 border-primary500 bg-primary50", " \n            ").concat(type == "warning" && "text-warning800 border-warning800 bg-warning50", " \n            ").concat(type == "danger" && "text-danger800 border-danger800 bg-danger50", " \n            ' rounded-full text-xs border-2 flex items-center px-3.5")
+      className: `
+            ${type == "neutral" && "text-neutral300 border-neutral300 bg-neutral30 cursor-pointer"} 
+            ${type == "success" && "text-success600 border-success600 bg-success50"} 
+            ${type == "primary" && "text-primary500 border-primary500 bg-primary50"} 
+            ${type == "dropdown" && "text-primary500 border-primary500 bg-primary50"} 
+            ${type == "warning" && "text-warning800 border-warning800 bg-warning50"} 
+            ${type == "danger" && "text-danger800 border-danger800 bg-danger50"} 
+            ' rounded-full text-xs border-2 flex items-center px-3.5`
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "flex items-center"
     }, /*#__PURE__*/React__default["default"].createElement("p", {
@@ -23743,13 +23784,12 @@
   // ex: while focusing prev and next month buttons
   _defineProperty$2(_this,"onPopperKeyDown",function(event){var eventKey=event.key;if(eventKey==="Escape"){event.preventDefault();_this.sendFocusBackToInput();}});_defineProperty$2(_this,"onClearClick",function(event){if(event){if(event.preventDefault){event.preventDefault();}}_this.sendFocusBackToInput();if(_this.props.selectsRange){_this.props.onChange([null,null],event);}else {_this.props.onChange(null,event);}_this.setState({inputValue:null});});_defineProperty$2(_this,"clear",function(){_this.onClearClick();});_defineProperty$2(_this,"onScroll",function(event){if(typeof _this.props.closeOnScroll==="boolean"&&_this.props.closeOnScroll){if(event.target===document||event.target===document.documentElement||event.target===document.body){_this.setOpen(false);}}else if(typeof _this.props.closeOnScroll==="function"){if(_this.props.closeOnScroll(event)){_this.setOpen(false);}}});_defineProperty$2(_this,"renderCalendar",function(){if(!_this.props.inline&&!_this.isCalendarOpen()){return null;}return/*#__PURE__*/React__default["default"].createElement(WrappedCalendar,{ref:function ref(elem){_this.calendar=elem;},locale:_this.props.locale,calendarStartDay:_this.props.calendarStartDay,chooseDayAriaLabelPrefix:_this.props.chooseDayAriaLabelPrefix,disabledDayAriaLabelPrefix:_this.props.disabledDayAriaLabelPrefix,weekAriaLabelPrefix:_this.props.weekAriaLabelPrefix,monthAriaLabelPrefix:_this.props.monthAriaLabelPrefix,adjustDateOnChange:_this.props.adjustDateOnChange,setOpen:_this.setOpen,shouldCloseOnSelect:_this.props.shouldCloseOnSelect,dateFormat:_this.props.dateFormatCalendar,useWeekdaysShort:_this.props.useWeekdaysShort,formatWeekDay:_this.props.formatWeekDay,dropdownMode:_this.props.dropdownMode,selected:_this.props.selected,preSelection:_this.state.preSelection,onSelect:_this.handleSelect,onWeekSelect:_this.props.onWeekSelect,openToDate:_this.props.openToDate,minDate:_this.props.minDate,maxDate:_this.props.maxDate,selectsStart:_this.props.selectsStart,selectsEnd:_this.props.selectsEnd,selectsRange:_this.props.selectsRange,selectsMultiple:_this.props.selectsMultiple,selectedDates:_this.props.selectedDates,startDate:_this.props.startDate,endDate:_this.props.endDate,excludeDates:_this.props.excludeDates,excludeDateIntervals:_this.props.excludeDateIntervals,filterDate:_this.props.filterDate,onClickOutside:_this.handleCalendarClickOutside,formatWeekNumber:_this.props.formatWeekNumber,highlightDates:_this.state.highlightDates,holidays:getHolidaysMap(_this.modifyHolidays()),includeDates:_this.props.includeDates,includeDateIntervals:_this.props.includeDateIntervals,includeTimes:_this.props.includeTimes,injectTimes:_this.props.injectTimes,inline:_this.props.inline,shouldFocusDayInline:_this.state.shouldFocusDayInline,peekNextMonth:_this.props.peekNextMonth,showMonthDropdown:_this.props.showMonthDropdown,showPreviousMonths:_this.props.showPreviousMonths,useShortMonthInDropdown:_this.props.useShortMonthInDropdown,showMonthYearDropdown:_this.props.showMonthYearDropdown,showWeekNumbers:_this.props.showWeekNumbers,showYearDropdown:_this.props.showYearDropdown,withPortal:_this.props.withPortal,forceShowMonthNavigation:_this.props.forceShowMonthNavigation,showDisabledMonthNavigation:_this.props.showDisabledMonthNavigation,scrollableYearDropdown:_this.props.scrollableYearDropdown,scrollableMonthYearDropdown:_this.props.scrollableMonthYearDropdown,todayButton:_this.props.todayButton,weekLabel:_this.props.weekLabel,outsideClickIgnoreClass:outsideClickIgnoreClass,fixedHeight:_this.props.fixedHeight,monthsShown:_this.props.monthsShown,monthSelectedIn:_this.state.monthSelectedIn,onDropdownFocus:_this.handleDropdownFocus,onMonthChange:_this.props.onMonthChange,onYearChange:_this.props.onYearChange,dayClassName:_this.props.dayClassName,weekDayClassName:_this.props.weekDayClassName,monthClassName:_this.props.monthClassName,timeClassName:_this.props.timeClassName,showDateSelect:_this.props.showDateSelect,showTimeSelect:_this.props.showTimeSelect,showTimeSelectOnly:_this.props.showTimeSelectOnly,onTimeChange:_this.handleTimeChange,timeFormat:_this.props.timeFormat,timeIntervals:_this.props.timeIntervals,minTime:_this.props.minTime,maxTime:_this.props.maxTime,excludeTimes:_this.props.excludeTimes,filterTime:_this.props.filterTime,timeCaption:_this.props.timeCaption,className:_this.props.calendarClassName,container:_this.props.calendarContainer,yearItemNumber:_this.props.yearItemNumber,yearDropdownItemNumber:_this.props.yearDropdownItemNumber,previousMonthAriaLabel:_this.props.previousMonthAriaLabel,previousMonthButtonLabel:_this.props.previousMonthButtonLabel,nextMonthAriaLabel:_this.props.nextMonthAriaLabel,nextMonthButtonLabel:_this.props.nextMonthButtonLabel,previousYearAriaLabel:_this.props.previousYearAriaLabel,previousYearButtonLabel:_this.props.previousYearButtonLabel,nextYearAriaLabel:_this.props.nextYearAriaLabel,nextYearButtonLabel:_this.props.nextYearButtonLabel,timeInputLabel:_this.props.timeInputLabel,disabledKeyboardNavigation:_this.props.disabledKeyboardNavigation,renderCustomHeader:_this.props.renderCustomHeader,popperProps:_this.props.popperProps,renderDayContents:_this.props.renderDayContents,renderMonthContent:_this.props.renderMonthContent,renderQuarterContent:_this.props.renderQuarterContent,renderYearContent:_this.props.renderYearContent,onDayMouseEnter:_this.props.onDayMouseEnter,onMonthMouseLeave:_this.props.onMonthMouseLeave,onYearMouseEnter:_this.props.onYearMouseEnter,onYearMouseLeave:_this.props.onYearMouseLeave,selectsDisabledDaysInRange:_this.props.selectsDisabledDaysInRange,showTimeInput:_this.props.showTimeInput,showMonthYearPicker:_this.props.showMonthYearPicker,showFullMonthYearPicker:_this.props.showFullMonthYearPicker,showTwoColumnMonthYearPicker:_this.props.showTwoColumnMonthYearPicker,showFourColumnMonthYearPicker:_this.props.showFourColumnMonthYearPicker,showYearPicker:_this.props.showYearPicker,showQuarterYearPicker:_this.props.showQuarterYearPicker,showWeekPicker:_this.props.showWeekPicker,excludeScrollbar:_this.props.excludeScrollbar,handleOnKeyDown:_this.props.onKeyDown,handleOnDayKeyDown:_this.onDayKeyDown,isInputFocused:_this.state.focused,customTimeInput:_this.props.customTimeInput,setPreSelection:_this.setPreSelection,usePointerEvent:_this.props.usePointerEvent,yearClassName:_this.props.yearClassName},_this.props.children);});_defineProperty$2(_this,"renderAriaLiveRegion",function(){var _this$props3=_this.props,dateFormat=_this$props3.dateFormat,locale=_this$props3.locale;var isContainsTime=_this.props.showTimeInput||_this.props.showTimeSelect;var longDateFormat=isContainsTime?"PPPPp":"PPPP";var ariaLiveMessage;if(_this.props.selectsRange){ariaLiveMessage="Selected start date: ".concat(safeDateFormat(_this.props.startDate,{dateFormat:longDateFormat,locale:locale}),". ").concat(_this.props.endDate?"End date: "+safeDateFormat(_this.props.endDate,{dateFormat:longDateFormat,locale:locale}):"");}else {if(_this.props.showTimeSelectOnly){ariaLiveMessage="Selected time: ".concat(safeDateFormat(_this.props.selected,{dateFormat:dateFormat,locale:locale}));}else if(_this.props.showYearPicker){ariaLiveMessage="Selected year: ".concat(safeDateFormat(_this.props.selected,{dateFormat:"yyyy",locale:locale}));}else if(_this.props.showMonthYearPicker){ariaLiveMessage="Selected month: ".concat(safeDateFormat(_this.props.selected,{dateFormat:"MMMM yyyy",locale:locale}));}else if(_this.props.showQuarterYearPicker){ariaLiveMessage="Selected quarter: ".concat(safeDateFormat(_this.props.selected,{dateFormat:"yyyy, QQQ",locale:locale}));}else {ariaLiveMessage="Selected date: ".concat(safeDateFormat(_this.props.selected,{dateFormat:longDateFormat,locale:locale}));}}return/*#__PURE__*/React__default["default"].createElement("span",{role:"alert","aria-live":"polite",className:"react-datepicker__aria-live"},ariaLiveMessage);});_defineProperty$2(_this,"renderDateInput",function(){var _React$cloneElement;var className=clsx(_this.props.className,_defineProperty$2({},outsideClickIgnoreClass,_this.state.open));var customInput=_this.props.customInput||/*#__PURE__*/React__default["default"].createElement("input",{type:"text"});var customInputRef=_this.props.customInputRef||"ref";var inputValue=typeof _this.props.value==="string"?_this.props.value:typeof _this.state.inputValue==="string"?_this.state.inputValue:_this.props.selectsRange?safeDateRangeFormat(_this.props.startDate,_this.props.endDate,_this.props):_this.props.selectsMultiple?safeMultipleDatesFormat(_this.props.selectedDates,_this.props):safeDateFormat(_this.props.selected,_this.props);return/*#__PURE__*/React__default["default"].cloneElement(customInput,(_React$cloneElement={},_defineProperty$2(_defineProperty$2(_defineProperty$2(_defineProperty$2(_defineProperty$2(_defineProperty$2(_defineProperty$2(_defineProperty$2(_defineProperty$2(_defineProperty$2(_React$cloneElement,customInputRef,function(input){_this.input=input;}),"value",inputValue),"onBlur",_this.handleBlur),"onChange",_this.handleChange),"onClick",_this.onInputClick),"onFocus",_this.handleFocus),"onKeyDown",_this.onInputKeyDown),"id",_this.props.id),"name",_this.props.name),"form",_this.props.form),_defineProperty$2(_defineProperty$2(_defineProperty$2(_defineProperty$2(_defineProperty$2(_defineProperty$2(_defineProperty$2(_defineProperty$2(_defineProperty$2(_defineProperty$2(_React$cloneElement,"autoFocus",_this.props.autoFocus),"placeholder",_this.props.placeholderText),"disabled",_this.props.disabled),"autoComplete",_this.props.autoComplete),"className",clsx(customInput.props.className,className)),"title",_this.props.title),"readOnly",_this.props.readOnly),"required",_this.props.required),"tabIndex",_this.props.tabIndex),"aria-describedby",_this.props.ariaDescribedBy),_defineProperty$2(_defineProperty$2(_defineProperty$2(_React$cloneElement,"aria-invalid",_this.props.ariaInvalid),"aria-labelledby",_this.props.ariaLabelledBy),"aria-required",_this.props.ariaRequired)));});_defineProperty$2(_this,"renderClearButton",function(){var _this$props4=_this.props,isClearable=_this$props4.isClearable,disabled=_this$props4.disabled,selected=_this$props4.selected,startDate=_this$props4.startDate,endDate=_this$props4.endDate,clearButtonTitle=_this$props4.clearButtonTitle,_this$props4$clearBut=_this$props4.clearButtonClassName,clearButtonClassName=_this$props4$clearBut===void 0?"":_this$props4$clearBut,_this$props4$ariaLabe=_this$props4.ariaLabelClose,ariaLabelClose=_this$props4$ariaLabe===void 0?"Close":_this$props4$ariaLabe,selectedDates=_this$props4.selectedDates;if(isClearable&&(selected!=null||startDate!=null||endDate!=null||selectedDates!==null&&selectedDates!==void 0&&selectedDates.length)){return/*#__PURE__*/React__default["default"].createElement("button",{type:"button",className:clsx("react-datepicker__close-icon",clearButtonClassName,{"react-datepicker__close-icon--disabled":disabled}),disabled:disabled,"aria-label":ariaLabelClose,onClick:_this.onClearClick,title:clearButtonTitle,tabIndex:-1});}else {return null;}});_this.state=_this.calcInitialState();_this.preventFocusTimeout=null;return _this;}_inherits(DatePicker,_React$Component);return _createClass(DatePicker,[{key:"componentDidMount",value:function componentDidMount(){window.addEventListener("scroll",this.onScroll,true);}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps,prevState){if(prevProps.inline&&hasPreSelectionChanged(prevProps.selected,this.props.selected)){this.setPreSelection(this.props.selected);}if(this.state.monthSelectedIn!==undefined&&prevProps.monthsShown!==this.props.monthsShown){this.setState({monthSelectedIn:0});}if(prevProps.highlightDates!==this.props.highlightDates){this.setState({highlightDates:getHightLightDaysMap(this.props.highlightDates)});}if(!prevState.focused&&!isEqual$1(prevProps.selected,this.props.selected)){this.setState({inputValue:null});}if(prevState.open!==this.state.open){if(prevState.open===false&&this.state.open===true){this.props.onCalendarOpen();}if(prevState.open===true&&this.state.open===false){this.props.onCalendarClose();}}}},{key:"componentWillUnmount",value:function componentWillUnmount(){this.clearPreventFocusTimeout();window.removeEventListener("scroll",this.onScroll,true);}},{key:"renderInputContainer",value:function renderInputContainer(){var _this$props5=this.props,showIcon=_this$props5.showIcon,icon=_this$props5.icon,calendarIconClassname=_this$props5.calendarIconClassname,toggleCalendarOnIconClick=_this$props5.toggleCalendarOnIconClick;var open=this.state.open;return/*#__PURE__*/React__default["default"].createElement("div",{className:"react-datepicker__input-container".concat(showIcon?" react-datepicker__view-calendar-icon":"")},showIcon&&/*#__PURE__*/React__default["default"].createElement(CalendarIcon$1,_extends$3({icon:icon,className:"".concat(calendarIconClassname," ").concat(open&&"react-datepicker-ignore-onclickoutside")},toggleCalendarOnIconClick?{onClick:this.toggleCalendar}:null)),this.state.isRenderAriaLiveMessage&&this.renderAriaLiveRegion(),this.renderDateInput(),this.renderClearButton());}},{key:"render",value:function render(){var calendar=this.renderCalendar();if(this.props.inline)return calendar;if(this.props.withPortal){var portalContainer=this.state.open?/*#__PURE__*/React__default["default"].createElement(TabLoop,{enableTabLoop:this.props.enableTabLoop},/*#__PURE__*/React__default["default"].createElement("div",{className:"react-datepicker__portal",tabIndex:-1,onKeyDown:this.onPortalKeyDown},calendar)):null;if(this.state.open&&this.props.portalId){portalContainer=/*#__PURE__*/React__default["default"].createElement(Portal,{portalId:this.props.portalId,portalHost:this.props.portalHost},portalContainer);}return/*#__PURE__*/React__default["default"].createElement("div",null,this.renderInputContainer(),portalContainer);}return/*#__PURE__*/React__default["default"].createElement(PopperComponent$1,{className:this.props.popperClassName,wrapperClassName:this.props.wrapperClassName,hidePopper:!this.isCalendarOpen(),portalId:this.props.portalId,portalHost:this.props.portalHost,popperModifiers:this.props.popperModifiers,targetComponent:this.renderInputContainer(),popperContainer:this.props.popperContainer,popperComponent:calendar,popperPlacement:this.props.popperPlacement,popperProps:this.props.popperProps,popperOnKeyDown:this.onPopperKeyDown,enableTabLoop:this.props.enableTabLoop,showArrow:this.props.showPopperArrow});}}],[{key:"defaultProps",get:function get(){return {allowSameDay:false,dateFormat:"MM/dd/yyyy",dateFormatCalendar:"LLLL yyyy",onChange:function onChange(){},disabled:false,disabledKeyboardNavigation:false,dropdownMode:"scroll",onFocus:function onFocus(){},onBlur:function onBlur(){},onKeyDown:function onKeyDown(){},onInputClick:function onInputClick(){},onSelect:function onSelect(){},onClickOutside:function onClickOutside(){},onMonthChange:function onMonthChange(){},onCalendarOpen:function onCalendarOpen(){},onCalendarClose:function onCalendarClose(){},preventOpenOnFocus:false,onYearChange:function onYearChange(){},onInputError:function onInputError(){},monthsShown:1,readOnly:false,withPortal:false,selectsDisabledDaysInRange:false,shouldCloseOnSelect:true,showTimeSelect:false,showTimeInput:false,showPreviousMonths:false,showMonthYearPicker:false,showFullMonthYearPicker:false,showTwoColumnMonthYearPicker:false,showFourColumnMonthYearPicker:false,showYearPicker:false,showQuarterYearPicker:false,showWeekPicker:false,strictParsing:false,swapRange:false,timeIntervals:30,timeCaption:"Time",previousMonthAriaLabel:"Previous Month",previousMonthButtonLabel:"Previous Month",nextMonthAriaLabel:"Next Month",nextMonthButtonLabel:"Next Month",previousYearAriaLabel:"Previous Year",previousYearButtonLabel:"Previous Year",nextYearAriaLabel:"Next Year",nextYearButtonLabel:"Next Year",timeInputLabel:"Time",enableTabLoop:true,yearItemNumber:DEFAULT_YEAR_ITEM_NUMBER,focusSelectedMonth:false,showPopperArrow:true,excludeScrollbar:true,customTimeInput:null,calendarStartDay:undefined,toggleCalendarOnIconClick:false,usePointerEvent:false};}}]);}(React__default["default"].Component);var PRESELECT_CHANGE_VIA_INPUT="input";var PRESELECT_CHANGE_VIA_NAVIGATE="navigate";
 
-  const CustomDatePicker = _ref => {
-    let {
-      startDate,
-      onChangeStartDate,
-      endDate,
-      onChangeEndDate
-    } = _ref;
+  const CustomDatePicker = ({
+    startDate,
+    onChangeStartDate,
+    endDate,
+    onChangeEndDate
+  }) => {
     const onChange = dates => {
       const [start, end] = dates;
       onChangeStartDate(start);
@@ -23773,15 +23813,14 @@
     }));
   };
 
-  const Description = _ref => {
-    let {
-      title = "Title",
-      value = "Description",
-      textColor = "default",
-      subtitle,
-      linkSubtitle,
-      onClickSubtitle
-    } = _ref;
+  const Description = ({
+    title = "Title",
+    value = "Description",
+    textColor = "default",
+    subtitle,
+    linkSubtitle,
+    onClickSubtitle
+  }) => {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "w-full"
     }, title && /*#__PURE__*/React__default["default"].createElement("p", {
@@ -23789,7 +23828,10 @@
     }, title), /*#__PURE__*/React__default["default"].createElement("div", {
       className: "py-1"
     }, /*#__PURE__*/React__default["default"].createElement("p", {
-      className: "\n              ".concat(textColor == "default" && "text-black font-semibold text-base", " \n              ").concat(textColor == "success" && "text-success500 font-semibold text-base", " \n            ")
+      className: `
+              ${textColor == "default" && "text-black font-semibold text-base"} 
+              ${textColor == "success" && "text-success500 font-semibold text-base"} 
+            `
     }, value)), subtitle && /*#__PURE__*/React__default["default"].createElement("div", {
       className: "flex items-center mt-1"
     }, /*#__PURE__*/React__default["default"].createElement("p", {
@@ -23800,12 +23842,11 @@
     }, linkSubtitle)));
   };
 
-  const DescriptionFile = _ref => {
-    let {
-      title = "Title",
-      link = "https://sprintasia.atlassian.net/browse/NP-165",
-      fileName = ""
-    } = _ref;
+  const DescriptionFile = ({
+    title = "Title",
+    link = "https://sprintasia.atlassian.net/browse/NP-165",
+    fileName = ""
+  }) => {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "w-full"
     }, title && /*#__PURE__*/React__default["default"].createElement("p", {
@@ -23822,18 +23863,17 @@
     }, fileName, ".pdf")));
   };
 
-  const DropdownCard = _ref => {
-    let {
-      options = [{
-        picture: "https://picsum.photos/200",
-        name: "Loading...",
-        code: "Loading...",
-        detail: "Loading..."
-      }],
-      placeholder = "Filter",
-      onSelect,
-      title
-    } = _ref;
+  const DropdownCard = ({
+    options = [{
+      picture: "https://picsum.photos/200",
+      name: "Loading...",
+      code: "Loading...",
+      detail: "Loading..."
+    }],
+    placeholder = "Filter",
+    onSelect,
+    title
+  }) => {
     const [isOpen, setIsOpen] = React.useState(false);
     const [dataDropdown, setDataDropdown] = React.useState(options);
     const [inputValue, setInputValue] = React.useState('');
@@ -23897,7 +23937,7 @@
       "aria-labelledby": "options-menu"
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "px-1 py-2 max-h-56 overflow-y-auto"
-    }, (dataDropdown === null || dataDropdown === void 0 ? void 0 : dataDropdown.length) > 0 ? dataDropdown.map((option, index) => /*#__PURE__*/React__default["default"].createElement("div", {
+    }, dataDropdown?.length > 0 ? dataDropdown.map((option, index) => /*#__PURE__*/React__default["default"].createElement("div", {
       key: index,
       className: "hover:bg-neutral20 bg-white py-2.5 px-4 my-0.5 rounded-md cursor-pointer",
       onClick: () => handleOptionClick(option)
@@ -23921,14 +23961,13 @@
     }, /*#__PURE__*/React__default["default"].createElement("p", null, "Data Not Available"))))));
   };
 
-  const DropdownChip = _ref => {
-    let {
-      options = ["Type", "Company", "Category", "Location", "Product"],
-      onSelect,
-      selectedOptions,
-      onRemoveOption,
-      title = "Title Dropdown"
-    } = _ref;
+  const DropdownChip = ({
+    options = ["Type", "Company", "Category", "Location", "Product"],
+    onSelect,
+    selectedOptions,
+    onRemoveOption,
+    title = "Title Dropdown"
+  }) => {
     const [isOpen, setIsOpen] = React.useState(false);
     const [inputValue, setInputValue] = React.useState('');
     const dropdownRef = React.useRef(null);
@@ -23965,7 +24004,7 @@
       className: "relative"
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "flex items-center bg-neutral20 border-neutral50 border rounded-md focus:outline-none"
-    }, (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) > 0 && selectedOptions.map(selectedOption => /*#__PURE__*/React__default["default"].createElement("div", {
+    }, selectedOptions?.length > 0 && selectedOptions.map(selectedOption => /*#__PURE__*/React__default["default"].createElement("div", {
       className: "ml-4",
       key: selectedOption
     }, /*#__PURE__*/React__default["default"].createElement(Chip, {
@@ -23985,7 +24024,7 @@
       "aria-labelledby": "options-menu"
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "px-1 py-2 max-h-40 overflow-y-auto"
-    }, (options === null || options === void 0 ? void 0 : options.length) > 0 && options.filter(option => option.toLowerCase().includes(inputValue.toLowerCase()) && !(selectedOptions !== null && selectedOptions !== void 0 && selectedOptions.includes(option))).map(option => /*#__PURE__*/React__default["default"].createElement("div", {
+    }, options?.length > 0 && options.filter(option => option.toLowerCase().includes(inputValue.toLowerCase()) && !selectedOptions?.includes(option)).map(option => /*#__PURE__*/React__default["default"].createElement("div", {
       key: option,
       className: "hover:bg-neutral20 bg-white py-2.5 px-4 my-0.5 rounded-md cursor-pointer",
       onClick: () => handleOptionClick(option)
@@ -23994,24 +24033,23 @@
     }, option)))))));
   };
 
-  const DropdownText = _ref => {
-    let {
-      options = [{
-        option: "Name 1",
-        value: "Value 1"
-      }],
-      onSelect,
-      title = "Title Dropdown",
-      placeholder = "Placeholder",
-      isRequired = true,
-      isEdited = true,
-      mode = "default",
-      footer = null,
-      currentOption = {
-        option: "Name 1",
-        value: "Value 1"
-      }
-    } = _ref;
+  const DropdownText = ({
+    options = [{
+      option: "Name 1",
+      value: "Value 1"
+    }],
+    onSelect,
+    title = "Title Dropdown",
+    placeholder = "Placeholder",
+    isRequired = true,
+    isEdited = true,
+    mode = "default",
+    footer = null,
+    currentOption = {
+      option: "Name 1",
+      value: "Value 1"
+    }
+  }) => {
     const [isOpen, setIsOpen] = React.useState(false);
     const [selectedOption, setSelectedOption] = React.useState(null);
     const dropdownRef = React.useRef(null);
@@ -24054,7 +24092,11 @@
       className: "rounded-md shadow-sm"
     }, /*#__PURE__*/React__default["default"].createElement("button", {
       type: "button",
-      className: "\n                        ".concat(isEdited == false && "bg-neutral30 cursor-not-allowed", " \n                        ").concat(mode == "default" && "border-neutral50 bg-neutral20 cursor-pointer", " \n                        ").concat(mode == "danger" && "border-danger500 bg-danger50 cursor-pointer", " \n                        flex items-center w-full py-2.5 text-left px-4 font-normal text-sm text-neutral300 rounded-md border focus:outline-none overflow-hidden"),
+      className: `
+                        ${isEdited == false && "bg-neutral30 cursor-not-allowed"} 
+                        ${mode == "default" && "border-neutral50 bg-neutral20 cursor-pointer"} 
+                        ${mode == "danger" && "border-danger500 bg-danger50 cursor-pointer"} 
+                        flex items-center w-full py-2.5 text-left px-4 font-normal text-sm text-neutral300 rounded-md border focus:outline-none overflow-hidden`,
       onClick: () => isEdited && handleToggleDropdownText()
     }, /*#__PURE__*/React__default["default"].createElement("span", {
       className: "flex-grow overflow-hidden"
@@ -25883,20 +25925,19 @@
   }
   function noop() {}
 
-  const DropzoneUploadFile = _ref => {
-    let {
-      title = "Title Dropzone",
-      subtitle = "Format File PDF, JPEG JPG, Maximal File 5 MB",
-      required = false,
-      onDrop,
-      maxFiles = 1,
-      selectedFile
-    } = _ref;
+  const DropzoneUploadFile = ({
+    title = "Title Dropzone",
+    subtitle = "Format File PDF, JPEG JPG, Maximal File 5 MB",
+    required = false,
+    onDrop,
+    maxFiles = 1,
+    selectedFile,
+    error = ""
+  }) => {
     const [errorMessage, setErrorMessage] = React.useState("");
     const onDropRejected = rejectedFiles => {
-      var _file$errors$;
       const file = rejectedFiles[0];
-      if (((_file$errors$ = file.errors[0]) === null || _file$errors$ === void 0 ? void 0 : _file$errors$.code) === "file-too-large") {
+      if (file.errors[0]?.code === "file-too-large") {
         setErrorMessage("Your file is too large, Max file size is 5 MB");
       }
     };
@@ -25927,7 +25968,7 @@
     }, /*#__PURE__*/React__default["default"].createElement("div", _extends$2({}, getRootProps({
       className: "dropzone"
     }), {
-      className: "bg-neutral20 w-full h-28 rounded-lg border-2 border-neutral50 border-dashed"
+      className: `bg-neutral20 w-full h-28 rounded-lg border-2 ${error ? "border-danger500" : "border-neutral50"} border-dashed`
     }), /*#__PURE__*/React__default["default"].createElement("input", _extends$2({}, getInputProps(), {
       required: required
     })), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -25948,16 +25989,17 @@
       className: "text-neutral300"
     })), /*#__PURE__*/React__default["default"].createElement("p", {
       className: "text-sm text-black mt-2"
-    }, selectedFile === null || selectedFile === void 0 ? void 0 : selectedFile.name)))))), /*#__PURE__*/React__default["default"].createElement("p", {
+    }, selectedFile?.name)))))), error && /*#__PURE__*/React__default["default"].createElement("p", {
+      className: "text-danger500 text-xs mt-1"
+    }, error), /*#__PURE__*/React__default["default"].createElement("p", {
       className: "text-xs text-neutral300 mt-1"
     }, subtitle));
   };
 
-  const DropzoneUploadPhoto = _ref => {
-    let {
-      onFileChange,
-      currentImage
-    } = _ref;
+  const DropzoneUploadPhoto = ({
+    onFileChange,
+    currentImage
+  }) => {
     const [selectedImage, setSelectedImage] = React.useState(null);
     const [isHovered, setIsHovered] = React.useState(false);
     const {
@@ -26547,12 +26589,11 @@
   if(!wb.Workbook.Sheets[idx])wb.Workbook.Sheets[idx]={};switch(vis){case 0:case 1:case 2:break;default:throw new Error("Bad sheet visibility setting "+vis);}// $FlowIgnore
   wb.Workbook.Sheets[idx].Hidden=vis;}/* set number format */function cell_set_number_format(cell/*:Cell*/,fmt/*:string|number*/){cell.z=fmt;return cell;}/* set cell hyperlink */function cell_set_hyperlink(cell/*:Cell*/,target/*:string*/,tooltip/*:?string*/){if(!target){delete cell.l;}else {cell.l={Target:target}/*:Hyperlink*/;if(tooltip)cell.l.Tooltip=tooltip;}return cell;}function cell_set_internal_link(cell/*:Cell*/,range/*:string*/,tooltip/*:?string*/){return cell_set_hyperlink(cell,"#"+range,tooltip);}/* add to cell comments */function cell_add_comment(cell/*:Cell*/,text/*:string*/,author/*:?string*/){if(!cell.c)cell.c=[];cell.c.push({t:text,a:author||"SheetJS"});}/* set array formula and flush related cells */function sheet_set_array_formula(ws/*:Worksheet*/,range,formula/*:string*/,dynamic/*:boolean*/){var rng=typeof range!="string"?range:safe_decode_range(range);var rngstr=typeof range=="string"?range:encode_range(range);for(var R=rng.s.r;R<=rng.e.r;++R)for(var C=rng.s.c;C<=rng.e.c;++C){var cell=ws_get_cell_stub(ws,R,C);cell.t='n';cell.F=rngstr;delete cell.v;if(R==rng.s.r&&C==rng.s.c){cell.f=formula;if(dynamic)cell.D=true;}}return ws;}var utils/*:any*/={encode_col:encode_col,encode_row:encode_row,encode_cell:encode_cell,encode_range:encode_range,decode_col:decode_col,decode_row:decode_row,split_cell:split_cell,decode_cell:decode_cell,decode_range:decode_range,format_cell:format_cell,sheet_add_aoa:sheet_add_aoa,sheet_add_json:sheet_add_json,sheet_add_dom:sheet_add_dom,aoa_to_sheet:aoa_to_sheet,json_to_sheet:json_to_sheet,table_to_sheet:parse_dom_table,table_to_book:table_to_book,sheet_to_csv:sheet_to_csv,sheet_to_txt:sheet_to_txt,sheet_to_json:sheet_to_json,sheet_to_html:sheet_to_html,sheet_to_formulae:sheet_to_formulae,sheet_to_row_object_array:sheet_to_json,sheet_get_cell:ws_get_cell_stub,book_new:book_new,book_append_sheet:book_append_sheet,book_set_sheet_visibility:book_set_sheet_visibility,cell_set_number_format:cell_set_number_format,cell_set_hyperlink:cell_set_hyperlink,cell_set_internal_link:cell_set_internal_link,cell_add_comment:cell_add_comment,sheet_set_array_formula:sheet_set_array_formula,consts:{SHEET_VISIBLE:0,SHEET_HIDDEN:1,SHEET_VERY_HIDDEN:2}};
 
-  const ExportToExcel = _ref => {
-    let {
-      dataExport,
-      fileName,
-      title
-    } = _ref;
+  const ExportToExcel = ({
+    dataExport,
+    fileName,
+    title
+  }) => {
     const fileType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8";
     const fileExtension = ".xlsx";
     const exportToCSV = (dataExport, fileName) => {
@@ -26578,11 +26619,10 @@
     });
   };
 
-  const FilterCheckbox = _ref => {
-    let {
-      options = ["Type", "Company"],
-      onSelect
-    } = _ref;
+  const FilterCheckbox = ({
+    options = ["Type", "Company"],
+    onSelect
+  }) => {
     const [isOpen, setIsOpen] = React.useState(false);
     const [selectedOptions, setSelectedOptions] = React.useState([]);
     const dropdownRef = React.useRef(null);
@@ -26609,7 +26649,7 @@
         onSelect(updatedOptions);
       }
     };
-    const buttonText = selectedOptions.length > 0 ? "".concat(selectedOptions.length, " Filter Selected") : 'Filter';
+    const buttonText = selectedOptions.length > 0 ? `${selectedOptions.length} Filter Selected` : 'Filter';
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "relative inline-block text-left",
       ref: dropdownRef
@@ -26635,7 +26675,7 @@
       className: "px-1 py-2"
     }, options.map(option => /*#__PURE__*/React__default["default"].createElement("div", {
       key: option,
-      className: "hover:bg-neutral20 bg-white py-2.5 px-4 my-0.5 rounded-md flex items-center cursor-pointer ".concat(selectedOptions.includes(option) ? 'bg-primary500' : ''),
+      className: `hover:bg-neutral20 bg-white py-2.5 px-4 my-0.5 rounded-md flex items-center cursor-pointer ${selectedOptions.includes(option) ? 'bg-primary500' : ''}`,
       onClick: () => handleOptionClick(option)
     }, /*#__PURE__*/React__default["default"].createElement("input", {
       type: "checkbox",
@@ -26643,15 +26683,14 @@
       checked: selectedOptions.includes(option),
       onChange: () => handleOptionClick(option)
     }), /*#__PURE__*/React__default["default"].createElement("p", {
-      className: "text-sm ".concat(selectedOptions.includes(option) ? 'text-primary500' : 'text-black')
+      className: `text-sm ${selectedOptions.includes(option) ? 'text-primary500' : 'text-black'}`
     }, option))))));
   };
 
-  const FilterText = _ref => {
-    let {
-      options = ["Type", "Company"],
-      onSelect
-    } = _ref;
+  const FilterText = ({
+    options = ["Type", "Company"],
+    onSelect
+  }) => {
     const [isOpen, setIsOpen] = React.useState(false);
     const [selectedOption, setSelectedOption] = React.useState(null);
     const dropdownRef = React.useRef(null);
@@ -26710,21 +26749,23 @@
     }, option))))));
   };
 
-  const Menu = _ref => {
-    let {
-      isActive = true,
-      title = "Navigation",
-      iconMenuActive = PiArchive,
-      iconMenuPassive = PiArchive,
-      isOpen = false,
-      type = "parent",
-      isHaveChild = false,
-      isExpand = true
-    } = _ref;
+  const Menu = ({
+    isActive = true,
+    title = "Navigation",
+    iconMenuActive = PiArchive,
+    iconMenuPassive = PiArchive,
+    isOpen = false,
+    type = "parent",
+    isHaveChild = false,
+    isExpand = true
+  }) => {
     const IconComponentActive = iconMenuActive;
     const IconComponentPassive = iconMenuPassive;
     return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "\n            ".concat(isActive ? type === "parent" ? "bg-primary500" : "bg-primary50" : "bg-white hover:bg-neutral20", "\n            ").concat(isExpand ? "justify-between" : "justify-center", "\n            flex items-center rounded-lg py-2.5 px-2 mb-1.5 cursor-pointer")
+      className: `
+            ${isActive ? type === "parent" ? "bg-primary500" : "bg-primary50" : "bg-white hover:bg-neutral20"}
+            ${isExpand ? "justify-between" : "justify-center"}
+            flex items-center rounded-lg py-2.5 px-2 mb-1.5 cursor-pointer`
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "flex items-center"
     }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -26742,7 +26783,9 @@
       size: "20",
       className: "text-neutral500"
     }))), isExpand && /*#__PURE__*/React__default["default"].createElement("p", {
-      className: "\n                        ".concat(isActive ? type === "parent" ? "text-white" : "text-primary500" : "text-neutral500", "\n                        pl-3 font-semibold text-sm")
+      className: `
+                        ${isActive ? type === "parent" ? "text-white" : "text-primary500" : "text-neutral500"}
+                        pl-3 font-semibold text-sm`
     }, title)), type === "parent" && isHaveChild && isExpand && /*#__PURE__*/React__default["default"].createElement("div", {
       className: "w-5 h-5"
     }, isOpen ? /*#__PURE__*/React__default["default"].createElement(PiCaretUp, {
@@ -28838,19 +28881,18 @@
     }, props.subtitle))))))));
   };
 
-  const TextInput = _ref => {
-    let {
-      title = "",
-      leftIcon = null,
-      rightIcon = null,
-      placeholder = "",
-      footer = null,
-      type = 'text',
-      mode = "default",
-      isRequired = true,
-      value,
-      onChangeInput
-    } = _ref;
+  const TextInput = ({
+    title = "",
+    leftIcon = null,
+    rightIcon = null,
+    placeholder = "",
+    footer = null,
+    type = 'text',
+    mode = "default",
+    isRequired = true,
+    value,
+    onChangeInput
+  }) => {
     const [isFocused, setIsFocused] = React.useState(false);
     const [showPassword, setShowPassword] = React.useState(false);
     const handleFocus = () => {
@@ -28876,10 +28918,21 @@
       className: "absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none"
     }, /*#__PURE__*/React__default["default"].createElement(PiInfo, {
       size: 16,
-      className: "\n                        ".concat(mode === "primary" && "text-black", "\n                        ").concat(mode === "disable" && "text-neutral50", "\n                        ").concat(mode === "danger" && "text-danger500", "\n                        ")
+      className: `
+                        ${mode === "primary" && "text-black"}
+                        ${mode === "disable" && "text-neutral50"}
+                        ${mode === "danger" && "text-danger500"}
+                        `
     })), /*#__PURE__*/React__default["default"].createElement("input", {
       type: type === 'password' ? showPassword ? 'text' : 'password' : type,
-      className: "py-2.5 px-4 w-full font-normal text-sm text-neutral300 rounded-md border\n                        ".concat(!value && mode === "default" && 'bg-neutral20 border-neutral50 focus:outline-2 outline-primary500', "\n                        ").concat(value && mode === "default" && 'bg-neutral20 border-black focus:outline-2 outline-primary500', "\n                        ").concat(isFocused && mode === "default" && 'bg-neutral20 border-primary500', "\n                        ").concat(mode === "disable" && 'bg-neutral30 border-neutral50', "\n                        ").concat(mode === "danger" && 'bg-danger50 border-danger500 focus:outline-2 outline-danger500', "\n                        ").concat(leftIcon ? 'pl-10' : 'pl-3', "\n                        ").concat(rightIcon ? 'pr-10' : 'pr-3'),
+      className: `py-2.5 px-4 w-full font-normal text-sm text-neutral300 rounded-md border
+                        ${!value && mode === "default" && 'bg-neutral20 border-neutral50 focus:outline-2 outline-primary500'}
+                        ${value && mode === "default" && 'bg-neutral20 border-black focus:outline-2 outline-primary500'}
+                        ${isFocused && mode === "default" && 'bg-neutral20 border-primary500'}
+                        ${mode === "disable" && 'bg-neutral30 border-neutral50'}
+                        ${mode === "danger" && 'bg-danger50 border-danger500 focus:outline-2 outline-danger500'}
+                        ${leftIcon ? 'pl-10' : 'pl-3'}
+                        ${rightIcon ? 'pr-10' : 'pr-3'}`,
       placeholder: placeholder,
       disabled: mode === "disable",
       value: value,
@@ -28891,15 +28944,19 @@
       onClick: handleTogglePasswordVisibility
     }, showPassword ? /*#__PURE__*/React__default["default"].createElement(PiEye, {
       size: 16,
-      className: "text-black ".concat(mode === "danger" && "text-danger500")
+      className: `text-black ${mode === "danger" && "text-danger500"}`
     }) : /*#__PURE__*/React__default["default"].createElement(PiEyeClosedLight, {
       size: 16,
-      className: "text-black ".concat(mode === "danger" && "text-danger500")
+      className: `text-black ${mode === "danger" && "text-danger500"}`
     })), rightIcon && /*#__PURE__*/React__default["default"].createElement("span", {
       className: "absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none"
     }, /*#__PURE__*/React__default["default"].createElement(PiInfo, {
       size: 16,
-      className: "\n                        ".concat(mode === "primary" && "text-black", "\n                        ").concat(mode === "disable" && "text-neutral50", "\n                        ").concat(mode === "danger" && "text-danger500", "\n                        ")
+      className: `
+                        ${mode === "primary" && "text-black"}
+                        ${mode === "disable" && "text-neutral50"}
+                        ${mode === "danger" && "text-danger500"}
+                        `
     }))), footer && /*#__PURE__*/React__default["default"].createElement("div", {
       className: "mt-1"
     }, mode === "danger" ? /*#__PURE__*/React__default["default"].createElement("div", {
@@ -44083,24 +44140,23 @@
     }));
   };
 
-  const ModalState = _ref => {
-    let {
-      isOpen = false,
-      onClose = () => {},
-      title = 'Title Modal',
-      subtitle = 'Subtitle Modal',
-      type = 'default',
-      addition = "state",
-      placeholderTextArea,
-      onChangeTextArea,
-      valueTextArea,
-      titleButtonLeft = 'Cancel',
-      titleButtonRight = 'Okay',
-      leftAction = onClose,
-      rightAction = onClose,
-      fileUploaded,
-      textInputValue
-    } = _ref;
+  const ModalState = ({
+    isOpen = false,
+    onClose = () => {},
+    title = 'Title Modal',
+    subtitle = 'Subtitle Modal',
+    type = 'default',
+    addition = "state",
+    placeholderTextArea,
+    onChangeTextArea,
+    valueTextArea,
+    titleButtonLeft = 'Cancel',
+    titleButtonRight = 'Okay',
+    leftAction = onClose,
+    rightAction = onClose,
+    fileUploaded,
+    textInputValue
+  }) => {
     const cancelButtonRef = React.useRef(null);
     React.useState(false);
     const isButtonActive = () => {
@@ -44727,7 +44783,7 @@
     }
     return /*#__PURE__*/React__default["default"].createElement("div", null, dataNotification.map((value, index) => /*#__PURE__*/React__default["default"].createElement("div", {
       key: index,
-      className: "px-2 flex items-center cursor-pointer bg-white hover:bg-neutral20 p-2 ".concat(index === 0 ? 'rounded-t-md' : index === dataNotification.length - 1 ? 'rounded-b-md' : ''),
+      className: `px-2 flex items-center cursor-pointer bg-white hover:bg-neutral20 p-2 ${index === 0 ? 'rounded-t-md' : index === dataNotification.length - 1 ? 'rounded-b-md' : ''}`,
       onClick: () => handleNavigation(value.navigate)
     }, /*#__PURE__*/React__default["default"].createElement(value.logo, {
       size: 16,
@@ -44737,14 +44793,13 @@
     }, value.title))));
   };
 
-  const SearchInput = _ref => {
-    let {
-      onChange = () => {},
-      onEnterPress = () => {},
-      valueInput,
-      placeholder = 'Search Client',
-      width = 'medium'
-    } = _ref;
+  const SearchInput = ({
+    onChange = () => {},
+    onEnterPress = () => {},
+    valueInput,
+    placeholder = 'Search Client',
+    width = 'medium'
+  }) => {
     const handleKeyDown = event => {
       if (event.key === 'Enter') {
         onEnterPress();
@@ -44767,15 +44822,14 @@
       placeholder: placeholder,
       onChange: onChange,
       onKeyDown: handleKeyDown,
-      className: "".concat(selectedWidthClass, " py-2.5 pl-8 pr-4 bg-neutral-200 border-neutral-500 font-normal text-sm text-neutral-800 rounded-md border focus:outline-none")
+      className: `${selectedWidthClass} py-2.5 pl-8 pr-4 bg-neutral-200 border-neutral-500 font-normal text-sm text-neutral-800 rounded-md border focus:outline-none`
     }));
   };
 
-  const Stepper = _ref => {
-    let {
-      data = ["Basic Information", "Address Information", "Billing Information"],
-      currentStep = 2
-    } = _ref;
+  const Stepper = ({
+    data = ["Basic Information", "Address Information", "Billing Information"],
+    currentStep = 2
+  }) => {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "flex w-full justify-center items-center"
     }, data.map((value, index) => /*#__PURE__*/React__default["default"].createElement("div", {
@@ -44784,13 +44838,13 @@
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "flex items-center justify-center w-full"
     }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "".concat(index === 0 ? "opacity-0" : "opacity-100", " h-px bg-neutral40 flex-grow")
+      className: `${index === 0 ? "opacity-0" : "opacity-100"} h-px bg-neutral40 flex-grow`
     }), /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "w-10 h-10 rounded-full bg-primary500 cursor-pointer flex items-center justify-center font-semibold ".concat(index === currentStep ? 'bg-primary500 text-white' : 'bg-white text-black')
+      className: `w-10 h-10 rounded-full bg-primary500 cursor-pointer flex items-center justify-center font-semibold ${index === currentStep ? 'bg-primary500 text-white' : 'bg-white text-black'}`
     }, /*#__PURE__*/React__default["default"].createElement("p", {
       className: "text-center"
     }, index + 1)), /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "".concat(index === data.length - 1 ? "opacity-0" : "opacity-100", " h-px bg-neutral40 flex-grow")
+      className: `${index === data.length - 1 ? "opacity-0" : "opacity-100"} h-px bg-neutral40 flex-grow`
     })), /*#__PURE__*/React__default["default"].createElement("div", {
       className: "justify-center w-full flex"
     }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -44802,34 +44856,32 @@
     }, value))))));
   };
 
-  const Switch = _ref => {
-    let {
-      onChange,
-      checked,
-      isEdit
-    } = _ref;
+  const Switch = ({
+    onChange,
+    checked,
+    isEdit
+  }) => {
     const handleClick = () => {
       if (isEdit) {
         onChange();
       }
     };
     return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "relative inline-block ".concat(checked ? 'bg-primary500' : 'bg-neutral40', " rounded-full w-12 h-6 transition-all duration-300 ").concat(isEdit ? "cursor-pointer" : "cursor-default"),
+      className: `relative inline-block ${checked ? 'bg-primary500' : 'bg-neutral40'} rounded-full w-12 h-6 transition-all duration-300 ${isEdit ? "cursor-pointer" : "cursor-default"}`,
       onClick: handleClick
     }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "absolute flex items-center justify-center w-6 h-6 transition-all duration-300 ".concat(checked ? 'right-0' : 'left-0')
+      className: `absolute flex items-center justify-center w-6 h-6 transition-all duration-300 ${checked ? 'right-0' : 'left-0'}`
     }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "w-4 h-4 bg-white rounded-full shadow-md transition-all"
+      className: `w-4 h-4 bg-white rounded-full shadow-md transition-all`
     })));
   };
 
-  const ChipBar = _ref => {
-    let {
-      currentTab = "Pulsa",
-      dataBar = ["All Client", "Waiting for approval", "Approved", "Declined"],
-      dataValue = ["All Client", "Waiting for approval", "Approved", "Declined"],
-      onChangeChipBar
-    } = _ref;
+  const ChipBar = ({
+    currentTab = "Pulsa",
+    dataBar = ["All Client", "Waiting for approval", "Approved", "Declined"],
+    dataValue = ["All Client", "Waiting for approval", "Approved", "Declined"],
+    onChangeChipBar
+  }) => {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "w-full flex bg-white border-b border-neutral40 py-2 px-8"
     }, dataBar.map((value, index) => /*#__PURE__*/React__default["default"].createElement("div", {
@@ -44841,21 +44893,20 @@
     }))));
   };
 
-  const TabBar = _ref => {
-    let {
-      currentTab = "all",
-      dataBar = ["All Voucher", "Digital Voucher", "PPOB Voucher", "Loyalty Voucher"],
-      dataValue = ["All Voucher", "Digital Voucher", "PPOB Voucher", "Loyalty Voucher"],
-      onChangeTabBar
-    } = _ref;
+  const TabBar = ({
+    currentTab = "all",
+    dataBar = ["All Voucher", "Digital Voucher", "PPOB Voucher", "Loyalty Voucher"],
+    dataValue = ["All Voucher", "Digital Voucher", "PPOB Voucher", "Loyalty Voucher"],
+    onChangeTabBar
+  }) => {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "w-full flex bg-white border-b border-neutral40 pt-1.5 px-8"
     }, dataBar.map((value, index) => /*#__PURE__*/React__default["default"].createElement("div", {
       key: dataValue[index],
-      className: "".concat(currentTab === dataValue[index] ? "text-primary500 border-b-2 border-primary500" : "text-neutral300 border-b-2 border-white", " cursor-pointer w-fit mx-1.5"),
+      className: `${currentTab === dataValue[index] ? "text-primary500 border-b-2 border-primary500" : "text-neutral300 border-b-2 border-white"} cursor-pointer w-fit mx-1.5`,
       onClick: () => onChangeTabBar(dataValue[index])
     }, /*#__PURE__*/React__default["default"].createElement("p", {
-      className: "".concat(currentTab === dataValue[index] ? "font-medium" : "font-normal", " text-sm py-2.5 px-4 font-medium")
+      className: `${currentTab === dataValue[index] ? "font-medium" : "font-normal"} text-sm py-2.5 px-4 font-medium`
     }, value))));
   };
 
@@ -45247,15 +45298,14 @@
     }, "Rp", price)))))));
   };
 
-  const Pagination = _ref => {
-    let {
-      firstData = 0,
-      lastData = 0,
-      totalCount = 0,
-      currentPage = 1,
-      totalPage = 10,
-      onChangePages
-    } = _ref;
+  const Pagination = ({
+    firstData = 0,
+    lastData = 0,
+    totalCount = 0,
+    currentPage = 1,
+    totalPage = 10,
+    onChangePages
+  }) => {
     const pageNumbers = Array.from({
       length: totalPage
     }, (_, index) => index + 1);
@@ -45271,7 +45321,7 @@
     }, "From ", firstData, " to ", lastData, " of total : ", totalCount)), /*#__PURE__*/React__default["default"].createElement("div", {
       className: "flex px-4 py-2"
     }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "m-1 w-10 h-10 rounded-full ".concat(currentPage === 1 ? 'bg-neutral20 cursor-default' : 'bg-white cursor-pointer border border-neutral40', " flex items-center justify-center"),
+      className: `m-1 w-10 h-10 rounded-full ${currentPage === 1 ? 'bg-neutral20 cursor-default' : 'bg-white cursor-pointer border border-neutral40'} flex items-center justify-center`,
       onClick: () => {
         if (currentPage !== 1) {
           handleChangePages(currentPage - 1);
@@ -45282,7 +45332,7 @@
       className: "text-neutral300"
     })), totalPage < 4 ? pageNumbers.map(pageNumber => /*#__PURE__*/React__default["default"].createElement("div", {
       key: pageNumber,
-      className: "m-1 w-10 h-10 rounded-full cursor-pointer ".concat(currentPage === pageNumber ? 'bg-primary500 text-white' : 'bg-white text-black border border-neutral40', " flex items-center justify-center font-semibold"),
+      className: `m-1 w-10 h-10 rounded-full cursor-pointer ${currentPage === pageNumber ? 'bg-primary500 text-white' : 'bg-white text-black border border-neutral40'} flex items-center justify-center font-semibold`,
       onClick: () => handleChangePages(pageNumber)
     }, /*#__PURE__*/React__default["default"].createElement("p", null, pageNumber))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, currentPage == 1 && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
       key: currentPage,
@@ -45345,7 +45395,7 @@
       className: "m-1 w-10 h-10 rounded-full bg-primary500 text-white cursor-pointer flex items-center justify-center font-semibold",
       onClick: () => handleChangePages(currentPage)
     }, /*#__PURE__*/React__default["default"].createElement("p", null, currentPage)))), /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "m-1 w-10 h-10 rounded-full ".concat(currentPage === totalPage ? 'bg-neutral20 cursor-default' : 'bg-white cursor-pointer border border-neutral40', " flex items-center justify-center"),
+      className: `m-1 w-10 h-10 rounded-full ${currentPage === totalPage ? 'bg-neutral20 cursor-default' : 'bg-white cursor-pointer border border-neutral40'} flex items-center justify-center`,
       onClick: () => {
         if (currentPage !== totalPage) {
           handleChangePages(currentPage + 1);
@@ -45357,10 +45407,9 @@
     })))));
   };
 
-  const HeaderTable = _ref => {
-    let {
-      dataHeader = ["CLIENT NAME", "DIVISION", "PIC", "CONTACT", "TYPE", "STATE"]
-    } = _ref;
+  const HeaderTable = ({
+    dataHeader = ["CLIENT NAME", "DIVISION", "PIC", "CONTACT", "TYPE", "STATE"]
+  }) => {
     return /*#__PURE__*/React__default["default"].createElement("thead", null, /*#__PURE__*/React__default["default"].createElement("tr", null, dataHeader.map((value, index) => /*#__PURE__*/React__default["default"].createElement("th", {
       key: index,
       className: "py-3.5 px-4 bg-neutral40 text-neutral500 text-sm font-semibold text-left"
@@ -45501,32 +45550,31 @@
     }, "\xA0"))))));
   };
 
-  const ModalBilling = _ref => {
-    let {
-      isOpen = false,
-      onClose = () => {},
-      title = 'Title Modal',
-      subtitle = 'Subtitle Modal',
-      type = 'default',
-      addition,
-      placeholderTextArea,
-      onChangeTextArea,
-      valueTextArea,
-      titleButtonLeft = 'Cancel',
-      titleButtonRight = 'Okay',
-      leftAction = onClose,
-      rightAction = onClose,
-      fileName = "Bukti Pembayaran",
-      clientName = "",
-      billingID = "",
-      totalAmount = "",
-      paymentMethod = "",
-      divisionName = "",
-      dateAndTime = "",
-      titleStatus = "",
-      divisisonId = "",
-      declineReason = ""
-    } = _ref;
+  const ModalBilling = ({
+    isOpen = false,
+    onClose = () => {},
+    title = 'Title Modal',
+    subtitle = 'Subtitle Modal',
+    type = 'default',
+    addition,
+    placeholderTextArea,
+    onChangeTextArea,
+    valueTextArea,
+    titleButtonLeft = 'Cancel',
+    titleButtonRight = 'Okay',
+    leftAction = onClose,
+    rightAction = onClose,
+    fileName = "Bukti Pembayaran",
+    clientName = "",
+    billingID = "",
+    totalAmount = "",
+    paymentMethod = "",
+    divisionName = "",
+    dateAndTime = "",
+    titleStatus = "",
+    divisisonId = "",
+    declineReason = ""
+  }) => {
     const cancelButtonRef = React.useRef(null);
     function handleBackgroundClick(e) {
       e.stopPropagation();
@@ -45825,10 +45873,9 @@
     }, "\xA0"))))));
   };
 
-  const VerticalStepBar = _ref => {
-    let {
-      steps
-    } = _ref;
+  const VerticalStepBar = ({
+    steps
+  }) => {
     const [showMore, setShowMore] = React.useState(false);
     const toggleShowMore = () => {
       setShowMore(!showMore);
@@ -45863,7 +45910,7 @@
     }, step.date)), /*#__PURE__*/React__default["default"].createElement("div", {
       className: "flex flex-col items-center mr-4"
     }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "w-5 h-5 rounded-full ".concat(index === 0 ? 'bg-primary500' : 'bg-neutral40')
+      className: `w-5 h-5 rounded-full ${index === 0 ? 'bg-primary500' : 'bg-neutral40'}`
     }), index < stepsToShow.length - 1 && /*#__PURE__*/React__default["default"].createElement("div", {
       className: "w-0.5 bg-neutral40",
       style: {
@@ -45880,7 +45927,7 @@
       }
     }, /*#__PURE__*/React__default["default"].createElement("p", {
       className: "font-bold text-blue-500"
-    }, "Request Limit ".concat(steps.length - index)), /*#__PURE__*/React__default["default"].createElement("p", {
+    }, `Request Limit ${steps.length - index}`), /*#__PURE__*/React__default["default"].createElement("p", {
       className: "font-bold text-primary700 mt-1"
     }, step.balance), index === 0 && sliceIntoChunks(step.reason, "Initial submiaaaa".length).map((chunk, idx) => /*#__PURE__*/React__default["default"].createElement("p", {
       key: idx,
@@ -45902,36 +45949,35 @@
     })))));
   };
 
-  const ModalLimit = _ref => {
-    let {
-      isOpen = false,
-      onClose = () => {},
-      title = 'Title Modal',
-      subtitle = 'Subtitle Modal',
-      type = 'default',
-      addition,
-      placeholderTextArea,
-      onChangeTextArea,
-      valueTextArea,
-      valueTextInput,
-      titleButtonLeft = 'Cancel',
-      titleButtonRight = 'Okay',
-      leftAction = onClose,
-      rightAction = onClose,
-      fileName = "Bukti Pembayaran",
-      clientName = "",
-      billingID = "",
-      totalAmount = "",
-      paymentMethod = "",
-      divisionName = "",
-      dateAndTime = "",
-      titleStatus = "",
-      divisisonId = "",
-      declineReason = "",
-      textInputValue,
-      steps,
-      onChangeTextInput
-    } = _ref;
+  const ModalLimit = ({
+    isOpen = false,
+    onClose = () => {},
+    title = 'Title Modal',
+    subtitle = 'Subtitle Modal',
+    type = 'default',
+    addition,
+    placeholderTextArea,
+    onChangeTextArea,
+    valueTextArea,
+    valueTextInput,
+    titleButtonLeft = 'Cancel',
+    titleButtonRight = 'Okay',
+    leftAction = onClose,
+    rightAction = onClose,
+    fileName = "Bukti Pembayaran",
+    clientName = "",
+    billingID = "",
+    totalAmount = "",
+    paymentMethod = "",
+    divisionName = "",
+    dateAndTime = "",
+    titleStatus = "",
+    divisisonId = "",
+    declineReason = "",
+    textInputValue,
+    steps,
+    onChangeTextInput
+  }) => {
     const cancelButtonRef = React.useRef(null);
     React.useState("");
     React.useState('');
@@ -46280,24 +46326,23 @@
     }, "\xA0"))))));
   };
 
-  const ModalDeposit = _ref => {
-    let {
-      isOpen = false,
-      onClose = () => {},
-      title = 'Title Modal',
-      subtitle = 'Subtitle Modal',
-      type = 'default',
-      addition,
-      valueTextArea,
-      valueTextInput,
-      clientName = "",
-      totalAmount = "",
-      divisionName = "",
-      dateAndTime = "",
-      titleStatus = "",
-      divisisonId = "",
-      depositType = ''
-    } = _ref;
+  const ModalDeposit = ({
+    isOpen = false,
+    onClose = () => {},
+    title = 'Title Modal',
+    subtitle = 'Subtitle Modal',
+    type = 'default',
+    addition,
+    valueTextArea,
+    valueTextInput,
+    clientName = "",
+    totalAmount = "",
+    divisionName = "",
+    dateAndTime = "",
+    titleStatus = "",
+    divisisonId = "",
+    depositType = ''
+  }) => {
     const cancelButtonRef = React.useRef(null);
     const [showMore, setShowMore] = React.useState(false);
     const toggleSeeMore = () => {
@@ -46388,16 +46433,16 @@
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "text-center p-4"
     }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "inline-flex p-8 rounded-full ".concat(bgColorClass)
+      className: `inline-flex p-8 rounded-full ${bgColorClass}`
     }, /*#__PURE__*/React__default["default"].createElement(IconComponent, {
       size: 34,
-      className: "".concat(amountClass)
+      className: `${amountClass}`
     })), /*#__PURE__*/React__default["default"].createElement("div", {
       className: "mt-4"
     }, /*#__PURE__*/React__default["default"].createElement("p", {
-      className: "text-lg font-semibold"
+      className: `text-lg font-semibold`
     }, totalAmount), /*#__PURE__*/React__default["default"].createElement("p", {
-      className: "text-sm text-gray-500"
+      className: `text-sm text-gray-500`
     }, depositType)))), /*#__PURE__*/React__default["default"].createElement("div", {
       className: "mx-3 w-auto h-fit rounded-md border border-neutral40 bg-gray-100 p-1"
     }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -47548,22 +47593,21 @@
     })))));
   };
 
-  const SearchDropdown = _ref => {
-    let {
-      options = [{
-        option: "Name 1",
-        value: "Value 1"
-      }, {
-        option: "Name 2",
-        value: "Value 2"
-      }],
-      placeholderSearch = "Search Here",
-      filterDropdown = "Filter",
-      setFilterDropdown,
-      filterSearch,
-      setFilterSearch,
-      onEnterPress
-    } = _ref;
+  const SearchDropdown = ({
+    options = [{
+      option: "Name 1",
+      value: "Value 1"
+    }, {
+      option: "Name 2",
+      value: "Value 2"
+    }],
+    placeholderSearch = "Search Here",
+    filterDropdown = "Filter",
+    setFilterDropdown,
+    filterSearch,
+    setFilterSearch,
+    onEnterPress
+  }) => {
     const [isOpen, setIsOpen] = React.useState(false);
     const dropdownRef = React.useRef(null);
     const handleKeyDown = event => {
@@ -47581,14 +47625,14 @@
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "flex items-center h-full"
     }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "".concat(filterSearch ? "border-black" : "border-neutral50", " relative cursor-pointer border-t border-b border-l rounded-tl-md rounded-bl-md"),
+      className: `${filterSearch ? "border-black" : "border-neutral50"} relative cursor-pointer border-t border-b border-l rounded-tl-md rounded-bl-md`,
       onClick: () => setIsOpen(!isOpen)
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "flex items-center bg-white rounded-tl-md rounded-bl-md"
     }, /*#__PURE__*/React__default["default"].createElement("p", {
       className: "flex items-center w-full py-2.5 text-left pl-4 pr-4 bg-white rounded-md font-bold text-sm text-neutral300"
     }, filterDropdown.option), isOpen ? /*#__PURE__*/React__default["default"].createElement(PiCaretUp, null) : /*#__PURE__*/React__default["default"].createElement(PiCaretDown, null), /*#__PURE__*/React__default["default"].createElement("p", {
-      className: "".concat(filterSearch ? "text-black" : "text-neutral50", " ml-3")
+      className: `${filterSearch ? "text-black" : "text-neutral50"} ml-3`
     }, "|")), isOpen && /*#__PURE__*/React__default["default"].createElement("div", {
       className: "z-10 origin-top-left absolute left-0 mt-2 w-full rounded-md shadow-md bg-white ring-1 ring-black ring-opacity-5 focus:outline-none overflow-hidden",
       role: "menu",
@@ -47596,7 +47640,7 @@
       "aria-labelledby": "options-menu"
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "px-1 py-2 max-h-56 overflow-y-auto"
-    }, (options === null || options === void 0 ? void 0 : options.length) > 0 ? options.map((option, index) => /*#__PURE__*/React__default["default"].createElement("div", {
+    }, options?.length > 0 ? options.map((option, index) => /*#__PURE__*/React__default["default"].createElement("div", {
       key: index,
       className: "hover:bg-neutral20 bg-white py-2.5 px-4 my-0.5 rounded-md cursor-pointer",
       onClick: () => handleClickOption(option)
@@ -47607,11 +47651,11 @@
     }, option.option)))) : /*#__PURE__*/React__default["default"].createElement("div", {
       className: "text-sm font-normal text-black flex justify-center"
     }, /*#__PURE__*/React__default["default"].createElement("p", null, "Data Not Available"))))), /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "".concat(filterSearch ? "border-black" : "border-neutral50", " relative border-t border-b border-r rounded-tr-md rounded-br-md")
+      className: `${filterSearch ? "border-black" : "border-neutral50"} relative border-t border-b border-r rounded-tr-md rounded-br-md`
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "flex items-center bg-white rounded-tr-md rounded-br-md focus:outline-none"
     }, /*#__PURE__*/React__default["default"].createElement(PiMagnifyingGlass, {
-      className: "".concat(filterSearch ? "text-black" : "text-neutral50", " absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4")
+      className: `${filterSearch ? "text-black" : "text-neutral50"} absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4`
     }), /*#__PURE__*/React__default["default"].createElement("input", {
       type: "text",
       value: filterSearch,
@@ -47622,36 +47666,35 @@
     })))));
   };
 
-  const FilterDropdown = _ref => {
-    let {
-      options = [{
-        menu: "Type",
-        parameter: "type",
-        submenu: [{
-          option: "Type 1",
-          value: "type1"
-        }],
-        type: "checkbox"
-      }, {
-        menu: "Status",
-        parameter: "status",
-        submenu: [{
-          option: "Status 1",
-          value: "status1"
-        }],
-        type: "radiobutton"
-      }, {
-        menu: "Payment",
-        parameter: "payment",
-        submenu: [{
-          option: "Payment 1",
-          value: "payment1"
-        }],
-        type: "checkbox"
+  const FilterDropdown = ({
+    options = [{
+      menu: "Type",
+      parameter: "type",
+      submenu: [{
+        option: "Type 1",
+        value: "type1"
       }],
-      dataFilterResult,
-      setDataFilterResult = () => {}
-    } = _ref;
+      type: "checkbox"
+    }, {
+      menu: "Status",
+      parameter: "status",
+      submenu: [{
+        option: "Status 1",
+        value: "status1"
+      }],
+      type: "radiobutton"
+    }, {
+      menu: "Payment",
+      parameter: "payment",
+      submenu: [{
+        option: "Payment 1",
+        value: "payment1"
+      }],
+      type: "checkbox"
+    }],
+    dataFilterResult,
+    setDataFilterResult = () => {}
+  }) => {
     const [showFilterMenu, setShowFilterMenu] = React.useState(false);
     const [showFilterSubmenu, setShowFilterSubmenu] = React.useState(false);
     const [dataSelectionOptionMenu, setDataSelectionOptionMenu] = React.useState();
@@ -47680,8 +47723,7 @@
     };
     const handleOnClickOption = (submenu, type, parameter) => {
       if (type === "checkbox") {
-        var _dataFilterResult$par;
-        const isSubmenuExist = (_dataFilterResult$par = dataFilterResult[parameter]) === null || _dataFilterResult$par === void 0 ? void 0 : _dataFilterResult$par.includes(submenu.value);
+        const isSubmenuExist = dataFilterResult[parameter]?.includes(submenu.value);
         const updatedData = [...(dataFilterResult[parameter] || [])];
         if (isSubmenuExist) {
           const index = updatedData.indexOf(submenu.value);
@@ -47694,8 +47736,7 @@
           [parameter]: updatedData
         }));
       } else if (type === "radiobutton") {
-        var _dataFilterResult$par2;
-        if (((_dataFilterResult$par2 = dataFilterResult[parameter]) === null || _dataFilterResult$par2 === void 0 ? void 0 : _dataFilterResult$par2[0]) === submenu.value) {
+        if (dataFilterResult[parameter]?.[0] === submenu.value) {
           setDataFilterResult(prevState => ({
             ...prevState,
             [parameter]: []
@@ -47708,14 +47749,14 @@
         }
       }
     };
-    const buttonText = Object.values(dataFilterResult).flat().length > 0 ? "".concat(Object.values(dataFilterResult).flat().length, " Filter Selected") : 'Filter';
+    const buttonText = Object.values(dataFilterResult).flat().length > 0 ? `${Object.values(dataFilterResult).flat().length} Filter Selected` : 'Filter';
     return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("span", {
       className: "rounded-md shadow-sm"
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "flex"
     }, /*#__PURE__*/React__default["default"].createElement("button", {
       type: "button",
-      className: "".concat(Object.values(dataFilterResult).flat().length ? "border-black text-black" : "border-neutral50 text-neutral300", " flex items-center w-60 text-left px-4 bg-white font-normal text-sm rounded-md border focus:outline-none")
+      className: `${Object.values(dataFilterResult).flat().length ? "border-black text-black" : "border-neutral50 text-neutral300"} flex items-center w-60 text-left px-4 bg-white font-normal text-sm rounded-md border focus:outline-none`
     }, /*#__PURE__*/React__default["default"].createElement("span", {
       className: "flex-grow py-2.5",
       onClick: () => setShowFilterMenu(!showFilterMenu)
@@ -47735,67 +47776,60 @@
     }, showFilterMenu && /*#__PURE__*/React__default["default"].createElement("div", {
       ref: dropdownRef,
       className: "bg-white border border-neutral40 w-48 rounded-md p-3 top-1 absolute z-10 rounded-md shadow-md bg-white"
-    }, options.map((option, index) => {
-      var _dataFilterResult$opt, _dataFilterResult$opt2;
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        key: index
-      }, /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "hover:bg-neutral20 bg-white py-2.5 px-4 my-0.5 rounded-md flex items-center cursor-pointer justify-between",
-        onClick: () => {
-          setShowFilterSubmenu(true);
-          setDataSelectionOptionMenu(option.menu);
-        }
-      }, /*#__PURE__*/React__default["default"].createElement("p", null, option.menu), (((_dataFilterResult$opt = dataFilterResult[option.parameter]) === null || _dataFilterResult$opt === void 0 ? void 0 : _dataFilterResult$opt.length) || 0) === 0 ? /*#__PURE__*/React__default["default"].createElement(PiCaretRight, {
-        size: 16,
-        className: "text-neutral300"
-      }) : /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "w-4 h-4 border border-primary500 rounded-full flex items-center justify-center text-primary500"
-      }, /*#__PURE__*/React__default["default"].createElement("p", {
-        style: {
-          fontSize: "8px"
-        }
-      }, ((_dataFilterResult$opt2 = dataFilterResult[option.parameter]) === null || _dataFilterResult$opt2 === void 0 ? void 0 : _dataFilterResult$opt2.length) || 0))), showFilterSubmenu && option.submenu.length > 0 && dataSelectionOptionMenu === option.menu && /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "ml-1 border border-neutral40 bg-white p-3 shadow-md rounded-md w-56 absolute left-48 cursor-pointer ".concat(index == 0 && "top-0", " ").concat(index == 1 && "top-16", " ").concat(index == 2 && "top-24", " ").concat(index == 3 && "top-36")
-      }, option.submenu.map((submenu, subIndex) => {
-        var _dataFilterResult$opt3, _dataFilterResult$opt4, _dataFilterResult$opt5, _dataFilterResult$opt6;
-        return /*#__PURE__*/React__default["default"].createElement("div", {
-          key: subIndex,
-          className: "flex bg-white hover:bg-neutral20 rounded-md py-2.5 px-4 my-0.5",
-          onClick: () => {
-            handleOnClickOption(submenu, option.type, option.parameter);
-          }
-        }, option.type === "checkbox" && /*#__PURE__*/React__default["default"].createElement("div", {
-          className: "flex items-center"
-        }, /*#__PURE__*/React__default["default"].createElement("input", {
-          type: "checkbox",
-          className: "mr-2",
-          checked: ((_dataFilterResult$opt3 = dataFilterResult[option.parameter]) === null || _dataFilterResult$opt3 === void 0 ? void 0 : _dataFilterResult$opt3.includes(submenu.value)) || false,
-          onChange: () => handleOnClickOption(submenu, option.type, option.parameter)
-        }), /*#__PURE__*/React__default["default"].createElement("p", {
-          className: "text-sm ".concat((_dataFilterResult$opt4 = dataFilterResult[option.parameter]) !== null && _dataFilterResult$opt4 !== void 0 && _dataFilterResult$opt4.includes(submenu.value) ? 'text-primary500' : 'text-black')
-        }, submenu.option)), option.type === "radiobutton" && /*#__PURE__*/React__default["default"].createElement("div", {
-          className: "flex items-center"
-        }, /*#__PURE__*/React__default["default"].createElement("input", {
-          type: "radio",
-          className: "mr-2",
-          checked: ((_dataFilterResult$opt5 = dataFilterResult[option.parameter]) === null || _dataFilterResult$opt5 === void 0 ? void 0 : _dataFilterResult$opt5[0]) === submenu.value,
-          onChange: () => handleOnClickOption(submenu, option.type, option.parameter)
-        }), /*#__PURE__*/React__default["default"].createElement("p", {
-          className: "text-sm ".concat(((_dataFilterResult$opt6 = dataFilterResult[option.parameter]) === null || _dataFilterResult$opt6 === void 0 ? void 0 : _dataFilterResult$opt6[0]) === submenu.value ? 'text-primary500' : 'text-black')
-        }, submenu.option)));
-      })));
-    }))));
+    }, options.map((option, index) => /*#__PURE__*/React__default["default"].createElement("div", {
+      key: index
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: `hover:bg-neutral20 bg-white py-2.5 px-4 my-0.5 rounded-md flex items-center cursor-pointer justify-between`,
+      onClick: () => {
+        setShowFilterSubmenu(true);
+        setDataSelectionOptionMenu(option.menu);
+      }
+    }, /*#__PURE__*/React__default["default"].createElement("p", null, option.menu), (dataFilterResult[option.parameter]?.length || 0) === 0 ? /*#__PURE__*/React__default["default"].createElement(PiCaretRight, {
+      size: 16,
+      className: "text-neutral300"
+    }) : /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "w-4 h-4 border border-primary500 rounded-full flex items-center justify-center text-primary500"
+    }, /*#__PURE__*/React__default["default"].createElement("p", {
+      style: {
+        fontSize: "8px"
+      }
+    }, dataFilterResult[option.parameter]?.length || 0))), showFilterSubmenu && option.submenu.length > 0 && dataSelectionOptionMenu === option.menu && /*#__PURE__*/React__default["default"].createElement("div", {
+      className: `ml-1 border border-neutral40 bg-white p-3 shadow-md rounded-md w-56 absolute left-48 cursor-pointer ${index == 0 && "top-0"} ${index == 1 && "top-16"} ${index == 2 && "top-24"} ${index == 3 && "top-36"}`
+    }, option.submenu.map((submenu, subIndex) => /*#__PURE__*/React__default["default"].createElement("div", {
+      key: subIndex,
+      className: "flex bg-white hover:bg-neutral20 rounded-md py-2.5 px-4 my-0.5",
+      onClick: () => {
+        handleOnClickOption(submenu, option.type, option.parameter);
+      }
+    }, option.type === "checkbox" && /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "flex items-center"
+    }, /*#__PURE__*/React__default["default"].createElement("input", {
+      type: "checkbox",
+      className: "mr-2",
+      checked: dataFilterResult[option.parameter]?.includes(submenu.value) || false,
+      onChange: () => handleOnClickOption(submenu, option.type, option.parameter)
+    }), /*#__PURE__*/React__default["default"].createElement("p", {
+      className: `text-sm ${dataFilterResult[option.parameter]?.includes(submenu.value) ? 'text-primary500' : 'text-black'}`
+    }, submenu.option)), option.type === "radiobutton" && /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "flex items-center"
+    }, /*#__PURE__*/React__default["default"].createElement("input", {
+      type: "radio",
+      className: "mr-2",
+      checked: dataFilterResult[option.parameter]?.[0] === submenu.value,
+      onChange: () => handleOnClickOption(submenu, option.type, option.parameter)
+    }), /*#__PURE__*/React__default["default"].createElement("p", {
+      className: `text-sm ${dataFilterResult[option.parameter]?.[0] === submenu.value ? 'text-primary500' : 'text-black'}`
+    }, submenu.option))))))))));
   };
 
-  const Footer = _ref => {
-    let {
-      titleLeftButton = "Cancel",
-      titleRightButton = "Submit",
-      isActiveLeftButton,
-      isActiveRightButton,
-      onClickLeftButton,
-      onClickRightButton
-    } = _ref;
+  const Footer = ({
+    titleLeftButton = "Cancel",
+    titleRightButton = "Submit",
+    isActiveLeftButton,
+    isActiveRightButton,
+    onClickLeftButton,
+    onClickRightButton
+  }) => {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "fixed bottom-0 flex justify-end w-full items-center py-1 px-6 bg-white"
     }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -47817,28 +47851,27 @@
 
   var img = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAXmSURBVHgBvVhrbBRVFP5mdrvU3ba03XbbVbFbCArIo40aAaMshcQAIiVGG/wDRUhMjLb8ABMTA/yCCJFtTOQHShc1AhoVHwlREtk/lkQTKY+ikDbZUh62tbAt+37MeO7sbnfp7s7c2RK/ZPbO7P3m3u+ec+bOOSOgSMjnnU6IaIKAFXTZREdl6mDwQYaX+rzUXoAEj9Ds8aAICHrIJKqSRHXQXZ1ZYjhvVgR7kMBeEuvlvY1LYErY7pSwBwE3r1BNgfIF52ZiuaDXYpoDk0UlRaRbjSZoiDv0AK1WCC5hsWdHoc68AhWXGtBNp634f3CKXN5O1vRN7TDmpXOICwaBa33A1T4Zd0aBIS8wNpLsM1uAahvw+AJg9ToB1lpooZXmZNg4tSPHgjxuPecBvnLLCAbAhbZ2AS1ruag57hazL8i1W3hi7u5EjFscw8luGQf3RTAyImlRO5WHMgtCljgHyT1L/zjURvjx+wi+PSbCZDBCD8KJGGIlIbg+KofNJqpRfRSPjel4zDBF7NESNzIs4eTxiG5xaQQCMroOBbVo7AHdnZGFlPUEbNa68/iXYUSCul4+k4iQBRkuX4orQjXQqewkaYGK9TjABmeISnGMR0MYC/txJxJQzkOJKGQ5d2KzZQZKraXUH8sZR0sk+0n7aoUWm606HeRMFIOlrBQta5phKS9Ncu6FEQvFUSKIqLNXwVpXgablc+G/F0Tn1sMI+MMKb3hY82FhW10H/e4xypcoK5HVYy/foOtfXYpN7S2T4tRgLpuB9a8tw4mjZ5VrjqeZoZJlTCK9D5087DJLJvYWNjuw7Z21XOLSWEWWToMjBpOgdI7FYBMP11YnYuEiY85kvLDVVyohwbDpde6FOZnABl52yyqT0tbWF5fY2OyVeHZpidY+mIGAJUatvS8bS5dbKaBexOy5dhSDbW+vgcU0QGcXeW+pFOSLTs6AIMxYBpQuw7Qx/iE3ldPWKcgTmDYSo7roTKCPmx3rx7QRH9LD9om0B45z0+WIbgvkIH6Dn0tVIbNgL/TA/zkgFenq4M8kUIcXJAwygR7oRbECZX5npdArUhTqsyBD5Bx0Izagz70MrOBnLW01d6G3rCyZA8m0DqJROzeUo4MQwj8lY5gfXkr/G5PbDOWR0AuySGD4FqS4euoUGae1hwf0imPwsJ+kQEkpzPWh4jlF3L2b1xG+O4ZENKpcp48YlX2h0X9gMgoQzHPJ4vW6hmdfHliTqUkuOF101cF1s42S77otiI0NIHTtDOT4/dYRBAGmh0pRajEDM2cT92mKvztA/3aa2M8zg5vc285OMm8SScmqVTftiYkaXL7yAvoHVyrXJdY5sCx+BQYzfboxGmA0mRRR5daqpLjqeYB9Oc1CSYapHj1/bMbQjfmIRMxq03jT1lMWm92jlJ3Jol3ByGgDDbgAQzfnU/vk5MAzawzYvj+rGo+RVa6foTarFq1ZnDxS6PsthNPdmW1m1qNXYKvxUvsXbLWDqKiYfAG0k/XceQUqIsnVI/86Ok5+877qStt2VmPWE6b8IplLq+bdxz/y7ijGxxIFx3uq+TRWPv9Zl7DEc19dnpMsMMLX373n0XADen6YEkslZQjYVuL3WxU54pj11MQx/Hl+7amp4hjybmIxf+1G2RDpFiAX/D4zdDWqHGkr9vxyE4e/2E/pfBBr/o6jrW0DKqzJDy6Xe0JQAz3npwzlofb8fSo4+MYtlwyh4JPNxLW+VYVfT0ygj0T0hg5QfEfgML2M2XXN2EB9tEgc2ztWcA4ZcteuTx/uLCxeAx9svb2Fdg1W6Tu0uL3RfUr7iGE1ag3PqHLJaj5JlHfsOmJ3q/E0E9ZdR+1uYwloX5GOqfEScjhzjrAaVbEaubRRSxyDru8Yh9687YjHpD20LlboO7L7opSpXIl9rJxXi4vwmPGlKRMJPlmQu4xlYdcOVyN3klzchxbCgW23nZIkOemt0SRQ4e+Ht6E/dkJJOKrEeb4GQ+u4LKCX+jwQhd6dn9g9KAL/AeM0NLmkDzUcAAAAAElFTkSuQmCC";
 
-  const Header = _ref => {
-    let {
-      title = "Label",
-      fullName = "Undefined Name",
-      roleName = "Undefined Role",
-      dataProfile = [{
-        title: "Change Password",
-        action: () => {
-          console.log("Change Password");
-        },
-        logo: PiUserCircleDuotone
-      }, {
-        title: "Logout",
-        action: () => {
-          console.log("Logout");
-        },
-        logo: PiDoorOpenDuotone
-      }],
-      isNotificationActive = false,
-      dataNotification = ["Notification 1", "Notification 2"],
-      dataBalance = "0"
-    } = _ref;
+  const Header = ({
+    title = "Label",
+    fullName = "Undefined Name",
+    roleName = "Undefined Role",
+    dataProfile = [{
+      title: "Change Password",
+      action: () => {
+        console.log("Change Password");
+      },
+      logo: PiUserCircleDuotone
+    }, {
+      title: "Logout",
+      action: () => {
+        console.log("Logout");
+      },
+      logo: PiDoorOpenDuotone
+    }],
+    isNotificationActive = false,
+    dataNotification = ["Notification 1", "Notification 2"],
+    dataBalance = "0"
+  }) => {
     const [isProfileContentVisible, setProfileContentVisible] = React.useState(false);
     const [isNotificationContentVisible, setNotificationContentVisible] = React.useState(false);
     const modalRefProfile = React.useRef(null);
@@ -47889,7 +47922,9 @@
       className: "z-50 w-48 bg-white border border-neutral40 rounded-md shadow-md"
     }, dataNotification.map((value, index) => /*#__PURE__*/React__default["default"].createElement("div", {
       key: index,
-      className: "px-2 flex items-center cursor-pointer bg-white hover:bg-neutral20 p-2 \n                                                ".concat(dataProfile.length == 1 ? "rounded-md" : index === 0 ? "rounded-t-md" : index === dataProfile.length - 1 ? 'rounded-b-md' : "", "\n                                            "),
+      className: `px-2 flex items-center cursor-pointer bg-white hover:bg-neutral20 p-2 
+                                                ${dataProfile.length == 1 ? "rounded-md" : index === 0 ? "rounded-t-md" : index === dataProfile.length - 1 ? 'rounded-b-md' : ""}
+                                            `,
       onClick: value.action
     }, /*#__PURE__*/React__default["default"].createElement("p", {
       className: "text-sm"
@@ -47914,7 +47949,9 @@
       className: "z-50 w-48 bg-white border border-neutral40 rounded-md shadow-md"
     }, dataProfile.map((value, index) => /*#__PURE__*/React__default["default"].createElement("div", {
       key: index,
-      className: "px-2 flex items-center cursor-pointer bg-white hover:bg-neutral20 p-2 \n                                                ".concat(dataProfile.length == 1 ? "rounded-md" : index === 0 ? "rounded-t-md" : index === dataProfile.length - 1 ? 'rounded-b-md' : "", "\n                                            "),
+      className: `px-2 flex items-center cursor-pointer bg-white hover:bg-neutral20 p-2 
+                                                ${dataProfile.length == 1 ? "rounded-md" : index === 0 ? "rounded-t-md" : index === dataProfile.length - 1 ? 'rounded-b-md' : ""}
+                                            `,
       onClick: value.action
     }, /*#__PURE__*/React__default["default"].createElement(value.logo, {
       size: 16,