@drawbridge/components 0.0.45 → 0.0.46

package/dist/card-advertisement.js

@@ -1,377 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// components/card-advertisement.js
-var card_advertisement_exports = {};
-__export(card_advertisement_exports, {
-  default: () => card_advertisement_default
-});
-module.exports = __toCommonJS(card_advertisement_exports);
-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;

package/dist/card-advertisement.mjs

@@ -1,6 +0,0 @@
-import {
-  card_advertisement_default
-} from "./chunk-TJNIR4PF.mjs";
-export {
-  card_advertisement_default as default
-};

package/dist/chunk-FJXG3REN.mjs

@@ -1,93 +0,0 @@
-// components/styles.js
-var backgroundStyle = (style) => {
-  var _a, _b, _c, _d;
-  return {
-    backgroundColor: (_b = (_a = style == null ? void 0 : style.background) == null ? void 0 : _a.color) == null ? void 0 : _b.rgb,
-    color: (_d = (_c = style == null ? void 0 : style.text) == null ? void 0 : _c.color) == null ? void 0 : _d.rgb
-  };
-};
-var borderStyle = (style) => {
-  var _a, _b;
-  return {
-    borderColor: (_b = (_a = style == null ? void 0 : style.text) == null ? void 0 : _a.color) == null ? void 0 : _b.rgb
-  };
-};
-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 closeStyle = (style) => {
-  var _a, _b, _c, _d;
-  return {
-    backgroundColor: (_b = (_a = style == null ? void 0 : style.text) == null ? void 0 : _a.color) == null ? void 0 : _b.rgb,
-    color: (_d = (_c = style == null ? void 0 : style.background) == null ? void 0 : _c.color) == null ? void 0 : _d.rgb
-  };
-};
-var headerStyle = (style) => {
-  var _a, _b, _c;
-  return {
-    fontFamily: (_a = style == null ? void 0 : style.heading) == null ? void 0 : _a.family,
-    fontWeight: (_b = style == null ? void 0 : style.heading) == null ? void 0 : _b.weight,
-    textTransform: (_c = style == null ? void 0 : style.heading) == null ? void 0 : _c.transform
-  };
-};
-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
-  };
-};
-var inputCheckboxStyle = (style) => {
-  var _a;
-  return {
-    ...inputStyle(style),
-    borderRadius: ((_a = style == null ? void 0 : style.input) == null ? void 0 : _a.radius) != null ? Math.min(style.input.radius / 4, 6) + "px" : void 0
-  };
-};
-var inputNameStyle = (style) => inputStyle(style);
-var inputPhoneStyle = (style) => inputStyle(style);
-var menuStyle = (style) => {
-  var _a, _b, _c, _d, _e, _f;
-  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,
-    color: (_f = (_e = style == null ? void 0 : style.text) == null ? void 0 : _e.color) == null ? void 0 : _f.rgb
-  };
-};
-var selectStyle = (style) => {
-  var _a, _b, _c, _d, _e, _f;
-  return {
-    borderColor: (_c = (_b = (_a = style == null ? void 0 : style.text) == null ? void 0 : _a.color) == null ? void 0 : _b.rgb) == null ? void 0 : _c.replace(")", ", 0.3)"),
-    borderRadius: ((_d = style == null ? void 0 : style.input) == null ? void 0 : _d.radius) != null ? style.input.radius / 4 + "px" : void 0,
-    color: (_f = (_e = style == null ? void 0 : style.text) == null ? void 0 : _e.color) == null ? void 0 : _f.rgb
-  };
-};
-var textStyle = (style) => {
-  var _a, _b;
-  return {
-    color: (_b = (_a = style == null ? void 0 : style.text) == null ? void 0 : _a.color) == null ? void 0 : _b.rgb
-  };
-};
-
-export {
-  backgroundStyle,
-  borderStyle,
-  buttonStyle,
-  closeStyle,
-  headerStyle,
-  inputStyle,
-  inputCheckboxStyle,
-  inputNameStyle,
-  inputPhoneStyle,
-  menuStyle,
-  selectStyle,
-  textStyle
-};