thailife-react 0.0.30 → 0.0.31

package/dist/cjs/index.js

@@ -29,7 +29,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "/*! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:\"\"}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.absolute{position:absolute}.relative{position:relative}.left-0{left:0}.left-3{left:.75rem}.right-3{right:.75rem}.top-1\\/2{top:50%}.top-full{top:100%}.z-10{z-index:10}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.ml-1{margin-left:.25rem}.mr-1{margin-right:.25rem}.mr-2{margin-right:.5rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.h-3{height:.75rem}.h-3\\.5{height:.875rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-8{height:2rem}.h-\\[24px\\]{height:24px}.h-\\[40px\\]{height:40px}.h-\\[44px\\]{height:44px}.h-\\[56px\\]{height:56px}.max-h-60{max-height:15rem}.min-h-\\[44px\\]{min-height:44px}.w-3{width:.75rem}.w-3\\.5{width:.875rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-8{width:2rem}.w-80{width:20rem}.w-\\[24px\\]{width:24px}.w-full{width:100%}.max-w-md{max-width:28rem}.-translate-y-1\\/2{--tw-translate-y:-50%}.-translate-y-1\\/2,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-180{--tw-rotate:180deg}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-1\\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(1rem*var(--tw-space-y-reverse));margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)))}.overflow-auto{overflow:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.border{border-width:1px}.border-2{border-width:2px}.border-none{border-style:none}.border-\\[\\#CBD4D9\\]{--tw-border-opacity:1;border-color:rgb(203 212 217/var(--tw-border-opacity))}.border-danger{--tw-border-opacity:1;border-color:rgb(255 17 0/var(--tw-border-opacity))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity))}.border-gray-400{--tw-border-opacity:1;border-color:rgb(156 163 175/var(--tw-border-opacity))}.border-primary{--tw-border-opacity:1;border-color:rgb(0 122 194/var(--tw-border-opacity))}.bg-blue-100{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity))}.bg-blue-50{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity))}.bg-danger{--tw-bg-opacity:1;background-color:rgb(255 17 0/var(--tw-bg-opacity))}.bg-primary{--tw-bg-opacity:1;background-color:rgb(0 122 194/var(--tw-bg-opacity))}.bg-primary\\/10{background-color:rgba(0,122,194,.1)}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-4{padding:1rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.pl-10{padding-left:2.5rem}.pl-12{padding-left:3rem}.pl-14{padding-left:3.5rem}.pr-10{padding-right:2.5rem}.pr-12{padding-right:3rem}.pr-14{padding-right:3.5rem}.pt-2{padding-top:.5rem}.text-left{text-align:left}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-\\[18px\\]{font-size:18px}.text-\\[22px\\]{font-size:22px}.text-sm{font-size:.875rem;line-height:1.25rem}.font-bold{font-weight:700}.text-\\[\\#393C3E\\]{--tw-text-opacity:1;color:rgb(57 60 62/var(--tw-text-opacity))}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity))}.text-blue-800{--tw-text-opacity:1;color:rgb(30 64 175/var(--tw-text-opacity))}.text-danger{--tw-text-opacity:1;color:rgb(255 17 0/var(--tw-text-opacity))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.text-primary{--tw-text-opacity:1;color:rgb(0 122 194/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.opacity-25{opacity:.25}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-75{opacity:.75}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-lg,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}@font-face{font-display:swap;font-family:DB_OZONE_X;font-style:normal;font-weight:400;src:url(../fonts/db_ozone_x/DB_Ozone_X.woff) format(\"woff\"),url(../fonts/db_ozone_x/DB_Ozone_X.ttf) format(\"truetype\")}@font-face{font-display:swap;font-family:DB_OZONE_X;font-style:normal;font-weight:500;src:url(../fonts/db_ozone_x/DB_Ozone_X_Med.woff) format(\"woff\"),url(../fonts/db_ozone_x/DB_Ozone_X_Med.ttf) format(\"truetype\")}@font-face{font-display:swap;font-family:DB_OZONE_X;font-style:normal;font-weight:700;src:url(../fonts/db_ozone_x/DB_Ozone_X_Bd.woff) format(\"woff\"),url(../fonts/db_ozone_x/DB_Ozone_X_Bd.ttf) format(\"truetype\")}body{color:#393c3e;font-family:DB_OZONE_X,sans-serif!important;font-size:22px;font-weight:400}.focus-within\\:border-2:focus-within{border-width:2px}.focus-within\\:border-primary:focus-within{--tw-border-opacity:1;border-color:rgb(0 122 194/var(--tw-border-opacity))}.hover\\:border-primary:hover{--tw-border-opacity:1;border-color:rgb(0 122 194/var(--tw-border-opacity))}.hover\\:bg-blue-600:hover{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity))}.hover\\:bg-danger:hover{--tw-bg-opacity:1;background-color:rgb(255 17 0/var(--tw-bg-opacity))}.hover\\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.hover\\:bg-primary:hover{--tw-bg-opacity:1;background-color:rgb(0 122 194/var(--tw-bg-opacity))}.hover\\:bg-primary\\/10:hover{background-color:rgba(0,122,194,.1)}.hover\\:text-blue-800:hover{--tw-text-opacity:1;color:rgb(30 64 175/var(--tw-text-opacity))}.hover\\:text-primary:hover{--tw-text-opacity:1;color:rgb(0 122 194/var(--tw-text-opacity))}.hover\\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.focus\\:border-2:focus{border-width:2px}.focus\\:border-danger:focus{--tw-border-opacity:1;border-color:rgb(255 17 0/var(--tw-border-opacity))}.focus\\:border-primary:focus{--tw-border-opacity:1;border-color:rgb(0 122 194/var(--tw-border-opacity))}.focus\\:bg-gray-100:focus{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\\:ring-offset-2:focus{--tw-ring-offset-width:2px}.active\\:bg-danger:active{--tw-bg-opacity:1;background-color:rgb(255 17 0/var(--tw-bg-opacity))}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-50:disabled{opacity:.5}.group:hover .group-hover\\:border-primary{--tw-border-opacity:1;border-color:rgb(0 122 194/var(--tw-border-opacity))}.peer:focus-visible~.peer-focus-visible\\:ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.peer:focus-visible~.peer-focus-visible\\:ring-primary\\/60{--tw-ring-color:rgba(0,122,194,.6)}.peer:focus-visible~.peer-focus-visible\\:ring-offset-2{--tw-ring-offset-width:2px}";
+var css_248z = "/*! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:\"\"}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.left-0{left:0}.left-3{left:.75rem}.right-2{right:.5rem}.right-3{right:.75rem}.right-8{right:2rem}.top-1\\/2{top:50%}.top-3{top:.75rem}.top-4{top:1rem}.top-full{top:100%}.z-10{z-index:10}.z-50{z-index:50}.mx-4{margin-left:1rem;margin-right:1rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.ml-1{margin-left:.25rem}.mr-1{margin-right:.25rem}.mr-2{margin-right:.5rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.h-3{height:.75rem}.h-3\\.5{height:.875rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-8{height:2rem}.h-\\[14px\\]{height:14px}.h-\\[34px\\]{height:34px}.h-\\[40px\\]{height:40px}.h-\\[44px\\]{height:44px}.h-\\[56px\\]{height:56px}.max-h-60{max-height:15rem}.min-h-\\[44px\\]{min-height:44px}.w-3{width:.75rem}.w-3\\.5{width:.875rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-8{width:2rem}.w-80{width:20rem}.w-\\[14px\\]{width:14px}.w-\\[34px\\]{width:34px}.w-full{width:100%}.max-w-md{max-width:28rem}.-translate-y-1\\/2{--tw-translate-y:-50%}.-rotate-180,.-translate-y-1\\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-rotate-180{--tw-rotate:-180deg}.rotate-180{--tw-rotate:180deg}.rotate-180,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-1\\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.5rem*var(--tw-space-x-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(1rem*var(--tw-space-y-reverse));margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)))}.overflow-auto{overflow:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-\\[9999px\\],.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.border{border-width:1px}.border-2{border-width:2px}.border-none{border-style:none}.border-\\[\\#CBD4D9\\]{--tw-border-opacity:1;border-color:rgb(203 212 217/var(--tw-border-opacity))}.border-danger{--tw-border-opacity:1;border-color:rgb(255 17 0/var(--tw-border-opacity))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity))}.border-gray-400{--tw-border-opacity:1;border-color:rgb(156 163 175/var(--tw-border-opacity))}.border-primary{--tw-border-opacity:1;border-color:rgb(0 122 194/var(--tw-border-opacity))}.bg-\\[\\#CBD4D9\\]{--tw-bg-opacity:1;background-color:rgb(203 212 217/var(--tw-bg-opacity))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity))}.bg-blue-100{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity))}.bg-blue-50{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity))}.bg-danger{--tw-bg-opacity:1;background-color:rgb(255 17 0/var(--tw-bg-opacity))}.bg-primary{--tw-bg-opacity:1;background-color:rgb(0 122 194/var(--tw-bg-opacity))}.bg-primary\\/10{background-color:rgba(0,122,194,.1)}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-opacity-50{--tw-bg-opacity:0.5}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.pl-10{padding-left:2.5rem}.pl-12{padding-left:3rem}.pl-14{padding-left:3.5rem}.pl-\\[1px\\]{padding-left:1px}.pr-10{padding-right:2.5rem}.pr-12{padding-right:3rem}.pr-14{padding-right:3.5rem}.pr-3{padding-right:.75rem}.pt-2{padding-top:.5rem}.text-left{text-align:left}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-\\[18px\\]{font-size:18px}.text-\\[22px\\]{font-size:22px}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.text-\\[\\#393C3E\\]{--tw-text-opacity:1;color:rgb(57 60 62/var(--tw-text-opacity))}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity))}.text-blue-800{--tw-text-opacity:1;color:rgb(30 64 175/var(--tw-text-opacity))}.text-danger{--tw-text-opacity:1;color:rgb(255 17 0/var(--tw-text-opacity))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.text-primary{--tw-text-opacity:1;color:rgb(0 122 194/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.opacity-25{opacity:.25}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-75{opacity:.75}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-lg,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}@font-face{font-display:swap;font-family:DB_OZONE_X;font-style:normal;font-weight:400;src:url(../fonts/db_ozone_x/DB_Ozone_X.woff) format(\"woff\"),url(../fonts/db_ozone_x/DB_Ozone_X.ttf) format(\"truetype\")}@font-face{font-display:swap;font-family:DB_OZONE_X;font-style:normal;font-weight:500;src:url(../fonts/db_ozone_x/DB_Ozone_X_Med.woff) format(\"woff\"),url(../fonts/db_ozone_x/DB_Ozone_X_Med.ttf) format(\"truetype\")}@font-face{font-display:swap;font-family:DB_OZONE_X;font-style:normal;font-weight:700;src:url(../fonts/db_ozone_x/DB_Ozone_X_Bd.woff) format(\"woff\"),url(../fonts/db_ozone_x/DB_Ozone_X_Bd.ttf) format(\"truetype\")}body{color:#393c3e;font-family:DB_OZONE_X,sans-serif!important;font-size:22px;font-weight:400;@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleIn{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}.animate-fadeIn{animation:fadeIn .3s ease-out}.animate-scaleIn{animation:scaleIn .3s ease-out}}.focus-within\\:border-2:focus-within{border-width:2px}.focus-within\\:border-primary:focus-within{--tw-border-opacity:1;border-color:rgb(0 122 194/var(--tw-border-opacity))}.hover\\:border-primary:hover{--tw-border-opacity:1;border-color:rgb(0 122 194/var(--tw-border-opacity))}.hover\\:bg-blue-600:hover{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity))}.hover\\:bg-danger:hover{--tw-bg-opacity:1;background-color:rgb(255 17 0/var(--tw-bg-opacity))}.hover\\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.hover\\:bg-gray-400:hover{--tw-bg-opacity:1;background-color:rgb(156 163 175/var(--tw-bg-opacity))}.hover\\:bg-primary:hover{--tw-bg-opacity:1;background-color:rgb(0 122 194/var(--tw-bg-opacity))}.hover\\:bg-primary\\/10:hover{background-color:rgba(0,122,194,.1)}.hover\\:text-blue-800:hover{--tw-text-opacity:1;color:rgb(30 64 175/var(--tw-text-opacity))}.hover\\:text-primary:hover{--tw-text-opacity:1;color:rgb(0 122 194/var(--tw-text-opacity))}.hover\\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.hover\\:underline:hover{text-decoration-line:underline}.focus\\:border-2:focus{border-width:2px}.focus\\:border-danger:focus{--tw-border-opacity:1;border-color:rgb(255 17 0/var(--tw-border-opacity))}.focus\\:border-primary:focus{--tw-border-opacity:1;border-color:rgb(0 122 194/var(--tw-border-opacity))}.focus\\:bg-gray-100:focus{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\\:ring-offset-2:focus{--tw-ring-offset-width:2px}.active\\:bg-danger:active{--tw-bg-opacity:1;background-color:rgb(255 17 0/var(--tw-bg-opacity))}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-50:disabled{opacity:.5}.group:hover .group-hover\\:border-primary{--tw-border-opacity:1;border-color:rgb(0 122 194/var(--tw-border-opacity))}.peer:focus-visible~.peer-focus-visible\\:ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.peer:focus-visible~.peer-focus-visible\\:ring-primary\\/60{--tw-ring-color:rgba(0,122,194,.6)}.peer:focus-visible~.peer-focus-visible\\:ring-offset-2{--tw-ring-offset-width:2px}";
 styleInject(css_248z);
 
 const Button = React.forwardRef(({ variant = 'primary', size = 'md', fullWidth = false, loading = false, disabled, className = '', children, type = 'button', onClick, }, ref) => {
@@ -90,7 +90,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
 };
 
 const Checkbox = React.forwardRef(function CheckboxItem(_a, ref) {
-    var { name, value, label, checked = false, disabled = false, onChange, className } = _a, props = __rest(_a, ["name", "value", "label", "checked", "disabled", "onChange", "className"]);
+    var { name, value, label, checked = false, disabled = false, onChange, className, register } = _a, props = __rest(_a, ["name", "value", "label", "checked", "disabled", "onChange", "className", "register"]);
     console.log("Checkbox rendering", { name, value, checked });
     console.log("Input classes applied:", "hidden");
     console.log("Span classes applied:", [
@@ -102,7 +102,7 @@ const Checkbox = React.forwardRef(function CheckboxItem(_a, ref) {
         disabled ? "" : "shadow-sm",
     ].join(" "));
     return (React.createElement("label", { className: `group inline-flex items-center gap-2 select-none ${disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer"}` },
-        React.createElement("input", Object.assign({ ref: ref, type: "checkbox", name: name, value: value, checked: checked, disabled: disabled, onChange: (e) => onChange(value, e.target.checked), className: "hidden", "aria-checked": checked }, props, { style: { display: 'none' } })),
+        React.createElement("input", Object.assign({ ref: ref, type: "checkbox", name: name, value: value, checked: checked, disabled: disabled, onChange: (e) => onChange(value, e.target.checked), className: "hidden", "aria-checked": checked }, register, props, { style: { display: 'none' } })),
         React.createElement("span", { className: [
                 "w-5 h-5 flex items-center justify-center rounded border transition-all ",
                 "peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-primary/60",
@@ -210,7 +210,7 @@ requireEn();
 
 dayjs.extend(localeData);
 dayjs.extend(buddhistEra);
-const Datepicker = React.forwardRef(({ value, defaultValue, onChange, format = 'DD/MM/YYYY', locale = 'th', yearType = 'BE', placeholder, disabled = false, className = '', size = 'md', fullWidth = false, error, helperText, label, required = false, }, ref) => {
+const DatePicker = React.forwardRef(({ value, defaultValue, onChange, format = 'DD/MM/YYYY', locale = 'th', yearType = 'BE', placeholder, disabled = false, className = '', size = 'md', fullWidth = false, error, helperText, label, required = false, register, }, ref) => {
     const [selectedDate, setSelectedDate] = React.useState(value || defaultValue || null);
     const [isOpen, setIsOpen] = React.useState(false);
     const [currentMonth, setCurrentMonth] = React.useState(dayjs().locale(locale));
@@ -273,21 +273,21 @@ const Datepicker = React.forwardRef(({ value, defaultValue, onChange, format = '
             const prevMonth = currentMonth.subtract(1, 'month');
             const day = prevMonth.daysInMonth() - firstDayOfMonth + i + 1;
             const date = prevMonth.date(day);
-            days.push(React.createElement("div", { key: `prev-${monthKey}-${i}`, className: "text-gray-400 px-2 text-center cursor-pointer hover:bg-gray-100 rounded-lg", onClick: () => handleDateSelect(date) }, day));
+            days.push(React.createElement("div", { key: `prev-${monthKey}-${i}`, className: "text-gray-400 flex items-center justify-center w-[34px] h-[34px] text-[18px] text-center cursor-pointer hover:bg-gray-100 rounded-[9999px]", onClick: () => handleDateSelect(date) }, day));
         }
         // Current month days
         for (let day = 1; day <= daysInMonth; day++) {
             const date = currentMonth.date(day);
             const isSelected = selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.isSame(date, 'day');
             const isToday = date.isSame(dayjs(), 'day');
-            days.push(React.createElement("div", { key: `current-${monthKey}-${day}`, className: `w-[24px] h-[24px] flex items-center justify-center text-[18px] text-center cursor-pointer hover:bg-primary hover:text-white rounded-lg  ${isSelected ? 'bg-primary text-white ' : ''} ${isToday ? 'text-primary font-bold' : ''}`, onClick: () => handleDateSelect(date) }, day));
+            days.push(React.createElement("div", { key: `current-${monthKey}-${day}`, className: `w-[34px] h-[34px] flex items-center justify-center text-[18px] text-center cursor-pointer hover:bg-primary hover:text-white rounded-[9999px]  ${isSelected ? 'bg-primary text-white ' : ''} ${isToday ? 'text-primary font-bold' : ''}`, onClick: () => handleDateSelect(date) }, day));
         }
         // Next month days
         const remainingCells = 42 - days.length; // 6 rows * 7 days
         for (let i = 1; i <= remainingCells; i++) {
             const nextMonth = currentMonth.add(1, 'month');
             const date = nextMonth.date(i);
-            days.push(React.createElement("div", { key: `next-${monthKey}-${i}`, className: "text-gray-400 px-2 text-center cursor-pointer  hover:bg-gray-100 rounded-lg", onClick: () => handleDateSelect(date) }, i));
+            days.push(React.createElement("div", { key: `next-${monthKey}-${i}`, className: "text-gray-400 flex items-center justify-center w-[34px] h-[34px] text-[18px] text-center cursor-pointer  hover:bg-gray-100 rounded-[9999px]", onClick: () => handleDateSelect(date) }, i));
         }
         return days;
     };
@@ -306,27 +306,26 @@ const Datepicker = React.forwardRef(({ value, defaultValue, onChange, format = '
             label,
             required && React.createElement("span", { className: "text-danger ml-1" }, "*"))),
         React.createElement("div", { className: "relative" },
-            React.createElement("input", { ref: ref, type: "text", value: formatDisplayValue(selectedDate), onChange: handleInputChange, onFocus: handleInputFocus, placeholder: placeholder, disabled: disabled, className: `${className} ${baseStyles} ${sizes[size]} ${stateStyles} ${widthClass}` }),
-            React.createElement("div", { style: { right: '16px' }, className: 'absolute top-1/2 transform -translate-y-1/2 w-8 h-8 flex items-center justify-center cursor-pointer text-gray-500 hover:text-primary', onClick: () => setIsOpen(true) },
+            React.createElement("input", Object.assign({ ref: ref, type: "text", value: formatDisplayValue(selectedDate), onChange: handleInputChange, onFocus: handleInputFocus, placeholder: placeholder, disabled: disabled }, register, { className: `${className} ${baseStyles} ${sizes[size]} ${stateStyles} ${widthClass}` })),
+            React.createElement("div", { style: { right: '8px' }, className: 'absolute top-1/2 transform -translate-y-1/2 w-8 h-8 flex items-center justify-center cursor-pointer text-gray-500 hover:text-primary', onClick: () => setIsOpen(true) },
                 React.createElement("svg", { stroke: "currentColor", fill: "currentColor", "stroke-width": "0", viewBox: "0 0 256 256", height: "20px", width: "20px", xmlns: "http://www.w3.org/2000/svg" },
                     React.createElement("path", { d: "M208,34H182V24a6,6,0,0,0-12,0V34H86V24a6,6,0,0,0-12,0V34H48A14,14,0,0,0,34,48V208a14,14,0,0,0,14,14H208a14,14,0,0,0,14-14V48A14,14,0,0,0,208,34ZM48,46H74V56a6,6,0,0,0,12,0V46h84V56a6,6,0,0,0,12,0V46h26a2,2,0,0,1,2,2V82H46V48A2,2,0,0,1,48,46ZM208,210H48a2,2,0,0,1-2-2V94H210V208A2,2,0,0,1,208,210Z" }))),
             isOpen && (React.createElement("div", { className: "absolute top-full left-0 mt-1 bg-white border border-[#CBD4D9] rounded-lg z-10 w-80" },
                 React.createElement("div", { className: "p-4" },
                     React.createElement("div", { className: "flex justify-between items-center mb-1" },
                         React.createElement("button", { type: "button", onClick: () => setCurrentMonth(prev => prev.subtract(1, 'month')), className: "p-1 hover:bg-gray-100 rounded" },
-                            React.createElement("svg", { stroke: "currentColor", fill: "none", "stroke-width": "1.5", viewBox: "0 0 24 24", "aria-hidden": "true", height: "1em", width: "1em", xmlns: "http://www.w3.org/2000/svg" },
+                            React.createElement("svg", { stroke: "#007AC2", fill: "none", "stroke-width": "1.5", viewBox: "0 0 24 24", "aria-hidden": "true", height: "1em", width: "1em", xmlns: "http://www.w3.org/2000/svg" },
                                 React.createElement("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M15.75 19.5 8.25 12l7.5-7.5" }))),
                         React.createElement("div", { className: "font-base text-primary" }, yearType === "BE" ? currentMonth.add(543, 'year').format('MMMM YYYY') : currentMonth.format('MMMM YYYY')),
                         React.createElement("button", { type: "button", onClick: () => setCurrentMonth(prev => prev.add(1, 'month')), className: "p-1 hover:bg-gray-100 rounded" },
-                            React.createElement("svg", { stroke: "currentColor", fill: "none", "stroke-width": "1.5", viewBox: "0 0 24 24", "aria-hidden": "true", height: "1em", width: "1em", xmlns: "http://www.w3.org/2000/svg" },
+                            React.createElement("svg", { stroke: "#007AC2", fill: "none", "stroke-width": "1.5", viewBox: "0 0 24 24", "aria-hidden": "true", height: "1em", width: "1em", xmlns: "http://www.w3.org/2000/svg" },
                                 React.createElement("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "m8.25 4.5 7.5 7.5-7.5 7.5" })))),
                     React.createElement("div", { className: "grid grid-cols-7 gap-1 mb-2" }, dayjs.localeData().weekdaysMin().map((day, index) => (React.createElement("div", { key: `${locale}-${day}-${index}`, className: `px-2 text-center  ${index === 0 ? 'text-danger' : 'text-gray-600'}` }, day)))),
-                    React.createElement("div", { className: "grid grid-cols-7 gap-1" }, renderCalendar()))))),
-        (error || helperText) && (React.createElement("p", { className: `mt-1 text-sm ${error ? 'text-danger' : 'text-gray-500'}` }, error || helperText))));
+                    React.createElement("div", { className: "grid grid-cols-7 gap-1" }, renderCalendar())))))));
 });
-Datepicker.displayName = 'Datepicker';
+DatePicker.displayName = 'DatePicker';
 
-const Input = React.forwardRef(({ label, error, helperText, size = 'md', fullWidth = false, disabled, className = '', leftIcon, rightIcon, type = 'text', placeholder, value, defaultValue, onChange, onBlur, onFocus, name, id, required, readOnly, autoComplete, autoFocus, }, ref) => {
+const Input = React.forwardRef(({ label, error, helperText, size = 'md', fullWidth = false, disabled, className = '', leftIcon, rightIcon, type = 'text', placeholder, value, defaultValue, onChange, onBlur, onFocus, name, id, required, readOnly, autoComplete, autoFocus, register, }, ref) => {
     const baseStyles = 'border h-[44px] text-[22px] rounded-lg focus:border-2 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed';
     const sizes = {
         sm: 'px-3 h-[40px] text-[22px]',
@@ -348,15 +347,46 @@ const Input = React.forwardRef(({ label, error, helperText, size = 'md', fullWid
             required && React.createElement("span", { className: "text-danger ml-1" }, "*"))),
         React.createElement("div", { className: "relative" },
             leftIcon && (React.createElement("div", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" }, leftIcon)),
-            React.createElement("input", { ref: ref, type: type, id: id, name: name, disabled: disabled, readOnly: readOnly, required: required, autoComplete: autoComplete, autoFocus: autoFocus, placeholder: placeholder, value: value, defaultValue: defaultValue, onChange: onChange, onBlur: onBlur, onFocus: onFocus, className: `${className} ${baseStyles} ${sizes[size]} ${iconPadding[size]} ${stateStyles} ${widthClass} ` }),
+            React.createElement("input", Object.assign({ ref: ref, type: type, id: id, name: name, disabled: disabled, readOnly: readOnly, required: required, autoComplete: autoComplete, autoFocus: autoFocus, placeholder: placeholder, value: value, defaultValue: defaultValue, onChange: onChange, onBlur: onBlur, onFocus: onFocus }, register, { className: `${className} ${baseStyles} ${sizes[size]} ${iconPadding[size]} ${stateStyles} ${widthClass} ` })),
             rightIcon && (React.createElement("div", { className: "absolute right-3 top-1/2 -translate-y-1/2 text-gray-400" }, rightIcon)))));
 });
 Input.displayName = 'Input';
 
+const Modal = ({ isOpen, onClose, children, className = '' }) => {
+    const modalRef = React.useRef(null);
+    React.useEffect(() => {
+        const handleEscape = (event) => {
+            if (event.key === 'Escape') {
+                onClose();
+            }
+        };
+        if (isOpen) {
+            document.addEventListener('keydown', handleEscape);
+            document.body.style.overflow = 'hidden';
+        }
+        else {
+            document.body.style.overflow = 'unset';
+        }
+        return () => {
+            document.removeEventListener('keydown', handleEscape);
+            document.body.style.overflow = 'unset';
+        };
+    }, [isOpen, onClose]);
+    const handleBackdropClick = (event) => {
+        if (event.target === event.currentTarget) {
+            onClose();
+        }
+    };
+    if (!isOpen)
+        return null;
+    return (React.createElement("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 animate-fadeIn", onClick: handleBackdropClick },
+        React.createElement("div", { ref: modalRef, className: `bg-white rounded-lg shadow-lg max-w-md w-full mx-4 animate-scaleIn text-center ${className}`, onClick: (e) => e.stopPropagation() }, children)));
+};
+
 const Radio = React.forwardRef(function RadioItem(_a, ref) {
-    var { name, value, label, checked = false, disabled = false, onChange, className } = _a, props = __rest(_a, ["name", "value", "label", "checked", "disabled", "onChange", "className"]);
+    var { name, value, label, checked = false, disabled = false, onChange, className, register } = _a, props = __rest(_a, ["name", "value", "label", "checked", "disabled", "onChange", "className", "register"]);
     return (React.createElement("label", { className: `group inline-flex items-center gap-2 select-none ${disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer"}` },
-        React.createElement("input", Object.assign({ ref: ref, type: "radio", name: name, value: value, checked: checked, disabled: disabled, onChange: (e) => onChange(value, e.target.checked), className: "hidden", "aria-checked": checked }, props, { style: { display: 'none' } })),
+        React.createElement("input", Object.assign({ ref: ref, type: "radio", name: name, value: value, checked: checked, disabled: disabled, onChange: (e) => onChange(value, e.target.checked), className: "hidden", "aria-checked": checked }, register, props, { style: { display: 'none' } })),
         React.createElement("span", { className: [
                 "w-5 h-5 flex items-center justify-center rounded-full border transition-all ",
                 "peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-primary/60",
@@ -369,7 +399,7 @@ const Radio = React.forwardRef(function RadioItem(_a, ref) {
 });
 Radio.displayName = "Radio";
 
-const Select = React.forwardRef(({ options, value, placeholder = 'Select an option', disabled = false, className = '', onChange, }, ref) => {
+const Select = React.forwardRef(({ options, value, placeholder = 'Select an option', disabled = false, className = '', onChange, register, }, ref) => {
     const [isOpen, setIsOpen] = React.useState(false);
     const [selectedValue, setSelectedValue] = React.useState(value || '');
     const selectRef = React.useRef(null);
@@ -394,7 +424,7 @@ const Select = React.forwardRef(({ options, value, placeholder = 'Select an opti
         };
     }, []);
     return (React.createElement("div", { ref: ref, className: `relative ${className}` },
-        React.createElement("button", { type: "button", onClick: () => !disabled && setIsOpen(!isOpen), disabled: disabled, className: `w-full px-4 h-[44px] text-left bg-white border border-gray-300 rounded-md focus:outline-none focus:border-2 focus:border-primary ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'} flex items-center justify-between` },
+        React.createElement("button", Object.assign({ type: "button", onClick: () => !disabled && setIsOpen(!isOpen), disabled: disabled, className: `w-full px-4 h-[44px] text-left bg-white border border-gray-300 rounded-md focus:outline-none focus:border-2 focus:border-primary ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'} flex items-center justify-between` }, register),
             React.createElement("div", { className: "flex items-center" },
                 (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.icon) && (React.createElement("span", { className: "mr-2" }, selectedOption.icon)),
                 React.createElement("span", { className: selectedOption ? 'text-gray-900' : 'text-gray-500' }, selectedOption ? selectedOption.label : placeholder)),
@@ -406,7 +436,7 @@ const Select = React.forwardRef(({ options, value, placeholder = 'Select an opti
 });
 Select.displayName = 'Select';
 
-const Autocomplete = React.forwardRef(({ options, value, placeholder = 'Search...', disabled = false, className = '', mode = 'single', onChange, filterOptions, }, ref) => {
+const Autocomplete = React.forwardRef(({ options, value, placeholder = 'Search...', disabled = false, className = '', mode = 'single', onChange, filterOptions, register, }, ref) => {
     const [isOpen, setIsOpen] = React.useState(false);
     const [inputValue, setInputValue] = React.useState('');
     const [selectedValues, setSelectedValues] = React.useState(Array.isArray(value) ? value : value ? [value] : []);
@@ -446,7 +476,6 @@ const Autocomplete = React.forwardRef(({ options, value, placeholder = 'Search..
     };
     const handleSelect = (option) => {
         setIsUserTyping(false);
-        console.log('option', option);
         if (mode === 'single') {
             const newValue = option.value;
             setSelectedValues([newValue]);
@@ -468,6 +497,13 @@ const Autocomplete = React.forwardRef(({ options, value, placeholder = 'Search..
         setSelectedValues(newSelectedValues);
         onChange === null || onChange === void 0 ? void 0 : onChange(newSelectedValues);
     };
+    const handleClear = () => {
+        setInputValue('');
+        setSelectedValues([]);
+        setIsOpen(false);
+        setIsUserTyping(false);
+        onChange === null || onChange === void 0 ? void 0 : onChange(mode === 'single' ? '' : []);
+    };
     const handleClickOutside = (event) => {
         if (containerRef.current && !containerRef.current.contains(event.target)) {
             setIsOpen(false);
@@ -482,26 +518,87 @@ const Autocomplete = React.forwardRef(({ options, value, placeholder = 'Search..
     }, []);
     const selectedOptions = options.filter(option => selectedValues.includes(option.value));
     return (React.createElement("div", { ref: ref, className: `relative ${className}` },
-        React.createElement("div", { ref: containerRef, className: `w-full min-h-[44px] bg-white border border-gray-300 rounded-lg focus-within:border-2 focus-within:border-primary ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-text'}` },
+        React.createElement("div", { ref: containerRef, className: `w-full min-h-[44px] bg-white border  border-gray-300 rounded-lg focus-within:border-2 focus-within:border-primary ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-text'}` },
             mode === 'multiple' && selectedOptions.length > 0 && (React.createElement("div", { className: "flex flex-wrap gap-1 p-2" }, selectedOptions.map(option => (React.createElement("span", { key: option.value, className: "inline-flex items-center px-2 text-sm bg-blue-100 text-blue-800 rounded-full" },
                 option.icon && React.createElement("span", { className: "mr-1" }, option.icon),
                 option.label,
                 React.createElement("button", { type: "button", onClick: () => handleRemoveTag(option.value), className: "ml-1 text-blue-600 hover:text-blue-800" }, "\u00D7")))))),
-            React.createElement("input", { ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, onFocus: () => setIsOpen(true), placeholder: mode === 'multiple' && selectedOptions.length > 0 ? '' : placeholder, disabled: disabled, className: `w-full px-4 text-left bg-transparent border-none outline-none focus:outline-none ${mode === 'multiple' && selectedOptions.length > 0 ? 'h-[44px] pt-2' : 'h-[44px]'}` })),
-        isOpen && filteredOptions.length > 0 && (React.createElement("div", { className: "absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-auto" }, filteredOptions.map((option) => (React.createElement("button", { key: option.value, type: "button", onMouseDown: (e) => {
+            React.createElement("input", Object.assign({ ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, onFocus: () => setIsOpen(true), placeholder: mode === 'multiple' && selectedOptions.length > 0 ? '' : placeholder, disabled: disabled }, register, { className: `w-full px-4 text-left cursor-pointer bg-transparent border-none outline-none focus:outline-none ${mode === 'multiple' && selectedOptions.length > 0 ? 'h-[44px] pt-2' : 'h-[44px]'}` })),
+            mode === "single" ? React.createElement(React.Fragment, null, (inputValue || selectedValues.length > 0) && (React.createElement("button", { type: "button", onClick: handleClear, className: "absolute w-[14px] h-[14px] right-8 top-4 text-gray-400 hover:bg-gray-400 bg-[#CBD4D9] rounded-full pl-[1px]" },
+                React.createElement("svg", { stroke: "#fff", fill: "none", "stroke-width": "2", viewBox: "0 0 24 24", "aria-hidden": "true", height: "12px", width: "12px", xmlns: "http://www.w3.org/2000/svg" },
+                    React.createElement("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M6 18L18 6M6 6l12 12" }))))) : React.createElement(React.Fragment, null),
+            React.createElement("div", { className: `absolute right-2 top-3 transitions duration-200 ${isOpen ? 'transform -rotate-180' : ''}` },
+                React.createElement("svg", { stroke: "#72797d", fill: "none", "stroke-width": "1.5", viewBox: "0 0 24 24", "aria-hidden": "true", height: "1em", width: "1em", xmlns: "http://www.w3.org/2000/svg" },
+                    React.createElement("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "m19.5 8.25-7.5 7.5-7.5-7.5" })))),
+        isOpen && filteredOptions.length > 0 && (React.createElement("div", { className: "absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-md max-h-60 overflow-y-auto pr-3" }, filteredOptions.map((option) => (React.createElement("button", { key: option.value, type: "button", onMouseDown: (e) => {
                 e.preventDefault();
                 handleSelect(option);
-            }, className: `w-full px-4 py-2 text-left hover:bg-gray-100 focus:outline-none focus:bg-gray-100 flex items-center ${selectedValues.includes(option.value) ? 'bg-blue-50 text-primary' : ''}` },
+            }, className: `w-full px-4 py-2 text-left focus:outline-none focus:bg-gray-100 flex items-center ${selectedValues.includes(option.value) ? '' : ''}` },
             option.icon && React.createElement("span", { className: "mr-2" }, option.icon),
-            option.label)))))));
+            option.label,
+            selectedValues.includes(option.value) && React.createElement("div", { className: 'absolute right-2' },
+                React.createElement("svg", { stroke: "currentColor", fill: "currentColor", "stroke-width": "0", viewBox: "0 0 256 256", height: "1em", width: "1em", xmlns: "http://www.w3.org/2000/svg" },
+                    React.createElement("path", { d: "M228.24,76.24l-128,128a6,6,0,0,1-8.48,0l-56-56a6,6,0,0,1,8.48-8.48L96,191.51,219.76,67.76a6,6,0,0,1,8.48,8.48Z" }))))))))));
 });
 Autocomplete.displayName = 'Autocomplete';
 
+// import React from 'react';
+// export interface BreadcrumbItem {
+//     label: string;
+//     href?: string;
+// }
+// export interface BreadcrumbProps {
+//     items: BreadcrumbItem[];
+//     separator?: string;
+//     className?: string;
+// }
+// export const Breadcrumb: React.FC<BreadcrumbProps> = ({
+//     items,
+//     separator = '/',
+//     className = '',
+// }) => {
+//     return (
+//         <nav aria-label="breadcrumb" className={`flex items-center space-x-2 text-sm ${className}`}>
+//             {items.map((item, index) => (
+//                 <React.Fragment key={index}>
+//                     {index > 0 && <span className="text-gray-400">{separator}</span>}
+//                     {item.href ? (
+//                         <a
+//                             href={item.href}
+//                             className="text-primary hover:text-primary-600 transition-colors"
+//                         >
+//                             {item.label}
+//                         </a>
+//                     ) : (
+//                         <span className="text-gray-600">{item.label}</span>
+//                     )}
+//                 </React.Fragment>
+//             ))}
+//         </nav>
+//     );
+// };
+const Breadcrumb = ({ items, textColor = '#6B7280', activeColor = '#3B82F6', separatorColor = '#9CA3AF', fontSize = '14px' }) => {
+    return (React.createElement("nav", { className: "flex items-center py-3 px-4 bg-white", style: { fontSize } }, items.map((item, index) => {
+        const isLast = index === items.length - 1;
+        return (React.createElement("div", { key: index, className: "flex items-center" },
+            item.href ? (React.createElement("a", { href: item.href, className: "hover:underline transition-colors duration-200", style: { color: textColor } }, item.label)) : (React.createElement("span", { style: {
+                    color: isLast ? activeColor : textColor,
+                    fontWeight: isLast ? '500' : '400'
+                } }, item.label)),
+            !isLast && (React.createElement("span", { className: ' mr-1' },
+                React.createElement("svg", { stroke: "currentColor", fill: "none", "stroke-width": "1.5", viewBox: "0 0 24 24", "aria-hidden": "true", height: "1em", width: "1em", xmlns: "http://www.w3.org/2000/svg" },
+                    React.createElement("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "m8.25 4.5 7.5 7.5-7.5 7.5" }))))));
+    })));
+};
+Breadcrumb.displayName = 'Breadcrumb';
+
 exports.Autocomplete = Autocomplete;
+exports.Breadcrumb = Breadcrumb;
 exports.Button = Button;
 exports.Checkbox = Checkbox;
-exports.Datepicker = Datepicker;
+exports.DatePicker = DatePicker;
 exports.Input = Input;
+exports.Modal = Modal;
 exports.Radio = Radio;
 exports.Select = Select;
 //# sourceMappingURL=index.js.map