@drawbridge/components 0.0.78 → 0.1.0

package/dist/product.js

@@ -26,656 +26,23 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// components/product.js
 var product_exports = {};
 __export(product_exports, {
   default: () => product_default
 });
 module.exports = __toCommonJS(product_exports);
-var import_react5 = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
 var import_embla_carousel_react = __toESM(require("embla-carousel-react"));
 var import_cdn = require("@drawbridge/drawbridge-utils/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)(
+var import_input_group = __toESM(require("./input-group"));
+var import_input_select = __toESM(require("./input-select"));
+var import_wrapper_gradient = __toESM(require("./wrapper-gradient"));
+var import_loader = __toESM(require("./icons/loader"));
+var import_button = __toESM(require("./shared/button"));
+var import_styles = require("./styles");
+const DefaultImage = ({ alt, className, src, style }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
   "img",
   {
     ...{
@@ -686,7 +53,7 @@ var DefaultImage = ({ alt, className, src, style }) => /* @__PURE__ */ (0, impor
     }
   }
 );
-var Product = ({
+const Product = ({
   action = null,
   addToCart = true,
   buttonFontSize,
@@ -717,14 +84,14 @@ var Product = ({
     }
   };
   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)(
+  const available = (0, import_react.useMemo)(
     () => ((product == null ? void 0 : product.variants) || []).filter((v) => v.availableForSale),
     [product]
   );
-  const [activeImage, setActiveImage] = (0, import_react5.useState)(0);
+  const [activeImage, setActiveImage] = (0, import_react.useState)(0);
   const [emblaRef, emblaApi] = (0, import_embla_carousel_react.default)();
   const selectedVariant = available.find((v) => v.id === variant) || available[0] || null;
-  const images = (0, import_react5.useMemo)(
+  const images = (0, import_react.useMemo)(
     () => {
       const variants = ((product == null ? void 0 : product.variants) || []).filter((v) => v.availableForSale);
       const result = [];
@@ -749,7 +116,7 @@ var Product = ({
     },
     [product]
   );
-  (0, import_react5.useEffect)(
+  (0, import_react.useEffect)(
     () => {
       if (!emblaApi) return;
       const onSelect = () => {
@@ -774,7 +141,7 @@ var Product = ({
     }
     ;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
       ...{
@@ -786,7 +153,7 @@ var Product = ({
       },
       children: [
         header,
-        images.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        images.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
           "div",
           {
             ...{
@@ -796,45 +163,53 @@ var Product = ({
               }
             },
             children: [
-              images.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                wrapper_gradient_default,
+              images.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_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",
+                  children: images.map(({ src }, key) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_button.default,
                     {
                       ...{
-                        // 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"
+                        variant: "link",
+                        inline: true
                       },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                        ImageComponent,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        "span",
                         {
                           ...{
-                            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.
+                            // Active state is conveyed purely by a dimmed image (no border).
+                            className: "block relative w-12 h-12 overflow-hidden",
                             style: {
-                              opacity: activeImage === key ? 0.6 : 1,
-                              transition: "opacity 300ms ease"
-                            },
-                            unoptimized: true
-                          }
+                              borderRadius: imageRadius
+                            }
+                          },
+                          children: /* @__PURE__ */ (0, import_jsx_runtime.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
+                              }
+                            }
+                          )
                         }
                       )
                     },
@@ -842,7 +217,7 @@ var Product = ({
                   ))
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 "div",
                 {
                   ...{
@@ -858,7 +233,7 @@ var Product = ({
                       height: "12rem"
                     }
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                     "div",
                     {
                       ...{
@@ -867,7 +242,7 @@ var Product = ({
                           height: "100%"
                         }
                       },
-                      children: images.map(({ src }, key) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      children: images.map(({ src }, key) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                         "div",
                         {
                           ...{
@@ -877,7 +252,7 @@ var Product = ({
                               height: "100%"
                             }
                           },
-                          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                             ImageComponent,
                             {
                               ...{
@@ -900,48 +275,48 @@ var Product = ({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
           "div",
           {
             ...{
               className: "text-center space-y-2"
             },
             children: [
-              (product == null ? void 0 : product.title) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              (product == null ? void 0 : product.title) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 "h2",
                 {
                   ...{
                     className: "max-w-80 mx-auto",
-                    style: headerStyle(style)
+                    style: (0, import_styles.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)({
+              !available.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: "Unavailable" }) : (selectedVariant == null ? void 0 : selectedVariant.price) && /* @__PURE__ */ (0, import_jsx_runtime.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,
+              (product == null ? void 0 : product.description) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_wrapper_gradient.default,
                 {
                   ...{
                     classNameScroll: "max-h-[4.5em]",
                     color: resolved.background.color.rgb
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { children: product.description })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: product.description })
                 }
               )
             ]
           }
         ),
-        available.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          input_group_default,
+        available.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_input_group.default,
           {
             ...{
               error: errors == null ? void 0 : errors.variant,
-              input: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                input_select_default,
+              input: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_input_select.default,
                 {
                   ...{
                     disabled,
@@ -959,67 +334,64 @@ var Product = ({
             }
           }
         ),
-        available.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          input_group_default,
+        available.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_input_group.default,
           {
             ...{
               error: errors == null ? void 0 : errors.root,
-              input: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+              input: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
                 "div",
                 {
                   ...{
-                    className: addToCart ? "grid grid-cols-2 gap-5" : ""
+                    className: addToCart ? "grid grid-cols-2 gap-5" : "",
+                    // The buttons take a fixed size from here (the ad card's is 16px).
+                    ...buttonFontSize && {
+                      style: {
+                        fontSize: buttonFontSize
+                      }
+                    }
                   },
                   children: [
-                    addToCart && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                      "button",
+                    addToCart && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_button.default,
                       {
                         ...{
-                          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"
+                          variant: "link"
                         },
-                        children: action === "add" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                          loader_default,
+                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          "span",
                           {
                             ...{
-                              className: "w-6 h-6 animate-spin"
-                            }
+                              className: "flex items-center justify-center w-full border py-3 px-4 rounded",
+                              style: {
+                                ...(0, import_styles.inputStyle)(resolved),
+                                borderRadius: (0, import_styles.buttonStyle)(resolved).borderRadius
+                              }
+                            },
+                            children: action === "add" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              import_loader.default,
+                              {
+                                ...{
+                                  className: "w-6 h-6 animate-spin"
+                                }
+                              }
+                            ) : "Add to cart"
                           }
-                        ) : "Add to cart"
+                        )
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                      "button",
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_button.default,
                       {
                         ...{
-                          className: "button justify-center py-3 px-4 rounded" + (addToCart ? "" : " w-full"),
                           disabled: disabled || Boolean(action),
+                          loading: action === "buy",
                           onClick: onBuy,
-                          style: {
-                            ...buttonStyle(resolved),
-                            ...buttonFontSize && {
-                              fontSize: buttonFontSize
-                            }
-                          },
-                          type: "button"
+                          style: resolved
                         },
-                        children: action === "buy" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                          loader_default,
-                          {
-                            ...{
-                              className: "w-6 h-6 animate-spin"
-                            }
-                          }
-                        ) : "Buy now"
+                        children: "Buy now"
                       }
                     )
                   ]