@sonordev/site-kit 1.4.1 → 1.4.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/{chunk-EDQSKBFX.js → chunk-B5NQTJ2M.js} +183 -194
  2. package/dist/chunk-B5NQTJ2M.js.map +1 -0
  3. package/dist/{chunk-VE2GYLFG.mjs → chunk-BUJFVIBQ.mjs} +183 -194
  4. package/dist/chunk-BUJFVIBQ.mjs.map +1 -0
  5. package/dist/commerce/index.js +44 -44
  6. package/dist/commerce/index.mjs +1 -1
  7. package/dist/index.js +25 -25
  8. package/dist/index.mjs +1 -1
  9. package/package.json +1 -1
  10. package/dist/chunk-EDQSKBFX.js.map +0 -1
  11. package/dist/chunk-VE2GYLFG.mjs.map +0 -1
package/dist/{chunk-VE2GYLFG.mjs → chunk-BUJFVIBQ.mjs} RENAMED
@@ -1350,25 +1350,18 @@ var STYLE_BLOCK = `
1350
1350
  }
1351
1351
 
1352
1352
  .skc-detail {
1353
- --commerce-bg: transparent;
1354
- --commerce-surface: #f9fafb;
1355
- --commerce-surface-hover: #f3f4f6;
1356
- --commerce-border: #e5e7eb;
1357
- --commerce-text: #111827;
1358
- --commerce-text-secondary: #6b7280;
1359
- --commerce-text-muted: #9ca3af;
1360
- --commerce-accent: #2563eb;
1361
- --commerce-accent-hover: #1d4ed8;
1362
- --commerce-accent-text: #ffffff;
1363
- --commerce-success: #059669;
1364
- --commerce-warning: #d97706;
1365
- --commerce-danger: #dc2626;
1366
- --commerce-radius: 12px;
1367
- --commerce-radius-sm: 8px;
1368
-
1369
1353
  animation: skc-fadeIn 0.3s ease-out;
1370
1354
  }
1371
1355
 
1356
+ /*
1357
+ * Commerce CSS custom properties are NOT set here \u2014 they inherit from the host site's :root.
1358
+ * If the host site does not define them, the inline var() fallbacks in each usage provide defaults.
1359
+ * Example: color: var(--commerce-text, #111827) \u2014 uses #111827 if --commerce-text is not defined.
1360
+ *
1361
+ * Host sites should define these in their CSS:
1362
+ * :root { --commerce-accent: #d9b338; --commerce-surface: #0f0f17; ... }
1363
+ */
1364
+
1372
1365
  .skc-detail *, .skc-detail *::before, .skc-detail *::after {
1373
1366
  box-sizing: border-box;
1374
1367
  }
@@ -1399,8 +1392,8 @@ var STYLE_BLOCK = `
1399
1392
  .skc-gallery-main {
1400
1393
  position: relative;
1401
1394
  overflow: hidden;
1402
- border-radius: var(--commerce-radius);
1403
- background: var(--commerce-surface);
1395
+ border-radius: var(--commerce-radius, 12px);
1396
+ background: var(--commerce-surface, #f9fafb);
1404
1397
  cursor: crosshair;
1405
1398
  aspect-ratio: 1;
1406
1399
  }
@@ -1424,19 +1417,19 @@ var STYLE_BLOCK = `
1424
1417
  flex: 0 0 auto;
1425
1418
  width: 64px;
1426
1419
  height: 64px;
1427
- border-radius: var(--commerce-radius-sm);
1420
+ border-radius: var(--commerce-radius-sm, 8px);
1428
1421
  overflow: hidden;
1429
1422
  border: 2px solid transparent;
1430
1423
  padding: 0;
1431
1424
  cursor: pointer;
1432
- background: var(--commerce-surface);
1425
+ background: var(--commerce-surface, #f9fafb);
1433
1426
  transition: border-color 0.15s ease;
1434
1427
  }
1435
1428
  .skc-gallery-thumb:hover {
1436
- border-color: var(--commerce-text-muted);
1429
+ border-color: var(--commerce-text-muted, #9ca3af);
1437
1430
  }
1438
1431
  .skc-gallery-thumb.skc-active {
1439
- border-color: var(--commerce-accent);
1432
+ border-color: var(--commerce-accent, #2563eb);
1440
1433
  }
1441
1434
  .skc-gallery-thumb img {
1442
1435
  width: 100%;
@@ -1452,7 +1445,7 @@ var STYLE_BLOCK = `
1452
1445
  right: 0;
1453
1446
  z-index: 999;
1454
1447
  background: white;
1455
- border-top: 1px solid var(--commerce-border);
1448
+ border-top: 1px solid var(--commerce-border, #e5e7eb);
1456
1449
  padding: 0.75rem 1rem;
1457
1450
  display: flex;
1458
1451
  align-items: center;
@@ -1468,7 +1461,7 @@ var STYLE_BLOCK = `
1468
1461
  /* Tabs */
1469
1462
  .skc-tabs-list {
1470
1463
  display: flex;
1471
- border-bottom: 1px solid var(--commerce-border);
1464
+ border-bottom: 1px solid var(--commerce-border, #e5e7eb);
1472
1465
  gap: 0;
1473
1466
  overflow-x: auto;
1474
1467
  scrollbar-width: none;
@@ -1480,18 +1473,18 @@ var STYLE_BLOCK = `
1480
1473
  background: none;
1481
1474
  font-size: 0.875rem;
1482
1475
  font-weight: 500;
1483
- color: var(--commerce-text-secondary);
1476
+ color: var(--commerce-text-secondary, #6b7280);
1484
1477
  cursor: pointer;
1485
1478
  border-bottom: 2px solid transparent;
1486
1479
  white-space: nowrap;
1487
1480
  transition: color 0.15s ease, border-color 0.15s ease;
1488
1481
  }
1489
1482
  .skc-tab-btn:hover {
1490
- color: var(--commerce-text);
1483
+ color: var(--commerce-text, #111827);
1491
1484
  }
1492
1485
  .skc-tab-btn.skc-active {
1493
- color: var(--commerce-accent);
1494
- border-bottom-color: var(--commerce-accent);
1486
+ color: var(--commerce-accent, #2563eb);
1487
+ border-bottom-color: var(--commerce-accent, #2563eb);
1495
1488
  }
1496
1489
 
1497
1490
  /* Checkout overlay */
@@ -1514,7 +1507,7 @@ var STYLE_BLOCK = `
1514
1507
  max-height: 90vh;
1515
1508
  overflow-y: auto;
1516
1509
  background: white;
1517
- border-radius: calc(var(--commerce-radius) + 4px);
1510
+ border-radius: calc(var(--commerce-radius, 12px) + 4px);
1518
1511
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
1519
1512
  animation: skc-scaleIn 0.25s ease-out;
1520
1513
  }
@@ -1523,20 +1516,20 @@ var STYLE_BLOCK = `
1523
1516
  .skc-input {
1524
1517
  width: 100%;
1525
1518
  padding: 0.625rem 0.75rem;
1526
- border-radius: var(--commerce-radius-sm);
1527
- border: 1px solid var(--commerce-border);
1519
+ border-radius: var(--commerce-radius-sm, 8px);
1520
+ border: 1px solid var(--commerce-border, #e5e7eb);
1528
1521
  font-size: 0.9375rem;
1529
- color: var(--commerce-text);
1522
+ color: var(--commerce-text, #111827);
1530
1523
  background: white;
1531
1524
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
1532
1525
  outline: none;
1533
1526
  }
1534
1527
  .skc-input:focus {
1535
- border-color: var(--commerce-accent);
1528
+ border-color: var(--commerce-accent, #2563eb);
1536
1529
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
1537
1530
  }
1538
1531
  .skc-input::placeholder {
1539
- color: var(--commerce-text-muted);
1532
+ color: var(--commerce-text-muted, #9ca3af);
1540
1533
  }
1541
1534
 
1542
1535
  /* Primary button */
@@ -1547,17 +1540,17 @@ var STYLE_BLOCK = `
1547
1540
  gap: 0.5rem;
1548
1541
  width: 100%;
1549
1542
  padding: 0.875rem 1.5rem;
1550
- border-radius: var(--commerce-radius-sm);
1543
+ border-radius: var(--commerce-radius-sm, 8px);
1551
1544
  border: none;
1552
- background: var(--commerce-accent);
1553
- color: var(--commerce-accent-text);
1545
+ background: var(--commerce-accent, #2563eb);
1546
+ color: var(--commerce-accent-text, #ffffff);
1554
1547
  font-size: 1rem;
1555
1548
  font-weight: 600;
1556
1549
  cursor: pointer;
1557
1550
  transition: background-color 0.15s ease, transform 0.1s ease;
1558
1551
  }
1559
1552
  .skc-btn-primary:hover:not(:disabled) {
1560
- background: var(--commerce-accent-hover);
1553
+ background: var(--commerce-accent-hover, #1d4ed8);
1561
1554
  }
1562
1555
  .skc-btn-primary:active:not(:disabled) {
1563
1556
  transform: scale(0.98);
@@ -1575,10 +1568,10 @@ var STYLE_BLOCK = `
1575
1568
  gap: 0.5rem;
1576
1569
  width: 100%;
1577
1570
  padding: 0.875rem 1.5rem;
1578
- border-radius: var(--commerce-radius-sm);
1579
- border: 2px solid var(--commerce-accent);
1571
+ border-radius: var(--commerce-radius-sm, 8px);
1572
+ border: 2px solid var(--commerce-accent, #2563eb);
1580
1573
  background: transparent;
1581
- color: var(--commerce-accent);
1574
+ color: var(--commerce-accent, #2563eb);
1582
1575
  font-size: 1rem;
1583
1576
  font-weight: 600;
1584
1577
  cursor: pointer;
@@ -1609,24 +1602,24 @@ var STYLE_BLOCK = `
1609
1602
  width: 8px;
1610
1603
  height: 8px;
1611
1604
  border-radius: 50%;
1612
- background: var(--commerce-border);
1605
+ background: var(--commerce-border, #e5e7eb);
1613
1606
  transition: background 0.2s ease, transform 0.2s ease;
1614
1607
  }
1615
1608
  .skc-step-dot.skc-active {
1616
- background: var(--commerce-accent);
1609
+ background: var(--commerce-accent, #2563eb);
1617
1610
  transform: scale(1.3);
1618
1611
  }
1619
1612
  .skc-step-dot.skc-done {
1620
- background: var(--commerce-success);
1613
+ background: var(--commerce-success, #059669);
1621
1614
  }
1622
1615
  .skc-step-connector {
1623
1616
  width: 24px;
1624
1617
  height: 2px;
1625
- background: var(--commerce-border);
1618
+ background: var(--commerce-border, #e5e7eb);
1626
1619
  transition: background 0.2s ease;
1627
1620
  }
1628
1621
  .skc-step-connector.skc-done {
1629
- background: var(--commerce-success);
1622
+ background: var(--commerce-success, #059669);
1630
1623
  }
1631
1624
  `;
1632
1625
  function loadSquareSDK(env) {
@@ -1847,11 +1840,11 @@ function VariantSelector({ variants, selected, isClothing, showInventory, onSele
1847
1840
  style: {
1848
1841
  fontSize: "0.875rem",
1849
1842
  fontWeight: 600,
1850
- color: "var(--commerce-text)"
1843
+ color: "var(--commerce-text, #111827)"
1851
1844
  },
1852
1845
  children: [
1853
1846
  label,
1854
- selected && /* @__PURE__ */ jsxs("span", { style: { fontWeight: 400, color: "var(--commerce-text-secondary)", marginLeft: 6 }, children: [
1847
+ selected && /* @__PURE__ */ jsxs("span", { style: { fontWeight: 400, color: "var(--commerce-text-secondary, #6b7280)", marginLeft: 6 }, children: [
1855
1848
  "\u2014 ",
1856
1849
  selected.options?.Size || selected.name
1857
1850
  ] })
@@ -1873,10 +1866,10 @@ function VariantSelector({ variants, selected, isClothing, showInventory, onSele
1873
1866
  style: {
1874
1867
  position: "relative",
1875
1868
  padding: "0.5rem 1rem",
1876
- borderRadius: "var(--commerce-radius-sm)",
1877
- border: isSelected ? "2px solid var(--commerce-accent)" : "1px solid var(--commerce-border)",
1869
+ borderRadius: "var(--commerce-radius-sm, 8px)",
1870
+ border: isSelected ? "2px solid var(--commerce-accent, #2563eb)" : "1px solid var(--commerce-border, #e5e7eb)",
1878
1871
  backgroundColor: isSelected ? "rgba(37,99,235,0.05)" : "white",
1879
- color: variantOutOfStock ? "var(--commerce-text-muted)" : "var(--commerce-text)",
1872
+ color: variantOutOfStock ? "var(--commerce-text-muted, #9ca3af)" : "var(--commerce-text, #111827)",
1880
1873
  fontSize: "0.875rem",
1881
1874
  fontWeight: 500,
1882
1875
  cursor: variantOutOfStock ? "not-allowed" : "pointer",
@@ -1896,7 +1889,7 @@ function VariantSelector({ variants, selected, isClothing, showInventory, onSele
1896
1889
  width: 8,
1897
1890
  height: 8,
1898
1891
  borderRadius: "50%",
1899
- backgroundColor: isLow ? "var(--commerce-warning)" : "var(--commerce-success)",
1892
+ backgroundColor: isLow ? "var(--commerce-warning, #d97706)" : "var(--commerce-success, #059669)",
1900
1893
  border: "2px solid white"
1901
1894
  },
1902
1895
  title: isLow ? `Only ${variant.inventory_count} left` : "In stock"
@@ -1918,7 +1911,7 @@ function QuantitySelector({ quantity, max, onChange }) {
1918
1911
  display: "block",
1919
1912
  fontSize: "0.875rem",
1920
1913
  fontWeight: 600,
1921
- color: "var(--commerce-text)",
1914
+ color: "var(--commerce-text, #111827)",
1922
1915
  marginBottom: "0.5rem"
1923
1916
  },
1924
1917
  children: "Quantity"
@@ -1930,8 +1923,8 @@ function QuantitySelector({ quantity, max, onChange }) {
1930
1923
  style: {
1931
1924
  display: "inline-flex",
1932
1925
  alignItems: "center",
1933
- border: "1px solid var(--commerce-border)",
1934
- borderRadius: "var(--commerce-radius-sm)",
1926
+ border: "1px solid var(--commerce-border, #e5e7eb)",
1927
+ borderRadius: "var(--commerce-radius-sm, 8px)",
1935
1928
  overflow: "hidden"
1936
1929
  },
1937
1930
  children: [
@@ -1945,14 +1938,14 @@ function QuantitySelector({ quantity, max, onChange }) {
1945
1938
  width: 40,
1946
1939
  height: 40,
1947
1940
  border: "none",
1948
- background: "var(--commerce-surface)",
1941
+ background: "var(--commerce-surface, #f9fafb)",
1949
1942
  fontSize: "1.125rem",
1950
1943
  cursor: quantity <= 1 ? "not-allowed" : "pointer",
1951
1944
  opacity: quantity <= 1 ? 0.4 : 1,
1952
1945
  display: "flex",
1953
1946
  alignItems: "center",
1954
1947
  justifyContent: "center",
1955
- color: "var(--commerce-text)"
1948
+ color: "var(--commerce-text, #111827)"
1956
1949
  },
1957
1950
  children: "-"
1958
1951
  }
@@ -1974,11 +1967,11 @@ function QuantitySelector({ quantity, max, onChange }) {
1974
1967
  height: 40,
1975
1968
  textAlign: "center",
1976
1969
  border: "none",
1977
- borderLeft: "1px solid var(--commerce-border)",
1978
- borderRight: "1px solid var(--commerce-border)",
1970
+ borderLeft: "1px solid var(--commerce-border, #e5e7eb)",
1971
+ borderRight: "1px solid var(--commerce-border, #e5e7eb)",
1979
1972
  fontSize: "0.9375rem",
1980
1973
  fontWeight: 500,
1981
- color: "var(--commerce-text)",
1974
+ color: "var(--commerce-text, #111827)",
1982
1975
  outline: "none",
1983
1976
  MozAppearance: "textfield",
1984
1977
  appearance: "textfield"
@@ -1995,14 +1988,14 @@ function QuantitySelector({ quantity, max, onChange }) {
1995
1988
  width: 40,
1996
1989
  height: 40,
1997
1990
  border: "none",
1998
- background: "var(--commerce-surface)",
1991
+ background: "var(--commerce-surface, #f9fafb)",
1999
1992
  fontSize: "1.125rem",
2000
1993
  cursor: quantity >= max ? "not-allowed" : "pointer",
2001
1994
  opacity: quantity >= max ? 0.4 : 1,
2002
1995
  display: "flex",
2003
1996
  alignItems: "center",
2004
1997
  justifyContent: "center",
2005
- color: "var(--commerce-text)"
1998
+ color: "var(--commerce-text, #111827)"
2006
1999
  },
2007
2000
  children: "+"
2008
2001
  }
@@ -2038,18 +2031,18 @@ function TrustBadges({ badges = DEFAULT_TRUST_BADGES }) {
2038
2031
  alignItems: "center",
2039
2032
  textAlign: "center",
2040
2033
  padding: "0.75rem 0.5rem",
2041
- borderRadius: "var(--commerce-radius-sm)",
2042
- background: "var(--commerce-surface)"
2034
+ borderRadius: "var(--commerce-radius-sm, 8px)",
2035
+ background: "var(--commerce-surface, #f9fafb)"
2043
2036
  },
2044
2037
  children: [
2045
- /* @__PURE__ */ jsx("span", { style: { color: "var(--commerce-text-secondary)", marginBottom: 4 }, children: Icon && /* @__PURE__ */ jsx(Icon, {}) }),
2038
+ /* @__PURE__ */ jsx("span", { style: { color: "var(--commerce-text-secondary, #6b7280)", marginBottom: 4 }, children: Icon && /* @__PURE__ */ jsx(Icon, {}) }),
2046
2039
  /* @__PURE__ */ jsx(
2047
2040
  "span",
2048
2041
  {
2049
2042
  style: {
2050
2043
  fontSize: "0.75rem",
2051
2044
  fontWeight: 600,
2052
- color: "var(--commerce-text)",
2045
+ color: "var(--commerce-text, #111827)",
2053
2046
  lineHeight: 1.3
2054
2047
  },
2055
2048
  children: badge.label
@@ -2060,7 +2053,7 @@ function TrustBadges({ badges = DEFAULT_TRUST_BADGES }) {
2060
2053
  {
2061
2054
  style: {
2062
2055
  fontSize: "0.6875rem",
2063
- color: "var(--commerce-text-muted)",
2056
+ color: "var(--commerce-text-muted, #9ca3af)",
2064
2057
  lineHeight: 1.3
2065
2058
  },
2066
2059
  children: badge.sublabel
@@ -2122,7 +2115,7 @@ function ProductTabs({
2122
2115
  "li",
2123
2116
  {
2124
2117
  style: {
2125
- color: "var(--commerce-text-secondary)",
2118
+ color: "var(--commerce-text-secondary, #6b7280)",
2126
2119
  fontSize: "0.9375rem",
2127
2120
  lineHeight: 1.6
2128
2121
  },
@@ -2147,7 +2140,7 @@ function ProductTabs({
2147
2140
  {
2148
2141
  style: {
2149
2142
  fontSize: "0.875rem",
2150
- color: "var(--commerce-text-muted)",
2143
+ color: "var(--commerce-text-muted, #9ca3af)",
2151
2144
  fontWeight: 500
2152
2145
  },
2153
2146
  children: key
@@ -2159,7 +2152,7 @@ function ProductTabs({
2159
2152
  style: {
2160
2153
  margin: 0,
2161
2154
  fontSize: "0.875rem",
2162
- color: "var(--commerce-text)"
2155
+ color: "var(--commerce-text, #111827)"
2163
2156
  },
2164
2157
  children: value
2165
2158
  }
@@ -2173,7 +2166,7 @@ function ProductTabs({
2173
2166
  id: "skc-tabpanel-description",
2174
2167
  role: "tabpanel",
2175
2168
  style: {
2176
- color: "var(--commerce-text-secondary)",
2169
+ color: "var(--commerce-text-secondary, #6b7280)",
2177
2170
  lineHeight: 1.7,
2178
2171
  fontSize: "0.9375rem"
2179
2172
  },
@@ -2192,14 +2185,14 @@ function EventInfoBlock({ product, schedule }) {
2192
2185
  style: {
2193
2186
  marginTop: "1.25rem",
2194
2187
  padding: "1rem",
2195
- borderRadius: "var(--commerce-radius-sm)",
2196
- background: "var(--commerce-surface)",
2188
+ borderRadius: "var(--commerce-radius-sm, 8px)",
2189
+ background: "var(--commerce-surface, #f9fafb)",
2197
2190
  display: "flex",
2198
2191
  flexDirection: "column",
2199
2192
  gap: "0.5rem"
2200
2193
  },
2201
2194
  children: [
2202
- schedule && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: "0.875rem", color: "var(--commerce-text-secondary)" }, children: [
2195
+ schedule && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: "0.875rem", color: "var(--commerce-text-secondary, #6b7280)" }, children: [
2203
2196
  /* @__PURE__ */ jsx(IconCalendar, {}),
2204
2197
  /* @__PURE__ */ jsxs("span", { children: [
2205
2198
  formatDate(schedule.starts_at),
@@ -2207,17 +2200,17 @@ function EventInfoBlock({ product, schedule }) {
2207
2200
  formatTime(schedule.starts_at)
2208
2201
  ] })
2209
2202
  ] }),
2210
- product.location && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: "0.875rem", color: "var(--commerce-text-secondary)" }, children: [
2203
+ product.location && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: "0.875rem", color: "var(--commerce-text-secondary, #6b7280)" }, children: [
2211
2204
  /* @__PURE__ */ jsx(IconMapPin, {}),
2212
2205
  /* @__PURE__ */ jsx("span", { children: product.location })
2213
2206
  ] }),
2214
- product.is_virtual && product.virtual_meeting_url && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: "0.875rem", color: "var(--commerce-accent)" }, children: [
2207
+ product.is_virtual && product.virtual_meeting_url && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: "0.875rem", color: "var(--commerce-accent, #2563eb)" }, children: [
2215
2208
  /* @__PURE__ */ jsx(IconExternalLink, {}),
2216
2209
  /* @__PURE__ */ jsx("span", { children: "Virtual Event" })
2217
2210
  ] }),
2218
- schedule?.capacity != null && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: "0.875rem", color: "var(--commerce-text-secondary)" }, children: [
2211
+ schedule?.capacity != null && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: "0.875rem", color: "var(--commerce-text-secondary, #6b7280)" }, children: [
2219
2212
  /* @__PURE__ */ jsx(IconUsers, {}),
2220
- /* @__PURE__ */ jsx("span", { children: soldOut ? /* @__PURE__ */ jsx("span", { style: { color: "var(--commerce-danger)", fontWeight: 600 }, children: "Sold Out" }) : schedule.spots_remaining != null && schedule.spots_remaining <= 10 ? /* @__PURE__ */ jsxs("span", { className: "skc-pulse", style: { color: "var(--commerce-warning)", fontWeight: 600 }, children: [
2213
+ /* @__PURE__ */ jsx("span", { children: soldOut ? /* @__PURE__ */ jsx("span", { style: { color: "var(--commerce-danger, #dc2626)", fontWeight: 600 }, children: "Sold Out" }) : schedule.spots_remaining != null && schedule.spots_remaining <= 10 ? /* @__PURE__ */ jsxs("span", { className: "skc-pulse", style: { color: "var(--commerce-warning, #d97706)", fontWeight: 600 }, children: [
2221
2214
  "Only ",
2222
2215
  schedule.spots_remaining,
2223
2216
  " spot",
@@ -2251,9 +2244,9 @@ function CustomerInfoStep({ customer, onChange, onNext, onBack }) {
2251
2244
  onNext();
2252
2245
  };
2253
2246
  return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, style: { display: "flex", flexDirection: "column", gap: "0.875rem" }, children: [
2254
- /* @__PURE__ */ jsx("h3", { style: { margin: 0, fontSize: "1.125rem", fontWeight: 600, color: "var(--commerce-text)" }, children: "Contact Information" }),
2247
+ /* @__PURE__ */ jsx("h3", { style: { margin: 0, fontSize: "1.125rem", fontWeight: 600, color: "var(--commerce-text, #111827)" }, children: "Contact Information" }),
2255
2248
  /* @__PURE__ */ jsxs("div", { children: [
2256
- /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary)", marginBottom: 4 }, children: "Full Name *" }),
2249
+ /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary, #6b7280)", marginBottom: 4 }, children: "Full Name *" }),
2257
2250
  /* @__PURE__ */ jsx(
2258
2251
  "input",
2259
2252
  {
@@ -2268,7 +2261,7 @@ function CustomerInfoStep({ customer, onChange, onNext, onBack }) {
2268
2261
  )
2269
2262
  ] }),
2270
2263
  /* @__PURE__ */ jsxs("div", { children: [
2271
- /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary)", marginBottom: 4 }, children: "Email Address *" }),
2264
+ /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary, #6b7280)", marginBottom: 4 }, children: "Email Address *" }),
2272
2265
  /* @__PURE__ */ jsx(
2273
2266
  "input",
2274
2267
  {
@@ -2282,7 +2275,7 @@ function CustomerInfoStep({ customer, onChange, onNext, onBack }) {
2282
2275
  )
2283
2276
  ] }),
2284
2277
  /* @__PURE__ */ jsxs("div", { children: [
2285
- /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary)", marginBottom: 4 }, children: "Phone Number" }),
2278
+ /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary, #6b7280)", marginBottom: 4 }, children: "Phone Number" }),
2286
2279
  /* @__PURE__ */ jsx(
2287
2280
  "input",
2288
2281
  {
@@ -2302,10 +2295,10 @@ function CustomerInfoStep({ customer, onChange, onNext, onBack }) {
2302
2295
  onClick: onBack,
2303
2296
  style: {
2304
2297
  padding: "0.75rem 1.25rem",
2305
- borderRadius: "var(--commerce-radius-sm)",
2306
- border: "1px solid var(--commerce-border)",
2298
+ borderRadius: "var(--commerce-radius-sm, 8px)",
2299
+ border: "1px solid var(--commerce-border, #e5e7eb)",
2307
2300
  background: "white",
2308
- color: "var(--commerce-text-secondary)",
2301
+ color: "var(--commerce-text-secondary, #6b7280)",
2309
2302
  fontSize: "0.875rem",
2310
2303
  fontWeight: 500,
2311
2304
  cursor: "pointer"
@@ -2326,9 +2319,9 @@ function ShippingAddressStep({ address, onChange, onNext, onBack, loading }) {
2326
2319
  onChange({ ...address, [field]: value });
2327
2320
  };
2328
2321
  return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, style: { display: "flex", flexDirection: "column", gap: "0.875rem" }, children: [
2329
- /* @__PURE__ */ jsx("h3", { style: { margin: 0, fontSize: "1.125rem", fontWeight: 600, color: "var(--commerce-text)" }, children: "Shipping Address" }),
2322
+ /* @__PURE__ */ jsx("h3", { style: { margin: 0, fontSize: "1.125rem", fontWeight: 600, color: "var(--commerce-text, #111827)" }, children: "Shipping Address" }),
2330
2323
  /* @__PURE__ */ jsxs("div", { children: [
2331
- /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary)", marginBottom: 4 }, children: "Street Address *" }),
2324
+ /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary, #6b7280)", marginBottom: 4 }, children: "Street Address *" }),
2332
2325
  /* @__PURE__ */ jsx(
2333
2326
  "input",
2334
2327
  {
@@ -2343,7 +2336,7 @@ function ShippingAddressStep({ address, onChange, onNext, onBack, loading }) {
2343
2336
  )
2344
2337
  ] }),
2345
2338
  /* @__PURE__ */ jsxs("div", { children: [
2346
- /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary)", marginBottom: 4 }, children: "Apt / Suite" }),
2339
+ /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary, #6b7280)", marginBottom: 4 }, children: "Apt / Suite" }),
2347
2340
  /* @__PURE__ */ jsx(
2348
2341
  "input",
2349
2342
  {
@@ -2357,7 +2350,7 @@ function ShippingAddressStep({ address, onChange, onNext, onBack, loading }) {
2357
2350
  ] }),
2358
2351
  /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }, children: [
2359
2352
  /* @__PURE__ */ jsxs("div", { children: [
2360
- /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary)", marginBottom: 4 }, children: "City *" }),
2353
+ /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary, #6b7280)", marginBottom: 4 }, children: "City *" }),
2361
2354
  /* @__PURE__ */ jsx(
2362
2355
  "input",
2363
2356
  {
@@ -2371,7 +2364,7 @@ function ShippingAddressStep({ address, onChange, onNext, onBack, loading }) {
2371
2364
  )
2372
2365
  ] }),
2373
2366
  /* @__PURE__ */ jsxs("div", { children: [
2374
- /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary)", marginBottom: 4 }, children: "State *" }),
2367
+ /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary, #6b7280)", marginBottom: 4 }, children: "State *" }),
2375
2368
  /* @__PURE__ */ jsx(
2376
2369
  "input",
2377
2370
  {
@@ -2387,7 +2380,7 @@ function ShippingAddressStep({ address, onChange, onNext, onBack, loading }) {
2387
2380
  ] }),
2388
2381
  /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }, children: [
2389
2382
  /* @__PURE__ */ jsxs("div", { children: [
2390
- /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary)", marginBottom: 4 }, children: "ZIP Code *" }),
2383
+ /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary, #6b7280)", marginBottom: 4 }, children: "ZIP Code *" }),
2391
2384
  /* @__PURE__ */ jsx(
2392
2385
  "input",
2393
2386
  {
@@ -2401,7 +2394,7 @@ function ShippingAddressStep({ address, onChange, onNext, onBack, loading }) {
2401
2394
  )
2402
2395
  ] }),
2403
2396
  /* @__PURE__ */ jsxs("div", { children: [
2404
- /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary)", marginBottom: 4 }, children: "Country" }),
2397
+ /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary, #6b7280)", marginBottom: 4 }, children: "Country" }),
2405
2398
  /* @__PURE__ */ jsx(
2406
2399
  "input",
2407
2400
  {
@@ -2422,10 +2415,10 @@ function ShippingAddressStep({ address, onChange, onNext, onBack, loading }) {
2422
2415
  onClick: onBack,
2423
2416
  style: {
2424
2417
  padding: "0.75rem 1.25rem",
2425
- borderRadius: "var(--commerce-radius-sm)",
2426
- border: "1px solid var(--commerce-border)",
2418
+ borderRadius: "var(--commerce-radius-sm, 8px)",
2419
+ border: "1px solid var(--commerce-border, #e5e7eb)",
2427
2420
  background: "white",
2428
- color: "var(--commerce-text-secondary)",
2421
+ color: "var(--commerce-text-secondary, #6b7280)",
2429
2422
  fontSize: "0.875rem",
2430
2423
  fontWeight: 500,
2431
2424
  cursor: "pointer"
@@ -2446,20 +2439,20 @@ function ShippingRatesStep({ rates, selected, onSelect, onNext, onBack, loading,
2446
2439
  style: {
2447
2440
  width: 32,
2448
2441
  height: 32,
2449
- border: "3px solid var(--commerce-border)",
2450
- borderTopColor: "var(--commerce-accent)",
2442
+ border: "3px solid var(--commerce-border, #e5e7eb)",
2443
+ borderTopColor: "var(--commerce-accent, #2563eb)",
2451
2444
  borderRadius: "50%",
2452
2445
  animation: "skc-spin 1s linear infinite",
2453
2446
  margin: "0 auto 1rem"
2454
2447
  }
2455
2448
  }
2456
2449
  ),
2457
- /* @__PURE__ */ jsx("p", { style: { color: "var(--commerce-text-secondary)", fontSize: "0.875rem", margin: 0 }, children: "Calculating shipping rates..." })
2450
+ /* @__PURE__ */ jsx("p", { style: { color: "var(--commerce-text-secondary, #6b7280)", fontSize: "0.875rem", margin: 0 }, children: "Calculating shipping rates..." })
2458
2451
  ] });
2459
2452
  }
2460
2453
  if (!rates.length) {
2461
2454
  return /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: "1.5rem 0" }, children: [
2462
- /* @__PURE__ */ jsx("p", { style: { color: "var(--commerce-text-secondary)", fontSize: "0.875rem", margin: "0 0 1rem" }, children: "No shipping rates available for this address. Please check your address and try again." }),
2455
+ /* @__PURE__ */ jsx("p", { style: { color: "var(--commerce-text-secondary, #6b7280)", fontSize: "0.875rem", margin: "0 0 1rem" }, children: "No shipping rates available for this address. Please check your address and try again." }),
2463
2456
  /* @__PURE__ */ jsx(
2464
2457
  "button",
2465
2458
  {
@@ -2467,10 +2460,10 @@ function ShippingRatesStep({ rates, selected, onSelect, onNext, onBack, loading,
2467
2460
  onClick: onBack,
2468
2461
  style: {
2469
2462
  padding: "0.75rem 1.5rem",
2470
- borderRadius: "var(--commerce-radius-sm)",
2471
- border: "1px solid var(--commerce-border)",
2463
+ borderRadius: "var(--commerce-radius-sm, 8px)",
2464
+ border: "1px solid var(--commerce-border, #e5e7eb)",
2472
2465
  background: "white",
2473
- color: "var(--commerce-text-secondary)",
2466
+ color: "var(--commerce-text-secondary, #6b7280)",
2474
2467
  fontSize: "0.875rem",
2475
2468
  fontWeight: 500,
2476
2469
  cursor: "pointer"
@@ -2481,7 +2474,7 @@ function ShippingRatesStep({ rates, selected, onSelect, onNext, onBack, loading,
2481
2474
  ] });
2482
2475
  }
2483
2476
  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.875rem" }, children: [
2484
- /* @__PURE__ */ jsx("h3", { style: { margin: 0, fontSize: "1.125rem", fontWeight: 600, color: "var(--commerce-text)" }, children: "Shipping Method" }),
2477
+ /* @__PURE__ */ jsx("h3", { style: { margin: 0, fontSize: "1.125rem", fontWeight: 600, color: "var(--commerce-text, #111827)" }, children: "Shipping Method" }),
2485
2478
  /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, role: "radiogroup", "aria-label": "Shipping options", children: rates.map((rate, idx) => {
2486
2479
  const isSelected = selected?.objectId === rate.objectId || selected === null && idx === 0;
2487
2480
  return /* @__PURE__ */ jsxs(
@@ -2495,8 +2488,8 @@ function ShippingRatesStep({ rates, selected, onSelect, onNext, onBack, loading,
2495
2488
  alignItems: "center",
2496
2489
  justifyContent: "space-between",
2497
2490
  padding: "0.875rem 1rem",
2498
- borderRadius: "var(--commerce-radius-sm)",
2499
- border: isSelected ? "2px solid var(--commerce-accent)" : "1px solid var(--commerce-border)",
2491
+ borderRadius: "var(--commerce-radius-sm, 8px)",
2492
+ border: isSelected ? "2px solid var(--commerce-accent, #2563eb)" : "1px solid var(--commerce-border, #e5e7eb)",
2500
2493
  background: isSelected ? "rgba(37,99,235,0.03)" : "white",
2501
2494
  cursor: "pointer",
2502
2495
  textAlign: "left",
@@ -2504,14 +2497,14 @@ function ShippingRatesStep({ rates, selected, onSelect, onNext, onBack, loading,
2504
2497
  },
2505
2498
  children: [
2506
2499
  /* @__PURE__ */ jsxs("div", { children: [
2507
- /* @__PURE__ */ jsxs("div", { style: { fontSize: "0.875rem", fontWeight: 600, color: "var(--commerce-text)" }, children: [
2500
+ /* @__PURE__ */ jsxs("div", { style: { fontSize: "0.875rem", fontWeight: 600, color: "var(--commerce-text, #111827)" }, children: [
2508
2501
  rate.carrier,
2509
2502
  " \u2014 ",
2510
2503
  rate.service
2511
2504
  ] }),
2512
- rate.estimatedDays != null && /* @__PURE__ */ jsx("div", { style: { fontSize: "0.8125rem", color: "var(--commerce-text-muted)", marginTop: 2 }, children: rate.estimatedDays === 1 ? "1 business day" : `${rate.estimatedDays} business days` })
2505
+ rate.estimatedDays != null && /* @__PURE__ */ jsx("div", { style: { fontSize: "0.8125rem", color: "var(--commerce-text-muted, #9ca3af)", marginTop: 2 }, children: rate.estimatedDays === 1 ? "1 business day" : `${rate.estimatedDays} business days` })
2513
2506
  ] }),
2514
- /* @__PURE__ */ jsx("span", { style: { fontSize: "0.9375rem", fontWeight: 600, color: "var(--commerce-text)" }, children: formatPrice(parseFloat(rate.amount), rate.currency || currency) })
2507
+ /* @__PURE__ */ jsx("span", { style: { fontSize: "0.9375rem", fontWeight: 600, color: "var(--commerce-text, #111827)" }, children: formatPrice(parseFloat(rate.amount), rate.currency || currency) })
2515
2508
  ]
2516
2509
  },
2517
2510
  rate.objectId || idx
@@ -2525,10 +2518,10 @@ function ShippingRatesStep({ rates, selected, onSelect, onNext, onBack, loading,
2525
2518
  onClick: onBack,
2526
2519
  style: {
2527
2520
  padding: "0.75rem 1.25rem",
2528
- borderRadius: "var(--commerce-radius-sm)",
2529
- border: "1px solid var(--commerce-border)",
2521
+ borderRadius: "var(--commerce-radius-sm, 8px)",
2522
+ border: "1px solid var(--commerce-border, #e5e7eb)",
2530
2523
  background: "white",
2531
- color: "var(--commerce-text-secondary)",
2524
+ color: "var(--commerce-text-secondary, #6b7280)",
2532
2525
  fontSize: "0.875rem",
2533
2526
  fontWeight: 500,
2534
2527
  cursor: "pointer"
@@ -2751,21 +2744,21 @@ function PaymentStep({
2751
2744
  }
2752
2745
  };
2753
2746
  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: [
2754
- /* @__PURE__ */ jsx("h3", { style: { margin: 0, fontSize: "1.125rem", fontWeight: 600, color: "var(--commerce-text)" }, children: "Payment" }),
2747
+ /* @__PURE__ */ jsx("h3", { style: { margin: 0, fontSize: "1.125rem", fontWeight: 600, color: "var(--commerce-text, #111827)" }, children: "Payment" }),
2755
2748
  /* @__PURE__ */ jsxs(
2756
2749
  "div",
2757
2750
  {
2758
2751
  style: {
2759
2752
  padding: "1rem",
2760
- borderRadius: "var(--commerce-radius-sm)",
2761
- background: "var(--commerce-surface)",
2753
+ borderRadius: "var(--commerce-radius-sm, 8px)",
2754
+ background: "var(--commerce-surface, #f9fafb)",
2762
2755
  display: "flex",
2763
2756
  flexDirection: "column",
2764
2757
  gap: "0.375rem",
2765
2758
  fontSize: "0.875rem"
2766
2759
  },
2767
2760
  children: [
2768
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", color: "var(--commerce-text-secondary)" }, children: [
2761
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", color: "var(--commerce-text-secondary, #6b7280)" }, children: [
2769
2762
  /* @__PURE__ */ jsxs("span", { children: [
2770
2763
  product.name,
2771
2764
  " ",
@@ -2775,7 +2768,7 @@ function PaymentStep({
2775
2768
  ] }),
2776
2769
  /* @__PURE__ */ jsx("span", { children: formatPrice(subtotal, product.currency) })
2777
2770
  ] }),
2778
- shippingRate && /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", color: "var(--commerce-text-secondary)" }, children: [
2771
+ shippingRate && /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", color: "var(--commerce-text-secondary, #6b7280)" }, children: [
2779
2772
  /* @__PURE__ */ jsxs("span", { children: [
2780
2773
  "Shipping (",
2781
2774
  shippingRate.carrier,
@@ -2792,10 +2785,10 @@ function PaymentStep({
2792
2785
  display: "flex",
2793
2786
  justifyContent: "space-between",
2794
2787
  fontWeight: 700,
2795
- color: "var(--commerce-text)",
2788
+ color: "var(--commerce-text, #111827)",
2796
2789
  fontSize: "1rem",
2797
2790
  paddingTop: "0.5rem",
2798
- borderTop: "1px solid var(--commerce-border)",
2791
+ borderTop: "1px solid var(--commerce-border, #e5e7eb)",
2799
2792
  marginTop: "0.25rem"
2800
2793
  },
2801
2794
  children: [
@@ -2815,7 +2808,7 @@ function PaymentStep({
2815
2808
  display: "block",
2816
2809
  fontSize: "0.8125rem",
2817
2810
  fontWeight: 500,
2818
- color: "var(--commerce-text-secondary)",
2811
+ color: "var(--commerce-text-secondary, #6b7280)",
2819
2812
  marginBottom: 6
2820
2813
  },
2821
2814
  children: "Card Details"
@@ -2828,14 +2821,14 @@ function PaymentStep({
2828
2821
  ref: cardContainerRef,
2829
2822
  style: {
2830
2823
  minHeight: processor === "stripe" ? 80 : 44,
2831
- border: "1px solid var(--commerce-border)",
2832
- borderRadius: "var(--commerce-radius-sm)",
2824
+ border: "1px solid var(--commerce-border, #e5e7eb)",
2825
+ borderRadius: "var(--commerce-radius-sm, 8px)",
2833
2826
  padding: processor === "stripe" ? "0.75rem" : "0.5rem 0.75rem",
2834
2827
  background: "white"
2835
2828
  }
2836
2829
  }
2837
2830
  ),
2838
- !cardReady && !error && /* @__PURE__ */ jsx("p", { style: { fontSize: "0.75rem", color: "var(--commerce-text-muted)", marginTop: 4, marginBottom: 0 }, children: "Loading secure payment form..." })
2831
+ !cardReady && !error && /* @__PURE__ */ jsx("p", { style: { fontSize: "0.75rem", color: "var(--commerce-text-muted, #9ca3af)", marginTop: 4, marginBottom: 0 }, children: "Loading secure payment form..." })
2839
2832
  ] }),
2840
2833
  error && /* @__PURE__ */ jsxs(
2841
2834
  "div",
@@ -2847,8 +2840,8 @@ function PaymentStep({
2847
2840
  padding: "0.75rem",
2848
2841
  background: "#fef2f2",
2849
2842
  border: "1px solid #fecaca",
2850
- borderRadius: "var(--commerce-radius-sm)",
2851
- color: "var(--commerce-danger)",
2843
+ borderRadius: "var(--commerce-radius-sm, 8px)",
2844
+ color: "var(--commerce-danger, #dc2626)",
2852
2845
  fontSize: "0.875rem"
2853
2846
  },
2854
2847
  children: [
@@ -2866,10 +2859,10 @@ function PaymentStep({
2866
2859
  disabled: submitting,
2867
2860
  style: {
2868
2861
  padding: "0.75rem 1.25rem",
2869
- borderRadius: "var(--commerce-radius-sm)",
2870
- border: "1px solid var(--commerce-border)",
2862
+ borderRadius: "var(--commerce-radius-sm, 8px)",
2863
+ border: "1px solid var(--commerce-border, #e5e7eb)",
2871
2864
  background: "white",
2872
- color: "var(--commerce-text-secondary)",
2865
+ color: "var(--commerce-text-secondary, #6b7280)",
2873
2866
  fontSize: "0.875rem",
2874
2867
  fontWeight: 500,
2875
2868
  cursor: submitting ? "not-allowed" : "pointer",
@@ -2916,7 +2909,7 @@ function PaymentStep({
2916
2909
  style: {
2917
2910
  textAlign: "center",
2918
2911
  fontSize: "0.6875rem",
2919
- color: "var(--commerce-text-muted)",
2912
+ color: "var(--commerce-text-muted, #9ca3af)",
2920
2913
  margin: "0.25rem 0 0"
2921
2914
  },
2922
2915
  children: [
@@ -2957,7 +2950,7 @@ function SuccessStep({ result, product, onClose }) {
2957
2950
  height: "32",
2958
2951
  viewBox: "0 0 24 24",
2959
2952
  fill: "none",
2960
- stroke: "var(--commerce-success)",
2953
+ stroke: "var(--commerce-success, #059669)",
2961
2954
  strokeWidth: "2.5",
2962
2955
  strokeLinecap: "round",
2963
2956
  strokeLinejoin: "round",
@@ -2979,21 +2972,21 @@ function SuccessStep({ result, product, onClose }) {
2979
2972
  margin: "0 0 0.5rem",
2980
2973
  fontSize: "1.375rem",
2981
2974
  fontWeight: 700,
2982
- color: "var(--commerce-success)"
2975
+ color: "var(--commerce-success, #059669)"
2983
2976
  },
2984
2977
  children: "Order Confirmed!"
2985
2978
  }
2986
2979
  ),
2987
- /* @__PURE__ */ jsxs("p", { style: { color: "var(--commerce-text-secondary)", margin: "0 0 0.5rem", fontSize: "0.9375rem" }, children: [
2980
+ /* @__PURE__ */ jsxs("p", { style: { color: "var(--commerce-text-secondary, #6b7280)", margin: "0 0 0.5rem", fontSize: "0.9375rem" }, children: [
2988
2981
  "Thank you for your purchase of ",
2989
2982
  product.name,
2990
2983
  "."
2991
2984
  ] }),
2992
- result.confirmation_number && /* @__PURE__ */ jsxs("p", { style: { color: "var(--commerce-text-muted)", margin: "0 0 1rem", fontSize: "0.8125rem" }, children: [
2985
+ result.confirmation_number && /* @__PURE__ */ jsxs("p", { style: { color: "var(--commerce-text-muted, #9ca3af)", margin: "0 0 1rem", fontSize: "0.8125rem" }, children: [
2993
2986
  "Confirmation: ",
2994
- /* @__PURE__ */ jsx("strong", { style: { color: "var(--commerce-text)" }, children: result.confirmation_number })
2987
+ /* @__PURE__ */ jsx("strong", { style: { color: "var(--commerce-text, #111827)" }, children: result.confirmation_number })
2995
2988
  ] }),
2996
- /* @__PURE__ */ jsx("p", { style: { color: "var(--commerce-text-muted)", margin: "0 0 1.5rem", fontSize: "0.875rem" }, children: "A confirmation email has been sent to your inbox." }),
2989
+ /* @__PURE__ */ jsx("p", { style: { color: "var(--commerce-text-muted, #9ca3af)", margin: "0 0 1.5rem", fontSize: "0.875rem" }, children: "A confirmation email has been sent to your inbox." }),
2997
2990
  /* @__PURE__ */ jsx("button", { className: "skc-btn-primary", onClick: onClose, style: { maxWidth: 240 }, children: "Done" })
2998
2991
  ]
2999
2992
  }
@@ -3122,6 +3115,34 @@ function ProductDetail({
3122
3115
  ...product.variants?.map((v) => v.image_url).filter(Boolean) || []
3123
3116
  ].filter(Boolean);
3124
3117
  }, [product]);
3118
+ const currentPrice = product ? selectedVariant?.price ?? product.price ?? 0 : 0;
3119
+ const compareAtPrice = product?.compare_at_price;
3120
+ const hasDiscount = compareAtPrice != null && compareAtPrice > currentPrice;
3121
+ const discountPercent = hasDiscount ? Math.round((compareAtPrice - currentPrice) / compareAtPrice * 100) : 0;
3122
+ const inventoryCount = selectedVariant?.inventory_count ?? product?.inventory_count;
3123
+ const isOutOfStock = !!product?.track_inventory && inventoryCount != null && inventoryCount <= 0;
3124
+ const isLowStock = !!product?.track_inventory && inventoryCount != null && inventoryCount > 0 && inventoryCount <= 5;
3125
+ const needsVariantSelection = product ? (product.is_clothing || (product.variants?.length ?? 0) > 1) && !selectedVariant : false;
3126
+ const hasExternalUrl = !!product?.external_url;
3127
+ const isEvent = product?.type === "event" || product?.type === "class";
3128
+ const isService = product?.type === "service";
3129
+ const isFree = !currentPrice || currentPrice === 0;
3130
+ const needsShipping = !!processorConfig?.shipping_enabled && product?.type === "product";
3131
+ const schedule = product?.schedules?.[0] || product?.next_schedule;
3132
+ const checkoutSteps = useMemo(() => {
3133
+ const steps = ["customer-info"];
3134
+ if (needsShipping) steps.push("shipping", "rates");
3135
+ if (!isFree) steps.push("payment");
3136
+ return steps;
3137
+ }, [needsShipping, isFree]);
3138
+ const ctaLabel = useMemo(() => {
3139
+ if (isOutOfStock) return "Out of Stock";
3140
+ if (needsVariantSelection) return product?.is_clothing ? "Select Size" : "Select Option";
3141
+ if (hasExternalUrl) return product?.type === "event" ? "Get Tickets" : "Learn More";
3142
+ if (isEvent) return isFree ? "Register Free" : "Get Tickets";
3143
+ if (isService) return "Book Now";
3144
+ return isFree ? "Get It Free" : "Buy Now";
3145
+ }, [isOutOfStock, needsVariantSelection, hasExternalUrl, isEvent, isService, isFree, product?.is_clothing, product?.type]);
3125
3146
  if (!product) {
3126
3147
  if (loading) {
3127
3148
  return /* @__PURE__ */ jsxs("div", { className: `skc-detail ${className}`, style: customStyle, children: [
@@ -3132,8 +3153,8 @@ function ProductDetail({
3132
3153
  style: {
3133
3154
  width: 48,
3134
3155
  height: 48,
3135
- border: "3px solid var(--commerce-border)",
3136
- borderTopColor: "var(--commerce-accent)",
3156
+ border: "3px solid var(--commerce-border, #e5e7eb)",
3157
+ borderTopColor: "var(--commerce-accent, #2563eb)",
3137
3158
  borderRadius: "50%",
3138
3159
  animation: "skc-spin 1s linear infinite"
3139
3160
  }
@@ -3143,36 +3164,12 @@ function ProductDetail({
3143
3164
  }
3144
3165
  return /* @__PURE__ */ jsxs("div", { className: `skc-detail ${className}`, style: customStyle, children: [
3145
3166
  /* @__PURE__ */ jsx("style", { children: STYLE_BLOCK }),
3146
- /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: "4rem 2rem", color: "var(--commerce-text-secondary)" }, children: [
3147
- /* @__PURE__ */ jsx("h2", { style: { margin: 0, fontSize: "1.5rem", color: "var(--commerce-text)" }, children: "Product Not Found" }),
3167
+ /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: "4rem 2rem", color: "var(--commerce-text-secondary, #6b7280)" }, children: [
3168
+ /* @__PURE__ */ jsx("h2", { style: { margin: 0, fontSize: "1.5rem", color: "var(--commerce-text, #111827)" }, children: "Product Not Found" }),
3148
3169
  /* @__PURE__ */ jsx("p", { style: { marginTop: "0.5rem" }, children: "The product you are looking for does not exist or has been removed." })
3149
3170
  ] })
3150
3171
  ] });
3151
3172
  }
3152
- const currentPrice = selectedVariant?.price ?? product.price ?? 0;
3153
- const compareAtPrice = product.compare_at_price;
3154
- const hasDiscount = compareAtPrice != null && compareAtPrice > currentPrice;
3155
- const discountPercent = hasDiscount ? Math.round((compareAtPrice - currentPrice) / compareAtPrice * 100) : 0;
3156
- const inventoryCount = selectedVariant?.inventory_count ?? product.inventory_count;
3157
- const isOutOfStock = product.track_inventory && inventoryCount != null && inventoryCount <= 0;
3158
- const isLowStock = product.track_inventory && inventoryCount != null && inventoryCount > 0 && inventoryCount <= 5;
3159
- const needsVariantSelection = (product.is_clothing || (product.variants?.length ?? 0) > 1) && !selectedVariant;
3160
- const isEvent = product.type === "event";
3161
- const isService = product.type === "service";
3162
- const hasExternalUrl = !!product.external_url;
3163
- const isFree = !product.price || product.price === 0;
3164
- const needsShipping = !!processorConfig?.shipping_enabled && product.type === "product";
3165
- const schedule = product.schedules?.[0] || product.next_schedule;
3166
- const checkoutSteps = useMemo(() => {
3167
- const steps = ["customer-info"];
3168
- if (needsShipping) {
3169
- steps.push("shipping", "rates");
3170
- }
3171
- if (!isFree) {
3172
- steps.push("payment");
3173
- }
3174
- return steps;
3175
- }, [needsShipping, isFree]);
3176
3173
  const handleVariantChange = (variant) => {
3177
3174
  setSelectedVariant(variant);
3178
3175
  if (variant.image_url) {
@@ -3317,14 +3314,6 @@ function ProductDetail({
3317
3314
  setCheckoutResult(null);
3318
3315
  }
3319
3316
  };
3320
- const ctaLabel = useMemo(() => {
3321
- if (isOutOfStock) return "Out of Stock";
3322
- if (needsVariantSelection) return product.is_clothing ? "Select Size" : "Select Option";
3323
- if (hasExternalUrl) return product.type === "event" ? "Get Tickets" : "Learn More";
3324
- if (isEvent) return isFree ? "Register Free" : "Get Tickets";
3325
- if (isService) return "Book Now";
3326
- return isFree ? "Get It Free" : "Buy Now";
3327
- }, [isOutOfStock, needsVariantSelection, hasExternalUrl, isEvent, isService, isFree, product.is_clothing]);
3328
3317
  return /* @__PURE__ */ jsxs("div", { className: `skc-detail ${className}`, style: customStyle, children: [
3329
3318
  /* @__PURE__ */ jsx("style", { children: STYLE_BLOCK }),
3330
3319
  /* @__PURE__ */ jsxs("div", { className: `skc-detail-layout${layout === "stacked" ? " skc-stacked" : ""}`, children: [
@@ -3344,7 +3333,7 @@ function ProductDetail({
3344
3333
  style: {
3345
3334
  fontSize: "0.75rem",
3346
3335
  fontWeight: 600,
3347
- color: "var(--commerce-accent)",
3336
+ color: "var(--commerce-accent, #2563eb)",
3348
3337
  textTransform: "uppercase",
3349
3338
  letterSpacing: "0.05em",
3350
3339
  marginBottom: "0.375rem"
@@ -3359,7 +3348,7 @@ function ProductDetail({
3359
3348
  margin: 0,
3360
3349
  fontSize: "1.875rem",
3361
3350
  fontWeight: 700,
3362
- color: "var(--commerce-text)",
3351
+ color: "var(--commerce-text, #111827)",
3363
3352
  lineHeight: 1.2
3364
3353
  },
3365
3354
  children: product.name
@@ -3372,7 +3361,7 @@ function ProductDetail({
3372
3361
  marginTop: "0.625rem",
3373
3362
  marginBottom: 0,
3374
3363
  fontSize: "1rem",
3375
- color: "var(--commerce-text-secondary)",
3364
+ color: "var(--commerce-text-secondary, #6b7280)",
3376
3365
  lineHeight: 1.6
3377
3366
  },
3378
3367
  children: product.short_description
@@ -3395,7 +3384,7 @@ function ProductDetail({
3395
3384
  style: {
3396
3385
  fontSize: "1.75rem",
3397
3386
  fontWeight: 700,
3398
- color: hasDiscount ? "var(--commerce-danger)" : "var(--commerce-text)"
3387
+ color: hasDiscount ? "var(--commerce-danger, #dc2626)" : "var(--commerce-text, #111827)"
3399
3388
  },
3400
3389
  children: formatPrice(currentPrice, product.currency)
3401
3390
  }
@@ -3406,7 +3395,7 @@ function ProductDetail({
3406
3395
  {
3407
3396
  style: {
3408
3397
  fontSize: "1.125rem",
3409
- color: "var(--commerce-text-muted)",
3398
+ color: "var(--commerce-text-muted, #9ca3af)",
3410
3399
  textDecoration: "line-through"
3411
3400
  },
3412
3401
  children: formatPrice(compareAtPrice, product.currency)
@@ -3418,8 +3407,8 @@ function ProductDetail({
3418
3407
  style: {
3419
3408
  fontSize: "0.75rem",
3420
3409
  fontWeight: 700,
3421
- color: "var(--commerce-accent-text)",
3422
- background: "var(--commerce-danger)",
3410
+ color: "var(--commerce-accent-text, #ffffff)",
3411
+ background: "var(--commerce-danger, #dc2626)",
3423
3412
  padding: "2px 8px",
3424
3413
  borderRadius: 4
3425
3414
  },
@@ -3431,7 +3420,7 @@ function ProductDetail({
3431
3420
  }
3432
3421
  )
3433
3422
  ] }),
3434
- product.billing_period && /* @__PURE__ */ jsxs("span", { style: { fontSize: "0.875rem", color: "var(--commerce-text-muted)" }, children: [
3423
+ product.billing_period && /* @__PURE__ */ jsxs("span", { style: { fontSize: "0.875rem", color: "var(--commerce-text-muted, #9ca3af)" }, children: [
3435
3424
  "/ ",
3436
3425
  product.billing_period
3437
3426
  ] })
@@ -3444,7 +3433,7 @@ function ProductDetail({
3444
3433
  style: {
3445
3434
  fontSize: "0.8125rem",
3446
3435
  fontWeight: 600,
3447
- color: "var(--commerce-danger)",
3436
+ color: "var(--commerce-danger, #dc2626)",
3448
3437
  display: "flex",
3449
3438
  alignItems: "center",
3450
3439
  gap: 4
@@ -3461,7 +3450,7 @@ function ProductDetail({
3461
3450
  style: {
3462
3451
  fontSize: "0.8125rem",
3463
3452
  fontWeight: 600,
3464
- color: "var(--commerce-warning)",
3453
+ color: "var(--commerce-warning, #d97706)",
3465
3454
  display: "flex",
3466
3455
  alignItems: "center",
3467
3456
  gap: 4
@@ -3479,7 +3468,7 @@ function ProductDetail({
3479
3468
  style: {
3480
3469
  fontSize: "0.8125rem",
3481
3470
  fontWeight: 500,
3482
- color: "var(--commerce-success)",
3471
+ color: "var(--commerce-success, #059669)",
3483
3472
  display: "flex",
3484
3473
  alignItems: "center",
3485
3474
  gap: 4
@@ -3549,8 +3538,8 @@ function ProductDetail({
3549
3538
  padding: "0.75rem",
3550
3539
  background: "#fef2f2",
3551
3540
  border: "1px solid #fecaca",
3552
- borderRadius: "var(--commerce-radius-sm)",
3553
- color: "var(--commerce-danger)",
3541
+ borderRadius: "var(--commerce-radius-sm, 8px)",
3542
+ color: "var(--commerce-danger, #dc2626)",
3554
3543
  fontSize: "0.875rem",
3555
3544
  display: "flex",
3556
3545
  alignItems: "flex-start",
@@ -3578,8 +3567,8 @@ function ProductDetail({
3578
3567
  ] }),
3579
3568
  showStickyBar && checkoutState === "browsing" && !isOutOfStock && !needsVariantSelection && /* @__PURE__ */ jsxs("div", { className: "skc-sticky-bar", children: [
3580
3569
  /* @__PURE__ */ jsxs("div", { children: [
3581
- /* @__PURE__ */ jsx("div", { style: { fontWeight: 600, fontSize: "0.875rem", color: "var(--commerce-text)", lineHeight: 1.2 }, children: product.name }),
3582
- product.price_is_public && currentPrice != null && /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: "1rem", color: hasDiscount ? "var(--commerce-danger)" : "var(--commerce-text)" }, children: formatPrice(currentPrice, product.currency) })
3570
+ /* @__PURE__ */ jsx("div", { style: { fontWeight: 600, fontSize: "0.875rem", color: "var(--commerce-text, #111827)", lineHeight: 1.2 }, children: product.name }),
3571
+ product.price_is_public && currentPrice != null && /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: "1rem", color: hasDiscount ? "var(--commerce-danger, #dc2626)" : "var(--commerce-text, #111827)" }, children: formatPrice(currentPrice, product.currency) })
3583
3572
  ] }),
3584
3573
  /* @__PURE__ */ jsx(
3585
3574
  "button",
@@ -3622,13 +3611,13 @@ function ProductDetail({
3622
3611
  height: 32,
3623
3612
  borderRadius: "50%",
3624
3613
  border: "none",
3625
- background: "var(--commerce-surface)",
3614
+ background: "var(--commerce-surface, #f9fafb)",
3626
3615
  cursor: "pointer",
3627
3616
  display: "flex",
3628
3617
  alignItems: "center",
3629
3618
  justifyContent: "center",
3630
3619
  zIndex: 10,
3631
- color: "var(--commerce-text-secondary)"
3620
+ color: "var(--commerce-text-secondary, #6b7280)"
3632
3621
  },
3633
3622
  children: /* @__PURE__ */ jsx(IconX, {})
3634
3623
  }
@@ -3642,15 +3631,15 @@ function ProductDetail({
3642
3631
  style: {
3643
3632
  width: 48,
3644
3633
  height: 48,
3645
- border: "3px solid var(--commerce-border)",
3646
- borderTopColor: "var(--commerce-accent)",
3634
+ border: "3px solid var(--commerce-border, #e5e7eb)",
3635
+ borderTopColor: "var(--commerce-accent, #2563eb)",
3647
3636
  borderRadius: "50%",
3648
3637
  animation: "skc-spin 0.8s linear infinite",
3649
3638
  margin: "0 auto 1.5rem"
3650
3639
  }
3651
3640
  }
3652
3641
  ),
3653
- /* @__PURE__ */ jsx("p", { style: { color: "var(--commerce-text-secondary)", fontSize: "0.9375rem", margin: 0 }, children: "Processing your order..." })
3642
+ /* @__PURE__ */ jsx("p", { style: { color: "var(--commerce-text-secondary, #6b7280)", fontSize: "0.9375rem", margin: 0 }, children: "Processing your order..." })
3654
3643
  ] }),
3655
3644
  checkoutState === "success" && checkoutResult && /* @__PURE__ */ jsx(SuccessStep, { result: checkoutResult, product, onClose: handleCloseCheckout }),
3656
3645
  checkoutState === "customer-info" && /* @__PURE__ */ jsx(
@@ -3714,8 +3703,8 @@ function ProductDetail({
3714
3703
  padding: "0.75rem",
3715
3704
  background: "#fef2f2",
3716
3705
  border: "1px solid #fecaca",
3717
- borderRadius: "var(--commerce-radius-sm)",
3718
- color: "var(--commerce-danger)",
3706
+ borderRadius: "var(--commerce-radius-sm, 8px)",
3707
+ color: "var(--commerce-danger, #dc2626)",
3719
3708
  fontSize: "0.875rem",
3720
3709
  display: "flex",
3721
3710
  alignItems: "flex-start",
@@ -6555,5 +6544,5 @@ function getApiKey2() {
6555
6544
  }
6556
6545
 
6557
6546
  export { CalendarView, CheckoutForm, EventCalendar, EventEmbed, EventModal, EventTile, EventsWidget, OfferingCard, OfferingList, ProductDetail, ProductEmbed, ProductGrid, ProductPage, RegistrationForm, SizeChart, UpcomingEvents, createCheckoutSession, createPaymentIntent, fetchActiveProcessor, fetchCategories, fetchLatestOffering, fetchNextEvent, fetchOffering, fetchOfferings, fetchProcessorConfig, fetchProductBySlug, fetchProducts, fetchProductsPublic, fetchServices, fetchShippingRates, fetchUpcomingEvents, formatDate, formatDateRange, formatDateTime, formatPrice, formatTime, getOfferingUrl, getRelativeTimeUntil, getSpotsRemaining, isEventSoldOut, registerForEvent, useEventModal, validateAddress };
6558
- //# sourceMappingURL=chunk-VE2GYLFG.mjs.map
6559
- //# sourceMappingURL=chunk-VE2GYLFG.mjs.map
6547
+ //# sourceMappingURL=chunk-BUJFVIBQ.mjs.map
6548
+ //# sourceMappingURL=chunk-BUJFVIBQ.mjs.map