adp-web-components 0.3.14 → 0.3.16

package/dist/esm/{vehicle-info-layout-DQ12Civq.js → vehicle-info-layout-Dmx94GLp.js}

@@ -2,7 +2,7 @@
  * Built by ShiftSoftware
  * Copyright (c)
  */
-import { h } from './index-Cg4V9l26.js';
+import { h } from './index-CteZTPhq.js';
 import { c as cn } from './cn-BK16Cn81.js';
 
 const VehicleInfoLayout = (props, children) => props.coreOnly ? (h("div", { class: cn({ loading: props.isLoading }) }, children)) : (h("div", { dir: props.direction, part: "vehicle-info-container", class: cn('vehicle-info-container', { loading: props.isLoading }) }, h("div", { part: "vehicle-info-header", class: "vehicle-info-header" }, h("strong", { part: "vehicle-info-header-vin", class: "vehicle-info-header-vin load-animation" }, props.isError ? (h("span", { dir: props.direction, style: { color: 'red' } }, props.errorMessage)) : (props.header)), props.headerRight && h("div", { class: "vehicle-info-header-action" }, props.headerRight)), h("div", { part: "vehicle-info-body", class: "vehicle-info-body" }, h("div", { part: "vehicle-info-content", class: "vehicle-info-content" }, children))));

package/dist/esm/vehicle-lookup.entry.js

@@ -2,12 +2,12 @@
  * Built by ShiftSoftware
  * Copyright (c)
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-Cg4V9l26.js';
-import { g as getMockFile } from './get-mock-files-_k2h1OdV.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-CteZTPhq.js';
+import { g as getMockFile } from './get-mock-files-k02F3T7q.js';
 import { c as create$3, d as sharedLocalesSchema } from './types-BDhR4pDq.js';
 import { S as ServiceHistorySchema, p as paintThicknessSchema, c as claimableItemsSchema, s as specificationSchema, a as accessoriesSchema, w as warrantySchema } from './type-DEzFTlhs.js';
-import { V as VehicleInfoLayout } from './vehicle-info-layout-DQ12Civq.js';
-import { a as getLocaleLanguage, g as getSharedLocal } from './get-local-language-DsJgnZ5L.js';
+import { V as VehicleInfoLayout } from './vehicle-info-layout-Dmx94GLp.js';
+import { a as getLocaleLanguage, g as getSharedLocal } from './get-local-language-CizYq_00.js';
 import './cn-BK16Cn81.js';
 
 const vehicleLookupWrapperSchema = create$3({
@@ -19,7 +19,7 @@ const vehicleLookupWrapperSchema = create$3({
     serviceHistory: ServiceHistorySchema,
 });
 
-const vehicleLookupCss = () => `*,: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;}: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!important}.absolute{position:absolute}.\\!relative{position:relative!important}.relative{position:relative}.left-0{left:0}.top-0{top:0}.z-10{z-index:10}.block{display:block}.flex{display:flex}.hidden{display:none}.size-\\[32px\\]{height:32px;width:32px}.origin-left{transform-origin:left}.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))}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-center{justify-content:center}.\\!overflow-hidden{overflow:hidden!important}.rounded-\\[4px\\]{border-radius:4px}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-\\[\\#e0c97a\\]{--tw-border-opacity:1;border-color:rgb(224 201 122/var(--tw-border-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.text-\\[\\#c08a0e\\]{--tw-text-opacity:1;color:rgb(192 138 14/var(--tw-text-opacity,1))}.opacity-0{opacity:0}.opacity-100{opacity:1}.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-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.duration-500{transition-duration:.5s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.shift-skeleton{border-radius:4px;position:relative!important}.loading .shift-skeleton,.loading.shift-skeleton{border-style:none!important;overflow:hidden!important;pointer-events:none!important;position:relative!important}.shift-skeleton:after{background:linear-gradient(-45deg,#d4d8de,#e2e5e9,#d4d8de);background-size:300% 300%;border-radius:inherit!important;content:"";height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transform-origin:left;transition-duration:.5s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:100%;z-index:10}.loading .shift-skeleton:after,.loading.shift-skeleton:after{--tw-scale-x:1;animation:shimmer 2s ease-in-out infinite;opacity:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes shimmer{0%{background-position:100% 0}50%{background-position:0 100%}to{background-position:100% 0}}.vehicle-info-container{background-color:#fdfdfd;border:1px solid #dcdcdc;border-radius:5px;box-shadow:inset 0 1px 3px rgba(0,0,0,.05),0 1px 0 hsla(0,0%,100%,.1);overflow:hidden;padding:0;position:relative;transition-duration:.5s;transition-property:all}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:#f6f6f6;border-radius:5px;border-top:1px solid #dcdcdc;border-top-left-radius:0;border-top-right-radius:0}::-webkit-scrollbar-thumb{background:#c5c5c5;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#a1a1a1}.hide-scroll ::-webkit-scrollbar-thumb,.hide-scroll::-webkit-scrollbar-thumb,.loading ::-webkit-scrollbar-thumb{background:transparent}.vehicle-info-body{display:flex;flex-direction:column;overflow:hidden;position:relative;transition-duration:.5s;transition-property:all;transition-timing-function:ease-in-out}.vehicle-info-content{transition-duration:.5s;transition-property:all;width:100%}.vehicle-info-header{align-items:center;background-color:#f6f6f6;border:1px solid #ededed;display:flex;height:54px;justify-content:center;position:relative;text-align:center}.vehicle-info-header-action{align-items:center;display:flex;position:absolute;right:12px;top:50%;transform:translateY(-50%)}.vehicle-info-header-vin{display:inline-block;font-size:16px;transition-duration:.5s;transition-property:all}.vehicle-info-header-vin span{color:#ef4444}.loading .vehicle-info-header-vin{opacity:0;transform:scale(1.5);visibility:hidden}:host{all:initial!important;display:block;font-family:inherit!important;font-family:Noto Kufi Arabic,Nunito,Roboto,Arial,sans-serif!important}.part-lookup,.part-lookup *{font-family:Noto Kufi Arabic,Nunito,Roboto,Arial,sans-serif!important}.trace-trigger-button{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);align-items:center;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));border-color:rgb(224 201 122/var(--tw-border-opacity,1));border-radius:9999px;border-width:1px;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);color:rgb(192 138 14/var(--tw-text-opacity,1));cursor:pointer;display:flex;height:32px;justify-content:center;transition-duration:.2s;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:32px}.trace-trigger-button:hover{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(252 248 227/var(--tw-bg-opacity,1));border-color:rgb(192 138 14/var(--tw-border-opacity,1));color:rgb(138 109 59/var(--tw-text-opacity,1))}.trace-trigger-button svg{height:18px;width:18px}.hover\\:border-\\[\\#c08a0e\\]:hover{--tw-border-opacity:1;border-color:rgb(192 138 14/var(--tw-border-opacity,1))}.hover\\:bg-\\[\\#fcf8e3\\]:hover{--tw-bg-opacity:1;background-color:rgb(252 248 227/var(--tw-bg-opacity,1))}.hover\\:text-\\[\\#8a6d3b\\]:hover{--tw-text-opacity:1;color:rgb(138 109 59/var(--tw-text-opacity,1))}.static{position:static}.h-\\[200px\\]{height:200px}.w-full{width:100%}.text-\\[26px\\]{font-size:26px}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.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)}.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)}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.bottom-\\[40px\\]{bottom:40px}.left-1\\/2{left:50%}.left-\\[30px\\]{left:30px}.ml-\\[-125px\\]{margin-left:-125px}.box-content{box-sizing:content-box}.size-\\[30px\\]{height:30px;width:30px}.size-\\[90px\\]{height:90px;width:90px}.size-full{height:100%;width:100%}.h-10{height:2.5rem}.h-\\[320px\\]{height:320px}.h-full{height:100%}.w-1\\/2{width:50%}.w-\\[150\\%\\]{width:150%}.w-\\[90\\%\\]{width:90%}.w-\\[calc\\(100\\%-0px\\)\\]{width:100%}.w-\\[calc\\(100\\%-60px\\)\\]{width:calc(100% - 60px)}.w-fit{width:fit-content}.min-w-full{min-width:100%}.-translate-x-1\\/2{--tw-translate-x:-50%}.-translate-x-1\\/2,.translate-y-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))}.translate-y-0{--tw-translate-y:0px}.translate-y-\\[-50\\%\\]{--tw-translate-y:-50%}.translate-y-\\[-50\\%\\],.translate-y-\\[-5px\\]{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-\\[-5px\\]{--tw-translate-y:-5px}.scale-100{--tw-scale-x:1;--tw-scale-y:1}.scale-100,.scale-\\[70\\%\\]{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-\\[70\\%\\]{--tw-scale-x:70%;--tw-scale-y:70%}.resize{resize:both}.flex-col{flex-direction:column}.justify-between{justify-content:space-between}.gap-\\[250px\\]{gap:250px}.overflow-hidden{overflow:hidden}.overflow-x-hidden{overflow-x:hidden}.overflow-y-hidden{overflow-y:hidden}.overflow-x-scroll{overflow-x:scroll}.rounded-\\[6px\\]{border-radius:6px}.border-\\[\\#f2aeb5\\]{--tw-border-opacity:1;border-color:rgb(242 174 181/var(--tw-border-opacity,1))}.border-\\[\\#faebcc\\]{--tw-border-opacity:1;border-color:rgb(250 235 204/var(--tw-border-opacity,1))}.bg-\\[\\#1a1a1a\\]{--tw-bg-opacity:1;background-color:rgb(26 26 26/var(--tw-bg-opacity,1))}.bg-\\[\\#f7d7d8\\]{--tw-bg-opacity:1;background-color:rgb(247 215 216/var(--tw-bg-opacity,1))}.bg-\\[\\#fcf8e3\\]{--tw-bg-opacity:1;background-color:rgb(252 248 227/var(--tw-bg-opacity,1))}.bg-\\[linear-gradient\\(to_bottom\\2c _\\#428bca_0\\%\\2c _\\#3071a9_100\\%\\)\\]{background-image:linear-gradient(180deg,#428bca,#3071a9)}.p-\\[25px\\]{padding:25px}.px-\\[30px\\]{padding-left:30px;padding-right:30px}.pt-\\[16px\\]{padding-top:16px}.text-\\[16px\\]{font-size:16px}.text-\\[22px\\]{font-size:22px}.font-semibold{font-weight:600}.text-\\[\\#58151c\\]{--tw-text-opacity:1;color:rgb(88 21 28/var(--tw-text-opacity,1))}.text-\\[\\#8a6d3b\\]{--tw-text-opacity:1;color:rgb(138 109 59/var(--tw-text-opacity,1))}.text-slate-700{--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity,1))}.duration-300{transition-duration:.3s}.\\[\\&_\\*\\]\\:shrink-0 *{flex-shrink:0}.end-0{inset-inline-end:0}.top-full{top:100%}.mx-auto{margin-left:auto;margin-right:auto}.my-auto{margin-bottom:auto;margin-top:auto}.me-\\[16px\\]{margin-inline-end:16px}.mt-\\[4px\\]{margin-top:4px}.size-\\[16px\\]{height:16px;width:16px}.size-\\[18px\\]{height:18px;width:18px}.h-\\[150px\\]{height:150px}.w-\\[84px\\]{width:84px}.min-w-0{min-width:0}.max-w-full{max-width:100%}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.rotate-180{--tw-rotate:180deg;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))}.flex-wrap{flex-wrap:wrap}.gap-\\[16px\\]{gap:16px}.gap-\\[4px\\]{gap:4px}.gap-\\[6px\\]{gap:6px}.gap-\\[8px\\]{gap:8px}.overflow-x-auto{overflow-x:auto}.whitespace-nowrap{white-space:nowrap}.rounded-lg{border-radius:.5rem}.border-b{border-bottom-width:1px}.border-amber-500{--tw-border-opacity:1;border-color:rgb(245 158 11/var(--tw-border-opacity,1))}.border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity,1))}.bg-amber-500{--tw-bg-opacity:1;background-color:rgb(245 158 11/var(--tw-bg-opacity,1))}.bg-black\\/40{background-color:rgba(0,0,0,.4)}.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity,1))}.p-\\[12px\\]{padding:12px}.p-\\[6px\\]{padding:6px}.px-\\[16px\\]{padding-left:16px;padding-right:16px}.px-\\[24px\\]{padding-left:24px;padding-right:24px}.py-\\[10px\\]{padding-bottom:10px;padding-top:10px}.py-\\[15px\\]{padding-bottom:15px;padding-top:15px}.py-\\[16px\\]{padding-bottom:16px;padding-top:16px}.py-\\[6px\\]{padding-bottom:6px;padding-top:6px}.py-\\[8px\\]{padding-bottom:8px;padding-top:8px}.text-center{text-align:center}.text-\\[17px\\]{font-size:17px}.font-medium{font-weight:500}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.no-underline{text-decoration-line:none}.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-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 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}.ring-0{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-150{transition-duration:.15s}.last\\:border-b-0:last-child{border-bottom-width:0}.hover\\:border-amber-600:hover{--tw-border-opacity:1;border-color:rgb(217 119 6/var(--tw-border-opacity,1))}.hover\\:bg-amber-50:hover{--tw-bg-opacity:1;background-color:rgb(255 251 235/var(--tw-bg-opacity,1))}.hover\\:bg-amber-600:hover{--tw-bg-opacity:1;background-color:rgb(217 119 6/var(--tw-bg-opacity,1))}.hover\\:bg-sky-100\\/50:hover{background-color:rgba(224,242,254,.5)}.hover\\:opacity-100:hover{opacity:1}.\\[\\&_div\\]\\:hover\\:\\!opacity-100:hover div{opacity:1!important}.\\[\\&_img\\]\\:hover\\:shadow-lg:hover img{--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);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.max-w-\\[460px\\]{max-width:460px}.max-w-\\[520px\\]{max-width:520px}.translate-y-\\[-4px\\]{--tw-translate-y:-4px;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))}.select-none{user-select:none}.items-start{align-items:flex-start}.items-stretch{align-items:stretch}.justify-start{justify-content:flex-start}.gap-\\[12px\\]{gap:12px}.gap-\\[2px\\]{gap:2px}.overflow-auto{overflow:auto}.\\!rounded-\\[12px\\]{border-radius:12px!important}.rounded-\\[14px\\]{border-radius:14px}.p-\\[16px\\]{padding:16px}.px-\\[12px\\]{padding-left:12px;padding-right:12px}.px-\\[14px\\]{padding-left:14px;padding-right:14px}.py-\\[12px\\]{padding-bottom:12px;padding-top:12px}.\\!pb-0{padding-bottom:0!important}.text-\\[13\\.5px\\]{font-size:13.5px}.leading-\\[1\\.35\\]{line-height:1.35}.text-amber-900\\/90{color:rgba(120,53,15,.9)}.transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}@media (min-width:768px){.md\\:justify-between{justify-content:space-between}}.\\[\\&\\>div\\]\\:grow>div{flex-grow:1}.sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.fixed{position:fixed}.z-\\[999\\]{z-index:999}.h-\\[100dvh\\]{height:100dvh}.w-\\[100dvw\\]{width:100dvw}.scale-100,.scale-\\[110\\%\\]{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-\\[110\\%\\]{--tw-scale-x:110%;--tw-scale-y:110%}.overflow-y-auto{overflow-y:auto}.overscroll-contain{overscroll-behavior:contain}.stroke-\\[1\\.5px\\]{stroke-width:1.5px}.my-2{margin-bottom:.5rem;margin-top:.5rem}.grow{flex-grow:1}.mt-\\[32px\\]{margin-top:32px}.h-\\[25px\\]{height:25px}.h-\\[50px\\]{height:50px}.h-\\[8px\\]{height:8px}.bg-\\[\\#f6f6f6\\]{--tw-bg-opacity:1;background-color:rgb(246 246 246/var(--tw-bg-opacity,1))}.pt-\\[40px\\]{padding-top:40px}.text-\\[18px\\]{font-size:18px}.font-bold{font-weight:700}.success-card{background-color:#d0e7de;border-color:#a2d0bb;color:#0b3521}.reject-card{background-color:#f7d7d8;border-color:#f2aeb5;color:#58151c}`;
+const vehicleLookupCss = () => `*,: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;}: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!important}.absolute{position:absolute}.\\!relative{position:relative!important}.relative{position:relative}.left-0{left:0}.top-0{top:0}.z-10{z-index:10}.block{display:block}.flex{display:flex}.hidden{display:none}.size-\\[32px\\]{height:32px;width:32px}.origin-left{transform-origin:left}.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))}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-center{justify-content:center}.\\!overflow-hidden{overflow:hidden!important}.rounded-\\[4px\\]{border-radius:4px}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-\\[\\#e0c97a\\]{--tw-border-opacity:1;border-color:rgb(224 201 122/var(--tw-border-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.text-\\[\\#c08a0e\\]{--tw-text-opacity:1;color:rgb(192 138 14/var(--tw-text-opacity,1))}.opacity-0{opacity:0}.opacity-100{opacity:1}.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-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.duration-500{transition-duration:.5s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.shift-skeleton{border-radius:4px;position:relative!important}.loading .shift-skeleton,.loading.shift-skeleton{border-style:none!important;overflow:hidden!important;pointer-events:none!important;position:relative!important}.shift-skeleton:after{background:linear-gradient(-45deg,#d4d8de,#e2e5e9,#d4d8de);background-size:300% 300%;border-radius:inherit!important;content:"";height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transform-origin:left;transition-duration:.5s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:100%;z-index:10}.loading .shift-skeleton:after,.loading.shift-skeleton:after{--tw-scale-x:1;animation:shimmer 2s ease-in-out infinite;opacity:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes shimmer{0%{background-position:100% 0}50%{background-position:0 100%}to{background-position:100% 0}}.vehicle-info-container{background-color:#fdfdfd;border:1px solid #dcdcdc;border-radius:5px;box-shadow:inset 0 1px 3px rgba(0,0,0,.05),0 1px 0 hsla(0,0%,100%,.1);overflow:hidden;padding:0;position:relative;transition-duration:.5s;transition-property:all}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:#f6f6f6;border-radius:5px;border-top:1px solid #dcdcdc;border-top-left-radius:0;border-top-right-radius:0}::-webkit-scrollbar-thumb{background:#c5c5c5;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#a1a1a1}.hide-scroll ::-webkit-scrollbar-thumb,.hide-scroll::-webkit-scrollbar-thumb,.loading ::-webkit-scrollbar-thumb{background:transparent}.vehicle-info-body{display:flex;flex-direction:column;overflow:hidden;position:relative;transition-duration:.5s;transition-property:all;transition-timing-function:ease-in-out}.vehicle-info-content{transition-duration:.5s;transition-property:all;width:100%}.vehicle-info-header{align-items:center;background-color:#f6f6f6;border:1px solid #ededed;display:flex;height:54px;justify-content:center;position:relative;text-align:center}.vehicle-info-header-action{align-items:center;display:flex;position:absolute;right:12px;top:50%;transform:translateY(-50%)}.vehicle-info-header-vin{display:inline-block;font-size:16px;transition-duration:.5s;transition-property:all}.vehicle-info-header-vin span{color:#ef4444}.loading .vehicle-info-header-vin{opacity:0;transform:scale(1.5);visibility:hidden}:host{all:initial!important;display:block;font-family:inherit!important;font-family:Noto Kufi Arabic,Nunito,Roboto,Arial,sans-serif!important}.part-lookup,.part-lookup *{font-family:Noto Kufi Arabic,Nunito,Roboto,Arial,sans-serif!important}.trace-trigger-button{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);align-items:center;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));border-color:rgb(224 201 122/var(--tw-border-opacity,1));border-radius:9999px;border-width:1px;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);color:rgb(192 138 14/var(--tw-text-opacity,1));cursor:pointer;display:flex;height:32px;justify-content:center;transition-duration:.2s;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:32px}.trace-trigger-button:hover{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(252 248 227/var(--tw-bg-opacity,1));border-color:rgb(192 138 14/var(--tw-border-opacity,1));color:rgb(138 109 59/var(--tw-text-opacity,1))}.trace-trigger-button svg{height:18px;width:18px}.hover\\:border-\\[\\#c08a0e\\]:hover{--tw-border-opacity:1;border-color:rgb(192 138 14/var(--tw-border-opacity,1))}.hover\\:bg-\\[\\#fcf8e3\\]:hover{--tw-bg-opacity:1;background-color:rgb(252 248 227/var(--tw-bg-opacity,1))}.hover\\:text-\\[\\#8a6d3b\\]:hover{--tw-text-opacity:1;color:rgb(138 109 59/var(--tw-text-opacity,1))}.static{position:static}.h-\\[200px\\]{height:200px}.w-full{width:100%}.text-\\[26px\\]{font-size:26px}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.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)}.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)}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.bottom-\\[40px\\]{bottom:40px}.left-1\\/2{left:50%}.left-\\[30px\\]{left:30px}.ml-\\[-125px\\]{margin-left:-125px}.box-content{box-sizing:content-box}.size-\\[30px\\]{height:30px;width:30px}.size-\\[90px\\]{height:90px;width:90px}.size-full{height:100%;width:100%}.h-10{height:2.5rem}.h-\\[320px\\]{height:320px}.h-full{height:100%}.w-1\\/2{width:50%}.w-\\[150\\%\\]{width:150%}.w-\\[90\\%\\]{width:90%}.w-\\[calc\\(100\\%-0px\\)\\]{width:100%}.w-\\[calc\\(100\\%-60px\\)\\]{width:calc(100% - 60px)}.w-fit{width:fit-content}.min-w-full{min-width:100%}.-translate-x-1\\/2{--tw-translate-x:-50%}.-translate-x-1\\/2,.translate-y-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))}.translate-y-0{--tw-translate-y:0px}.translate-y-\\[-50\\%\\]{--tw-translate-y:-50%}.translate-y-\\[-50\\%\\],.translate-y-\\[-5px\\]{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-\\[-5px\\]{--tw-translate-y:-5px}.scale-100{--tw-scale-x:1;--tw-scale-y:1}.scale-100,.scale-\\[70\\%\\]{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-\\[70\\%\\]{--tw-scale-x:70%;--tw-scale-y:70%}.resize{resize:both}.flex-col{flex-direction:column}.justify-between{justify-content:space-between}.gap-\\[250px\\]{gap:250px}.overflow-hidden{overflow:hidden}.overflow-x-hidden{overflow-x:hidden}.overflow-y-hidden{overflow-y:hidden}.overflow-x-scroll{overflow-x:scroll}.rounded-\\[6px\\]{border-radius:6px}.border-\\[\\#f2aeb5\\]{--tw-border-opacity:1;border-color:rgb(242 174 181/var(--tw-border-opacity,1))}.border-\\[\\#faebcc\\]{--tw-border-opacity:1;border-color:rgb(250 235 204/var(--tw-border-opacity,1))}.bg-\\[\\#1a1a1a\\]{--tw-bg-opacity:1;background-color:rgb(26 26 26/var(--tw-bg-opacity,1))}.bg-\\[\\#f7d7d8\\]{--tw-bg-opacity:1;background-color:rgb(247 215 216/var(--tw-bg-opacity,1))}.bg-\\[\\#fcf8e3\\]{--tw-bg-opacity:1;background-color:rgb(252 248 227/var(--tw-bg-opacity,1))}.bg-\\[linear-gradient\\(to_bottom\\2c _\\#428bca_0\\%\\2c _\\#3071a9_100\\%\\)\\]{background-image:linear-gradient(180deg,#428bca,#3071a9)}.p-\\[25px\\]{padding:25px}.px-\\[30px\\]{padding-left:30px;padding-right:30px}.pt-\\[16px\\]{padding-top:16px}.text-\\[16px\\]{font-size:16px}.text-\\[22px\\]{font-size:22px}.font-semibold{font-weight:600}.text-\\[\\#58151c\\]{--tw-text-opacity:1;color:rgb(88 21 28/var(--tw-text-opacity,1))}.text-\\[\\#8a6d3b\\]{--tw-text-opacity:1;color:rgb(138 109 59/var(--tw-text-opacity,1))}.text-slate-700{--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity,1))}.duration-300{transition-duration:.3s}.\\[\\&_\\*\\]\\:shrink-0 *{flex-shrink:0}.mx-auto{margin-left:auto;margin-right:auto}.size-\\[100px\\]{height:100px;width:100px}.h-auto{height:auto}.max-h-\\[100px\\]{max-height:100px}.w-auto{width:auto}.max-w-\\[100px\\]{max-width:100px}.shrink-0{flex-shrink:0}.gap-\\[4px\\]{gap:4px}.overflow-x-auto{overflow-x:auto}.rounded-lg{border-radius:.5rem}.bg-black\\/40{background-color:rgba(0,0,0,.4)}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.shadow,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.outline-none{outline:2px solid transparent;outline-offset:2px}.ring-0{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.hover\\:opacity-100:hover{opacity:1}.\\[\\&_div\\]\\:hover\\:\\!opacity-100:hover div{opacity:1!important}.\\[\\&_img\\]\\:hover\\:shadow-lg:hover img{--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);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.end-0{inset-inline-end:0}.top-full{top:100%}.my-auto{margin-bottom:auto;margin-top:auto}.me-\\[16px\\]{margin-inline-end:16px}.mt-\\[4px\\]{margin-top:4px}.size-\\[16px\\]{height:16px;width:16px}.size-\\[18px\\]{height:18px;width:18px}.h-\\[150px\\]{height:150px}.w-\\[84px\\]{width:84px}.min-w-0{min-width:0}.max-w-full{max-width:100%}.flex-1{flex:1 1 0%}.rotate-180{--tw-rotate:180deg;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))}.flex-wrap{flex-wrap:wrap}.gap-\\[16px\\]{gap:16px}.gap-\\[6px\\]{gap:6px}.gap-\\[8px\\]{gap:8px}.whitespace-nowrap{white-space:nowrap}.border-b{border-bottom-width:1px}.border-amber-500{--tw-border-opacity:1;border-color:rgb(245 158 11/var(--tw-border-opacity,1))}.border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity,1))}.bg-amber-500{--tw-bg-opacity:1;background-color:rgb(245 158 11/var(--tw-bg-opacity,1))}.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity,1))}.p-\\[12px\\]{padding:12px}.p-\\[6px\\]{padding:6px}.px-\\[16px\\]{padding-left:16px;padding-right:16px}.px-\\[24px\\]{padding-left:24px;padding-right:24px}.py-\\[10px\\]{padding-bottom:10px;padding-top:10px}.py-\\[15px\\]{padding-bottom:15px;padding-top:15px}.py-\\[16px\\]{padding-bottom:16px;padding-top:16px}.py-\\[6px\\]{padding-bottom:6px;padding-top:6px}.py-\\[8px\\]{padding-bottom:8px;padding-top:8px}.text-center{text-align:center}.text-\\[17px\\]{font-size:17px}.font-medium{font-weight:500}.no-underline{text-decoration-line:none}.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)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-150{transition-duration:.15s}.last\\:border-b-0:last-child{border-bottom-width:0}.hover\\:border-amber-600:hover{--tw-border-opacity:1;border-color:rgb(217 119 6/var(--tw-border-opacity,1))}.hover\\:bg-amber-50:hover{--tw-bg-opacity:1;background-color:rgb(255 251 235/var(--tw-bg-opacity,1))}.hover\\:bg-amber-600:hover{--tw-bg-opacity:1;background-color:rgb(217 119 6/var(--tw-bg-opacity,1))}.hover\\:bg-sky-100\\/50:hover{background-color:rgba(224,242,254,.5)}.table{display:table}.grid{display:grid}.size-\\[20px\\]{height:20px;width:20px}.place-items-center{place-items:center}.rounded{border-radius:.25rem}.bg-sky-100{--tw-bg-opacity:1;background-color:rgb(224 242 254/var(--tw-bg-opacity,1))}.bg-sky-200{--tw-bg-opacity:1;background-color:rgb(186 230 253/var(--tw-bg-opacity,1))}.bg-slate-200\\/70{background-color:rgba(226,232,240,.7)}.px-\\[12px\\]{padding-left:12px;padding-right:12px}.px-\\[6px\\]{padding-left:6px;padding-right:6px}.px-\\[8px\\]{padding-left:8px;padding-right:8px}.text-\\[13px\\]{font-size:13px}.hover\\:cursor-pointer:hover{cursor:pointer}.hover\\:bg-sky-200:hover{--tw-bg-opacity:1;background-color:rgb(186 230 253/var(--tw-bg-opacity,1))}.hover\\:bg-slate-200\\/70:hover{background-color:rgba(226,232,240,.7)}.max-w-\\[460px\\]{max-width:460px}.max-w-\\[520px\\]{max-width:520px}.translate-y-\\[-4px\\]{--tw-translate-y:-4px;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))}.select-none{user-select:none}.items-start{align-items:flex-start}.items-stretch{align-items:stretch}.justify-start{justify-content:flex-start}.gap-\\[12px\\]{gap:12px}.gap-\\[2px\\]{gap:2px}.overflow-auto{overflow:auto}.\\!rounded-\\[12px\\]{border-radius:12px!important}.rounded-\\[14px\\]{border-radius:14px}.p-\\[16px\\]{padding:16px}.px-\\[14px\\]{padding-left:14px;padding-right:14px}.py-\\[12px\\]{padding-bottom:12px;padding-top:12px}.\\!pb-0{padding-bottom:0!important}.text-\\[13\\.5px\\]{font-size:13.5px}.leading-\\[1\\.35\\]{line-height:1.35}.text-amber-900\\/90{color:rgba(120,53,15,.9)}.transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}@media (min-width:768px){.md\\:justify-between{justify-content:space-between}}.\\[\\&\\>div\\]\\:grow>div{flex-grow:1}.my-2{margin-bottom:.5rem;margin-top:.5rem}.grow{flex-grow:1}.fixed{position:fixed}.mt-\\[32px\\]{margin-top:32px}.h-\\[25px\\]{height:25px}.h-\\[50px\\]{height:50px}.h-\\[8px\\]{height:8px}.bg-\\[\\#f6f6f6\\]{--tw-bg-opacity:1;background-color:rgb(246 246 246/var(--tw-bg-opacity,1))}.pt-\\[40px\\]{padding-top:40px}.text-\\[18px\\]{font-size:18px}.font-bold{font-weight:700}.success-card{background-color:#d0e7de;border-color:#a2d0bb;color:#0b3521}.reject-card{background-color:#f7d7d8;border-color:#f2aeb5;color:#58151c}.sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.z-\\[999\\]{z-index:999}.h-\\[100dvh\\]{height:100dvh}.w-\\[100dvw\\]{width:100dvw}.scale-100,.scale-\\[110\\%\\]{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-\\[110\\%\\]{--tw-scale-x:110%;--tw-scale-y:110%}.overflow-y-auto{overflow-y:auto}.overscroll-contain{overscroll-behavior:contain}.stroke-\\[1\\.5px\\]{stroke-width:1.5px}`;
 
 const componentTags = {
     vehicleAccessories: 'vehicle-accessories',
@@ -29,6 +29,7 @@ const componentTags = {
     vehicleClaimableItems: 'vehicle-claimable-items',
     vehicleSaleInformation: 'vehicle-sale-information',
     vehicleWarrantyDetails: 'vehicle-warranty-details',
+    vehicleWarrantyTimeline: 'vehicle-warranty-timeline',
     vehicleSsc: 'vehicle-ssc',
 };
 const VehicleLookup = class {
@@ -85,6 +86,7 @@ const VehicleLookup = class {
         const vehicleClaim = this.el.shadowRoot.getElementById('vehicle-claimable-items');
         const vehicleHistory = this.el.shadowRoot.getElementById('vehicle-service-history');
         const vehicleDetails = this.el.shadowRoot.getElementById('vehicle-warranty-details');
+        const vehicleTimeline = this.el.shadowRoot.getElementById('vehicle-warranty-timeline');
         const vehicleThickness = this.el.shadowRoot.getElementById('vehicle-paint-thickness');
         const vehicleSpecification = this.el.shadowRoot.getElementById('vehicle-specification');
         const vehicleSaleInformation = this.el.shadowRoot.getElementById('vehicle-sale-information');
@@ -93,6 +95,7 @@ const VehicleLookup = class {
             [componentTags.vehicleClaimableItems]: vehicleClaim,
             [componentTags.vehicleServiceHistory]: vehicleHistory,
             [componentTags.vehicleWarrantyDetails]: vehicleDetails,
+            [componentTags.vehicleWarrantyTimeline]: vehicleTimeline,
             [componentTags.vehicleAccessories]: vehicleAccessories,
             [componentTags.vehiclePaintThickness]: vehicleThickness,
             [componentTags.vehicleSpecification]: vehicleSpecification,
@@ -197,6 +200,7 @@ const VehicleLookup = class {
             [componentTags.vehiclePaintThickness]: {},
             [componentTags.vehicleServiceHistory]: {},
             [componentTags.vehicleWarrantyDetails]: {},
+            [componentTags.vehicleWarrantyTimeline]: {},
             [componentTags.vehicleSaleInformation]: {},
             [componentTags.vehicleSsc]: {},
         };
@@ -222,7 +226,7 @@ const VehicleLookup = class {
             .filter(Boolean));
         if (!Object.values(componentTags).includes(this.activeElement) || hiddenSet.has(this.activeElement))
             return h("div", { class: "w-full h-[200px] text-[26px] text-red-600 flex items-center justify-center" }, "Invalid tag");
-        const allComponents = Object.assign(Object.assign({ 'vehicle-specification': (h("vehicle-specification", Object.assign({ coreOnly: true, isDev: this.isDev, disableVinValidation: this.disableVinValidation, "base-url": this.baseUrl, language: this.language, "query-string": this.queryString, id: componentTags.vehicleSpecification }, props[componentTags.vehicleSpecification]))), 'vehicle-accessories': (h("vehicle-accessories", Object.assign({ coreOnly: true, isDev: this.isDev, disableVinValidation: this.disableVinValidation, "base-url": this.baseUrl, language: this.language, "query-string": this.queryString, id: componentTags.vehicleAccessories }, props[componentTags.vehicleAccessories]))), 'vehicle-sale-information': (h("vehicle-sale-information", Object.assign({ coreOnly: true, isDev: this.isDev, disableVinValidation: this.disableVinValidation, "base-url": this.baseUrl, language: this.language, "query-string": this.queryString, id: componentTags.vehicleSaleInformation }, props[componentTags.vehicleSaleInformation]))), 'vehicle-warranty-details': (h("vehicle-warranty-details", Object.assign({ coreOnly: true, "show-ssc": !this.separateSsc, isDev: this.isDev, mockRecaptcha: this.mockRecaptcha, disableVinValidation: this.disableVinValidation, "show-warranty": "true", "base-url": this.baseUrl, language: this.language, "query-string": !this.separateSsc && this.sscQueryString ? [this.queryString, this.sscQueryString].filter(Boolean).join('&') : this.queryString, id: componentTags.vehicleWarrantyDetails }, props[componentTags.vehicleWarrantyDetails]))) }, (this.separateSsc
+        const allComponents = Object.assign(Object.assign({ 'vehicle-specification': (h("vehicle-specification", Object.assign({ coreOnly: true, isDev: this.isDev, disableVinValidation: this.disableVinValidation, "base-url": this.baseUrl, language: this.language, "query-string": this.queryString, id: componentTags.vehicleSpecification }, props[componentTags.vehicleSpecification]))), 'vehicle-accessories': (h("vehicle-accessories", Object.assign({ coreOnly: true, isDev: this.isDev, disableVinValidation: this.disableVinValidation, "base-url": this.baseUrl, language: this.language, "query-string": this.queryString, id: componentTags.vehicleAccessories }, props[componentTags.vehicleAccessories]))), 'vehicle-sale-information': (h("vehicle-sale-information", Object.assign({ coreOnly: true, isDev: this.isDev, disableVinValidation: this.disableVinValidation, "base-url": this.baseUrl, language: this.language, "query-string": this.queryString, id: componentTags.vehicleSaleInformation }, props[componentTags.vehicleSaleInformation]))), 'vehicle-warranty-details': (h("vehicle-warranty-details", Object.assign({ coreOnly: true, "show-ssc": !this.separateSsc, isDev: this.isDev, mockRecaptcha: this.mockRecaptcha, disableVinValidation: this.disableVinValidation, "show-warranty": "true", "base-url": this.baseUrl, language: this.language, "query-string": !this.separateSsc && this.sscQueryString ? [this.queryString, this.sscQueryString].filter(Boolean).join('&') : this.queryString, id: componentTags.vehicleWarrantyDetails }, props[componentTags.vehicleWarrantyDetails]))), 'vehicle-warranty-timeline': (h("vehicle-warranty-timeline", Object.assign({ coreOnly: true, isDev: this.isDev, disableVinValidation: this.disableVinValidation, "base-url": this.baseUrl, language: this.language, "query-string": this.queryString, id: componentTags.vehicleWarrantyTimeline }, props[componentTags.vehicleWarrantyTimeline]))) }, (this.separateSsc
             ? {
                 'vehicle-ssc': (h("vehicle-warranty-details", Object.assign({ coreOnly: true, "show-ssc": "true", isDev: this.isDev, mockRecaptcha: this.mockRecaptcha, disableVinValidation: this.disableVinValidation, "show-warranty": "false", "base-url": this.baseUrl, language: this.language, "query-string": [this.queryString, this.sscQueryString].filter(Boolean).join('&'), id: componentTags.vehicleSsc }, props[componentTags.vehicleSsc]))),
             }

package/dist/esm/vehicle-quotation-form.entry.js

@@ -2,13 +2,13 @@
  * Built by ShiftSoftware
  * Copyright (c)
  */
-import { h, r as registerInstance, H as Host, g as getElement } from './index-Cg4V9l26.js';
-import { L as LoaderIcon } from './loader-icon-B2ls1yXl.js';
+import { h, r as registerInstance, H as Host, g as getElement } from './index-CteZTPhq.js';
+import { L as LoaderIcon } from './loader-icon-BvAmA41s.js';
 import { c as cn } from './cn-BK16Cn81.js';
 import { c as create$3, b as create$6, s as sharedFormLocalesSchema } from './types-BDhR4pDq.js';
-import { a as formLanguageChange, b as formLoadingHandler, c as formErrorHandler, d as formSuccessHandler, g as getMarketingValues, e as formDidLoadHandler, h as formGetFormHandler, i as handleFormSubmit, j as formStructureRenderedHandler } from './functions-DG73G3O6.js';
-import { g as getLanguageFromUrl } from './get-language-from-url-C1D-aPDq.js';
-import './get-local-language-DsJgnZ5L.js';
+import { a as formLanguageChange, b as formLoadingHandler, c as formErrorHandler, d as formSuccessHandler, g as getMarketingValues, e as formDidLoadHandler, h as formGetFormHandler, i as handleFormSubmit, j as formStructureRenderedHandler } from './functions-LONv8snV.js';
+import { g as getLanguageFromUrl } from './get-language-from-url-fV-K15uy.js';
+import './get-local-language-CizYq_00.js';
 
 const cachedImages = {};
 const cacheImage = (form, imSrc, id) => {
@@ -416,9 +416,9 @@ const VehicleQuotationForm = class {
     // #endregion
     render() {
         var _a, _b;
-        return (h(Host, { key: '16de16731cd42d564791810a3969451e5fde9b73', translate: "no" }, h("div", { key: '413814e1e1321e780f83f3e89706a9a161e8811d', part: `shift-form vehicle-quotation-${(_b = (_a = this.structure) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.theme}` }, h("div", { key: '273069cc903538eb59bc0820fb42131761a5c60a', part: "form-container", class: "relative min-h-[150px]" }, h("div", { key: '4246bf9d1d4cc489beb2bdd8410e6df92608f7c9', 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: '2c984017e3f8e77b821d139eb43a85368a753472', translate: "no" }, h("div", { key: 'c7113c72a28ba44cb14a2bd50565779370794b3b', part: `shift-form vehicle-quotation-${(_b = (_a = this.structure) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.theme}` }, h("div", { key: '49ab8ae6cc89c36794ab725b3d97b2b78f462560', part: "form-container", class: "relative min-h-[150px]" }, h("div", { key: '0bb79a61bc381cb7168f8aea5c9229c876ba31d4', 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: '863966b3454bc2332fae025615ccf71718de944b', part: "form-loader-icon", class: "img" })), h("flexible-container", { key: 'cfec565bd242a0f146d1d39e2494c5f6ff7f317e', onlyForMounting: true, isOpened: this.structureRendered }, !!this.form && (h("form-structure", { key: 'e722aa6fb7db134b85b75e5a95f75f71cc7821eb', 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: vehicleQuotationElements, successMessage: this.locale['Form submitted successfully.'] }, h("slot", { key: '8e0900288343887f24ff26a4c15a4b3c5c12788d' }))))))));
+            }) }, h(LoaderIcon, { key: 'bbad1dfb2f94521545600b7b47142ed8703e86da', part: "form-loader-icon", class: "img" })), h("flexible-container", { key: '922ea7621d3fca2d030f0a4c7a86473d3f1f1097', onlyForMounting: true, isOpened: this.structureRendered }, !!this.form && (h("form-structure", { key: 'e7856ed894c5e1b537ced7f3e0e16977bce8ef70', 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: vehicleQuotationElements, successMessage: this.locale['Form submitted successfully.'] }, h("slot", { key: 'b4d282a102fba0669922de2491ed6a861ee7d1a1' }))))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/{get-custom-classes-for-portal-C4LvwyrX.js → white-loader-B3tJFuNO.js}

@@ -2,23 +2,9 @@
  * Built by ShiftSoftware
  * Copyright (c)
  */
-import { h } from './index-Cg4V9l26.js';
+import { h } from './index-CteZTPhq.js';
 import { c as cn } from './cn-BK16Cn81.js';
 
-const TickIcon = props => (h("svg", Object.assign({ fill: "none", "stroke-width": "2", viewBox: "0 0 24 24" }, props, { stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M20 6 9 17l-5-5" })));
-
-const FormInputPrefix = ({ direction, prefix, name }) => {
-    if (!prefix)
-        return false;
-    return (h("div", { dir: direction, class: cn('form-input-prefix', {
-            [`${name}-prefix`]: !!name,
-        }), part: cn('form-input-prefix', {
-            [`${name}-prefix`]: !!name,
-        }) }, prefix));
-};
-
-const whiteLoaderSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIgogICAgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWxvYWRlciI+CiAgICA8cGF0aCBkPSJNMTIgMnY0IiAvPgogICAgPHBhdGggZD0ibTE2LjIgNy44IDIuOS0yLjkiIC8+CiAgICA8cGF0aCBkPSJNMTggMTJoNCIgLz4KICAgIDxwYXRoIGQ9Im0xNi4yIDE2LjIgMi45IDIuOSIgLz4KICAgIDxwYXRoIGQ9Ik0xMiAxOHY0IiAvPgogICAgPHBhdGggZD0ibTQuOSAxOS4xIDIuOS0yLjkiIC8+CiAgICA8cGF0aCBkPSJNMiAxMmg0IiAvPgogICAgPHBhdGggZD0ibTQuOSA0LjkgMi45IDIuOSIgLz4KPC9zdmc+';
-
 const appendClasses = (currentValue, value) => {
     if (value === null || value === void 0 ? void 0 : value.length)
         return `${currentValue} ${Array.from(value).join(' ')}`;
@@ -57,4 +43,18 @@ function getCustomClassesForPortal(element) {
     return finaleClass === null || finaleClass === void 0 ? void 0 : finaleClass.replaceAll('  ', ' ');
 }
 
+const TickIcon = props => (h("svg", Object.assign({ fill: "none", "stroke-width": "2", viewBox: "0 0 24 24" }, props, { stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M20 6 9 17l-5-5" })));
+
+const FormInputPrefix = ({ direction, prefix, name }) => {
+    if (!prefix)
+        return false;
+    return (h("div", { dir: direction, class: cn('form-input-prefix', {
+            [`${name}-prefix`]: !!name,
+        }), part: cn('form-input-prefix', {
+            [`${name}-prefix`]: !!name,
+        }) }, prefix));
+};
+
+const whiteLoaderSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIgogICAgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWxvYWRlciI+CiAgICA8cGF0aCBkPSJNMTIgMnY0IiAvPgogICAgPHBhdGggZD0ibTE2LjIgNy44IDIuOS0yLjkiIC8+CiAgICA8cGF0aCBkPSJNMTggMTJoNCIgLz4KICAgIDxwYXRoIGQ9Im0xNi4yIDE2LjIgMi45IDIuOSIgLz4KICAgIDxwYXRoIGQ9Ik0xMiAxOHY0IiAvPgogICAgPHBhdGggZD0ibTQuOSAxOS4xIDIuOS0yLjkiIC8+CiAgICA8cGF0aCBkPSJNMiAxMmg0IiAvPgogICAgPHBhdGggZD0ibTQuOSA0LjkgMi45IDIuOSIgLz4KPC9zdmc+';
+
 export { FormInputPrefix as F, TickIcon as T, getCustomClassesForPortal as g, whiteLoaderSvg as w };

package/dist/integration-manifest.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": 1,
   "package": "adp-web-components",
-  "packageVersion": "0.3.14",
+  "packageVersion": "0.3.16",
   "outputFamily": "per-component",
   "components": [
     {
@@ -20,7 +20,7 @@
           {
             "name": "activeElement",
             "attribute": "active-element",
-            "type": "\"\" | \"vehicle-accessories\" | \"vehicle-claimable-items\" | \"vehicle-paint-thickness\" | \"vehicle-sale-information\" | \"vehicle-service-history\" | \"vehicle-specification\" | \"vehicle-ssc\" | \"vehicle-warranty-details\"",
+            "type": "\"\" | \"vehicle-accessories\" | \"vehicle-claimable-items\" | \"vehicle-paint-thickness\" | \"vehicle-sale-information\" | \"vehicle-service-history\" | \"vehicle-specification\" | \"vehicle-ssc\" | \"vehicle-warranty-details\" | \"vehicle-warranty-timeline\"",
             "default": null,
             "mutable": false,
             "required": false
@@ -54,6 +54,7 @@
           "vehicle-accessories",
           "vehicle-sale-information",
           "vehicle-warranty-details",
+          "vehicle-warranty-timeline",
           "vehicle-service-history",
           "vehicle-paint-thickness",
           "vehicle-claimable-items",
@@ -433,6 +434,69 @@
       },
       "runtimeAssets": { "locales": "dist/locales", "notes": ["Unauthorized campaign lookup and reCAPTCHA configuration are host policy and remain optional raw API properties."] }
     },
+    {
+      "tag": "vehicle-warranty-timeline",
+      "modulePath": "dist/components/vehicle-warranty-timeline.js",
+      "wireContract": "adp.vehicle-warranty-timeline.v1",
+      "supportedLocales": ["en", "ar", "ku", "ru"],
+      "host": {
+        "properties": ["baseUrl", "language", "coreOnly", "disableVinValidation", "queryString"],
+        "methods": ["fetchVin"],
+        "sequence": ["load module", "wait for custom element definition", "set properties", "call a documented method"],
+        "owns": ["lookup request", "response handling", "loading and error state", "warranty coverage rendering"]
+      },
+      "api": {
+        "props": [
+          { "name": "baseUrl", "attribute": "base-url", "type": "string", "default": null, "mutable": false, "required": false },
+          { "name": "coreOnly", "attribute": "core-only", "type": "boolean", "default": null, "mutable": false, "required": false },
+          { "name": "disableVinValidation", "attribute": "disable-vin-validation", "type": "boolean", "default": null, "mutable": false, "required": false },
+          {
+            "name": "errorCallback",
+            "attribute": "error-callback",
+            "type": "((errorMessage: OptionalKeys<{ noBaseUrl: string; invalidVin: string; vinNumberRequired: string; partNumberRequired: string; wrongResponseFormat: string; noPartsFound: string; noServiceAvailable: string; wrongFormStructure: string; wildCard: string; requestFailedPleaseTryAgainLater: string; }>) => void) | string",
+            "default": null,
+            "mutable": false,
+            "required": false
+          },
+          { "name": "headers", "type": "object", "default": null, "mutable": false, "required": false },
+          { "name": "isDev", "attribute": "is-dev", "type": "boolean", "default": null, "mutable": false, "required": false },
+          { "name": "language", "attribute": "language", "type": "\"ar\" | \"en\" | \"ku\" | \"ru\"", "default": null, "mutable": false, "required": false },
+          {
+            "name": "loadedResponse",
+            "attribute": "loaded-response",
+            "type": "((response: VehicleLookupDTO) => void) | string",
+            "default": null,
+            "mutable": false,
+            "required": false
+          },
+          {
+            "name": "loadingStateChange",
+            "attribute": "loading-state-change",
+            "type": "((isLoading: boolean) => void) | string",
+            "default": null,
+            "mutable": false,
+            "required": false
+          },
+          { "name": "queryString", "attribute": "query-string", "type": "string", "default": null, "mutable": false, "required": false }
+        ],
+        "methods": [
+          { "name": "clearData", "parameters": "() => Promise<void>", "returns": "Promise<void>" },
+          { "name": "fetchVin", "parameters": "(newData: VehicleLookupDTO | string, headers?: any) => Promise<void>", "returns": "Promise<void>" },
+          { "name": "setBlazorRef", "parameters": "(newBlazorRef: DotNetObjectReference) => Promise<void>", "returns": "Promise<void>" },
+          { "name": "setErrorMessage", "parameters": "(message: ErrorKeys) => Promise<void>", "returns": "Promise<void>" },
+          { "name": "setMockData", "parameters": "(newMockData: VehicleLookupMock) => Promise<void>", "returns": "Promise<void>" }
+        ],
+        "events": [],
+        "dependencies": []
+      },
+      "runtimeAssets": {
+        "locales": "dist/locales",
+        "notes": [
+          "Warranty coverage only. Campaign rendering, reCAPTCHA and unauthorized campaign lookup are not part of this component; hosts that need them keep vehicle-warranty-details.",
+          "Adopted by pointing a host tab at this tag instead of vehicle-warranty-details. The two can coexist in one deployment."
+        ]
+      }
+    },
     {
       "tag": "vehicle-claimable-items",
       "modulePath": "dist/components/vehicle-claimable-items.js",

package/dist/locales/vehicleLookup/warrantyTimeline/ar.json

@@ -0,0 +1,25 @@
+{
+  "dealer": "الوكيل",
+  "activatedBy": "تم التفعيل بواسطة",
+  "broker": "شريك الأعمال الموثوق به",
+  "authorized": "مصرّح",
+  "unauthorized": "غير مصرّح",
+  "activeWarranty": "لديه ضمان فعّال",
+  "notActiveWarranty": "لا يوجد ضمان فعّال",
+  "warrantyCoverage": "تغطية الضمان",
+  "totalPlannedProtection": "إجمالي الحماية المخططة",
+  "standardWarranty": "ضمان المركبة الجديدة",
+  "standardWarrantyMark": "الضمان الأساسي",
+  "extendedWarranty": "الضمان الممتد",
+  "standard": "أساسي",
+  "extended": "ممتد",
+  "today": "اليوم",
+  "year": "سنة",
+  "years": "سنوات",
+  "month": "شهر",
+  "months": "أشهر",
+  "warrantyNotStarted": "لم يبدأ الضمان",
+  "awaitingBrokerInvoice": "لم يتم إصدار فاتورة لهذه المركبة بعد من قبل شريك الأعمال الموثوق به التالي: ",
+  "awaitingEndCustomerSale": "لم يتم بيع هذه المركبة إلى عميل بعد.",
+  "awaitingActivation": "لم يتم تفعيل ضمان هذه المركبة بعد."
+}

package/dist/locales/vehicleLookup/warrantyTimeline/en.json

@@ -0,0 +1,25 @@
+{
+  "dealer": "Dealer",
+  "activatedBy": "Activated by",
+  "broker": "Trusted Business Partner",
+  "authorized": "Authorized",
+  "unauthorized": "Unauthorized",
+  "activeWarranty": "Has Active Warranty",
+  "notActiveWarranty": "Doesn't Have Active Warranty",
+  "warrantyCoverage": "Warranty coverage",
+  "totalPlannedProtection": "Total planned protection",
+  "standardWarranty": "New Vehicle Warranty",
+  "standardWarrantyMark": "Standard Warranty",
+  "extendedWarranty": "Extended Warranty",
+  "standard": "standard",
+  "extended": "extended",
+  "today": "Today",
+  "year": "year",
+  "years": "years",
+  "month": "month",
+  "months": "months",
+  "warrantyNotStarted": "Warranty has not started",
+  "awaitingBrokerInvoice": "This Vehicle is not yet Invoiced by the following Trusted Business Partner: ",
+  "awaitingEndCustomerSale": "This Vehicle has not been sold to a customer yet.",
+  "awaitingActivation": "This Vehicle's Warranty has not been activated yet."
+}

package/dist/locales/vehicleLookup/warrantyTimeline/ku.json

@@ -0,0 +1,25 @@
+{
+  "dealer": "بریکار",
+  "activatedBy": "چالاککراوە لەلایەن",
+  "broker": "هاوبەشی بازرگانی متمانەپێکراو",
+  "authorized": "ڕێپێدراو",
+  "unauthorized": "ڕێپێنەدراو",
+  "activeWarranty": "گەرەنتی چالاکی هەیە",
+  "notActiveWarranty": "گەرەنتی چالاکی نییە",
+  "warrantyCoverage": "داپۆشینی گەرەنتی",
+  "totalPlannedProtection": "کۆی پاراستنی پلاندراو",
+  "standardWarranty": "گەرەنتی ئۆتۆمبێلی نوێ",
+  "standardWarrantyMark": "گەرەنتی بنەڕەتی",
+  "extendedWarranty": "گەرەنتی درێژکراوە",
+  "standard": "بنەڕەتی",
+  "extended": "درێژکراوە",
+  "today": "ئەمڕۆ",
+  "year": "ساڵ",
+  "years": "ساڵ",
+  "month": "مانگ",
+  "months": "مانگ",
+  "warrantyNotStarted": "گەرەنتی دەستی پێنەکردووە",
+  "awaitingBrokerInvoice": "هێشتا فاتورەی ئەم ئۆتۆمبێلە نەکراوە لەلایەن ئەم هاوبەشە بازرگانییە متمانەپێکراوەی خوارەوە: ",
+  "awaitingEndCustomerSale": "ئەم ئۆتۆمبێلە هێشتا بە کڕیارێک نەفرۆشراوە.",
+  "awaitingActivation": "گەرەنتی ئەم ئۆتۆمبێلە هێشتا چالاک نەکراوە."
+}

package/dist/locales/vehicleLookup/warrantyTimeline/ru.json

@@ -0,0 +1,25 @@
+{
+  "dealer": "Дилер",
+  "activatedBy": "Активировано",
+  "broker": "Доверенный деловой партнер",
+  "authorized": "Авторизован",
+  "unauthorized": "Не авторизован",
+  "activeWarranty": "Действующая гарантия",
+  "notActiveWarranty": "Нет действующей гарантии",
+  "warrantyCoverage": "Гарантийное покрытие",
+  "totalPlannedProtection": "Общая запланированная защита",
+  "standardWarranty": "Гарантия на новый автомобиль",
+  "standardWarrantyMark": "Базовая гарантия",
+  "extendedWarranty": "Расширенная гарантия",
+  "standard": "базовая",
+  "extended": "расширенная",
+  "today": "Сегодня",
+  "year": "г.",
+  "years": "г.",
+  "month": "мес.",
+  "months": "мес.",
+  "warrantyNotStarted": "Гарантия не началась",
+  "awaitingBrokerInvoice": "Счет за этот автомобиль еще не выставлен следующим доверенным деловым партнером: ",
+  "awaitingEndCustomerSale": "Этот автомобиль еще не продан клиенту.",
+  "awaitingActivation": "Гарантия этого автомобиля еще не активирована."
+}

package/dist/locales/vehicleLookup/warrantyTimeline/type.ts

@@ -0,0 +1,29 @@
+import yupTypeMapper from '~lib/yup-type-mapper';
+
+const warrantyTimelineSchema = yupTypeMapper([
+  'dealer',
+  'activatedBy',
+  'broker',
+  'authorized',
+  'unauthorized',
+  'activeWarranty',
+  'notActiveWarranty',
+  'warrantyCoverage',
+  'totalPlannedProtection',
+  'standardWarranty',
+  'standardWarrantyMark',
+  'extendedWarranty',
+  'standard',
+  'extended',
+  'today',
+  'year',
+  'years',
+  'month',
+  'months',
+  'warrantyNotStarted',
+  'awaitingBrokerInvoice',
+  'awaitingEndCustomerSale',
+  'awaitingActivation',
+]);
+
+export default warrantyTimelineSchema;

package/dist/mocks/generated/broker-dealer/vehicle-lookup.json

@@ -29,9 +29,11 @@
     "isAuthorized": true,
     "warranty": {
       "hasActiveWarranty": false,
+      "startState": "AwaitingBrokerInvoice",
       "activationIsRequired": false,
       "activationStatus": "NotRequired",
-      "hasExtendedWarranty": false
+      "hasExtendedWarranty": false,
+      "extendedWarranties": []
     },
     "serviceHistory": [],
     "vehicleSpecification": {
@@ -81,11 +83,23 @@
       "hasActiveWarranty": true,
       "warrantyStartDate": "2024-02-10",
       "warrantyEndDate": "2027-02-10",
+      "startState": "Started",
+      "activatedByBrokerName": "Suli Trade Broker",
       "activationIsRequired": false,
       "activationStatus": "NotRequired",
       "hasExtendedWarranty": true,
       "extendedWarrantyStartDate": "2027-02-10",
       "extendedWarrantyEndDate": "2029-02-10",
+      "extendedWarranties": [
+        {
+          "id": "EW-JTMHF33P5D5012345-1",
+          "providerCompanyID": "1",
+          "providerCompanyLogo": "https://picsum.photos/seed/company-1/320/160",
+          "providerCompanyName": "Al-Rashid Motors",
+          "startDate": "2027-02-10",
+          "endDate": "2029-02-10"
+        }
+      ],
       "freeServiceStartDate": "2024-02-10"
     },
     "nextServiceDate": "2024-11-15",
@@ -283,9 +297,11 @@
     "isAuthorized": true,
     "warranty": {
       "hasActiveWarranty": false,
+      "startState": "AwaitingBrokerInvoice",
       "activationIsRequired": false,
       "activationStatus": "NotRequired",
       "hasExtendedWarranty": false,
+      "extendedWarranties": [],
       "freeServiceStartDate": "2024-06-15",
       "deFactoServiceStartDate": "2024-06-15"
     },
@@ -549,9 +565,11 @@
       "hasActiveWarranty": true,
       "warrantyStartDate": "2024-07-01",
       "warrantyEndDate": "2027-07-01",
+      "startState": "Started",
       "activationIsRequired": false,
       "activationStatus": "NotRequired",
       "hasExtendedWarranty": false,
+      "extendedWarranties": [],
       "freeServiceStartDate": "2024-07-01"
     },
     "nextServiceDate": "2025-09-25",

package/dist/mocks/generated/edge-cases/vehicle-lookup.json

@@ -45,9 +45,11 @@
       "hasActiveWarranty": true,
       "warrantyStartDate": "2026-05-26",
       "warrantyEndDate": "2029-05-26",
+      "startState": "Started",
       "activationIsRequired": false,
       "activationStatus": "NotRequired",
       "hasExtendedWarranty": false,
+      "extendedWarranties": [],
       "freeServiceStartDate": "2026-05-26"
     },
     "serviceHistory": [],
@@ -63,5 +65,60 @@
     "serviceItems": [],
     "accessories": [],
     "basicModelCode": "MXAA52"
+  },
+  "JTMAB7BJ0T4224900": {
+    "vin": "JTMAB7BJ0T4224900",
+    "identifiers": {
+      "vin": "JTMAB7BJ0T4224900",
+      "variant": "VAR001",
+      "katashiki": "MXAA52L-ANXGP",
+      "color": "1G3",
+      "trim": "LA20",
+      "brandID": "1"
+    },
+    "saleInformation": {
+      "countryID": "1",
+      "countryName": "Iraq",
+      "companyID": "5",
+      "companyName": "Sample Distributor",
+      "branchID": "500",
+      "branchName": "Distributor HQ",
+      "invoiceDate": "2026-05-20",
+      "invoiceNumber": "30018300",
+      "distributor": {
+        "companyID": "5",
+        "companyName": "Sample Distributor",
+        "branchID": "500",
+        "branchName": "Distributor HQ",
+        "invoiceNumber": "30018300",
+        "invoiceDate": "2026-05-20"
+      },
+      "intermediaries": []
+    },
+    "paintThicknessInspections": [],
+    "paintThicknessCertificateAvailable": false,
+    "isAuthorized": true,
+    "warranty": {
+      "hasActiveWarranty": false,
+      "startState": "AwaitingEndCustomerSale",
+      "activationIsRequired": false,
+      "activationStatus": "NotRequired",
+      "hasExtendedWarranty": false,
+      "extendedWarranties": []
+    },
+    "serviceHistory": [],
+    "vehicleSpecification": {
+      "modelYear": 2026,
+      "modelDescription": "RAV4 2.0L 4WD",
+      "bodyType": "SUV",
+      "engine": "2.0L M20A-FKS",
+      "doors": "5",
+      "fuel": "Petrol",
+      "transmission": "CVT",
+      "side": "LHD"
+    },
+    "serviceItems": [],
+    "accessories": [],
+    "basicModelCode": "MXAA52"
   }
 }