adp-web-components 0.3.14 → 0.3.16

package/dist/collection/components/vehicle-lookup/components/CoverageTimeline.js

@@ -0,0 +1,317 @@
+/*!
+ * Built by ShiftSoftware
+ * Copyright (c)
+ */
+import { h } from "@stencil/core";
+const TONE_STANDARD = {
+    base: 'var(--green)',
+    dark: 'var(--green-dark)',
+    tint: 'rgba(232, 244, 237, 0.9)',
+    border: 'rgba(44, 138, 88, 0.55)',
+};
+// Extended coverages cycle through these. The prototype hard-coded one class per
+// provider; a vehicle can hold more than two, so the tone repeats and the segment's
+// alternating border style keeps neighbouring bands apart.
+const TONES_EXTENDED = [
+    { base: 'var(--blue)', dark: 'var(--blue-dark)', tint: 'rgba(232, 241, 248, 0.88)', border: 'rgba(48, 113, 169, 0.64)' },
+    { base: 'var(--violet)', dark: 'var(--violet-dark)', tint: 'rgba(240, 236, 247, 0.9)', border: 'rgba(117, 90, 165, 0.65)' },
+];
+const toTimestamp = (isoDate) => Date.parse(`${isoDate}T00:00:00Z`);
+/** DTO dates are serialized as yyyy-MM-dd, but tolerate a full timestamp. */
+const asDate = (value) => (value || '').slice(0, 10);
+const todayInUtc = () => new Date().toISOString().slice(0, 10);
+const clampPercentage = (value) => Math.min(100, Math.max(0, value));
+const asPercentage = (value) => `${value.toFixed(6)}%`;
+const monthsBetween = (start, end) => {
+    const [startYear, startMonth, startDay] = start.split('-').map(Number);
+    const [endYear, endMonth, endDay] = end.split('-').map(Number);
+    const months = (endYear - startYear) * 12 + (endMonth - startMonth) - (endDay < startDay ? 1 : 0);
+    return Math.max(0, months);
+};
+const formatDuration = (months, locale) => {
+    const years = Math.floor(months / 12);
+    const remainingMonths = months % 12;
+    const parts = [];
+    if (years)
+        parts.push(`${years} ${years === 1 ? locale.year : locale.years}`);
+    if (remainingMonths || !years)
+        parts.push(`${remainingMonths} ${remainingMonths === 1 ? locale.month : locale.months}`);
+    return parts.join(' ');
+};
+const buildCoverages = (vehicleInformation, locale) => {
+    const warranty = vehicleInformation === null || vehicleInformation === void 0 ? void 0 : vehicleInformation.warranty;
+    const coverages = [];
+    const standardStart = asDate(warranty === null || warranty === void 0 ? void 0 : warranty.warrantyStartDate);
+    const standardEnd = asDate(warranty === null || warranty === void 0 ? void 0 : warranty.warrantyEndDate);
+    if (standardStart && standardEnd && toTimestamp(standardEnd) > toTimestamp(standardStart))
+        coverages.push({
+            id: 'standard',
+            kind: 'standard',
+            label: locale.standardWarranty,
+            start: standardStart,
+            end: standardEnd,
+            tone: TONE_STANDARD,
+            alt: false,
+        });
+    ((warranty === null || warranty === void 0 ? void 0 : warranty.extendedWarranties) || [])
+        .map(coverage => ({
+        id: (coverage === null || coverage === void 0 ? void 0 : coverage.id) || '',
+        name: (coverage === null || coverage === void 0 ? void 0 : coverage.name) || '',
+        providerName: (coverage === null || coverage === void 0 ? void 0 : coverage.providerCompanyName) || '',
+        logo: (coverage === null || coverage === void 0 ? void 0 : coverage.providerCompanyLogo) || '',
+        start: asDate(coverage === null || coverage === void 0 ? void 0 : coverage.startDate),
+        end: asDate(coverage === null || coverage === void 0 ? void 0 : coverage.endDate),
+    }))
+        .filter(coverage => coverage.start && coverage.end && toTimestamp(coverage.end) > toTimestamp(coverage.start))
+        .sort((a, b) => toTimestamp(a.start) - toTimestamp(b.start))
+        .forEach((coverage, index) => {
+        coverages.push({
+            id: coverage.id || `extended-${index}`,
+            kind: 'extended',
+            // The identifier is not a display string. A configured definition supplies a name;
+            // a persisted entry has none, so those fall back to the generic label.
+            label: coverage.name || locale.extendedWarranty,
+            start: coverage.start,
+            end: coverage.end,
+            tone: TONES_EXTENDED[index % TONES_EXTENDED.length],
+            alt: index % 2 === 1,
+            logo: coverage.logo || undefined,
+            providerName: coverage.providerName || undefined,
+        });
+    });
+    return coverages;
+};
+/** Coverage name, qualified by the provider when one resolved. Used for the accessible text only. */
+const describe = (coverage) => (coverage.providerName ? `${coverage.label} · ${coverage.providerName}` : coverage.label);
+const coverageStatus = (coverage, today) => {
+    const snapshot = toTimestamp(today);
+    if (snapshot < toTimestamp(coverage.start))
+        return 'upcoming';
+    if (snapshot >= toTimestamp(coverage.end))
+        return 'expired';
+    return 'active';
+};
+/** Track drawn past the snapshot so the marker sits in the rail rather than on its edge. */
+const RAIL_HEADROOM = 0.04;
+/**
+ * The span the rail draws. Coverage fixes one end; today is always inside it.
+ *
+ * A rail that stopped at the last expiry date would put "today" hard against its edge and lose the
+ * one thing a lapsed warranty most needs to show — how long ago cover ran out. Drawing through to
+ * today instead turns that into what it is: empty track, as wide as the time that has passed.
+ */
+const railRange = (coverages, today) => {
+    const first = toTimestamp(coverages[0].start);
+    const last = coverages.reduce((latest, coverage) => Math.max(latest, toTimestamp(coverage.end)), toTimestamp(coverages[0].end));
+    const snapshot = toTimestamp(today);
+    const headroom = Math.round((Math.max(last, snapshot) - Math.min(first, snapshot)) * RAIL_HEADROOM);
+    return {
+        from: first <= snapshot ? first : snapshot - headroom,
+        to: last >= snapshot ? last : snapshot + headroom,
+    };
+};
+const toneVariables = (tone) => ({
+    '--tone': tone.base,
+    '--tone-dark': tone.dark,
+    '--tone-tint': tone.tint,
+    '--tone-border': tone.border,
+});
+/** Clearance between two axis dates before they read as one smudge. */
+const AXIS_GAP = 10;
+/**
+ * Hides the axis dates that would collide, always keeping the closing one.
+ *
+ * Crowding is not only a narrow-screen problem: consecutive coverages routinely hand over within a
+ * week of each other on a rail spanning years, and those two labels overlap at any width. The
+ * decision needs the measured width of rendered text, which the render pass cannot know, so it is
+ * applied to the DOM afterwards and re-applied whenever the rail is resized.
+ */
+const thinAxis = (axis) => {
+    if (!axis)
+        return;
+    const apply = () => {
+        const dates = Array.from(axis.children);
+        const railWidth = axis.clientWidth;
+        // jsdom reports no layout, so specs leave every date alone rather than hiding all of them.
+        if (dates.length < 2 || !railWidth)
+            return;
+        dates.forEach(date => date.classList.remove('is-crowded'));
+        const last = dates.length - 1;
+        const boxOf = (date) => {
+            const at = (parseFloat(date.style.getPropertyValue('--at')) / 100) * railWidth;
+            const width = date.offsetWidth;
+            // Mirrors the stylesheet: a date at the rail's start runs rightwards from its tick, one at
+            // its end leftwards from its own, and everything between is centred on its tick.
+            if (date.dataset.align === 'start')
+                return [at, at + width];
+            if (date.dataset.align === 'end')
+                return [at - width, at];
+            return [at - width / 2, at + width / 2];
+        };
+        const boxes = dates.map(boxOf);
+        const survives = new Set([0, last]);
+        let occupiedTo = boxes[0][1];
+        for (let index = 1; index < last; index++) {
+            const [left, right] = boxes[index];
+            if (left < occupiedTo + AXIS_GAP)
+                continue;
+            if (right + AXIS_GAP > boxes[last][0])
+                continue;
+            survives.add(index);
+            occupiedTo = right;
+        }
+        // A rail too narrow to hold even the two bounds keeps the closing date: when the cover runs out
+        // is the question the panel is answering.
+        if (boxes[0][1] + AXIS_GAP > boxes[last][0])
+            survives.delete(0);
+        dates.forEach((date, index) => date.classList.toggle('is-crowded', !survives.has(index)));
+    };
+    const schedule = () => (typeof requestAnimationFrame === 'function' ? requestAnimationFrame(apply) : apply());
+    schedule();
+    // Both triggers are needed and neither is enough on its own: the rail resizes without the dates
+    // changing, and switching vehicle replaces the dates without the rail resizing.
+    if (axis.__axisWatched)
+        return;
+    axis.__axisWatched = true;
+    if (typeof ResizeObserver !== 'undefined')
+        new ResizeObserver(schedule).observe(axis);
+    if (typeof MutationObserver !== 'undefined')
+        new MutationObserver(schedule).observe(axis, { childList: true });
+};
+/** Pulls the snapshot pill back onto the rail when centring it would overhang either edge. */
+const positionTodayPill = (head, todayPosition) => {
+    if (!head)
+        return;
+    const apply = () => {
+        const pill = head.firstElementChild;
+        if (!pill || !head.clientWidth)
+            return;
+        const pillCentre = (head.clientWidth * clampPercentage(todayPosition)) / 100;
+        head.classList.toggle('is-near-end', pillCentre + pill.offsetWidth / 2 > head.clientWidth);
+        head.classList.toggle('is-near-start', pillCentre - pill.offsetWidth / 2 < 0);
+    };
+    if (typeof requestAnimationFrame === 'function')
+        requestAnimationFrame(apply);
+    else
+        apply();
+};
+// Inline rather than an ~assets import: the glyph takes its colour from the badge
+// state via currentColor, which an <img src> cannot do.
+const BADGE_GLYPHS = {
+    positive: 'M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z',
+    negative: 'M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z',
+};
+/**
+ * Why the warranty has not started. Possession is not a sale: while the distributor, an intermediary
+ * or an un-invoiced broker still holds the vehicle, coverage deliberately has not begun and the
+ * holder's invoice date is not used — the customer would lose that period off the front. The panel
+ * says so rather than showing an unexplained empty rail.
+ *
+ * Only the broker case is derivable from the response; the supply-chain cases depend on the host's
+ * own company classification, so the reason is read from the DTO. An older API that does not send
+ * `startState` reads as started and shows nothing, exactly as before.
+ */
+const notStartedMessage = (vehicleInformation, locale) => {
+    var _a, _b, _c;
+    const startState = (_a = vehicleInformation === null || vehicleInformation === void 0 ? void 0 : vehicleInformation.warranty) === null || _a === void 0 ? void 0 : _a.startState;
+    if (!vehicleInformation || !startState || startState === 'Started')
+        return '';
+    if (startState === 'AwaitingBrokerInvoice')
+        return locale.awaitingBrokerInvoice + (((_c = (_b = vehicleInformation === null || vehicleInformation === void 0 ? void 0 : vehicleInformation.saleInformation) === null || _b === void 0 ? void 0 : _b.broker) === null || _c === void 0 ? void 0 : _c.brokerName) || '');
+    if (startState === 'AwaitingEndCustomerSale')
+        return locale.awaitingEndCustomerSale;
+    return locale.awaitingActivation;
+};
+/**
+ * The one row the card is allowed to gain and lose. The grid track animates the height rather than
+ * the content, so the row still slides shut on the frame its message is cleared. Everything else
+ * keeps its place and fades, which is what holds the card to a single height across vehicles.
+ */
+const Collapsible = ({ open }, children) => (h("div", { class: "collapsible", "data-open": open ? 'true' : 'false', "aria-hidden": open ? null : 'true' }, h("div", { class: "collapsible-body" }, children)));
+const NoticeStrip = ({ text }) => (h("div", { class: "warranty-notice", role: "status" }, h("svg", { class: "notice-icon", viewBox: "0 0 512 512", "aria-hidden": "true", focusable: "false" }, h("path", { fill: "currentColor", d: BADGE_GLYPHS.negative })), h("span", null, text)));
+/**
+ * A verdict, or the absence of one. Before a lookup there is no vehicle to judge, and an absent
+ * `isAuthorized` reading as `false` opened the panel accusing every vehicle of being unauthorized
+ * and out of cover. The idle chip keeps its box and its split cap so nothing shifts when the
+ * verdict lands, and asserts nothing until it does — the treatment the older warranty panel
+ * already gives its own cards.
+ */
+const StatusBadge = ({ state, text }) => {
+    const idle = state === 'idle';
+    return (h("span", { class: `status-badge is-${state}`, "aria-label": idle ? null : text, "aria-hidden": idle ? 'true' : null }, h("svg", { class: "badge-icon", viewBox: "0 0 512 512", "aria-hidden": "true", focusable: "false" }, !idle && h("path", { fill: "currentColor", d: state === 'positive' ? BADGE_GLYPHS.positive : BADGE_GLYPHS.negative })), h("span", null, idle ? '' : text)));
+};
+export default function CoverageTimeline({ vehicleInformation, locale, isAuthorized, today }) {
+    var _a, _b;
+    const snapshot = today || todayInUtc();
+    const coverages = buildCoverages(vehicleInformation, locale);
+    const hasCoverage = coverages.length > 0;
+    const dealerName = ((_a = vehicleInformation === null || vehicleInformation === void 0 ? void 0 : vehicleInformation.saleInformation) === null || _a === void 0 ? void 0 : _a.companyName) || '';
+    const notice = notStartedMessage(vehicleInformation, locale);
+    // The broker that actually anchored the warranty — a warranty fact, not a sale fact, so it is read
+    // from the warranty DTO rather than inferred from the presence of a broker on the sale.
+    const activatingBroker = ((_b = vehicleInformation === null || vehicleInformation === void 0 ? void 0 : vehicleInformation.warranty) === null || _b === void 0 ? void 0 : _b.activatedByBrokerName) || '';
+    // "Activated by" is only truthful once something started the coverage. Before that the company is
+    // just the dealer holding it, and when a broker started it both parties matter.
+    const dealerLabel = activatingBroker || notice ? locale.dealer : locale.activatedBy;
+    const hasActiveWarranty = coverages.some(coverage => coverageStatus(coverage, snapshot) === 'active');
+    // Both chips are verdicts about a vehicle, so neither can be given before there is one to judge.
+    const verdict = (isPositive) => (!vehicleInformation ? 'idle' : isPositive ? 'positive' : 'negative');
+    const range = hasCoverage ? railRange(coverages, snapshot) : { from: 0, to: 1 };
+    const positionInRange = (isoDate) => ((toTimestamp(isoDate) - range.from) / (range.to - range.from)) * 100;
+    // The stripe is proportioned across the cover itself, not the rail. The rail stretches to reach
+    // today, so sharing its scale would leave the stripe part-drawn, with the last band's colour
+    // running out to the edge on any vehicle whose warranty has lapsed.
+    const planFrom = hasCoverage ? toTimestamp(coverages[0].start) : 0;
+    const planTo = hasCoverage ? coverages.reduce((latest, coverage) => Math.max(latest, toTimestamp(coverage.end)), planFrom + 1) : 1;
+    const positionInPlan = (isoDate) => ((toTimestamp(isoDate) - planFrom) / (planTo - planFrom)) * 100;
+    const ticks = hasCoverage ? Array.from(new Set(coverages.flatMap(coverage => [coverage.start, coverage.end]))).sort((a, b) => toTimestamp(a) - toTimestamp(b)) : [];
+    // Inside the rail by construction; clamped anyway so malformed dates can never put an element at
+    // `left: 190%`, which widens the rail to match and makes the card scroll sideways to reach it.
+    const todayPosition = hasCoverage ? clampPercentage(positionInRange(snapshot)) : 0;
+    const cardAccent = !hasCoverage
+        ? // No bands means no coverage to describe, so the accent must not fall through to a
+            // green/blue/violet gradient — that reads as a three-stage plan on a vehicle that has none.
+            // Red when we are saying why coverage has not started, otherwise inert.
+            notice
+                ? 'var(--red)'
+                : 'var(--line)'
+        : coverages.length === 1
+            ? TONE_STANDARD.base
+            : `linear-gradient(90deg, ${coverages
+                .map(coverage => `${coverage.tone.base} ${asPercentage(positionInPlan(coverage.start))} ${asPercentage(positionInPlan(coverage.end))}`)
+                .join(', ')})`;
+    const summary = coverages.map(coverage => `${describe(coverage)}: ${coverage.start} — ${coverage.end} (${coverageStatus(coverage, snapshot)})`).join('. ');
+    // One structure for every vehicle. Blocks a vehicle has nothing to put in fade out in place
+    // instead of being dropped, so moving between vehicles does not resize the card under the reader.
+    return (h("article", { class: "coverage-timeline warranty-card", "data-empty": hasCoverage ? 'false' : 'true', style: { '--card-accent': cardAccent } }, h("header", { class: "activation-header" }, h("div", { class: "activation-main" }, h("p", { class: "activation-title" }, h("span", null, dealerLabel, ":"), " ", h("strong", null, dealerName || '—')), h("div", { class: "broker-slot", "data-empty": activatingBroker ? 'false' : 'true', "aria-hidden": activatingBroker ? null : 'true' }, h("p", { class: "activation-broker" }, h("span", null, locale.broker, ":"), " ", h("strong", null, activatingBroker)))), h("div", { class: "total-slot", "data-empty": hasCoverage ? 'false' : 'true', "aria-hidden": hasCoverage ? null : 'true' }, h(TotalCoverage, { coverages: coverages, locale: locale }))), h(Collapsible, { open: !!notice }, h(NoticeStrip, { text: notice })), h("section", { class: "journey", "aria-label": locale.warrantyCoverage }, h("div", { class: "journey-head" }, h(StatusBadge, { state: verdict(isAuthorized), text: isAuthorized ? locale.authorized : locale.unauthorized }), h(StatusBadge, { state: verdict(hasActiveWarranty), text: hasActiveWarranty ? locale.activeWarranty : locale.notActiveWarranty })), h("div", { class: "timeline-shell", "data-empty": hasCoverage ? 'false' : 'true', "aria-hidden": hasCoverage ? null : 'true' }, h("div", { class: "timeline shift-skeleton", role: "group", "aria-label": locale.warrantyCoverage }, h("div", { class: "today-head", "aria-hidden": "true", style: { '--at': asPercentage(todayPosition) }, ref: element => positionTodayPill(element, todayPosition) }, hasCoverage && h("span", { class: "today-pill" }, `${locale.today} · ${snapshot}`)), h("div", { class: "axis", "aria-hidden": "true", ref: thinAxis }, ticks.map(tick => {
+        const at = positionInRange(tick);
+        // Ticks no longer necessarily reach the rail's ends — a lapsed warranty's dates all
+        // sit left of today — so which way a date is set follows its position rather than
+        // its place in the list.
+        return (h("span", { class: "axis-date", key: tick, "data-align": at <= 0.5 ? 'start' : at >= 99.5 ? 'end' : 'mid', style: { '--at': asPercentage(at) } }, tick));
+    })), h("div", { class: "lane" }, hasCoverage && h("span", { class: "today-tail", "aria-hidden": "true", style: { '--at': asPercentage(todayPosition) } }), h("div", { class: "coverage-list", role: "list" }, coverages.map(coverage => {
+        const status = coverageStatus(coverage, snapshot);
+        const start = positionInRange(coverage.start);
+        const span = positionInRange(coverage.end) - start;
+        return (h("div", { key: coverage.id, role: "listitem", class: "coverage-entry", "data-kind": coverage.kind, "data-status": status, "aria-label": `${describe(coverage)}, ${coverage.start} — ${coverage.end}`, style: Object.assign({ '--start': asPercentage(start), '--span': asPercentage(span) }, toneVariables(coverage.tone)) }, h("div", { class: `segment ${coverage.kind === 'standard' ? 'is-standard' : 'is-extended'}${coverage.alt ? ' tone-alt' : ''}` }, coverage.kind === 'standard' ? (h("strong", null, locale.standardWarrantyMark)) : coverage.logo ? (
+        // Decorative: the provider is already named in the entry's aria-label,
+        // so alt text here would announce it twice.
+        h("img", { class: "provider-logo", src: coverage.logo, alt: "", loading: "lazy" })) : null), h("span", { class: "coverage-label" }, coverage.label)));
+    })), hasCoverage && h("span", { class: "past-wash", "aria-hidden": "true", style: { '--to': asPercentage(todayPosition) } }), h("div", { class: "boundary-layer", "aria-hidden": "true" }, coverages.slice(1).map(coverage => (h("span", { key: coverage.id, class: "boundary", style: Object.assign({ '--at': asPercentage(positionInRange(coverage.start)) }, toneVariables(coverage.tone)) })))), hasCoverage && h("span", { class: "today-marker", "aria-hidden": "true", style: { '--at': asPercentage(todayPosition) } })), hasCoverage && h("p", { class: "sr-only" }, summary))))));
+}
+function TotalCoverage({ coverages, locale }) {
+    const monthsFor = (kind) => coverages.filter(coverage => coverage.kind === kind).reduce((total, coverage) => total + monthsBetween(coverage.start, coverage.end), 0);
+    const standardMonths = monthsFor('standard');
+    const extendedMonths = monthsFor('extended');
+    const mix = [
+        standardMonths ? `${formatDuration(standardMonths, locale)} ${locale.standard}` : '',
+        extendedMonths ? `${formatDuration(extendedMonths, locale)} ${locale.extended}` : '',
+    ]
+        .filter(Boolean)
+        .join(' + ');
+    // The block keeps its box on a vehicle with no coverage so the header does not resize, but it
+    // reports no total rather than a total of zero — and a dash is narrow enough that it does not
+    // reflow the label beside it, which is what made the invisible block taller than a real one.
+    const total = mix ? formatDuration(standardMonths + extendedMonths, locale) : '—';
+    return (h("aside", { class: "total-coverage", "aria-label": `${locale.totalPlannedProtection}: ${mix || total}` }, h("span", null, locale.totalPlannedProtection), h("strong", null, total), h("span", { class: "coverage-mix" }, mix)));
+}

package/dist/collection/components/vehicle-lookup/components/claimable-item-popover.js

@@ -6,6 +6,7 @@ import { h } from "@stencil/core";
 import cn from "../../../global/lib/cn";
 import { formatDateTime } from "../../../global/lib/format-date-time";
 import { TriangleIcon } from "../../../global/assets/triangle-icon";
+import { CheckIcon } from "../../../global/assets/check-icon";
 import { ActivationIcon } from "../../../global/assets/activation-icon";
 const detailRows = [
     {
@@ -21,19 +22,41 @@ const detailRows = [
     { label: 'jobNumber', key: 'jobNumber' },
     { label: 'packageCode', key: 'packageCode' },
 ];
+// A locked reward has no catalog entry naming its prerequisites — they are services the customer
+// pays for outside this catalog, which is why the mileage label is the only name there is.
+const lockExplanations = {
+    Locked: 'Complete the services below to unlock this item.',
+    Missed: 'This item was available until the next periodic service was performed.',
+};
 export const POPOVER_WIDTH = 540;
 const HALF_POPOVER_WIDTH = POPOVER_WIDTH / 2;
 const ARROW_PADDING = 19;
 const ARROW_HALF_WIDTH = 25;
 const VIEWPORT_PADDING = 16;
+// Three columns to a row, as the claim voucher lays its specs out. The count is what makes the
+// popover short enough to need no scrolling: eight fields is three rows here and eight rows stacked.
+const SPEC_COLUMNS = 3;
+// Every field but one has a bounded length — a date, a type, an invoice or job number — and fits a
+// third of the card comfortably. A package code is whatever the source system writes, so it gets two
+// columns and is packed as if it were two fields.
+const specColumns = (row) => (row.key === 'packageCode' ? 2 : 1);
+const detailValue = (item, row) => (item ? (row.formatter ? row.formatter(item) : item[row.key]) : '');
 export const ClaimableItemPopover = ({ locale, item, target, popoverHeight, showPopover, fadingOut, contentFading, bodyContentHeight, claim, onMouseEnter, onMouseLeave, }) => {
+    var _a;
     const viewportWidth = window.innerWidth;
     const viewportHeight = window.innerHeight;
     const minArrowX = VIEWPORT_PADDING + ARROW_HALF_WIDTH;
     const maxArrowX = viewportWidth - VIEWPORT_PADDING - ARROW_HALF_WIDTH;
     const arrowX = Math.max(minArrowX, Math.min(target.centerX, maxArrowX));
-    const fitsBelow = target.bottomY + ARROW_PADDING + popoverHeight + VIEWPORT_PADDING <= viewportHeight;
-    const flipVertically = !fitsBelow;
+    const spaceBelow = viewportHeight - target.bottomY - ARROW_PADDING - VIEWPORT_PADDING;
+    const spaceAbove = target.topY - ARROW_PADDING - VIEWPORT_PADDING;
+    // Flip only when below cannot hold it AND above genuinely has more room. Flipping on "does not fit
+    // below" alone moves the overflow to the top of the window rather than removing it.
+    //
+    // There is deliberately no height cap and nothing scrolls: the popover is laid out to stay short —
+    // three specs to a row and prerequisites as chips that wrap — so the content cannot grow into a
+    // column tall enough to need one.
+    const flipVertically = popoverHeight > spaceBelow && spaceAbove > spaceBelow;
     // Anchor by `bottom` when flipped so the popover's height doesn't drag its visible
     // position up/down between items with different content. Anchor by `top` otherwise.
     const verticalStyle = flipVertically
@@ -47,5 +70,30 @@ export const ClaimableItemPopover = ({ locale, item, target, popoverHeight, show
         bodyOffset = VIEWPORT_PADDING - naturalBodyLeft;
     else if (naturalBodyRight > viewportWidth - VIEWPORT_PADDING)
         bodyOffset = viewportWidth - VIEWPORT_PADDING - naturalBodyRight;
-    return (h("div", { "aria-expanded": showPopover.toString(), dir: locale.sharedLocales.direction, style: Object.assign(Object.assign({}, verticalStyle), { left: `${left}px` }), class: cn('claimable-item-popover', { 'fading-out': fadingOut, 'content-fading': contentFading }), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, h("div", { class: "popover-relative-container" }, h("div", { class: cn('popover-arrow-icon', { flipped: flipVertically }) }, h(TriangleIcon, { class: "popover-arrow-icon-svg" }), h("div", { class: "popover-arrow-bottom-line" })), h("div", { style: { transform: `translateX(${bodyOffset}px)` }, class: "popover-body" }, h("div", { class: "popover-body-content", style: bodyContentHeight > 0 ? { height: `${bodyContentHeight}px` } : {} }, h("div", { class: "popover-body-inner" }, detailRows.map(row => (h("div", { class: "popover-info-row" }, h("b", null, locale[row.label]), h("div", { class: "popover-info-value" }, item ? ((row === null || row === void 0 ? void 0 : row.formatter) ? row.formatter(item) : item[row.key]) : '')))), (item === null || item === void 0 ? void 0 : item.claimable) && (h("button", { onClick: () => claim && claim(item), class: "claim-button" }, h(ActivationIcon, null), h("span", null, locale.claim)))))))));
+    // A field with nothing in it is not information. Claim details are the common case — an item that
+    // is pending, expired, cancelled or locked has never been claimed, so its claim date, claiming
+    // company, invoice and job number are all blank — but the rule is about the value, not the state,
+    // so it needs no list of which statuses to except.
+    //
+    // Falls back to the full set if that would leave nothing at all, so the popover is never empty.
+    const populatedRows = detailRows.filter(row => !!detailValue(item, row));
+    const visibleRows = populatedRows.length > 0 ? populatedRows : detailRows;
+    // Packed by column width rather than by count, so a two-column field never gets squeezed into a
+    // third of a row and wrapped.
+    const specRows = [];
+    let currentRow = [];
+    let columnsUsed = 0;
+    for (const row of visibleRows) {
+        const columns = specColumns(row);
+        if (currentRow.length && columnsUsed + columns > SPEC_COLUMNS) {
+            specRows.push(currentRow);
+            currentRow = [];
+            columnsUsed = 0;
+        }
+        currentRow.push(row);
+        columnsUsed += columns;
+    }
+    if (currentRow.length)
+        specRows.push(currentRow);
+    return (h("div", { "aria-expanded": showPopover.toString(), dir: locale.sharedLocales.direction, style: Object.assign(Object.assign({}, verticalStyle), { left: `${left}px` }), class: cn('claimable-item-popover', { 'fading-out': fadingOut, 'content-fading': contentFading }), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, h("div", { class: "popover-relative-container" }, h("div", { class: cn('popover-arrow-icon', { flipped: flipVertically }) }, h(TriangleIcon, { class: "popover-arrow-icon-svg" }), h("div", { class: "popover-arrow-bottom-line" })), h("div", { style: { transform: `translateX(${bodyOffset}px)` }, class: "popover-body" }, h("div", { class: "popover-body-content", style: bodyContentHeight > 0 ? { height: `${bodyContentHeight}px` } : {} }, h("div", { class: "popover-body-inner" }, specRows.map(specRow => (h("div", { class: "popover-specs" }, specRow.map(row => (h("div", { class: cn('popover-spec', { pkg: specColumns(row) > 1, full: specColumns(row) > 1 && specRow.length === 1 }) }, h("div", { class: "lab" }, locale[row.label]), h("div", { class: "val", dir: "ltr" }, detailValue(item, row)))))))), (item === null || item === void 0 ? void 0 : item.lock) && (h("div", { class: cn('popover-lock', `popover-lock-${item.lock.state}`) }, h("div", { class: "lab" }, lockExplanations[item.lock.state]), ((_a = item.lock.prerequisites) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("div", { class: "popover-lock-prerequisites" }, item.lock.prerequisites.map(prerequisite => (h("div", { class: cn('popover-prerequisite', { satisfied: prerequisite.satisfied }) }, h("div", { class: "popover-prerequisite-mark" }, prerequisite.satisfied ? h(CheckIcon, null) : null), h("div", { class: "popover-prerequisite-text" }, h("div", { class: "val", dir: "ltr" }, prerequisite.label), h("div", { class: "popover-prerequisite-date", dir: "ltr" }, prerequisite.satisfiedOn ? formatDateTime(prerequisite.satisfiedOn) : ''))))))))), (item === null || item === void 0 ? void 0 : item.claimable) && (h("button", { onClick: () => claim && claim(item), class: "claim-button" }, h(ActivationIcon, null), h("span", null, locale.claim)))))))));
 };

package/dist/collection/components/vehicle-lookup/components/claimable-item.js

@@ -9,6 +9,8 @@ import pendingIcon from "~assets/pending.svg";
 import cancelledIcon from "~assets/cancelled.svg";
 import processedIcon from "~assets/processed.svg";
 import activationRequiredIcon from "~assets/activationRequired.svg";
+import { LockIcon } from "../../../global/assets/lock-icon";
+import { HourglassIcon } from "../../../global/assets/hourglass-icon";
 const icons = {
     expired: expiredIcon,
     pending: pendingIcon,
@@ -16,7 +18,14 @@ const icons = {
     cancelled: cancelledIcon,
     activationRequired: activationRequiredIcon,
 };
+// The only two words this feature adds to the screen, kept together so moving them into the locale
+// files is one edit. Left untranslated deliberately for now — see the locked-items plan.
+const lockStateLabels = {
+    Locked: 'Locked',
+    Missed: 'Missed',
+};
 export const ClaimableItem = ({ item, locale, addStatusClass, setClaimableItemPopover }) => {
+    var _a;
     const removeLoadAnimationClass = (event) => {
         const component = event.target;
         component.classList.remove('load-animation');
@@ -24,5 +33,9 @@ export const ClaimableItem = ({ item, locale, addStatusClass, setClaimableItemPo
     let headerEl;
     const openPopover = () => setClaimableItemPopover(true, item, headerEl);
     const closePopover = () => setClaimableItemPopover(false);
-    return (h("div", { class: cn('claimable-item', { [item.status]: addStatusClass }) }, h("div", { class: "claimable-item-container" }, h("div", { ref: el => (headerEl = el), onBlur: closePopover, onClick: openPopover, onMouseEnter: openPopover, onMouseLeave: closePopover, onAnimationEnd: removeLoadAnimationClass, class: "claimable-item-header load-animation" }, h("img", { src: icons[item.status], alt: "status icon" }), h("div", null, locale[item === null || item === void 0 ? void 0 : item.status])), h("div", { onAnimationEnd: removeLoadAnimationClass, class: "claimable-item-circle load-animation" }), h("div", { onAnimationEnd: removeLoadAnimationClass, class: "claimable-item-footer load-animation" }, item === null || item === void 0 ? void 0 : item.name))));
+    // A locked or missed item carries an ordinary status underneath — usually pending, because
+    // nothing about its lifecycle changed. The lock is what the customer is being told, so it takes
+    // over the card: the status would say "Pending" about a reward they cannot claim.
+    const lockState = (_a = item === null || item === void 0 ? void 0 : item.lock) === null || _a === void 0 ? void 0 : _a.state;
+    return (h("div", { class: cn('claimable-item', { [item.status]: addStatusClass && !lockState, [`lock-${lockState}`]: !!lockState }) }, h("div", { class: "claimable-item-container" }, h("div", { ref: el => (headerEl = el), onBlur: closePopover, onClick: openPopover, onMouseEnter: openPopover, onMouseLeave: closePopover, onAnimationEnd: removeLoadAnimationClass, class: "claimable-item-header load-animation" }, lockState ? h("div", { class: "claimable-item-lock-icon" }, lockState === 'Missed' ? h(HourglassIcon, null) : h(LockIcon, null)) : h("img", { src: icons[item.status], alt: "status icon" }), h("div", null, lockState ? lockStateLabels[lockState] : locale[item === null || item === void 0 ? void 0 : item.status])), h("div", { onAnimationEnd: removeLoadAnimationClass, class: "claimable-item-circle load-animation" }), h("div", { onAnimationEnd: removeLoadAnimationClass, class: "claimable-item-footer load-animation" }, item === null || item === void 0 ? void 0 : item.name))));
 };

package/dist/collection/components/vehicle-lookup/vehicle-accessories.css

@@ -1 +1 @@
-*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: ;border:0 solid #e5e7eb;box-sizing:border-box}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.\!pointer-events-none{pointer-events:none!important}.fixed{position:fixed}.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}.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))}.\!overflow-hidden{overflow:hidden!important}.rounded-\[4px\]{border-radius:4px}.border{border-width:1px}.opacity-0{opacity:0}.opacity-100{opacity:1}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.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}}.image-viewer-overlay{background-color:rgba(0,0,0,.4);height:100dvh;left:0;opacity:0;pointer-events:none;position:fixed;top:0;transition-duration:.4s;transition-property:all;width:100dvw;z-index:50}.image-viewer-overlay.active{opacity:1;pointer-events:auto;transition-delay:.2s}.image-viewer-close-btn{align-items:center;cursor:pointer;display:flex;flex-direction:column;float:right;height:3rem;justify-content:center;margin-right:16px;margin-top:16px;width:3rem}.image-viewer-close-line{background-color:#fff;border-radius:9999px;height:.25rem;position:absolute;width:3rem}.image-viewer-close-line.first{transform:rotate(45deg)}.image-viewer-close-line.second{transform:rotate(-45deg)}.image-viewer-expanded-image{border-radius:.5rem;opacity:0;position:fixed;transition-property:all;z-index:50}.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}*,:host *{font-family:inherit!important}.pointer-events-none{pointer-events:none}.static{position:static}.mx-auto{margin-left:auto;margin-right:auto}.size-\[100px\]{height:100px;width:100px}.size-full{height:100%;width:100%}.h-auto{height:auto}.max-h-\[100px\]{max-height:100px}.w-auto{width:auto}.w-fit{width:fit-content}.max-w-\[100px\]{max-width:100px}.shrink-0{flex-shrink:0}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.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{--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)}.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)}.duration-300{transition-duration:.3s}.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)}.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))}.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-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}.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)}.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}.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))}.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)}.duration-200{transition-duration:.2s}.\[\&_\*\]\:shrink-0 *{flex-shrink:0}.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))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/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)}.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}.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}
+*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: ;border:0 solid #e5e7eb;box-sizing:border-box}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.\!pointer-events-none{pointer-events:none!important}.fixed{position:fixed}.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}.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))}.\!overflow-hidden{overflow:hidden!important}.rounded-\[4px\]{border-radius:4px}.border{border-width:1px}.opacity-0{opacity:0}.opacity-100{opacity:1}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.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}}.image-viewer-overlay{background-color:rgba(0,0,0,.4);height:100dvh;left:0;opacity:0;pointer-events:none;position:fixed;top:0;transition-duration:.4s;transition-property:all;width:100dvw;z-index:50}.image-viewer-overlay.active{opacity:1;pointer-events:auto;transition-delay:.2s}.image-viewer-close-btn{align-items:center;cursor:pointer;display:flex;flex-direction:column;float:right;height:3rem;justify-content:center;margin-right:16px;margin-top:16px;width:3rem}.image-viewer-close-line{background-color:#fff;border-radius:9999px;height:.25rem;position:absolute;width:3rem}.image-viewer-close-line.first{transform:rotate(45deg)}.image-viewer-close-line.second{transform:rotate(-45deg)}.image-viewer-expanded-image{border-radius:.5rem;opacity:0;position:fixed;transition-property:all;z-index:50}.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}*,:host *{font-family:inherit!important}.static{position:static}.h-\[200px\]{height:200px}.w-full{width:100%}.items-center{align-items:center}.justify-center{justify-content:center}.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))}.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)}.duration-200{transition-duration:.2s}.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}.cursor-pointer{cursor:pointer}.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))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/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}.size-\[32px\]{height:32px;width:32px}.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}.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}

package/dist/collection/components/vehicle-lookup/vehicle-accessories.js

@@ -77,9 +77,9 @@ export class VehicleAccessories {
             image: () => (h("div", { class: "size-[100px] flex mx-auto items-center justify-center" }, h("button", { onClick: ({ target }) => openImageViewer.bind(this)(target, accessory === null || accessory === void 0 ? void 0 : accessory.image), class: "shrink-0 relative ring-0 outline-none w-fit mx-auto [&_img]:hover:shadow-lg [&_div]:hover:!opacity-100 cursor-pointer" }, h("div", { class: "absolute flex-col justify-center gap-[4px] size-full flex items-center pointer-events-none hover:opacity-100 rounded-lg opacity-0 bg-black/40 transition-all duration-300" }, h("img", { src: Eye }), h("span", { class: "text-white" }, texts.expand)), h("img", { class: "w-auto h-auto max-w-[100px] max-h-[100px] cursor-pointer shadow-sm rounded-lg transition-all duration-300", src: accessory === null || accessory === void 0 ? void 0 : accessory.image })))),
         }));
         const templateRow = {
-            image: () => h("div", { key: 'a3f944e419e8c0e635f57ac58f397ba9e30f9b0e', class: "size-[100px] flex mx-auto items-center justify-center" }, "\u00A0"),
+            image: () => h("div", { key: 'e9d29ca002cbdff7ba6861a76b667292d8776764', class: "size-[100px] flex mx-auto items-center justify-center" }, "\u00A0"),
         };
-        return (h(Host, { key: 'b2beef21cb88c79008e35c0a17728290a0d8d4d4', translate: "no" }, h(ImageViewer, { key: '8e839e67f529c05b35162032a33636c2afbc27b5', closeImageViewer: () => closeImageViewer.bind(this)(), expandedImage: this.expandedImage }), h(VehicleInfoLayout, { key: '4be670885f74a659a731fd0381af89cfbffd4434', isError: this.isError, isLoading: this.isLoading, coreOnly: this.coreOnly, header: (_c = this.vehicleLookup) === null || _c === void 0 ? void 0 : _c.vin, direction: this.locale.sharedLocales.direction, errorMessage: this.locale.sharedLocales.errors[this.errorMessage] || this.locale.sharedLocales.errors.wildCard }, h("div", { key: '1b2c52ee66e2d942e94e88f1d001f2cf16c8f3b4', class: "overflow-x-auto" }, h("information-table", { key: '21a4f6151dc2503bace293e106a4a06bbd6b114a', templateRow: templateRow, rows: rows, headers: tableHeaders, isLoading: this.isLoading })))));
+        return (h(Host, { key: '5754d83d9a87285824e896a8bb7531a2b68a5f01', translate: "no" }, h(ImageViewer, { key: 'a7102dba9d94d368c84f62bd40892105596014da', closeImageViewer: () => closeImageViewer.bind(this)(), expandedImage: this.expandedImage }), h(VehicleInfoLayout, { key: '370101d7d7223328381e5b48f3b9cd5b33f3b4cc', isError: this.isError, isLoading: this.isLoading, coreOnly: this.coreOnly, header: (_c = this.vehicleLookup) === null || _c === void 0 ? void 0 : _c.vin, direction: this.locale.sharedLocales.direction, errorMessage: this.locale.sharedLocales.errors[this.errorMessage] || this.locale.sharedLocales.errors.wildCard }, h("div", { key: '416ef484b9c8f892512d8b72cbab3bcd22c022ea', class: "overflow-x-auto" }, h("information-table", { key: 'ba80b210fdf468ceea7661237ae4d548c4fd8205', templateRow: templateRow, rows: rows, headers: tableHeaders, isLoading: this.isLoading })))));
     }
     static get is() { return "vehicle-accessories"; }
     static get encapsulation() { return "shadow"; }