hasting-swatchcart-module 1.0.29 → 1.0.31

package/dist/main.js

@@ -826,7 +826,7 @@ Uu({
 });
 const Be = Hi.withTypes(), se = zu.withTypes(), hr = (e) => e.swatches.allMaterialsValues, An = (e) => e.swatches.materialSelectState, Zh = (e) => e.swatches.productElementOptions, Kt = (e) => e.swatches.selectedMaterials, sl = (e) => e.swatches.isLoadingSelectedProduct, Jh = (e) => e.swatches.isOpenMultiProductCart, sa = (e) => e.swatches.selectedProduct, ul = 6.5, ll = ({
   materials: e,
-  containerStyles: t = "flex flex-col gap-[8px] text-[12px]/snug p-[var(--sm-padding)] border-t border-solid border-[var(--border)] sm:gap-[12px] shadow-[0_-2px_10px_rgba(40,40,40,0.10)]"
+  containerStyles: t = "flex flex-col gap-[8px] text-xs/snug p-[var(--sm-padding)] border-t border-solid border-[var(--border)] sm:gap-[12px] shadow-[0_-2px_10px_rgba(40,40,40,0.10)]"
 }) => {
   const n = "flex flex-row justify-between items-center", r = We(() => e.reduce((a, i) => a + (i.count ?? 0), 0) * ul, [e]);
   return /* @__PURE__ */ M("div", { className: t, children: [
@@ -5357,8 +5357,8 @@ const Ji = ({ item: e }) => {
       /* @__PURE__ */ p("div", { children: /* @__PURE__ */ p(Fp, { val: e }) }),
       /* @__PURE__ */ M("div", { className: "flex flex-col justify-between", children: [
         /* @__PURE__ */ M("div", { className: "flex flex-col", children: [
-          /* @__PURE__ */ p("span", { className: "mb-[4px] font-semibold text-[12px]", children: e.metadata?.label }),
-          /* @__PURE__ */ p("span", { className: "mb-[4px] font-bold text-[10px]", children: e.parentName })
+          /* @__PURE__ */ p("span", { className: "mb-[4px] font-semibold text-xs", children: e.metadata?.label }),
+          /* @__PURE__ */ p("span", { className: "mb-[4px] font-bold text-[1rem]", children: e.parentName })
         ] }),
         /* @__PURE__ */ p(
           Yp,
@@ -5371,7 +5371,7 @@ const Ji = ({ item: e }) => {
           }
         )
       ] }),
-      /* @__PURE__ */ M("div", { className: " absolute text-[12px] top-0 right-0 font-bold", children: [
+      /* @__PURE__ */ M("div", { className: " absolute text-xs top-0 right-0 font-bold", children: [
         "$",
         e.count * ul
       ] })
@@ -5417,7 +5417,7 @@ const Ji = ({ item: e }) => {
       /* @__PURE__ */ p("h2", { className: "m-0! text-base leading-[1.6] font-medium ", children: "Your cart" })
     ] }),
     e >= De ? /* @__PURE__ */ M($e, { children: [
-      /* @__PURE__ */ M("span", { className: "text-[var(--main-accent-color)] hidden text-[12px] sm:block", children: [
+      /* @__PURE__ */ M("span", { className: "text-[var(--main-accent-color)] hidden text-xs sm:block", children: [
         "(",
         De,
         ") You reached maximum amount of swatches"
@@ -5495,7 +5495,7 @@ const Ji = ({ item: e }) => {
               ll,
               {
                 materials: a,
-                containerStyles: "flex flex-col gap-[8px] text-[12px]/snug p-[var(--sm-padding)] border-t border-solid border-[var(--border)]  sm:gap-[12px] sm:border-none s"
+                containerStyles: "flex flex-col gap-[8px] text-xs/snug p-[var(--sm-padding)] border-t border-solid border-[var(--border)]  sm:gap-[12px] sm:border-none s"
               }
             ) }),
             /* @__PURE__ */ p("div", { className: "p-[var(--sm-padding)] border-t border-solid border-[var(--border)] shrink-0 sm:w-[50%] sm:border-none sm:flex flex-row sm:justify-end sm:items-end sm:h-full", children: /* @__PURE__ */ p("div", { className: "sm:w-[50%]", children: /* @__PURE__ */ p(
@@ -22022,14 +22022,14 @@ const wu = {}, gf = ({
           "aria-haspopup": "listbox",
           "aria-expanded": m,
           className: Le(
-            "inline-flex flex-row items-center justify-between gap-[8px] rounded-full bg-[var(--label-bg, #f5f5f5)] px-2 py-2 text-[12px] font-medium h-9 text-blackborder border-transparent hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--main-accent-color)]sm:w-[102px]",
+            "inline-flex flex-row items-center justify-between gap-[8px] rounded-full bg-[var(--label-bg, #f5f5f5)] px-[8px] py-[8px] text-xs font-medium h-[36px] text-blackborder border-transparent hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--main-accent-color)]sm:w-[102px]",
             i
           ),
           children: [
             /* @__PURE__ */ p(
               "span",
               {
-                className: Le(!g && "text-[12px]  text-gray-700 ms:text-sm"),
+                className: Le(!g && "text-xs  text-gray-700 ms:text-sm"),
                 children: g?.label ?? r
               }
             ),
@@ -22269,7 +22269,7 @@ const Ef = ({
         ]
       }
     ) }),
-    document.body
+    document.querySelector("#root-container")
   );
 }, Tf = ({
   val: e,
@@ -22444,8 +22444,8 @@ const Ef = ({
         }
       ) }),
       /* @__PURE__ */ M("header", { className: "flex flex-col border-b border-[var(--border)] lg:flex-row lg:justify-between", children: [
-        /* @__PURE__ */ p("h1", { className: "m-0! p-[var(--sm-padding)] text-[1.6rem] font-medium", children: "Swatches store" }),
-        /* @__PURE__ */ p("div", { className: "flex flex-row justify-center items-center border-t border-[var(--border)] p-[var(--sm-padding)] text-[12px] font-medium leading-[24px] lg:border-none", children: /* @__PURE__ */ M("span", { children: [
+        /* @__PURE__ */ p("h1", { className: "m-0! p-[var(--sm-padding)] text-base font-medium", children: "Swatches store" }),
+        /* @__PURE__ */ p("div", { className: "flex flex-row justify-center items-center border-t border-[var(--border)] p-[var(--sm-padding)] text-xs font-medium leading-[24px] lg:border-none", children: /* @__PURE__ */ M("span", { children: [
           "Choose 5 free swatches to curate your perfect design. Plus get",
           " ",
           /* @__PURE__ */ p("span", { className: "text-[var(--main-accent-color)] underline", children: "free design advice" }),
@@ -22492,7 +22492,7 @@ const Ef = ({
               values: SC,
               value: f,
               onValueChange: m,
-              className: "shrink-0 w-[90px] xxs:w-[100px] bg-[var(--label-bg)] sm:py-2 sm:px-4 sm:w-[102px]",
+              className: "shrink-0 w-[90px] xxs:w-[100px] bg-[var(--label-bg)] sm:py-8px sm:px-16px sm:w-[102px]",
               dropdownWidth: "w-64"
             }
           )
@@ -22835,7 +22835,7 @@ const xr = _.forwardRef(
               flex-none flex flex-row justify-center items-center
               w-[20px] h-5 rounded-full
               bg-[var(--main-accent-color)] text-white
-              text-[10px] leading-none
+              text-[1rem] leading-none
               select-none pointer-events-none
               overflow-hidden
             `,
@@ -22854,7 +22854,7 @@ const xr = _.forwardRef(
               a
             ),
             children: [
-              /* @__PURE__ */ p("div", { className: "w-full text-[12px] truncate text-left leading-[20px] sm:text-sm", children: A }),
+              /* @__PURE__ */ p("div", { className: "w-full text-xs truncate text-left leading-[20px] sm:text-sm", children: A }),
               /* @__PURE__ */ p(
                 jl,
                 {
@@ -23112,7 +23112,7 @@ const wf = ({
       dropdownWidth: "w-80"
     }
   );
-}, kf = () => /* @__PURE__ */ M("div", { className: "flex flex-row items-center gap-[16px] p-[var(--sm-padding)] ", children: [
+}, kf = () => /* @__PURE__ */ M("div", { className: "flex flex-row items-center gap-[16px] p-[var(--sm-padding)]", children: [
   /* @__PURE__ */ p(LC, {}),
   /* @__PURE__ */ p(PC, {}),
   /* @__PURE__ */ p(DC, {})
@@ -23126,7 +23126,7 @@ const wf = ({
       /* @__PURE__ */ p(
         wf,
         {
-          containerStyles: `flex flex-row justify-between items-center gap-[8px] p-[var(--sm-padding)] w-full text-[12px]
+          containerStyles: `flex flex-row justify-between items-center gap-[8px] p-[var(--sm-padding)] w-full text-xs
         border-b border-[var(--border)]
         sm:max-w-[360px] sm:text-sm sm:border-none
         `,
@@ -23741,11 +23741,11 @@ const GC = (e) => /* @__PURE__ */ p(
       e.assetId
     ),
     /* @__PURE__ */ M("div", { className: "mb-[12px] flex flex-col", children: [
-      /* @__PURE__ */ M("span", { className: "mb-[4px] text-[14px] font-semibold leading-[16px]", children: [
+      /* @__PURE__ */ M("span", { className: "mb-[4px] text-sm font-semibold leading-[16px]", children: [
         e.metadata?.label || e.label,
         " "
       ] }),
-      /* @__PURE__ */ M("span", { className: "text-[12px] font-medium leading-[14px]", children: [
+      /* @__PURE__ */ M("span", { className: "text-xs font-medium leading-[14px]", children: [
         e.parentName,
         " "
       ] })
@@ -23803,7 +23803,7 @@ const GC = (e) => /* @__PURE__ */ p(
         ]
       }
     ) }),
-    document.body
+    document.querySelector("#root-container")
   ) : null;
 }, Lf = ({
   isOpen: e,
@@ -23997,7 +23997,7 @@ const GC = (e) => /* @__PURE__ */ p(
         )
       }
     ),
-    document.body
+    document.querySelector("#root-container")
   ) : null;
 };
 class rA {
@@ -24132,7 +24132,7 @@ const aA = () => /* @__PURE__ */ p(
           selectStyles: "min-w-[auto] max-w-[154px] sm:max-w-[auto] sm:min-w-[250px]"
         }
       ),
-      /* @__PURE__ */ p(kf, {}),
+      /* @__PURE__ */ p("div", { className: "w-full border-b border-b-border", children: /* @__PURE__ */ p(kf, {}) }),
       /* @__PURE__ */ p(sA, {}),
       /* @__PURE__ */ p(oA, {}),
       /* @__PURE__ */ p("div", { className: "p-[var(--sm-padding)] border-t border-solid border-[var(--border)] shrink-0", children: /* @__PURE__ */ p(
@@ -24167,7 +24167,7 @@ const aA = () => /* @__PURE__ */ p(
         /* @__PURE__ */ p("h2", { className: "m-0! text-base leading-[1.6] font-medium ", children: "Your cart" })
       ] }),
       r >= De ? /* @__PURE__ */ M($e, { children: [
-        /* @__PURE__ */ M("span", { className: "text-[var(--main-accent-color)] hidden text-[12px] sm:block", children: [
+        /* @__PURE__ */ M("span", { className: "text-[var(--main-accent-color)] hidden text-xs sm:block", children: [
           "(",
           De,
           ") You reached maximum amount of swatches"
@@ -24201,7 +24201,7 @@ const aA = () => /* @__PURE__ */ p(
   (e) => e > 0
 ), hA = () => {
   const e = Be(), t = se(Kt) ?? [], n = se(fA), r = (o) => {
-    console.log("selectedMaterials", t), e(Hh({ selectedMaterial: o })), e(
+    e(Hh({ selectedMaterial: o })), e(
       oa({
         selectedMaterial: o,
         materialCount: 1,
@@ -24333,44 +24333,51 @@ const yA = ({
         console.error("Failed to load product", d);
       }
     })();
-  }, [t, n, r]), /* @__PURE__ */ M(Df, { children: [
-    /* @__PURE__ */ p(
-      Lh,
-      {
-        position: "top-center",
-        autoClose: 5e3,
-        hideProgressBar: !0,
-        newestOnTop: !1,
-        closeOnClick: !1,
-        rtl: !1,
-        pauseOnFocusLoss: !0,
-        draggable: !0,
-        pauseOnHover: !0,
-        theme: "dark",
-        transition: Ju
-      }
-    ),
-    e ? /* @__PURE__ */ M($e, { children: [
-      s ? null : /* @__PURE__ */ p(
-        ZC,
-        {
-          onSendData: i,
-          onToggleSidebar: a
-        }
-      ),
-      s ? /* @__PURE__ */ p(
-        pA,
-        {
-          isOpen: e,
-          uiDataType: t,
-          data: n,
-          assetId: r,
-          onToggleSidebar: a,
-          onSendData: i
-        }
-      ) : null
-    ] }) : null
-  ] });
+  }, [t, n, r]), /* @__PURE__ */ p(
+    "div",
+    {
+      id: "root-container",
+      className: "relative flex flex-col h-full min-h-0 w-full",
+      children: /* @__PURE__ */ M(Df, { children: [
+        /* @__PURE__ */ p(
+          Lh,
+          {
+            position: "top-center",
+            autoClose: 5e3,
+            hideProgressBar: !0,
+            newestOnTop: !1,
+            closeOnClick: !1,
+            rtl: !1,
+            pauseOnFocusLoss: !0,
+            draggable: !0,
+            pauseOnHover: !0,
+            theme: "dark",
+            transition: Ju
+          }
+        ),
+        e ? /* @__PURE__ */ M($e, { children: [
+          s ? null : /* @__PURE__ */ p(
+            ZC,
+            {
+              onSendData: i,
+              onToggleSidebar: a
+            }
+          ),
+          s ? /* @__PURE__ */ p(
+            pA,
+            {
+              isOpen: e,
+              uiDataType: t,
+              data: n,
+              assetId: r,
+              onToggleSidebar: a,
+              onSendData: i
+            }
+          ) : null
+        ] }) : null
+      ] })
+    }
+  );
 };
 function _A(e) {
   const t = (n) => /* @__PURE__ */ p(Df, { children: /* @__PURE__ */ p(e, { ...n }) });