@vehiclehistory/property-lib 0.0.35 → 0.0.37

package/dist/components/common/ContentCard.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode, NamedExoticComponent } from 'react';
+interface ContentCardProps {
+    block?: boolean;
+    children?: ReactNode;
+    className?: string;
+    contentClass?: string;
+    footerClass?: string;
+    footerContent?: ReactNode | string;
+    headerContent?: ReactNode | string;
+    headerClass?: string;
+    list?: boolean;
+    props?: object;
+    variation?: 'primary' | 'secondary';
+}
+declare const _default: NamedExoticComponent<ContentCardProps>;
+export default _default;

package/dist/components/common/StackedListItem.d.ts

@@ -0,0 +1,12 @@
+import { FC, ReactNode } from 'react';
+/**
+ * Wrapper with proper spacing and bottom border for stacked content sections
+ * @param children
+ * @param className
+ * @constructor
+ */
+declare const StackedListItem: FC<{
+    children?: ReactNode;
+    className?: string;
+}>;
+export default StackedListItem;

package/dist/components/index.d.ts

@@ -23,5 +23,7 @@ import { default as Stars } from './ui/Stars/Stars';
 import { default as TextArea } from './ui/Text/TextArea';
 import { default as Textbox } from './ui/Text/Textbox';
 import { default as ContactForm } from './common/ContactForm';
+import { default as ContentCard } from './common/ContentCard';
+import { default as StackedListItem } from './common/StackedListItem';
 import { default as FunnelHeader } from './funnel/FunnelHeader';
-export { Accordion, Alert, Autocomplete, Badge, Button, ButtonGroup, Card, Checkbox, ContactForm, Container, Dialog, DialogOld, Dots, FunnelHeader, Icon, LoadingBar, Spinner, Popover, ProgressBar, Radio, Select, Skeleton, Slider, Stars, TextArea, Textbox, };
+export { Accordion, Alert, Autocomplete, Badge, Button, ButtonGroup, Card, Checkbox, ContactForm, Container, ContentCard, Dialog, DialogOld, Dots, FunnelHeader, Icon, LoadingBar, Spinner, Popover, ProgressBar, Radio, Select, Skeleton, StackedListItem, Slider, Stars, TextArea, Textbox, };

package/dist/main.js

@@ -1,6 +1,6 @@
-import { jsx as o, jsxs as g, Fragment as S } from "react/jsx-runtime";
-import { memo as y, useState as Z, useEffect as k, useRef as q } from "react";
-import p from "classnames";
+import { jsx as o, jsxs as M, Fragment as S } from "react/jsx-runtime";
+import { memo as y, useState as N, useEffect as z, useRef as q } from "react";
+import u from "classnames";
 const j = {
   xxSmall: "w-4 h-4",
   xSmall: "w-5 h-5",
@@ -480,10 +480,10 @@ const j = {
   size: a = "medium",
   viewBox: n = "0 0 20 20"
 }) => {
-  const l = R(t), [r, s] = Z(d), [i, c] = Z(l);
-  return k(() => {
+  const l = R(t), [r, s] = N(d), [i, c] = N(l);
+  return z(() => {
     c(l);
-  }, [l]), k(() => {
+  }, [l]), z(() => {
     s(d);
   }, [d]), !l && console.error("Icon does not exist", t), /* @__PURE__ */ o(
     "svg",
@@ -507,14 +507,14 @@ const j = {
   unmount: l = !0,
   isOpen: r = !1
 }) => {
-  const [s, i] = Z(r);
-  return /* @__PURE__ */ o("div", { className: p("shadow rounded-lg", e), children: /* @__PURE__ */ g(S, { children: [
-    /* @__PURE__ */ g(
+  const [s, i] = N(r);
+  return /* @__PURE__ */ o("div", { className: u("shadow rounded-lg", e), children: /* @__PURE__ */ M(S, { children: [
+    /* @__PURE__ */ M(
       "button",
       {
         type: "button",
         "data-div-track": `report | accordion | ${n}`,
-        className: p(
+        className: u(
           "acc-a flex w-full justify-between items-center bg-gray-50 px-4 py-2 text-left font-medium text-slate-700 border border-gray-200 focus:outline-none focus-visible:ring focus-visible:ring-gray-500 focus-visible:ring-opacity-75",
           {
             "acc-o": s
@@ -540,7 +540,7 @@ const j = {
     l && s && /* @__PURE__ */ o(
       "div",
       {
-        className: p(
+        className: u(
           "acc-p p-4 border-x border-b rounded-bl-lg rounded-br-lg border-gray-200 relative",
           a
         ),
@@ -550,7 +550,7 @@ const j = {
     !l && /* @__PURE__ */ o(
       "div",
       {
-        className: p(
+        className: u(
           "acc-p p-4 border-x border-b rounded-bl-lg rounded-br-lg border-gray-200 relative",
           a,
           { hidden: !s }
@@ -559,7 +559,7 @@ const j = {
       }
     )
   ] }) });
-}, A1 = y(U), Q = ({
+}, x1 = y(U), Q = ({
   children: d,
   className: e = "",
   messages: t = [],
@@ -594,13 +594,13 @@ const j = {
     "div",
     {
       id: r,
-      className: p(
+      className: u(
         "rounded w-full py-2 px-4 mb-4 border",
         h,
         e
       ),
       ...l,
-      children: /* @__PURE__ */ g("div", { className: "flex", children: [
+      children: /* @__PURE__ */ M("div", { className: "flex", children: [
         /* @__PURE__ */ o("div", { className: "flex-shrink-0", children: /* @__PURE__ */ o(
           x,
           {
@@ -610,14 +610,14 @@ const j = {
             size: "xSmall"
           }
         ) }),
-        /* @__PURE__ */ g("div", { className: "ml-3", children: [
-          /* @__PURE__ */ o("div", { className: p("font-medium text-sm", n), children: a }),
-          t.length > 0 ? /* @__PURE__ */ o("div", { className: "mt-2 text-xs", children: /* @__PURE__ */ o("ul", { role: "list", className: "list-disc space-y-1 pl-5", children: t.map((u, V) => /* @__PURE__ */ o("li", { children: u }, V)) }) }) : ""
+        /* @__PURE__ */ M("div", { className: "ml-3", children: [
+          /* @__PURE__ */ o("div", { className: u("font-medium text-sm", n), children: a }),
+          t.length > 0 ? /* @__PURE__ */ o("div", { className: "mt-2 text-xs", children: /* @__PURE__ */ o("ul", { role: "list", className: "list-disc space-y-1 pl-5", children: t.map((p, V) => /* @__PURE__ */ o("li", { children: p }, V)) }) }) : ""
         ] })
       ] })
     }
   );
-}, y1 = y(Q), G = ({
+}, b1 = y(Q), G = ({
   autoFocus: d = !1,
   required: e = !1,
   className: t = "",
@@ -629,26 +629,26 @@ const j = {
   leftIcon: i = "homeSearch",
   mobileBackdrop: c = !1,
   showSearchIcon: h = !0,
-  options: u = [],
+  options: p = [],
   name: V = "",
-  placeholder: M = "",
+  placeholder: g = "",
   props: A = {},
   size: C = "medium",
   styles: m = null,
   title: H = ""
-}) => /* @__PURE__ */ g(
+}) => /* @__PURE__ */ M(
   "div",
   {
     id: n,
     "data-search": "container",
     "data-search-type": l,
-    className: p("Autocomplete", t),
+    className: u("Autocomplete", t),
     style: m ? { ...m } : null,
     children: [
-      h && /* @__PURE__ */ g(
+      h && /* @__PURE__ */ M(
         "span",
         {
-          className: p(
+          className: u(
             "search-icon-left absolute inset-y-0 left-0 flex items-center pl-2",
             {
               "pointer-events-none": c
@@ -681,7 +681,7 @@ const j = {
         {
           "data-lpignore": "true",
           autoFocus: d,
-          className: p(
+          className: u(
             "w-full bg-white placeholder:bg-white rounded border border-gray-300 py-2 pr-8 shadow-sm focus:outline-none sm-max:text-sm placeholder:text-gray-500 sm-max:placeholder:text-sm placeholder-shown:text-ellipsis truncate",
             {
               "pl-8": h === !0,
@@ -695,7 +695,7 @@ const j = {
           required: e,
           autoComplete: "off",
           value: a,
-          placeholder: !M && r ? " " : M,
+          placeholder: !g && r ? " " : g,
           type: "search",
           name: V || "search-input",
           "data-id": "search-input",
@@ -705,7 +705,7 @@ const j = {
       r && /* @__PURE__ */ o(
         "label",
         {
-          className: p(
+          className: u(
             "floating-label absolute text-sm !normal-case text-gray-500 duration-300 transform -translate-y-4 scale-75 top-2 z-10 origin-[0] bg-white px-2 peer-focus:text-[#222] peer-focus:px-2 peer-focus:bg-white peer-placeholder-shown:bg-white peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 start-1 pointer-events-none",
             {
               "!left-7": h === !0,
@@ -749,7 +749,7 @@ const j = {
           )
         }
       ),
-      /* @__PURE__ */ g(
+      /* @__PURE__ */ M(
         "div",
         {
           "data-id": "search-dropdown",
@@ -764,7 +764,7 @@ const j = {
                 "data-title": H,
                 "aria-labelledby": "Label",
                 "aria-activedescendant": "search-item-0",
-                children: u.length > 0 ? u.map((b, v) => /* @__PURE__ */ o(
+                children: p.length > 0 ? p.map((b, v) => /* @__PURE__ */ o(
                   "li",
                   {
                     id: `search-item-${v}`,
@@ -783,7 +783,7 @@ const j = {
       )
     ]
   }
-), x1 = G, J = ({
+), w1 = G, J = ({
   children: d,
   className: e,
   size: t = "sm",
@@ -791,7 +791,7 @@ const j = {
 }) => /* @__PURE__ */ o(
   a || "span",
   {
-    className: p(
+    className: u(
       " bg-gray-200 font-semibold py-1 px-2 rounded",
       {
         "text-sm": t === "sm",
@@ -802,7 +802,7 @@ const j = {
     ),
     children: d
   }
-), b1 = J, K = ({
+), S1 = J, K = ({
   borderless: d = !1,
   leftIcon: e,
   leftIconProps: t = {},
@@ -814,25 +814,25 @@ const j = {
   rightIcon: i,
   rightIconProps: c = {},
   rounded: h = !1,
-  size: u = "md",
+  size: p = "md",
   type: V = "button",
-  uppercase: M = !1,
+  uppercase: g = !1,
   variation: A = "primary"
 }) => {
   const C = r ? "a" : "button";
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ M(
     C,
     {
       type: C !== "a" ? V : null,
-      className: p(
+      className: u(
         "Button",
         {
           [`Button--${A}`]: A,
-          [`Button--${u}`]: u,
+          [`Button--${p}`]: p,
           "Button--rounded": h,
           "Button--disabled": l,
           "Button--custom-link": r,
-          "Button--uppercase": M,
+          "Button--uppercase": g,
           "Button--borderless": d || A === "link"
         },
         n
@@ -845,7 +845,7 @@ const j = {
           x,
           {
             name: e,
-            size: u === "md" ? "small" : "xSmall",
+            size: p === "md" ? "small" : "xSmall",
             viewBox: "0 0 24 24",
             ...t
           }
@@ -855,7 +855,7 @@ const j = {
           x,
           {
             name: i,
-            size: u === "md" ? "small" : "xSmall",
+            size: p === "md" ? "small" : "xSmall",
             viewBox: "0 0 24 24",
             ...c
           }
@@ -863,7 +863,7 @@ const j = {
       ]
     }
   );
-}, E = y(K), Y = ({ children: d, className: e }) => /* @__PURE__ */ o("div", { className: p("flex md:max-w-min border border-gray-300 divide-x divide-gray-200 rounded-lg", e), children: d }), w1 = Y, X = ({
+}, E = y(K), Y = ({ children: d, className: e }) => /* @__PURE__ */ o("div", { className: u("flex md:max-w-min border border-gray-300 divide-x divide-gray-200 rounded-lg", e), children: d }), k1 = Y, X = ({
   block: d = !1,
   borderless: e = !1,
   children: t,
@@ -875,7 +875,7 @@ const j = {
 }) => /* @__PURE__ */ o(
   "div",
   {
-    className: p(
+    className: u(
       "bg-white",
       {
         f1: !e,
@@ -889,7 +889,7 @@ const j = {
     role: s,
     children: t
   }
-), S1 = X, _ = ({
+), z1 = X, _ = ({
   checked: d = !1,
   children: e,
   className: t = "",
@@ -902,18 +902,18 @@ const j = {
   variation: c = "primary",
   value: h = ""
 }) => {
-  const u = r ? "div" : "label", V = u === "label" ? { htmlFor: l } : {};
-  return /* @__PURE__ */ g(
-    u,
+  const p = r ? "div" : "label", V = p === "label" ? { htmlFor: l } : {};
+  return /* @__PURE__ */ M(
+    p,
     {
-      className: p("checkbox flex items-center", c, t),
+      className: u("checkbox flex items-center", c, t),
       ...V,
       children: [
         /* @__PURE__ */ o(
           "input",
           {
             checked: d,
-            className: p(
+            className: u(
               "form-checkbox ",
               {
                 "!border-red-500 !bg-red-500 focus:!ring-red-500 focus:!border-red-500": a
@@ -931,11 +931,11 @@ const j = {
       ]
     }
   );
-}, z1 = y(_), e1 = ({ children: d, aside: e, direction: t = "right" }) => /* @__PURE__ */ g("div", { className: "flex flex-col lg:flex-row lg:p-0 max-w-screen-lg", children: [
+}, N1 = y(_), e1 = ({ children: d, aside: e, direction: t = "right" }) => /* @__PURE__ */ M("div", { className: "flex flex-col lg:flex-row lg:p-0 max-w-screen-lg", children: [
   /* @__PURE__ */ o(
     "main",
     {
-      className: p(
+      className: u(
         "w-full md:mb-0 flex-1 md:block lg:max-w-container",
         {
           "lg:order-2": t === "left"
@@ -947,7 +947,7 @@ const j = {
   /* @__PURE__ */ o(
     "aside",
     {
-      className: p(
+      className: u(
         "sm-max:hidden md:hidden lg:block flex-1 max-w-aside mb-6 md:mb-0 empty:!hidden",
         {
           "md:ml-8": t === "right",
@@ -957,7 +957,7 @@ const j = {
       children: e
     }
   )
-] }), k1 = y(e1), t1 = ({
+] }), Z1 = y(e1), t1 = ({
   activator: d,
   id: e = "",
   children: t,
@@ -969,41 +969,41 @@ const j = {
   headerClass: i = "",
   hideClose: c = !1,
   iconSize: h = "medium",
-  preventPageScroll: u = !0,
+  preventPageScroll: p = !0,
   stickyHeader: V = !1,
-  title: M = "",
+  title: g = "",
   titleClass: A = ""
-}) => /* @__PURE__ */ g(S, { children: [
+}) => /* @__PURE__ */ M(S, { children: [
   d && /* @__PURE__ */ o("span", { id: `${e}-dialog-activator`, children: d }),
   /* @__PURE__ */ o(
     "dialog",
     {
       inert: "",
       id: `${e}-dialog`,
-      className: p(
+      className: u(
         "dialog",
         {
           "dialog-full-mobile": s,
           dark: l,
-          "prevent-scroll": u
+          "prevent-scroll": p
         },
         a
       ),
-      children: /* @__PURE__ */ g("form", { method: "dialog", children: [
-        /* @__PURE__ */ g(
+      children: /* @__PURE__ */ M("form", { method: "dialog", children: [
+        /* @__PURE__ */ M(
           "header",
           {
-            className: p(
+            className: u(
               "dialog-header flex items-center p-4",
               {
                 "sticky top-0 bg-white z-10": V,
-                "!pb-0 border-0 justify-end": !M,
-                "justify-between border-b": M
+                "!pb-0 border-0 justify-end": !g,
+                "justify-between border-b": g
               },
               i
             ),
             children: [
-              M && /* @__PURE__ */ o("h3", { id: `${e}-dialog-title`, className: A, children: M }),
+              g && /* @__PURE__ */ o("h3", { id: `${e}-dialog-title`, className: A, children: g }),
               !c && /* @__PURE__ */ o(
                 "button",
                 {
@@ -1029,7 +1029,7 @@ const j = {
           "div",
           {
             id: `${e}-dialog-content`,
-            className: p("dialog-content", n),
+            className: u("dialog-content", n),
             children: t
           }
         ),
@@ -1037,7 +1037,7 @@ const j = {
       ] })
     }
   )
-] }), Z1 = y(t1), a1 = ({
+] }), E1 = y(t1), a1 = ({
   activator: d,
   id: e = "",
   children: t,
@@ -1049,34 +1049,34 @@ const j = {
   fullMobile: i = !0,
   headerClass: c = "",
   hideClose: h = !1,
-  iconSize: u = "medium",
+  iconSize: p = "medium",
   isOpen: V = !1,
-  setDialogOpen: M,
+  setDialogOpen: g,
   stickyHeader: A = !1,
   title: C = "",
   titleClass: m = ""
 }) => {
   const H = q(null), b = async () => {
-    H.current.classList.add("closing"), await D(H.current), H.current.classList.remove("closing"), l && l(), M(!1);
+    H.current.classList.add("closing"), await D(H.current), H.current.classList.remove("closing"), l && l(), g(!1);
   }, v = async (w) => {
     w.key === "Escape" && await b();
-  }, N = async ({ clientX: w, clientY: z, target: T }) => {
-    const { left: $, right: I, top: O, bottom: F } = H.current.getBoundingClientRect() ?? {};
-    (!H.current.contains(T) || w < $ || w > I || z < O || z > F) && await b();
+  }, Z = async ({ clientX: w, clientY: k, target: $ }) => {
+    const { left: T, right: I, top: O, bottom: F } = H.current.getBoundingClientRect() ?? {};
+    (!H.current.contains($) || w < T || w > I || k < O || k > F) && await b();
   }, D = (w) => Promise.allSettled(
-    w.getAnimations().map((z) => z.finished)
+    w.getAnimations().map((k) => k.finished)
   );
-  return k(() => {
+  return z(() => {
     const w = H.current;
     w && (V ? w.showModal() : typeof w.close == "function" && w.close());
-  }, [V]), /* @__PURE__ */ g(S, { children: [
-    d && /* @__PURE__ */ o("span", { id: `${e}-dialog-activator`, onClick: () => M(!0), children: d }),
-    /* @__PURE__ */ g(
+  }, [V]), /* @__PURE__ */ M(S, { children: [
+    d && /* @__PURE__ */ o("span", { id: `${e}-dialog-activator`, onClick: () => g(!0), children: d }),
+    /* @__PURE__ */ M(
       "dialog",
       {
         ref: H,
         id: `${e}-dialog`,
-        className: p(
+        className: u(
           "dialog",
           {
             hidden: !V,
@@ -1085,12 +1085,12 @@ const j = {
           a
         ),
         onKeyDown: v,
-        onClick: (w) => r ? null : N(w),
+        onClick: (w) => r ? null : Z(w),
         children: [
-          /* @__PURE__ */ g(
+          /* @__PURE__ */ M(
             "header",
             {
-              className: p(
+              className: u(
                 "dialog-header flex items-center p-4",
                 { "sticky top-0 bg-white": A },
                 c
@@ -1109,7 +1109,7 @@ const j = {
                       x,
                       {
                         name: "close",
-                        size: u,
+                        size: p,
                         className: "pointer-events-none"
                       }
                     )
@@ -1122,7 +1122,7 @@ const j = {
             "div",
             {
               id: `${e}-dialog-content`,
-              className: p("dialog-content p-4", n),
+              className: u("dialog-content p-4", n),
               children: t
             }
           ),
@@ -1138,7 +1138,7 @@ const j = {
       }
     )
   ] });
-}, N1 = y(a1), n1 = ({ className: d = "" }) => /* @__PURE__ */ g("div", { id: "dots", className: p("mx-auto", d), children: [
+}, B1 = y(a1), n1 = ({ className: d = "" }) => /* @__PURE__ */ M("div", { id: "dots", className: u("mx-auto", d), children: [
   /* @__PURE__ */ o("span", { style: { animationDelay: "0.1s" } }),
   /* @__PURE__ */ o("span", { style: { animationDelay: "0.2s" } }),
   /* @__PURE__ */ o("span", { style: { animationDelay: "0.3s" } }),
@@ -1147,7 +1147,7 @@ const j = {
   /* @__PURE__ */ o("span", { style: { animationDelay: "0.6s" } }),
   /* @__PURE__ */ o("span", { style: { animationDelay: "0.7s" } }),
   /* @__PURE__ */ o("span", { style: { animationDelay: "0.8s" } })
-] }), E1 = n1, l1 = ({
+] }), D1 = n1, l1 = ({
   cb: d,
   className: e = "",
   size: t = "md",
@@ -1158,23 +1158,23 @@ const j = {
     const s = document.querySelector(".loading-bar__inner");
     if (!s) return;
     let i, c, h = !1;
-    function u(V) {
+    function p(V) {
       i === void 0 && (i = V);
-      const M = V - i;
+      const g = V - i;
       if (c !== V) {
-        const A = M / a * 101;
+        const A = g / a * 101;
         s.style.width = `${A}%`, A >= 101 && (r && r(), h = !0, window.cancelAnimationFrame(V));
       }
-      M < a && (c = V, h || window.requestAnimationFrame(u));
+      g < a && (c = V, h || window.requestAnimationFrame(p));
     }
-    window.requestAnimationFrame(u);
+    window.requestAnimationFrame(p);
   }
-  return k(() => {
+  return z(() => {
     l({ cb: d });
   }, []), /* @__PURE__ */ o(
     "div",
     {
-      className: p(
+      className: u(
         "loading-bar my-8",
         `loading-bar__${n}`,
         {
@@ -1188,7 +1188,7 @@ const j = {
       children: /* @__PURE__ */ o("div", { className: "loading-bar__inner", "data-size": "100" })
     }
   );
-}, B1 = y(l1), s1 = {
+}, $1 = y(l1), s1 = {
   name: "spinnerDark",
   color: "text-teal-700",
   viewBox: "0 0 24 24"
@@ -1199,7 +1199,7 @@ const j = {
     ...s1,
     className: `animate-spin ${d}`
   }
-) }), D1 = y(r1), i1 = ({
+) }), T1 = y(r1), i1 = ({
   activator: d,
   activatorClass: e = "",
   attrs: t = {},
@@ -1210,15 +1210,15 @@ const j = {
   disabled: s = !1,
   id: i = "",
   trigger: c = "click"
-}) => /* @__PURE__ */ g(S, { children: [
+}) => /* @__PURE__ */ M(S, { children: [
   /* @__PURE__ */ o(
     "div",
     {
-      className: p("popover z-10 max-w-[350px] hidden", l),
-      children: /* @__PURE__ */ g(
+      className: u("popover z-10 max-w-[350px] hidden", l),
+      children: /* @__PURE__ */ M(
         "div",
         {
-          className: p(
+          className: u(
             "popover-container rounded border bg-gray-50 border-gray-300 shadow-md text-gray-500 animate-menu-close",
             r
           ),
@@ -1239,7 +1239,7 @@ const j = {
   /* @__PURE__ */ o(
     "div",
     {
-      className: p(
+      className: u(
         "popover-activator",
         `trigger-${c}`,
         s ? "is-disabled" : "",
@@ -1250,7 +1250,7 @@ const j = {
       children: d
     }
   )
-] }), T1 = i1, o1 = ({
+] }), I1 = i1, o1 = ({
   ariaValuemax: d = 100,
   ariaValuemin: e = 0,
   bgColor: t = "bg-orange-500",
@@ -1260,9 +1260,9 @@ const j = {
   rounded: r = !0,
   showLabel: s = !1
 }) => {
-  const c = ((h, u) => {
+  const c = ((h, p) => {
     if (h) {
-      const V = Number(u) / h;
+      const V = Number(p) / h;
       return V > 1 ? 100 : V * 100;
     }
     return n;
@@ -1270,7 +1270,7 @@ const j = {
   return /* @__PURE__ */ o(
     "div",
     {
-      className: p(
+      className: u(
         "w-full bg-gray-200",
         { "rounded-full": r },
         a
@@ -1283,7 +1283,7 @@ const j = {
       children: /* @__PURE__ */ o(
         "div",
         {
-          className: p(
+          className: u(
             "h-full text-right flex items-center justify-end rounded-full",
             t
           ),
@@ -1293,7 +1293,7 @@ const j = {
       )
     }
   );
-}, $1 = y(o1), c1 = ({
+}, O1 = y(o1), c1 = ({
   checked: d = !1,
   children: e,
   className: t = "",
@@ -1305,17 +1305,17 @@ const j = {
   value: i = ""
 }) => {
   const c = n ? "div" : "label", h = c === "label" ? { htmlFor: a } : {};
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ M(
     c,
     {
-      className: p("radio flex items-center", t),
+      className: u("radio flex items-center", t),
       ...h,
       children: [
         /* @__PURE__ */ o(
           "input",
           {
             checked: d,
-            className: p(
+            className: u(
               "form-radio focus:ring-2 focus:ring-offset-2 focus-within:outline-none",
               {
                 "focus:ring-[#222]": s === "primary"
@@ -1332,7 +1332,7 @@ const j = {
       ]
     }
   );
-}, I1 = y(c1), d1 = ({
+}, F1 = y(c1), d1 = ({
   children: d,
   className: e = "",
   error: t = !1,
@@ -1344,29 +1344,29 @@ const j = {
   placeholder: i = "",
   props: c = {},
   selectClass: h = "",
-  styles: u = null,
+  styles: p = null,
   variation: V = "primary",
-  value: M
+  value: g
 }) => {
   const A = i ? { defaultValue: "" } : {};
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ M(
     "label",
     {
-      className: p("relative select", e, V),
-      style: u ? { ...u } : null,
+      className: u("relative select", e, V),
+      style: p ? { ...p } : null,
       children: [
         l,
-        /* @__PURE__ */ g(
+        /* @__PURE__ */ M(
           "select",
           {
-            className: p(
+            className: u(
               "form-select relative bg-white pl-3 pr-10 text-left cursor-default",
               t ? "!border-red-500 !bg-red-500/10 !text-red-700 focus:!ring-red-500 focus:!border-red-500" : "",
               h
             ),
             id: n,
             name: r,
-            value: M,
+            value: g,
             ...A,
             ...c,
             children: [
@@ -1386,10 +1386,10 @@ const j = {
       ]
     }
   );
-}, O1 = y(d1), h1 = ({ className: d = "" }) => /* @__PURE__ */ g(
+}, q1 = y(d1), h1 = ({ className: d = "" }) => /* @__PURE__ */ M(
   "div",
   {
-    className: p(
+    className: u(
       "flex justify-center items-center bg-gray-200 rounded-lg animate-pulse",
       d
     ),
@@ -1398,13 +1398,13 @@ const j = {
       /* @__PURE__ */ o("span", { className: "sr-only", children: "Loading..." })
     ]
   }
-), F1 = y(h1), u1 = ({
+), j1 = y(h1), u1 = ({
   placeholderClass: d = "",
   children: e,
   className: t = "",
   id: a = 1,
   padding: n = !0
-}) => /* @__PURE__ */ g("div", { className: p("slider", t), id: `slider-${a}`, children: [
+}) => /* @__PURE__ */ M("div", { className: u("slider", t), id: `slider-${a}`, children: [
   /* @__PURE__ */ o(
     "button",
     {
@@ -1433,7 +1433,7 @@ const j = {
       children: /* @__PURE__ */ o(x, { name: "chevronRight" })
     }
   )
-] }), q1 = y(u1), p1 = ({
+] }), P1 = y(u1), p1 = ({
   className: d = "",
   value: e
 }) => {
@@ -1443,14 +1443,14 @@ const j = {
   return /* @__PURE__ */ o(
     "div",
     {
-      className: p(
+      className: u(
         'Stars inline-block leading-none font-sans text-base before:content-["★★★★★"]',
         d
       ),
       style: t
     }
   );
-}, j1 = p1, m1 = ({
+}, R1 = p1, m1 = ({
   className: d = "",
   clear: e = !1,
   error: t = !1,
@@ -1462,7 +1462,7 @@ const j = {
   props: i = {},
   rows: c = 4,
   variation: h = "primary"
-}) => /* @__PURE__ */ g("div", { className: p("relative textarea", h, d), children: [
+}) => /* @__PURE__ */ M("div", { className: u("relative textarea", h, d), children: [
   /* @__PURE__ */ o(
     "textarea",
     {
@@ -1470,7 +1470,7 @@ const j = {
       id: n,
       name: r,
       rows: c,
-      className: p(
+      className: u(
         "form-textarea min-h-[40px] pl-4",
         e ? "pr-10" : "pr-4",
         t ? "!border-red-500 !bg-red-500/10 placeholder:!text-red-700 focus:!ring-red-500 focus:!border-red-500" : "",
@@ -1507,13 +1507,13 @@ const j = {
   placeholder: i = "",
   props: c = {},
   styles: h = null,
-  type: u = "text",
+  type: p = "text",
   value: V,
-  variation: M = "primary"
-}) => /* @__PURE__ */ g(
+  variation: g = "primary"
+}) => /* @__PURE__ */ M(
   "div",
   {
-    className: p("relative textbox", M, d),
+    className: u("relative textbox", g, d),
     style: h ? { ...h } : null,
     children: [
       n && /* @__PURE__ */ o("div", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center px-2", children: /* @__PURE__ */ o(
@@ -1531,10 +1531,10 @@ const j = {
           placeholder: i,
           id: l,
           name: s,
-          type: u,
+          type: p,
           value: V,
           autoComplete: "off",
-          className: p(
+          className: u(
             "form-input",
             e ? "pr-10" : "pr-4",
             n ? "pl-8" : "pl-4",
@@ -1574,13 +1574,13 @@ const j = {
   titleClass: l,
   uppercase: r = !0
 }) => {
-  const s = a || /* @__PURE__ */ g(S, { children: [
+  const s = a || /* @__PURE__ */ M(S, { children: [
     "Typical email response time is 2-3 hours. If you require immediate assistance you may use our",
     " ",
     /* @__PURE__ */ o(
       E,
       {
-        className: p(
+        className: u(
           "text-black-900 items-center gap-2 live-chat uppercase !inline-flex"
         ),
         variation: "link",
@@ -1591,20 +1591,20 @@ const j = {
       }
     )
   ] });
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ M(
     "form",
     {
       id: "contactForm",
-      className: p("contact-form", t, {
+      className: u("contact-form", t, {
         uppercase: r
       }),
       children: [
-        /* @__PURE__ */ o("h2", { id: "contact-title", className: p("mb-4", l), children: n }),
+        /* @__PURE__ */ o("h2", { id: "contact-title", className: u("mb-4", l), children: n }),
         /* @__PURE__ */ o("p", { className: "contact-form__msg", children: s }),
-        /* @__PURE__ */ g(
+        /* @__PURE__ */ M(
           "div",
           {
-            className: p(
+            className: u(
               "p-6 bg-gray-100 flex flex-col gap-y-3 max-w-[458px]",
               e
             ),
@@ -1615,7 +1615,7 @@ const j = {
                   id: "contact-name",
                   name: "contact-name",
                   placeholder: "Name",
-                  inputClass: p({
+                  inputClass: u({
                     "placeholder:uppercase": r
                   })
                 }
@@ -1626,7 +1626,7 @@ const j = {
                   id: "contact-email",
                   name: "contact-email",
                   placeholder: "Email",
-                  inputClass: p({
+                  inputClass: u({
                     "placeholder:uppercase": r
                   })
                 }
@@ -1637,7 +1637,7 @@ const j = {
                   id: "contact-message",
                   name: "contact-message",
                   placeholder: "Message",
-                  inputClass: p({
+                  inputClass: u({
                     "placeholder:uppercase": r
                   })
                 }
@@ -1645,7 +1645,7 @@ const j = {
               /* @__PURE__ */ o(
                 E,
                 {
-                  className: p(
+                  className: u(
                     "flex mx-auto items-center",
                     {
                       uppercase: r
@@ -1663,17 +1663,58 @@ const j = {
       ]
     }
   );
-}, P1 = y(L1), C1 = ({ children: d, className: e = "", tag: t = "h1", title: a }) => /* @__PURE__ */ o(
+}, W1 = y(L1), C1 = ({
+  block: d = !1,
+  children: e,
+  className: t,
+  contentClass: a,
+  footerClass: n,
+  footerContent: l,
+  headerContent: r,
+  headerClass: s,
+  list: i = !1,
+  props: c = {},
+  variation: h = "primary"
+}) => {
+  const p = i ? "ul" : "div";
+  return /* @__PURE__ */ M(
+    "div",
+    {
+      className: u(
+        "content-card",
+        { "content-card--block": d },
+        `content-card--${h}`,
+        t
+      ),
+      ...c,
+      children: [
+        r && /* @__PURE__ */ o("div", { className: u("content-card__header", s), children: typeof r == "string" ? /* @__PURE__ */ o("h3", { children: r }) : r }),
+        /* @__PURE__ */ o(
+          p,
+          {
+            className: u("content-card__content", a),
+            role: i ? "list" : null,
+            children: e
+          }
+        ),
+        l && /* @__PURE__ */ o("div", { className: u("content-card__footer", n), children: l })
+      ]
+    }
+  );
+}, U1 = y(C1), f1 = ({
+  children: d,
+  className: e
+}) => /* @__PURE__ */ o("li", { className: u("stacked-list", e), children: d }), Q1 = f1, M1 = ({ children: d, className: e = "", tag: t = "h1", title: a }) => /* @__PURE__ */ o(
   t,
   {
-    className: p(
+    className: u(
       "!text-xl text-center mb-6 flex items-center justify-center",
       e
     ),
     children: a || d
   }
-), R1 = y(C1);
-function f1(d, e = []) {
+), G1 = y(M1);
+function g1(d, e = []) {
   return new Proxy(d, {
     get: function(t, a) {
       return t[a];
@@ -1684,39 +1725,39 @@ function f1(d, e = []) {
     }
   });
 }
-function W1(d, e = []) {
+function J1(d, e = []) {
   e.length && (d == null || d.classList.add(...e));
 }
-function U1(d, e = []) {
+function K1(d, e = []) {
   e.length && (d == null || d.classList.remove(...e));
 }
-function Q1({ cb: d, form: e, formData: t, validations: a, reactive: n = !1 }) {
+function Y1({ cb: d, form: e, formData: t, validations: a, reactive: n = !1 }) {
   let l = !0;
   for (const [r, s] of t.entries()) {
     const i = e.querySelector(`[name="${r}"]`), c = a[r], h = [];
-    c.forEach((u) => {
-      u.isValid(s) || h.push(u.message);
-    }), h.length ? (l = !1, i.classList.add("field-error"), d && d({ isValid: l, field: i, validations: a })) : (i.classList.remove("field-error"), d && d({ isValid: !0, field: i, validations: a })), n && (i == null || i.addEventListener("input", (u) => {
-      u.preventDefault(), i.classList.contains("field-error") && i.classList.remove("field-error");
+    c.forEach((p) => {
+      p.isValid(s) || h.push(p.message);
+    }), h.length ? (l = !1, i.classList.add("field-error"), d && d({ isValid: l, field: i, validations: a })) : (i.classList.remove("field-error"), d && d({ isValid: !0, field: i, validations: a })), n && (i == null || i.addEventListener("input", (p) => {
+      p.preventDefault(), i.classList.contains("field-error") && i.classList.remove("field-error");
     }));
   }
   return l;
 }
-function G1(d) {
+function X1(d) {
   const e = (
     // eslint-disable-next-line
     /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/
   ), t = /[^a-zA-Z]+$/;
   return e.test(d.toLowerCase()) && !t.test(d);
 }
-class J1 {
+class _1 {
   init(e) {
     this.handleSliders(e);
   }
   handleSliders({ items: e, id: t = 1, cb: a }) {
     if (!document.getElementById(`slider-container-${t}`))
       return;
-    const n = f1(
+    const n = g1(
       {
         activeIndex: 0,
         computedSlides: [],
@@ -1842,8 +1883,8 @@ class f {
       }), h = c.headers.get("content-type");
       if (h && h.indexOf("application/json") !== -1)
         return c.json();
-      const u = await c.text();
-      return u ? u.replace("__next", "") : null;
+      const p = await c.text();
+      return p ? p.replace("__next", "") : null;
     } catch (c) {
       console.error("createData", c);
     }
@@ -2002,15 +2043,15 @@ class f {
     if ((i = window == null ? void 0 : window.options) != null && i.isPdf)
       return r;
     try {
-      const h = await (await fetch("/api/headers")).json(), u = (h == null ? void 0 : h.token) ?? null, V = (h == null ? void 0 : h.ip) ?? null;
+      const h = await (await fetch("/api/headers")).json(), p = (h == null ? void 0 : h.token) ?? null, V = (h == null ? void 0 : h.ip) ?? null;
       return localStorage.setItem(
         "headerTolken",
         JSON.stringify({
-          tolken: u,
+          tolken: p,
           ip: V,
           expire: (/* @__PURE__ */ new Date()).getTime() + e * 1e3
         })
-      ), { tolken: u, ip: V, userAgent: t, platform: l };
+      ), { tolken: p, ip: V, userAgent: t, platform: l };
     } catch (c) {
       console.error("getHeaders", c);
     }
@@ -2030,8 +2071,8 @@ class f {
     var i, c, h;
     const a = ((i = e == null ? void 0 : e.state) == null ? void 0 : i.slug) ?? null, n = ((c = e == null ? void 0 : e.city) == null ? void 0 : c.slug) ?? null, l = ((h = e == null ? void 0 : e.name) == null ? void 0 : h.slug) ?? null, r = (e == null ? void 0 : e.zip) ?? null;
     t = t || ((e == null ? void 0 : e.id) ?? null);
-    const s = [r, "-piq", t].filter((u) => u).join("");
-    return "/" + [a, n, l].filter((u) => u).map((u) => f.toSlug(u)).join("/") + "/" + s;
+    const s = [r, "-piq", t].filter((p) => p).join("");
+    return "/" + [a, n, l].filter((p) => p).map((p) => f.toSlug(p)).join("/") + "/" + s;
   }
   static async getSearchValue(e = "recsSearchValue") {
     try {
@@ -2258,30 +2299,30 @@ class f {
           v == null || v.removeAttribute("inert"), v == null || v.dispatchEvent(c.opening), v && await C(v), v == null || v.dispatchEvent(c.opened);
         }
       });
-    }), u = new MutationObserver((m, H) => {
+    }), p = new MutationObserver((m, H) => {
       m.forEach((b) => {
         b.removedNodes.forEach((v) => {
-          v.nodeName === "DIALOG" && (v.removeEventListener("click", A), v.removeEventListener("close", M), v.dispatchEvent(c.removed), u == null || u.disconnect(), h == null || h.disconnect());
+          v.nodeName === "DIALOG" && (v.removeEventListener("click", A), v.removeEventListener("close", g), v.dispatchEvent(c.removed), p == null || p.disconnect(), h == null || h.disconnect());
         });
       });
     });
     s && (h.observe(s, {
       attributes: !0
-    }), u.observe(document.body, {
+    }), p.observe(document.body, {
       attributes: !1,
       subtree: !1,
       childList: !0
     }));
     const V = () => {
       s == null || s.showModal();
-    }, M = async ({ target: m }) => {
+    }, g = async ({ target: m }) => {
       m == null || m.classList.add("closing"), m == null || m.setAttribute("inert", ""), m == null || m.dispatchEvent(c.closing), m && await C(m), m == null || m.classList.remove("closing"), m == null || m.dispatchEvent(c.closed);
     }, A = async ({ target: m }) => {
       (m == null ? void 0 : m.nodeName) === "DIALOG" && (m == null || m.dispatchEvent(c.outside), s == null || s.close("outside"));
     }, C = (m) => Promise.allSettled(
       m == null ? void 0 : m.getAnimations().map((H) => H == null ? void 0 : H.finished)
     );
-    return !l && (s == null || s.addEventListener("click", A)), s == null || s.addEventListener("close", M), r == null || r.forEach((m) => {
+    return !l && (s == null || s.addEventListener("click", A)), s == null || s.addEventListener("close", g), r == null || r.forEach((m) => {
       m.addEventListener("click", (H) => {
         V(), a && a(H, s);
       });
@@ -2293,7 +2334,7 @@ class f {
       activators: r,
       ref: s,
       handleOpen: V,
-      handleClose: M
+      handleClose: g
     };
   }
   static hasBoundsEntry(e, t = "bounds") {
@@ -2446,12 +2487,12 @@ class f {
       city: i = null,
       state: c = null,
       vin: h = null,
-      license: u = null,
+      license: p = null,
       token: V = null,
-      phone: M = null
+      phone: g = null
     } = e || {}, A = t && t !== "", C = r && r !== "" && r !== "18", m = s && s !== "" && r !== "99";
     let H = [];
-    return t && t !== "" && H.push("name=" + t), A || (a && a !== "" && H.push("first=" + a), n && n !== "" && H.push("middle=" + n), l && l !== "" && H.push("last=" + l)), C && m ? parseInt(r) > parseInt(s) ? (H.push("min=" + s), H.push("max=" + r)) : (H.push("min=" + r), H.push("max=" + s)) : (C && H.push("min=" + r), m && H.push("max=" + s)), M && M !== "" && H.push("phone=" + M), i && i !== "" && H.push("city=" + i), u && u !== "" && H.push("license=" + u), h && h !== "" && H.push("vin=" + h), c && c !== "" && H.push("state=" + c), V && V !== "" && H.push("token=" + V), H.join("&");
+    return t && t !== "" && H.push("name=" + t), A || (a && a !== "" && H.push("first=" + a), n && n !== "" && H.push("middle=" + n), l && l !== "" && H.push("last=" + l)), C && m ? parseInt(r) > parseInt(s) ? (H.push("min=" + s), H.push("max=" + r)) : (H.push("min=" + r), H.push("max=" + s)) : (C && H.push("min=" + r), m && H.push("max=" + s)), g && g !== "" && H.push("phone=" + g), i && i !== "" && H.push("city=" + i), p && p !== "" && H.push("license=" + p), h && h !== "" && H.push("vin=" + h), c && c !== "" && H.push("state=" + c), V && V !== "" && H.push("token=" + V), H.join("&");
   }
   static padTo2Digits(e) {
     return e.toString().padStart(2, "0");
@@ -2477,7 +2518,7 @@ class f {
       "useLocation=" + s
     ];
     i && i !== "" && !l && V.push("state=" + i), c && c !== "" && V.push("tolken=" + c), h && h !== "" && V.push("ip=" + h);
-    const M = V.join("&"), C = (n || l ? "/api/autocomplete-city" : "/api/autocomplete") + "?" + M;
+    const g = V.join("&"), C = (n || l ? "/api/autocomplete-city" : "/api/autocomplete") + "?" + g;
     return await f.makeSearchFetchCall(C);
   }
   static removeElements(e) {
@@ -2572,36 +2613,38 @@ class f {
   }
 }
 export {
-  A1 as Accordion,
-  y1 as Alert,
-  x1 as Autocomplete,
-  b1 as Badge,
+  x1 as Accordion,
+  b1 as Alert,
+  w1 as Autocomplete,
+  S1 as Badge,
   E as Button,
-  w1 as ButtonGroup,
-  S1 as Card,
-  J1 as CardSlider,
-  z1 as Checkbox,
+  k1 as ButtonGroup,
+  z1 as Card,
+  _1 as CardSlider,
+  N1 as Checkbox,
   f as Common,
-  P1 as ContactForm,
-  k1 as Container,
-  Z1 as Dialog,
-  N1 as DialogOld,
-  E1 as Dots,
-  R1 as FunnelHeader,
+  W1 as ContactForm,
+  Z1 as Container,
+  U1 as ContentCard,
+  E1 as Dialog,
+  B1 as DialogOld,
+  D1 as Dots,
+  G1 as FunnelHeader,
   x as Icon,
-  B1 as LoadingBar,
-  T1 as Popover,
-  $1 as ProgressBar,
-  I1 as Radio,
-  O1 as Select,
-  F1 as Skeleton,
-  q1 as Slider,
-  D1 as Spinner,
-  j1 as Stars,
+  $1 as LoadingBar,
+  I1 as Popover,
+  O1 as ProgressBar,
+  F1 as Radio,
+  q1 as Select,
+  j1 as Skeleton,
+  P1 as Slider,
+  T1 as Spinner,
+  Q1 as StackedListItem,
+  R1 as Stars,
   V1 as TextArea,
   B as Textbox,
-  W1 as addClass,
-  U1 as removeClass,
-  G1 as validateEmail,
-  Q1 as validateForm
+  J1 as addClass,
+  K1 as removeClass,
+  X1 as validateEmail,
+  Y1 as validateForm
 };

package/dist/styles.css

@@ -1 +1 @@
-@tailwind utilities;@layer utilities{.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.custom-scrollbar::-webkit-scrollbar{@apply w-4;}.custom-scrollbar::-webkit-scrollbar-thumb{@apply rounded-full bg-gray-300 border-4 border-solid border-transparent;background-clip:padding-box}.active-cat{@apply text-teal-700 font-semibold border-l-teal-700 bg-gray-50;}.icon-title{@apply flex items-center mb-4 ml-3 space-x-3;}.spacer{@apply mb-14;}.button-loader{@apply relative flex items-center gap-x-2 overflow-hidden pointer-events-none opacity-30;}.button-loader:after{@apply content-[""] shrink-0 relative w-6 h-6 border-[5px] border-white border-t-[#222] rounded-full box-border animate-[spin_1s_linear_infinite];}.button-loader-link{@apply relative flex items-center gap-x-2 overflow-hidden;}.button-loader-link:after{@apply content-[""] shrink-0 relative w-6 h-6 border-[5px] border-gray-300 border-t-[#222] rounded-full box-border animate-[spin_1s_linear_infinite];}}.Autocomplete{@apply relative;}.Autocomplete:has(.animate-listbox-open) .search-icon-left{@apply cursor-pointer;}.Button{@apply focus:outline-none font-semibold;}.Button.Button--primary{@apply text-slate-700 bg-black-250 border-slate-700 hover:bg-black-300 focus:ring-slate-700;}.Button.Button--secondary{@apply bg-teal-700 border-teal-700 hover:bg-teal-700 text-white focus:ring-teal-700/50;}.Button.Button--icon{@apply p-1 !important;}.Button.Button--link{@apply font-medium;@apply p-0 !important;}.Button.Button--link:not(.Button--custom-link){@apply text-slate-700 underline !important;}.Button.Button--sm{@apply px-2 py-1;}.Button.Button--md{@apply px-4 py-1;}.Button.Button--uppercase{@apply uppercase;}.Button.Button--rounded{@apply rounded-full;}.Button.Button--disabled,.Button svg{@apply pointer-events-none;}.Button:not(.Button--borderless,.Button--link){@apply border focus:ring-2;}.Button:not(.Button--rounded){@apply rounded;}.Button:not(.Button--link){@apply no-underline;}.Button:has(svg){@apply flex items-center;}.Button:has(svg).Button--sm{@apply gap-x-1;}.Button:has(svg).Button--md{@apply gap-x-2;}.contact-form:not(.contact-form--success) .contact-form__msg{@apply hidden !important;}html:has(dialog[open].prevent-scroll){overflow:hidden}.dialog{@apply grid grid-rows-[max-content] fixed inset-0 p-0 text-left bg-white shadow-xl rounded-lg overflow-hidden max-inline-[min(90vw,60ch)] max-block-[min(80vw,100%)] max-block-[min(80dvb,100%)] min-w-[300px];}.dialog form{@apply grid grid-rows-[auto_1fr_auto] items-start max-block-[min(80vw,100%)] max-block-[min(80dvb,100%)];}.dialog .dialog-header{@apply empty:hidden !important;}.dialog .dialog-content{@apply overflow-y-auto overscroll-contain p-4 max-block-[100%];}.dialog .dialog-footer{@apply flex justify-between items-center p-4 border-t;}.dialog::backdrop{@apply bg-gray-900/50;}.dialog:not([open]){@apply pointer-events-none opacity-0;}.dialog[open]{@apply animate-[fade-scale-in_.2s_ease-out];}.dialog.dialog-full-mobile{@apply xs-max:shadow-none xs-max:rounded-none xs-max:max-inline-[min(100vw,100ch)] xs-max:max-block-[min(100vw,100%)] xs-max:max-block-[min(100dvb,100%)];}.dialog.dialog-full-mobile form{@apply xs-max:max-block-[100vh] xs-max:max-block-[100dvb];}.dialog.closing{@apply animate-[fade-scale-out_.1s_ease-out];}.dialog.dark::backdrop{@apply bg-black-900/90;}#dots span{@apply inline-block bg-gray-300 rounded-full w-2 h-2 mr-2;animation-name:blink;animation-duration:1.75s;animation-iteration-count:infinite;animation-fill-mode:both}@keyframes blink{0%{background-color:#2223}20%{background-color:#222;transform:scale(1.25)}to{background-color:#2223}}.textbox input,.textbox textarea,.textbox select,.textarea input,.textarea textarea,.textarea select,.select input,.select textarea,.select select{@apply w-full border-2 py-2 shadow-sm focus:outline-none text-sm transition-colors ease-in-out duration-200 focus:ring-1 placeholder:text-gray-500 sm-max:placeholder:text-sm placeholder-shown:text-ellipsis;}.textbox.primary input,.textbox.primary textarea,.textbox.primary select,.textarea.primary input,.textarea.primary textarea,.textarea.primary select,.select.primary input,.select.primary textarea,.select.primary select{@apply border-slate-700 focus:ring-slate-700 focus:border-slate-700;}.textbox.secondary input,.textbox.secondary textarea,.textbox.secondary select,.textarea.secondary input,.textarea.secondary textarea,.textarea.secondary select,.select.secondary input,.select.secondary textarea,.select.secondary select{@apply border border-gray-300 rounded focus:ring-slate-700 focus:border-slate-700;}.checkbox input{@apply focus:ring-2 focus:ring-offset-2 focus-within:outline-none;}.checkbox.primary input{@apply focus:ring-slate-700;}.form-checkbox{@apply appearance-none text-[#222] p-0 inline-block align-middle select-none shrink-0 bg-white rounded border border-gray-400 h-4 w-4;-webkit-print-color-adjust:exact;print-color-adjust:exact;background-origin:border-box}.form-checkbox:checked{@apply border-transparent bg-current bg-center bg-no-repeat hover:border-transparent hover:bg-current focus:border-transparent focus:bg-current;background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")}.form-radio{@apply appearance-none text-[#222] p-0 inline-block align-middle select-none shrink-0 bg-white rounded-full border border-gray-400 h-4 w-4;-webkit-print-color-adjust:exact;print-color-adjust:exact;background-origin:border-box}.form-radio:checked{@apply border-transparent bg-current bg-center bg-no-repeat hover:border-transparent hover:bg-current focus:border-transparent focus:bg-current;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E")}.form-select{@apply appearance-none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")!important;background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;print-color-adjust:exact}.field-error{@apply border-red-500 bg-[#FDF2F2] placeholder:text-red-700 focus:ring-red-500 focus:border-red-500 placeholder:bg-[#FDF2F2] !important;}.field-error.form-select{@apply text-red-700 !important;}.loading-bar{@apply bg-gray-50 overflow-hidden relative;box-shadow:2px 0 10px inset #0003}.loading-bar .loading-bar__inner{@apply w-0 h-full;background-size:30px 30px;animation:move 2s linear infinite;box-shadow:2px 0 10px inset #0003}.loading-bar.loading-bar__primary{@apply rounded-md;}.loading-bar.loading-bar__primary .loading-bar__inner{@apply bg-[#767676];background-image:linear-gradient(-45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent)}.loading-bar.loading-bar__secondary .loading-bar__inner{@apply bg-[#909090];}.loading-bar .perc{@apply absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 text-white font-bold;}.indeterminate{@apply before:w-full before:bottom-0 before:absolute before:h-full before:h-1 before:bg-yellow-500 before:animate-indeterminate_first;}.popover[data-popper-placement^=top] [data-popper-arrow],.popover[data-popper-placement^=bottom] [data-popper-arrow]{@apply before:left-0;}.popover[data-popper-placement^=top] [data-popper-arrow]{@apply -bottom-2 before:border-b before:border-r before:border-gray-300;}.popover[data-popper-placement^=bottom] [data-popper-arrow]{@apply -top-2 before:border-t before:border-l before:border-gray-300;}[data-popper-arrow],[data-popper-arrow]:before{background:inherit}.slider{@apply relative overflow-hidden;}.slider::-webkit-scrollbar{width:0;height:0}.slider .slider-button__prev,.slider .slider-button__next{@apply absolute top-1/2 z-10 -translate-y-1/2 bg-white/90 sm-max:hidden md:block rounded-full px-1.5 py-1.5 border border-solid shadow cursor-pointer min-w-max;}.slider .slider-button__prev{@apply left-4 right-auto;}.slider .slider-button__next{@apply right-4 left-auto;}.slider .slider-container{@apply inline-flex w-full overflow-x-scroll md:overflow-x-hidden md:w-auto transition duration-200 ease-in-out sm-max:transform-none;}.slider .slider-container::-webkit-scrollbar{width:0;height:0}.slider .slider-container>.slider-card{@apply max-w-full shrink-0;}.slider .slider-card{@apply flex flex-col rounded-lg border ring-gray-200 w-64 mr-3 last-of-type:mr-0 overflow-hidden;}.slider .slider-card-action{@apply overflow-hidden relative flex flex-col flex-1 h-full w-full;}.slider .slider-card-main{@apply flex flex-col flex-grow justify-between h-full w-full;}.slider .slider-card-default+.slider-card-main{@apply h-auto;}.slider .slider-card-content{@apply p-3 h-full w-full;}.Stars:before{background:linear-gradient(90deg,#ff8945 var(--value),#d1d5db var(--value));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
+@tailwind utilities;@layer utilities{.header-1{@apply text-2.75xl font-bold;}.header-2{@apply text-2.5xl font-semibold;}.header-3{@apply text-xl font-bold;}.header-4{@apply text-lg font-bold;}.header-5{@apply text-base font-semibold;}.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.custom-scrollbar::-webkit-scrollbar{@apply w-4;}.custom-scrollbar::-webkit-scrollbar-thumb{@apply rounded-full bg-gray-300 border-4 border-solid border-transparent;background-clip:padding-box}.active-cat{@apply text-teal-700 font-semibold border-l-teal-700 bg-gray-50;}.icon-title{@apply flex items-center mb-4 ml-3 space-x-3;}.spacer{@apply mb-14;}.button-loader{@apply relative flex items-center gap-x-2 overflow-hidden pointer-events-none opacity-30;}.button-loader:after{@apply content-[""] shrink-0 relative w-6 h-6 border-[5px] border-white border-t-[#222] rounded-full box-border animate-[spin_1s_linear_infinite];}.button-loader-link{@apply relative flex items-center gap-x-2 overflow-hidden;}.button-loader-link:after{@apply content-[""] shrink-0 relative w-6 h-6 border-[5px] border-gray-300 border-t-[#222] rounded-full box-border animate-[spin_1s_linear_infinite];}}.Autocomplete{@apply relative;}.Autocomplete:has(.animate-listbox-open) .search-icon-left{@apply cursor-pointer;}.Button{@apply focus:outline-none font-semibold;}.Button.Button--primary{@apply text-slate-700 bg-black-250 border-slate-700 hover:bg-black-300 focus:ring-slate-700;}.Button.Button--secondary{@apply bg-teal-700 border-teal-700 hover:bg-teal-700 text-white focus:ring-teal-700/50;}.Button.Button--icon{@apply p-1 !important;}.Button.Button--link{@apply font-medium;@apply p-0 !important;}.Button.Button--link:not(.Button--custom-link){@apply text-slate-700 underline !important;}.Button.Button--sm{@apply px-2 py-1;}.Button.Button--md{@apply px-4 py-1;}.Button.Button--uppercase{@apply uppercase;}.Button.Button--rounded{@apply rounded-full;}.Button.Button--disabled,.Button svg{@apply pointer-events-none;}.Button:not(.Button--borderless,.Button--link){@apply border focus:ring-2;}.Button:not(.Button--rounded){@apply rounded;}.Button:not(.Button--link){@apply no-underline;}.Button:has(svg){@apply flex items-center;}.Button:has(svg).Button--sm{@apply gap-x-1;}.Button:has(svg).Button--md{@apply gap-x-2;}.contact-form:not(.contact-form--success) .contact-form__msg{@apply hidden !important;}.content-card{@apply overflow-hidden border border-black-300 rounded bg-white shadow-sm;}.content-card .content-card__header{@apply px-5 py-6;}.content-card .content-card__content{@apply px-5 py-6 empty:hidden;}.content-card .content-card__footer{@apply px-5 py-6;}.content-card.content-card--block{@apply w-full max-w-full;}.content-card.content-card--primary .content-card__header{@apply bg-black-200 border-b border-b-black-300;}html:has(dialog[open].prevent-scroll){overflow:hidden}.dialog{@apply grid grid-rows-[max-content] fixed inset-0 p-0 text-left bg-white shadow-xl rounded-lg overflow-hidden max-inline-[min(90vw,60ch)] max-block-[min(80vw,100%)] max-block-[min(80dvb,100%)] min-w-[300px];}.dialog form{@apply grid grid-rows-[auto_1fr_auto] items-start max-block-[min(80vw,100%)] max-block-[min(80dvb,100%)];}.dialog .dialog-header{@apply empty:hidden !important;}.dialog .dialog-content{@apply overflow-y-auto overscroll-contain p-4 max-block-[100%];}.dialog .dialog-footer{@apply flex justify-between items-center p-4 border-t;}.dialog::backdrop{@apply bg-gray-900/50;}.dialog:not([open]){@apply pointer-events-none opacity-0;}.dialog[open]{@apply animate-[fade-scale-in_.2s_ease-out];}.dialog.dialog-full-mobile{@apply xs-max:shadow-none xs-max:rounded-none xs-max:max-inline-[min(100vw,100ch)] xs-max:max-block-[min(100vw,100%)] xs-max:max-block-[min(100dvb,100%)];}.dialog.dialog-full-mobile form{@apply xs-max:max-block-[100vh] xs-max:max-block-[100dvb];}.dialog.closing{@apply animate-[fade-scale-out_.1s_ease-out];}.dialog.dark::backdrop{@apply bg-black-900/90;}#dots span{@apply inline-block bg-gray-300 rounded-full w-2 h-2 mr-2;animation-name:blink;animation-duration:1.75s;animation-iteration-count:infinite;animation-fill-mode:both}@keyframes blink{0%{background-color:#2223}20%{background-color:#222;transform:scale(1.25)}to{background-color:#2223}}.textbox input,.textbox textarea,.textbox select,.textarea input,.textarea textarea,.textarea select,.select input,.select textarea,.select select{@apply w-full border-2 py-2 shadow-sm focus:outline-none text-sm transition-colors ease-in-out duration-200 focus:ring-1 placeholder:text-gray-500 sm-max:placeholder:text-sm placeholder-shown:text-ellipsis;}.textbox.primary input,.textbox.primary textarea,.textbox.primary select,.textarea.primary input,.textarea.primary textarea,.textarea.primary select,.select.primary input,.select.primary textarea,.select.primary select{@apply border-slate-700 focus:ring-slate-700 focus:border-slate-700;}.textbox.secondary input,.textbox.secondary textarea,.textbox.secondary select,.textarea.secondary input,.textarea.secondary textarea,.textarea.secondary select,.select.secondary input,.select.secondary textarea,.select.secondary select{@apply border border-gray-300 rounded focus:ring-slate-700 focus:border-slate-700;}.checkbox input{@apply focus:ring-2 focus:ring-offset-2 focus-within:outline-none;}.checkbox.primary input{@apply focus:ring-slate-700;}.form-checkbox{@apply appearance-none text-[#222] p-0 inline-block align-middle select-none shrink-0 bg-white rounded border border-gray-400 h-4 w-4;-webkit-print-color-adjust:exact;print-color-adjust:exact;background-origin:border-box}.form-checkbox:checked{@apply border-transparent bg-current bg-center bg-no-repeat hover:border-transparent hover:bg-current focus:border-transparent focus:bg-current;background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")}.form-radio{@apply appearance-none text-[#222] p-0 inline-block align-middle select-none shrink-0 bg-white rounded-full border border-gray-400 h-4 w-4;-webkit-print-color-adjust:exact;print-color-adjust:exact;background-origin:border-box}.form-radio:checked{@apply border-transparent bg-current bg-center bg-no-repeat hover:border-transparent hover:bg-current focus:border-transparent focus:bg-current;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E")}.form-select{@apply appearance-none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")!important;background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;print-color-adjust:exact}form.loading button[type=submit]{@apply button-loader;}.field-error{@apply border-red-500 bg-[#FDF2F2] placeholder:text-red-700 focus:ring-red-500 focus:border-red-500 placeholder:bg-[#FDF2F2] !important;}.field-error.form-select{@apply text-red-700 !important;}.loading-bar{@apply bg-gray-50 overflow-hidden relative;box-shadow:2px 0 10px inset #0003}.loading-bar .loading-bar__inner{@apply w-0 h-full;background-size:30px 30px;animation:move 2s linear infinite;box-shadow:2px 0 10px inset #0003}.loading-bar.loading-bar__primary{@apply rounded-md;}.loading-bar.loading-bar__primary .loading-bar__inner{@apply bg-[#767676];background-image:linear-gradient(-45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent)}.loading-bar.loading-bar__secondary .loading-bar__inner{@apply bg-[#909090];}.loading-bar .perc{@apply absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 text-white font-bold;}.indeterminate{@apply before:w-full before:bottom-0 before:absolute before:h-full before:h-1 before:bg-yellow-500 before:animate-indeterminate_first;}.popover[data-popper-placement^=top] [data-popper-arrow],.popover[data-popper-placement^=bottom] [data-popper-arrow]{@apply before:left-0;}.popover[data-popper-placement^=top] [data-popper-arrow]{@apply -bottom-2 before:border-b before:border-r before:border-gray-300;}.popover[data-popper-placement^=bottom] [data-popper-arrow]{@apply -top-2 before:border-t before:border-l before:border-gray-300;}[data-popper-arrow],[data-popper-arrow]:before{background:inherit}.slider{@apply relative overflow-hidden;}.slider::-webkit-scrollbar{width:0;height:0}.slider .slider-button__prev,.slider .slider-button__next{@apply absolute top-1/2 z-10 -translate-y-1/2 bg-white/90 sm-max:hidden md:block rounded-full px-1.5 py-1.5 border border-solid shadow cursor-pointer min-w-max;}.slider .slider-button__prev{@apply left-4 right-auto;}.slider .slider-button__next{@apply right-4 left-auto;}.slider .slider-container{@apply inline-flex w-full overflow-x-scroll md:overflow-x-hidden md:w-auto transition duration-200 ease-in-out sm-max:transform-none;}.slider .slider-container::-webkit-scrollbar{width:0;height:0}.slider .slider-container>.slider-card{@apply max-w-full shrink-0;}.slider .slider-card{@apply flex flex-col rounded-lg border ring-gray-200 w-64 mr-3 last-of-type:mr-0 overflow-hidden;}.slider .slider-card-action{@apply overflow-hidden relative flex flex-col flex-1 h-full w-full;}.slider .slider-card-main{@apply flex flex-col flex-grow justify-between h-full w-full;}.slider .slider-card-default+.slider-card-main{@apply h-auto;}.slider .slider-card-content{@apply p-3 h-full w-full;}.stacked-list{@apply flex gap-4 py-6 border-b border-black-300 first:pt-0 last:border-b-0 last:pb-0;}.Stars:before{background:linear-gradient(90deg,#ff8945 var(--value),#d1d5db var(--value));-webkit-background-clip:text;-webkit-text-fill-color:transparent}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vehiclehistory/property-lib",
   "description": "Shared UI/Utility Library for Property Sites",
-  "version": "0.0.35",
+  "version": "0.0.37",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/penguin-marketing/vh-recs-ui-library.git"