@drawbridge/components 0.0.77 → 0.1.0

package/dist/advertisement.js

@@ -26,1021 +26,18 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   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);
-var import_cdn2 = require("@drawbridge/drawbridge-utils/cdn");
-
-// components/product.js
-var import_react5 = require("react");
-var import_embla_carousel_react = __toESM(require("embla-carousel-react"));
-var import_cdn = require("@drawbridge/shopify/cdn");
-var import_drawbridge_utils = require("@drawbridge/drawbridge-utils");
-
-// components/input-group.js
-var import_react2 = require("react");
-
-// components/input-group-error.js
-var import_react = require("react");
-
-// components/icons/warning.js
 var import_jsx_runtime = require("react/jsx-runtime");
-var Warning = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-  "svg",
-  {
-    ...{
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: 1.5,
-      viewBox: "0 0 24 24",
-      ...props
-    },
-    children: /* @__PURE__ */ (0, import_jsx_runtime.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-error.js
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var InputGroupError = ({
-  className,
-  error,
-  label,
-  message,
-  style = {}
-}) => {
-  var _a, _b, _c, _d;
-  if (!(error || message)) {
-    return null;
-  }
-  const classes = [
-    "flex items-center justify-start space-x-2 py-1 rounded text-sm"
-  ];
-  if (error) {
-    classes.push("px-1.5");
-  }
-  if (className) {
-    classes.push(className);
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-    "p",
-    {
-      ...{
-        className: classes.join(" "),
-        ...error && {
-          style: {
-            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_runtime2.jsxs)(import_react.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            warning_default,
-            {
-              ...{
-                // shrink-0: a long error ("Expected your CNAME record to be …
-                // but found …") wraps, and a flex item with no floor gets
-                // squeezed to a sliver beside it.
-                className: "w-4 h-4 shrink-0",
-                "aria-hidden": true
-              }
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-            "span",
-            {
-              ...{
-                className: "text-[0px] opacity-0 w-0 h-0 absolute"
-              },
-              children: [
-                label ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react.Fragment, { children: [
-                  label,
-                  ": "
-                ] }) : null,
-                error
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          "span",
-          {
-            ...{
-              ...error && {
-                "aria-hidden": true
-              }
-            },
-            children: error || message
-          }
-        )
-      ]
-    }
-  );
-};
-var input_group_error_default = InputGroupError;
-
-// 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 DEFAULT_FAMILY = "Roboto Flex";
-var FONT_FALLBACK = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
-var toFontFamily = (family) => '"' + (family || DEFAULT_FAMILY) + '", ' + FONT_FALLBACK;
-var toFontWeight = (variant) => {
-  var _a;
-  if (!variant) return void 0;
-  if (variant.includes("italic")) return (_a = variant.match(/^\d+/)) == null ? void 0 : _a[0];
-  if (variant.includes("regular")) return "normal";
-  return variant;
-};
-var toFontStyle = (variant) => (variant == null ? void 0 : variant.includes("italic")) ? "italic" : void 0;
-var buttonStyle = (style) => {
-  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) || 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 headerStyle = (style) => {
-  var _a, _b, _c, _d;
-  return {
-    fontFamily: toFontFamily((_a = style == null ? void 0 : style.heading) == null ? void 0 : _a.family),
-    fontWeight: toFontWeight((_b = style == null ? void 0 : style.heading) == null ? void 0 : _b.weight),
-    fontStyle: toFontStyle((_c = style == null ? void 0 : style.heading) == null ? void 0 : _c.weight),
-    textTransform: (_d = style == null ? void 0 : style.heading) == null ? void 0 : _d.transform
-  };
-};
-var inputStyle = (style) => {
-  var _a;
-  return {
-    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-group.js
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var Addon = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-  "span",
-  {
-    ...{
-      className: typeof children === "string" ? "flex items-center shrink-0 px-3 font-mono text-sm opacity-60 whitespace-nowrap select-none" : "flex items-center shrink-0 px-2"
-    },
-    children
-  }
-);
-var InputGroup = ({
-  after,
-  before,
-  className,
-  error,
-  input,
-  label,
-  message,
-  style = {},
-  ...rest
-}) => {
-  const generated = (0, import_react2.useId)();
-  const id = (0, import_react2.isValidElement)(input) ? input.props.id || generated : generated;
-  const named = (0, import_react2.isValidElement)(input) && !input.props.id ? (0, import_react2.cloneElement)(input, { id }) : input;
-  const addons = after != null || before != null;
-  const control = addons && (0, import_react2.isValidElement)(named) ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-    "div",
-    {
-      ...{
-        className: "input flex items-center overflow-hidden",
-        style: {
-          ...inputStyle(style),
-          // Inline, not `p-0`: see InputNumber — share's unlayered `.input`
-          // padding beats a layered utility, an inline style beats both.
-          padding: 0
-        }
-      },
-      children: [
-        before != null && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Addon, { children: before }),
-        (0, import_react2.cloneElement)(named, {
-          className: [named.props.className, "!border-0 !rounded-none !ring-0 !shadow-none flex-1 min-w-0"].filter(Boolean).join(" ")
-        }),
-        after != null && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Addon, { children: after })
-      ]
-    }
-  ) : named;
-  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",
-        ...(rest == null ? void 0 : rest["data-guide"]) && {
-          "data-guide": rest["data-guide"]
-        }
-      },
-      children: [
-        label ? (
-          // A real <label> (not a bare <span>) so the field name is announced by
-          // screen readers, clicking the text focuses the control, and
-          // getByLabel()/role queries can find it. The association comes from
-          // `htmlFor`, never from the wrapping — see the note above the id.
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-            "label",
-            {
-              ...{
-                className: "space-y-2 block",
-                htmlFor: id
-              },
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                  "span",
-                  {
-                    ...{
-                      className: "block"
-                    },
-                    children: label
-                  }
-                ),
-                control
-              ]
-            }
-          )
-        ) : control,
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          input_group_error_default,
-          {
-            ...{
-              error,
-              label,
-              message,
-              style
-            }
-          }
-        )
-      ]
-    }
-  );
-};
-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/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 ? "overscroll-x-none" : "";
-  const themed = Boolean(color);
-  const gradientDefaults = "absolute z-[2] 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 DefaultImage = ({ alt, className, src, style }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-  "img",
-  {
-    ...{
-      alt,
-      className,
-      src,
-      style
-    }
-  }
-);
-var Product = ({
-  action = null,
-  addToCart = true,
-  buttonFontSize,
-  disabled = false,
-  errors = {},
-  header,
-  ImageComponent = DefaultImage,
-  onAdd = () => {
-  },
-  onBuy = () => {
-  },
-  onVariantChange = () => {
-  },
-  product,
-  style = {},
-  variant
-}) => {
-  var _a, _b, _c;
-  const resolved = {
-    ...style,
-    background: {
-      ...style == null ? void 0 : style.background,
-      color: ((_a = style == null ? void 0 : style.background) == null ? void 0 : _a.color) || { hex: "#FFFFFF", rgb: "rgb( 255, 255, 255 )" }
-    },
-    text: {
-      ...style == null ? void 0 : style.text,
-      color: ((_b = style == null ? void 0 : style.text) == null ? void 0 : _b.color) || { hex: "#000000", rgb: "rgb( 0, 0, 0 )" }
-    }
-  };
-  const imageRadius = ((_c = resolved == null ? void 0 : resolved.image) == null ? void 0 : _c.radius) != null ? resolved.image.radius + "px" : "12px";
-  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) || available[0] || 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",
-        style: {
-          backgroundColor: resolved.background.color.rgb,
-          color: resolved.text.color.rgb
-        }
-      },
-      children: [
-        header,
-        images.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-          "div",
-          {
-            ...{
-              className: "flex items-center " + (images.length > 1 ? "pr-12" : ""),
-              style: {
-                height: "12rem"
-              }
-            },
-            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: resolved.background.color.rgb
-                  },
-                  children: images.map(({ src }, key) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                    "button",
-                    {
-                      ...{
-                        // Active state is conveyed purely by a dimmed image (no border).
-                        className: "relative w-12 h-12 overflow-hidden shrink-0",
-                        onClick: () => {
-                          setActiveImage(key);
-                          emblaApi == null ? void 0 : emblaApi.scrollTo(key);
-                        },
-                        style: {
-                          borderRadius: imageRadius
-                        },
-                        type: "button"
-                      },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                        ImageComponent,
-                        {
-                          ...{
-                            alt: product.title + " thumbnail " + key,
-                            className: "object-cover",
-                            fill: true,
-                            sizes: "48px",
-                            src: (0, import_cdn.cdnShopify)(src, "100x100", product == null ? void 0 : product.updatedAt) || src,
-                            // Always set opacity + transition so switching the active
-                            // thumbnail animates the fade in both directions.
-                            style: {
-                              opacity: activeImage === key ? 0.6 : 1,
-                              transition: "opacity 300ms ease"
-                            },
-                            unoptimized: true
-                          }
-                        }
-                      )
-                    },
-                    "thumbnail-" + key
-                  ))
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                "div",
-                {
-                  ...{
-                    // Dimensions are inline rather than Tailwind size utilities:
-                    // those sizes live only in this package's dist, and a consuming
-                    // app's Tailwind scan of node_modules can lag and drop them,
-                    // silently collapsing the carousel. Inline styles are immune.
-                    className: "overflow-hidden m-auto",
-                    ref: emblaRef,
-                    style: {
-                      borderRadius: imageRadius,
-                      width: "12rem",
-                      height: "12rem"
-                    }
-                  },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                    "div",
-                    {
-                      ...{
-                        className: "flex",
-                        style: {
-                          height: "100%"
-                        }
-                      },
-                      children: images.map(({ src }, key) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                        "div",
-                        {
-                          ...{
-                            className: "min-w-0 relative bg-gray-100",
-                            style: {
-                              flex: "0 0 100%",
-                              height: "100%"
-                            }
-                          },
-                          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                            ImageComponent,
-                            {
-                              ...{
-                                alt: product.title + " image " + key,
-                                className: "object-cover",
-                                fill: true,
-                                sizes: "192px",
-                                src: (0, import_cdn.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: headerStyle(style)
-                  },
-                  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_utils.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: resolved.background.color.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: resolved,
-                    value: variant || ""
-                  }
-                }
-              ),
-              style: resolved
-            }
-          }
-        ),
-        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: addToCart ? "grid grid-cols-2 gap-5" : ""
-                  },
-                  children: [
-                    addToCart && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                      "button",
-                      {
-                        ...{
-                          className: "button justify-center border py-3 px-4 rounded",
-                          disabled: disabled || Boolean(action),
-                          onClick: onAdd,
-                          style: {
-                            ...inputStyle(resolved),
-                            borderRadius: buttonStyle(resolved).borderRadius,
-                            ...buttonFontSize && {
-                              fontSize: buttonFontSize
-                            }
-                          },
-                          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 py-3 px-4 rounded" + (addToCart ? "" : " w-full"),
-                          disabled: disabled || Boolean(action),
-                          onClick: onBuy,
-                          style: {
-                            ...buttonStyle(resolved),
-                            ...buttonFontSize && {
-                              fontSize: buttonFontSize
-                            }
-                          },
-                          type: "button"
-                        },
-                        children: action === "buy" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                          loader_default,
-                          {
-                            ...{
-                              className: "w-6 h-6 animate-spin"
-                            }
-                          }
-                        ) : "Buy now"
-                      }
-                    )
-                  ]
-                }
-              ),
-              style: resolved
-            }
-          }
-        )
-      ]
-    }
-  );
-};
-var product_default = Product;
-
-// components/advertisement.js
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var DefaultImage2 = ({ alt, className, src }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+var import_cdn = require("@drawbridge/drawbridge-utils/cdn");
+var import_button = __toESM(require("./shared/button"));
+var import_empty = __toESM(require("./shared/empty"));
+var import_product = __toESM(require("./product"));
+var import_video = __toESM(require("./video"));
+const DefaultImage = ({ alt, className, src }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
   "img",
   {
     ...{
@@ -1050,17 +47,7 @@ var DefaultImage2 = ({ alt, className, src }) => /* @__PURE__ */ (0, import_jsx_
     }
   }
 );
-var DefaultVideo = ({ className, hls, mp4, poster }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-  "video",
-  {
-    ...{
-      className,
-      poster,
-      src: mp4 || hls
-    }
-  }
-);
-var Advertisement = ({
+const Advertisement = ({
   action = null,
   brand,
   button,
@@ -1070,7 +57,7 @@ var Advertisement = ({
   file,
   fonts,
   header,
-  ImageComponent = DefaultImage2,
+  ImageComponent = DefaultImage,
   lead,
   onAdd,
   onBuy,
@@ -1085,12 +72,12 @@ var Advertisement = ({
   title,
   url,
   variant,
-  VideoComponent = DefaultVideo
+  VideoComponent = import_video.default
 }) => {
   var _a, _b, _c, _d, _e, _f;
   if (product) {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      product_default,
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_product.default,
       {
         ...{
           action,
@@ -1124,7 +111,7 @@ var Advertisement = ({
   };
   const isVideo = (_c = file == null ? void 0 : file.mimetype) == null ? void 0 : _c.includes("video");
   const imageRadius = ((_d = resolved == null ? void 0 : resolved.image) == null ? void 0 : _d.radius) != null ? resolved.image.radius + "px" : "12px";
-  const card = (assetNode) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  const card = (assetNode) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
       ...{
@@ -1135,19 +122,40 @@ var Advertisement = ({
         }
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        assetNode ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "span",
           {
             ...{
-              className: "block relative aspect-square overflow-hidden" + (assetNode ? "" : " bg-gray-light"),
+              className: "block relative aspect-square overflow-hidden",
               style: {
                 borderRadius: imageRadius
               }
             },
             children: assetNode
           }
+        ) : (
+          // Empty takes no classes: the square and the image's radius are this span's.
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "span",
+            {
+              ...{
+                className: "block aspect-square overflow-hidden",
+                style: {
+                  borderRadius: imageRadius
+                }
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_empty.default,
+                {
+                  ...{
+                    variant: "secondary"
+                  }
+                }
+              )
+            }
+          )
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
           "span",
           {
             ...{
@@ -1160,13 +168,13 @@ var Advertisement = ({
               }
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 "div",
                 {
                   ...{
                     className: "flex-1 min-w-0 space-y-2"
                   },
-                  children: title && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  children: title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                     "p",
                     {
                       ...{
@@ -1179,21 +187,28 @@ var Advertisement = ({
                   )
                 }
               ),
-              button && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                "button",
+              button && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "div",
                 {
                   ...{
-                    className: "flex items-center justify-center py-3 px-4 w-full border",
-                    disabled: !preview && !url,
-                    onClick: preview ? () => {
-                    } : onClick,
+                    // The card's text is small; its call to action is a fixed 16px.
+                    className: "w-full",
                     style: {
-                      ...buttonStyle(resolved),
                       fontSize: "16px"
-                    },
-                    type: "button"
+                    }
                   },
-                  children: button
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_button.default,
+                    {
+                      ...{
+                        disabled: !preview && !url,
+                        onClick: preview ? () => {
+                        } : onClick,
+                        style: resolved
+                      },
+                      children: button
+                    }
+                  )
                 }
               )
             ]
@@ -1204,20 +219,22 @@ var Advertisement = ({
   );
   if (isVideo) {
     return card(
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "div",
         {
           ...{
             className: "relative h-full w-full aspect-[9/16]"
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime.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)((_e = file == null ? void 0 : file.frames) == null ? void 0 : _e[file == null ? void 0 : file.poster], "500x500", file == null ? void 0 : file.updatedAt) || (0, import_cdn2.cdnSrc)((_f = file == null ? void 0 : file.frames) == null ? void 0 : _f[file == null ? void 0 : file.poster], "1080x1920", file == null ? void 0 : file.updatedAt),
+                // Playable by default; bridge/advertisements overrides it per slide.
+                controls: true,
+                hls: (0, import_cdn.cdnSrc)(file, "hls", file == null ? void 0 : file.updatedAt),
+                mp4: (0, import_cdn.cdnSrc)(file, "original", file == null ? void 0 : file.updatedAt),
+                poster: (0, import_cdn.cdnSrc)((_e = file == null ? void 0 : file.frames) == null ? void 0 : _e[file == null ? void 0 : file.poster], "500x500", file == null ? void 0 : file.updatedAt) || (0, import_cdn.cdnSrc)((_f = file == null ? void 0 : file.frames) == null ? void 0 : _f[file == null ? void 0 : file.poster], "1080x1920", file == null ? void 0 : file.updatedAt),
                 style: resolved
               }
             }
@@ -1226,9 +243,9 @@ var Advertisement = ({
       )
     );
   }
-  const src = (0, import_cdn2.cdnSrc)(file, "400x400", file == null ? void 0 : file.updatedAt);
+  const src = (0, import_cdn.cdnSrc)(file, "400x400", file == null ? void 0 : file.updatedAt);
   return card(
-    src ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    src ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       ImageComponent,
       {
         ...{