sprint-asia-custom-component 0.1.35 → 0.1.37

package/dist/index.css

@@ -1,4 +1,4 @@
-@charset "UTF-8";@import "tailwindcss/base";@import "tailwindcss/components";@import "tailwindcss/utilities";.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view--down-arrow,.react-datepicker__navigation-icon:before,.react-datepicker__year-read-view--down-arrow{border-color:#ccc;border-style:solid;border-width:3px 3px 0 0;content:"";display:block;height:9px;position:absolute;top:6px;width:9px}.react-datepicker-wrapper{border:0;display:inline-block;padding:0}.react-datepicker{background-color:#fff;border:1px solid #aeaeae;border-radius:.3rem;color:#000;display:inline-block;font-family:Helvetica Neue,helvetica,arial,sans-serif;font-size:.8rem;line-height:normal;position:relative}.react-datepicker--time-only .react-datepicker__time-container{border-left:0}.react-datepicker--time-only .react-datepicker__time,.react-datepicker--time-only .react-datepicker__time-box{border-bottom-left-radius:.3rem;border-bottom-right-radius:.3rem}.react-datepicker-popper{line-height:0;z-index:1}.react-datepicker-popper .react-datepicker__triangle{stroke:#aeaeae}.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle{fill:#f0f0f0;color:#f0f0f0}.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle{fill:#fff;color:#fff}.react-datepicker__header{background-color:#f0f0f0;border-bottom:1px solid #aeaeae;border-top-left-radius:.3rem;padding:8px 0;position:relative;text-align:center}.react-datepicker__header--time{padding-bottom:8px;padding-left:5px;padding-right:5px}.react-datepicker__header--time:not(.react-datepicker__header--time--only){border-top-left-radius:0}.react-datepicker__header:not(.react-datepicker__header--has-time-select){border-top-right-radius:.3rem}.react-datepicker__month-dropdown-container--scroll,.react-datepicker__month-dropdown-container--select,.react-datepicker__month-year-dropdown-container--scroll,.react-datepicker__month-year-dropdown-container--select,.react-datepicker__year-dropdown-container--scroll,.react-datepicker__year-dropdown-container--select{display:inline-block;margin:0 15px}.react-datepicker-time__header,.react-datepicker-year-header,.react-datepicker__current-month{color:#000;font-size:.944rem;font-weight:700;margin-top:0}.react-datepicker-time__header{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.react-datepicker__navigation{align-items:center;background:none;border:none;cursor:pointer;display:flex;height:32px;justify-content:center;overflow:hidden;padding:0;position:absolute;text-align:center;text-indent:-999em;top:2px;width:32px;z-index:1}.react-datepicker__navigation--previous{left:2px}.react-datepicker__navigation--next{right:2px}.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button){right:85px}.react-datepicker__navigation--years{display:block;margin-left:auto;margin-right:auto;position:relative;top:0}.react-datepicker__navigation--years-previous{top:4px}.react-datepicker__navigation--years-upcoming{top:-4px}.react-datepicker__navigation:hover :before{border-color:#a6a6a6}.react-datepicker__navigation-icon{font-size:20px;position:relative;top:-1px;width:0}.react-datepicker__navigation-icon--next{left:-2px}.react-datepicker__navigation-icon--next:before{left:-7px;transform:rotate(45deg)}.react-datepicker__navigation-icon--previous{right:-2px}.react-datepicker__navigation-icon--previous:before{right:-7px;transform:rotate(225deg)}.react-datepicker__month-container{float:left}.react-datepicker__year{margin:.4rem;text-align:center}.react-datepicker__year-wrapper{display:flex;flex-wrap:wrap;max-width:180px}.react-datepicker__year .react-datepicker__year-text{display:inline-block;margin:2px;width:4rem}.react-datepicker__month{margin:.4rem;text-align:center}.react-datepicker__month .react-datepicker__month-text,.react-datepicker__month .react-datepicker__quarter-text{display:inline-block;margin:2px;width:4rem}.react-datepicker__input-time-container{clear:both;float:left;margin:5px 0 10px 15px;text-align:left;width:100%}.react-datepicker__input-time-container .react-datepicker-time__caption,.react-datepicker__input-time-container .react-datepicker-time__input-container{display:inline-block}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input{display:inline-block;margin-left:10px}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input{width:auto}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]{-moz-appearance:textfield}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter{display:inline-block;margin-left:5px}.react-datepicker__time-container{border-left:1px solid #aeaeae;float:right;width:85px}.react-datepicker__time-container--with-today-button{border:1px solid #aeaeae;border-radius:.3rem;display:inline;position:absolute;right:-87px;top:0}.react-datepicker__time-container .react-datepicker__time{background:#fff;border-bottom-right-radius:.3rem;position:relative}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box{border-bottom-right-radius:.3rem;margin:0 auto;overflow-x:hidden;text-align:center;width:85px}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list{box-sizing:initial;height:calc(195px + .85rem);list-style:none;margin:0;overflow-y:scroll;padding-left:0;padding-right:0;width:100%}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item{height:30px;padding:5px 10px;white-space:nowrap}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover{background-color:#f0f0f0;cursor:pointer}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected{background-color:#216ba5;color:#fff;font-weight:700}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover{background-color:#216ba5}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled{color:#ccc}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover{background-color:initial;cursor:default}.react-datepicker__week-number{color:#ccc;display:inline-block;line-height:1.7rem;margin:.166rem;text-align:center;width:1.7rem}.react-datepicker__week-number.react-datepicker__week-number--clickable{cursor:pointer}.react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected,.react-datepicker__week-number--keyboard-selected):hover{background-color:#f0f0f0;border-radius:.3rem}.react-datepicker__week-number--selected{background-color:#216ba5;border-radius:.3rem;color:#fff}.react-datepicker__week-number--selected:hover{background-color:#1d5d90}.react-datepicker__week-number--keyboard-selected{background-color:#2a87d0;border-radius:.3rem;color:#fff}.react-datepicker__week-number--keyboard-selected:hover{background-color:#1d5d90}.react-datepicker__day-names{margin-bottom:-8px;white-space:nowrap}.react-datepicker__week{white-space:nowrap}.react-datepicker__day,.react-datepicker__day-name,.react-datepicker__time-name{color:#000;display:inline-block;line-height:1.7rem;margin:.166rem;text-align:center;width:1.7rem}.react-datepicker__day,.react-datepicker__month-text,.react-datepicker__quarter-text,.react-datepicker__year-text{cursor:pointer}.react-datepicker__day:hover,.react-datepicker__month-text:hover,.react-datepicker__quarter-text:hover,.react-datepicker__year-text:hover{background-color:#f0f0f0;border-radius:.3rem}.react-datepicker__day--today,.react-datepicker__month-text--today,.react-datepicker__quarter-text--today,.react-datepicker__year-text--today{font-weight:700}.react-datepicker__day--highlighted,.react-datepicker__month-text--highlighted,.react-datepicker__quarter-text--highlighted,.react-datepicker__year-text--highlighted{background-color:#3dcc4a;border-radius:.3rem;color:#fff}.react-datepicker__day--highlighted:hover,.react-datepicker__month-text--highlighted:hover,.react-datepicker__quarter-text--highlighted:hover,.react-datepicker__year-text--highlighted:hover{background-color:#32be3f}.react-datepicker__day--highlighted-custom-1,.react-datepicker__month-text--highlighted-custom-1,.react-datepicker__quarter-text--highlighted-custom-1,.react-datepicker__year-text--highlighted-custom-1{color:#f0f}.react-datepicker__day--highlighted-custom-2,.react-datepicker__month-text--highlighted-custom-2,.react-datepicker__quarter-text--highlighted-custom-2,.react-datepicker__year-text--highlighted-custom-2{color:green}.react-datepicker__day--holidays,.react-datepicker__month-text--holidays,.react-datepicker__quarter-text--holidays,.react-datepicker__year-text--holidays{background-color:#ff6803;border-radius:.3rem;color:#fff;position:relative}.react-datepicker__day--holidays .overlay,.react-datepicker__month-text--holidays .overlay,.react-datepicker__quarter-text--holidays .overlay,.react-datepicker__year-text--holidays .overlay{background-color:#333;border-radius:4px;bottom:100%;color:#fff;left:50%;opacity:0;padding:4px;position:absolute;transform:translateX(-50%);transition:visibility 0s,opacity .3s ease-in-out;visibility:hidden;white-space:nowrap}.react-datepicker__day--holidays:hover,.react-datepicker__month-text--holidays:hover,.react-datepicker__quarter-text--holidays:hover,.react-datepicker__year-text--holidays:hover{background-color:#cf5300}.react-datepicker__day--holidays:hover .overlay,.react-datepicker__month-text--holidays:hover .overlay,.react-datepicker__quarter-text--holidays:hover .overlay,.react-datepicker__year-text--holidays:hover .overlay{opacity:1;visibility:visible}.react-datepicker__day--in-range,.react-datepicker__day--in-selecting-range,.react-datepicker__day--selected,.react-datepicker__month-text--in-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__month-text--selected,.react-datepicker__quarter-text--in-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__quarter-text--selected,.react-datepicker__year-text--in-range,.react-datepicker__year-text--in-selecting-range,.react-datepicker__year-text--selected{background-color:#216ba5;border-radius:.3rem;color:#fff}.react-datepicker__day--in-range:hover,.react-datepicker__day--in-selecting-range:hover,.react-datepicker__day--selected:hover,.react-datepicker__month-text--in-range:hover,.react-datepicker__month-text--in-selecting-range:hover,.react-datepicker__month-text--selected:hover,.react-datepicker__quarter-text--in-range:hover,.react-datepicker__quarter-text--in-selecting-range:hover,.react-datepicker__quarter-text--selected:hover,.react-datepicker__year-text--in-range:hover,.react-datepicker__year-text--in-selecting-range:hover,.react-datepicker__year-text--selected:hover{background-color:#1d5d90}.react-datepicker__day--keyboard-selected,.react-datepicker__month-text--keyboard-selected,.react-datepicker__quarter-text--keyboard-selected,.react-datepicker__year-text--keyboard-selected{background-color:#bad9f1;border-radius:.3rem;color:#000}.react-datepicker__day--keyboard-selected:hover,.react-datepicker__month-text--keyboard-selected:hover,.react-datepicker__quarter-text--keyboard-selected:hover,.react-datepicker__year-text--keyboard-selected:hover{background-color:#1d5d90}.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range),.react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range),.react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range),.react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range){background-color:#216ba580}.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range){background-color:#f0f0f0;color:#000}.react-datepicker__day--disabled,.react-datepicker__month-text--disabled,.react-datepicker__quarter-text--disabled,.react-datepicker__year-text--disabled{color:#ccc;cursor:default}.react-datepicker__day--disabled:hover,.react-datepicker__month-text--disabled:hover,.react-datepicker__quarter-text--disabled:hover,.react-datepicker__year-text--disabled:hover{background-color:initial}.react-datepicker__day--disabled .overlay,.react-datepicker__month-text--disabled .overlay,.react-datepicker__quarter-text--disabled .overlay,.react-datepicker__year-text--disabled .overlay{background-color:#333;border-radius:4px;bottom:70%;color:#fff;left:50%;opacity:0;padding:4px;position:absolute;transform:translateX(-50%);transition:visibility 0s,opacity .3s ease-in-out;visibility:hidden;white-space:nowrap}.react-datepicker__input-container{display:inline-block;position:relative;width:100%}.react-datepicker__input-container .react-datepicker__calendar-icon{box-sizing:initial;padding:.5rem;position:absolute}.react-datepicker__view-calendar-icon input{padding:6px 10px 5px 25px}.react-datepicker__month-read-view,.react-datepicker__month-year-read-view,.react-datepicker__year-read-view{border:1px solid #0000;border-radius:.3rem;position:relative}.react-datepicker__month-read-view:hover,.react-datepicker__month-year-read-view:hover,.react-datepicker__year-read-view:hover{cursor:pointer}.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow{border-top-color:#b3b3b3}.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view--down-arrow,.react-datepicker__year-read-view--down-arrow{right:-16px;top:0;transform:rotate(135deg)}.react-datepicker__month-dropdown,.react-datepicker__month-year-dropdown,.react-datepicker__year-dropdown{background-color:#f0f0f0;border:1px solid #aeaeae;border-radius:.3rem;left:25%;position:absolute;text-align:center;top:30px;width:50%;z-index:1}.react-datepicker__month-dropdown:hover,.react-datepicker__month-year-dropdown:hover,.react-datepicker__year-dropdown:hover{cursor:pointer}.react-datepicker__month-dropdown--scrollable,.react-datepicker__month-year-dropdown--scrollable,.react-datepicker__year-dropdown--scrollable{height:150px;overflow-y:scroll}.react-datepicker__month-option,.react-datepicker__month-year-option,.react-datepicker__year-option{display:block;line-height:20px;margin-left:auto;margin-right:auto;width:100%}.react-datepicker__month-option:first-of-type,.react-datepicker__month-year-option:first-of-type,.react-datepicker__year-option:first-of-type{border-top-left-radius:.3rem;border-top-right-radius:.3rem}.react-datepicker__month-option:last-of-type,.react-datepicker__month-year-option:last-of-type,.react-datepicker__year-option:last-of-type{border-bottom-left-radius:.3rem;border-bottom-right-radius:.3rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.react-datepicker__month-option:hover,.react-datepicker__month-year-option:hover,.react-datepicker__year-option:hover{background-color:#ccc}.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming,.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming{border-bottom-color:#b3b3b3}.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous,.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous{border-top-color:#b3b3b3}.react-datepicker__month-option--selected,.react-datepicker__month-year-option--selected,.react-datepicker__year-option--selected{left:15px;position:absolute}.react-datepicker__close-icon{background-color:initial;border:0;cursor:pointer;display:table-cell;height:100%;outline:0;padding:0 6px 0 0;position:absolute;right:0;top:0;vertical-align:middle}.react-datepicker__close-icon:after{background-color:#216ba5;border-radius:50%;color:#fff;content:"×";cursor:pointer;display:table-cell;font-size:12px;height:16px;line-height:1;padding:2px;text-align:center;vertical-align:middle;width:16px}.react-datepicker__close-icon--disabled{cursor:default}.react-datepicker__close-icon--disabled:after{background-color:#ccc;cursor:default}.react-datepicker__today-button{background:#f0f0f0;border-top:1px solid #aeaeae;clear:left;cursor:pointer;font-weight:700;padding:5px 0;text-align:center}.react-datepicker__portal{align-items:center;background-color:#000c;display:flex;height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100vw;z-index:2147483647}.react-datepicker__portal .react-datepicker__day,.react-datepicker__portal .react-datepicker__day-name,.react-datepicker__portal .react-datepicker__time-name{line-height:3rem;width:3rem}@media (max-height:550px),(max-width:400px){.react-datepicker__portal .react-datepicker__day,.react-datepicker__portal .react-datepicker__day-name,.react-datepicker__portal .react-datepicker__time-name{line-height:2rem;width:2rem}}.react-datepicker__portal .react-datepicker-time__header,.react-datepicker__portal .react-datepicker__current-month{font-size:1.44rem}.react-datepicker__children-container{height:auto;margin:.4rem;padding-left:.2rem;padding-right:.2rem;width:13.8rem}.react-datepicker__aria-live{border:0;clip-path:circle(0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.react-datepicker__calendar-icon{height:1em;vertical-align:-.125em;width:1em}
+@charset "UTF-8";@import "tailwindcss/base";@import "tailwindcss/components";@import "tailwindcss/utilities";@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");*{font-family:Inter,sans-serif}.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view--down-arrow,.react-datepicker__navigation-icon:before,.react-datepicker__year-read-view--down-arrow{border-color:#ccc;border-style:solid;border-width:3px 3px 0 0;content:"";display:block;height:9px;position:absolute;top:6px;width:9px}.react-datepicker-wrapper{border:0;display:inline-block;padding:0}.react-datepicker{background-color:#fff;border:1px solid #aeaeae;border-radius:.3rem;color:#000;display:inline-block;font-family:Helvetica Neue,helvetica,arial,sans-serif;font-size:.8rem;line-height:normal;position:relative}.react-datepicker--time-only .react-datepicker__time-container{border-left:0}.react-datepicker--time-only .react-datepicker__time,.react-datepicker--time-only .react-datepicker__time-box{border-bottom-left-radius:.3rem;border-bottom-right-radius:.3rem}.react-datepicker-popper{line-height:0;z-index:1}.react-datepicker-popper .react-datepicker__triangle{stroke:#aeaeae}.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle{fill:#f0f0f0;color:#f0f0f0}.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle{fill:#fff;color:#fff}.react-datepicker__header{background-color:#f0f0f0;border-bottom:1px solid #aeaeae;border-top-left-radius:.3rem;padding:8px 0;position:relative;text-align:center}.react-datepicker__header--time{padding-bottom:8px;padding-left:5px;padding-right:5px}.react-datepicker__header--time:not(.react-datepicker__header--time--only){border-top-left-radius:0}.react-datepicker__header:not(.react-datepicker__header--has-time-select){border-top-right-radius:.3rem}.react-datepicker__month-dropdown-container--scroll,.react-datepicker__month-dropdown-container--select,.react-datepicker__month-year-dropdown-container--scroll,.react-datepicker__month-year-dropdown-container--select,.react-datepicker__year-dropdown-container--scroll,.react-datepicker__year-dropdown-container--select{display:inline-block;margin:0 15px}.react-datepicker-time__header,.react-datepicker-year-header,.react-datepicker__current-month{color:#000;font-size:.944rem;font-weight:700;margin-top:0}.react-datepicker-time__header{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.react-datepicker__navigation{align-items:center;background:none;border:none;cursor:pointer;display:flex;height:32px;justify-content:center;overflow:hidden;padding:0;position:absolute;text-align:center;text-indent:-999em;top:2px;width:32px;z-index:1}.react-datepicker__navigation--previous{left:2px}.react-datepicker__navigation--next{right:2px}.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button){right:85px}.react-datepicker__navigation--years{display:block;margin-left:auto;margin-right:auto;position:relative;top:0}.react-datepicker__navigation--years-previous{top:4px}.react-datepicker__navigation--years-upcoming{top:-4px}.react-datepicker__navigation:hover :before{border-color:#a6a6a6}.react-datepicker__navigation-icon{font-size:20px;position:relative;top:-1px;width:0}.react-datepicker__navigation-icon--next{left:-2px}.react-datepicker__navigation-icon--next:before{left:-7px;transform:rotate(45deg)}.react-datepicker__navigation-icon--previous{right:-2px}.react-datepicker__navigation-icon--previous:before{right:-7px;transform:rotate(225deg)}.react-datepicker__month-container{float:left}.react-datepicker__year{margin:.4rem;text-align:center}.react-datepicker__year-wrapper{display:flex;flex-wrap:wrap;max-width:180px}.react-datepicker__year .react-datepicker__year-text{display:inline-block;margin:2px;width:4rem}.react-datepicker__month{margin:.4rem;text-align:center}.react-datepicker__month .react-datepicker__month-text,.react-datepicker__month .react-datepicker__quarter-text{display:inline-block;margin:2px;width:4rem}.react-datepicker__input-time-container{clear:both;float:left;margin:5px 0 10px 15px;text-align:left;width:100%}.react-datepicker__input-time-container .react-datepicker-time__caption,.react-datepicker__input-time-container .react-datepicker-time__input-container{display:inline-block}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input{display:inline-block;margin-left:10px}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input{width:auto}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]{-moz-appearance:textfield}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter{display:inline-block;margin-left:5px}.react-datepicker__time-container{border-left:1px solid #aeaeae;float:right;width:85px}.react-datepicker__time-container--with-today-button{border:1px solid #aeaeae;border-radius:.3rem;display:inline;position:absolute;right:-87px;top:0}.react-datepicker__time-container .react-datepicker__time{background:#fff;border-bottom-right-radius:.3rem;position:relative}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box{border-bottom-right-radius:.3rem;margin:0 auto;overflow-x:hidden;text-align:center;width:85px}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list{box-sizing:initial;height:calc(195px + .85rem);list-style:none;margin:0;overflow-y:scroll;padding-left:0;padding-right:0;width:100%}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item{height:30px;padding:5px 10px;white-space:nowrap}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover{background-color:#f0f0f0;cursor:pointer}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected{background-color:#216ba5;color:#fff;font-weight:700}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover{background-color:#216ba5}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled{color:#ccc}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover{background-color:initial;cursor:default}.react-datepicker__week-number{color:#ccc;display:inline-block;line-height:1.7rem;margin:.166rem;text-align:center;width:1.7rem}.react-datepicker__week-number.react-datepicker__week-number--clickable{cursor:pointer}.react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected,.react-datepicker__week-number--keyboard-selected):hover{background-color:#f0f0f0;border-radius:.3rem}.react-datepicker__week-number--selected{background-color:#216ba5;border-radius:.3rem;color:#fff}.react-datepicker__week-number--selected:hover{background-color:#1d5d90}.react-datepicker__week-number--keyboard-selected{background-color:#2a87d0;border-radius:.3rem;color:#fff}.react-datepicker__week-number--keyboard-selected:hover{background-color:#1d5d90}.react-datepicker__day-names{margin-bottom:-8px;white-space:nowrap}.react-datepicker__week{white-space:nowrap}.react-datepicker__day,.react-datepicker__day-name,.react-datepicker__time-name{color:#000;display:inline-block;line-height:1.7rem;margin:.166rem;text-align:center;width:1.7rem}.react-datepicker__day,.react-datepicker__month-text,.react-datepicker__quarter-text,.react-datepicker__year-text{cursor:pointer}.react-datepicker__day:hover,.react-datepicker__month-text:hover,.react-datepicker__quarter-text:hover,.react-datepicker__year-text:hover{background-color:#f0f0f0;border-radius:.3rem}.react-datepicker__day--today,.react-datepicker__month-text--today,.react-datepicker__quarter-text--today,.react-datepicker__year-text--today{font-weight:700}.react-datepicker__day--highlighted,.react-datepicker__month-text--highlighted,.react-datepicker__quarter-text--highlighted,.react-datepicker__year-text--highlighted{background-color:#3dcc4a;border-radius:.3rem;color:#fff}.react-datepicker__day--highlighted:hover,.react-datepicker__month-text--highlighted:hover,.react-datepicker__quarter-text--highlighted:hover,.react-datepicker__year-text--highlighted:hover{background-color:#32be3f}.react-datepicker__day--highlighted-custom-1,.react-datepicker__month-text--highlighted-custom-1,.react-datepicker__quarter-text--highlighted-custom-1,.react-datepicker__year-text--highlighted-custom-1{color:#f0f}.react-datepicker__day--highlighted-custom-2,.react-datepicker__month-text--highlighted-custom-2,.react-datepicker__quarter-text--highlighted-custom-2,.react-datepicker__year-text--highlighted-custom-2{color:green}.react-datepicker__day--holidays,.react-datepicker__month-text--holidays,.react-datepicker__quarter-text--holidays,.react-datepicker__year-text--holidays{background-color:#ff6803;border-radius:.3rem;color:#fff;position:relative}.react-datepicker__day--holidays .overlay,.react-datepicker__month-text--holidays .overlay,.react-datepicker__quarter-text--holidays .overlay,.react-datepicker__year-text--holidays .overlay{background-color:#333;border-radius:4px;bottom:100%;color:#fff;left:50%;opacity:0;padding:4px;position:absolute;transform:translateX(-50%);transition:visibility 0s,opacity .3s ease-in-out;visibility:hidden;white-space:nowrap}.react-datepicker__day--holidays:hover,.react-datepicker__month-text--holidays:hover,.react-datepicker__quarter-text--holidays:hover,.react-datepicker__year-text--holidays:hover{background-color:#cf5300}.react-datepicker__day--holidays:hover .overlay,.react-datepicker__month-text--holidays:hover .overlay,.react-datepicker__quarter-text--holidays:hover .overlay,.react-datepicker__year-text--holidays:hover .overlay{opacity:1;visibility:visible}.react-datepicker__day--in-range,.react-datepicker__day--in-selecting-range,.react-datepicker__day--selected,.react-datepicker__month-text--in-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__month-text--selected,.react-datepicker__quarter-text--in-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__quarter-text--selected,.react-datepicker__year-text--in-range,.react-datepicker__year-text--in-selecting-range,.react-datepicker__year-text--selected{background-color:#216ba5;border-radius:.3rem;color:#fff}.react-datepicker__day--in-range:hover,.react-datepicker__day--in-selecting-range:hover,.react-datepicker__day--selected:hover,.react-datepicker__month-text--in-range:hover,.react-datepicker__month-text--in-selecting-range:hover,.react-datepicker__month-text--selected:hover,.react-datepicker__quarter-text--in-range:hover,.react-datepicker__quarter-text--in-selecting-range:hover,.react-datepicker__quarter-text--selected:hover,.react-datepicker__year-text--in-range:hover,.react-datepicker__year-text--in-selecting-range:hover,.react-datepicker__year-text--selected:hover{background-color:#1d5d90}.react-datepicker__day--keyboard-selected,.react-datepicker__month-text--keyboard-selected,.react-datepicker__quarter-text--keyboard-selected,.react-datepicker__year-text--keyboard-selected{background-color:#bad9f1;border-radius:.3rem;color:#000}.react-datepicker__day--keyboard-selected:hover,.react-datepicker__month-text--keyboard-selected:hover,.react-datepicker__quarter-text--keyboard-selected:hover,.react-datepicker__year-text--keyboard-selected:hover{background-color:#1d5d90}.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range),.react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range),.react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range),.react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range){background-color:#216ba580}.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range){background-color:#f0f0f0;color:#000}.react-datepicker__day--disabled,.react-datepicker__month-text--disabled,.react-datepicker__quarter-text--disabled,.react-datepicker__year-text--disabled{color:#ccc;cursor:default}.react-datepicker__day--disabled:hover,.react-datepicker__month-text--disabled:hover,.react-datepicker__quarter-text--disabled:hover,.react-datepicker__year-text--disabled:hover{background-color:initial}.react-datepicker__day--disabled .overlay,.react-datepicker__month-text--disabled .overlay,.react-datepicker__quarter-text--disabled .overlay,.react-datepicker__year-text--disabled .overlay{background-color:#333;border-radius:4px;bottom:70%;color:#fff;left:50%;opacity:0;padding:4px;position:absolute;transform:translateX(-50%);transition:visibility 0s,opacity .3s ease-in-out;visibility:hidden;white-space:nowrap}.react-datepicker__input-container{display:inline-block;position:relative;width:100%}.react-datepicker__input-container .react-datepicker__calendar-icon{box-sizing:initial;padding:.5rem;position:absolute}.react-datepicker__view-calendar-icon input{padding:6px 10px 5px 25px}.react-datepicker__month-read-view,.react-datepicker__month-year-read-view,.react-datepicker__year-read-view{border:1px solid #0000;border-radius:.3rem;position:relative}.react-datepicker__month-read-view:hover,.react-datepicker__month-year-read-view:hover,.react-datepicker__year-read-view:hover{cursor:pointer}.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow{border-top-color:#b3b3b3}.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view--down-arrow,.react-datepicker__year-read-view--down-arrow{right:-16px;top:0;transform:rotate(135deg)}.react-datepicker__month-dropdown,.react-datepicker__month-year-dropdown,.react-datepicker__year-dropdown{background-color:#f0f0f0;border:1px solid #aeaeae;border-radius:.3rem;left:25%;position:absolute;text-align:center;top:30px;width:50%;z-index:1}.react-datepicker__month-dropdown:hover,.react-datepicker__month-year-dropdown:hover,.react-datepicker__year-dropdown:hover{cursor:pointer}.react-datepicker__month-dropdown--scrollable,.react-datepicker__month-year-dropdown--scrollable,.react-datepicker__year-dropdown--scrollable{height:150px;overflow-y:scroll}.react-datepicker__month-option,.react-datepicker__month-year-option,.react-datepicker__year-option{display:block;line-height:20px;margin-left:auto;margin-right:auto;width:100%}.react-datepicker__month-option:first-of-type,.react-datepicker__month-year-option:first-of-type,.react-datepicker__year-option:first-of-type{border-top-left-radius:.3rem;border-top-right-radius:.3rem}.react-datepicker__month-option:last-of-type,.react-datepicker__month-year-option:last-of-type,.react-datepicker__year-option:last-of-type{border-bottom-left-radius:.3rem;border-bottom-right-radius:.3rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.react-datepicker__month-option:hover,.react-datepicker__month-year-option:hover,.react-datepicker__year-option:hover{background-color:#ccc}.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming,.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming{border-bottom-color:#b3b3b3}.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous,.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous{border-top-color:#b3b3b3}.react-datepicker__month-option--selected,.react-datepicker__month-year-option--selected,.react-datepicker__year-option--selected{left:15px;position:absolute}.react-datepicker__close-icon{background-color:initial;border:0;cursor:pointer;display:table-cell;height:100%;outline:0;padding:0 6px 0 0;position:absolute;right:0;top:0;vertical-align:middle}.react-datepicker__close-icon:after{background-color:#216ba5;border-radius:50%;color:#fff;content:"×";cursor:pointer;display:table-cell;font-size:12px;height:16px;line-height:1;padding:2px;text-align:center;vertical-align:middle;width:16px}.react-datepicker__close-icon--disabled{cursor:default}.react-datepicker__close-icon--disabled:after{background-color:#ccc;cursor:default}.react-datepicker__today-button{background:#f0f0f0;border-top:1px solid #aeaeae;clear:left;cursor:pointer;font-weight:700;padding:5px 0;text-align:center}.react-datepicker__portal{align-items:center;background-color:#000c;display:flex;height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100vw;z-index:2147483647}.react-datepicker__portal .react-datepicker__day,.react-datepicker__portal .react-datepicker__day-name,.react-datepicker__portal .react-datepicker__time-name{line-height:3rem;width:3rem}@media (max-height:550px),(max-width:400px){.react-datepicker__portal .react-datepicker__day,.react-datepicker__portal .react-datepicker__day-name,.react-datepicker__portal .react-datepicker__time-name{line-height:2rem;width:2rem}}.react-datepicker__portal .react-datepicker-time__header,.react-datepicker__portal .react-datepicker__current-month{font-size:1.44rem}.react-datepicker__children-container{height:auto;margin:.4rem;padding-left:.2rem;padding-right:.2rem;width:13.8rem}.react-datepicker__aria-live{border:0;clip-path:circle(0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.react-datepicker__calendar-icon{height:1em;vertical-align:-.125em;width:1em}
 
 /*!
  * Quill Editor v1.3.7

package/dist/index.js

@@ -143,28 +143,38 @@
     }), /*#__PURE__*/React__default["default"].createElement("p", null, title)));
   };
 
-  const Alert = _ref => {
-    let {
-      title = "Title",
-      subtitle = "Subtitle",
-      type = "primary",
-      titleLeftButton,
-      titleRightButton,
-      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", {
@@ -183,6 +193,14 @@
       title: titleRightButton,
       onClick: onClickRightButton,
       size: "small"
+    }))), onCloseButton && /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "flex"
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      onClick: onCloseButton
+    }, /*#__PURE__*/React__default["default"].createElement(PiX, {
+      size: "16",
+      variant: "Bold",
+      className: "text-neutral300 cursor-pointer"
     }))));
   };
 
@@ -23995,14 +24013,12 @@
     options = [{
       option: "Name 1",
       value: "Value 1"
-    }, {
-      option: "Name 2",
-      value: "Value 2"
     }],
     onSelect,
     title = "Title Dropdown",
     placeholder = "Placeholder",
     isRequired = true,
+    isEdited = true,
     currentOption = {
       option: "Name 1",
       value: "Value 1"
@@ -24050,8 +24066,8 @@
       className: "rounded-md shadow-sm"
     }, /*#__PURE__*/React__default["default"].createElement("button", {
       type: "button",
-      className: "flex items-center w-full py-2.5 text-left px-4 bg-neutral20 border-neutral50 font-normal text-sm text-neutral300 rounded-md border focus:outline-none overflow-hidden",
-      onClick: handleToggleDropdownText
+      className: `${isEdited ? "bg-neutral20 cursor-pointer" : "bg-neutral30 cursor-not-allowed"} flex items-center w-full py-2.5 text-left px-4 border-neutral50 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"
     }, selectedOption ? selectedOption : currentOption.option ? currentOption.option : placeholder), /*#__PURE__*/React__default["default"].createElement("span", {
@@ -24062,7 +24078,7 @@
     }) : /*#__PURE__*/React__default["default"].createElement(PiCaretDown, {
       size: 16,
       className: "text-neutral300"
-    }))))), isOpen && /*#__PURE__*/React__default["default"].createElement("div", {
+    }))))), isOpen && isEdited && /*#__PURE__*/React__default["default"].createElement("div", {
       className: "z-10 origin-top-right 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",
       "aria-orientation": "vertical",
@@ -46686,8 +46702,8 @@
     const [showFilterMenu, setShowFilterMenu] = React.useState(false);
     const [showFilterSubmenu, setShowFilterSubmenu] = React.useState(false);
     const [dataSelectionOptionMenu, setDataSelectionOptionMenu] = React.useState();
-    const [dataFilterCheckbox, setDataFilterCheckbox] = React.useState([]);
-    const [dataFilterStatus, setDataFilterStatus] = React.useState([]);
+    React.useState([]);
+    React.useState([]);
     const dropdownRef = React.useRef(null);
     React.useEffect(() => {
       const handleOutsideClick = event => {
@@ -46744,7 +46760,7 @@
       className: "flex"
     }, /*#__PURE__*/React__default["default"].createElement("button", {
       type: "button",
-      className: `${dataFilterCheckbox.length + dataFilterStatus.length > 0 ? "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)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sprint-asia-custom-component",
   "main": "dist/index.js",
-  "version": "0.1.35",
+  "version": "0.1.37",
   "private": false,
   "dependencies": {
     "@headlessui/react": "^1.7.18",

package/src/components/alert/index.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { PiInfoFill, PiCheckCircleFill } from 'react-icons/pi'
+import { PiInfoFill, PiCheckCircleFill, PiX } from 'react-icons/pi'
 import OutlineButton from '../button/outlinebutton'
 
 const Alert = ({
@@ -8,6 +8,7 @@ const Alert = ({
     type = "primary",
     titleLeftButton,
     titleRightButton,
+    onCloseButton, 
     onClickLeftButton,
     onClickRightButton,
 }) => {
@@ -59,6 +60,18 @@ const Alert = ({
                 </div>
             }
         </div>
+        {
+            onCloseButton &&
+            <div className='flex'>
+                <div onClick={onCloseButton}>
+                    <PiX 
+                        size="16"
+                        variant="Bold"
+                        className="text-neutral300 cursor-pointer"
+                    />
+                </div>
+            </div>
+        }
     </div>
   )
 }

package/src/components/dropdown/dropdownText/index.js

@@ -6,16 +6,13 @@ const DropdownText = ({
         {
             option: "Name 1",
             value: "Value 1"
-        },
-        {
-            option: "Name 2",
-            value: "Value 2"
         }
     ],
     onSelect,
     title = "Title Dropdown",
     placeholder = "Placeholder",
     isRequired = true,
+    isEdited = true,
     currentOption = {option : "Name 1", value:"Value 1"},
 }) => {
     const [isOpen, setIsOpen] = useState(false);
@@ -64,8 +61,8 @@ const DropdownText = ({
             <span className='rounded-md shadow-sm'>
                 <button
                     type='button'
-                    className="flex items-center w-full py-2.5 text-left px-4 bg-neutral20 border-neutral50 font-normal text-sm text-neutral300 rounded-md border focus:outline-none overflow-hidden"
-                    onClick={handleToggleDropdownText}
+                    className={`${isEdited ? "bg-neutral20 cursor-pointer" : "bg-neutral30 cursor-not-allowed"} flex items-center w-full py-2.5 text-left px-4 border-neutral50 font-normal text-sm text-neutral300 rounded-md border focus:outline-none overflow-hidden`}
+                    onClick={() => isEdited && handleToggleDropdownText()}
                 >
                     <span className='flex-grow overflow-hidden'>{selectedOption ? selectedOption : currentOption.option ? currentOption.option : placeholder}</span>
                     <span className='ml-2'>
@@ -75,7 +72,7 @@ const DropdownText = ({
             </span>
         </div>
 
-        {isOpen && (
+        {isOpen && isEdited && (
             <div
                 className='z-10 origin-top-right 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'

package/src/components/filter/filterDropdown/index.js

@@ -111,7 +111,7 @@ const FilterDropdown = ({
                     <div className='flex'>
                         <button
                             type='button'
-                            className={`${dataFilterCheckbox.length + dataFilterStatus.length > 0 ? "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`}
                         >
                             <span className='flex-grow py-2.5' onClick={() => setShowFilterMenu(!showFilterMenu)}>{buttonText}</span>
                             {

package/src/components/header/index.js

@@ -1,46 +1,35 @@
 import React, {useState, useEffect, useRef} from 'react'
 import Profile from '../../assets/images/profile.png';
-import Notification from '../notification';
-import { PiDoorOpenDuotone, PiUserCircleDuotone } from 'react-icons/pi';
+import { PiDoorOpenDuotone, PiUserCircleDuotone, PiBellDuotone,PiWalletDuotone  } from 'react-icons/pi';
+import { useNavigate } from 'react-router-dom';
 
 const Header = ({
     title = "Label",
-    isActive = false,
+    fullName = "Undefined Name",
+    roleName = "Undefined Role",
+    dataProfile = [
+        { title: "Change Password", navigate: "/change-password", logo: PiUserCircleDuotone},
+        { title: "Logout", navigate: "/logout", logo: PiDoorOpenDuotone},
+    ],
+    isNotificationActive = false,
+    dataNotification = ["Notification 1", "Notification 2"],
+    dataBalance = "0"
 }) => {
     
     const [isProfileContentVisible, setProfileContentVisible] = useState(false);
-    const [userLink, setUserLink] = useState("/login");
-    const modalRef = useRef(null);
-    const userInfo = JSON.parse(localStorage.getItem('userInfo'))
-
-    useEffect(() => {
-        handleNavigateHeader()
-        const handleClickOutside = (event) => {
-            if (modalRef.current && !modalRef.current.contains(event.target)) {
-                setProfileContentVisible(false);
-            }
-        };
-        document.addEventListener('mousedown', handleClickOutside);
-        return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, [isProfileContentVisible]);
+    const [isNotificationContentVisible, setNotificationContentVisible] = useState(false);
+    const modalRefProfile = useRef(null);
+    const modalRefNotification = useRef(null);
+    const navigateTo = useNavigate()
 
     function toggleProfileContent() {
         setProfileContentVisible(!isProfileContentVisible)
+        setNotificationContentVisible(false)
     }
 
-    function handleNavigateHeader() {
-        if (userInfo) {
-            if (userInfo.roleName === "Business Administrator") {
-                setUserLink("/business-admin/change-password")
-            } else if (userInfo.roleName === "Client Administrator") {
-                setUserLink("/client-admin/change-password")
-            }
-        }
-        else {
-            setUserLink("/logout")
-        }
+    function toggleNotificationContent() {
+        setNotificationContentVisible(!isNotificationContentVisible)
+        setProfileContentVisible(false)
     }
     
   return (
@@ -48,26 +37,92 @@ const Header = ({
         <div className='flex w-full justify-between items-center'>
             <p className='text-2xl font-semibold'>{title}</p>
             <div className='flex'>
-                <div className="w-px bg-neutral40 h-16 mx-6"></div>
-                <div className='flex items-center cursor-pointer' onClick={toggleProfileContent} ref={modalRef}>
+                <div className='flex items-center'>
+                    <div className='w-10 h-10 rounded-full border border-neutral40 mr-2 flex items-center justify-center'>
+                        <PiWalletDuotone size={24} />
+                    </div>
+                    <div>
+                        <p className='text-neutral300 text-xs'>Balance:</p>
+                        <p className='font-semibold text-black'>Rp {dataBalance}</p>
+                    </div>
+                </div>
+                <div className="w-px bg-neutral40 h-16 mx-3"></div>
+                <div className='flex items-center cursor-pointer' onClick={toggleNotificationContent} ref={modalRefNotification}>
+                    <div className='w-10 h-10 rounded-full border border-neutral40 flex items-center justify-center'>
+                        <div className='relative'>
+                            <PiBellDuotone size={24} />
+                            {
+                                isNotificationActive &&
+                                <div className='absolute top-0 right-0 border border-white w-2 h-2 rounded-full bg-danger500'></div>
+                            }
+                        </div>
+                    </div>
+                    {isNotificationContentVisible && (
+                        <div
+                            className='absolute right-20 top-16 z-50'
+                        >
+                            {dataNotification.length !== 0 && (
+                                <div className='z-50 w-48 bg-white border border-neutral40 rounded-md shadow-md'>
+                                    {dataNotification.map((value, index) => (
+                                        <div
+                                            key={index}
+                                            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={() => navigateTo(value.navigate)}
+                                        >   
+                                            <p className='text-sm'>{value}</p>
+                                        </div>
+                                    ))}
+                                </div>
+                            )}
+                        </div>
+                    )}
+                </div>
+                <div className="w-px bg-neutral40 h-16 mx-3"></div>
+                <div className='flex items-center cursor-pointer' onClick={toggleProfileContent} ref={modalRefProfile}>
                     <img src={Profile} className='w-10 h-10 mr-2' />
                     <div className='flex-1'>
-                        <p className='text-sm text-black font-semibold whitespace-nowrap'>{userInfo ? userInfo.username : "Undefined Name"}</p>
-                        <p className='text-xs text-neutral300 font-normal whitespace-nowrap'>{userInfo ? userInfo.roleName : "Undefined Role"}</p>
+                        <p className='text-sm text-black font-semibold whitespace-nowrap'>{fullName}</p>
+                        <p className='text-xs text-neutral300 font-normal whitespace-nowrap'>{roleName}</p>
                     </div>
                     {isProfileContentVisible && (
                         <div
-                            className='absolute right-4 top-16 z-50'
+                            className='absolute right-0 top-16 z-50'
                         >
-                            {isProfileContentVisible && (
-                            <div className='z-50 w-48 bg-white border border-neutral40 rounded-md shadow-md'>
-                                <Notification
-                                    dataNotification={[
-                                        { title: "Change Password", navigate: userLink, logo: PiUserCircleDuotone},
-                                        { title: "Logout", navigate: "/logout", logo: PiDoorOpenDuotone},
-                                    ]}
-                                />
-                            </div>
+                            {dataProfile.length !== 0 && (
+                                <div className='z-50 w-48 bg-white border border-neutral40 rounded-md shadow-md'>
+                                    {dataProfile.map((value, index) => (
+                                        <div
+                                            key={index}
+                                            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={() => navigateTo(value.navigate)}
+                                        >   
+                                            <value.logo size={16} className='text-neutral300 mr-2' />
+                                            <p className='text-sm'>{value.title}</p>
+                                        </div>
+                                    ))}
+                                </div>
                             )}
                         </div>
                     )}

package/src/components/table/listTable/cellmodeltwo/index.js

@@ -0,0 +1,152 @@
+import React from 'react'
+import Chip from '../../../chip'
+import { PiTrash, PiNotePencil } from 'react-icons/pi'
+
+const CellModelTwo = ({
+    Column_One_A,
+    Column_One_B,
+    Column_One_C,
+    Column_One_D,
+    Column_Two_A,
+    Column_Three_A,
+    Column_Four_A,
+    Column_Five_A = "Active",
+    onClickBody,
+}) => {
+    let chipType = "success";
+    let chipTitle = Column_Five_A;
+
+    switch (Column_Five_A.toLowerCase()) {
+        case "active":
+            chipType = "success";
+            chipTitle = "Active";
+            break;
+        case "waiting":
+            chipType = "primary";
+            chipTitle = "Waiting";
+            break;
+        case "inactive":
+            chipType = "neutral";
+            chipTitle = "Inactive";
+            break;
+    }
+  return (
+    <tr 
+        className={`bg-white hover:bg-neutral20 border-t border-neutral40 ${onClickBody != undefined && "cursor-pointer"}`} 
+    >
+        <td>
+            <div className='flex items-center' 
+                onClick={
+                () => {
+                    if (onClickBody != undefined) {
+                        onClickBody()
+                    }
+                }
+            }>
+                <div className= "py-3.5 px-4">
+                    <p className='font-semibold text-black text-sm'>{Column_One_A ? Column_One_A : "-"}</p>
+                    <p className='font-normal text-neutral300 text-sm'>{Column_One_B ? Column_One_B : "-"}</p>
+                    <p className='font-normal text-neutral300 text-sm'>{Column_One_C ? Column_One_C : "-"}</p>
+                    <p className='font-normal text-neutral300 text-sm'>{Column_One_D ? Column_One_D : "-"}</p>
+                </div>
+            </div>
+        </td>
+        <td>
+            <div className='flex items-center'
+                onClick={
+                    () => {
+                        if (onClickBody != undefined) {
+                            onClickBody()
+                        }
+                    }
+                }>
+                <div className= "py-3.5 px-4">
+                    <p className='font-semibold text-black text-sm'>{Column_Two_A ? Column_Two_A : "-"}</p>
+                    <div className='flex items-center pt-1'>
+                        <p className='font-normal text-neutral500 text-sm'>&nbsp;</p>
+                    </div>
+                    <div className='flex items-center pt-1'>
+                        <p className='font-normal text-neutral500 text-sm'>&nbsp;</p>
+                    </div>
+                    <div className='flex items-center pt-1'>
+                        <p className='font-normal text-neutral500 text-sm'>&nbsp;</p>
+                    </div>
+                </div>
+            </div>
+        </td>
+        <td>
+            <div className='flex items-center'
+                onClick={
+                    () => {
+                        if (onClickBody != undefined) {
+                            onClickBody()
+                        }
+                    }
+                }>
+                <div className= "py-3.5 px-4">
+                    <p className='font-normal text-black text-sm'>{Column_Three_A ? Column_Three_A : "-"}</p>
+                    <div className='flex items-center pt-1'>
+                        <p className='font-normal text-neutral500 text-sm'>&nbsp;</p>
+                    </div>
+                    <div className='flex items-center pt-1'>
+                        <p className='font-normal text-neutral500 text-sm'>&nbsp;</p>
+                    </div>
+                    <div className='flex items-center pt-1'>
+                        <p className='font-normal text-neutral500 text-sm'>&nbsp;</p>
+                    </div>
+                </div>
+            </div>
+        </td>
+        <td>
+            <div className='flex items-center'
+                onClick={
+                    () => {
+                        if (onClickBody != undefined) {
+                            onClickBody()
+                        }
+                    }
+                }>
+                <div className= "py-3.5 px-4">
+                    <p className='font-normal text-black text-sm'>{Column_Four_A ? Column_Four_A : "-"}</p>
+                    <div className='flex items-center pt-1'>
+                        <p className='font-normal text-neutral500 text-sm'>&nbsp;</p>
+                    </div>
+                    <div className='flex items-center pt-1'>
+                        <p className='font-normal text-neutral500 text-sm'>&nbsp;</p>
+                    </div>
+                    <div className='flex items-center pt-1'>
+                        <p className='font-normal text-neutral500 text-sm'>&nbsp;</p>
+                    </div>
+                </div>
+            </div>
+        </td>
+        <td>
+            <div className='flex items-center'
+                onClick={
+                    () => {
+                        if (onClickBody != undefined) {
+                            onClickBody()
+                        }
+                    }
+                }>
+                <div className= "py-3.5 px-4">
+                    <Chip 
+                        type={chipType} 
+                        title={chipTitle}/>
+                    <div className='flex items-center pt-1'>
+                        <p className='font-normal text-neutral500 text-sm'>&nbsp;</p>
+                    </div>
+                    <div className='flex items-center pt-1'>
+                        <p className='font-normal text-neutral500 text-sm'>&nbsp;</p>
+                    </div>
+                    <div className='flex items-center pt-1'>
+                        <p className='font-normal text-neutral500 text-sm'>&nbsp;</p>
+                    </div>
+                </div>
+            </div>
+        </td>
+    </tr>
+  )
+}
+
+export default CellModelTwo

package/src/index.css

@@ -1,3 +1,8 @@
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
+@import 'tailwindcss/utilities';
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
+
+* {
+    font-family: "Inter", sans-serif;
+}

package/src/templates/index.js

@@ -51,6 +51,8 @@ import DepositList from '../components/table/listTable/deposit';
 import ModalDeposit from '../components/modal/modalDeposit';
 import CellModelOne from '../components/table/listTable/cellmodelone';
 import FilterDropdown from '../components/filter/filterDropdown';
+import Header from '../components/header';
+import CellModelTwo from '../components/table/listTable/cellmodeltwo';
 
 
 const Templates = () => {
@@ -104,6 +106,7 @@ const Templates = () => {
   ]);
 
   const [isOpen, setIsOpen] = useState(false);
+  const [isOpenAlert, setIsOpenAlert] = useState(true);
 
   const toggleOpen = () => setIsOpen(!isOpen);
 
@@ -739,8 +742,12 @@ const Templates = () => {
 
   return (
     <div>
+        <div>
+          <Header title='Navbar'/>
+        </div>
+
         <div className='m-9'></div>
-        <p className='text-black font-semibold text-xl text-left py-1'>Alert</p>
+        <p className='text-black font-bold text-2xl text-center py-2'>Alert</p>
         <div className='w-full py-3'>
             <Alert title='Client & Division Reminder' subtitle='Please ensure you have created the appropriate Client and division for the user before proceeding.'/>
         </div>
@@ -756,6 +763,13 @@ const Templates = () => {
         <div className='w-full py-3'>
             <Alert title='Client & Division Reminder' subtitle='Please ensure you have created the appropriate Client and division for the user before proceeding.' titleLeftButton="Add Client" titleRightButton="Add Division" onClickLeftButton={() => console.log("left button clicked")} onClickRightButton={() => console.log("right button clicked")}/>
         </div>
+        {
+          isOpenAlert &&
+          <div className='w-full py-3'>
+            <Alert title='Client & Division Reminder' subtitle='Please ensure you have created the appropriate Client and division for the user before proceeding.' onCloseButton={() => setIsOpenAlert(false)}/>
+          </div>
+        }
+
 
         <div className='m-9'></div>
         <p className='text-black font-bold text-2xl text-center py-2'>Primary Button</p>
@@ -925,6 +939,16 @@ const Templates = () => {
           title="Select an Option"
         />
 
+        <div className='m-9'></div>
+        <DropdownText
+          options={options}
+          currentOption={currentOption}
+          onSelectName={handleSelectName}
+          onSelectValue={handleSelectValue}
+          isEdited={false}
+          title="Cannot Edit"
+        />
+
         <div className='m-9'></div>
         <p className='text-black font-bold text-2xl text-center py-2'>Dropzone</p>
         <DropzoneUploadFile
@@ -1244,6 +1268,18 @@ const Templates = () => {
         </tbody>
       </table>
 
+      <div className='m-9'></div>
+        <table className='w-full text-left'>
+        <HeaderTable dataHeader={["Column One", "Column Two", "Column Three", "Column Four", "Column Five"]} />
+        <tbody>
+          {
+            internalProducts.map((product, index) => (
+              <CellModelTwo />
+            ))
+          }
+        </tbody>
+      </table>
+
       <div className='m-9'></div>
       <p className='text-black font-bold text-2xl text-center py-2'>Report</p>
       <ReportList {...reportData} />