@drawbridge/components 0.0.37 → 0.0.40

package/dist/advertisement.js

@@ -0,0 +1,1299 @@
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// components/advertisement.js
+var advertisement_exports = {};
+__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_embla_carousel_react = __toESM(require("embla-carousel-react"));
+var import_cdn3 = require("@drawbridge/shopify/cdn");
+var import_drawbridge_utils2 = require("@drawbridge/drawbridge-utils");
+
+// components/input-group.js
+var import_react2 = require("react");
+
+// components/icons/warning.js
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Warning = (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  "svg",
+  {
+    ...{
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1.5,
+      viewBox: "0 0 24 24",
+      ...props
+    },
+    children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "path",
+      {
+        ...{
+          d: "M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      }
+    )
+  }
+);
+var warning_default = Warning;
+
+// components/input-group.js
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var InputGroup = ({
+  className,
+  error,
+  input,
+  label,
+  message,
+  style = {}
+}) => {
+  var _a, _b, _c, _d;
+  const classes = [
+    "input-group"
+  ];
+  if (className) {
+    classes.push(className);
+  }
+  if (error) {
+    classes.push("error");
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      ...{
+        className: classes.join(" "),
+        "aria-live": "polite"
+      },
+      children: [
+        label ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "div",
+          {
+            ...{
+              className: "space-y-2"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "span",
+                {
+                  ...{
+                    className: "block"
+                  },
+                  children: label
+                }
+              ),
+              input
+            ]
+          }
+        ) : input,
+        (error || message) && /* @__PURE__ */ (0, import_jsx_runtime3.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 && {
+                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
+                }
+              }
+            },
+            children: [
+              error && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react2.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  warning_default,
+                  {
+                    ...{
+                      className: "w-4 h-4",
+                      "aria-hidden": true
+                    }
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                  "span",
+                  {
+                    ...{
+                      className: "text-[0px] opacity-0 w-0 h-0 absolute"
+                    },
+                    children: [
+                      label,
+                      ": ",
+                      error
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "span",
+                {
+                  ...{
+                    ...error && {
+                      "aria-hidden": true
+                    }
+                  },
+                  children: error || message
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var input_group_default = InputGroup;
+
+// components/input-select.js
+var import_react3 = require("react");
+
+// components/icons/chevron-down.js
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var ChevronDown = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  "svg",
+  {
+    ...{
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1.5,
+      viewBox: "0 0 24 24",
+      ...props
+    },
+    children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "path",
+      {
+        ...{
+          d: "m19.5 8.25-7.5 7.5-7.5-7.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      }
+    )
+  }
+);
+var chevron_down_default = ChevronDown;
+
+// components/styles.js
+var buttonStyle = (style) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
+  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)
+  };
+};
+var inputStyle = (style) => {
+  var _a, _b, _c, _d, _e, _f, _g;
+  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
+  };
+};
+
+// components/input-select.js
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var InputSelect = ({
+  onChange,
+  options = [],
+  style,
+  value,
+  ...rest
+}) => {
+  const [keyboard, setKeyboard] = (0, import_react3.useState)(false);
+  (0, import_react3.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);
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      ...{
+        className: "relative"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          "select",
+          {
+            ...{
+              ...rest,
+              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: ({ target }) => onChange(target == null ? void 0 : target.value),
+              style: inputStyle(style),
+              value
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "option",
+                {
+                  ...{
+                    disabled: true,
+                    "aria-label": "Select option",
+                    value: ""
+                  },
+                  children: "Select"
+                }
+              ),
+              options.map(({ label, option, value: optValue }, key) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "option",
+                {
+                  ...{
+                    value: optValue ?? option
+                  },
+                  children: label ?? option
+                },
+                "input-select-option-" + key
+              ))
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.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)(
+              chevron_down_default,
+              {
+                ...{
+                  className: "w-5 h-5 text-inherit"
+                }
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+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 WrapperGradient = ({
+  children,
+  className,
+  classNameGradient,
+  classNameScroll,
+  color,
+  gradientTopOffset,
+  horizontal = false
+}) => {
+  const showX = horizontal === true || horizontal === "both";
+  const showY = horizontal === false || horizontal === "both";
+  const overflowClass = horizontal === "both" ? "overflow-scroll" : horizontal ? "overflow-x-scroll overflow-y-visible" : "overflow-y-scroll overflow-x-visible";
+  const overscrollClass = horizontal === "both" ? "overscroll-none" : horizontal ? "overscroll-x-none overscroll-y-auto" : "overscroll-y-none overscroll-x-auto";
+  const themed = Boolean(color);
+  const gradientDefaults = "absolute z-[2] " + (themed ? "pointer-events-none " : "") + "transition-all duration-[100ms] ";
+  const classes = {
+    container: [
+      themed ? "relative" : "w-full relative",
+      ...className ? [className] : []
+    ],
+    inner: [
+      "w-full relative scroll-smooth hide-scrollbar",
+      overscrollClass,
+      overflowClass,
+      ...classNameScroll ? [classNameScroll] : []
+    ],
+    topGradient: [
+      gradientDefaults,
+      "w-full -top-[1px]",
+      ...themed ? [] : ["bg-gradient-to-b"],
+      ...classNameGradient ? [classNameGradient] : themed ? ["h-10"] : ["from-white to-transparent h-10"]
+    ],
+    bottomGradient: [
+      gradientDefaults,
+      "w-full -bottom-[1px]",
+      ...themed ? [] : ["bg-gradient-to-t"],
+      ...classNameGradient ? [classNameGradient] : themed ? ["h-10"] : ["from-white to-transparent h-10"]
+    ],
+    leftGradient: [
+      gradientDefaults,
+      "h-full top-0 left-0",
+      ...themed ? [] : ["bg-gradient-to-r"],
+      ...classNameGradient ? [classNameGradient] : themed ? ["w-4"] : ["from-white from-30% to-transparent w-4"]
+    ],
+    rightGradient: [
+      gradientDefaults,
+      "h-full top-0 right-0",
+      ...themed ? [] : ["bg-gradient-to-l"],
+      ...classNameGradient ? [classNameGradient] : themed ? ["w-4"] : ["from-white from-30% to-transparent w-4"]
+    ]
+  };
+  const gradients = {
+    top: "linear-gradient( to bottom, " + color + " 0%, transparent 100% )",
+    bottom: "linear-gradient( to top, " + color + " 0%, transparent 100% )",
+    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)({
+    top: 0,
+    left: 0,
+    atBottom: true,
+    atRight: true
+  });
+  (0, import_react4.useEffect)(
+    () => {
+      const container = containerRef.current;
+      const handleScroll = () => {
+        const { scrollTop, scrollLeft, scrollHeight, scrollWidth, clientHeight, clientWidth } = container;
+        setScroll({
+          top: scrollTop,
+          left: scrollLeft,
+          atBottom: scrollTop + clientHeight >= scrollHeight - 1,
+          atRight: scrollLeft + clientWidth >= scrollWidth - 1
+        });
+      };
+      const handleUpdate = () => {
+        const { scrollHeight, scrollWidth, clientHeight, clientWidth } = container;
+        if (scrollHeight <= clientHeight && scrollWidth <= clientWidth) {
+          setScroll({
+            top: 0,
+            left: 0,
+            atBottom: true,
+            atRight: true
+          });
+          return;
+        }
+        ;
+        handleScroll();
+      };
+      handleUpdate();
+      container.addEventListener("scroll", handleScroll);
+      const observer = new MutationObserver((mutations) => {
+        for (const mutation of mutations) {
+          if (mutation.type === "childList" && mutation.addedNodes.length > 0) {
+            handleUpdate();
+            break;
+          }
+        }
+      });
+      observer.observe(container, {
+        childList: true,
+        subtree: true
+      });
+      const resizeObserver = new ResizeObserver(handleUpdate);
+      resizeObserver.observe(container);
+      return () => {
+        container.removeEventListener("scroll", handleScroll);
+        observer.disconnect();
+        resizeObserver.disconnect();
+      };
+    },
+    [horizontal]
+  );
+  const contextValue = (0, import_react4.useMemo)(
+    () => ({
+      atBottom: scroll.atBottom,
+      atRight: scroll.atRight
+    }),
+    [scroll.atBottom, scroll.atRight]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime6.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)(
+          "div",
+          {
+            ...{
+              className: classes.topGradient.join(" ") + (scroll.top > 5 ? " opacity-100 visible" : " opacity-0 invisible"),
+              style: {
+                ...themed && {
+                  backgroundImage: gradients.top
+                },
+                ...gradientTopOffset && {
+                  top: gradientTopOffset
+                }
+              }
+            }
+          }
+        ),
+        showX && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "div",
+          {
+            ...{
+              className: classes.leftGradient.join(" ") + (scroll.left > 5 ? " opacity-100 visible" : " opacity-0 invisible"),
+              style: {
+                ...themed && {
+                  backgroundImage: gradients.left
+                }
+              }
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "div",
+          {
+            ...{
+              className: classes.inner.join(" "),
+              ref: containerRef
+            },
+            children
+          }
+        ),
+        showY && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "div",
+          {
+            ...{
+              className: classes.bottomGradient.join(" ") + (!scroll.atBottom ? " opacity-100 visible" : " opacity-0 invisible"),
+              style: {
+                ...themed && {
+                  backgroundImage: gradients.bottom
+                }
+              }
+            }
+          }
+        ),
+        showX && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "div",
+          {
+            ...{
+              className: classes.rightGradient.join(" ") + (!scroll.atRight ? " opacity-100 visible" : " opacity-0 invisible"),
+              style: {
+                ...themed && {
+                  backgroundImage: gradients.right
+                }
+              }
+            }
+          }
+        )
+      ] })
+    }
+  );
+};
+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)(
+  "svg",
+  {
+    ...{
+      fill: "none",
+      stroke: "none",
+      strokeWidth: 0,
+      viewBox: "0 0 24 24",
+      className: ["animate-spin", className].filter(Boolean).join(" "),
+      ...props
+    },
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "circle",
+        {
+          ...{
+            className: "opacity-25",
+            cx: 12,
+            cy: 12,
+            r: 10,
+            stroke: "currentColor",
+            strokeWidth: 4
+          }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "path",
+        {
+          ...{
+            className: "opacity-75",
+            fill: "currentColor",
+            d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          }
+        }
+      )
+    ]
+  }
+);
+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)(
+  "img",
+  {
+    ...{
+      alt,
+      className,
+      src
+    }
+  }
+);
+var Product = ({
+  action = null,
+  disabled = false,
+  errors = {},
+  header,
+  ImageComponent = DefaultImage2,
+  onAdd = () => {
+  },
+  onBuy = () => {
+  },
+  onVariantChange = () => {
+  },
+  product,
+  style = {},
+  variant
+}) => {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const available = (0, import_react5.useMemo)(
+    () => ((product == null ? void 0 : product.variants) || []).filter((v) => v.availableForSale),
+    [product]
+  );
+  const [activeImage, setActiveImage] = (0, import_react5.useState)(0);
+  const [emblaRef, emblaApi] = (0, import_embla_carousel_react.default)();
+  const selectedVariant = available.find((v) => v.id === variant) || null;
+  const images = (0, import_react5.useMemo)(
+    () => {
+      const variants = ((product == null ? void 0 : product.variants) || []).filter((v) => v.availableForSale);
+      const result = [];
+      const seen = /* @__PURE__ */ new Set();
+      if (product == null ? void 0 : product.image) {
+        seen.add(product.image);
+        result.push({
+          src: product.image,
+          variant: null
+        });
+      }
+      for (const v of variants) {
+        if (v.image && !seen.has(v.image)) {
+          seen.add(v.image);
+          result.push({
+            src: v.image,
+            variant: v
+          });
+        }
+      }
+      return result;
+    },
+    [product]
+  );
+  (0, import_react5.useEffect)(
+    () => {
+      if (!emblaApi) return;
+      const onSelect = () => {
+        const idx = emblaApi.selectedScrollSnap();
+        setActiveImage(idx);
+        const img = images[idx];
+        if (img == null ? void 0 : img.variant) onVariantChange(img.variant.id);
+      };
+      emblaApi.on("select", onSelect);
+      return () => emblaApi.off("select", onSelect);
+    },
+    [emblaApi, images, onVariantChange]
+  );
+  const handleVariant = (value) => {
+    onVariantChange(value);
+    const v = available.find((x) => x.id === value);
+    if (!(v == null ? void 0 : v.image)) return;
+    const idx = images.findIndex((img) => img.src === v.image);
+    if (idx >= 0) {
+      setActiveImage(idx);
+      emblaApi == null ? void 0 : emblaApi.scrollTo(idx);
+    }
+    ;
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "div",
+    {
+      ...{
+        className: "space-y-6 pb-12"
+      },
+      children: [
+        header,
+        images.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          "div",
+          {
+            ...{
+              className: "flex items-center h-48 " + (images.length > 1 && "pr-12")
+            },
+            children: [
+              images.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                wrapper_gradient_default,
+                {
+                  ...{
+                    classNameScroll: "flex flex-col w-12 h-48 space-y-3",
+                    color: (_b = (_a = style == null ? void 0 : style.background) == null ? void 0 : _a.color) == null ? void 0 : _b.rgb
+                  },
+                  children: images.map(({ src }, key) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    "button",
+                    {
+                      ...{
+                        className: "relative w-12 h-12 overflow-hidden rounded shrink-0 border border-transparent",
+                        onClick: () => {
+                          setActiveImage(key);
+                          emblaApi == null ? void 0 : emblaApi.scrollTo(key);
+                        },
+                        type: "button",
+                        ...activeImage === key && {
+                          style: inputStyle(style)
+                        }
+                      },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                        ImageComponent,
+                        {
+                          ...{
+                            alt: product.title + " thumbnail " + key,
+                            className: "object-cover",
+                            fill: true,
+                            sizes: "48px",
+                            src: (0, import_cdn3.cdnShopify)(src, "100x100", product == null ? void 0 : product.updatedAt) || src,
+                            unoptimized: true
+                          }
+                        }
+                      )
+                    },
+                    "thumbnail-" + key
+                  ))
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                "div",
+                {
+                  ...{
+                    className: "aspect-square w-48 overflow-hidden rounded-3xl m-auto",
+                    ref: emblaRef
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    "div",
+                    {
+                      ...{
+                        className: "flex h-full"
+                      },
+                      children: images.map(({ src }, key) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                        "div",
+                        {
+                          ...{
+                            className: "min-w-0 flex-[0_0_100%] relative h-full bg-gray-100"
+                          },
+                          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                            ImageComponent,
+                            {
+                              ...{
+                                alt: product.title + " image " + key,
+                                className: "object-cover",
+                                fill: true,
+                                sizes: "192px",
+                                src: (0, import_cdn3.cdnShopify)(src, "400x400", product == null ? void 0 : product.updatedAt) || src,
+                                unoptimized: true
+                              }
+                            }
+                          )
+                        },
+                        "image-" + key
+                      ))
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          "div",
+          {
+            ...{
+              className: "text-center space-y-2"
+            },
+            children: [
+              (product == null ? void 0 : product.title) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                "h2",
+                {
+                  ...{
+                    className: "max-w-80 mx-auto",
+                    style: {
+                      fontFamily: ((_c = style == null ? void 0 : style.heading) == null ? void 0 : _c.family) || (style == null ? void 0 : style.fontFamily) || "Roboto Flex",
+                      fontWeight: ((_d = style == null ? void 0 : style.heading) == null ? void 0 : _d.weight) || (style == null ? void 0 : style.fontWeight),
+                      textTransform: ((_e = style == null ? void 0 : style.heading) == null ? void 0 : _e.transform) || (style == null ? void 0 : style.textTransform)
+                    }
+                  },
+                  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)({
+                code: selectedVariant.currency,
+                display: "parts",
+                value: selectedVariant.price
+              }) }),
+              (product == null ? void 0 : product.description) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                wrapper_gradient_default,
+                {
+                  ...{
+                    classNameScroll: "max-h-[4.5em]",
+                    color: (_g = (_f = style == null ? void 0 : style.background) == null ? void 0 : _f.color) == null ? void 0 : _g.rgb
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { children: product.description })
+                }
+              )
+            ]
+          }
+        ),
+        available.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          input_group_default,
+          {
+            ...{
+              error: errors == null ? void 0 : errors.variant,
+              input: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                input_select_default,
+                {
+                  ...{
+                    disabled,
+                    onChange: handleVariant,
+                    options: available.map((v) => ({
+                      label: v.title,
+                      value: v.id
+                    })),
+                    style,
+                    value: variant || ""
+                  }
+                }
+              ),
+              style
+            }
+          }
+        ),
+        available.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          input_group_default,
+          {
+            ...{
+              error: errors == null ? void 0 : errors.root,
+              input: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                "div",
+                {
+                  ...{
+                    className: "grid grid-cols-2 gap-3"
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      "button",
+                      {
+                        ...{
+                          className: "button justify-center border",
+                          disabled: disabled || Boolean(action),
+                          onClick: onAdd,
+                          style: inputStyle(style),
+                          type: "button"
+                        },
+                        children: action === "add" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                          loader_default,
+                          {
+                            ...{
+                              className: "w-6 h-6 animate-spin"
+                            }
+                          }
+                        ) : "Add to cart"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      "button",
+                      {
+                        ...{
+                          className: "button justify-center",
+                          disabled: disabled || Boolean(action),
+                          onClick: onBuy,
+                          style: buttonStyle(style),
+                          type: "button"
+                        },
+                        children: action === "buy" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                          loader_default,
+                          {
+                            ...{
+                              className: "w-6 h-6 animate-spin"
+                            }
+                          }
+                        ) : "Buy now"
+                      }
+                    )
+                  ]
+                }
+              ),
+              style
+            }
+          }
+        )
+      ]
+    }
+  );
+};
+var product_default = Product;
+
+// components/advertisement.js
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Advertisement = ({
+  action = null,
+  affiliate,
+  brand,
+  button,
+  campaign,
+  disabled = false,
+  errors,
+  file,
+  header,
+  id,
+  ImageComponent,
+  lead,
+  onAdd,
+  onBuy,
+  onClick = () => {
+  },
+  onVariantChange,
+  onVariantSelect = () => {
+  },
+  organization,
+  page,
+  preview = false,
+  product,
+  style = {},
+  title,
+  url,
+  variant,
+  VideoComponent
+}) => {
+  if (product) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      product_default,
+      {
+        ...{
+          action,
+          disabled: preview || disabled,
+          errors,
+          header,
+          ImageComponent,
+          onAdd,
+          onBuy,
+          onVariantChange,
+          product,
+          style,
+          variant
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    card_advertisement_default,
+    {
+      ...{
+        advertisement: id,
+        affiliate,
+        asset: file,
+        brand: brand || { style },
+        button,
+        campaign,
+        ImageComponent,
+        lead,
+        onClick,
+        onVariantSelect,
+        organization,
+        page,
+        preview,
+        title,
+        url,
+        VideoComponent
+      }
+    }
+  );
+};
+var advertisement_default = Advertisement;