proto-autos-wc 0.1.117 → 0.1.119

package/dist/esm/loader.js

@@ -1,5 +1,5 @@
-import { b as bootstrapLazy } from './index-DWVetjJM.js';
-export { s as setNonce } from './index-DWVetjJM.js';
+import { b as bootstrapLazy } from './index-CUeCNkv1.js';
+export { s as setNonce } from './index-CUeCNkv1.js';
 import { g as globalScripts } from './app-globals-DQuL1Twl.js';
 
 const defineCustomElements = async (win, options) => {

package/dist/esm/proto-autos-wc.js

@@ -1,19 +1,46 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-DWVetjJM.js';
-export { s as setNonce } from './index-DWVetjJM.js';
+import { p as promiseResolve, B as BUILD, c as consoleDevInfo, w as win, N as NAMESPACE, H, b as bootstrapLazy } from './index-CUeCNkv1.js';
+export { s as setNonce } from './index-CUeCNkv1.js';
 import { g as globalScripts } from './app-globals-DQuL1Twl.js';
 
 /*
- Stencil Client Patch Browser v4.38.3 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.39.0 | MIT Licensed | https://stenciljs.com
  */
 
 var patchBrowser = () => {
+  if (BUILD.isDev && !BUILD.isTesting) {
+    consoleDevInfo("Running in development mode.");
+  }
+  if (BUILD.cloneNodeFix) {
+    patchCloneNodeFix(H.prototype);
+  }
+  const scriptElm = BUILD.scriptDataOpts ? win.document && Array.from(win.document.querySelectorAll("script")).find(
+    (s) => new RegExp(`/${NAMESPACE}(\\.esm)?\\.js($|\\?|#)`).test(s.src) || s.getAttribute("data-stencil-namespace") === NAMESPACE
+  ) : null;
   const importMeta = import.meta.url;
-  const opts = {};
+  const opts = BUILD.scriptDataOpts ? (scriptElm || {})["data-opts"] || {} : {};
   if (importMeta !== "") {
     opts.resourcesUrl = new URL(".", importMeta).href;
   }
   return promiseResolve(opts);
 };
+var patchCloneNodeFix = (HTMLElementPrototype) => {
+  const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;
+  HTMLElementPrototype.cloneNode = function(deep) {
+    if (this.nodeName === "TEMPLATE") {
+      return nativeCloneNodeFn.call(this, deep);
+    }
+    const clonedNode = nativeCloneNodeFn.call(this, false);
+    const srcChildNodes = this.childNodes;
+    if (deep) {
+      for (let i = 0; i < srcChildNodes.length; i++) {
+        if (srcChildNodes[i].nodeType !== 2) {
+          clonedNode.appendChild(srcChildNodes[i].cloneNode(true));
+        }
+      }
+    }
+    return clonedNode;
+  };
+};
 
 patchBrowser().then(async (options) => {
   await globalScripts();

package/dist/esm/proto-autos.entry.js

@@ -1,4 +1,4 @@
-import { g as getRenderingRef, f as forceUpdate, h, r as registerInstance } from './index-DWVetjJM.js';
+import { S as StencilCore, h, r as registerInstance } from './index-CUeCNkv1.js';
 
 const KEY = 'proto-autos';
 const DATA = 'data';
@@ -21,12 +21,13 @@ const bag = {
 };
 
 const appendToMap = (map, propName, value) => {
-    const items = map.get(propName);
-    if (!items) {
-        map.set(propName, [value]);
+    let refs = map.get(propName);
+    if (!refs) {
+        refs = [];
+        map.set(propName, refs);
     }
-    else if (!items.includes(value)) {
-        items.push(value);
+    if (!refs.some((ref) => ref.deref() === value)) {
+        refs.push(new WeakRef(value));
     }
 };
 const debounce = (fn, ms) => {
@@ -54,33 +55,54 @@ const debounce = (fn, ms) => {
 const isConnected = (maybeElement) => !('isConnected' in maybeElement) || maybeElement.isConnected;
 const cleanupElements = debounce((map) => {
     for (let key of map.keys()) {
-        map.set(key, map.get(key).filter(isConnected));
+        const refs = map.get(key).filter((ref) => {
+            const elm = ref.deref();
+            return elm && isConnected(elm);
+        });
+        map.set(key, refs);
     }
 }, 2_000);
+const core = StencilCore;
+const forceUpdate = core.forceUpdate;
+const getRenderingRef = core.getRenderingRef;
 const stencilSubscription = () => {
-    if (typeof getRenderingRef !== 'function') {
+    if (typeof getRenderingRef !== 'function' || typeof forceUpdate !== 'function') {
         // If we are not in a stencil project, we do nothing.
         // This function is not really exported by @stencil/core.
         return {};
     }
+    const ensureForceUpdate = forceUpdate;
+    const ensureGetRenderingRef = getRenderingRef;
     const elmsToUpdate = new Map();
     return {
         dispose: () => elmsToUpdate.clear(),
         get: (propName) => {
-            const elm = getRenderingRef();
+            const elm = ensureGetRenderingRef();
             if (elm) {
                 appendToMap(elmsToUpdate, propName, elm);
             }
         },
         set: (propName) => {
-            const elements = elmsToUpdate.get(propName);
-            if (elements) {
-                elmsToUpdate.set(propName, elements.filter(forceUpdate));
+            const refs = elmsToUpdate.get(propName);
+            if (refs) {
+                const nextRefs = refs.filter((ref) => {
+                    const elm = ref.deref();
+                    if (!elm)
+                        return false;
+                    return ensureForceUpdate(elm);
+                });
+                elmsToUpdate.set(propName, nextRefs);
             }
             cleanupElements(elmsToUpdate);
         },
         reset: () => {
-            elmsToUpdate.forEach((elms) => elms.forEach(forceUpdate));
+            elmsToUpdate.forEach((refs) => {
+                refs.forEach((ref) => {
+                    const elm = ref.deref();
+                    if (elm)
+                        ensureForceUpdate(elm);
+                });
+            });
             cleanupElements(elmsToUpdate);
         },
     };
@@ -88,8 +110,11 @@ const stencilSubscription = () => {
 
 const unwrap = (val) => (typeof val === 'function' ? val() : val);
 const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) => {
-    const unwrappedState = unwrap(defaultState);
-    let states = new Map(Object.entries(unwrappedState ?? {}));
+    const resolveDefaultState = () => (unwrap(defaultState) ?? {});
+    const initialState = resolveDefaultState();
+    let states = new Map(Object.entries(initialState));
+    const proxyAvailable = typeof Proxy !== 'undefined';
+    const plainState = proxyAvailable ? null : {};
     const handlers = {
         dispose: [],
         get: [],
@@ -101,7 +126,10 @@ const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) =>
     const reset = () => {
         // When resetting the state, the default state may be a function - unwrap it to invoke it.
         // otherwise, the state won't be properly reset
-        states = new Map(Object.entries(unwrap(defaultState) ?? {}));
+        states = new Map(Object.entries(resolveDefaultState()));
+        if (!proxyAvailable) {
+            syncPlainStateKeys();
+        }
         handlers.reset.forEach((cb) => cb());
     };
     const dispose = () => {
@@ -118,12 +146,14 @@ const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) =>
         const oldValue = states.get(propName);
         if (shouldUpdate(value, oldValue, propName)) {
             states.set(propName, value);
+            if (!proxyAvailable) {
+                ensurePlainProperty(propName);
+            }
             handlers.set.forEach((cb) => cb(propName, value, oldValue));
         }
     };
-    const state = (typeof Proxy === 'undefined'
-        ? {}
-        : new Proxy(unwrappedState, {
+    const state = (proxyAvailable
+        ? new Proxy(initialState, {
             get(_, propName) {
                 return get(propName);
             },
@@ -143,7 +173,11 @@ const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) =>
                 set(propName, value);
                 return true;
             },
-        }));
+        })
+        : (() => {
+            syncPlainStateKeys();
+            return plainState;
+        })());
     const on = (eventName, callback) => {
         handlers[eventName].push(callback);
         return () => {
@@ -156,7 +190,10 @@ const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) =>
                 cb(newValue);
             }
         };
-        const resetHandler = () => cb(unwrap(defaultState)[propName]);
+        const resetHandler = () => {
+            const snapshot = resolveDefaultState();
+            cb(snapshot[propName]);
+        };
         // Register the handlers
         const unSet = on('set', setHandler);
         const unReset = on('reset', resetHandler);
@@ -199,6 +236,38 @@ const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) =>
             changeListeners.delete(listener);
         }
     };
+    function ensurePlainProperty(key) {
+        if (proxyAvailable || !plainState) {
+            return;
+        }
+        if (Object.prototype.hasOwnProperty.call(plainState, key)) {
+            return;
+        }
+        Object.defineProperty(plainState, key, {
+            configurable: true,
+            enumerable: true,
+            get() {
+                return get(key);
+            },
+            set(value) {
+                set(key, value);
+            },
+        });
+    }
+    function syncPlainStateKeys() {
+        if (proxyAvailable || !plainState) {
+            return;
+        }
+        const knownKeys = new Set(states.keys());
+        for (const key of Object.keys(plainState)) {
+            if (!knownKeys.has(key)) {
+                delete plainState[key];
+            }
+        }
+        for (const key of knownKeys) {
+            ensurePlainProperty(key);
+        }
+    }
     return {
         state,
         get,
@@ -901,7 +970,386 @@ const ToolBar = _props => {
             : 'bg-clrs-yellow text-clrs-navy'), onClick: () => actions.updatePick(indx), title: `${dealer.name} (${dealer.vehicles.length})` }, indx + 1))))));
 };
 
-const shadowCss = "/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root,\n  :host {\n    --font-sans:\n      ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',\n      'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';\n    --color-yellow-300: oklch(90.5% 0.182 98.111);\n    --color-yellow-600: oklch(68.1% 0.162 75.834);\n    --color-green-200: oklch(92.5% 0.084 155.995);\n    --color-green-600: oklch(62.7% 0.194 149.214);\n    --color-blue-200: oklch(88.2% 0.059 254.128);\n    --color-blue-400: oklch(70.7% 0.165 254.624);\n    --color-gray-300: oklch(87.2% 0.01 258.338);\n    --color-gray-600: oklch(44.6% 0.03 256.802);\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --text-xs: 0.75rem;\n    --text-xs--line-height: calc(1 / 0.75);\n    --text-sm: 0.875rem;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --text-xl: 1.25rem;\n    --text-xl--line-height: calc(1.75 / 1.25);\n    --text-6xl: 3.75rem;\n    --text-6xl--line-height: 1;\n    --font-weight-thin: 100;\n    --font-weight-bold: 700;\n    --radius-md: 0.375rem;\n    --radius-lg: 0.5rem;\n    --animate-spin: spin 1s linear infinite;\n  }\n}\n@layer utilities {\n  .absolute {\n    position: absolute;\n  }\n  .relative {\n    position: relative;\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0);\n  }\n  .right-0 {\n    right: calc(var(--spacing) * 0);\n  }\n  .m-6 {\n    margin: calc(var(--spacing) * 6);\n  }\n  .mt-2 {\n    margin-top: calc(var(--spacing) * 2);\n  }\n  .mt-4 {\n    margin-top: calc(var(--spacing) * 4);\n  }\n  .mt-11 {\n    margin-top: calc(var(--spacing) * 11);\n  }\n  .mr-0 {\n    margin-right: calc(var(--spacing) * 0);\n  }\n  .mr-1\\.5 {\n    margin-right: calc(var(--spacing) * 1.5);\n  }\n  .mr-2 {\n    margin-right: calc(var(--spacing) * 2);\n  }\n  .mb-1 {\n    margin-bottom: calc(var(--spacing) * 1);\n  }\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n  .mb-4 {\n    margin-bottom: calc(var(--spacing) * 4);\n  }\n  .mb-11 {\n    margin-bottom: calc(var(--spacing) * 11);\n  }\n  .ml-0 {\n    margin-left: calc(var(--spacing) * 0);\n  }\n  .ml-auto {\n    margin-left: auto;\n  }\n  .flex {\n    display: flex;\n  }\n  .inline-flex {\n    display: inline-flex;\n  }\n  .h-8 {\n    height: calc(var(--spacing) * 8);\n  }\n  .w-8 {\n    width: calc(var(--spacing) * 8);\n  }\n  .animate-spin {\n    animation: var(--animate-spin);\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-row {\n    flex-direction: row;\n  }\n  .flex-wrap {\n    flex-wrap: wrap;\n  }\n  .content-center {\n    align-content: center;\n  }\n  .justify-end {\n    justify-content: flex-end;\n  }\n  .self-center {\n    align-self: center;\n  }\n  .rounded-lg {\n    border-radius: var(--radius-lg);\n  }\n  .rounded-md {\n    border-radius: var(--radius-md);\n  }\n  .rounded-none {\n    border-radius: 0;\n  }\n  .rounded-tl-md {\n    border-top-left-radius: var(--radius-md);\n  }\n  .rounded-tl-none {\n    border-top-left-radius: 0;\n  }\n  .rounded-tr-md {\n    border-top-right-radius: var(--radius-md);\n  }\n  .rounded-tr-none {\n    border-top-right-radius: 0;\n  }\n  .rounded-br-md {\n    border-bottom-right-radius: var(--radius-md);\n  }\n  .rounded-br-none {\n    border-bottom-right-radius: 0;\n  }\n  .rounded-bl-md {\n    border-bottom-left-radius: var(--radius-md);\n  }\n  .rounded-bl-none {\n    border-bottom-left-radius: 0;\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-r-0 {\n    border-right-style: var(--tw-border-style);\n    border-right-width: 0px;\n  }\n  .border-b-0 {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 0px;\n  }\n  .border-l-0 {\n    border-left-style: var(--tw-border-style);\n    border-left-width: 0px;\n  }\n  .border-none {\n    --tw-border-style: none;\n    border-style: none;\n  }\n  .border-solid {\n    --tw-border-style: solid;\n    border-style: solid;\n  }\n  .border-blue-400 {\n    border-color: var(--color-blue-400);\n  }\n  .border-clrs-navy {\n    border-color: var(--clrs-navy, #001f3f);\n  }\n  .border-gray-300 {\n    border-color: var(--color-gray-300);\n  }\n  .border-gray-600 {\n    border-color: var(--color-gray-600);\n  }\n  .border-green-600 {\n    border-color: var(--color-green-600);\n  }\n  .border-yellow-600 {\n    border-color: var(--color-yellow-600);\n  }\n  .bg-blue-200 {\n    background-color: var(--color-blue-200);\n  }\n  .bg-clrs-navy {\n    background-color: var(--clrs-navy, #001f3f);\n  }\n  .bg-clrs-red {\n    background-color: var(--clrs-red, #ff4136);\n  }\n  .bg-clrs-yellow {\n    background-color: var(--clrs-yellow, #ffdc00);\n  }\n  .bg-gray-300 {\n    background-color: var(--color-gray-300);\n  }\n  .bg-green-200 {\n    background-color: var(--color-green-200);\n  }\n  .bg-yellow-300 {\n    background-color: var(--color-yellow-300);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .text-center {\n    text-align: center;\n  }\n  .text-right {\n    text-align: right;\n  }\n  .align-middle {\n    vertical-align: middle;\n  }\n  .align-top {\n    vertical-align: top;\n  }\n  .font-sans {\n    font-family: var(--font-sans);\n  }\n  .text-6xl {\n    font-size: var(--text-6xl);\n    line-height: var(--tw-leading, var(--text-6xl--line-height));\n  }\n  .text-lg {\n    font-size: var(--text-lg);\n    line-height: var(--tw-leading, var(--text-lg--line-height));\n  }\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n  .text-xl {\n    font-size: var(--text-xl);\n    line-height: var(--tw-leading, var(--text-xl--line-height));\n  }\n  .text-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n  .font-thin {\n    --tw-font-weight: var(--font-weight-thin);\n    font-weight: var(--font-weight-thin);\n  }\n  .text-clrs-gray {\n    color: var(--clrs-gray, #aaaaaa);\n  }\n  .text-clrs-navy {\n    color: var(--clrs-navy, #001f3f);\n  }\n  .text-clrs-red {\n    color: var(--clrs-red, #ff4136);\n  }\n  .text-clrs-slate4 {\n    color: var(--clrs-slate4, #4e5964);\n  }\n  .text-clrs-white {\n    color: var(--clrs-white, #ffffff);\n  }\n  .text-white {\n    color: var(--color-white);\n  }\n  .uppercase {\n    text-transform: uppercase;\n  }\n  .italic {\n    font-style: italic;\n  }\n  .opacity-25 {\n    opacity: 25%;\n  }\n  .opacity-75 {\n    opacity: 75%;\n  }\n  .shadow {\n    --tw-shadow:\n      0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)),\n      0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow:\n      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),\n      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .hover\\:text-clrs-navy {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--clrs-navy, #001f3f);\n      }\n    }\n  }\n  .hover\\:text-clrs-red {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--clrs-red, #ff4136);\n      }\n    }\n  }\n  .md\\:w-auto {\n    @media (width >= 48rem) {\n      width: auto;\n    }\n  }\n}\n@layer components {\n  .ds1-main {\n    margin: calc(var(--spacing) * 6);\n    display: flex;\n    flex-direction: column;\n    font-family: var(--font-sans);\n    color: var(--clrs-navy, #001f3f);\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n}\n.ikon {\n  height: 96px;\n  width: 96px;\n}\n@media (min-width: 500px) {\n  .ikon {\n    height: 144px;\n    width: 144px;\n  }\n}\n@media (min-width: 700px) {\n  .ikon {\n    height: 192px;\n    width: 192px;\n  }\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or\n    ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {\n    *,\n    ::before,\n    ::after,\n    ::backdrop {\n      --tw-border-style: solid;\n      --tw-font-weight: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n    }\n  }\n}\n";
+const shadowCss = () => `/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */
+@layer properties;
+@layer theme, base, components, utilities;
+@layer theme {
+  :root,
+  :host {
+    --font-sans:
+      ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
+      'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    --color-yellow-300: oklch(90.5% 0.182 98.111);
+    --color-yellow-600: oklch(68.1% 0.162 75.834);
+    --color-green-200: oklch(92.5% 0.084 155.995);
+    --color-green-600: oklch(62.7% 0.194 149.214);
+    --color-blue-200: oklch(88.2% 0.059 254.128);
+    --color-blue-400: oklch(70.7% 0.165 254.624);
+    --color-gray-300: oklch(87.2% 0.01 258.338);
+    --color-gray-600: oklch(44.6% 0.03 256.802);
+    --color-white: #fff;
+    --spacing: 0.25rem;
+    --text-xs: 0.75rem;
+    --text-xs--line-height: calc(1 / 0.75);
+    --text-sm: 0.875rem;
+    --text-sm--line-height: calc(1.25 / 0.875);
+    --text-lg: 1.125rem;
+    --text-lg--line-height: calc(1.75 / 1.125);
+    --text-xl: 1.25rem;
+    --text-xl--line-height: calc(1.75 / 1.25);
+    --text-6xl: 3.75rem;
+    --text-6xl--line-height: 1;
+    --font-weight-thin: 100;
+    --font-weight-bold: 700;
+    --radius-md: 0.375rem;
+    --radius-lg: 0.5rem;
+    --animate-spin: spin 1s linear infinite;
+  }
+}
+@layer utilities {
+  .absolute {
+    position: absolute;
+  }
+  .relative {
+    position: relative;
+  }
+  .top-0 {
+    top: calc(var(--spacing) * 0);
+  }
+  .right-0 {
+    right: calc(var(--spacing) * 0);
+  }
+  .m-6 {
+    margin: calc(var(--spacing) * 6);
+  }
+  .mt-2 {
+    margin-top: calc(var(--spacing) * 2);
+  }
+  .mt-4 {
+    margin-top: calc(var(--spacing) * 4);
+  }
+  .mt-11 {
+    margin-top: calc(var(--spacing) * 11);
+  }
+  .mr-0 {
+    margin-right: calc(var(--spacing) * 0);
+  }
+  .mr-1\.5 {
+    margin-right: calc(var(--spacing) * 1.5);
+  }
+  .mr-2 {
+    margin-right: calc(var(--spacing) * 2);
+  }
+  .mb-1 {
+    margin-bottom: calc(var(--spacing) * 1);
+  }
+  .mb-2 {
+    margin-bottom: calc(var(--spacing) * 2);
+  }
+  .mb-4 {
+    margin-bottom: calc(var(--spacing) * 4);
+  }
+  .mb-11 {
+    margin-bottom: calc(var(--spacing) * 11);
+  }
+  .ml-0 {
+    margin-left: calc(var(--spacing) * 0);
+  }
+  .ml-auto {
+    margin-left: auto;
+  }
+  .flex {
+    display: flex;
+  }
+  .inline-flex {
+    display: inline-flex;
+  }
+  .h-8 {
+    height: calc(var(--spacing) * 8);
+  }
+  .w-8 {
+    width: calc(var(--spacing) * 8);
+  }
+  .animate-spin {
+    animation: var(--animate-spin);
+  }
+  .flex-col {
+    flex-direction: column;
+  }
+  .flex-row {
+    flex-direction: row;
+  }
+  .flex-wrap {
+    flex-wrap: wrap;
+  }
+  .content-center {
+    align-content: center;
+  }
+  .justify-end {
+    justify-content: flex-end;
+  }
+  .self-center {
+    align-self: center;
+  }
+  .rounded-lg {
+    border-radius: var(--radius-lg);
+  }
+  .rounded-md {
+    border-radius: var(--radius-md);
+  }
+  .rounded-none {
+    border-radius: 0;
+  }
+  .rounded-tl-md {
+    border-top-left-radius: var(--radius-md);
+  }
+  .rounded-tl-none {
+    border-top-left-radius: 0;
+  }
+  .rounded-tr-md {
+    border-top-right-radius: var(--radius-md);
+  }
+  .rounded-tr-none {
+    border-top-right-radius: 0;
+  }
+  .rounded-br-md {
+    border-bottom-right-radius: var(--radius-md);
+  }
+  .rounded-br-none {
+    border-bottom-right-radius: 0;
+  }
+  .rounded-bl-md {
+    border-bottom-left-radius: var(--radius-md);
+  }
+  .rounded-bl-none {
+    border-bottom-left-radius: 0;
+  }
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .border-r-0 {
+    border-right-style: var(--tw-border-style);
+    border-right-width: 0px;
+  }
+  .border-b-0 {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 0px;
+  }
+  .border-l-0 {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 0px;
+  }
+  .border-none {
+    --tw-border-style: none;
+    border-style: none;
+  }
+  .border-solid {
+    --tw-border-style: solid;
+    border-style: solid;
+  }
+  .border-blue-400 {
+    border-color: var(--color-blue-400);
+  }
+  .border-clrs-navy {
+    border-color: var(--clrs-navy, #001f3f);
+  }
+  .border-gray-300 {
+    border-color: var(--color-gray-300);
+  }
+  .border-gray-600 {
+    border-color: var(--color-gray-600);
+  }
+  .border-green-600 {
+    border-color: var(--color-green-600);
+  }
+  .border-yellow-600 {
+    border-color: var(--color-yellow-600);
+  }
+  .bg-blue-200 {
+    background-color: var(--color-blue-200);
+  }
+  .bg-clrs-navy {
+    background-color: var(--clrs-navy, #001f3f);
+  }
+  .bg-clrs-red {
+    background-color: var(--clrs-red, #ff4136);
+  }
+  .bg-clrs-yellow {
+    background-color: var(--clrs-yellow, #ffdc00);
+  }
+  .bg-gray-300 {
+    background-color: var(--color-gray-300);
+  }
+  .bg-green-200 {
+    background-color: var(--color-green-200);
+  }
+  .bg-yellow-300 {
+    background-color: var(--color-yellow-300);
+  }
+  .p-4 {
+    padding: calc(var(--spacing) * 4);
+  }
+  .text-center {
+    text-align: center;
+  }
+  .text-right {
+    text-align: right;
+  }
+  .align-middle {
+    vertical-align: middle;
+  }
+  .align-top {
+    vertical-align: top;
+  }
+  .font-sans {
+    font-family: var(--font-sans);
+  }
+  .text-6xl {
+    font-size: var(--text-6xl);
+    line-height: var(--tw-leading, var(--text-6xl--line-height));
+  }
+  .text-lg {
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
+  }
+  .text-sm {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+  .text-xl {
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+  }
+  .text-xs {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
+  .font-bold {
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
+  .font-thin {
+    --tw-font-weight: var(--font-weight-thin);
+    font-weight: var(--font-weight-thin);
+  }
+  .text-clrs-gray {
+    color: var(--clrs-gray, #aaaaaa);
+  }
+  .text-clrs-navy {
+    color: var(--clrs-navy, #001f3f);
+  }
+  .text-clrs-red {
+    color: var(--clrs-red, #ff4136);
+  }
+  .text-clrs-slate4 {
+    color: var(--clrs-slate4, #4e5964);
+  }
+  .text-clrs-white {
+    color: var(--clrs-white, #ffffff);
+  }
+  .text-white {
+    color: var(--color-white);
+  }
+  .uppercase {
+    text-transform: uppercase;
+  }
+  .italic {
+    font-style: italic;
+  }
+  .opacity-25 {
+    opacity: 25%;
+  }
+  .opacity-75 {
+    opacity: 75%;
+  }
+  .shadow {
+    --tw-shadow:
+      0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)),
+      0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow:
+      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .hover\:text-clrs-navy {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--clrs-navy, #001f3f);
+      }
+    }
+  }
+  .hover\:text-clrs-red {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--clrs-red, #ff4136);
+      }
+    }
+  }
+  .md\:w-auto {
+    @media (width >= 48rem) {
+      width: auto;
+    }
+  }
+}
+@layer components {
+  .ds1-main {
+    margin: calc(var(--spacing) * 6);
+    display: flex;
+    flex-direction: column;
+    font-family: var(--font-sans);
+    color: var(--clrs-navy, #001f3f);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+.ikon {
+  height: 96px;
+  width: 96px;
+}
+@media (min-width: 500px) {
+  .ikon {
+    height: 144px;
+    width: 144px;
+  }
+}
+@media (min-width: 700px) {
+  .ikon {
+    height: 192px;
+    width: 192px;
+  }
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or
+    ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+    *,
+    ::before,
+    ::after,
+    ::backdrop {
+      --tw-border-style: solid;
+      --tw-font-weight: initial;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+    }
+  }
+}
+`;
 
 const ProtoAutos = class {
     constructor(hostRef) {
@@ -916,6 +1364,6 @@ const ProtoAutos = class {
         return (h("main", { key: 'eb918bee95389cd4c78c6a7b3134ada507c5a042', id: "app", class: "ds1-main relative" }, h(Eswat2Io, { key: 'efa617ee04ddd6c58650d1cf4d00f899c3520efa' }), h(Header, { key: '6762516c1c9fc2d4490e9343d75f4f09f657fae6', label: "Auto Dealers" }), h(ToolBar, { key: 'ce1aeeb560729f66726b859d6f9d5a4a410703b1' }), loading ? (h(Spinner, null)) : (h("hr", { class: tw('mb-4 ml-0 mr-0 mt-4', 'border-solid border-gray-300', 'border-b-0 border-l-0 border-r-0') })), h(DealerView, { key: '63ef8ba16a60533a147c06e126442e9f2481f8fe', dealer: dealer }), h(Footer, { key: '00d32c34fcf933386a5e5f920e09f02f95dbfbf1' })));
     }
 };
-ProtoAutos.style = shadowCss;
+ProtoAutos.style = shadowCss();
 
 export { ProtoAutos as proto_autos };