@nex125/seatmap-viewer 0.1.8 → 0.1.11

package/dist/index.cjs

@@ -6,93 +6,25 @@ var seatmapReact = require('@nex125/seatmap-react');
 var jsxRuntime = require('react/jsx-runtime');
 
 // src/SeatmapViewer.tsx
-var legendContainerStyle = {
-  position: "absolute",
-  top: 12,
-  left: 12,
-  zIndex: 10,
-  pointerEvents: "none",
-  background: "rgba(18, 18, 34, 0.88)",
-  border: "1px solid rgba(110, 110, 150, 0.45)",
-  borderRadius: 8,
-  padding: "10px 12px",
-  minWidth: 150,
-  color: "#e0e0e0",
-  fontFamily: "system-ui",
-  fontSize: 12,
-  backdropFilter: "blur(2px)"
-};
-var legendHeadingStyle = {
-  margin: 0,
-  fontSize: 11,
-  fontWeight: 600,
-  letterSpacing: 0.2,
-  color: "#b9b9d6"
-};
-var legendListStyle = {
-  listStyle: "none",
-  margin: "6px 0 0",
-  padding: 0,
-  display: "flex",
-  flexDirection: "column",
-  gap: 4
-};
-var legendItemStyle = {
-  display: "flex",
-  alignItems: "center",
-  gap: 6,
-  minWidth: 0
-};
-var legendSwatchStyle = {
-  width: 10,
-  height: 10,
-  borderRadius: 2,
-  flexShrink: 0,
-  border: "1px solid rgba(255, 255, 255, 0.25)"
-};
-var cartChipStyle = {
-  position: "absolute",
-  right: 12,
-  bottom: 12,
-  zIndex: 20,
-  border: "1px solid rgba(110, 110, 150, 0.65)",
-  background: "rgba(24, 24, 42, 0.95)",
-  color: "#ececff",
-  borderRadius: 999,
-  padding: "8px 14px",
-  fontSize: 12,
-  fontWeight: 600,
-  fontFamily: "system-ui",
-  cursor: "pointer",
-  boxShadow: "0 8px 18px rgba(0, 0, 0, 0.35)"
-};
-var cartPopupStyle = {
-  position: "absolute",
-  right: 0,
-  bottom: 0,
-  zIndex: 30,
-  maxHeight: "72vh",
-  display: "flex",
-  flexDirection: "column",
-  background: "rgba(17, 17, 34, 0.98)",
-  borderTop: "1px solid rgba(110, 110, 150, 0.65)",
-  borderLeft: "1px solid rgba(110, 110, 150, 0.65)",
-  borderTopLeftRadius: 12,
-  overflow: "hidden",
-  boxShadow: "-8px -8px 20px rgba(0, 0, 0, 0.35)"
-};
-var cartIconButtonStyle = {
-  width: 24,
-  height: 24,
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  borderRadius: 5,
-  border: "1px solid #4a4a6a",
-  background: "#262648",
-  color: "#ececff",
-  fontSize: 14,
-  cursor: "pointer"
+var defaultSeatmapViewerMessages = {
+  uncategorizedCategoryName: "Uncategorized",
+  sectionFallbackLabel: "Section",
+  tableLabel: (tableLabel) => `Table ${tableLabel}`,
+  legendAriaLabel: "Seatmap legend",
+  legendStatusesTitle: "Seat statuses",
+  legendPricesTitle: "Prices",
+  cartChipLabel: (selectedCount) => `Cart (${selectedCount})`,
+  cartAriaLabel: "Selected seats cart",
+  cartHeaderTitle: "Selected seats cart",
+  cartCloseLabel: "Close cart",
+  cartEmptyState: "No seats selected yet.",
+  cartGroupMeta: (count, unitPrice) => `${count} tickets - ${unitPrice} each`,
+  cartRemoveOneAriaLabel: (categoryName) => `Remove one seat from ${categoryName}`,
+  cartAddOneAriaLabel: (categoryName) => `Add one seat to ${categoryName}`,
+  cartRemoveSeatTitle: "Remove seat",
+  cartRemoveSeatAriaLabel: (seatLabel) => `Remove seat ${seatLabel}`,
+  cartSummary: (count, totalCost) => `${count} seats - Total ${totalCost}`,
+  cartProceedButton: "Proceed"
 };
 function getEffectiveCategoryPrice(category) {
   if (!category) return 0;
@@ -101,8 +33,11 @@ function getEffectiveCategoryPrice(category) {
   }
   return Number.isFinite(category.backendPrice) ? category.backendPrice : 0;
 }
-function formatMoney(value) {
-  return `$${value.toFixed(2)}`;
+function formatMoney(value, locale, currency) {
+  return new Intl.NumberFormat(locale, {
+    style: "currency",
+    currency
+  }).format(value);
 }
 function TrashIcon() {
   return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -113,15 +48,32 @@ function TrashIcon() {
     }
   ) });
 }
-function ViewerContent({
+function mergeStyles(base, override) {
+  if (!override) return base;
+  return { ...base, ...override };
+}
+function mergeClassNames(...classNames) {
+  const merged = classNames.filter(Boolean).join(" ").trim();
+  return merged.length > 0 ? merged : void 0;
+}
+function SeatmapViewerContent({
   venue,
   onSeatClick,
   onSeatHover,
   onSelectionChange,
   renderTooltip,
   showLabels,
-  onCartEvent
+  onCartEvent,
+  locale = "en-US",
+  currency = "BYN",
+  styles = {},
+  classNames = {},
+  messages: messagesOverride = {}
 }) {
+  const messages = react.useMemo(
+    () => ({ ...defaultSeatmapViewerMessages, ...messagesOverride }),
+    [messagesOverride]
+  );
   const { selectedSeatIds, setSelection } = seatmapReact.useSelection();
   const [isCartOpen, setIsCartOpen] = react.useState(false);
   const [lastUserAnchorByCategory, setLastUserAnchorByCategory] = react.useState({});
@@ -149,7 +101,7 @@ function ViewerContent({
             sectionId: section.id,
             sectionLabel: section.label,
             categoryId: seat.categoryId,
-            categoryName: category?.name ?? "Unknown",
+            categoryName: category?.name ?? messages.uncategorizedCategoryName,
             unitPrice: getEffectiveCategoryPrice(category),
             status: seat.status,
             x: section.position.x + seat.position.x * cos - seat.position.y * sin,
@@ -166,9 +118,9 @@ function ViewerContent({
           seatLabel: seat.label,
           rowLabel: null,
           sectionId: table.id,
-          sectionLabel: `Table ${table.label}`,
+          sectionLabel: messages.tableLabel(table.label),
           categoryId: seat.categoryId,
-          categoryName: category?.name ?? "Unknown",
+          categoryName: category?.name ?? messages.uncategorizedCategoryName,
           unitPrice: getEffectiveCategoryPrice(category),
           status: seat.status,
           x: table.position.x + seat.position.x,
@@ -177,7 +129,7 @@ function ViewerContent({
       }
     }
     return next;
-  }, [venue]);
+  }, [venue, messages]);
   const selectedSeats = react.useMemo(() => {
     const ordered = [];
     for (const selectedSeatId of selectedSeatIdArray) {
@@ -291,10 +243,14 @@ function ViewerContent({
   );
   const removeSeatFromSelection = react.useCallback(
     (seatId) => {
+      const seat = seatDetailsById.get(seatId);
+      if (seat?.sectionId) {
+        onSeatClick?.(seatId, seat.sectionId);
+      }
       const next = selectedSeatIdArray.filter((id) => id !== seatId);
       setSelection(next);
     },
-    [selectedSeatIdArray, setSelection]
+    [seatDetailsById, onSeatClick, selectedSeatIdArray, setSelection]
   );
   const handleSeatCanvasClick = react.useCallback(
     (seatId, sectionId) => {
@@ -324,8 +280,11 @@ function ViewerContent({
         }, candidates[0]);
       }
       setSelection([...selectedSeatIdArray, nextSeat.seatId]);
+      if (nextSeat.sectionId) {
+        onSeatClick?.(nextSeat.seatId, nextSeat.sectionId);
+      }
     },
-    [lastUserAnchorByCategory, seatDetailsById, selectedSeatIdArray, setSelection]
+    [lastUserAnchorByCategory, seatDetailsById, selectedSeatIdArray, setSelection, onSeatClick]
   );
   const handleRemoveLastInCategory = react.useCallback(
     (categoryId) => {
@@ -334,198 +293,276 @@ function ViewerContent({
       );
       const seatIdToRemove = selectedInCategory[selectedInCategory.length - 1];
       if (!seatIdToRemove) return;
+      const seat = seatDetailsById.get(seatIdToRemove);
+      if (seat?.sectionId) {
+        onSeatClick?.(seatIdToRemove, seat.sectionId);
+      }
       setSelection(selectedSeatIdArray.filter((selectedSeatId) => selectedSeatId !== seatIdToRemove));
     },
-    [seatDetailsById, selectedSeatIdArray, setSelection]
+    [seatDetailsById, selectedSeatIdArray, setSelection, onSeatClick]
   );
   const handleProceed = react.useCallback(() => {
     if (cartPayload.seats.length === 0) return;
     emitCartEvent({ type: "cart-proceed-clicked", payload: cartPayload });
   }, [cartPayload, emitCartEvent]);
   const cartWidth = viewportWidth > 1200 ? Math.floor(viewportWidth / 5) : viewportWidth;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { width: "100%", height: "100%", position: "relative" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      seatmapReact.SeatmapCanvas,
-      {
-        onSeatClick: handleSeatCanvasClick,
-        onSeatHover,
-        showSectionLabels: showLabels,
-        enableSeatHover: showLabels
-      }
-    ),
-    (showStatuses || showCategories) && /* @__PURE__ */ jsxRuntime.jsxs("aside", { "aria-label": "Seatmap legend", style: legendContainerStyle, children: [
-      showStatuses && /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { style: legendHeadingStyle, children: "Seat Status" }),
-        /* @__PURE__ */ jsxRuntime.jsx("ul", { style: legendListStyle, children: venue.seatStatuses.map((status) => /* @__PURE__ */ jsxRuntime.jsxs("li", { style: legendItemStyle, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...legendSwatchStyle, background: status.color } }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: status.name })
-        ] }, status.id)) })
-      ] }),
-      showStatuses && showCategories && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: 1, background: "rgba(123, 123, 165, 0.45)", margin: "8px 0" } }),
-      showCategories && /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { style: legendHeadingStyle, children: "Pricing" }),
-        /* @__PURE__ */ jsxRuntime.jsx("ul", { style: legendListStyle, children: venue.categories.map((category) => /* @__PURE__ */ jsxRuntime.jsxs("li", { style: legendItemStyle, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...legendSwatchStyle, background: category.color } }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: category.name })
-        ] }, category.id)) })
-      ] })
-    ] }),
-    !isCartOpen && /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", onClick: () => setIsCartOpen(true), style: cartChipStyle, children: [
-      "Cart (",
-      totalSelectedSeats,
-      ")"
-    ] }),
-    isCartOpen && /* @__PURE__ */ jsxRuntime.jsxs("aside", { "aria-label": "Selected seats cart", style: { ...cartPopupStyle, width: cartWidth, maxWidth: "100%" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          style: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            gap: 8,
-            padding: "10px 12px",
-            borderBottom: "1px solid rgba(110, 110, 150, 0.35)"
-          },
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("strong", { style: { color: "#ececff", fontSize: 13, fontFamily: "system-ui" }, children: "Selected Seats Cart" }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => setIsCartOpen(false),
-                style: { ...cartIconButtonStyle, width: 22, height: 22 },
-                title: "Close cart",
-                "aria-label": "Close cart",
-                children: "x"
-              }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: 8, overflow: "auto", padding: 12, flex: 1 }, children: groupedSeatsList.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#9e9eb8", fontSize: 12, fontFamily: "system-ui" }, children: "No seats selected yet." }) : groupedSeatsList.map((group) => /* @__PURE__ */ jsxRuntime.jsxs(
-        "article",
-        {
-          style: {
-            background: "#242447",
-            border: "1px solid #3b3b61",
-            borderRadius: 8,
-            padding: 8,
-            display: "flex",
-            flexDirection: "column",
-            gap: 6
-          },
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#ececff", fontSize: 12, fontFamily: "system-ui", fontWeight: 600 }, children: group.categoryName }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { color: "#adb0d2", fontSize: 11, fontFamily: "system-ui" }, children: [
-              group.seats.length,
-              " ticket",
-              group.seats.length === 1 ? "" : "s",
-              " - ",
-              formatMoney(group.unitPrice),
-              " each"
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 }, children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "inline-flex", alignItems: "center", gap: 6 }, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    type: "button",
-                    style: cartIconButtonStyle,
-                    onClick: () => handleRemoveLastInCategory(group.categoryId),
-                    disabled: group.seats.length === 0,
-                    "aria-label": `Remove one ${group.categoryName} seat`,
-                    children: "-"
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { style: { minWidth: 20, textAlign: "center", color: "#ececff", fontSize: 12 }, children: group.seats.length }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    type: "button",
-                    style: cartIconButtonStyle,
-                    onClick: () => handleAddSeatInCategory(group.categoryId),
-                    disabled: group.availableToAdd === 0,
-                    "aria-label": `Add one ${group.categoryName} seat`,
-                    children: "+"
-                  }
-                )
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: classNames.root,
+      style: mergeStyles({ width: "100%", height: "100%", position: "relative" }, styles.root),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          seatmapReact.SeatmapCanvas,
+          {
+            onSeatClick: handleSeatCanvasClick,
+            onSeatHover,
+            showSectionLabels: showLabels,
+            enableSeatHover: showLabels
+          }
+        ),
+        (showStatuses || showCategories) && /* @__PURE__ */ jsxRuntime.jsxs(
+          "aside",
+          {
+            "aria-label": messages.legendAriaLabel,
+            className: mergeClassNames("seatmap-viewer__legend", classNames.legendContainer),
+            style: styles.legendContainer,
+            children: [
+              showStatuses && /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "seatmap-viewer__legend-section", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: mergeClassNames("seatmap-viewer__legend-heading-base", classNames.legendHeading), style: styles.legendHeading, children: messages.legendStatusesTitle }),
+                /* @__PURE__ */ jsxRuntime.jsx("ul", { className: mergeClassNames("seatmap-viewer__legend-list-base", classNames.legendList), style: styles.legendList, children: venue.seatStatuses.map((status) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: mergeClassNames("seatmap-viewer__legend-item-base", classNames.legendItem), style: styles.legendItem, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: mergeClassNames("seatmap-viewer__legend-swatch-base", classNames.legendSwatch),
+                      style: mergeStyles({ background: status.color }, styles.legendSwatch)
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: status.name })
+                ] }, status.id)) })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#ececff", fontSize: 12, fontFamily: "system-ui", fontWeight: 600 }, children: formatMoney(group.seats.reduce((sum, seat) => sum + seat.unitPrice, 0)) })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: group.seats.map((seat) => /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 },
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { color: "#c8c8df", fontSize: 11, fontFamily: "system-ui" }, children: [
-                    seat.sectionLabel ?? "Section",
-                    " ",
-                    seat.rowLabel ? `- ${seat.rowLabel}${seat.seatLabel}` : `- ${seat.seatLabel}`
-                  ] }),
+              showStatuses && showCategories && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: mergeClassNames("seatmap-viewer__legend-divider-base", classNames.legendDivider),
+                  style: styles.legendDivider
+                }
+              ),
+              showCategories && /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "seatmap-viewer__legend-section", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: mergeClassNames("seatmap-viewer__legend-heading-base", classNames.legendHeading), style: styles.legendHeading, children: messages.legendPricesTitle }),
+                /* @__PURE__ */ jsxRuntime.jsx("ul", { className: mergeClassNames("seatmap-viewer__legend-list-base", classNames.legendList), style: styles.legendList, children: venue.categories.map((category) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: mergeClassNames("seatmap-viewer__legend-item-base", classNames.legendItem), style: styles.legendItem, children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
-                    "button",
+                    "span",
                     {
-                      type: "button",
-                      style: cartIconButtonStyle,
-                      onClick: () => removeSeatFromSelection(seat.seatId),
-                      title: "Remove seat",
-                      "aria-label": `Remove seat ${seat.seatLabel}`,
-                      children: /* @__PURE__ */ jsxRuntime.jsx(TrashIcon, {})
+                      className: mergeClassNames("seatmap-viewer__legend-swatch-base", classNames.legendSwatch),
+                      style: mergeStyles({ background: category.color }, styles.legendSwatch)
                     }
-                  )
-                ]
-              },
-              seat.seatId
-            )) })
-          ]
-        },
-        group.categoryId
-      )) }),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          style: {
-            borderTop: "1px solid rgba(110, 110, 150, 0.35)",
-            padding: 12,
-            display: "flex",
-            flexDirection: "column",
-            gap: 8
-          },
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { color: "#d4d4ee", fontSize: 12, fontFamily: "system-ui" }, children: [
-              totalSelectedSeats,
-              " seat",
-              totalSelectedSeats === 1 ? "" : "s",
-              " - Total ",
-              formatMoney(totalCost)
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                disabled: cartSeats.length === 0,
-                onClick: handleProceed,
-                style: {
-                  border: "1px solid #2f7b44",
-                  background: cartSeats.length === 0 ? "#30543d" : "#2f7b44",
-                  color: "#ecfff2",
-                  borderRadius: 8,
-                  padding: "8px 12px",
-                  fontSize: 13,
-                  fontWeight: 600,
-                  fontFamily: "system-ui",
-                  cursor: cartSeats.length === 0 ? "not-allowed" : "pointer"
-                },
-                children: "Proceed"
-              }
-            )
-          ]
-        }
-      )
-    ] }),
-    showLabels && /* @__PURE__ */ jsxRuntime.jsx(seatmapReact.TooltipOverlay, { renderTooltip })
-  ] });
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: category.name })
+                ] }, category.id)) })
+              ] })
+            ]
+          }
+        ),
+        !isCartOpen && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: mergeClassNames("seatmap-viewer__cart-chip-base", classNames.cartChip),
+            onClick: () => setIsCartOpen(true),
+            style: styles.cartChip,
+            children: messages.cartChipLabel(totalSelectedSeats)
+          }
+        ),
+        isCartOpen && /* @__PURE__ */ jsxRuntime.jsxs(
+          "aside",
+          {
+            "aria-label": messages.cartAriaLabel,
+            className: mergeClassNames("seatmap-viewer__cart-popup-base", classNames.cartPopup),
+            style: mergeStyles({ width: cartWidth, maxWidth: "100%" }, styles.cartPopup),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: mergeClassNames("seatmap-viewer__cart-header-base", classNames.cartHeader),
+                  style: styles.cartHeader,
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "strong",
+                      {
+                        className: mergeClassNames("seatmap-viewer__cart-header-title-base", classNames.cartHeaderTitle),
+                        style: styles.cartHeaderTitle,
+                        children: messages.cartHeaderTitle
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => setIsCartOpen(false),
+                        className: mergeClassNames("seatmap-viewer__cart-icon-button-base", classNames.cartIconButton),
+                        style: styles.cartIconButton,
+                        title: messages.cartCloseLabel,
+                        "aria-label": messages.cartCloseLabel,
+                        children: "x"
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: mergeClassNames("seatmap-viewer__cart-body-base", classNames.cartBody),
+                  style: styles.cartBody,
+                  children: groupedSeatsList.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: mergeClassNames("seatmap-viewer__cart-empty-state-base", classNames.cartEmptyState),
+                      style: styles.cartEmptyState,
+                      children: messages.cartEmptyState
+                    }
+                  ) : groupedSeatsList.map((group) => /* @__PURE__ */ jsxRuntime.jsxs(
+                    "article",
+                    {
+                      className: mergeClassNames("seatmap-viewer__cart-group-base", classNames.cartGroup),
+                      style: styles.cartGroup,
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "div",
+                          {
+                            className: mergeClassNames("seatmap-viewer__cart-group-title-base", classNames.cartGroupTitle),
+                            style: styles.cartGroupTitle,
+                            children: group.categoryName
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "div",
+                          {
+                            className: mergeClassNames("seatmap-viewer__cart-group-meta-base", classNames.cartGroupMeta),
+                            style: styles.cartGroupMeta,
+                            children: messages.cartGroupMeta(group.seats.length, formatMoney(group.unitPrice, locale, currency))
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: mergeClassNames("seatmap-viewer__cart-quantity-row-base", classNames.cartQuantityRow), style: styles.cartQuantityRow, children: [
+                          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "seatmap-viewer__cart-quantity-controls", children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              "button",
+                              {
+                                type: "button",
+                                className: mergeClassNames("seatmap-viewer__cart-icon-button-base", classNames.cartIconButton),
+                                style: styles.cartIconButton,
+                                onClick: () => handleRemoveLastInCategory(group.categoryId),
+                                disabled: group.seats.length === 0,
+                                "aria-label": messages.cartRemoveOneAriaLabel(group.categoryName),
+                                children: "-"
+                              }
+                            ),
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              "span",
+                              {
+                                className: mergeClassNames("seatmap-viewer__cart-quantity-value-base", classNames.cartQuantityValue),
+                                style: styles.cartQuantityValue,
+                                children: group.seats.length
+                              }
+                            ),
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              "button",
+                              {
+                                type: "button",
+                                className: mergeClassNames("seatmap-viewer__cart-icon-button-base", classNames.cartIconButton),
+                                style: styles.cartIconButton,
+                                onClick: () => handleAddSeatInCategory(group.categoryId),
+                                disabled: group.availableToAdd === 0,
+                                "aria-label": messages.cartAddOneAriaLabel(group.categoryName),
+                                children: "+"
+                              }
+                            )
+                          ] }),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "span",
+                            {
+                              className: mergeClassNames("seatmap-viewer__cart-group-total-base", classNames.cartGroupTotal),
+                              style: styles.cartGroupTotal,
+                              children: formatMoney(group.seats.reduce((sum, seat) => sum + seat.unitPrice, 0), locale, currency)
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "seatmap-viewer__cart-seat-list", children: group.seats.map((seat) => /* @__PURE__ */ jsxRuntime.jsxs(
+                          "div",
+                          {
+                            className: mergeClassNames("seatmap-viewer__cart-seat-row-base", classNames.cartSeatRow),
+                            style: styles.cartSeatRow,
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsxs(
+                                "span",
+                                {
+                                  className: mergeClassNames("seatmap-viewer__cart-seat-label-base", classNames.cartSeatLabel),
+                                  style: styles.cartSeatLabel,
+                                  children: [
+                                    seat.sectionLabel ?? messages.sectionFallbackLabel,
+                                    " ",
+                                    seat.rowLabel ? `- ${seat.rowLabel}${seat.seatLabel}` : `- ${seat.seatLabel}`
+                                  ]
+                                }
+                              ),
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                "button",
+                                {
+                                  type: "button",
+                                  className: mergeClassNames("seatmap-viewer__cart-icon-button-base", classNames.cartIconButton),
+                                  style: styles.cartIconButton,
+                                  onClick: () => removeSeatFromSelection(seat.seatId),
+                                  title: messages.cartRemoveSeatTitle,
+                                  "aria-label": messages.cartRemoveSeatAriaLabel(seat.seatLabel),
+                                  children: /* @__PURE__ */ jsxRuntime.jsx(TrashIcon, {})
+                                }
+                              )
+                            ]
+                          },
+                          seat.seatId
+                        )) })
+                      ]
+                    },
+                    group.categoryId
+                  ))
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: mergeClassNames("seatmap-viewer__cart-footer-base", classNames.cartFooter),
+                  style: styles.cartFooter,
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        className: mergeClassNames("seatmap-viewer__cart-summary-base", classNames.cartSummary),
+                        style: styles.cartSummary,
+                        children: messages.cartSummary(totalSelectedSeats, formatMoney(totalCost, locale, currency))
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        type: "button",
+                        disabled: cartSeats.length === 0,
+                        onClick: handleProceed,
+                        className: mergeClassNames("seatmap-viewer__cart-proceed-button-base", classNames.cartProceedButton),
+                        style: styles.cartProceedButton,
+                        children: messages.cartProceedButton
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        showLabels && /* @__PURE__ */ jsxRuntime.jsx(seatmapReact.TooltipOverlay, { renderTooltip })
+      ]
+    }
+  );
 }
 function SeatmapViewer({
   venue,
@@ -535,20 +572,202 @@ function SeatmapViewer({
   renderTooltip,
   showLabels = true,
   className,
-  onCartEvent
+  onCartEvent,
+  locale,
+  currency,
+  styles,
+  classNames,
+  messages
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(seatmapReact.SeatmapProvider, { venue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className, style: { width: "100%", height: "100%", position: "relative" }, children: /* @__PURE__ */ jsxRuntime.jsx(
-    ViewerContent,
+  return /* @__PURE__ */ jsxRuntime.jsx(seatmapReact.SeatmapProvider, { venue, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
     {
-      venue,
-      onSeatClick,
-      onSeatHover,
-      onSelectionChange,
-      renderTooltip,
-      showLabels,
-      onCartEvent
+      className: mergeClassNames(className, classNames?.root),
+      style: mergeStyles({ width: "100%", height: "100%", position: "relative" }, styles?.root),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        SeatmapViewerContent,
+        {
+          venue,
+          onSeatClick,
+          onSeatHover,
+          onSelectionChange,
+          renderTooltip,
+          showLabels,
+          onCartEvent,
+          locale,
+          currency,
+          styles,
+          classNames,
+          messages
+        }
+      )
     }
-  ) }) });
+  ) });
+}
+
+// src/styleContract.ts
+var seatmapViewerStyleSlots = [
+  "root",
+  "legendContainer",
+  "legendHeading",
+  "legendList",
+  "legendItem",
+  "legendSwatch",
+  "legendDivider",
+  "cartChip",
+  "cartPopup",
+  "cartHeader",
+  "cartHeaderTitle",
+  "cartIconButton",
+  "cartBody",
+  "cartEmptyState",
+  "cartGroup",
+  "cartGroupTitle",
+  "cartGroupMeta",
+  "cartQuantityRow",
+  "cartQuantityValue",
+  "cartGroupTotal",
+  "cartSeatRow",
+  "cartSeatLabel",
+  "cartFooter",
+  "cartSummary",
+  "cartProceedButton"
+];
+var STYLE_CONTRACT_CLASS_PREFIX = "seatmap-viewer";
+var seatmapViewerDefaultClassNames = {
+  root: `${STYLE_CONTRACT_CLASS_PREFIX}__root`,
+  legendContainer: `${STYLE_CONTRACT_CLASS_PREFIX}__legend-container`,
+  legendHeading: `${STYLE_CONTRACT_CLASS_PREFIX}__legend-heading`,
+  legendList: `${STYLE_CONTRACT_CLASS_PREFIX}__legend-list`,
+  legendItem: `${STYLE_CONTRACT_CLASS_PREFIX}__legend-item`,
+  legendSwatch: `${STYLE_CONTRACT_CLASS_PREFIX}__legend-swatch`,
+  legendDivider: `${STYLE_CONTRACT_CLASS_PREFIX}__legend-divider`,
+  cartChip: `${STYLE_CONTRACT_CLASS_PREFIX}__cart-chip`,
+  cartPopup: `${STYLE_CONTRACT_CLASS_PREFIX}__cart-popup`,
+  cartHeader: `${STYLE_CONTRACT_CLASS_PREFIX}__cart-header`,
+  cartHeaderTitle: `${STYLE_CONTRACT_CLASS_PREFIX}__cart-header-title`,
+  cartIconButton: `${STYLE_CONTRACT_CLASS_PREFIX}__cart-icon-button`,
+  cartBody: `${STYLE_CONTRACT_CLASS_PREFIX}__cart-body`,
+  cartEmptyState: `${STYLE_CONTRACT_CLASS_PREFIX}__cart-empty-state`,
+  cartGroup: `${STYLE_CONTRACT_CLASS_PREFIX}__cart-group`,
+  cartGroupTitle: `${STYLE_CONTRACT_CLASS_PREFIX}__cart-group-title`,
+  cartGroupMeta: `${STYLE_CONTRACT_CLASS_PREFIX}__cart-group-meta`,
+  cartQuantityRow: `${STYLE_CONTRACT_CLASS_PREFIX}__cart-quantity-row`,
+  cartQuantityValue: `${STYLE_CONTRACT_CLASS_PREFIX}__cart-quantity-value`,
+  cartGroupTotal: `${STYLE_CONTRACT_CLASS_PREFIX}__cart-group-total`,
+  cartSeatRow: `${STYLE_CONTRACT_CLASS_PREFIX}__cart-seat-row`,
+  cartSeatLabel: `${STYLE_CONTRACT_CLASS_PREFIX}__cart-seat-label`,
+  cartFooter: `${STYLE_CONTRACT_CLASS_PREFIX}__cart-footer`,
+  cartSummary: `${STYLE_CONTRACT_CLASS_PREFIX}__cart-summary`,
+  cartProceedButton: `${STYLE_CONTRACT_CLASS_PREFIX}__cart-proceed-button`
+};
+var seatmapViewerCssVariables = [
+  "--seatmap-surface",
+  "--seatmap-surface-elevated",
+  "--seatmap-surface-muted",
+  "--seatmap-on-surface",
+  "--seatmap-on-surface-variant",
+  "--seatmap-outline",
+  "--seatmap-outline-variant",
+  "--seatmap-primary",
+  "--seatmap-on-primary",
+  "--seatmap-error",
+  "--seatmap-on-error",
+  "--seatmap-state-layer-hover",
+  "--seatmap-state-layer-pressed",
+  "--seatmap-focus-ring",
+  "--seatmap-radius-sm",
+  "--seatmap-radius-md",
+  "--seatmap-radius-lg",
+  "--seatmap-shadow-raised",
+  "--seatmap-shadow-elevated",
+  "--seatmap-shadow-floating",
+  "--seatmap-viewer-surface",
+  "--seatmap-viewer-surface-elevated",
+  "--seatmap-viewer-surface-muted",
+  "--seatmap-viewer-border",
+  "--seatmap-viewer-border-subtle",
+  "--seatmap-viewer-text",
+  "--seatmap-viewer-text-muted",
+  "--seatmap-viewer-accent",
+  "--seatmap-viewer-accent-disabled",
+  "--seatmap-viewer-accent-text",
+  "--seatmap-viewer-danger",
+  "--seatmap-viewer-danger-text",
+  "--seatmap-viewer-state-layer-hover",
+  "--seatmap-viewer-state-layer-pressed",
+  "--seatmap-viewer-focus-ring",
+  "--seatmap-viewer-radius-sm",
+  "--seatmap-viewer-radius-md",
+  "--seatmap-viewer-radius-lg",
+  "--seatmap-viewer-shadow-raised",
+  "--seatmap-viewer-shadow-elevated",
+  "--seatmap-viewer-shadow-floating"
+];
+var seatmapViewerStyleContract = {
+  slots: seatmapViewerStyleSlots,
+  defaultClassNames: seatmapViewerDefaultClassNames,
+  cssVariables: seatmapViewerCssVariables
+};
+
+// src/theme/seatmapViewerTheme.ts
+var seatmapViewerSharedThemeRootClassName = "seatmap-viewer-theme";
+var seatmapViewerSharedThemeClassNames = {
+  ...seatmapViewerDefaultClassNames
+};
+var seatmapViewerSharedThemeVariables = {
+  "--seatmap-surface": "var(--ds-surface-container-low, rgba(24, 24, 24, 0.94))",
+  "--seatmap-surface-elevated": "var(--ds-surface-container, rgba(28, 28, 28, 0.98))",
+  "--seatmap-surface-muted": "var(--ds-surface-container-high, rgba(33, 33, 33, 1))",
+  "--seatmap-on-surface": "var(--ds-on-surface, #e5e2e1)",
+  "--seatmap-on-surface-variant": "var(--ds-on-surface-variant, #9a9694)",
+  "--seatmap-outline": "var(--ds-input-border, rgba(92, 89, 87, 0.65))",
+  "--seatmap-outline-variant": "var(--ds-border-subtle, rgba(92, 89, 87, 0.45))",
+  "--seatmap-primary": "var(--ds-primary, #6f663a)",
+  "--seatmap-on-primary": "var(--ds-on-primary, #f5edc7)",
+  "--seatmap-error": "var(--ds-error, #ad3f3f)",
+  "--seatmap-on-error": "var(--ds-on-error, #ffffff)",
+  "--seatmap-state-layer-hover": "var(--ds-primary-wash, color-mix(in srgb, var(--ds-primary, #6f663a) 12%, transparent))",
+  "--seatmap-state-layer-pressed": "var(--ds-primary-wash-strong, color-mix(in srgb, var(--ds-primary, #6f663a) 16%, transparent))",
+  "--seatmap-focus-ring": "var(--ds-primary-ring, color-mix(in srgb, var(--ds-primary, #6f663a) 55%, transparent))",
+  "--seatmap-radius-sm": "var(--ds-radius-structural-sm, 8px)",
+  "--seatmap-radius-md": "var(--ds-radius-structural, 10px)",
+  "--seatmap-radius-lg": "calc(var(--ds-radius-structural, 10px) + 6px)",
+  "--seatmap-shadow-raised": "var(--ds-shadow-ambient-sm, 0 8px 20px rgba(0, 0, 0, 0.22))",
+  "--seatmap-shadow-elevated": "var(--ds-shadow-ambient, 0 10px 24px rgba(0, 0, 0, 0.28))",
+  "--seatmap-shadow-floating": "var(--ds-shadow-ambient-lg, 0 14px 34px rgba(0, 0, 0, 0.32))",
+  "--seatmap-viewer-surface": "var(--seatmap-surface)",
+  "--seatmap-viewer-surface-elevated": "var(--seatmap-surface-elevated)",
+  "--seatmap-viewer-surface-muted": "var(--seatmap-surface-muted)",
+  "--seatmap-viewer-border": "var(--seatmap-outline)",
+  "--seatmap-viewer-border-subtle": "var(--seatmap-outline-variant)",
+  "--seatmap-viewer-text": "var(--seatmap-on-surface)",
+  "--seatmap-viewer-text-muted": "var(--seatmap-on-surface-variant)",
+  "--seatmap-viewer-accent": "var(--seatmap-primary)",
+  "--seatmap-viewer-accent-disabled": "color-mix(in srgb, var(--seatmap-primary) 28%, var(--seatmap-surface-muted))",
+  "--seatmap-viewer-accent-text": "var(--seatmap-on-primary)",
+  "--seatmap-viewer-danger": "var(--seatmap-error)",
+  "--seatmap-viewer-danger-text": "var(--seatmap-on-error)",
+  "--seatmap-viewer-state-layer-hover": "var(--seatmap-state-layer-hover)",
+  "--seatmap-viewer-state-layer-pressed": "var(--seatmap-state-layer-pressed)",
+  "--seatmap-viewer-focus-ring": "var(--seatmap-focus-ring)",
+  "--seatmap-viewer-radius-sm": "var(--seatmap-radius-sm)",
+  "--seatmap-viewer-radius-md": "var(--seatmap-radius-md)",
+  "--seatmap-viewer-radius-lg": "var(--seatmap-radius-lg)",
+  "--seatmap-viewer-shadow-raised": "var(--seatmap-shadow-raised)",
+  "--seatmap-viewer-shadow-elevated": "var(--seatmap-shadow-elevated)",
+  "--seatmap-viewer-shadow-floating": "var(--seatmap-shadow-floating)"
+};
+var seatmapViewerSharedTheme = {
+  rootClassName: seatmapViewerSharedThemeRootClassName,
+  classNames: seatmapViewerSharedThemeClassNames,
+  variables: seatmapViewerSharedThemeVariables
+};
+function getSeatmapViewerSharedThemeRootStyle(overrides) {
+  return {
+    ...seatmapViewerSharedThemeVariables,
+    ...overrides ?? {}
+  };
 }
 
 Object.defineProperty(exports, "useSeatStatus", {
@@ -556,5 +775,16 @@ Object.defineProperty(exports, "useSeatStatus", {
   get: function () { return seatmapReact.useSeatStatus; }
 });
 exports.SeatmapViewer = SeatmapViewer;
+exports.SeatmapViewerContent = SeatmapViewerContent;
+exports.defaultSeatmapViewerMessages = defaultSeatmapViewerMessages;
+exports.getSeatmapViewerSharedThemeRootStyle = getSeatmapViewerSharedThemeRootStyle;
+exports.seatmapViewerCssVariables = seatmapViewerCssVariables;
+exports.seatmapViewerDefaultClassNames = seatmapViewerDefaultClassNames;
+exports.seatmapViewerSharedTheme = seatmapViewerSharedTheme;
+exports.seatmapViewerSharedThemeClassNames = seatmapViewerSharedThemeClassNames;
+exports.seatmapViewerSharedThemeRootClassName = seatmapViewerSharedThemeRootClassName;
+exports.seatmapViewerSharedThemeVariables = seatmapViewerSharedThemeVariables;
+exports.seatmapViewerStyleContract = seatmapViewerStyleContract;
+exports.seatmapViewerStyleSlots = seatmapViewerStyleSlots;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map