adp-web-components 0.1.1 → 0.1.3

package/dist/collection/components/form-elements/form-inputs.css

@@ -1 +1 @@
-*,: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: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: ;border:0 solid #e5e7eb;box-sizing:border-box}::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: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/: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;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){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;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-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,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}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]:where(:not([hidden=until-found])){display:none}.pointer-events-none{pointer-events:none}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.bottom-0{bottom:0}.end-0{inset-inline-end:0}.left-0{left:0}.top-0{top:0}.z-\[10\]{z-index:10}.z-\[9999999999\]{z-index:9999999999}.float-right{float:right}.-mb-\[10px\]{margin-bottom:-10px}.-mt-\[8px\]{margin-top:-8px}.mb-\[4px\]{margin-bottom:4px}.ms-0\.5{margin-inline-start:.125rem}.mt-\[8px\]{margin-top:8px}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.\!size-\[22px\]{height:22px!important;width:22px!important}.size-5{height:1.25rem;width:1.25rem}.size-\[20px\]{height:20px;width:20px}.size-\[22px\]{height:22px;width:22px}.size-\[24px\]{height:24px;width:24px}.size-full{height:100%;width:100%}.h-\[100dvh\]{height:100dvh}.h-\[100px\]{height:100px}.h-\[200px\]{height:200px}.h-\[32px\]{height:32px}.h-\[38px\]{height:38px}.h-full{height:100%}.max-h-\[250px\]{max-height:250px}.min-h-\[100px\]{min-height:100px}.w-\[100dvw\]{width:100dvw}.w-\[36px\]{width:36px}.w-fit{width:fit-content}.w-full{width:100%}.min-w-\[322px\]{min-width:322px}.max-w-\[80dvw\]{max-width:80dvw}.flex-1{flex:1 1 0%}.-translate-y-full{--tw-translate-y:-100%}.-translate-y-full,.translate-y-\[38px\]{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))}.translate-y-\[38px\]{--tw-translate-y:38px}.rotate-180{--tw-rotate:180deg}.rotate-180,.rotate-45{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-45{--tw-rotate:45deg}.scale-100{--tw-scale-x:1;--tw-scale-y:1}.scale-100,.scale-50{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))}.scale-50{--tw-scale-x:.5;--tw-scale-y:.5}.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))}.resize-none{resize:none}.appearance-none{appearance:none}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-\[16px\]{gap:16px}.self-end{align-self:flex-end}.overflow-hidden{overflow:hidden}.rounded{border-radius:.25rem}.rounded-\[8px\]{border-radius:8px}.rounded-md{border-radius:.375rem}.border{border-width:1px}.\!border-red-500{--tw-border-opacity:1!important;border-color:rgb(239 68 68/var(--tw-border-opacity,1))!important}.border-\[\#f2aeb5\]{--tw-border-opacity:1;border-color:rgb(242 174 181/var(--tw-border-opacity,1))}.border-slate-300{--tw-border-opacity:1;border-color:rgb(203 213 225/var(--tw-border-opacity,1))}.bg-\[\#f7d7d8\]{--tw-bg-opacity:1;background-color:rgb(247 215 216/var(--tw-bg-opacity,1))}.bg-black\/50{background-color:rgba(0,0,0,.5)}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity,1))}.bg-slate-500{--tw-bg-opacity:1;background-color:rgb(100 116 139/var(--tw-bg-opacity,1))}.bg-slate-700{--tw-bg-opacity:1;background-color:rgb(51 65 85/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.p-\[20px\]{padding:20px}.px-2{padding-left:.5rem;padding-right:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.px-\[12px\]{padding-left:12px;padding-right:12px}.px-\[14px\]{padding-left:14px;padding-right:14px}.px-\[16px\]{padding-left:16px;padding-right:16px}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-\[16px\]{padding-bottom:16px;padding-top:16px}.py-\[6px\]{padding-bottom:6px;padding-top:6px}.py-\[8px\]{padding-bottom:8px;padding-top:8px}.pe-\[36px\]{padding-inline-end:36px}.pt-\[1px\]{padding-top:1px}.text-start{text-align:start}.text-\[12px\]{font-size:12px}.text-\[18px\]{font-size:18px}.text-\[20px\]{font-size:20px}.text-\[\#58151c\]{--tw-text-opacity:1;color:rgb(88 21 28/var(--tw-text-opacity,1))}.text-\[\#9CA3AF\]{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.\!opacity-100{opacity:1!important}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-40{opacity:.4}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.blur{--tw-blur:blur(8px);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)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;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-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.\!duration-1000{transition-duration:1s!important}.\!duration-300{transition-duration:.3s!important}.duration-300{transition-duration:.3s}:host{all:initial!important;display:block}.dialog-blur{backdrop-filter:blur(1.5px)!important}@keyframes spin{to{transform:rotate(1turn)}}.spin-slow{animation:spin 2s linear infinite}.error-message-container{--tw-translate-y:100%;bottom:0;overflow:hidden;padding-top:1px;position:absolute}.error-message,.error-message-container{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))}.error-message{--tw-translate-y:-100%;--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1));font-size:12px;opacity:0;transition-duration:.3s!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.display-error-message{--tw-translate-y:-0px;opacity:1!important;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))}.dialog-drop-container{align-items:center;display:flex;height:100dvh;justify-content:center;left:0;pointer-events:none;position:fixed;top:0;transition-duration:.3s!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);width:100dvw;z-index:9999999999}.opened-dialog-drop-container{background-color:rgba(0,0,0,.5);pointer-events:auto}.dialog-wrapper{--tw-scale-x:.5;--tw-scale-y:.5;--tw-bg-opacity:1;--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);background-color:rgb(255 255 255/var(--tw-bg-opacity,1));border-radius:.25rem;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);display:flex;flex-direction:column;gap:16px;max-width:80dvw;min-width:322px;opacity:0;padding:20px;transition-duration:.3s!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.dialog-wrapper,.opened-dialog-wrapper{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))}.opened-dialog-wrapper{--tw-scale-x:1;--tw-scale-y:1;opacity:1}.dialog-close-icon-button{--tw-rotate:45deg;align-self:flex-end;float:right;height:20px;margin-bottom:-10px;opacity:.4;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));transition-duration:.3s!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);width:20px}.dialog-close-icon-button:hover{opacity:1}.dialog-content{text-align:justify}.dialog-close-button{align-items:center;border-radius:.25rem;display:flex;height:32px;overflow:hidden;padding-left:14px;padding-right:14px;position:relative;transition-duration:.3s!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);width:fit-content}.dialog-wrapper .dialog-close-button{--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(100 116 139/var(--tw-bg-opacity,1));color:rgb(255 255 255/var(--tw-text-opacity,1))}.dialog-wrapper .dialog-close-button:hover{--tw-bg-opacity:1;background-color:rgb(148 163 184/var(--tw-bg-opacity,1))}.dialog-wrapper .dialog-close-button:active{--tw-bg-opacity:1;background-color:rgb(51 65 85/var(--tw-bg-opacity,1))}.dialog-wrapper .form-success-container{align-items:center;display:flex;flex-direction:column}.dialog-drop-container.error .dialog-close-button{--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity,1));color:rgb(255 255 255/var(--tw-text-opacity,1))}.dialog-drop-container.error .dialog-close-button:hover{--tw-bg-opacity:1;background-color:rgb(248 113 113/var(--tw-bg-opacity,1))}.dialog-drop-container.error .dialog-close-button:active{--tw-bg-opacity:1;background-color:rgb(185 28 28/var(--tw-bg-opacity,1))}.form-input-label-container{display:inline-flex;flex-direction:column;position:relative;width:100%}.form-input-label{margin-bottom:4px}.form-input-label-required-star{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1));margin-inline-start:.125rem}.form-input-container{position:relative}.form-input-label-container.disabled .form-input-container{opacity:.75}.form-input-prefix{align-items:center;display:flex;height:38px;justify-content:center;left:0;padding-left:.5rem;padding-right:.5rem;pointer-events:none;position:absolute;top:0}.form-input-prefix:where([dir=rtl],[dir=rtl] *){left:auto;right:0}.form-input-label-container.disabled *{pointer-events:none}.form-input-label-container.disabled .form-input-style{opacity:.5}.form-input-style{--tw-border-opacity:1;appearance:none;border-color:rgb(203 213 225/var(--tw-border-opacity,1));border-radius:.375rem;border-width:1px;flex:1 1 0%;outline:2px solid transparent;outline-offset:2px;padding:6px 12px;transition-duration:.3s!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);width:100%}.form-input-style:focus:enabled{--tw-border-opacity:1;--tw-shadow:0 0 0 0.2rem rgba(71,85,105,.25);--tw-shadow-colored:0 0 0 0.2rem var(--tw-shadow-color);border-color:rgb(71 85 105/var(--tw-border-opacity,1));box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.form-input-style:disabled{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.form-input-style::-webkit-inner-spin-button,.form-input-style::-webkit-outer-spin-button{appearance:none}.form-input-textarea-style{height:200px;padding:6px 12px;resize:none}.form-input-error-style{--tw-border-opacity:1!important;border-color:rgb(239 68 68/var(--tw-border-opacity,1))!important}.form-input-error-style:focus:enabled{--tw-shadow:0 0 0 0.2rem rgba(239,68,68,.25);--tw-shadow-colored:0 0 0 0.2rem var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.form-input-select{padding-inline-end:36px}.form-input-select[readonly]{cursor:pointer}.form-input-select-icon-container{align-items:center;display:flex;height:100%;inset-inline-end:0;justify-content:center;pointer-events:none;position:absolute;top:0;width:36px}.form-input-select-icon{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1));height:24px;pointer-events:auto;width:24px}.form-input-container.disabled .form-input-select-icon{pointer-events:none}.form-input-select-icon.cross{--tw-rotate:45deg;cursor:pointer;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))}.form-input-select-icon.cross:hover{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.form-input-select-icon.arrow{--tw-rotate:180deg;transition-duration:.3s!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.form-input-container.open .form-input-select-icon.arrow,.form-input-select-icon.arrow{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))}.form-input-container.open .form-input-select-icon.arrow{--tw-rotate:0deg}.form-select-container{--tw-bg-opacity:1;--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);background-color:rgb(255 255 255/var(--tw-bg-opacity,1));border-radius:.375rem;border-width:1px;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);display:flex;flex-direction:column;max-height:250px;opacity:0;overflow:auto;pointer-events:none;position:absolute;transition-duration:.3s!important;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);width:100%;z-index:10}.form-input-container.open .form-select-container{opacity:1;pointer-events:auto}.form-select-container.upwards{--tw-translate-y:-100%;margin-top:-8px}.form-select-container.downwards,.form-select-container.upwards{top:0;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))}.form-select-container.downwards{--tw-translate-y:38px;margin-top:8px}.form-select-option{display:flex;justify-content:space-between;padding:.5rem 1rem;text-align:start}.form-select-option:hover{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.form-select-option.selected{--tw-bg-opacity:1;background-color:rgb(226 232 240/var(--tw-bg-opacity,1))}.form-select-option-tick{height:1.25rem;opacity:0;transition-duration:.3s!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);width:1.25rem}.form-select-option.selected .form-select-option-tick{opacity:1}.form-select-empty-container{align-items:center;display:flex;height:100px;justify-content:center}.form-select-empty-container.error{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.form-select-spinner{animation:spin 2s linear infinite;height:22px!important;width:22px!important}.form-structure-error-container{align-items:center;display:flex;min-height:100px;padding-bottom:16px;padding-top:16px}.form-structure-error-content{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(247 215 216/var(--tw-bg-opacity,1));border-color:rgb(242 174 181/var(--tw-border-opacity,1));border-radius:8px;border-width:1px;color:rgb(88 21 28/var(--tw-text-opacity,1));font-size:20px;margin-left:auto;margin-right:auto;padding:8px 16px;width:fit-content}.form-submit{--tw-bg-opacity:1;--tw-text-opacity:1;align-items:center;background-color:rgb(51 65 85/var(--tw-bg-opacity,1));border-radius:.25rem;color:rgb(255 255 255/var(--tw-text-opacity,1));display:flex;height:38px;overflow:hidden;padding-left:1rem;padding-right:1rem;position:relative;transition-duration:.3s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.form-submit:hover:enabled{--tw-bg-opacity:1;background-color:rgb(71 85 105/var(--tw-bg-opacity,1))}.form-submit:active:enabled{--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity,1))}.form-submit.loading{--tw-bg-opacity:1;background-color:rgb(71 85 105/var(--tw-bg-opacity,1))}.form-submit-text-position{left:0;position:absolute;top:0;transition-duration:1s!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.form-submit-text-style{align-items:center;display:flex;font-size:18px;height:100%;justify-content:center;width:100%}.form-submit.loading .form-submit-text-position{--tw-translate-y:100%}.form-submit-loading-container,.form-submit.loading .form-submit-text-position{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))}.form-submit-loading-container{--tw-translate-y:-100%;align-items:center;display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;transition-duration:1s!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);width:100%}.form-submit.loading .form-submit-loading-container{--tw-translate-y:0px;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))}.form-submit-loading-icon{animation:spin 2s linear infinite;height:22px;width:22px}.hover\:bg-red-400:hover{--tw-bg-opacity:1;background-color:rgb(248 113 113/var(--tw-bg-opacity,1))}.hover\:bg-slate-400:hover{--tw-bg-opacity:1;background-color:rgb(148 163 184/var(--tw-bg-opacity,1))}.hover\:text-black:hover{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.enabled\:hover\:bg-slate-600:hover:enabled{--tw-bg-opacity:1;background-color:rgb(71 85 105/var(--tw-bg-opacity,1))}.enabled\:focus\:border-slate-600:focus:enabled{--tw-border-opacity:1;border-color:rgb(71 85 105/var(--tw-border-opacity,1))}.enabled\:focus\:shadow-\[0_0_0_0\.2rem_rgba\(239\2c 68\2c 68\2c 0\.25\)\]:focus:enabled{--tw-shadow:0 0 0 0.2rem rgba(239,68,68,.25);--tw-shadow-colored:0 0 0 0.2rem var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.enabled\:focus\:shadow-\[0_0_0_0\.2rem_rgba\(71\2c 85\2c 105\2c 0\.25\)\]:focus:enabled{--tw-shadow:0 0 0 0.2rem rgba(71,85,105,.25);--tw-shadow-colored:0 0 0 0.2rem var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.enabled\:active\:bg-slate-800:active:enabled{--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity,1))}.disabled\:bg-white:disabled{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.rtl\:left-auto:where([dir=rtl],[dir=rtl] *){left:auto}.\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button,.\[\&\:\:-webkit-outer-spin-button\]\:appearance-none::-webkit-outer-spin-button{appearance:none}.static{position:static}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.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)}.hidden{display:none}.size-\[70px\]{height:70px;width:70px}.stroke-green-700{stroke:#15803d}
+*,: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: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: ;border:0 solid #e5e7eb;box-sizing:border-box}::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: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/: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;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){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;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-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,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}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]:where(:not([hidden=until-found])){display:none}.pointer-events-none{pointer-events:none}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.bottom-0{bottom:0}.end-0{inset-inline-end:0}.left-0{left:0}.top-0{top:0}.z-\[10\]{z-index:10}.z-\[9999999999\]{z-index:9999999999}.float-right{float:right}.-mb-\[10px\]{margin-bottom:-10px}.-mt-\[8px\]{margin-top:-8px}.mb-\[4px\]{margin-bottom:4px}.ms-0\.5{margin-inline-start:.125rem}.mt-\[8px\]{margin-top:8px}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.\!size-\[22px\]{height:22px!important;width:22px!important}.size-5{height:1.25rem;width:1.25rem}.size-\[20px\]{height:20px;width:20px}.size-\[22px\]{height:22px;width:22px}.size-\[24px\]{height:24px;width:24px}.size-full{height:100%;width:100%}.h-\[100dvh\]{height:100dvh}.h-\[100px\]{height:100px}.h-\[200px\]{height:200px}.h-\[32px\]{height:32px}.h-\[38px\]{height:38px}.h-full{height:100%}.max-h-\[250px\]{max-height:250px}.min-h-\[100px\]{min-height:100px}.w-\[100dvw\]{width:100dvw}.w-\[36px\]{width:36px}.w-fit{width:fit-content}.w-full{width:100%}.min-w-\[322px\]{min-width:322px}.max-w-\[80dvw\]{max-width:80dvw}.flex-1{flex:1 1 0%}.-translate-y-full{--tw-translate-y:-100%}.-translate-y-full,.translate-y-\[38px\]{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))}.translate-y-\[38px\]{--tw-translate-y:38px}.rotate-180{--tw-rotate:180deg}.rotate-180,.rotate-45{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-45{--tw-rotate:45deg}.scale-100{--tw-scale-x:1;--tw-scale-y:1}.scale-100,.scale-50{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))}.scale-50{--tw-scale-x:.5;--tw-scale-y:.5}.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))}.resize-none{resize:none}.appearance-none{appearance:none}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-\[16px\]{gap:16px}.self-end{align-self:flex-end}.overflow-hidden{overflow:hidden}.rounded{border-radius:.25rem}.rounded-\[8px\]{border-radius:8px}.rounded-md{border-radius:.375rem}.border{border-width:1px}.\!border-red-500{--tw-border-opacity:1!important;border-color:rgb(239 68 68/var(--tw-border-opacity,1))!important}.border-\[\#f2aeb5\]{--tw-border-opacity:1;border-color:rgb(242 174 181/var(--tw-border-opacity,1))}.border-slate-300{--tw-border-opacity:1;border-color:rgb(203 213 225/var(--tw-border-opacity,1))}.bg-\[\#f7d7d8\]{--tw-bg-opacity:1;background-color:rgb(247 215 216/var(--tw-bg-opacity,1))}.bg-black\/50{background-color:rgba(0,0,0,.5)}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity,1))}.bg-slate-500{--tw-bg-opacity:1;background-color:rgb(100 116 139/var(--tw-bg-opacity,1))}.bg-slate-700{--tw-bg-opacity:1;background-color:rgb(51 65 85/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.p-\[20px\]{padding:20px}.px-2{padding-left:.5rem;padding-right:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.px-\[12px\]{padding-left:12px;padding-right:12px}.px-\[14px\]{padding-left:14px;padding-right:14px}.px-\[16px\]{padding-left:16px;padding-right:16px}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-\[16px\]{padding-bottom:16px;padding-top:16px}.py-\[6px\]{padding-bottom:6px;padding-top:6px}.py-\[8px\]{padding-bottom:8px;padding-top:8px}.pe-\[36px\]{padding-inline-end:36px}.pt-\[1px\]{padding-top:1px}.text-start{text-align:start}.text-\[12px\]{font-size:12px}.text-\[18px\]{font-size:18px}.text-\[20px\]{font-size:20px}.text-\[\#58151c\]{--tw-text-opacity:1;color:rgb(88 21 28/var(--tw-text-opacity,1))}.text-\[\#9CA3AF\]{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.\!opacity-100{opacity:1!important}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-40{opacity:.4}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.blur{--tw-blur:blur(8px);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)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;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-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.\!duration-1000{transition-duration:1s!important}.\!duration-300{transition-duration:.3s!important}.duration-300{transition-duration:.3s}:host{all:initial!important;display:block}.dialog-blur{backdrop-filter:blur(1.5px)!important}@keyframes spin{to{transform:rotate(1turn)}}.spin-slow{animation:spin 2s linear infinite}.error-message-container{--tw-translate-y:100%;bottom:0;overflow:hidden;padding-top:1px;position:absolute}.error-message,.error-message-container{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))}.error-message{--tw-translate-y:-100%;--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1));font-size:12px;opacity:0;transition-duration:.3s!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.display-error-message{--tw-translate-y:-0px;opacity:1!important;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))}.dialog-drop-container{align-items:center;display:flex;height:100dvh;justify-content:center;left:0;pointer-events:none;position:fixed;top:0;transition-duration:.3s!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);width:100dvw;z-index:9999999999}.opened-dialog-drop-container{background-color:rgba(0,0,0,.5);pointer-events:auto}.dialog-wrapper{--tw-scale-x:.5;--tw-scale-y:.5;--tw-bg-opacity:1;--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);background-color:rgb(255 255 255/var(--tw-bg-opacity,1));border-radius:.25rem;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);display:flex;flex-direction:column;gap:16px;max-width:80dvw;min-width:322px;opacity:0;padding:20px;transition-duration:.3s!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.dialog-wrapper,.opened-dialog-wrapper{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))}.opened-dialog-wrapper{--tw-scale-x:1;--tw-scale-y:1;opacity:1}.dialog-close-icon-button{--tw-rotate:45deg;align-self:flex-end;float:right;height:20px;margin-bottom:-10px;opacity:.4;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));transition-duration:.3s!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);width:20px}.dialog-close-icon-button:hover{opacity:1}.dialog-content{text-align:justify}.dialog-close-button{align-items:center;border-radius:.25rem;display:flex;height:32px;overflow:hidden;padding-left:14px;padding-right:14px;position:relative;transition-duration:.3s!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);width:fit-content}.dialog-wrapper .dialog-close-button{--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(100 116 139/var(--tw-bg-opacity,1));color:rgb(255 255 255/var(--tw-text-opacity,1))}.dialog-wrapper .dialog-close-button:hover{--tw-bg-opacity:1;background-color:rgb(148 163 184/var(--tw-bg-opacity,1))}.dialog-wrapper .dialog-close-button:active{--tw-bg-opacity:1;background-color:rgb(51 65 85/var(--tw-bg-opacity,1))}.dialog-wrapper .form-success-container{align-items:center;display:flex;flex-direction:column}.dialog-drop-container.error .dialog-close-button{--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity,1));color:rgb(255 255 255/var(--tw-text-opacity,1))}.dialog-drop-container.error .dialog-close-button:hover{--tw-bg-opacity:1;background-color:rgb(248 113 113/var(--tw-bg-opacity,1))}.dialog-drop-container.error .dialog-close-button:active{--tw-bg-opacity:1;background-color:rgb(185 28 28/var(--tw-bg-opacity,1))}.form-input-label-container{display:inline-flex;flex-direction:column;position:relative;width:100%}.form-input-label{margin-bottom:4px}.form-input-label-required-star{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1));margin-inline-start:.125rem}.form-input-container{position:relative}.form-input-label-container.disabled .form-input-container{opacity:.75}.form-input-prefix{align-items:center;display:flex;height:38px;justify-content:center;left:0;padding-left:.5rem;padding-right:.5rem;pointer-events:none;position:absolute;top:0}.form-input-prefix:where([dir=rtl],[dir=rtl] *){left:auto;right:0}.form-input-label-container.disabled *{pointer-events:none}.form-input-label-container.disabled .form-input-style{opacity:.5}.form-input-style{--tw-border-opacity:1;appearance:none;border-color:rgb(203 213 225/var(--tw-border-opacity,1));border-radius:.375rem;border-width:1px;flex:1 1 0%;outline:2px solid transparent;outline-offset:2px;padding:6px 12px;transition-duration:.3s!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);width:100%}.form-input-style:focus:enabled{--tw-border-opacity:1;--tw-shadow:0 0 0 0.2rem rgba(71,85,105,.25);--tw-shadow-colored:0 0 0 0.2rem var(--tw-shadow-color);border-color:rgb(71 85 105/var(--tw-border-opacity,1));box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.form-input-style:disabled{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.form-input-style::-webkit-inner-spin-button,.form-input-style::-webkit-outer-spin-button{appearance:none}.form-input-textarea-style{height:200px;padding:6px 12px;resize:none}.form-input-error-style{--tw-border-opacity:1!important;border-color:rgb(239 68 68/var(--tw-border-opacity,1))!important}.form-input-error-style:focus:enabled{--tw-shadow:0 0 0 0.2rem rgba(239,68,68,.25);--tw-shadow-colored:0 0 0 0.2rem var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.form-input-select{padding-inline-end:36px}.form-input-select[readonly]{cursor:pointer}.form-input-select-icon-container{align-items:center;display:flex;height:100%;inset-inline-end:0;justify-content:center;pointer-events:none;position:absolute;top:0;width:36px}.form-input-select-icon{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1));height:24px;pointer-events:auto;width:24px}.form-input-container.disabled .form-input-select-icon{pointer-events:none}.form-input-select-icon.cross{--tw-rotate:45deg;cursor:pointer;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))}.form-input-select-icon.cross:hover{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.form-input-select-icon.arrow{--tw-rotate:180deg;transition-duration:.3s!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.form-input-container.open .form-input-select-icon.arrow,.form-input-select-icon.arrow{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))}.form-input-container.open .form-input-select-icon.arrow{--tw-rotate:0deg}.form-select-container{--tw-bg-opacity:1;--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);background-color:rgb(255 255 255/var(--tw-bg-opacity,1));border-radius:.375rem;border-width:1px;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);display:flex;flex-direction:column;max-height:250px;opacity:0;overflow:auto;pointer-events:none;position:absolute;transition-duration:.3s!important;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);width:100%;z-index:10}.form-input-container.open .form-select-container{opacity:1;pointer-events:auto}.form-select-container.upwards{--tw-translate-y:-100%;margin-top:-8px}.form-select-container.downwards,.form-select-container.upwards{top:0;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))}.form-select-container.downwards{--tw-translate-y:38px;margin-top:8px}.form-select-option{display:flex;justify-content:space-between;padding:.5rem 1rem;text-align:start}.form-select-option:hover{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.form-select-option.selected{--tw-bg-opacity:1;background-color:rgb(226 232 240/var(--tw-bg-opacity,1))}.form-select-option-tick{height:1.25rem;opacity:0;transition-duration:.3s!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);width:1.25rem}.form-select-option.selected .form-select-option-tick{opacity:1}.form-select-empty-container{align-items:center;display:flex;height:100px;justify-content:center}.form-select-empty-container.error{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.form-select-spinner{animation:spin 2s linear infinite;height:22px!important;width:22px!important}.form-structure-error-container{align-items:center;display:flex;min-height:100px;padding-bottom:16px;padding-top:16px}.form-structure-error-content{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(247 215 216/var(--tw-bg-opacity,1));border-color:rgb(242 174 181/var(--tw-border-opacity,1));border-radius:8px;border-width:1px;color:rgb(88 21 28/var(--tw-text-opacity,1));font-size:20px;margin-left:auto;margin-right:auto;padding:8px 16px;width:fit-content}.form-submit{--tw-bg-opacity:1;--tw-text-opacity:1;align-items:center;background-color:rgb(51 65 85/var(--tw-bg-opacity,1));border-radius:.25rem;color:rgb(255 255 255/var(--tw-text-opacity,1));display:flex;height:38px;overflow:hidden;padding-left:1rem;padding-right:1rem;position:relative;transition-duration:.3s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.form-submit:hover:enabled{--tw-bg-opacity:1;background-color:rgb(71 85 105/var(--tw-bg-opacity,1))}.form-submit:active:enabled{--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity,1))}.form-submit.loading{--tw-bg-opacity:1;background-color:rgb(71 85 105/var(--tw-bg-opacity,1))}.form-submit-text-position{left:0;position:absolute;top:0;transition-duration:1s!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.form-submit-text-style{align-items:center;display:flex;font-size:18px;height:100%;justify-content:center;width:100%}.form-submit.loading .form-submit-text-position{--tw-translate-y:100%}.form-submit-loading-container,.form-submit.loading .form-submit-text-position{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))}.form-submit-loading-container{--tw-translate-y:-100%;align-items:center;display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;transition-duration:1s!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);width:100%}.form-submit.loading .form-submit-loading-container{--tw-translate-y:0px;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))}.form-submit-loading-icon{animation:spin 2s linear infinite;height:22px;width:22px}.hover\:bg-red-400:hover{--tw-bg-opacity:1;background-color:rgb(248 113 113/var(--tw-bg-opacity,1))}.hover\:bg-slate-400:hover{--tw-bg-opacity:1;background-color:rgb(148 163 184/var(--tw-bg-opacity,1))}.hover\:text-black:hover{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.enabled\:hover\:bg-slate-600:hover:enabled{--tw-bg-opacity:1;background-color:rgb(71 85 105/var(--tw-bg-opacity,1))}.enabled\:focus\:border-slate-600:focus:enabled{--tw-border-opacity:1;border-color:rgb(71 85 105/var(--tw-border-opacity,1))}.enabled\:focus\:shadow-\[0_0_0_0\.2rem_rgba\(239\2c 68\2c 68\2c 0\.25\)\]:focus:enabled{--tw-shadow:0 0 0 0.2rem rgba(239,68,68,.25);--tw-shadow-colored:0 0 0 0.2rem var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.enabled\:focus\:shadow-\[0_0_0_0\.2rem_rgba\(71\2c 85\2c 105\2c 0\.25\)\]:focus:enabled{--tw-shadow:0 0 0 0.2rem rgba(71,85,105,.25);--tw-shadow-colored:0 0 0 0.2rem var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.enabled\:active\:bg-slate-800:active:enabled{--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity,1))}.disabled\:bg-white:disabled{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.rtl\:left-auto:where([dir=rtl],[dir=rtl] *){left:auto}.\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button,.\[\&\:\:-webkit-outer-spin-button\]\:appearance-none::-webkit-outer-spin-button{appearance:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.static{position:static}.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)}.hidden{display:none}.size-\[70px\]{height:70px;width:70px}.stroke-green-700{stroke:#15803d}

package/dist/collection/components/form-elements/form-select.js

@@ -2,7 +2,7 @@
  * Built by ShiftSoftware
  * Copyright (c)
  */
-import { Host, h } from "@stencil/core";
+import { Host, forceUpdate, h } from "@stencil/core";
 import cn from "../../global/lib/cn";
 import { getNestedValue } from "../../global/lib/get-nested-value";
 import Loader from "~assets/loader.svg";
@@ -13,9 +13,9 @@ import { FormErrorMessage } from "./components/form-error-message";
 import { AddIcon } from "../../global/assets/add-icon";
 export class FormSelect {
     constructor() {
-        this.clearable = false;
         this.language = 'en';
         this.forceOpenUpwards = false;
+        this.clearable = false;
         this.searchValue = '';
         this.isOpen = false;
         this.selectedValue = '';
@@ -62,6 +62,10 @@ export class FormSelect {
     }
     async componentWillLoad() {
         this.form.subscribe(this.name, this);
+        if (this.staticValue) {
+            this.defaultValue = this.staticValue.value;
+            this.clearable = false;
+        }
         this.selectedValue = this.defaultValue;
     }
     async disconnectedCallback() {
@@ -100,8 +104,20 @@ export class FormSelect {
             this.isFetching = true;
             if (this.abortController)
                 this.abortController.abort();
-            this.abortController = new AbortController();
-            const options = await this.fetcher({ language: this.language, signal: this.abortController.signal, locale: this.form.getFormLocale()[0] });
+            let options;
+            if (!!this.staticValue) {
+                const localizedStaticValue = this.staticValue[this.language];
+                if (localizedStaticValue && (localizedStaticValue === null || localizedStaticValue === void 0 ? void 0 : localizedStaticValue.value) && (localizedStaticValue === null || localizedStaticValue === void 0 ? void 0 : localizedStaticValue.label))
+                    options = [localizedStaticValue];
+                else
+                    options = [this.staticValue];
+            }
+            else {
+                this.abortController = new AbortController();
+                options = await this.fetcher({ language: this.language, signal: this.abortController.signal, locale: this.form.getFormLocale()[0] });
+            }
+            forceUpdate(this.form.formStructure);
+            this.form.context[this.name + 'List'] = options;
             this.fetchingErrorMessage = null;
             this.options = options;
             if (this.defaultValue) {
@@ -137,17 +153,19 @@ export class FormSelect {
             this.selectedValue = '';
         }
         const filteredOptions = selectedItem ? this.options : this.options.filter(option => option.label.toLowerCase().includes(this.searchValue.toLowerCase()));
-        const disableInput = disabled || this.isDisabled || this.isLoading;
-        return (h(Host, { key: 'e7e0033e89dad1b882861e33a334c4c8eb391543' }, h("label", { key: '37d4aed8cfe4f306c30bfe99199c31f34a23720d', part: `${this.name}`, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, { disabled: disableInput }) }, h(FormInputLabel, { key: '76074e05adebaa8a17a2b41c9c09648adc3eb618', name: this.name, isRequired: isRequired || this.isRequired, label: label }), h("form-shadow-input", { key: 'd96e7b5ac1227a0bee96c39941ad395dc92ffd05', name: this.name, form: this.form, value: this.selectedValue }), h("div", { key: '49f94ac819be5a6a8a711487253dd4e8541c8422', part: `${this.name}-container form-input-container`, class: cn('form-input-container', { open: this.isOpen, disableInput }) }, h("input", { key: '3908c0c4c9b123b102dc7f6459a4d7235215f339', type: "text", disabled: disableInput, part: `${this.name}-input-select form-input-select`, value: this.searchable ? this.searchValue : (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.label) || '', readOnly: !this.searchable, onInput: this.onSearchInput, onClick: this.toggleDropdown, placeholder: placeholder || (meta === null || meta === void 0 ? void 0 : meta.placeholder), class: cn('form-input-style form-input-select', {
+        const disableInput = disabled || this.isDisabled || this.isLoading || !!this.staticValue;
+        if (this.isHidden)
+            return (h(Host, { style: { display: this.isHidden ? 'none' : 'block' } }, h("form-shadow-input", { name: this.name, form: this.form, value: this.selectedValue })));
+        return (h(Host, null, h("label", { part: `${this.name}`, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, { disabled: disableInput }) }, h(FormInputLabel, { name: this.name, isRequired: isRequired || this.isRequired, label: label }), h("form-shadow-input", { name: this.name, form: this.form, value: this.selectedValue }), h("div", { part: `${this.name}-container form-input-container`, class: cn('form-input-container', { open: this.isOpen, disableInput }) }, h("input", { type: "text", disabled: disableInput, part: `${this.name}-input-select form-input-select`, value: this.searchable ? this.searchValue : (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.label) || '', readOnly: !this.searchable, onInput: this.onSearchInput, onClick: this.toggleDropdown, placeholder: placeholder || (meta === null || meta === void 0 ? void 0 : meta.placeholder), class: cn('form-input-style form-input-select', {
                 'form-input-error-style': isError,
-            }) }), h("div", { key: '5f0cebe287f1562c5f5280b10672585d59a67d28', part: `${this.name}-select-icon-container form-input-select-icon-container`, class: "form-input-select-icon-container" }, (selectedItem || this.searchValue) && this.clearable ? (h(AddIcon, { part: `${this.name}-cross-icon`, onClick: this.clearInput, class: "form-input-select-icon cross" })) : (h(ArrowUpIcon, { part: `${this.name}-arrow-icon`, class: "form-input-select-icon arrow" }))), h("div", { key: '78427fdca190908005cedb16442df52617331bad', part: `${this.name}-select-container form-select-container`, class: cn('form-select-container', {
+            }) }), h("div", { part: `${this.name}-select-icon-container form-input-select-icon-container`, class: "form-input-select-icon-container" }, (selectedItem || this.searchValue) && this.clearable ? (h(AddIcon, { part: `${this.name}-cross-icon`, onClick: this.clearInput, class: "form-input-select-icon cross" })) : (h(ArrowUpIcon, { part: `${this.name}-arrow-icon`, class: "form-input-select-icon arrow" }))), h("div", { part: `${this.name}-select-container form-select-container`, class: cn('form-select-container', {
                 upwards: this.openUpwards || this.forceOpenUpwards,
                 downwards: !this.openUpwards && !this.forceOpenUpwards,
             }) }, !!filteredOptions.length &&
             filteredOptions.map(option => (h("button", { type: "button", part: `${this.name}-select-option form-select-option`, onClick: () => this.handleSelection(option), class: cn('form-select-option', {
                     selected: this.selectedValue === option.value,
-                }) }, h("div", { part: `${this.name}-select-option-label form-select-option-label`, class: "form-select-option-label" }, option.label), h(TickIcon, { part: `${this.name}-tick-icon`, class: "form-select-option-tick" })))), !filteredOptions.length && (h("div", { key: '782362fa5938c53a12d5ac543a2dee71b4ee21c1', part: `${this.name}-select-empty-container form-select-empty-container`, class: cn('form-select-empty-container', { error: this.fetchingErrorMessage }) }, this.fetchingErrorMessage && (getNestedValue(locale, this.fetchingErrorMessage) || this.fetchingErrorMessage || ((_b = (_a = locale === null || locale === void 0 ? void 0 : locale.sharedFormLocales) === null || _a === void 0 ? void 0 : _a.errors) === null || _b === void 0 ? void 0 : _b.wildCard)), !this.fetchingErrorMessage &&
-            (this.isFetching ? (h("img", { part: `${this.name}-select-spinner form-select-spinner`, class: "form-select-spinner", src: Loader })) : ((_c = locale === null || locale === void 0 ? void 0 : locale.sharedFormLocales) === null || _c === void 0 ? void 0 : _c.noSelectOptions)))))), h(FormErrorMessage, { key: '5c0edda67e88553ebd24f847dbee37e27ea0f1ed', name: this.name, isError: isError, errorMessage: locale[errorMessage] || errorMessage }))));
+                }) }, h("div", { part: `${this.name}-select-option-label form-select-option-label`, class: "form-select-option-label" }, option.label), h(TickIcon, { part: `${this.name}-tick-icon`, class: "form-select-option-tick" })))), !filteredOptions.length && (h("div", { part: `${this.name}-select-empty-container form-select-empty-container`, class: cn('form-select-empty-container', { error: this.fetchingErrorMessage }) }, this.fetchingErrorMessage && (getNestedValue(locale, this.fetchingErrorMessage) || this.fetchingErrorMessage || ((_b = (_a = locale === null || locale === void 0 ? void 0 : locale.sharedFormLocales) === null || _a === void 0 ? void 0 : _a.errors) === null || _b === void 0 ? void 0 : _b.wildCard)), !this.fetchingErrorMessage &&
+            (this.isFetching ? (h("img", { part: `${this.name}-select-spinner form-select-spinner`, class: "form-select-spinner", src: Loader })) : ((_c = locale === null || locale === void 0 ? void 0 : locale.sharedFormLocales) === null || _c === void 0 ? void 0 : _c.noSelectOptions)))))), h(FormErrorMessage, { name: this.name, isError: isError, errorMessage: locale[errorMessage] || errorMessage }))));
     }
     static get is() { return "form-select"; }
     static get originalStyleUrls() {
@@ -238,9 +256,9 @@ export class FormSelect {
                 "setter": false,
                 "reflect": false
             },
-            "clearable": {
+            "isHidden": {
                 "type": "boolean",
-                "attribute": "clearable",
+                "attribute": "is-hidden",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -255,8 +273,7 @@ export class FormSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "defaultValue": "false"
+                "reflect": false
             },
             "isLoading": {
                 "type": "boolean",
@@ -377,24 +394,29 @@ export class FormSelect {
                 "setter": false,
                 "reflect": false
             },
-            "defaultValue": {
-                "type": "string",
-                "attribute": "default-value",
+            "staticValue": {
+                "type": "unknown",
+                "attribute": "static-value",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "FormSelectItem",
+                    "resolved": "{ value: string; label: string; meta?: Record<string, string>; }",
+                    "references": {
+                        "FormSelectItem": {
+                            "location": "import",
+                            "path": "~features/form-hook/",
+                            "id": "src/features/form-hook/index.ts::FormSelectItem"
+                        }
+                    }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
                 "getter": false,
-                "setter": false,
-                "reflect": false
+                "setter": false
             },
             "language": {
                 "type": "string",
@@ -465,6 +487,45 @@ export class FormSelect {
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "clearable": {
+                "type": "boolean",
+                "attribute": "clearable",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "defaultValue": {
+                "type": "string",
+                "attribute": "default-value",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
             }
         };
     }

package/dist/collection/components/form-elements/form-shadow-input.js

@@ -13,7 +13,7 @@ export class FormInput {
         this.form.validateForm(this.name, newValue);
     }
     render() {
-        return h("input", { key: '86f6a688de8392aade82e02d0a07b4170e5cc8e1', hidden: true, name: this.name, type: "string", value: this.value });
+        return h("input", { key: '7a84f6be06d6eda722d643aa203d09c439bb9cdb', hidden: true, name: this.name, type: "string", value: this.value });
     }
     static get is() { return "form-shadow-input"; }
     static get originalStyleUrls() {

package/dist/collection/components/form-elements/form-structure-error.js

@@ -16,7 +16,7 @@ export class FormStructureError {
         this.sharedLocales = await getSharedLocal(newLanguage);
     }
     render() {
-        return (h(Host, { key: '4e236b9d36994d09687a147bb7540b3a3c19f700' }, h("div", { key: 'f440dc65ac3682c4671cac988c64514431b3a136', dir: this.sharedLocales.direction, part: "form-structure-error-container", class: "form-structure-error-container" }, h("div", { key: '0c13f2c43b4bb5583024f5e6b1077a6051d64e57', part: "form-structure-error-content", class: "form-structure-error-content" }, this.sharedLocales.errors.wrongFormStructure))));
+        return (h(Host, { key: 'ab5042611718fa3e45610722a37c3f900606eff7' }, h("div", { key: 'bd98e0f8e88ee0cb79ffcf53d9ce5c4f62df5dc1', dir: this.sharedLocales.direction, part: "form-structure-error-container", class: "form-structure-error-container" }, h("div", { key: 'fe632575743b19a9846ee8395193336429aab546', part: "form-structure-error-content", class: "form-structure-error-content" }, this.sharedLocales.errors.wrongFormStructure))));
     }
     static get is() { return "form-structure-error"; }
     static get originalStyleUrls() {

package/dist/collection/components/form-elements/form-structure.js

@@ -21,6 +21,13 @@ export class FormStructure {
         const [sharedLocales, locale] = await Promise.all([getSharedLocal(newLanguage), getLocaleLanguage(newLanguage, 'general', generalSchema)]);
         this.locale = Object.assign({ sharedLocales }, locale);
     }
+    async componentDidLoad() {
+        setTimeout(() => {
+            var _a;
+            if (typeof ((_a = this.form.context) === null || _a === void 0 ? void 0 : _a.structureRendered) === 'boolean')
+                this.form.context.structureRendered = true;
+        }, 300);
+    }
     render() {
         var _a;
         const [locale] = this.form.getFormLocale();
@@ -182,7 +189,7 @@ export class FormStructure {
                 "mutable": false,
                 "complexType": {
                     "original": "FormElementStructure<any>",
-                    "resolved": "{ data?: Record<string, any>; } & { id?: string; class?: string; children?: any[]; } & { tag: string; name?: any; } | { data?: Record<string, any>; } & { id?: string; class?: string; children?: any[]; } & { tag?: string; name: any; }",
+                    "resolved": "{ data?: Record<string, any>; } & { id?: string; class?: string; staticValue?: any; isHidden?: boolean; isDisabled?: boolean; children?: any[]; } & { tag: string; name?: any; } | { data?: Record<string, any>; } & { id?: string; class?: string; staticValue?: any; isHidden?: boolean; isDisabled?: boolean; children?: any[]; } & { tag?: string; name: any; }",
                     "references": {
                         "FormElementStructure": {
                             "location": "import",

package/dist/collection/components/form-elements/form-submit.js

@@ -21,9 +21,9 @@ export class FormSubmit {
     render() {
         const [locale] = this.form.getFormLocale();
         const submitText = getNestedValue(locale, this.submitTextKey) || getNestedValue(locale, 'sharedFormLocales.submit') || 'Submit';
-        return (h("button", { key: '6d4c69d1071ac28243a3ce18efc77082552ea89b', type: "submit", formnovalidate: true, part: buttonSubscriberKey, disabled: this.isLoading, class: cn('form-submit', {
+        return (h("button", { key: '73d566b9c8b84a646004ab0593ddd355f7cfd59d', type: "submit", formnovalidate: true, part: buttonSubscriberKey, disabled: this.isLoading, class: cn('form-submit', {
                 loading: this.isLoading,
-            }) }, h("div", { key: '64b36d7fa5d234c23c2bd8c78211e35a4bb3f8fa', part: "form-submit-text", class: "opacity-0 form-submit-text-style" }, submitText), h("div", { key: 'ac7e62c5262c3ca19014c3b392ae397901bbab04', part: "form-submit-text", class: "form-submit-text-style form-submit-text-position" }, submitText), h("div", { key: '7e883cdf09a449dd125c9a21dd1026744944242b', part: "form-submit-loading-container", class: "form-submit-loading-container" }, h("img", { key: '9bd2324cf0b857928fd4dc14e5878a4c0a023a31', part: "form-submit-loading-icon", class: "form-submit-loading-icon", src: Loader }))));
+            }) }, h("div", { key: 'd3628bb8d50562e948b55fa4db01b090ba3319ab', part: "form-submit-text", class: "opacity-0 form-submit-text-style" }, submitText), h("div", { key: '4e15ab333183868c572afedfe77e182288a5d3f6', part: "form-submit-text", class: "form-submit-text-style form-submit-text-position" }, submitText), h("div", { key: 'cd6421d2a6f07a11247e9082a75171b5ff35331b', part: "form-submit-loading-container", class: "form-submit-loading-container" }, h("img", { key: 'fc1692f9e4df784db2179788a5537e55f45a37fc', part: "form-submit-loading-icon", class: "form-submit-loading-icon", src: Loader }))));
     }
     static get is() { return "form-submit"; }
     static get originalStyleUrls() {

package/dist/collection/components/form-elements/form-switch.js

@@ -28,7 +28,7 @@ export class FormSwitch {
         const { disabled, meta, errorMessage, isError } = this.form.getInputState(this.name);
         const [locale] = this.form.getFormLocale();
         const label = getNestedValue(locale, meta === null || meta === void 0 ? void 0 : meta.label) || (meta === null || meta === void 0 ? void 0 : meta.label);
-        return (h(Host, { key: 'b57134a29b2fa656c8e8fbea1300f5eb6113cd7c' }, h("div", { key: '346913b105170cb003b6b7784b733dab84a16e45', part: `${this.name}`, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, disabled) }, h("div", { key: 'efe858c4f4acd7497ad554c54200d042eddb4d6f', part: `${this.name}-container form-input-container`, class: "form-input-container" }, h("shift-switch", { key: '0a09930396fcf8a61c12eef25a03f84ac0152c4d', name: this.name, label: label, class: "form-switch" })), h(FormErrorMessage, { key: '6570063310d0da063189aafcba5a0a312c6abc40', name: this.name, isError: isError, errorMessage: locale[errorMessage] || errorMessage }))));
+        return (h(Host, { key: '875f6f166627794c63b6ef68ae0b05bc5dd3d513' }, h("div", { key: '02129550f8b1d6dda01fb3bc00678ce30b0941a9', part: `${this.name}`, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, disabled) }, h("div", { key: '3ccd1a14b50baf801abd0bbc90970fc56338389e', part: `${this.name}-container form-input-container`, class: "form-input-container" }, h("shift-switch", { key: 'ec664f769a91c594483d7bdfc22529a8693c35ea', name: this.name, label: label, class: "form-switch" })), h(FormErrorMessage, { key: '171e92927c65cb8f0eea0a46a1c4baa9ae7fd185', name: this.name, isError: isError, errorMessage: locale[errorMessage] || errorMessage }))));
     }
     static get is() { return "form-switch"; }
     static get originalStyleUrls() {

package/dist/collection/components/form-elements/form-text-area.js

@@ -27,9 +27,9 @@ export class FormTextArea {
         const [locale] = this.form.getFormLocale();
         const label = getNestedValue(locale, meta === null || meta === void 0 ? void 0 : meta.label) || (meta === null || meta === void 0 ? void 0 : meta.label);
         const placeholder = getNestedValue(locale, meta === null || meta === void 0 ? void 0 : meta.placeholder);
-        return (h(Host, { key: 'da2750b5234ddccc2d6fe5d8d8169131de9f4103' }, h("label", { key: '2790c072e42267304e86a048695cade73a3f0f10', part: `${this.name}`, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, disabled) }, h(FormInputLabel, { key: '6fe6d9005d5bf74764933908fefe17f0ab140fb0', name: this.name, isRequired: isRequired, label: label }), h("div", { key: 'fec63fa6fb05694da9649dd4762f13e12fdf191d', part: `${this.name}-container form-input-container`, class: "form-input-container" }, h("textarea", { key: 'd01d131a1d64d0670e599a50b6ad2c4a020fe773', name: this.name, placeholder: placeholder, part: `${this.name}-textarea form-input-textarea`, class: cn('form-input-style form-input-textarea-style', {
+        return (h(Host, { key: '9febf584455f536e42ef2f6443f4f98165e8cdc8' }, h("label", { key: 'c9d89921481616d8999e040c20a3bdb9c10d7919', part: `${this.name}`, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, disabled) }, h(FormInputLabel, { key: '7ac172239a620c5ffd4f17d868485a8846592e8d', name: this.name, isRequired: isRequired, label: label }), h("div", { key: 'cbd19627a0ae683c87b9ff590d289f64851bffa1', part: `${this.name}-container form-input-container`, class: "form-input-container" }, h("textarea", { key: '5998da1ab13df4c818f3d90ed8bd1aa5a1fe6e4b', name: this.name, placeholder: placeholder, part: `${this.name}-textarea form-input-textarea`, class: cn('form-input-style form-input-textarea-style', {
                 'form-input-error-style': isError,
-            }) })), h(FormErrorMessage, { key: '2e144035b5a4651da6ab288b0cbccc5432d26549', name: this.name, isError: isError, errorMessage: locale[errorMessage] || errorMessage }))));
+            }) })), h(FormErrorMessage, { key: '86cacfafe3858a467881743ee5b305df0cc38b37', name: this.name, isError: isError, errorMessage: locale[errorMessage] || errorMessage }))));
     }
     static get is() { return "form-text-area"; }
     static get originalStyleUrls() {

package/dist/collection/components/forms/demo-form.js

@@ -96,7 +96,7 @@ export class DemoForm {
         }
     }
     render() {
-        return (h(Host, { key: '3d9ff174bc9a1e8b967dd27c261af20d4c5b0ad0', class: `demo-${this.theme}` }, h("form-structure", { key: 'd27df6a11c58567de8f397432ca8a101fc7e1925', form: this.form, language: this.language, formLocale: this.locale, structure: this.structure, isLoading: this.isLoading, errorMessage: this.errorMessage, formElementMapper: demoElements }, h("slot", { key: '6fb01aed95df49957b668fd65a4033838b07afd1' }))));
+        return (h(Host, { key: '8de6b1a2e07269e76d7b3374fa54d14a65b2ccb6', class: `demo-${this.theme}` }, h("form-structure", { key: '7de5d534ec08ab252c355ac6f102fde4abe64c0a', form: this.form, language: this.language, formLocale: this.locale, structure: this.structure, isLoading: this.isLoading, errorMessage: this.errorMessage, formElementMapper: demoElements }, h("slot", { key: '5923f69e32dcf39445cb37046346b04261cccbfb' }))));
     }
     static get is() { return "demo-form"; }
     static get originalStyleUrls() {
@@ -254,7 +254,7 @@ export class DemoForm {
                 "mutable": false,
                 "complexType": {
                     "original": "FormElementStructure<demoElementNames> | undefined",
-                    "resolved": "{ data?: Record<string, any>; } & { id?: string; class?: string; children?: (\"submit\" | OptionalKeys<{ confirmPolicy: boolean; ageConfirmation: true; cityId: string; email: string; message: string; generalTicketType: string; name: string; phone: string; }> | FormElementStructureComponents<\"submit\" | OptionalKeys<{ confirmPolicy: boolean; ageConfirmation: true; cityId: string; email: string; message: string; generalTicketType: string; name: string; phone: string; }>>)[]; } & { tag: string; name?: \"submit\" | OptionalKeys<{ confirmPolicy: boolean; ageConfirmation: true; cityId: string; email: string; message: string; generalTicketType: string; name: string; phone: string; }>; } | { data?: Record<string, any>; } & { id?: string; class?: string; children?: (\"submit\" | OptionalKeys<{ confirmPolicy: boolean; ageConfirmation: true; cityId: string; email: string; message: string; generalTicketType: string; name: string; phone: string; }> | FormElementStructureComponents<\"submit\" | OptionalKeys<{ confirmPolicy: boolean; ageConfirmation: true; cityId: string; email: string; message: string; generalTicketType: string; name: string; phone: string; }>>)[]; } & { tag?: string; name: \"submit\" | OptionalKeys<{ confirmPolicy: boolean; ageConfirmation: true; cityId: string; email: string; message: string; generalTicketType: string; name: string; phone: string; }>; }",
+                    "resolved": "{ data?: Record<string, any>; } & { id?: string; class?: string; staticValue?: any; isHidden?: boolean; isDisabled?: boolean; children?: (\"submit\" | OptionalKeys<{ confirmPolicy: boolean; ageConfirmation: true; cityId: string; email: string; message: string; generalTicketType: string; name: string; phone: string; }> | FormElementStructureComponents<\"submit\" | OptionalKeys<{ confirmPolicy: boolean; ageConfirmation: true; cityId: string; email: string; message: string; generalTicketType: string; name: string; phone: string; }>>)[]; } & { tag: string; name?: \"submit\" | OptionalKeys<{ confirmPolicy: boolean; ageConfirmation: true; cityId: string; email: string; message: string; generalTicketType: string; name: string; phone: string; }>; } | { data?: Record<string, any>; } & { id?: string; class?: string; staticValue?: any; isHidden?: boolean; isDisabled?: boolean; children?: (\"submit\" | OptionalKeys<{ confirmPolicy: boolean; ageConfirmation: true; cityId: string; email: string; message: string; generalTicketType: string; name: string; phone: string; }> | FormElementStructureComponents<\"submit\" | OptionalKeys<{ confirmPolicy: boolean; ageConfirmation: true; cityId: string; email: string; message: string; generalTicketType: string; name: string; phone: string; }>>)[]; } & { tag?: string; name: \"submit\" | OptionalKeys<{ confirmPolicy: boolean; ageConfirmation: true; cityId: string; email: string; message: string; generalTicketType: string; name: string; phone: string; }>; }",
                     "references": {
                         "FormElementStructure": {
                             "location": "import",

package/dist/collection/components/forms/test-drive-demo.js

@@ -109,7 +109,7 @@ export class TestDriveDemoForm {
     render() {
         var _a, _b;
         const successMessageKey = 'Form submitted successfully.';
-        return (h(Host, { key: '07d7acdb7e74c7378327c4541132c28c3cb47a25' }, h("div", { key: '2e054aeb92179d9d8053e75350d342c41e741311', part: `test-drive-demo-${(_b = (_a = this.structure) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.theme}` }, h("form-structure", { key: 'de0372f7487672bca901dbf4767cb8aea34d75bd', form: this.form, formLocale: this.locale, structure: this.structure, isLoading: this.isLoading, language: this.localeLanguage, errorMessage: this.errorMessage, formElementMapper: testDriveDemoElements, successMessage: this.locale[successMessageKey] || successMessageKey }, h("slot", { key: '19f06f478f9bf3724c07b92ceda1bba01b7a018a' })))));
+        return (h(Host, { key: '5885bcf49368e82445b4eb2ac1d8fa079a9739bf' }, h("div", { key: '01a41bd497f6d0cdce496c74518f34be66af701e', part: `test-drive-demo-${(_b = (_a = this.structure) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.theme}` }, h("form-structure", { key: '2444acd5b679db689594464f096b203e54f35c03', form: this.form, formLocale: this.locale, structure: this.structure, isLoading: this.isLoading, language: this.localeLanguage, errorMessage: this.errorMessage, formElementMapper: testDriveDemoElements, successMessage: this.locale[successMessageKey] || successMessageKey }, h("slot", { key: '44aee58bcf9ab6ce93b5ddc5bf3836dbf584d42e' })))));
     }
     static get is() { return "test-drive-demo-form"; }
     static get encapsulation() { return "shadow"; }
@@ -249,7 +249,7 @@ export class TestDriveDemoForm {
                 "mutable": true,
                 "complexType": {
                     "original": "FormElementStructure<testDriveDemoElementNames> | undefined",
-                    "resolved": "{ data?: Record<string, any>; } & { id?: string; class?: string; children?: (\"submit\" | OptionalKeys<{ name: string; phone: string; email: string; priority: string; branch: string; }> | FormElementStructureComponents<\"submit\" | OptionalKeys<{ name: string; phone: string; email: string; priority: string; branch: string; }>>)[]; } & { tag: string; name?: \"submit\" | OptionalKeys<{ name: string; phone: string; email: string; priority: string; branch: string; }>; } | { data?: Record<string, any>; } & { id?: string; class?: string; children?: (\"submit\" | OptionalKeys<{ name: string; phone: string; email: string; priority: string; branch: string; }> | FormElementStructureComponents<\"submit\" | OptionalKeys<{ name: string; phone: string; email: string; priority: string; branch: string; }>>)[]; } & { tag?: string; name: \"submit\" | OptionalKeys<{ name: string; phone: string; email: string; priority: string; branch: string; }>; }",
+                    "resolved": "{ data?: Record<string, any>; } & { id?: string; class?: string; staticValue?: any; isHidden?: boolean; isDisabled?: boolean; children?: (\"submit\" | OptionalKeys<{ name: string; phone: string; email: string; priority: string; branch: string; }> | FormElementStructureComponents<\"submit\" | OptionalKeys<{ name: string; phone: string; email: string; priority: string; branch: string; }>>)[]; } & { tag: string; name?: \"submit\" | OptionalKeys<{ name: string; phone: string; email: string; priority: string; branch: string; }>; } | { data?: Record<string, any>; } & { id?: string; class?: string; staticValue?: any; isHidden?: boolean; isDisabled?: boolean; children?: (\"submit\" | OptionalKeys<{ name: string; phone: string; email: string; priority: string; branch: string; }> | FormElementStructureComponents<\"submit\" | OptionalKeys<{ name: string; phone: string; email: string; priority: string; branch: string; }>>)[]; } & { tag?: string; name: \"submit\" | OptionalKeys<{ name: string; phone: string; email: string; priority: string; branch: string; }>; }",
                     "references": {
                         "FormElementStructure": {
                             "location": "import",

package/dist/collection/components/forms/vehicle-quotation/VehicleImageViewer.js

@@ -24,18 +24,18 @@ const cacheImage = (form, imSrc, id) => {
 };
 let imageSrcBase64 = '';
 export const VehicleImageViewer = ({ form }) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     form.addWatcher('vehicle');
     let vehicleId = form.getValue('vehicle');
     let openContainer = !!vehicleId;
-    const selectedVehicle = (_a = form.context['vehicleList']) === null || _a === void 0 ? void 0 : _a.find(vehicle => `${vehicle === null || vehicle === void 0 ? void 0 : vehicle.ID}` === vehicleId);
+    const selectedVehicle = (_a = form.context['vehicleList']) === null || _a === void 0 ? void 0 : _a.find(vehicle => vehicle.value === vehicleId);
     let imSrc;
     if (selectedVehicle) {
-        imSrc = selectedVehicle === null || selectedVehicle === void 0 ? void 0 : selectedVehicle.Image;
-        vehicleId = selectedVehicle.ID;
+        imSrc = (_b = selectedVehicle === null || selectedVehicle === void 0 ? void 0 : selectedVehicle.meta) === null || _b === void 0 ? void 0 : _b.image;
+        vehicleId = selectedVehicle.value;
     }
     else if (form.context['vehicleList'] && form.context['vehicleList'][0]) {
-        imSrc = (_c = (_b = form.context['vehicleList'][0]) === null || _b === void 0 ? void 0 : _b.meta) === null || _c === void 0 ? void 0 : _c.image;
+        imSrc = (_d = (_c = form.context['vehicleList'][0]) === null || _c === void 0 ? void 0 : _c.meta) === null || _d === void 0 ? void 0 : _d.image;
         vehicleId = form.context['vehicleList'][0].value;
     }
     let isLoading = false;

package/dist/collection/components/forms/vehicle-quotation/element-mapper.js

@@ -2,7 +2,7 @@
  * Built by ShiftSoftware
  * Copyright (c)
  */
-import { forceUpdate, h } from "@stencil/core";
+import { h } from "@stencil/core";
 import { phoneValidator } from "./validations";
 import { VehicleImageViewer } from "./VehicleImageViewer";
 export const vehicleQuotationElements = {
@@ -12,16 +12,26 @@ export const vehicleQuotationElements = {
     'vehicle': ({ form, language, props }) => {
         var _a;
         const fetcher = async ({ signal }) => {
-            var _a;
+            var _a, _b, _c;
             const vehicleEndpoint = (_a = form.context.structure) === null || _a === void 0 ? void 0 : _a.data.vehicleApi;
             const response = await fetch(vehicleEndpoint, { signal, headers: { 'Accept-Language': language } });
-            form.context['vehicleList'] = await response.json();
-            forceUpdate(form.formStructure);
-            return form.context['vehicleList'].map(vehicle => ({
-                label: vehicle.Title,
-                value: `${vehicle.ID}`,
-                meta: { image: vehicle.Image },
-            }));
+            if ((_c = (_b = form.context.structure) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.vehiclesApiStrapiFormat) {
+                const res = await response.json();
+                let options = res.data;
+                return options.map(vehicle => ({
+                    label: vehicle.attributes.GradeName,
+                    value: `${vehicle.id}`,
+                    meta: Object.assign(Object.assign({}, vehicle), { image: vehicle.attributes.Cover.data.attributes.url }),
+                }));
+            }
+            else {
+                const options = await response.json();
+                return options.map(vehicle => ({
+                    label: vehicle.Title,
+                    value: `${vehicle.ID}`,
+                    meta: Object.assign(Object.assign({}, vehicle), { image: vehicle.Image }),
+                }));
+            }
         };
         const params = new URLSearchParams(window.location.search);
         const defaultValue = params.get((_a = form.context.structure.data) === null || _a === void 0 ? void 0 : _a.vehicleIdQueryParam);
@@ -32,11 +42,12 @@ export const vehicleQuotationElements = {
             var _a;
             const dealerEndpoint = (_a = form.context.structure) === null || _a === void 0 ? void 0 : _a.data.dealerApi;
             const response = await fetch(dealerEndpoint, { signal, headers: { 'Accept-Language': language } });
-            form.context['dealerList'] = (await response.json()).map(dealer => ({
+            const options = (await response.json()).map(dealer => ({
                 label: dealer.Name,
                 value: `${dealer.ID}`,
+                meta: Object.assign({}, dealer),
             }));
-            return form.context['dealerList'];
+            return options;
         };
         return h("form-select", Object.assign({}, props, { clearable: true, searchable: true, fetcher: fetcher, language: language }));
     },
@@ -100,11 +111,12 @@ export const vehicleQuotationElements = {
             var _a;
             const currentVehiclesEndpoint = (_a = form.context.structure) === null || _a === void 0 ? void 0 : _a.data.currentVehiclesApi;
             const response = await fetch(currentVehiclesEndpoint, { signal, headers: { 'Accept-Language': 'en' } });
-            form.context['currentVehiclesList'] = (await response.json()).filter(vehicle => vehicle.name !== 'Other');
+            const options = (await response.json()).filter(vehicle => vehicle.name !== 'Other');
             return [
-                ...form.context['currentVehiclesList'].map(vehicle => ({
+                ...options.map(vehicle => ({
                     label: vehicle.name,
                     value: `${vehicle.id}`,
+                    meta: Object.assign({}, vehicle),
                 })),
                 {
                     value: 'Other',
@@ -120,10 +132,10 @@ export const vehicleQuotationElements = {
         const ownVehicle = form.getValue('ownVehicle') === 'yes';
         const currentVehicleBrand = form.getValue('currentVehicleBrand');
         const fetcher = async ({}) => {
-            var _a;
+            var _a, _b;
             if (!currentVehicleBrand)
                 return [];
-            const selectedBrand = (_a = form.context['currentVehiclesList']) === null || _a === void 0 ? void 0 : _a.find(vehicle => `${vehicle === null || vehicle === void 0 ? void 0 : vehicle.id}` === currentVehicleBrand);
+            const selectedBrand = (_b = (_a = form.context['currentVehicleBrandList']) === null || _a === void 0 ? void 0 : _a.find(vehicle => vehicle.value === currentVehicleBrand)) === null || _b === void 0 ? void 0 : _b.meta;
             if (!selectedBrand)
                 return [];
             return [

package/dist/collection/components/forms/vehicle-quotation/themes.css

@@ -1 +1 @@
-*,: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: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: ;border:0 solid #e5e7eb;box-sizing:border-box}::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: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/: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;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){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;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-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,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}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]:where(:not([hidden=until-found])){display:none}.block{display:block}:host{all:initial!important;display:block;font-family:inherit!important}.static{position:static}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.\!h-auto{height:auto!important}.w-full{width:100%}.min-w-full{min-width:100%}.resize{resize:both}.overflow-hidden{overflow:hidden}.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-none{transition-property:none!important}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.\!duration-0{transition-duration:0s!important}.duration-500{transition-duration:.5s}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.relative{position:relative}.size-\[70px\]{height:70px;width:70px}.stroke-green-700{stroke:#15803d}.opacity-0{opacity:0}.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: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: ;border:0 solid #e5e7eb;box-sizing:border-box}::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: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/: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;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){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;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-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,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}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]:where(:not([hidden=until-found])){display:none}.block{display:block}.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))}:host{all:initial!important;display:block;font-family:inherit!important}@keyframes spin{to{transform:rotate(1turn)}}.form-loader-container .img{animation:spin 2s linear infinite;height:32px;width:32px}*{-webkit-user-select:none;-moz-user-select:none;user-select:none}.pointer-events-none{pointer-events:none}.static{position:static}.absolute{position:absolute}.relative{position:relative}.left-0{left:0}.top-0{top:0}.flex{display:flex}.h-\[200px\]{height:200px}.min-h-\[200px\]{min-height:200px}.w-full{width:100%}.items-center{align-items:center}.justify-center{justify-content:center}.opacity-0{opacity:0}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-500{transition-duration:.5s}.\!h-auto{height:auto!important}.min-w-full{min-width:100%}.resize{resize:both}.overflow-hidden{overflow:hidden}.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-none{transition-property:none!important}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.\!duration-0{transition-duration:0s!important}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.size-\[70px\]{height:70px;width:70px}.stroke-green-700{stroke:#15803d}.hidden{display:none}