@cimplify/sdk 0.10.0 → 0.10.2

package/dist/react.js

@@ -7819,38 +7819,65 @@ function useCheckout() {
   );
   return { submit, process, isLoading };
 }
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
 function QuantitySelector({
   value,
   onChange,
   min = 1,
   max,
-  className
+  className,
+  classNames
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-quantity": true, className, style: { display: "inline-flex", alignItems: "center", gap: "0.5rem" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        onClick: () => onChange(Math.max(min, value - 1)),
-        disabled: value <= min,
-        "aria-label": "Decrease quantity",
-        "data-cimplify-quantity-decrement": true,
-        children: "\u2212"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-quantity-value": true, "aria-live": "polite", children: value }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        onClick: () => onChange(max != null ? Math.min(max, value + 1) : value + 1),
-        disabled: max != null && value >= max,
-        "aria-label": "Increase quantity",
-        "data-cimplify-quantity-increment": true,
-        children: "+"
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-cimplify-quantity": true,
+      className: cn("inline-flex items-center gap-3 border border-border px-2", className, classNames?.root),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => onChange(Math.max(min, value - 1)),
+            disabled: value <= min,
+            "aria-label": "Decrease quantity",
+            "data-cimplify-quantity-decrement": true,
+            className: cn(
+              "w-10 h-10 flex items-center justify-center hover:text-primary transition-colors disabled:opacity-30",
+              classNames?.button
+            ),
+            children: "\u2212"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "data-cimplify-quantity-value": true,
+            "aria-live": "polite",
+            className: cn("w-8 text-center font-medium", classNames?.value),
+            children: value
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => onChange(max != null ? Math.min(max, value + 1) : value + 1),
+            disabled: max != null && value >= max,
+            "aria-label": "Increase quantity",
+            "data-cimplify-quantity-increment": true,
+            className: cn(
+              "w-10 h-10 flex items-center justify-center hover:text-primary transition-colors disabled:opacity-30",
+              classNames?.button
+            ),
+            children: "+"
+          }
+        )
+      ]
+    }
+  );
 }
 
 // src/utils/variant.ts
@@ -7896,7 +7923,8 @@ function VariantSelector({
   selectedVariantId,
   onVariantChange,
   productName,
-  className
+  className,
+  classNames
 }) {
   const [axisSelections, setAxisSelections] = React3.useState({});
   const initialized = React3.useRef(false);
@@ -7936,33 +7964,59 @@ function VariantSelector({
   }
   const basePriceNum = basePrice != null ? parsePrice(basePrice) : 0;
   if (variantAxes && variantAxes.length > 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-variant-selector": true, className, children: variantAxes.map((axis) => /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-variant-axis": true, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { "data-cimplify-variant-axis-label": true, children: axis.name }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-variant-axis-options": true, children: axis.values.map((value) => {
-        const isSelected = axisSelections[axis.id] === value.id;
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            "aria-selected": isSelected,
-            onClick: () => {
-              setAxisSelections((prev) => ({
-                ...prev,
-                [axis.id]: value.id
-              }));
-            },
-            "data-cimplify-variant-option": true,
-            "data-selected": isSelected || void 0,
-            children: value.name
-          },
-          value.id
-        );
-      }) })
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-variant-selector": true, className: cn("space-y-5", className, classNames?.root), children: variantAxes.map((axis) => /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-variant-axis": true, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "label",
+        {
+          "data-cimplify-variant-axis-label": true,
+          className: cn("block text-xs font-medium uppercase tracking-wider text-muted-foreground mb-3", classNames?.axisLabel),
+          children: axis.name
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          "data-cimplify-variant-axis-options": true,
+          className: cn("flex flex-wrap gap-2", classNames?.axisOptions),
+          children: axis.values.map((value) => {
+            const isSelected = axisSelections[axis.id] === value.id;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                "aria-selected": isSelected,
+                onClick: () => {
+                  setAxisSelections((prev) => ({
+                    ...prev,
+                    [axis.id]: value.id
+                  }));
+                },
+                "data-cimplify-variant-option": true,
+                "data-selected": isSelected || void 0,
+                className: cn(
+                  "px-4 py-2 border text-sm font-medium transition-colors border-border hover:border-primary/50",
+                  isSelected && "bg-primary text-primary-foreground border-primary",
+                  isSelected ? classNames?.optionSelected : classNames?.option
+                ),
+                children: value.name
+              },
+              value.id
+            );
+          })
+        }
+      )
     ] }, axis.id)) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-variant-selector": true, className, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("label", { "data-cimplify-variant-list-label": true, children: "Options" }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-variant-list": true, children: variants.map((variant) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-variant-selector": true, className: cn("space-y-5", className, classNames?.root), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "label",
+      {
+        "data-cimplify-variant-list-label": true,
+        className: cn("block text-xs font-medium uppercase tracking-wider text-muted-foreground mb-3", classNames?.listLabel),
+        children: "Options"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-variant-list": true, className: cn("space-y-2", classNames?.list), children: variants.map((variant) => {
       const isSelected = selectedVariantId === variant.id;
       const adjustment = parsePrice(variant.price_adjustment);
       const effectivePrice = basePriceNum + adjustment;
@@ -7974,14 +8028,36 @@ function VariantSelector({
           onClick: () => onVariantChange(variant.id, variant),
           "data-cimplify-variant-option": true,
           "data-selected": isSelected || void 0,
+          className: cn(
+            "w-full flex items-center justify-between px-4 py-3 border transition-colors border-border hover:border-primary/50",
+            isSelected && "bg-primary/5 border-primary",
+            isSelected ? classNames?.optionSelected : classNames?.option
+          ),
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-variant-name": true, children: getVariantDisplayName(variant, productName) }),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-cimplify-variant-pricing": true, children: [
-              adjustment !== 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-cimplify-variant-adjustment": true, children: [
-                adjustment > 0 ? "+" : "",
-                /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: variant.price_adjustment })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: effectivePrice })
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                "data-cimplify-variant-name": true,
+                className: cn("font-medium", isSelected && "text-primary", classNames?.name),
+                children: getVariantDisplayName(variant, productName)
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-cimplify-variant-pricing": true, className: cn("text-sm", classNames?.pricing), children: [
+              adjustment !== 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+                "span",
+                {
+                  "data-cimplify-variant-adjustment": true,
+                  className: cn(
+                    adjustment > 0 ? "text-muted-foreground" : "text-green-600",
+                    classNames?.adjustment
+                  ),
+                  children: [
+                    adjustment > 0 ? "+" : "",
+                    /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: variant.price_adjustment })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: effectivePrice, className: "text-muted-foreground" })
             ] })
           ]
         },
@@ -7994,7 +8070,8 @@ function AddOnSelector({
   addOns,
   selectedOptions,
   onOptionsChange,
-  className
+  className,
+  classNames
 }) {
   const isOptionSelected = React3.useCallback(
     (optionId) => selectedOptions.includes(optionId),
@@ -8032,49 +8109,118 @@ function AddOnSelector({
   if (!addOns || addOns.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-addon-selector": true, className, children: addOns.map((addOn) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-addon-selector": true, className: cn("space-y-6", className, classNames?.root), children: addOns.map((addOn) => {
     const currentSelections = selectedOptions.filter(
       (id) => addOn.options.some((o) => o.id === id)
     ).length;
     const minMet = !addOn.min_selections || currentSelections >= addOn.min_selections;
     const isSingleSelect = addOn.is_mutually_exclusive || !addOn.is_multiple_allowed;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-addon-group": true, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-addon-header": true, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-cimplify-addon-name": true, children: [
-            addOn.name,
-            addOn.is_required && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-addon-required": true, children: " *" })
-          ] }),
-          (addOn.min_selections || addOn.max_selections) && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-addon-constraint": true, children: addOn.min_selections && addOn.max_selections ? `Choose ${addOn.min_selections}\u2013${addOn.max_selections}` : addOn.min_selections ? `Choose at least ${addOn.min_selections}` : `Choose up to ${addOn.max_selections}` })
-        ] }),
-        !minMet && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-addon-validation": true, children: "Required" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-addon-options": true, children: addOn.options.map((option) => {
-        const isSelected = isOptionSelected(option.id);
-        return /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
-          {
-            type: "button",
-            role: isSingleSelect ? "radio" : "checkbox",
-            "aria-checked": isSelected,
-            onClick: () => toggleOption(addOn, option.id),
-            "data-cimplify-addon-option": true,
-            "data-selected": isSelected || void 0,
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-addon-option-name": true, children: option.name }),
-              option.default_price != null && option.default_price !== 0 && /* @__PURE__ */ jsxRuntime.jsx(
-                Price,
-                {
-                  amount: option.default_price,
-                  prefix: "+"
-                }
-              )
-            ]
-          },
-          option.id
-        );
-      }) })
-    ] }, addOn.id);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "data-cimplify-addon-group": true,
+        className: cn("border border-border p-5", classNames?.group),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              "data-cimplify-addon-header": true,
+              className: cn("flex items-center justify-between mb-4", classNames?.header),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    "span",
+                    {
+                      "data-cimplify-addon-name": true,
+                      className: cn("text-xs font-medium uppercase tracking-wider text-muted-foreground", classNames?.name),
+                      children: [
+                        addOn.name,
+                        addOn.is_required && /* @__PURE__ */ jsxRuntime.jsxs(
+                          "span",
+                          {
+                            "data-cimplify-addon-required": true,
+                            className: cn("text-destructive ml-1", classNames?.required),
+                            children: [
+                              " ",
+                              "*"
+                            ]
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  (addOn.min_selections || addOn.max_selections) && /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      "data-cimplify-addon-constraint": true,
+                      className: cn("text-xs text-muted-foreground/70 mt-1", classNames?.constraint),
+                      children: addOn.min_selections && addOn.max_selections ? `Choose ${addOn.min_selections}\u2013${addOn.max_selections}` : addOn.min_selections ? `Choose at least ${addOn.min_selections}` : `Choose up to ${addOn.max_selections}`
+                    }
+                  )
+                ] }),
+                !minMet && /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    "data-cimplify-addon-validation": true,
+                    className: cn("text-xs text-destructive font-medium", classNames?.validation),
+                    children: "Required"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "data-cimplify-addon-options": true,
+              className: cn("space-y-1", classNames?.options),
+              children: addOn.options.map((option) => {
+                const isSelected = isOptionSelected(option.id);
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    role: isSingleSelect ? "radio" : "checkbox",
+                    "aria-checked": isSelected,
+                    onClick: () => toggleOption(addOn, option.id),
+                    "data-cimplify-addon-option": true,
+                    "data-selected": isSelected || void 0,
+                    className: cn(
+                      "w-full flex items-center gap-3 px-4 py-3 border transition-colors text-left border-transparent hover:bg-muted/50",
+                      isSelected && "bg-primary/5 border-primary",
+                      isSelected ? classNames?.optionSelected : classNames?.option
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          "data-cimplify-addon-option-name": true,
+                          className: cn(
+                            "flex-1 min-w-0 text-sm font-medium",
+                            isSelected && "text-primary",
+                            classNames?.optionName
+                          ),
+                          children: option.name
+                        }
+                      ),
+                      option.default_price != null && option.default_price !== 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                        Price,
+                        {
+                          amount: option.default_price,
+                          prefix: "+"
+                        }
+                      )
+                    ]
+                  },
+                  option.id
+                );
+              })
+            }
+          )
+        ]
+      },
+      addOn.id
+    );
   }) });
 }
 function BundleSelector({
@@ -8085,7 +8231,8 @@ function BundleSelector({
   onSelectionsChange,
   onPriceChange,
   onReady,
-  className
+  className,
+  classNames
 }) {
   const [variantChoices, setVariantChoices] = React3.useState({});
   const lastComponentIds = React3.useRef("");
@@ -8146,25 +8293,47 @@ function BundleSelector({
   if (components.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-bundle-selector": true, className, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-bundle-heading": true, children: "Included in this bundle" }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-bundle-components": true, children: components.map((comp) => /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-bundle-selector": true, className: cn("space-y-4", className, classNames?.root), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "data-cimplify-bundle-heading": true,
+        className: cn("text-xs font-medium uppercase tracking-wider text-muted-foreground", classNames?.heading),
+        children: "Included in this bundle"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-bundle-components": true, className: cn("space-y-3", classNames?.components), children: components.map((comp) => /* @__PURE__ */ jsxRuntime.jsx(
       BundleComponentCard,
       {
         component: comp,
         selectedVariantId: variantChoices[comp.id],
-        onVariantChange: (variantId) => handleVariantChange(comp.id, variantId)
+        onVariantChange: (variantId) => handleVariantChange(comp.id, variantId),
+        classNames
       },
       comp.id
     )) }),
-    bundlePrice && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-bundle-summary": true, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Bundle price" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: bundlePrice })
-    ] }),
-    discountValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-bundle-savings": true, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "You save" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: discountValue })
-    ] })
+    bundlePrice && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "data-cimplify-bundle-summary": true,
+        className: cn("border-t border-border pt-4 flex justify-between text-sm", classNames?.summary),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Bundle price" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: bundlePrice, className: "font-medium text-primary" })
+        ]
+      }
+    ),
+    discountValue && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "data-cimplify-bundle-savings": true,
+        className: cn("flex justify-between text-sm", classNames?.savings),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "You save" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: discountValue, className: "text-green-600 font-medium" })
+        ]
+      }
+    )
   ] });
 }
 function getComponentPrice(component, selectedVariantId) {
@@ -8182,47 +8351,95 @@ function getComponentPrice(component, selectedVariantId) {
 function BundleComponentCard({
   component,
   selectedVariantId,
-  onVariantChange
+  onVariantChange,
+  classNames
 }) {
   const showVariantPicker = component.allow_variant_choice && component.available_variants.length > 1;
   const displayPrice = React3.useMemo(
     () => getComponentPrice(component, selectedVariantId),
     [component, selectedVariantId]
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-bundle-component": true, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-bundle-component-header": true, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        component.quantity > 1 && /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-cimplify-bundle-component-qty": true, children: [
-          "\xD7",
-          component.quantity
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-bundle-component-name": true, children: component.product_name })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: displayPrice })
-    ] }),
-    showVariantPicker && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-bundle-variant-picker": true, children: component.available_variants.map((variant) => {
-      const isSelected = selectedVariantId === variant.id;
-      const adjustment = parsePrice(variant.price_adjustment);
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          type: "button",
-          "aria-pressed": isSelected,
-          onClick: () => onVariantChange(variant.id),
-          "data-cimplify-bundle-variant-option": true,
-          "data-selected": isSelected || void 0,
-          children: [
-            variant.display_name,
-            adjustment !== 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-cimplify-bundle-variant-adjustment": true, children: [
-              adjustment > 0 ? "+" : "",
-              /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: variant.price_adjustment })
-            ] })
-          ]
-        },
-        variant.id
-      );
-    }) })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-cimplify-bundle-component": true,
+      className: cn("border border-border p-4", classNames?.component),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            "data-cimplify-bundle-component-header": true,
+            className: cn("flex items-start justify-between gap-3", classNames?.componentHeader),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                component.quantity > 1 && /* @__PURE__ */ jsxRuntime.jsxs(
+                  "span",
+                  {
+                    "data-cimplify-bundle-component-qty": true,
+                    className: cn("text-xs font-medium text-primary bg-primary/10 px-1.5 py-0.5", classNames?.componentQty),
+                    children: [
+                      "\xD7",
+                      component.quantity
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    "data-cimplify-bundle-component-name": true,
+                    className: cn("font-medium text-sm", classNames?.componentName),
+                    children: component.product_name
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: displayPrice })
+            ]
+          }
+        ),
+        showVariantPicker && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-cimplify-bundle-variant-picker": true,
+            className: cn("mt-3 flex flex-wrap gap-2", classNames?.variantPicker),
+            children: component.available_variants.map((variant) => {
+              const isSelected = selectedVariantId === variant.id;
+              const adjustment = parsePrice(variant.price_adjustment);
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  "aria-pressed": isSelected,
+                  onClick: () => onVariantChange(variant.id),
+                  "data-cimplify-bundle-variant-option": true,
+                  "data-selected": isSelected || void 0,
+                  className: cn(
+                    "px-3 py-1.5 border text-xs font-medium transition-colors border-border hover:border-primary/50",
+                    isSelected && "bg-primary text-primary-foreground border-primary",
+                    isSelected ? classNames?.variantOptionSelected : classNames?.variantOption
+                  ),
+                  children: [
+                    variant.display_name,
+                    adjustment !== 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+                      "span",
+                      {
+                        "data-cimplify-bundle-variant-adjustment": true,
+                        className: cn("ml-1 opacity-70", classNames?.variantAdjustment),
+                        children: [
+                          adjustment > 0 ? "+" : "",
+                          /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: variant.price_adjustment })
+                        ]
+                      }
+                    )
+                  ]
+                },
+                variant.id
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
 }
 function CompositeSelector({
   compositeId,
@@ -8231,7 +8448,8 @@ function CompositeSelector({
   onPriceChange,
   onReady,
   skipPriceFetch,
-  className
+  className,
+  classNames
 }) {
   const { client } = useCimplify();
   const [groupSelections, setGroupSelections] = React3.useState({});
@@ -8351,114 +8569,261 @@ function CompositeSelector({
   if (groups.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-composite-selector": true, className, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-composite-selector": true, className: cn("space-y-6", className, classNames?.root), children: [
     [...groups].sort((a, b) => a.display_order - b.display_order).map((group) => {
       const groupSels = groupSelections[group.id] || {};
       const totalSelected = Object.values(groupSels).reduce((sum, q) => sum + q, 0);
       const minMet = totalSelected >= group.min_selections;
       const isSingleSelect = group.max_selections === 1;
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-composite-group": true, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-composite-group-header": true, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-cimplify-composite-group-name": true, children: [
-              group.name,
-              group.min_selections > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-composite-required": true, children: " *" })
-            ] }),
-            group.description && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-composite-group-description": true, children: group.description }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-composite-group-constraint": true, children: group.min_selections > 0 && group.max_selections ? `Choose ${group.min_selections}\u2013${group.max_selections}` : group.min_selections > 0 ? `Choose at least ${group.min_selections}` : group.max_selections ? `Choose up to ${group.max_selections}` : "Choose as many as you like" })
-          ] }),
-          !minMet && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-composite-validation": true, children: "Required" })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            "data-cimplify-composite-components": true,
-            role: isSingleSelect ? "radiogroup" : "group",
-            "aria-label": group.name,
-            children: group.components.filter((c) => c.is_available && !c.is_archived).sort((a, b) => a.display_order - b.display_order).map((component) => {
-              const qty = groupSels[component.id] || 0;
-              const isSelected = qty > 0;
-              const displayName = component.display_name || component.id;
-              return /* @__PURE__ */ jsxRuntime.jsxs(
-                "button",
-                {
-                  type: "button",
-                  role: isSingleSelect ? "radio" : "checkbox",
-                  "aria-checked": isSelected,
-                  onClick: () => toggleComponent(group, component),
-                  "data-cimplify-composite-component": true,
-                  "data-selected": isSelected || void 0,
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-composite-component-info": true, children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-composite-component-name": true, children: displayName }),
-                      component.is_popular && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-composite-badge": "popular", children: "Popular" }),
-                      component.is_premium && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-composite-badge": "premium", children: "Premium" }),
-                      component.display_description && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-composite-component-description": true, children: component.display_description }),
-                      component.calories != null && /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-cimplify-composite-component-calories": true, children: [
-                        component.calories,
-                        " cal"
-                      ] })
-                    ] }),
-                    group.allow_quantity && isSelected && /* @__PURE__ */ jsxRuntime.jsxs(
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          "data-cimplify-composite-group": true,
+          className: cn("border border-border p-5", classNames?.group),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                "data-cimplify-composite-group-header": true,
+                className: cn("flex items-center justify-between mb-4", classNames?.groupHeader),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(
                       "span",
                       {
-                        "data-cimplify-composite-qty": true,
-                        onClick: (e) => e.stopPropagation(),
+                        "data-cimplify-composite-group-name": true,
+                        className: cn("text-xs font-medium uppercase tracking-wider text-muted-foreground", classNames?.groupName),
                         children: [
-                          /* @__PURE__ */ jsxRuntime.jsx(
-                            "button",
+                          group.name,
+                          group.min_selections > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+                            "span",
                             {
-                              type: "button",
-                              onClick: () => updateQuantity(group, component.id, -1),
-                              "aria-label": `Decrease ${displayName} quantity`,
-                              children: "\u2212"
-                            }
-                          ),
-                          /* @__PURE__ */ jsxRuntime.jsx("span", { children: qty }),
-                          /* @__PURE__ */ jsxRuntime.jsx(
-                            "button",
-                            {
-                              type: "button",
-                              onClick: () => updateQuantity(group, component.id, 1),
-                              "aria-label": `Increase ${displayName} quantity`,
-                              children: "+"
+                              "data-cimplify-composite-required": true,
+                              className: cn("text-destructive ml-1", classNames?.required),
+                              children: [
+                                " ",
+                                "*"
+                              ]
                             }
                           )
                         ]
                       }
                     ),
-                    component.price != null && component.price !== 0 && /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: component.price, prefix: "+" })
-                  ]
-                },
-                component.id
-              );
-            })
-          }
-        )
-      ] }, group.id);
+                    group.description && /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        "data-cimplify-composite-group-description": true,
+                        className: cn("text-xs text-muted-foreground/70 mt-0.5", classNames?.groupDescription),
+                        children: group.description
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        "data-cimplify-composite-group-constraint": true,
+                        className: cn("text-xs text-muted-foreground/70 mt-1", classNames?.groupConstraint),
+                        children: group.min_selections > 0 && group.max_selections ? `Choose ${group.min_selections}\u2013${group.max_selections}` : group.min_selections > 0 ? `Choose at least ${group.min_selections}` : group.max_selections ? `Choose up to ${group.max_selections}` : "Choose as many as you like"
+                      }
+                    )
+                  ] }),
+                  !minMet && /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      "data-cimplify-composite-validation": true,
+                      className: cn("text-xs text-destructive font-medium", classNames?.validation),
+                      children: "Required"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                "data-cimplify-composite-components": true,
+                role: isSingleSelect ? "radiogroup" : "group",
+                "aria-label": group.name,
+                className: cn("space-y-1", classNames?.components),
+                children: group.components.filter((c) => c.is_available && !c.is_archived).sort((a, b) => a.display_order - b.display_order).map((component) => {
+                  const qty = groupSels[component.id] || 0;
+                  const isSelected = qty > 0;
+                  const displayName = component.display_name || component.id;
+                  return /* @__PURE__ */ jsxRuntime.jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      role: isSingleSelect ? "radio" : "checkbox",
+                      "aria-checked": isSelected,
+                      onClick: () => toggleComponent(group, component),
+                      "data-cimplify-composite-component": true,
+                      "data-selected": isSelected || void 0,
+                      className: cn(
+                        "w-full flex items-center gap-3 px-4 py-3 border transition-colors text-left border-transparent hover:bg-muted/50",
+                        isSelected && "bg-primary/5 border-primary",
+                        isSelected ? classNames?.componentSelected : classNames?.component
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs(
+                          "div",
+                          {
+                            "data-cimplify-composite-component-info": true,
+                            className: cn("flex-1 min-w-0", classNames?.componentInfo),
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                "span",
+                                {
+                                  "data-cimplify-composite-component-name": true,
+                                  className: cn("text-sm font-medium", isSelected && "text-primary", classNames?.componentName),
+                                  children: displayName
+                                }
+                              ),
+                              component.is_popular && /* @__PURE__ */ jsxRuntime.jsx(
+                                "span",
+                                {
+                                  "data-cimplify-composite-badge": "popular",
+                                  className: cn("text-[10px] uppercase tracking-wider text-primary font-medium", classNames?.badgePopular),
+                                  children: "Popular"
+                                }
+                              ),
+                              component.is_premium && /* @__PURE__ */ jsxRuntime.jsx(
+                                "span",
+                                {
+                                  "data-cimplify-composite-badge": "premium",
+                                  className: cn("text-[10px] uppercase tracking-wider text-amber-600 font-medium", classNames?.badgePremium),
+                                  children: "Premium"
+                                }
+                              ),
+                              component.display_description && /* @__PURE__ */ jsxRuntime.jsx(
+                                "span",
+                                {
+                                  "data-cimplify-composite-component-description": true,
+                                  className: cn("text-xs text-muted-foreground truncate", classNames?.componentDescription),
+                                  children: component.display_description
+                                }
+                              ),
+                              component.calories != null && /* @__PURE__ */ jsxRuntime.jsxs(
+                                "span",
+                                {
+                                  "data-cimplify-composite-component-calories": true,
+                                  className: cn("text-xs text-muted-foreground/60", classNames?.componentCalories),
+                                  children: [
+                                    component.calories,
+                                    " cal"
+                                  ]
+                                }
+                              )
+                            ]
+                          }
+                        ),
+                        group.allow_quantity && isSelected && /* @__PURE__ */ jsxRuntime.jsxs(
+                          "span",
+                          {
+                            "data-cimplify-composite-qty": true,
+                            onClick: (e) => e.stopPropagation(),
+                            className: cn("flex items-center gap-2", classNames?.qty),
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                "button",
+                                {
+                                  type: "button",
+                                  onClick: () => updateQuantity(group, component.id, -1),
+                                  "aria-label": `Decrease ${displayName} quantity`,
+                                  className: cn("w-6 h-6 border border-border flex items-center justify-center text-xs hover:bg-muted", classNames?.qtyButton),
+                                  children: "\u2212"
+                                }
+                              ),
+                              /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-sm font-medium w-4 text-center", classNames?.qtyValue), children: qty }),
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                "button",
+                                {
+                                  type: "button",
+                                  onClick: () => updateQuantity(group, component.id, 1),
+                                  "aria-label": `Increase ${displayName} quantity`,
+                                  className: cn("w-6 h-6 border border-border flex items-center justify-center text-xs hover:bg-muted", classNames?.qtyButton),
+                                  children: "+"
+                                }
+                              )
+                            ]
+                          }
+                        ),
+                        component.price != null && component.price !== 0 && /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: component.price, prefix: "+" })
+                      ]
+                    },
+                    component.id
+                  );
+                })
+              }
+            )
+          ]
+        },
+        group.id
+      );
     }),
-    priceResult && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-composite-summary": true, children: [
-      priceResult.base_price !== 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-composite-summary-line": true, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Base" }),
-        /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: priceResult.base_price })
-      ] }),
-      priceResult.components_total !== 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-composite-summary-line": true, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Selections" }),
-        /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: priceResult.components_total })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-composite-summary-total": true, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Total" }),
-        /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: priceResult.final_price })
-      ] })
-    ] }),
-    isPriceLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-composite-calculating": true, children: "Calculating price..." }),
-    priceError && !isPriceLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-composite-price-error": true, children: "Unable to calculate price" })
+    priceResult && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "data-cimplify-composite-summary": true,
+        className: cn("border-t border-border pt-4 space-y-1 text-sm", classNames?.summary),
+        children: [
+          priceResult.base_price !== 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              "data-cimplify-composite-summary-line": true,
+              className: cn("flex justify-between text-muted-foreground", classNames?.summaryLine),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Base" }),
+                /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: priceResult.base_price })
+              ]
+            }
+          ),
+          priceResult.components_total !== 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              "data-cimplify-composite-summary-line": true,
+              className: cn("flex justify-between text-muted-foreground", classNames?.summaryLine),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Selections" }),
+                /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: priceResult.components_total })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              "data-cimplify-composite-summary-total": true,
+              className: cn("flex justify-between font-medium pt-1 border-t border-border", classNames?.summaryTotal),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Total" }),
+                /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: priceResult.final_price, className: "text-primary" })
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    isPriceLoading && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-cimplify-composite-calculating": true,
+        className: cn("flex items-center gap-2 text-sm text-muted-foreground", classNames?.calculating),
+        children: "Calculating price..."
+      }
+    ),
+    priceError && !isPriceLoading && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-cimplify-composite-price-error": true,
+        className: cn("text-sm text-destructive", classNames?.priceError),
+        children: "Unable to calculate price"
+      }
+    )
   ] });
 }
 function ProductCustomizer({
   product,
   onAddToCart,
-  className
+  className,
+  classNames
 }) {
   const [quantity, setQuantity] = React3.useState(1);
   const [isAdded, setIsAdded] = React3.useState(false);
@@ -8604,7 +8969,7 @@ function ProductCustomizer({
       setIsSubmitting(false);
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-customizer": true, className, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-customizer": true, className: cn("space-y-6", className, classNames?.root), children: [
     isComposite && product.groups && product.composite_id && /* @__PURE__ */ jsxRuntime.jsx(
       CompositeSelector,
       {
@@ -8646,31 +9011,51 @@ function ProductCustomizer({
         onOptionsChange: setSelectedAddOnOptionIds
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-customizer-actions": true, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        QuantitySelector,
-        {
-          value: quantity,
-          onChange: setQuantity,
-          min: 1
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: handleAddToCart,
-          disabled: isAdded || isSubmitting || !quoteEnabled,
-          "aria-describedby": !quoteEnabled ? "cimplify-customizer-validation" : void 0,
-          "data-cimplify-customizer-submit": true,
-          children: isAdded ? "Added to Cart" : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            "Add to Cart \xB7 ",
-            /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: displayTotalPrice })
-          ] })
-        }
-      )
-    ] }),
-    !quoteEnabled && /* @__PURE__ */ jsxRuntime.jsx("p", { id: "cimplify-customizer-validation", "data-cimplify-customizer-validation": true, children: "Please select all required options" })
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "data-cimplify-customizer-actions": true,
+        className: cn("flex items-center gap-4 pt-4 border-t border-border", classNames?.actions),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            QuantitySelector,
+            {
+              value: quantity,
+              onChange: setQuantity,
+              min: 1
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleAddToCart,
+              disabled: isAdded || isSubmitting || !quoteEnabled,
+              "aria-describedby": !quoteEnabled ? "cimplify-customizer-validation" : void 0,
+              "data-cimplify-customizer-submit": true,
+              className: cn(
+                "flex-1 h-14 text-base bg-primary text-primary-foreground font-medium hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
+                isAdded && classNames?.submitButtonAdded,
+                classNames?.submitButton
+              ),
+              children: isAdded ? "Added to Cart" : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                "Add to Cart \xB7 ",
+                /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: displayTotalPrice })
+              ] })
+            }
+          )
+        ]
+      }
+    ),
+    !quoteEnabled && /* @__PURE__ */ jsxRuntime.jsx(
+      "p",
+      {
+        id: "cimplify-customizer-validation",
+        "data-cimplify-customizer-validation": true,
+        className: cn("text-sm text-destructive mt-2", classNames?.validation),
+        children: "Please select all required options"
+      }
+    )
   ] });
 }
 var ASPECT_STYLES = {
@@ -8853,9 +9238,6 @@ function CartSummary({
     )
   ] }) });
 }
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
 function AvailabilityBadge({
   product,
   isAvailable,