adp-web-components 0.1.70 → 0.1.72

package/dist/esm/{state-object-CeC7oHKX.js → state-object-5qgRIr3a.js}

@@ -5,7 +5,7 @@
 import { h } from './index-Bf4Ol6Qt.js';
 import './types-CWP4hZcw.js';
 import { d as dateFnsExports } from './index-BILW0yP6.js';
-import { L as LoaderIcon, g as getPhoneValidator } from './loader-icon-B0jJ_gr4.js';
+import { L as LoaderIcon, g as getPhoneValidator } from './loader-icon-DibQkdwl.js';
 import { c as cn } from './cn-BK16Cn81.js';
 import { C as CalendarDaysIcon } from './calendar-days-icon-Dz291Fau.js';
 import { d as decodeTimeOffset } from './decode-time-offset-Cfi43WoV.js';
@@ -59,12 +59,17 @@ const VehicleImageViewer = ({ form }) => {
             h("img", { alt: "vehicle image", part: "vehicle-image", src: imageSrcBase64, style: { 'border-radius': '6px', 'transition': 'opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);', 'opacity': isLoading ? '0' : '1' } }))));
 };
 
+const getObjectValue = (obj, path) => {
+    if (typeof path === 'string')
+        return getNestedValue(obj, path);
+    return path.map(itemPath => getNestedValue(obj, itemPath)).find(value => value != null);
+};
 const populateItems = (data, setup, hasMeta) => {
     const options = [];
-    const baseOptions = getNestedValue(data, setup.items);
+    const baseOptions = getObjectValue(data, setup.items);
     baseOptions.forEach(item => {
-        const value = getNestedValue(item, setup['item-value']);
-        const label = getNestedValue(item, setup['item-label']);
+        const value = getObjectValue(item, setup['item-value']);
+        const label = getObjectValue(item, setup['item-label']);
         const newItemObject = { value: (setup === null || setup === void 0 ? void 0 : setup.useNamedValue) ? label : value, label };
         newItemObject.meta = Object.assign({}, item);
         options.push(newItemObject);
@@ -72,11 +77,11 @@ const populateItems = (data, setup, hasMeta) => {
     return options;
 };
 
-const getFormMappers = (stateObject, extraMappers = {}) => (Object.assign({ submit: ({ props }) => h("form-submit", Object.assign({}, props)), name: ({ props }) => h("form-input", Object.assign({}, props)), lastName: ({ props }) => h("form-input", Object.assign({}, props)), email: ({ props }) => h("form-input", Object.assign({ type: "email" }, props)), message: ({ props }) => h("form-text-area", Object.assign({}, props)), vin: ({ props }) => h("form-vin-input", Object.assign({}, props)), vehicleImage: ({ form }) => h(VehicleImageViewer, { form: form }), phone: ({ props, isLoading }) => {
+const getFormMappers = (stateObject, extraMappers = {}) => (Object.assign({ submit: ({ props }) => h("form-submit", Object.assign({ key: props === null || props === void 0 ? void 0 : props.name }, props)), stepperSubmit: ({ props }) => h("form-stepper-submit", Object.assign({ key: (props === null || props === void 0 ? void 0 : props.step) || (props === null || props === void 0 ? void 0 : props.name) }, props)), name: ({ props }) => h("form-input", Object.assign({ key: props === null || props === void 0 ? void 0 : props.name }, props)), lastName: ({ props }) => h("form-input", Object.assign({ key: props === null || props === void 0 ? void 0 : props.name }, props)), email: ({ props }) => h("form-input", Object.assign({ key: props === null || props === void 0 ? void 0 : props.name, type: "email" }, props)), message: ({ props }) => h("form-text-area", Object.assign({ key: props === null || props === void 0 ? void 0 : props.name }, props)), vin: ({ props }) => h("form-vin-input", Object.assign({ key: props === null || props === void 0 ? void 0 : props.name }, props)), vehicleImage: ({ form }) => h(VehicleImageViewer, { form: form }), phone: ({ props, isLoading }) => {
         if (!stateObject.phoneValidator) {
             stateObject.phoneValidator = getPhoneValidator((props === null || props === void 0 ? void 0 : props.countryCode) || '');
         }
-        return h("form-phone-number", Object.assign({ defaultValue: stateObject.phoneValidator.default }, props, { isLoading: isLoading, validator: stateObject.phoneValidator }));
+        return h("form-phone-number", Object.assign({ key: props === null || props === void 0 ? void 0 : props.name, defaultValue: stateObject.phoneValidator.default }, props, { isLoading: isLoading, validator: stateObject.phoneValidator }));
     }, vehicle: ({ language, props }) => {
         const fetcher = async ({ signal, context }) => {
             var _a, _b;
@@ -99,13 +104,13 @@ const getFormMappers = (stateObject, extraMappers = {}) => (Object.assign({ subm
                 const res = await response.json();
                 options = res.data;
                 options = options.map((vehicle, idx) => {
-                    var _a, _b, _c;
+                    var _a, _b, _c, _d, _e;
                     if (!props.defaultValue && paramValue && (((_a = vehicle === null || vehicle === void 0 ? void 0 : vehicle.GradeName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === paramValue || ((_b = `${vehicle.id}`) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === paramValue))
                         defaultIndex = idx;
                     return {
                         label: vehicle.attributes.GradeName,
-                        value: (props === null || props === void 0 ? void 0 : props.useNamedValue) ? `${(_c = vehicle === null || vehicle === void 0 ? void 0 : vehicle.attributes) === null || _c === void 0 ? void 0 : _c.GradeName}` : `${vehicle.id}`,
-                        meta: Object.assign(Object.assign({}, vehicle), { image: vehicle.attributes.Cover.data.attributes.url }),
+                        value: (props === null || props === void 0 ? void 0 : props.useNamedValue) ? `${(vehicle === null || vehicle === void 0 ? void 0 : vehicle.GradeName) || ((_c = vehicle === null || vehicle === void 0 ? void 0 : vehicle.attributes) === null || _c === void 0 ? void 0 : _c.GradeName)}` : `${vehicle.id}`,
+                        meta: Object.assign(Object.assign({}, vehicle), { image: ((_d = vehicle === null || vehicle === void 0 ? void 0 : vehicle.Cover) === null || _d === void 0 ? void 0 : _d.url) || ((_e = vehicle.attributes.Cover.data.attributes) === null || _e === void 0 ? void 0 : _e.url) }),
                     };
                 });
             }
@@ -132,7 +137,7 @@ const getFormMappers = (stateObject, extraMappers = {}) => (Object.assign({ subm
                 context.defaultValue = props === null || props === void 0 ? void 0 : props.defaultValue;
             return options;
         };
-        return h("form-select", Object.assign({}, props, { searchable: true, fetcher: fetcher, language: language }));
+        return h("form-select", Object.assign({ key: props === null || props === void 0 ? void 0 : props.name }, props, { searchable: true, fetcher: fetcher, language: language }));
     }, companyBranchId: ({ language, props }) => {
         const fetcher = async ({ signal }) => {
             const dealerEndpoint = props === null || props === void 0 ? void 0 : props.branchApi;
@@ -144,7 +149,7 @@ const getFormMappers = (stateObject, extraMappers = {}) => (Object.assign({ subm
             }));
             return options;
         };
-        return h("form-select", Object.assign({}, props, { clearable: true, searchable: true, fetcher: fetcher, language: language }));
+        return h("form-select", Object.assign({ key: props === null || props === void 0 ? void 0 : props.name }, props, { clearable: true, searchable: true, fetcher: fetcher, language: language }));
     }, cityId: ({ language, props }) => {
         const fetcher = async ({ signal }) => {
             const dealerEndpoint = props === null || props === void 0 ? void 0 : props.cityApi;
@@ -156,7 +161,7 @@ const getFormMappers = (stateObject, extraMappers = {}) => (Object.assign({ subm
             }));
             return options;
         };
-        return h("form-select", Object.assign({}, props, { clearable: true, searchable: true, fetcher: fetcher, language: language }));
+        return h("form-select", Object.assign({ key: props === null || props === void 0 ? void 0 : props.name }, props, { clearable: true, searchable: true, fetcher: fetcher, language: language }));
     }, date: ({ props }) => h("form-picker-input", Object.assign({ type: "date" }, props, { icon: h(CalendarDaysIcon, null) })), time: ({ language, props }) => {
         const fetcher = async () => {
             const options = [];
@@ -173,7 +178,7 @@ const getFormMappers = (stateObject, extraMappers = {}) => (Object.assign({ subm
             }
             return options;
         };
-        return h("form-select", Object.assign({}, props, { clearable: true, fetcher: fetcher, language: language }));
+        return h("form-select", Object.assign({ key: props === null || props === void 0 ? void 0 : props.name }, props, { clearable: true, fetcher: fetcher, language: language }));
     }, currentVehicleBrand: ({ form, language, props, locale }) => {
         const fetcher = async ({ signal }) => {
             var _a;
@@ -192,7 +197,7 @@ const getFormMappers = (stateObject, extraMappers = {}) => (Object.assign({ subm
                 },
             ];
         };
-        return h("form-select", Object.assign({}, props, { searchable: true, fetcher: fetcher, language: language }));
+        return h("form-select", Object.assign({ key: props === null || props === void 0 ? void 0 : props.name }, props, { searchable: true, fetcher: fetcher, language: language }));
     }, currentVehicleModel: ({ form, language, props, locale }) => {
         form.addWatcher('currentVehicleBrand');
         const currentVehicleBrand = form === null || form === void 0 ? void 0 : form.getValue('currentVehicleBrand');
@@ -211,7 +216,7 @@ const getFormMappers = (stateObject, extraMappers = {}) => (Object.assign({ subm
                 },
             ];
         };
-        return (h("form-select", Object.assign({}, props, { searchable: true, fetcher: fetcher, language: language, resetKey: currentVehicleBrand, fetcherKey: currentVehicleBrand, isRequired: currentVehicleBrand !== 'Other', isDisabled: !currentVehicleBrand || currentVehicleBrand === 'Other' })));
+        return (h("form-select", Object.assign({}, props, { searchable: true, key: props === null || props === void 0 ? void 0 : props.name, fetcher: fetcher, language: language, resetKey: currentVehicleBrand, fetcherKey: currentVehicleBrand, isRequired: currentVehicleBrand !== 'Other', isDisabled: !currentVehicleBrand || currentVehicleBrand === 'Other' })));
     }, ownVehicle: ({ language, props }) => {
         const fetcher = async ({}) => {
             var _a, _b, _c, _d;
@@ -226,7 +231,7 @@ const getFormMappers = (stateObject, extraMappers = {}) => (Object.assign({ subm
                 },
             ];
         };
-        return h("form-select", Object.assign({}, props, { fetcher: fetcher, language: language }));
+        return h("form-select", Object.assign({ key: props === null || props === void 0 ? void 0 : props.name }, props, { fetcher: fetcher, language: language }));
     }, conditionalCurrentVehicleBrand: ({ form, language, props, locale }) => {
         form.addWatcher('ownVehicle');
         const ownVehicle = (form === null || form === void 0 ? void 0 : form.getValue('ownVehicle')) === 'yes';
@@ -246,7 +251,7 @@ const getFormMappers = (stateObject, extraMappers = {}) => (Object.assign({ subm
                 },
             ];
         };
-        return h("form-select", Object.assign({}, props, { searchable: true, fetcher: fetcher, language: language, resetKey: ownVehicle, isRequired: ownVehicle, isDisabled: !ownVehicle }));
+        return h("form-select", Object.assign({ key: props === null || props === void 0 ? void 0 : props.name }, props, { searchable: true, fetcher: fetcher, language: language, resetKey: ownVehicle, isRequired: ownVehicle, isDisabled: !ownVehicle }));
     }, conditionalCurrentVehicleModel: ({ form, language, props, locale }) => {
         form.addWatcher('ownVehicle');
         form.addWatcher('conditionalCurrentVehicleBrand');
@@ -267,7 +272,7 @@ const getFormMappers = (stateObject, extraMappers = {}) => (Object.assign({ subm
                 },
             ];
         };
-        return (h("form-select", Object.assign({}, props, { searchable: true, fetcher: fetcher, language: language, resetKey: currentVehicleBrand, fetcherKey: currentVehicleBrand, isRequired: ownVehicle && currentVehicleBrand !== 'Other', isDisabled: !currentVehicleBrand || currentVehicleBrand === 'Other' })));
+        return (h("form-select", Object.assign({}, props, { searchable: true, fetcher: fetcher, key: props === null || props === void 0 ? void 0 : props.name, language: language, resetKey: currentVehicleBrand, fetcherKey: currentVehicleBrand, isRequired: ownVehicle && currentVehicleBrand !== 'Other', isDisabled: !currentVehicleBrand || currentVehicleBrand === 'Other' })));
     } }, extraMappers));
 
 const getDefaultStateObject = () => ({ phoneValidator: undefined });

package/dist/esm/test-drive-form.entry.js

@@ -3,20 +3,20 @@
  * Copyright (c)
  */
 import { r as registerInstance, h, H as Host, a as getElement } from './index-Bf4Ol6Qt.js';
-import { f as functionHooks, L as LoaderIcon } from './loader-icon-B0jJ_gr4.js';
+import { f as functionHooks, L as LoaderIcon } from './loader-icon-DibQkdwl.js';
 import { c as cn } from './cn-BK16Cn81.js';
 import { g as getFormValidations } from './validation-iKTmTjB0.js';
 import { s as sharedFormLocalesSchema } from './types-CWP4hZcw.js';
-import { g as getLanguageFromUrl } from './get-language-from-url-WEiw5juk.js';
-import { a as getDefaultStateObject, g as getFormMappers } from './state-object-CeC7oHKX.js';
-import './get-local-language-RWdIrGBY.js';
+import { g as getLanguageFromUrl } from './get-language-from-url-CZmiCAsd.js';
+import { a as getDefaultStateObject, g as getFormMappers } from './state-object-5qgRIr3a.js';
+import './get-local-language-BF0xL8aw.js';
 import './index-BILW0yP6.js';
 import './validate-vin-CUREVASG.js';
 import './calendar-days-icon-Dz291Fau.js';
 import './decode-time-offset-Cfi43WoV.js';
 import './get-nested-value-D0IHkGuC.js';
 
-const styleCss = "*,: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-scroll-snap-strictness:proximity;--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;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-scroll-snap-strictness:proximity;--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;}/*! 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}.flex{display:flex}.grid{display:grid}.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 form-loading-spin{to{transform:rotate(1turn)}}.form-loader-container .img{animation:form-loading-spin 2s linear infinite;height:32px;width:32px}*{-webkit-user-select:none;-moz-user-select:none;user-select:none}#vehicle-wrapper{display:flex;flex-direction:column}@media (min-width:640px){#vehicle-wrapper{align-items:center;display:grid;gap:24px;grid-template-columns:repeat(2,minmax(0,1fr))}}.pointer-events-none{pointer-events:none}.static{position:static}.absolute{position:absolute}.relative{position:relative}.left-0{left:0}.top-0{top:0}.h-full{height:100%}.min-h-\\[150px\\]{min-height:150px}.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}.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-full{height:100%;width:100%}.cursor-pointer{cursor:pointer}.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)}.enabled\\:cursor-pointer:enabled{cursor:pointer}.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}.-mt-1{margin-top:-.25rem}.end-3\\.5{inset-inline-end:.875rem}.top-1\\/2{top:50%}.aspect-square{aspect-ratio:1/1}.size-\\[90\\%\\]{height:90%;width:90%}.h-\\[70\\%\\]{height:70%}.-translate-y-1\\/2{--tw-translate-y:-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))}.\\!uppercase{text-transform:uppercase!important}.\\!text-\\[\\#576675\\]{--tw-text-opacity:1!important;color:rgb(87 102 117/var(--tw-text-opacity,1))!important}.text-inherit{color:inherit}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.enabled\\:hover\\:\\!text-black\\/85:hover:enabled{color:rgba(0,0,0,.85)!important}.disabled\\:\\!pointer-events-none:disabled{pointer-events:none!important}.disabled\\:\\!opacity-0:disabled{opacity:0!important}.\\!h-auto{height:auto!important}.min-w-full{min-width:100%}.resize{resize:both}.overflow-hidden{overflow:hidden}.\\!transition-none{transition-property:none!important}.\\!duration-0{transition-duration:0s!important}.\\!duration-500{transition-duration:.5s!important}.fixed{position:fixed}.bottom-4{bottom:1rem}.left-1\\/2{left:50%}.z-10{z-index:10}.z-\\[9999\\]{z-index:9999}.aspect-video{aspect-ratio:16/9}.size-8{height:2rem;width:2rem}.size-\\[32px\\]{height:32px;width:32px}.h-\\[100dvh\\]{height:100dvh}.h-\\[60px\\]{height:60px}.min-h-full{min-height:100%}.w-\\[100dvw\\]{width:100dvw}.w-\\[100px\\]{width:100px}.-translate-x-1\\/2{--tw-translate-x:-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))}.animate-spin{animation:spin 1s linear infinite}.justify-between{justify-content:space-between}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.border{border-width:1px}.border-slate-500{--tw-border-opacity:1;border-color:rgb(100 116 139/var(--tw-border-opacity,1))}.border-slate-600{--tw-border-opacity:1;border-color:rgb(71 85 105/var(--tw-border-opacity,1))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.bg-black\\/30{background-color:rgba(0,0,0,.3)}.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.object-cover{object-fit:cover}.object-center{object-position:center}.p-1{padding:.25rem}.p-\\[16px\\]{padding:16px}.py-\\[10px\\]{padding-bottom:10px;padding-top:10px}.text-center{text-align:center}.text-\\[18px\\]{font-size:18px}.text-slate-100{--tw-text-opacity:1;color:rgb(241 245 249/var(--tw-text-opacity,1))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity,1))}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity,1))}.shadow,.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px 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}.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)}.duration-300{transition-duration:.3s}.hover\\:border-slate-700:hover{--tw-border-opacity:1;border-color:rgb(51 65 85/var(--tw-border-opacity,1))}.hover\\:bg-slate-300:hover{--tw-bg-opacity:1;background-color:rgb(203 213 225/var(--tw-bg-opacity,1))}.hover\\:text-slate-700:hover{--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity,1))}.disabled\\:bg-white\\/75:disabled{background-color:hsla(0,0%,100%,.75)}@media (min-width:768px){.md\\:relative{position:relative}.md\\:h-auto{height:auto}.md\\:w-\\[600px\\]{width:600px}.md\\:\\!translate-x-0{--tw-translate-x:0px!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))!important}.md\\:overflow-hidden{overflow:hidden}.md\\:rounded-lg{border-radius:.5rem}.md\\:border-none{border-style:none}.md\\:bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.md\\:py-\\[8px\\]{padding-bottom:8px;padding-top:8px}.md\\:text-\\[24px\\]{font-size:24px}.md\\:text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.md\\:\\!opacity-100{opacity:1!important}.md\\:transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.md\\:duration-300{transition-duration:.3s}.md\\:hover\\:bg-slate-100:hover{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}}";
+const styleCss = "*,: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-scroll-snap-strictness:proximity;--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;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-scroll-snap-strictness:proximity;--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;}/*! 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}.flex{display:flex}.grid{display:grid}.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 form-loading-spin{to{transform:rotate(1turn)}}.form-loader-container .img{animation:form-loading-spin 2s linear infinite;height:32px;width:32px}*{-webkit-user-select:none;-moz-user-select:none;user-select:none}#vehicle-wrapper{display:flex;flex-direction:column}@media (min-width:640px){#vehicle-wrapper{align-items:center;display:grid;gap:24px;grid-template-columns:repeat(2,minmax(0,1fr))}}.pointer-events-none{pointer-events:none}.static{position:static}.absolute{position:absolute}.relative{position:relative}.left-0{left:0}.top-0{top:0}.h-full{height:100%}.min-h-\\[150px\\]{min-height:150px}.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}.\\!duration-500{transition-duration:.5s!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}}.fixed{position:fixed}.bottom-4{bottom:1rem}.left-1\\/2{left:50%}.z-10{z-index:10}.z-\\[9999\\]{z-index:9999}.hidden{display:none}.aspect-video{aspect-ratio:16/9}.size-8{height:2rem;width:2rem}.size-\\[32px\\]{height:32px;width:32px}.size-full{height:100%;width:100%}.h-\\[100dvh\\]{height:100dvh}.h-\\[60px\\]{height:60px}.min-h-full{min-height:100%}.w-\\[100dvw\\]{width:100dvw}.w-\\[100px\\]{width:100px}.-translate-x-1\\/2{--tw-translate-x:-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))}.animate-spin{animation:spin 1s linear infinite}.cursor-pointer{cursor:pointer}.justify-between{justify-content:space-between}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.border{border-width:1px}.border-slate-500{--tw-border-opacity:1;border-color:rgb(100 116 139/var(--tw-border-opacity,1))}.border-slate-600{--tw-border-opacity:1;border-color:rgb(71 85 105/var(--tw-border-opacity,1))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.bg-black\\/30{background-color:rgba(0,0,0,.3)}.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.object-cover{object-fit:cover}.object-center{object-position:center}.p-1{padding:.25rem}.p-\\[16px\\]{padding:16px}.py-\\[10px\\]{padding-bottom:10px;padding-top:10px}.text-center{text-align:center}.text-\\[18px\\]{font-size:18px}.text-slate-100{--tw-text-opacity:1;color:rgb(241 245 249/var(--tw-text-opacity,1))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity,1))}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity,1))}.shadow,.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px 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}.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)}.duration-300{transition-duration:.3s}.hover\\:border-slate-700:hover{--tw-border-opacity:1;border-color:rgb(51 65 85/var(--tw-border-opacity,1))}.hover\\:bg-slate-300:hover{--tw-bg-opacity:1;background-color:rgb(203 213 225/var(--tw-bg-opacity,1))}.hover\\:text-slate-700:hover{--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity,1))}.disabled\\:bg-white\\/75:disabled{background-color:hsla(0,0%,100%,.75)}@media (min-width:768px){.md\\:relative{position:relative}.md\\:h-auto{height:auto}.md\\:w-\\[600px\\]{width:600px}.md\\:\\!translate-x-0{--tw-translate-x:0px!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))!important}.md\\:overflow-hidden{overflow:hidden}.md\\:rounded-lg{border-radius:.5rem}.md\\:border-none{border-style:none}.md\\:bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.md\\:py-\\[8px\\]{padding-bottom:8px;padding-top:8px}.md\\:text-\\[24px\\]{font-size:24px}.md\\:text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.md\\:\\!opacity-100{opacity:1!important}.md\\:transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.md\\:duration-300{transition-duration:.3s}.md\\:hover\\:bg-slate-100:hover{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}}";
 
 let stateObject = getDefaultStateObject();
 const validation = getFormValidations(stateObject);
@@ -66,9 +66,9 @@ const TestDriveForm = class {
     // #endregion
     render() {
         var _a, _b;
-        return (h(Host, { key: 'c22942c01dd459d26ea1574104328e3820ebef2a' }, h("div", { key: '579f3ff664278b1208bab93185e0d607d34b58c4', part: cn('shift-form', (_b = (_a = this.structure) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.theme, this.theme) }, h("div", { key: 'f19577de7dec60a342b6292810e12ce0b58cf9c8', part: "form-container", class: "relative min-h-[150px]" }, h("div", { key: '17518c85252d0bcda63319b5c7ca712603c46940', part: "form-loader-container", class: cn('form-loader-container absolute top-0 left-0 w-full h-full pointer-events-none flex justify-center items-center transition-opacity duration-500', {
+        return (h(Host, { key: 'fab49ec7cbc4969dd4511b0939d553f736522cb1' }, h("div", { key: '506afbb9bbad45d22a03b0dcdcd1d5564338a568', part: cn('shift-form', (_b = (_a = this.structure) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.theme, this.theme) }, h("div", { key: '6c2052eff11adb5b8317299f4c9a65ca0a4356c5', part: "form-container", class: "relative min-h-[150px]" }, h("div", { key: '4a34ab6f134bdaeddf34ba1426ffd273c74a50c2', part: "form-loader-container", class: cn('form-loader-container absolute top-0 left-0 w-full h-full pointer-events-none flex justify-center items-center transition-opacity duration-500', {
                 'opacity-0': this.structureRendered,
-            }) }, h(LoaderIcon, { key: '56cfde4b37adc257f98d1ad714642f6140fc5051', part: "form-loader-icon", class: "img" })), h("flexible-container", { key: '7ecb050edcffed8af61c6642bd4ca9aae37f754e', onlyForMounting: true, isOpened: this.structureRendered }, !!this.form && (h("form-structure", { key: 'c77c8063cf2f8eccc67e4d6270c2b3e1e0d411c6', form: this.form, fields: this.fields, formId: this.formId, formLocale: this.locale, structure: this.structure, isLoading: this.isLoading, language: this.localeLanguage, errorMessage: this.errorMessage, formElementMapper: elementMapper, successMessage: this.locale['Form submitted successfully.'] || 'Form submitted successfully.' }, h("slot", { key: 'cc74ebbf35a57bb9ff25afaf8b670ab5b3a1ccd0' }))))))));
+            }) }, h(LoaderIcon, { key: '781356c6d37992f18a0f11306a0f661401033473', part: "form-loader-icon", class: "img" })), h("flexible-container", { key: '8985547d2568fc1315ab5d1e2607093063140bf0', onlyForMounting: true, isOpened: this.structureRendered }, !!this.form && (h("form-structure", { key: '6574311073efb3ab665e9282667abd9431c52336', form: this.form, fields: this.fields, formId: this.formId, formLocale: this.locale, structure: this.structure, isLoading: this.isLoading, language: this.localeLanguage, errorMessage: this.errorMessage, formElementMapper: elementMapper, successMessage: this.locale['Form submitted successfully.'] || 'Form submitted successfully.' }, h("slot", { key: '76920b66289cd0cf6086ff8b88a138f93cc71560' }))))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {