@drawbridge/components 0.0.45 → 0.0.46

package/dist/advertisement.js

@@ -33,374 +33,20 @@ __export(advertisement_exports, {
   default: () => advertisement_default
 });
 module.exports = __toCommonJS(advertisement_exports);
-
-// components/card-advertisement.js
-var import_react = require("react");
-var import_cdn = require("@drawbridge/shopify/cdn");
 var import_cdn2 = require("@drawbridge/drawbridge-utils/cdn");
-var import_drawbridge_utils = require("@drawbridge/drawbridge-utils");
-var import_jsx_runtime = require("react/jsx-runtime");
-var DefaultImage = ({ alt, className, src }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-  "img",
-  {
-    ...{
-      alt,
-      className,
-      src
-    }
-  }
-);
-var DefaultVideo = ({ className, hls, mp4, poster }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-  "video",
-  {
-    ...{
-      className,
-      poster,
-      src: mp4 || hls
-    }
-  }
-);
-var CardAdvertisement = ({
-  advertisement,
-  affiliate,
-  asset,
-  brand = {},
-  button,
-  campaign,
-  fonts,
-  ImageComponent = DefaultImage,
-  lead,
-  onClick = () => {
-  },
-  onVariantSelect = () => {
-  },
-  organization,
-  page,
-  preview = false,
-  product,
-  title,
-  url,
-  VideoComponent = DefaultVideo
-}) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N;
-  const variants = ((product == null ? void 0 : product.variants) || []).filter((v) => v.availableForSale);
-  const hasVariants = variants.length > 0;
-  const [selectedVariant, setSelectedVariant] = (0, import_react.useState)(variants[0] || null);
-  const [keyboard, setKeyboard] = (0, import_react.useState)(false);
-  (0, import_react.useEffect)(() => {
-    const down = (e) => {
-      if (e.key === "Tab") setKeyboard(true);
-    };
-    const click = () => setKeyboard(false);
-    window.addEventListener("keydown", down);
-    window.addEventListener("mousedown", click);
-    return () => {
-      window.removeEventListener("keydown", down);
-      window.removeEventListener("mousedown", click);
-    };
-  }, []);
-  const style = {
-    background: {
-      color: ((_a = brand == null ? void 0 : brand.style) == null ? void 0 : _a.background) ? (_b = brand.style.background) == null ? void 0 : _b.color : {
-        hex: "#FFFFFF",
-        rgb: "rgb( 255, 255, 255 )"
-      }
-    },
-    text: {
-      color: ((_c = brand == null ? void 0 : brand.style) == null ? void 0 : _c.text) ? (_d = brand.style.text) == null ? void 0 : _d.color : {
-        hex: "#000000",
-        rgb: "rgb( 0, 0, 0 )"
-      }
-    }
-  };
-  const classes = {
-    asset: [
-      "block relative aspect-square rounded overflow-hidden"
-    ],
-    button: [
-      "card-advertisement-button",
-      "flex items-center justify-center py-3 px-4 w-full border"
-    ],
-    container: [
-      "card-advertisement",
-      "block w-full space-y-2 border border-gray rounded p-6"
-    ],
-    content: [
-      "flex flex-col items-center justify-between gap-x-4 text-center text-sm rounded"
-    ]
-  };
-  const productImage = (selectedVariant == null ? void 0 : selectedVariant.image) || (product == null ? void 0 : product.image) || null;
-  const productImageSrc = (0, import_cdn.cdnShopify)(productImage, "400x400", product == null ? void 0 : product.updatedAt);
-  if (!(asset == null ? void 0 : asset.sizes) && !productImageSrc) {
-    classes.asset.push("bg-gray-light");
-  }
-  ;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    "div",
-    {
-      ...{
-        className: classes.container.join(" "),
-        style: {
-          backgroundColor: (_f = (_e = style == null ? void 0 : style.background) == null ? void 0 : _e.color) == null ? void 0 : _f.hex,
-          color: (_h = (_g = style == null ? void 0 : style.text) == null ? void 0 : _g.color) == null ? void 0 : _h.hex
-        }
-      },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          "span",
-          {
-            ...{
-              className: classes.asset.join(" ")
-            },
-            children: [
-              (asset == null ? void 0 : asset.sizes) && asset.mimetype.includes("image") && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                ImageComponent,
-                {
-                  ...{
-                    alt: asset == null ? void 0 : asset.filename,
-                    className: "w-full h-full object-cover",
-                    fill: true,
-                    priority: false,
-                    sizes: "100%",
-                    src: (0, import_cdn2.cdnSrc)(asset, "400x400", asset == null ? void 0 : asset.updatedAt)
-                  }
-                },
-                asset == null ? void 0 : asset.id
-              ),
-              !(asset == null ? void 0 : asset.sizes) && productImageSrc && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                ImageComponent,
-                {
-                  ...{
-                    alt: (product == null ? void 0 : product.title) || "Product",
-                    className: "w-full h-full object-cover",
-                    fill: true,
-                    priority: false,
-                    sizes: "100%",
-                    src: productImageSrc,
-                    unoptimized: true
-                  }
-                },
-                productImageSrc
-              ),
-              (asset == null ? void 0 : asset.sizes) && asset.mimetype.includes("video") && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                "div",
-                {
-                  ...{
-                    className: "relative h-full w-full aspect-[9/16]"
-                  },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                    VideoComponent,
-                    {
-                      ...{
-                        className: "w-full h-full",
-                        hls: (0, import_cdn2.cdnSrc)(asset, "hls", asset == null ? void 0 : asset.updatedAt),
-                        mp4: (0, import_cdn2.cdnSrc)(asset, "original", asset == null ? void 0 : asset.updatedAt),
-                        poster: (0, import_cdn2.cdnSrc)((_i = asset == null ? void 0 : asset.frames) == null ? void 0 : _i[asset == null ? void 0 : asset.poster], "500x500", asset == null ? void 0 : asset.updatedAt) || (0, import_cdn2.cdnSrc)((_j = asset == null ? void 0 : asset.frames) == null ? void 0 : _j[asset == null ? void 0 : asset.poster], "1080x1920", asset == null ? void 0 : asset.updatedAt)
-                      }
-                    }
-                  )
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          "span",
-          {
-            ...{
-              className: classes.content.join(" "),
-              style: {
-                ...fonts == null ? void 0 : fonts.body,
-                color: (_l = (_k = style == null ? void 0 : style.text) == null ? void 0 : _k.color) == null ? void 0 : _l.hex,
-                gap: "10px",
-                marginTop: "10px"
-              }
-            },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                "div",
-                {
-                  ...{
-                    className: "flex-1 min-w-0 space-y-2"
-                  },
-                  children: [
-                    title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                      "p",
-                      {
-                        ...{
-                          style: {
-                            fontSize: "18px"
-                          }
-                        },
-                        children: title
-                      }
-                    ),
-                    (selectedVariant == null ? void 0 : selectedVariant.price) && (selectedVariant == null ? void 0 : selectedVariant.currency) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                      "p",
-                      {
-                        ...{
-                          style: {
-                            fontSize: "14px",
-                            marginBottom: "10px"
-                          }
-                        },
-                        children: [
-                          (selectedVariant == null ? void 0 : selectedVariant.sale) && selectedVariant.sale > selectedVariant.price && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                            "span",
-                            {
-                              ...{
-                                style: {
-                                  marginRight: "6px",
-                                  opacity: 0.5,
-                                  textDecoration: "line-through"
-                                }
-                              },
-                              children: (0, import_drawbridge_utils.formatCurrency)({
-                                code: selectedVariant.currency,
-                                display: "parts",
-                                value: selectedVariant.sale
-                              })
-                            }
-                          ),
-                          (0, import_drawbridge_utils.formatCurrency)({
-                            code: selectedVariant.currency,
-                            display: "parts",
-                            value: selectedVariant.price
-                          })
-                        ]
-                      }
-                    ),
-                    variants.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                      "div",
-                      {
-                        ...{
-                          className: "relative w-full"
-                        },
-                        children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                            "select",
-                            {
-                              ...{
-                                className: "input appearance-none " + (keyboard ? "focus-visible:!outline-1 focus-visible:!ring-1 focus-visible:!ring-blue-600" : "focus-visible:!outline-0 focus-visible:!ring-0"),
-                                onChange: (e) => {
-                                  const variant = variants.find((v) => v.id === e.target.value);
-                                  if (variant) setSelectedVariant(variant);
-                                },
-                                style: {
-                                  appearance: "none",
-                                  backgroundColor: (_n = (_m = style == null ? void 0 : style.background) == null ? void 0 : _m.color) == null ? void 0 : _n.rgb,
-                                  backgroundImage: "none",
-                                  borderColor: (_p = (_o = style == null ? void 0 : style.text) == null ? void 0 : _o.color) == null ? void 0 : _p.rgb,
-                                  borderRadius: ((_r = (_q = brand == null ? void 0 : brand.style) == null ? void 0 : _q.button) == null ? void 0 : _r.radius) != null ? brand.style.button.radius / 4 + "px" : void 0,
-                                  color: (_t = (_s = style == null ? void 0 : style.text) == null ? void 0 : _s.color) == null ? void 0 : _t.rgb,
-                                  WebkitAppearance: "none"
-                                },
-                                value: (selectedVariant == null ? void 0 : selectedVariant.id) || ""
-                              },
-                              children: variants.map((variant) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                                "option",
-                                {
-                                  ...{
-                                    value: variant.id
-                                  },
-                                  children: variant.title
-                                },
-                                variant.id
-                              ))
-                            }
-                          ),
-                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                            "div",
-                            {
-                              ...{
-                                "aria-hidden": true,
-                                style: {
-                                  alignItems: "center",
-                                  bottom: 0,
-                                  display: "flex",
-                                  paddingRight: "0.625rem",
-                                  pointerEvents: "none",
-                                  position: "absolute",
-                                  right: 0,
-                                  top: 0
-                                }
-                              },
-                              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                                "svg",
-                                {
-                                  ...{
-                                    style: {
-                                      height: "1.25rem",
-                                      width: "1.25rem"
-                                    },
-                                    fill: "none",
-                                    stroke: "currentColor",
-                                    strokeWidth: 1.5,
-                                    viewBox: "0 0 24 24",
-                                    xmlns: "http://www.w3.org/2000/svg"
-                                  },
-                                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                                    "path",
-                                    {
-                                      ...{
-                                        d: "M19.5 8.25l-7.5 7.5-7.5-7.5",
-                                        strokeLinecap: "round",
-                                        strokeLinejoin: "round"
-                                      }
-                                    }
-                                  )
-                                }
-                              )
-                            }
-                          )
-                        ]
-                      }
-                    )
-                  ]
-                }
-              ),
-              button && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                "button",
-                {
-                  ...{
-                    className: classes.button.join(" "),
-                    disabled: !preview && !hasVariants && !url,
-                    onClick: hasVariants ? () => {
-                      if (!preview) onVariantSelect(selectedVariant);
-                    } : preview ? () => {
-                    } : onClick,
-                    style: {
-                      backgroundColor: ((_x = (_w = (_v = (_u = brand == null ? void 0 : brand.style) == null ? void 0 : _u.button) == null ? void 0 : _v.background) == null ? void 0 : _w.color) == null ? void 0 : _x.hex) || ((_z = (_y = style == null ? void 0 : style.text) == null ? void 0 : _y.color) == null ? void 0 : _z.hex),
-                      borderColor: ((_D = (_C = (_B = (_A = brand == null ? void 0 : brand.style) == null ? void 0 : _A.button) == null ? void 0 : _B.background) == null ? void 0 : _C.color) == null ? void 0 : _D.hex) || ((_F = (_E = style == null ? void 0 : style.text) == null ? void 0 : _E.color) == null ? void 0 : _F.hex),
-                      borderRadius: ((_H = (_G = brand == null ? void 0 : brand.style) == null ? void 0 : _G.button) == null ? void 0 : _H.radius) != null ? brand.style.button.radius / 4 + "px" : void 0,
-                      color: ((_L = (_K = (_J = (_I = brand == null ? void 0 : brand.style) == null ? void 0 : _I.button) == null ? void 0 : _J.text) == null ? void 0 : _K.color) == null ? void 0 : _L.hex) || ((_N = (_M = style == null ? void 0 : style.background) == null ? void 0 : _M.color) == null ? void 0 : _N.hex)
-                    },
-                    type: "button"
-                  },
-                  children: button
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
-var card_advertisement_default = CardAdvertisement;
 
 // components/product.js
-var import_react5 = require("react");
+var import_react4 = require("react");
 var import_embla_carousel_react = __toESM(require("embla-carousel-react"));
-var import_cdn3 = require("@drawbridge/shopify/cdn");
-var import_drawbridge_utils2 = require("@drawbridge/drawbridge-utils");
+var import_cdn = require("@drawbridge/shopify/cdn");
+var import_drawbridge_utils = require("@drawbridge/drawbridge-utils");
 
 // components/input-group.js
-var import_react2 = require("react");
+var import_react = require("react");
 
 // components/icons/warning.js
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var Warning = (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+var import_jsx_runtime = require("react/jsx-runtime");
+var Warning = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
   "svg",
   {
     ...{
@@ -410,7 +56,7 @@ var Warning = (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       viewBox: "0 0 24 24",
       ...props
     },
-    children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "path",
       {
         ...{
@@ -425,7 +71,7 @@ var Warning = (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
 var warning_default = Warning;
 
 // components/input-group.js
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var InputGroup = ({
   className,
   error,
@@ -445,7 +91,7 @@ var InputGroup = ({
   if (error) {
     classes.push("error");
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "div",
     {
       ...{
@@ -456,14 +102,14 @@ var InputGroup = ({
         }
       },
       children: [
-        label ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        label ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
           "div",
           {
             ...{
               className: "space-y-2"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                 "span",
                 {
                   ...{
@@ -476,21 +122,21 @@ var InputGroup = ({
             ]
           }
         ) : input,
-        (error || message) && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        (error || message) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
           "p",
           {
             ...{
               className: "flex items-center justify-start space-x-2 py-1 rounded text-sm " + (error && "px-1.5"),
-              ...error && Object.keys(style).length > 0 && {
+              ...error && {
                 style: {
-                  backgroundColor: (_b = (_a = style == null ? void 0 : style.text) == null ? void 0 : _a.color) == null ? void 0 : _b.rgb.replace(")", ",.1)"),
-                  color: (_d = (_c = style == null ? void 0 : style.text) == null ? void 0 : _c.color) == null ? void 0 : _d.rgb
+                  backgroundColor: (((_b = (_a = style == null ? void 0 : style.text) == null ? void 0 : _a.color) == null ? void 0 : _b.rgb) || "rgb( 0, 0, 0 )").replace(")", ",.1)"),
+                  color: ((_d = (_c = style == null ? void 0 : style.text) == null ? void 0 : _c.color) == null ? void 0 : _d.rgb) || "rgb( 0, 0, 0 )"
                 }
               }
             },
             children: [
-              error && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react2.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              error && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                   warning_default,
                   {
                     ...{
@@ -499,7 +145,7 @@ var InputGroup = ({
                     }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
                   "span",
                   {
                     ...{
@@ -513,7 +159,7 @@ var InputGroup = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                 "span",
                 {
                   ...{
@@ -534,11 +180,11 @@ var InputGroup = ({
 var input_group_default = InputGroup;
 
 // components/input-select.js
-var import_react3 = require("react");
+var import_react2 = require("react");
 
 // components/icons/chevron-down.js
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var ChevronDown = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var ChevronDown = (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
   "svg",
   {
     ...{
@@ -548,7 +194,7 @@ var ChevronDown = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       viewBox: "0 0 24 24",
       ...props
     },
-    children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "path",
       {
         ...{
@@ -563,27 +209,37 @@ var ChevronDown = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
 var chevron_down_default = ChevronDown;
 
 // components/styles.js
+var WHITE = "rgb( 255, 255, 255 )";
+var BLACK = "rgb( 0, 0, 0 )";
+var bgColor = (style) => {
+  var _a, _b;
+  return ((_b = (_a = style == null ? void 0 : style.background) == null ? void 0 : _a.color) == null ? void 0 : _b.rgb) || WHITE;
+};
+var textColor = (style) => {
+  var _a, _b;
+  return ((_b = (_a = style == null ? void 0 : style.text) == null ? void 0 : _a.color) == null ? void 0 : _b.rgb) || BLACK;
+};
 var buttonStyle = (style) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
   return {
-    backgroundColor: ((_c = (_b = (_a = style == null ? void 0 : style.button) == null ? void 0 : _a.background) == null ? void 0 : _b.color) == null ? void 0 : _c.rgb) || ((_e = (_d = style == null ? void 0 : style.text) == null ? void 0 : _d.color) == null ? void 0 : _e.rgb),
-    borderColor: ((_h = (_g = (_f = style == null ? void 0 : style.button) == null ? void 0 : _f.background) == null ? void 0 : _g.color) == null ? void 0 : _h.rgb) || ((_j = (_i = style == null ? void 0 : style.text) == null ? void 0 : _i.color) == null ? void 0 : _j.rgb),
-    borderRadius: ((_k = style == null ? void 0 : style.button) == null ? void 0 : _k.radius) != null ? style.button.radius / 4 + "px" : void 0,
-    color: ((_n = (_m = (_l = style == null ? void 0 : style.button) == null ? void 0 : _l.text) == null ? void 0 : _m.color) == null ? void 0 : _n.rgb) || ((_p = (_o = style == null ? void 0 : style.background) == null ? void 0 : _o.color) == null ? void 0 : _p.rgb)
+    backgroundColor: ((_c = (_b = (_a = style == null ? void 0 : style.button) == null ? void 0 : _a.background) == null ? void 0 : _b.color) == null ? void 0 : _c.rgb) || textColor(style),
+    borderColor: ((_f = (_e = (_d = style == null ? void 0 : style.button) == null ? void 0 : _d.background) == null ? void 0 : _e.color) == null ? void 0 : _f.rgb) || textColor(style),
+    borderRadius: ((_g = style == null ? void 0 : style.button) == null ? void 0 : _g.radius) != null ? style.button.radius / 4 + "px" : void 0,
+    color: ((_j = (_i = (_h = style == null ? void 0 : style.button) == null ? void 0 : _h.text) == null ? void 0 : _i.color) == null ? void 0 : _j.rgb) || bgColor(style)
   };
 };
 var inputStyle = (style) => {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a;
   return {
-    backgroundColor: (_b = (_a = style == null ? void 0 : style.background) == null ? void 0 : _a.color) == null ? void 0 : _b.rgb,
-    borderColor: (_d = (_c = style == null ? void 0 : style.text) == null ? void 0 : _c.color) == null ? void 0 : _d.rgb,
-    borderRadius: ((_e = style == null ? void 0 : style.input) == null ? void 0 : _e.radius) != null ? style.input.radius / 4 + "px" : void 0,
-    color: (_g = (_f = style == null ? void 0 : style.text) == null ? void 0 : _f.color) == null ? void 0 : _g.rgb
+    backgroundColor: bgColor(style),
+    borderColor: textColor(style),
+    borderRadius: ((_a = style == null ? void 0 : style.input) == null ? void 0 : _a.radius) != null ? style.input.radius / 4 + "px" : void 0,
+    color: textColor(style)
   };
 };
 
 // components/input-select.js
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var InputSelect = ({
   onChange,
   options = [],
@@ -591,8 +247,8 @@ var InputSelect = ({
   value,
   ...rest
 }) => {
-  const [keyboard, setKeyboard] = (0, import_react3.useState)(false);
-  (0, import_react3.useEffect)(() => {
+  const [keyboard, setKeyboard] = (0, import_react2.useState)(false);
+  (0, import_react2.useEffect)(() => {
     const down = (e) => {
       if (e.key === "Tab") setKeyboard(true);
     };
@@ -604,14 +260,14 @@ var InputSelect = ({
       window.removeEventListener("mousedown", click);
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
     {
       ...{
         className: "relative"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
           "select",
           {
             ...{
@@ -622,7 +278,7 @@ var InputSelect = ({
               value
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "option",
                 {
                   ...{
@@ -633,7 +289,7 @@ var InputSelect = ({
                   children: "Select"
                 }
               ),
-              options.map(({ label, option, value: optValue }, key) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              options.map(({ label, option, value: optValue }, key) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "option",
                 {
                   ...{
@@ -646,14 +302,14 @@ var InputSelect = ({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "div",
           {
             ...{
               "aria-hidden": true,
               className: "h-full flex items-center absolute inset-y-0 right-0 pointer-events-none px-2.5"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               chevron_down_default,
               {
                 ...{
@@ -670,9 +326,9 @@ var InputSelect = ({
 var input_select_default = InputSelect;
 
 // components/wrapper-gradient.js
-var import_react4 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var WrapperGradientContext = (0, import_react4.createContext)(null);
+var import_react3 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var WrapperGradientContext = (0, import_react3.createContext)(null);
 var WrapperGradient = ({
   children,
   className,
@@ -730,14 +386,14 @@ var WrapperGradient = ({
     left: "linear-gradient( to right, " + color + " 0%, transparent 100% )",
     right: "linear-gradient( to left, " + color + " 0%, transparent 100% )"
   };
-  const containerRef = (0, import_react4.useRef)(null);
-  const [scroll, setScroll] = (0, import_react4.useState)({
+  const containerRef = (0, import_react3.useRef)(null);
+  const [scroll, setScroll] = (0, import_react3.useState)({
     top: 0,
     left: 0,
     atBottom: true,
     atRight: true
   });
-  (0, import_react4.useEffect)(
+  (0, import_react3.useEffect)(
     () => {
       const container = containerRef.current;
       const handleScroll = () => {
@@ -787,21 +443,21 @@ var WrapperGradient = ({
     },
     [horizontal]
   );
-  const contextValue = (0, import_react4.useMemo)(
+  const contextValue = (0, import_react3.useMemo)(
     () => ({
       atBottom: scroll.atBottom,
       atRight: scroll.atRight
     }),
     [scroll.atBottom, scroll.atRight]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "div",
     {
       ...{
         className: classes.container.join(" ")
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(WrapperGradientContext.Provider, { value: contextValue, children: [
-        showY && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(WrapperGradientContext.Provider, { value: contextValue, children: [
+        showY && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "div",
           {
             ...{
@@ -817,7 +473,7 @@ var WrapperGradient = ({
             }
           }
         ),
-        showX && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        showX && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "div",
           {
             ...{
@@ -830,7 +486,7 @@ var WrapperGradient = ({
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "div",
           {
             ...{
@@ -840,7 +496,7 @@ var WrapperGradient = ({
             children
           }
         ),
-        showY && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        showY && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "div",
           {
             ...{
@@ -853,7 +509,7 @@ var WrapperGradient = ({
             }
           }
         ),
-        showX && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        showX && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "div",
           {
             ...{
@@ -873,8 +529,8 @@ var WrapperGradient = ({
 var wrapper_gradient_default = WrapperGradient;
 
 // components/icons/loader.js
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var Loader = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var Loader = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
   "svg",
   {
     ...{
@@ -886,7 +542,7 @@ var Loader = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime
       ...props
     },
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         "circle",
         {
           ...{
@@ -899,7 +555,7 @@ var Loader = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime
           }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         "path",
         {
           ...{
@@ -915,8 +571,8 @@ var Loader = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime
 var loader_default = Loader;
 
 // components/product.js
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var DefaultImage2 = ({ alt, className, src }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var DefaultImage = ({ alt, className, src }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
   "img",
   {
     ...{
@@ -932,7 +588,7 @@ var Product = ({
   disabled = false,
   errors = {},
   header,
-  ImageComponent = DefaultImage2,
+  ImageComponent = DefaultImage,
   onAdd = () => {
   },
   onBuy = () => {
@@ -955,14 +611,14 @@ var Product = ({
       color: ((_b = style == null ? void 0 : style.text) == null ? void 0 : _b.color) || { hex: "#000000", rgb: "rgb( 0, 0, 0 )" }
     }
   };
-  const available = (0, import_react5.useMemo)(
+  const available = (0, import_react4.useMemo)(
     () => ((product == null ? void 0 : product.variants) || []).filter((v) => v.availableForSale),
     [product]
   );
-  const [activeImage, setActiveImage] = (0, import_react5.useState)(0);
+  const [activeImage, setActiveImage] = (0, import_react4.useState)(0);
   const [emblaRef, emblaApi] = (0, import_embla_carousel_react.default)();
   const selectedVariant = available.find((v) => v.id === variant) || available[0] || null;
-  const images = (0, import_react5.useMemo)(
+  const images = (0, import_react4.useMemo)(
     () => {
       const variants = ((product == null ? void 0 : product.variants) || []).filter((v) => v.availableForSale);
       const result = [];
@@ -987,7 +643,7 @@ var Product = ({
     },
     [product]
   );
-  (0, import_react5.useEffect)(
+  (0, import_react4.useEffect)(
     () => {
       if (!emblaApi) return;
       const onSelect = () => {
@@ -1012,7 +668,7 @@ var Product = ({
     }
     ;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
       ...{
@@ -1024,21 +680,21 @@ var Product = ({
       },
       children: [
         header,
-        images.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        images.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
           "div",
           {
             ...{
               className: "flex items-center h-48 " + (images.length > 1 && "pr-12")
             },
             children: [
-              images.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              images.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 wrapper_gradient_default,
                 {
                   ...{
                     classNameScroll: "flex flex-col w-12 h-48 space-y-3",
                     color: resolved.background.color.rgb
                   },
-                  children: images.map(({ src }, key) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  children: images.map(({ src }, key) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                     "button",
                     {
                       ...{
@@ -1052,7 +708,7 @@ var Product = ({
                           style: inputStyle(resolved)
                         }
                       },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                         ImageComponent,
                         {
                           ...{
@@ -1060,7 +716,7 @@ var Product = ({
                             className: "object-cover",
                             fill: true,
                             sizes: "48px",
-                            src: (0, import_cdn3.cdnShopify)(src, "100x100", product == null ? void 0 : product.updatedAt) || src,
+                            src: (0, import_cdn.cdnShopify)(src, "100x100", product == null ? void 0 : product.updatedAt) || src,
                             unoptimized: true
                           }
                         }
@@ -1070,26 +726,26 @@ var Product = ({
                   ))
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "div",
                 {
                   ...{
                     className: "w-48 h-48 overflow-hidden rounded-3xl m-auto",
                     ref: emblaRef
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                     "div",
                     {
                       ...{
                         className: "flex h-full"
                       },
-                      children: images.map(({ src }, key) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      children: images.map(({ src }, key) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                         "div",
                         {
                           ...{
                             className: "min-w-0 flex-[0_0_100%] relative h-full bg-gray-100"
                           },
-                          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                             ImageComponent,
                             {
                               ...{
@@ -1097,7 +753,7 @@ var Product = ({
                                 className: "object-cover",
                                 fill: true,
                                 sizes: "192px",
-                                src: (0, import_cdn3.cdnShopify)(src, "400x400", product == null ? void 0 : product.updatedAt) || src,
+                                src: (0, import_cdn.cdnShopify)(src, "400x400", product == null ? void 0 : product.updatedAt) || src,
                                 unoptimized: true
                               }
                             }
@@ -1112,14 +768,14 @@ var Product = ({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
           "div",
           {
             ...{
               className: "text-center space-y-2"
             },
             children: [
-              (product == null ? void 0 : product.title) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              (product == null ? void 0 : product.title) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "h2",
                 {
                   ...{
@@ -1133,30 +789,30 @@ var Product = ({
                   children: product == null ? void 0 : product.title
                 }
               ),
-              !available.length ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { children: "Unavailable" }) : (selectedVariant == null ? void 0 : selectedVariant.price) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { children: (0, import_drawbridge_utils2.formatCurrency)({
+              !available.length ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { children: "Unavailable" }) : (selectedVariant == null ? void 0 : selectedVariant.price) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { children: (0, import_drawbridge_utils.formatCurrency)({
                 code: selectedVariant.currency,
                 display: "parts",
                 value: selectedVariant.price
               }) }),
-              (product == null ? void 0 : product.description) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              (product == null ? void 0 : product.description) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 wrapper_gradient_default,
                 {
                   ...{
                     classNameScroll: "max-h-[4.5em]",
                     color: resolved.background.color.rgb
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { children: product.description })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { children: product.description })
                 }
               )
             ]
           }
         ),
-        available.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        available.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           input_group_default,
           {
             ...{
               error: errors == null ? void 0 : errors.variant,
-              input: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              input: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 input_select_default,
                 {
                   ...{
@@ -1175,29 +831,29 @@ var Product = ({
             }
           }
         ),
-        available.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        available.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           input_group_default,
           {
             ...{
               error: errors == null ? void 0 : errors.root,
-              input: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+              input: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
                 "div",
                 {
                   ...{
                     className: addToCart ? "grid grid-cols-2 gap-3" : ""
                   },
                   children: [
-                    addToCart && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    addToCart && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                       "button",
                       {
                         ...{
-                          className: "button justify-center border",
+                          className: "button justify-center border py-3 px-4 rounded",
                           disabled: disabled || Boolean(action),
                           onClick: onAdd,
                           style: inputStyle(resolved),
                           type: "button"
                         },
-                        children: action === "add" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                        children: action === "add" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                           loader_default,
                           {
                             ...{
@@ -1207,17 +863,17 @@ var Product = ({
                         ) : "Add to cart"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                       "button",
                       {
                         ...{
-                          className: "button justify-center" + (addToCart ? "" : " w-full"),
+                          className: "button justify-center py-3 px-4 rounded" + (addToCart ? "" : " w-full"),
                           disabled: disabled || Boolean(action),
                           onClick: onBuy,
                           style: buttonStyle(resolved),
                           type: "button"
                         },
-                        children: action === "buy" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                        children: action === "buy" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                           loader_default,
                           {
                             ...{
@@ -1241,10 +897,29 @@ var Product = ({
 var product_default = Product;
 
 // components/advertisement.js
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var DefaultImage2 = ({ alt, className, src }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  "img",
+  {
+    ...{
+      alt,
+      className,
+      src
+    }
+  }
+);
+var DefaultVideo = ({ className, hls, mp4, poster }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  "video",
+  {
+    ...{
+      className,
+      poster,
+      src: mp4 || hls
+    }
+  }
+);
 var Advertisement = ({
   action = null,
-  affiliate,
   brand,
   button,
   campaign,
@@ -1253,16 +928,13 @@ var Advertisement = ({
   file,
   fonts,
   header,
-  id,
-  ImageComponent,
+  ImageComponent = DefaultImage2,
   lead,
   onAdd,
   onBuy,
   onClick = () => {
   },
   onVariantChange,
-  onVariantSelect = () => {
-  },
   organization,
   page,
   preview = false,
@@ -1271,10 +943,11 @@ var Advertisement = ({
   title,
   url,
   variant,
-  VideoComponent
+  VideoComponent = DefaultVideo
 }) => {
+  var _a, _b, _c, _d, _e;
   if (product) {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       product_default,
       {
         ...{
@@ -1294,29 +967,130 @@ var Advertisement = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    card_advertisement_default,
+  const base = (brand == null ? void 0 : brand.style) || style;
+  const resolved = {
+    ...base,
+    background: {
+      ...base == null ? void 0 : base.background,
+      color: ((_a = base == null ? void 0 : base.background) == null ? void 0 : _a.color) || { hex: "#FFFFFF", rgb: "rgb( 255, 255, 255 )" }
+    },
+    text: {
+      ...base == null ? void 0 : base.text,
+      color: ((_b = base == null ? void 0 : base.text) == null ? void 0 : _b.color) || { hex: "#000000", rgb: "rgb( 0, 0, 0 )" }
+    }
+  };
+  const isVideo = (_c = file == null ? void 0 : file.mimetype) == null ? void 0 : _c.includes("video");
+  const card = (assetNode) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "div",
     {
       ...{
-        advertisement: id,
-        affiliate,
-        asset: file,
-        brand: brand || { style },
-        button,
-        campaign,
-        fonts,
-        ImageComponent,
-        lead,
-        onClick,
-        onVariantSelect,
-        organization,
-        page,
-        preview,
-        title,
-        url,
-        VideoComponent
-      }
+        className: "block w-full space-y-2",
+        style: {
+          backgroundColor: resolved.background.color.hex,
+          color: resolved.text.color.hex
+        }
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "span",
+          {
+            ...{
+              className: "block relative aspect-square rounded overflow-hidden" + ((file == null ? void 0 : file.sizes) ? "" : " bg-gray-light")
+            },
+            children: assetNode
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          "span",
+          {
+            ...{
+              className: "flex flex-col items-center justify-between gap-x-4 text-center text-sm rounded",
+              style: {
+                ...fonts == null ? void 0 : fonts.body,
+                color: resolved.text.color.hex,
+                gap: "10px",
+                marginTop: "10px"
+              }
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                "div",
+                {
+                  ...{
+                    className: "flex-1 min-w-0 space-y-2"
+                  },
+                  children: title && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    "p",
+                    {
+                      ...{
+                        style: {
+                          fontSize: "18px"
+                        }
+                      },
+                      children: title
+                    }
+                  )
+                }
+              ),
+              button && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                "button",
+                {
+                  ...{
+                    className: "flex items-center justify-center py-3 px-4 w-full border",
+                    disabled: !preview && !url,
+                    onClick: preview ? () => {
+                    } : onClick,
+                    style: buttonStyle(resolved),
+                    type: "button"
+                  },
+                  children: button
+                }
+              )
+            ]
+          }
+        )
+      ]
     }
   );
+  if (isVideo) {
+    return card(
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "div",
+        {
+          ...{
+            className: "relative h-full w-full aspect-[9/16]"
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            VideoComponent,
+            {
+              ...{
+                className: "w-full h-full",
+                hls: (0, import_cdn2.cdnSrc)(file, "hls", file == null ? void 0 : file.updatedAt),
+                mp4: (0, import_cdn2.cdnSrc)(file, "original", file == null ? void 0 : file.updatedAt),
+                poster: (0, import_cdn2.cdnSrc)((_d = file == null ? void 0 : file.frames) == null ? void 0 : _d[file == null ? void 0 : file.poster], "500x500", file == null ? void 0 : file.updatedAt) || (0, import_cdn2.cdnSrc)((_e = file == null ? void 0 : file.frames) == null ? void 0 : _e[file == null ? void 0 : file.poster], "1080x1920", file == null ? void 0 : file.updatedAt),
+                style: resolved
+              }
+            }
+          )
+        }
+      )
+    );
+  }
+  return card(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      ImageComponent,
+      {
+        ...{
+          alt: file == null ? void 0 : file.filename,
+          className: "w-full h-full object-cover",
+          fill: true,
+          priority: false,
+          sizes: "100%",
+          src: (0, import_cdn2.cdnSrc)(file, "400x400", file == null ? void 0 : file.updatedAt)
+        }
+      },
+      file == null ? void 0 : file.id
+    )
+  );
 };
 var advertisement_default = Advertisement;