hasting-swatchcart-module 1.0.23 → 1.0.24

package/dist/cdn/main.js

@@ -7935,7 +7935,7 @@ const Ut = Zf.withTypes(), je = pE.withTypes(), Ks = (e) => e.swatches.allMateri
   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)]"
 }) => {
-  const n = "flex justify-between items-center", i = v.useMemo(() => e.reduce((s, a) => s + (a.count ?? 0), 0) * PE, [e]);
+  const n = "flex flex-row justify-between items-center", i = v.useMemo(() => e.reduce((s, a) => s + (a.count ?? 0), 0) * PE, [e]);
   return /* @__PURE__ */ T.jsxs("div", { className: t, children: [
     /* @__PURE__ */ T.jsxs("div", { className: n, children: [
       /* @__PURE__ */ T.jsx("span", { children: "Subtotal" }),
@@ -12346,7 +12346,7 @@ const fh = ({ item: e }) => {
       n ? /* @__PURE__ */ T.jsx(
         "div",
         {
-          className: `absolute top-0 right-0 m-2 w-[16px] h-[16px] flex justify-center items-center
+          className: `absolute top-0 right-0 m-2 w-[16px] h-[16px] flex flex-row justify-center items-center
           bg-[var(--background-grey)] rounded-2xl border-none pointer-events-none`,
           children: /* @__PURE__ */ T.jsx(Xs, { className: "w-[8px] h-2 stroke-[var(--svg-dark)]" })
         }
@@ -12419,7 +12419,7 @@ const fh = ({ item: e }) => {
   onDelete: s
 }) => {
   const a = e <= 1;
-  return /* @__PURE__ */ T.jsxs("div", { className: "flex items-center gap-[8px] text-sm", children: [
+  return /* @__PURE__ */ T.jsxs("div", { className: "flex flex-row items-center gap-[8px] text-sm", children: [
     a ? /* @__PURE__ */ T.jsx(
       "button",
       {
@@ -12462,7 +12462,7 @@ const fh = ({ item: e }) => {
         border-b border-[var(--border)]
         px-[var(--sm-padding)] p-[var(--sm-padding)]
         last:border-b-0`,
-    children: /* @__PURE__ */ T.jsxs("div", { className: "relative flex gap-[16px] ", children: [
+    children: /* @__PURE__ */ T.jsxs("div", { className: "relative flex flex-row gap-[16px]", children: [
       /* @__PURE__ */ T.jsx("div", { children: /* @__PURE__ */ T.jsx(TS, { val: e }) }),
       /* @__PURE__ */ T.jsxs("div", { className: "flex flex-col justify-between", children: [
         /* @__PURE__ */ T.jsxs("div", { className: "flex flex-col", children: [
@@ -12513,8 +12513,8 @@ const fh = ({ item: e }) => {
   const t = Ut(), n = () => {
     t(NE(!1));
   };
-  return /* @__PURE__ */ T.jsx("header", { className: "flex p-[var(--sm-padding)] justify-between items-center border-b border-solid border-[var(--border)]", children: /* @__PURE__ */ T.jsxs("div", { className: "flex items-center flex-row  gap-[4px]", children: [
-    /* @__PURE__ */ T.jsxs("div", { className: "flex items-center gap-[8px]", children: [
+  return /* @__PURE__ */ T.jsx("header", { className: "flex flex-row p-[var(--sm-padding)] justify-between items-center border-b border-solid border-[var(--border)]", children: /* @__PURE__ */ T.jsxs("div", { className: "flex items-center flex-row  gap-[4px]", children: [
+    /* @__PURE__ */ T.jsxs("div", { className: "flex flex-row items-center gap-[8px]", children: [
       /* @__PURE__ */ T.jsx(
         "button",
         {
@@ -12552,7 +12552,7 @@ const fh = ({ item: e }) => {
     const { parentName: g, metadata: A } = f, C = A?.label;
     p && C && g && t(D2({ assetId: p, label: C, parentName: g }));
   }, c = v.useMemo(() => i.reduce((f, p) => f + (p.count ?? 0), 0), [i]);
-  return /* @__PURE__ */ T.jsxs("div", { className: "flex h-full flex-col ", children: [
+  return /* @__PURE__ */ T.jsxs("div", { className: "flex flex-col h-full", children: [
     /* @__PURE__ */ T.jsx(IS, { totalCount: c }),
     /* @__PURE__ */ T.jsxs("div", { className: "flex flex-col h-full min-h-0", children: [
       /* @__PURE__ */ T.jsx("ul", { className: "flex flex-col flex-1 min-h-0 overflow-y-auto", children: n.map((f) => {
@@ -12601,7 +12601,7 @@ const fh = ({ item: e }) => {
                 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"
               }
             ) }),
-            /* @__PURE__ */ T.jsx("div", { className: "p-[var(--sm-padding)] border-t border-solid border-[var(--border)] shrink-0 sm:w-[50%] sm:border-none sm:flex sm:justify-end sm:items-end sm:h-full", children: /* @__PURE__ */ T.jsx("div", { className: "sm:w-[50%]", children: /* @__PURE__ */ T.jsx(
+            /* @__PURE__ */ T.jsx("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__ */ T.jsx("div", { className: "sm:w-[50%]", children: /* @__PURE__ */ T.jsx(
               ME,
               {
                 onClick: () => e && e(n),
@@ -12824,7 +12824,7 @@ const BS = ({ text: e, isActive: t = !1, onClick: n }) => {
       onClick: i,
       onKeyDown: s,
       className: `
-        flex justify-center items-center max-w-max px-4 py-2 capitalize rounded-full
+        flex flex-row justify-center items-center max-w-max px-4 py-2 capitalize rounded-full
         font-medium text-sm cursor-pointer transition-all duration-[400ms] ease-in-out
         outline-none focus:ring-2 focus:ring-[var(--main-accent-color)] focus:ring-offset-2
         ${t ? "bg-[var(--main-accent-color)] text-white hover:brightness-90" : "bg-[var(--label-bg)] hover:brightness-95"}
@@ -12888,7 +12888,7 @@ const BS = ({ text: e, isActive: t = !1, onClick: n }) => {
   return /* @__PURE__ */ T.jsxs(
     "div",
     {
-      className: `flex items-center gap-[8px] lg:w-[50%] xl:w-auto ${i}`,
+      className: `flex flex-row items-center gap-[8px] lg:w-[50%] xl:w-auto ${i}`,
       role: "region",
       "aria-label": "Category slider",
       children: [
@@ -12899,7 +12899,7 @@ const BS = ({ text: e, isActive: t = !1, onClick: n }) => {
             "aria-label": "Scroll left",
             disabled: !f,
             onClick: () => y("left"),
-            className: `flex-shrink-0 h-8 w-8 rounded-full flex items-center justify-center shadow
+            className: `flex-shrink-0 h-8 w-8 rounded-full flex flex-row items-center justify-center shadow
           ${f ? "bg-black text-white hover:brightness-110" : "bg-gray-200 text-gray-500 opacity-60 cursor-not-allowed"}`,
             children: [
               /* @__PURE__ */ T.jsx(vg, { className: "w-[16px] h-4 rotate-360" }),
@@ -12917,20 +12917,27 @@ const BS = ({ text: e, isActive: t = !1, onClick: n }) => {
               paddingLeft: "0.5rem",
               paddingRight: "0.5rem"
             },
-            children: /* @__PURE__ */ T.jsxs("div", { ref: l, className: "flex gap-[12px] sm:gap-[16px] py-2", children: [
-              e.map((I) => {
-                const b = I.productId, N = t === b;
-                return /* @__PURE__ */ T.jsx("div", { className: "shrink-0", children: /* @__PURE__ */ T.jsx(
-                  BS,
-                  {
-                    text: I.name,
-                    isActive: N,
-                    onClick: () => n(I)
-                  }
-                ) }, b);
-              }),
-              /* @__PURE__ */ T.jsx("div", { "aria-hidden": !0, className: "shrink-0 w-1 sm:w-[16px]" })
-            ] })
+            children: /* @__PURE__ */ T.jsxs(
+              "div",
+              {
+                ref: l,
+                className: "flex flex-row gap-[12px] sm:gap-[16px] py-2",
+                children: [
+                  e.map((I) => {
+                    const b = I.productId, N = t === b;
+                    return /* @__PURE__ */ T.jsx("div", { className: "shrink-0", children: /* @__PURE__ */ T.jsx(
+                      BS,
+                      {
+                        text: I.name,
+                        isActive: N,
+                        onClick: () => n(I)
+                      }
+                    ) }, b);
+                  }),
+                  /* @__PURE__ */ T.jsx("div", { "aria-hidden": !0, className: "shrink-0 w-1 sm:w-[16px]" })
+                ]
+              }
+            )
           }
         ),
         /* @__PURE__ */ T.jsxs(
@@ -12940,7 +12947,7 @@ const BS = ({ text: e, isActive: t = !1, onClick: n }) => {
             "aria-label": "Scroll right",
             disabled: !g,
             onClick: () => y("right"),
-            className: `flex-shrink-0 h-8 w-8 rounded-full flex items-center justify-center shadow
+            className: `flex-shrink-0 h-8 w-8 rounded-full flex flex-row items-center justify-center shadow
           ${g ? "bg-black text-white hover:brightness-110" : "bg-gray-200 text-gray-400 opacity-60 cursor-not-allowed"}`,
             children: [
               /* @__PURE__ */ T.jsx(vg, { className: "w-[16px] h-4 rotate-180" }),
@@ -29087,7 +29094,7 @@ const YA = {}, zC = ({
           "aria-haspopup": "listbox",
           "aria-expanded": C,
           className: Mt(
-            "inline-flex 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-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]",
             a
           ),
           children: [
@@ -29134,7 +29141,7 @@ const YA = {}, zC = ({
               "button",
               {
                 onClick: w,
-                className: "inline-flex items-center gap-[4px] text-[0.95rem] text-black hover:text-[var(--main-accent-color)] transition-colors",
+                className: "inline-flex flex-row items-center gap-[4px] text-[0.95rem] text-black hover:text-[var(--main-accent-color)] transition-colors",
                 children: [
                   /* @__PURE__ */ T.jsx(ah, { className: "h-3.5 w-[12px].5" }),
                   "Clear"
@@ -29157,7 +29164,7 @@ const YA = {}, zC = ({
                       "aria-selected": O,
                       tabIndex: 0,
                       className: Mt(
-                        "flex items-start justify-between gap-[8px] px-4 py-2 cursor-pointer",
+                        "flex flex-row items-start justify-between gap-[8px] px-4 py-2 cursor-pointer",
                         "hover:bg-gray-50 focus:bg-gray-50 focus:outline-none"
                       ),
                       onClick: () => N(D.value),
@@ -29165,7 +29172,7 @@ const YA = {}, zC = ({
                         (F.key === "Enter" || F.key === " ") && (F.preventDefault(), N(D.value));
                       },
                       children: [
-                        /* @__PURE__ */ T.jsxs("div", { className: "flex items-center gap-[8px]", children: [
+                        /* @__PURE__ */ T.jsxs("div", { className: "flex flex-row items-center gap-[8px]", children: [
                           /* @__PURE__ */ T.jsx("span", { className: "text-[1.05rem]", children: D.label }),
                           (() => {
                             if (!p || !g)
@@ -29201,7 +29208,7 @@ const WC = ({
 }) => /* @__PURE__ */ T.jsx(
   "div",
   {
-    className: s ? "absolute inset-0 flex items-center justify-center backdrop-blur bg-black/30 z-150" : "inline-flex items-center justify-center",
+    className: s ? "absolute inset-0 flex flex-row items-center justify-center backdrop-blur bg-black/30 z-150" : "inline-flex flex-row items-center justify-center",
     children: /* @__PURE__ */ T.jsxs(
       "span",
       {
@@ -29376,7 +29383,7 @@ const WC = ({
             "div",
             {
               onClick: p,
-              className: `absolute top-0 right-0 m-2 w-[16px] h-[16px] flex justify-center items-center
+              className: `absolute top-0 right-0 m-2 w-[16px] h-[16px] flex flex-row justify-center items-center
           bg-[var(--background-grey)] rounded-2xl border-none z-[100] cursor-pointer`,
               children: /* @__PURE__ */ T.jsx(Xs, { className: "w-[8px] h-2 stroke-[var(--svg-dark)]" })
             }
@@ -29416,7 +29423,7 @@ const WC = ({
     }
   }, l = Math.max(0, Ht - e.length);
   return /* @__PURE__ */ T.jsxs("div", { className: t, children: [
-    /* @__PURE__ */ T.jsxs("div", { className: "flex justify-between items-center mb-[12px]", children: [
+    /* @__PURE__ */ T.jsxs("div", { className: "flex flex-row justify-between items-center mb-[12px]", children: [
       /* @__PURE__ */ T.jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ T.jsx("div", { className: "", children: "Swatches list" }),
         /* @__PURE__ */ T.jsx("span", { className: "absolute top-0 right-[-20px] font-medium text-[var(--main-accent-color)] text-[8px] leading-none", children: "Free" })
@@ -29428,7 +29435,7 @@ const WC = ({
         " Selected"
       ] })
     ] }),
-    /* @__PURE__ */ T.jsxs("div", { className: "flex flex-wrap gap-[8px]", children: [
+    /* @__PURE__ */ T.jsxs("div", { className: "flex flex-row flex-wrap gap-[8px]", children: [
       e.map((c, f) => {
         const p = c.metadata;
         return /* @__PURE__ */ T.jsx(
@@ -29466,7 +29473,7 @@ const WC = ({
             containerStyles: "flex flex-col p-[var(--sm-padding)] shrink-0 sm:w-[50%] sm:border-r sm:border-[var(--border)]"
           }
         ),
-        /* @__PURE__ */ T.jsx("div", { className: "flex w-full p-[var(--sm-padding)] border-t border-[var(--border)] sm:border-none lg:w-[50%] sm:justify-center sm:items-center lg:justify-end lg:items-end", children: /* @__PURE__ */ T.jsx("div", { className: "w-full lg:w-[50%]", children: /* @__PURE__ */ T.jsx(ME, { onClick: i, children: "ADD SWATCHES TO CART" }) }) })
+        /* @__PURE__ */ T.jsx("div", { className: "flex flex-row w-full p-[var(--sm-padding)] border-t border-[var(--border)] sm:border-none lg:w-[50%] sm:justify-center sm:items-center lg:justify-end lg:items-end", children: /* @__PURE__ */ T.jsx("div", { className: "w-full lg:w-[50%]", children: /* @__PURE__ */ T.jsx(ME, { onClick: i, children: "ADD SWATCHES TO CART" }) }) })
       ]
     }
   );
@@ -29498,7 +29505,7 @@ const WC = ({
       (D) => I(D.name).includes(p)
     )), A === "asc" ? w = [...w].sort((D, O) => b.compare(D.name, O.name)) : A === "dsc" && (w = [...w].sort((D, O) => b.compare(O.name, D.name))), w;
   }, [i, a, p, A, b]);
-  return /* @__PURE__ */ T.jsxs("div", { className: "relative flex h-full min-h-0 flex-col w-full", children: [
+  return /* @__PURE__ */ T.jsxs("div", { className: "relative flex flex-col h-full min-h-0 w-full", children: [
     /* @__PURE__ */ T.jsxs("div", { className: "flex-shrink-0", children: [
       /* @__PURE__ */ T.jsx("div", { className: "h-40 overflow-hidden", children: /* @__PURE__ */ T.jsx("img", { src: l4, className: "object-cover w-full h-full" }) }),
       /* @__PURE__ */ T.jsxs("header", { className: "flex flex-col border-b border-[var(--border)] lg:flex-row lg:justify-between", children: [
@@ -29512,10 +29519,10 @@ const WC = ({
         ] }) })
       ] })
     ] }),
-    /* @__PURE__ */ T.jsxs("div", { className: "flex flex-1 min-h-0 flex-col", children: [
+    /* @__PURE__ */ T.jsxs("div", { className: "flex flex-col flex-1 min-h-0", children: [
       (t || n) && /* @__PURE__ */ T.jsx(WC, {}),
-      /* @__PURE__ */ T.jsxs("div", { className: "flex w-full items-center justify-between gap-[16px] border-b border-[var(--border)] p-[var(--sm-padding)]", children: [
-        /* @__PURE__ */ T.jsxs("div", { className: "flex h-[36px] w-full items-center justify-between gap-[16px] shrink-0 lg:max-w-[382px]", children: [
+      /* @__PURE__ */ T.jsxs("div", { className: "flex flex-row w-full items-center justify-between gap-[16px] border-b border-[var(--border)] p-[var(--sm-padding)]", children: [
+        /* @__PURE__ */ T.jsxs("div", { className: "flex flex-row h-[36px] w-full items-center justify-between gap-[16px] shrink-0 lg:max-w-[382px]", children: [
           /* @__PURE__ */ T.jsxs("div", { className: "relative h-[36px] flex-1 min-w-0 lg:max-w-[240px]", children: [
             /* @__PURE__ */ T.jsx(
               "input",
@@ -29561,7 +29568,7 @@ const WC = ({
             items: y,
             activeId: a.productId,
             onSelect: (w) => l(w),
-            className: "hidden lg:flex shrink-0 overflow-x-auto"
+            className: "hidden lg:flex flex-row shrink-0 overflow-x-auto"
           }
         )
       ] }),
@@ -29582,7 +29589,7 @@ const WC = ({
             productListItem: w
           },
           w.name
-        )) }) : /* @__PURE__ */ T.jsx("div", { className: "flex h-full items-center justify-center", children: "No products were found" })
+        )) }) : /* @__PURE__ */ T.jsx("div", { className: "flex flex-row h-full items-center justify-center", children: "No products were found" })
       ] }),
       s.length ? /* @__PURE__ */ T.jsx(GC, {}) : null
     ] })
@@ -29848,7 +29855,7 @@ function A4({
         ZC,
         {
           "data-slot": "checkbox-indicator",
-          className: "flex items-center justify-center text-current transition-none",
+          className: "flex flex-row items-center justify-center text-current transition-none",
           children: /* @__PURE__ */ T.jsx(E1, { className: "size-3" })
         }
       )
@@ -29890,7 +29897,7 @@ const ra = v.forwardRef(
         "span",
         {
           className: `
-              flex-none flex justify-center items-center
+              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
@@ -30170,7 +30177,7 @@ const tT = ({
       dropdownWidth: "w-80"
     }
   );
-}, nT = () => /* @__PURE__ */ T.jsxs("div", { className: "flex items-center gap-[16px] p-[var(--sm-padding)] border-b border-solid border-[var(--border)]", children: [
+}, nT = () => /* @__PURE__ */ T.jsxs("div", { className: "flex flex-row items-center gap-[16px] p-[var(--sm-padding)] border-b border-solid border-[var(--border)]", children: [
   /* @__PURE__ */ T.jsx(E4, {}),
   /* @__PURE__ */ T.jsx(y4, {}),
   /* @__PURE__ */ T.jsx(C4, {})
@@ -30184,7 +30191,7 @@ const tT = ({
       /* @__PURE__ */ T.jsx(
         tT,
         {
-          containerStyles: `flex 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-[12px]
         border-b border-[var(--border)]
         sm:max-w-[360px] sm:text-sm sm:border-none
         `,
@@ -30787,7 +30794,7 @@ const B4 = (e) => /* @__PURE__ */ T.jsx(
             {
               className: `
           absolute top-0 right-0 m-2 h-[30px] w-[30px]
-          flex items-center justify-center rounded-2xl border-none
+          flex flex-row items-center justify-center rounded-2xl border-none
           bg-[var(--background-grey)] pointer-events-none
           ${f ? "bg-[var(--main-accent-color)]" : ""}
         `,
@@ -30826,7 +30833,7 @@ const B4 = (e) => /* @__PURE__ */ T.jsx(
       document.removeEventListener("mousedown", c);
     };
   }, [e, t]), e ? FE.createPortal(
-    /* @__PURE__ */ T.jsx("div", { className: "fixed inset-0 z-99999999999999 flex items-center justify-center bg-black/40 p-4", children: /* @__PURE__ */ T.jsxs(
+    /* @__PURE__ */ T.jsx("div", { className: "fixed inset-0 z-99999999999999 flex flex-row items-center justify-center bg-black/40 p-4", children: /* @__PURE__ */ T.jsxs(
       "div",
       {
         ref: l,
@@ -30839,13 +30846,13 @@ const B4 = (e) => /* @__PURE__ */ T.jsx(
           height: s || "auto"
         },
         children: [
-          /* @__PURE__ */ T.jsxs("div", { className: "flex items-center justify-between p-[var(--sm-padding)] border-b border-[var(--border)]", children: [
+          /* @__PURE__ */ T.jsxs("div", { className: "flex flex-row items-center justify-between p-[var(--sm-padding)] border-b border-[var(--border)]", children: [
             /* @__PURE__ */ T.jsx("span", { className: "text-base font-semibold text-[var(--text)]", children: n }),
             /* @__PURE__ */ T.jsx(
               "button",
               {
                 onClick: t,
-                className: "flex justify-center items-center p-1 rounded-full bg-[var(--border)] hover:bg-gray-100 transition [&_svg_path]:stroke-[var(--svg-dark)] w-[30px] h-[30px]",
+                className: "flex flex-row justify-center items-center p-1 rounded-full bg-[var(--border)] hover:bg-gray-100 transition [&_svg_path]:stroke-[var(--svg-dark)] w-[30px] h-[30px]",
                 children: /* @__PURE__ */ T.jsx(
                   Xs,
                   {
@@ -30959,8 +30966,8 @@ const B4 = (e) => /* @__PURE__ */ T.jsx(
   const n = () => {
     e(C2());
   };
-  return /* @__PURE__ */ T.jsxs("div", { className: "flex h-full flex-col", children: [
-    /* @__PURE__ */ T.jsx("header", { className: "flex shrink-0 items-center justify-between border-b border-[var(--border)] p-[var(--sm-padding)]", children: /* @__PURE__ */ T.jsxs("div", { className: "flex items-center gap-[8px]", children: [
+  return /* @__PURE__ */ T.jsxs("div", { className: "flex flex-col h-full ", children: [
+    /* @__PURE__ */ T.jsx("header", { className: "flex flex-row shrink-0 items-center justify-between border-b border-[var(--border)] p-[var(--sm-padding)]", children: /* @__PURE__ */ T.jsxs("div", { className: "flex flex-row items-center gap-[8px]", children: [
       /* @__PURE__ */ T.jsx(
         "button",
         {
@@ -30971,7 +30978,7 @@ const B4 = (e) => /* @__PURE__ */ T.jsx(
       ),
       /* @__PURE__ */ T.jsx("h2", { className: "m-0 text-base font-medium leading-[1.6]", children: t?.name })
     ] }) }),
-    /* @__PURE__ */ T.jsxs("div", { className: "flex min-h-0 flex-1 flex-col", children: [
+    /* @__PURE__ */ T.jsxs("div", { className: "flex flex-col min-h-0 flex-1 ", children: [
       /* @__PURE__ */ T.jsx("div", { className: "shrink-0", children: /* @__PURE__ */ T.jsx(T4, {}) }),
       /* @__PURE__ */ T.jsx(
         L4,
@@ -31078,7 +31085,7 @@ const Y4 = () => /* @__PURE__ */ T.jsx(
     n(pl({ selectedMaterial: a }));
   }, s = Math.max(0, Ht - e.length);
   return /* @__PURE__ */ T.jsxs("div", { className: t, children: [
-    /* @__PURE__ */ T.jsxs("div", { className: "flex justify-between items-center mb-[12px]", children: [
+    /* @__PURE__ */ T.jsxs("div", { className: "flex flex-row justify-between items-center mb-[12px]", children: [
       /* @__PURE__ */ T.jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ T.jsx("div", { className: "", children: "Swatches list" }),
         /* @__PURE__ */ T.jsx("span", { className: "absolute top-0 right-[-20px] font-medium text-[var(--main-accent-color)] text-[8px] leading-none", children: "Free" })
@@ -31090,7 +31097,7 @@ const Y4 = () => /* @__PURE__ */ T.jsx(
         " Selected"
       ] })
     ] }),
-    /* @__PURE__ */ T.jsxs("div", { className: "flex flex-wrap gap-[8px]", children: [
+    /* @__PURE__ */ T.jsxs("div", { className: "flex flex-row flex-wrap gap-[8px]", children: [
       e.map((a, l) => {
         const c = a.metadata;
         return /* @__PURE__ */ T.jsx(
@@ -31161,13 +31168,13 @@ const Y4 = () => /* @__PURE__ */ T.jsx(
     c && i(b2(c)), n(nl.CART);
   };
   return /* @__PURE__ */ T.jsxs(sT, { isOpen: e, setIsOpen: t, children: [
-    /* @__PURE__ */ T.jsxs("header", { className: "flex p-[var(--sm-padding)] justify-between items-center border-b border-solid border-[var(--border)]", children: [
+    /* @__PURE__ */ T.jsxs("header", { className: "flex flex-row p-[var(--sm-padding)] justify-between items-center border-b border-solid border-[var(--border)]", children: [
       /* @__PURE__ */ T.jsx("h2", { className: "m-0 text-[16px] leading-[1.6] font-medium", children: "Order free swatches" }),
       /* @__PURE__ */ T.jsx(
         "button",
         {
-          className: `flex justify-center items-center w-[30px] h-[30px] bg-[var(--background-grey)]\r
-              border-none cursor-pointer rounded-full\r
+          className: `flex flex-row justify-center items-center w-[30px] h-[30px] bg-[var(--background-grey)]
+              border-none cursor-pointer rounded-full
               [&_svg_path]:stroke-[var(--svg-dark)]`,
           onClick: t,
           children: /* @__PURE__ */ T.jsx(Xs, { width: 10, height: 10 })
@@ -31179,7 +31186,7 @@ const Y4 = () => /* @__PURE__ */ T.jsx(
       /* @__PURE__ */ T.jsx(
         tT,
         {
-          containerStyles: "flex justify-between items-center shrink-0 p-[var(--sm-padding)] border-b border-solid border-[var(--border)]",
+          containerStyles: "flex flex-row justify-between items-center shrink-0 p-[var(--sm-padding)] border-b border-solid border-[var(--border)]",
           selectStyles: "min-w-[auto] max-w-[154px] sm:max-w-[auto] sm:min-w-[250px]"
         }
       ),
@@ -31210,9 +31217,9 @@ const Y4 = () => /* @__PURE__ */ T.jsx(
   onToggleSidebar: t
 }) => {
   const n = je(aT);
-  return /* @__PURE__ */ T.jsxs("header", { className: "flex MaterialMultiProductList justify-between items-center border-b border-solid border-[var(--border)] p-[var(--sm-padding)]", children: [
-    /* @__PURE__ */ T.jsxs("div", { className: "flex items-center flex-row  gap-[4px]", children: [
-      /* @__PURE__ */ T.jsxs("div", { className: "flex items-center gap-[8px]", children: [
+  return /* @__PURE__ */ T.jsxs("header", { className: "flex flex-row MaterialMultiProductList justify-between items-center border-b border-solid border-[var(--border)] p-[var(--sm-padding)]", children: [
+    /* @__PURE__ */ T.jsxs("div", { className: "flex flex-row items-center gap-[4px]", children: [
+      /* @__PURE__ */ T.jsxs("div", { className: "flex flex-row items-center gap-[8px]", children: [
         /* @__PURE__ */ T.jsx(
           "button",
           {
@@ -31239,7 +31246,7 @@ const Y4 = () => /* @__PURE__ */ T.jsx(
     /* @__PURE__ */ T.jsx(
       "button",
       {
-        className: `flex justify-center items-center w-[30px] h-[30px] bg-[var(--background-grey)]
+        className: `flex flex-row justify-center items-center w-[30px] h-[30px] bg-[var(--background-grey)]
             border-none cursor-pointer rounded-full
             [&_svg_path]:stroke-[var(--svg-dark)]`,
         onClick: t,