medusa-ui-common 2.3.0 → 3.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "medusa-ui-common",
-  "version": "2.3.0",
+  "version": "3.0.1",
   "description": "Shared storefront UI primitives.",
   "type": "module",
   "license": "MIT",
@@ -26,7 +26,7 @@
     "medusa-storefront-data": "^2.0.0",
     "medusa-storefront-hooks": "^1.0.0",
     "medusa-wishlist-logic": "^2.0.0",
-    "medusa-storefront-theme-base": "^2.0.0",
+    "medusa-storefront-theme-base": "^3.0.0",
     "next": ">=14.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
@@ -48,21 +48,6 @@
       "import": "./src/common/*",
       "default": "./src/common/*"
     },
-    "./providers": {
-      "types": "./src/storefront-providers.tsx",
-      "import": "./src/storefront-providers.tsx",
-      "default": "./src/storefront-providers.tsx"
-    },
-    "./context/wishlist-context": {
-      "types": "./src/context/wishlist-context.tsx",
-      "import": "./src/context/wishlist-context.tsx",
-      "default": "./src/context/wishlist-context.tsx"
-    },
-    "./context/modal-context": {
-      "types": "./src/context/modal-context.tsx",
-      "import": "./src/context/modal-context.tsx",
-      "default": "./src/context/modal-context.tsx"
-    },
     "./context/*": {
       "types": "./src/context/*",
       "import": "./src/context/*",
@@ -97,17 +82,17 @@
     }
   },
   "devDependencies": {
-    "next": "^15.0.0",
-    "medusa-storefront-analytics": "workspace:*",
-    "medusa-storefront-core": "workspace:*",
-    "medusa-storefront-data": "workspace:*",
-    "medusa-storefront-theme-base": "workspace:*",
     "@headlessui/react": "^2.2.0",
     "@medusajs/icons": "^2.0.0",
     "@medusajs/ui": "^4.0.0",
     "@types/react": "18.3.18",
     "@types/react-dom": "18.3.5",
     "typescript": "^5.6.0",
+    "next": "^15.0.0",
+    "medusa-storefront-analytics": "1.5.1",
+    "medusa-storefront-core": "1.2.5",
+    "medusa-storefront-data": "2.5.9",
+    "medusa-storefront-theme-base": "3.0.1",
     "color": "^5.0.3",
     "react-razorpay": "^3.0.1"
   }

package/src/common/components/breadcrumb/index.tsx

@@ -1,43 +1,2 @@
-import { HttpTypes } from "@medusajs/types"
-import LocalizedClientLink from "../localized-client-link"
-
-type BreadcrumbProps = {
-  product: HttpTypes.StoreProduct
-}
-
-export default function Breadcrumb({ product }: BreadcrumbProps) {
-  const primaryCategory = product.categories?.[0]
-
-  return (
-    <nav className="text-xs sm:text-sm text-[var(--sf-color-text)] mb-3 sm:mb-4 overflow-x-auto font-medium">
-      <div className="flex items-center whitespace-nowrap">
-        <LocalizedClientLink href="/" className="hover:text-[var(--sf-color-text)] transition-colors">
-          Home
-        </LocalizedClientLink>
-        <span className="mx-2">/</span>
-        <LocalizedClientLink href="/store" className="hover:text-[var(--sf-color-text)] transition-colors">
-          Shop
-        </LocalizedClientLink>
-        {primaryCategory && (
-          <>
-            <span className="mx-2">/</span>
-            <LocalizedClientLink
-              href={`/store?category=${primaryCategory.id}`}
-              className="hover:text-[var(--sf-color-text)] transition-colors"
-            >
-              {primaryCategory.name}
-            </LocalizedClientLink>
-          </>
-        )}
-        <span className="mx-2">/</span>
-        <span className="text-[var(--sf-color-text)] truncate max-w-[150px] sm:max-w-[300px] md:max-w-[400px] inline-block align-bottom" title={product.title ?? ""}>
-          {product.title}
-        </span>
-      </div>
-    </nav>
-  )
-}
-
-
-
-
+/** @deprecated Import from `medusa-ui-product/products/components/breadcrumb` */
+export { default } from "medusa-ui-product/products/components/breadcrumb"

package/src/common/components/cart-totals/index.tsx

@@ -12,6 +12,12 @@ import { useSiteCompany } from "medusa-storefront-core"
 import { useButtonClassName } from "../../../context/button-theme-context"
 import { ThemedButton } from "../themed-button"
 
+type CartTotalsPriceSummaryCopy = {
+  title: string
+  itemSingular: string
+  itemPlural: string
+}
+
 type CartTotalsProps = {
   totals: {
     total?: number | null
@@ -25,9 +31,16 @@ type CartTotalsProps = {
   items?: HttpTypes.StoreCartLineItem[]
   checkoutStep?: string
   customer?: HttpTypes.StoreCustomer | null
+  priceSummaryCopy?: CartTotalsPriceSummaryCopy
 }
 
-const CartTotals: React.FC<CartTotalsProps> = ({ totals, items = [], checkoutStep, customer }) => {
+const CartTotals: React.FC<CartTotalsProps> = ({
+  totals,
+  items = [],
+  checkoutStep,
+  customer,
+  priceSummaryCopy,
+}) => {
   const company = useSiteCompany()
   const primaryBtn = useButtonClassName("primary", { size: "lg", className: "w-full" })
   const secondaryBtn = useButtonClassName("secondary", { size: "lg", className: "w-full" })
@@ -277,7 +290,9 @@ const CartTotals: React.FC<CartTotalsProps> = ({ totals, items = [], checkoutSte
     <div className="bg-[var(--sf-color-background)] rounded-lg p-3 min-[550px]:p-4 sm:p-5 md:p-6 min-[1023px]:p-4 min-[1150px]:p-5 min-[1360px]:p-6 border shadow-sm w-full" style={{ borderColor: '#C0C0C0' }}>
       <ProcessingOverlay isOpen={showOverlay} variant={processingVariant} />
       <h3 className="text-sm min-[550px]:text-base sm:text-lg min-[1023px]:text-base min-[1150px]:text-lg min-[1360px]:text-lg font-bold text-[var(--sf-color-text)] mb-2.5 min-[550px]:mb-3 sm:mb-4 min-[1023px]:mb-3 min-[1150px]:mb-4 min-[1360px]:mb-4">
-        PRICE SUMMARY ({itemCount} {itemCount === 1 ? "ITEM" : "ITEMS"})
+        {priceSummaryCopy
+          ? `${priceSummaryCopy.title} (${itemCount} ${itemCount === 1 ? priceSummaryCopy.itemSingular : priceSummaryCopy.itemPlural})`
+          : `PRICE SUMMARY (${itemCount} ${itemCount === 1 ? "ITEM" : "ITEMS"})`}
       </h3>
 
       <div className="flex flex-col gap-y-2 min-[550px]:gap-y-2.5 sm:gap-y-3 min-[1023px]:gap-y-2 min-[1150px]:gap-y-3 min-[1360px]:gap-y-3 text-xs min-[550px]:text-sm sm:text-base min-[1023px]:text-sm min-[1150px]:text-base min-[1360px]:text-base text-[var(--sf-color-text)]">

package/src/common/components/checkbox/index.tsx

@@ -1,4 +1,3 @@
-import { Label } from "@medusajs/ui"
 import React from "react"
 import Color from "color"
 
@@ -43,18 +42,21 @@ const CheckboxWithLabel: React.FC<CheckboxProps> = ({
     }
   }, [hex, color])
 
+  const labelId = React.useId()
+
   return (
     <div className="flex items-center space-x-2 px-1 py-0.5">
       <button
         type="button"
         role="checkbox"
         aria-checked={checked}
+        aria-labelledby={labelId}
         onClick={onChange}
         name={name}
         data-testid={dataTestId}
         data-ga-event={dataGaEvent}
         data-ga-label={dataGaLabel}
-        className="w-5 h-5 rounded-md border-2 flex items-center justify-center transition-all focus:outline-none focus:ring-2 focus:ring-offset-2"
+        className="w-5 h-5 shrink-0 rounded-md border-2 flex items-center justify-center transition-all focus:outline-none focus:ring-2 focus:ring-offset-2"
         style={checked ? {
           backgroundColor: 'var(--sf-btn-primary)',
           borderColor: 'var(--sf-btn-primary)'
@@ -77,11 +79,17 @@ const CheckboxWithLabel: React.FC<CheckboxProps> = ({
           </svg>
         )}
       </button>
-      <Label
-        htmlFor={name || "checkbox"}
-        className="!transform-none !txt-medium cursor-pointer flex items-center gap-2"
-        size="large"
+      <span
+        id={labelId}
+        role="presentation"
         onClick={onChange}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault()
+            onChange?.()
+          }
+        }}
+        className="txt-medium cursor-pointer flex items-center gap-2 text-[var(--sf-color-text)]"
       >
         {colorHex && (
           <div
@@ -90,7 +98,7 @@ const CheckboxWithLabel: React.FC<CheckboxProps> = ({
           />
         )}
         {label}
-      </Label>
+      </span>
     </div>
   )
 }

package/src/common/components/filter-checkbox-group/index.tsx

@@ -1,134 +1,2 @@
-import { Heading } from "@medusajs/ui"
-import CheckboxWithLabel from "medusa-ui-common/common/components/checkbox"
-import React from "react"
-
-type FilterCheckboxGroupProps = {
-    title: string
-    items: { value: string; label: string }[]
-    values: string[]
-    handleChange: (value: string) => void
-    isColor?: boolean
-    'data-testid'?: string
-}
-
-const FilterCheckboxGroup = ({
-    title,
-    items,
-    values,
-    handleChange,
-    isColor,
-    'data-testid': dataTestId,
-}: FilterCheckboxGroupProps) => {
-    const [isOpen, setIsOpen] = React.useState(true)
-    const [showAll, setShowAll] = React.useState(false)
-
-    // Optimistic local state — reflects clicks instantly without waiting for server
-    const [optimisticValues, setOptimisticValues] = React.useState<string[]>(values)
-
-    // Sync back when server props update (after navigation completes)
-    React.useEffect(() => {
-        setOptimisticValues(values)
-    }, [values])
-
-    const initialItemsCount = 6
-    const hasMore = items?.length > initialItemsCount
-
-    // Auto-expand if a selected item is hidden or if any item is selected
-    React.useEffect(() => {
-        if (values && values.length > 0) {
-            setIsOpen(true)
-            if (hasMore && items) {
-                const hiddenItems = items.slice(initialItemsCount)
-                const isAnyHiddenItemSelected = hiddenItems.some(item => values.includes(item.value))
-                if (isAnyHiddenItemSelected) {
-                    setShowAll(true)
-                }
-            }
-        }
-    }, [values, items, hasMore])
-
-    const handleOptimisticChange = (value: string) => {
-        // Immediately toggle locally — no flicker
-        setOptimisticValues((prev) =>
-            prev.includes(value) ? prev.filter((v) => v !== value) : [...prev, value]
-        )
-        // Trigger actual URL navigation in background
-        handleChange(value)
-    }
-
-    const displayedItems = showAll ? items : items?.slice(0, initialItemsCount)
-
-    return (
-        <div className="flex flex-col border-b border-gray-100 pb-4 last:border-0 last:pb-0">
-            <button
-                onClick={() => setIsOpen(!isOpen)}
-                className="flex items-center justify-between w-full group transition-all py-1"
-            >
-                <Heading
-                    level="h3"
-                    className="text-sm font-bold text-[var(--sf-color-text)] uppercase tracking-wider group-hover:text-[var(--sf-btn-primary)] transition-colors"
-                >
-                    {title}
-                </Heading>
-                <span
-                    className={`transform transition-transform duration-300 text-[var(--sf-color-text-muted)] group-hover:text-[var(--sf-btn-primary)] ${isOpen ? "" : "-rotate-180"}`}
-                >
-                    <svg
-                        width="18"
-                        height="18"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        strokeWidth="2.5"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                    >
-                        <polyline points="18 15 12 9 6 15"></polyline>
-                    </svg>
-                </span>
-            </button>
-
-            <div
-                className={`flex flex-col gap-y-1 transition-all duration-300 ease-in-out ${isOpen ? "mt-3 opacity-100 px-0.5" : "max-h-0 opacity-0 invisible overflow-hidden"}`}
-                style={isOpen ? { maxHeight: showAll ? '1000px' : '300px' } : {}}
-            >
-                {displayedItems?.map((i) => (
-                    <CheckboxWithLabel
-                        key={i.value}
-                        label={i.label}
-                        color={isColor ? i.value : undefined}
-                        checked={optimisticValues.includes(i.value)}
-                        onChange={() => handleOptimisticChange(i.value)}
-                        data-testid={dataTestId}
-                        data-ga-event="filter_checkbox_click"
-                        data-ga-label={`${title} - ${i.label}`}
-                    />
-                ))}
-
-                {hasMore && isOpen && (
-                    <button
-                        onClick={() => setShowAll(!showAll)}
-                        className="text-xs font-bold text-[var(--sf-btn-primary)] hover:underline mt-2 flex items-center gap-1 uppercase tracking-tight"
-                    >
-                        {showAll ? "View Less" : `View More (${items.length - initialItemsCount})`}
-                        <svg
-                            width="12"
-                            height="12"
-                            viewBox="0 0 24 24"
-                            fill="none"
-                            stroke="currentColor"
-                            strokeWidth="3"
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            className={`transform transition-transform ${showAll ? "rotate-180" : ""}`}
-                        >
-                            <polyline points="6 9 12 15 18 9"></polyline>
-                        </svg>
-                    </button>
-                )}
-            </div>
-        </div>
-    )
-}
-
-export default FilterCheckboxGroup
+/** @deprecated Import from `medusa-ui-product/store/components/filter-checkbox-group` */
+export { default } from "medusa-ui-product/store/components/filter-checkbox-group"

package/src/common/components/login-popup/index.tsx

@@ -1,78 +1,2 @@
-"use client"
-
-import { useRouter, usePathname } from "next/navigation"
-
-interface LoginPopupProps {
-  isOpen: boolean
-  onClose: () => void
-  countryCode?: string
-  message?: string
-}
-
-export default function LoginPopup({ isOpen, onClose, countryCode = "us", message = "Please login to add products to your wishlist." }: LoginPopupProps) {
-  const router = useRouter()
-  const pathname = usePathname()
-
-  const handleLoginClick = () => {
-    // Store current URL in localStorage for redirect after login
-    if (typeof window !== "undefined") {
-      const currentPath = pathname || window.location.pathname
-      // Add a special marker so the login component knows to keep the user on this page
-      const redirectWithContext = currentPath.includes('?')
-        ? `${currentPath}&login_context=keep`
-        : `${currentPath}?login_context=keep`
-
-      localStorage.setItem("loginRedirectUrl", redirectWithContext)
-    }
-    router.push(`/${countryCode}/account`)
-  }
-
-  if (!isOpen) {
-    return null
-  }
-
-  return (
-    <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-white/10 backdrop-blur-md p-4 animate-in fade-in duration-200">
-      <div
-        className="bg-[var(--sf-color-background)] rounded-2xl shadow-2xl p-8 max-w-sm w-full mx-auto border border-gray-100 transform transition-all scale-100 animate-in zoom-in-95 duration-200"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className="text-center">
-          <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-purple-100 mb-4">
-            <svg className="h-6 w-6 text-[var(--sf-btn-primary)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
-            </svg>
-          </div>
-          <h2 className="text-xl font-bold text-[var(--sf-color-text)] mb-2">
-            Login Required
-          </h2>
-          <p className="text-[var(--sf-color-text-muted)] mb-8 text-sm leading-relaxed">
-            {message}
-          </p>
-
-          <div className="grid grid-cols-2 gap-3">
-            <button
-              onClick={onClose}
-              className="px-4 py-2.5 border border-gray-200 rounded-xl font-semibold text-[var(--sf-color-text-muted)] hover:bg-[color-mix(in_srgb,var(--sf-color-text-muted)_8%,transparent)] hover:border-gray-300 active:scale-95 transition-all duration-200"
-            >
-              Cancel
-            </button>
-            <button
-              onClick={handleLoginClick}
-              className="px-4 py-2.5 rounded-xl font-semibold text-white transition-all duration-200 hover:shadow-lg hover:shadow-purple-100 active:scale-95"
-              style={{ backgroundColor: 'var(--sf-btn-primary)' }}
-              onMouseEnter={(e) => {
-                e.currentTarget.style.backgroundColor = 'var(--sf-btn-primary-hover)'
-              }}
-              onMouseLeave={(e) => {
-                e.currentTarget.style.backgroundColor = 'var(--sf-btn-primary)'
-              }}
-            >
-              Login
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
+/** @deprecated Import from `medusa-ui-product/products/components/login-popup` */
+export { default } from "medusa-ui-product/products/components/login-popup"

package/src/common/components/processing-overlay/index.tsx

@@ -6,16 +6,24 @@ const ProcessingOverlay = ({
   isOpen, 
   title,
   subtitle = "Please do not refresh or close this window",
-  variant = "payment"
+  variant = "payment",
+  gifSrc = "/uploads/profile-images/t-shirt.gif",
+  gifAlt = "Placing order...",
+  paymentMessages: paymentMessagesProp,
+  orderMessages: orderMessagesProp,
 }: { 
   isOpen: boolean
   title?: string
   subtitle?: string
   variant?: "payment" | "order"
+  gifSrc?: string
+  gifAlt?: string
+  paymentMessages?: string[]
+  orderMessages?: string[]
 }) => {
   const [messageIndex, setMessageIndex] = useState(0)
   
-  const paymentMessages = [
+  const paymentMessages = paymentMessagesProp ?? [
     "Securing your transaction...",
     "Verifying with payment provider...",
     "Finalizing your order...",
@@ -23,7 +31,7 @@ const ProcessingOverlay = ({
     "Finishing up..."
   ]
   
-  const orderMessages = [
+  const orderMessages = orderMessagesProp ?? [
     "Placing your order...",
     "Preparing your confirmation...",
     "Almost there...",
@@ -54,8 +62,8 @@ const ProcessingOverlay = ({
       <div className="bg-white p-8 rounded-2xl shadow-2xl border border-purple-100 flex flex-col items-center max-w-xs w-full mx-4 transform animate-in zoom-in-95 duration-300">
         <div className="relative mb-2">
           <img 
-            src="/uploads/profile-images/t-shirt.gif" 
-            alt="Placing order..."
+            src={gifSrc}
+            alt={gifAlt}
             className="w-32 h-32 object-contain mx-auto"
           />
         </div>

package/src/common/components/side-panel/index.tsx

@@ -1,65 +1,2 @@
-import React, { useEffect } from 'react'
-import { clx } from "@medusajs/ui"
-
-type SidePanelProps = {
-    isOpen: boolean
-    onClose: () => void
-    title: string
-    children: React.ReactNode
-}
-
-const SidePanel: React.FC<SidePanelProps> = ({ isOpen, onClose, title, children }) => {
-    // Prevent body scroll when panel is open
-    useEffect(() => {
-        if (isOpen) {
-            document.body.style.overflow = 'hidden'
-        } else {
-            document.body.style.overflow = 'unset'
-        }
-        return () => {
-            document.body.style.overflow = 'unset'
-        }
-    }, [isOpen])
-
-    return (
-        <>
-            {/* Backdrop */}
-            <div
-                className={clx(
-                    "fixed inset-0 bg-black/40 backdrop-blur-sm transition-opacity duration-300 z-[999]",
-                    isOpen ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"
-                )}
-                onClick={onClose}
-            />
-
-            {/* Panel */}
-            <div
-                className={clx(
-                    "fixed top-0 right-0 h-full w-[90%] min-[400px]:w-[350px] sm:w-[400px] md:w-[450px] lg:w-[480px] bg-[var(--sf-color-background)] shadow-2xl transition-transform duration-300 ease-in-out z-[1000] flex flex-col",
-                    isOpen ? "translate-x-0" : "translate-x-full"
-                )}
-            >
-                {/* Header */}
-                <div className="flex items-center justify-between p-6 border-b border-gray-100">
-                    <h2 className="text-xl font-bold text-[var(--sf-color-text)]">{title}</h2>
-                    <button
-                        onClick={onClose}
-                        className="p-2 hover:bg-[color-mix(in_srgb,var(--sf-color-text-muted)_10%,transparent)] rounded-full transition-colors"
-                    >
-                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                            <line x1="18" y1="6" x2="6" y2="18"></line>
-                            <line x1="6" y1="6" x2="18" y2="18"></line>
-                        </svg>
-                    </button>
-                </div>
-
-                {/* Content */}
-                <div className="flex-1 overflow-y-auto p-6">
-                    {children}
-                </div>
-            </div>
-        </>
-    )
-}
-
-export default SidePanel
+/** @deprecated Import from `medusa-ui-product/products/components/side-panel` */
+export { default } from "medusa-ui-product/products/components/side-panel"

package/src/constants/payments.tsx

@@ -1,31 +1,2 @@
-import React from "react";
-import { CreditCard } from "@medusajs/icons";
-import Ideal from "medusa-ui-common/common/icons/ideal";
-import Bancontact from "medusa-ui-common/common/icons/bancontact";
-import PayPal from "medusa-ui-common/common/icons/paypal";
-
-export const paymentInfoMap: Record<string, { title: string; icon: React.JSX.Element }> = {
-  pp_stripe_stripe: { title: "Credit card", icon: <CreditCard /> },
-  "pp_medusa-payments_default": { title: "Credit card", icon: <CreditCard /> },
-  "pp_stripe-ideal_stripe": { title: "iDeal", icon: <Ideal /> },
-  "pp_stripe-bancontact_stripe": { title: "Bancontact", icon: <Bancontact /> },
-  pp_paypal_paypal: { title: "PayPal", icon: <PayPal /> },
-  pp_system_default: { title: "Cash on Delivery (Cash/UPI)", icon: <CreditCard /> },
-  razorpay: { title: "Razorpay", icon: <CreditCard /> },
-  pp_razorpay_razorpay: { title: "Razorpay", icon: <CreditCard /> },
-};
-
-export const isStripeLike = (providerId?: string) =>
-  providerId?.startsWith("pp_stripe_") || providerId?.startsWith("pp_medusa-");
-
-export const isPaypal = (providerId?: string) => providerId?.startsWith("pp_paypal");
-
-export const isManual = (providerId?: string) => providerId?.startsWith("pp_system_default");
-
-export const isRazorpay = (providerId?: string) =>
-  providerId?.startsWith("razorpay") || providerId?.startsWith("pp_razorpay");
-
-export const noDivisionCurrencies = [
-  "krw", "jpy", "vnd", "clp", "pyg", "xaf", "xof", "bif", "djf", "gnf", "kmf", "mga", "rwf",
-  "xpf", "htg", "vuv", "xag", "xdr", "xau",
-];
+/** @deprecated Import from `medusa-ui-checkout/checkout/constants/payments` */
+export * from "medusa-ui-checkout/checkout/constants/payments"

package/src/page-compose/types.ts

@@ -0,0 +1,31 @@
+import type { ReactNode } from "react"
+
+/** Props passed to every page section wrapper. */
+export type SectionThemeProps<TTheme extends Record<string, string>> = {
+  theme?: Partial<TTheme>
+}
+
+/**
+ * Registry entry for composing a page from sections in the main app.
+ * @example
+ * const HOME_SECTIONS = {
+ *   hero: { Component: HeroSection, load: loadHeroSectionData },
+ * }
+ */
+export type PageSectionEntry<TProps, TData = TProps> = {
+  Component: (props: TProps) => ReactNode
+  load?: (ctx: PageLoadContext) => Promise<TData | null>
+}
+
+export type PageLoadContext = {
+  countryCode: string
+  pageInput?: Record<string, unknown>
+}
+
+export type PageSectionRegistry = Record<string, PageSectionEntry<unknown>>
+
+/** Ordered list of section ids for a page variant. */
+export type PageVariantDefinition<TId extends string = string> = {
+  id: string
+  sectionIds: readonly TId[]
+}

package/src/storefront-providers.tsx

@@ -74,23 +74,16 @@ export type StorefrontUiProvidersProps = {
   themeClasses?: StorefrontThemeClasses;
   /** Form field classNames — from defineSiteTheme().siteFormTheme */
   formTheme?: FormThemeClassNames;
-  /**
-   * @deprecated Prefer siteTheme — button CSS vars are derived from siteTheme.colors.
-   */
-  buttonCssVars?: Record<string, string>;
 };
 
 function ButtonThemeFromSite({
   children,
   buttonTheme,
-  legacyButtonCssVars,
 }: {
   children: ReactNode;
   buttonTheme: ButtonTheme;
-  legacyButtonCssVars?: Record<string, string>;
 }) {
-  const { buttonCssVars: fromSite } = useSiteTheme();
-  const cssVars = legacyButtonCssVars ?? fromSite;
+  const { buttonCssVars: cssVars } = useSiteTheme();
   return (
     <ButtonThemeProvider theme={buttonTheme} cssVars={cssVars}>
       {children}
@@ -105,12 +98,11 @@ export function StorefrontUiProviders({
   buttonTheme = defaultButtonTheme,
   themeClasses,
   formTheme,
-  buttonCssVars,
 }: StorefrontUiProvidersProps) {
   return (
     <SiteThemeProvider theme={siteTheme}>
       <StorefrontThemeClassesProvider themeClasses={themeClasses} form={formTheme}>
-        <ButtonThemeFromSite buttonTheme={buttonTheme} legacyButtonCssVars={buttonCssVars}>
+        <ButtonThemeFromSite buttonTheme={buttonTheme}>
           <WishlistProvider>{children}</WishlistProvider>
         </ButtonThemeFromSite>
       </StorefrontThemeClassesProvider>

package/src/util/checkout-dom.ts

@@ -1,65 +1,2 @@
-const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
-
-export function normalizeCheckoutEmail(email?: string | null): string {
-  return (email ?? "").trim().toLowerCase()
-}
-
-export function isValidCheckoutEmail(email?: string | null): boolean {
-  const normalized = normalizeCheckoutEmail(email)
-  return normalized.length > 0 && EMAIL_PATTERN.test(normalized)
-}
-
-export function readCheckoutAddressFromDom(fallback?: {
-  email?: string | null
-  shipping_address?: Record<string, unknown> | null
-}) {
-  const fullNameInput = document.getElementById("shipping_full_name_field") as HTMLInputElement | null
-  const address1Input = document.getElementById("shipping_address_1_field") as HTMLInputElement | null
-  const companyInput = document.getElementById("shipping_company_field") as HTMLInputElement | null
-  const cityInput = document.getElementById("shipping_city_field") as HTMLInputElement | null
-  const provinceInput = document.getElementById("shipping_province_field") as HTMLInputElement | null
-  const postalInput = document.getElementById("shipping_postal_code_field") as HTMLInputElement | null
-  const phoneInput = document.getElementById("shipping_phone_field_internal") as HTMLInputElement | null
-  const emailInput = document.getElementById("shipping_email_field") as HTMLInputElement | null
-
-  const fullName = fullNameInput?.value?.trim() || ""
-  const [firstName, ...lastNameParts] = fullName.split(/\s+/).filter(Boolean)
-  const lastName = lastNameParts.join(" ") || "."
-
-  const shipping = fallback?.shipping_address ?? {}
-
-  return {
-    email: normalizeCheckoutEmail(emailInput?.value || (fallback?.email as string) || ""),
-    shipping_address: {
-      first_name: firstName || (shipping.first_name as string) || "Visitor",
-      last_name: lastName || (shipping.last_name as string) || "Customer",
-      address_1: address1Input?.value?.trim() || (shipping.address_1 as string) || "",
-      company: companyInput?.value?.trim() || (shipping.company as string) || "",
-      city: cityInput?.value?.trim() || (shipping.city as string) || "",
-      province: provinceInput?.value?.trim() || (shipping.province as string) || "",
-      postal_code: postalInput?.value?.trim() || (shipping.postal_code as string) || "",
-      phone: phoneInput?.value?.trim() || (shipping.phone as string) || "",
-      country_code: (shipping.country_code as string) || "in",
-    },
-  }
-}
-
-export async function syncCheckoutAddressFromDom(fallback?: {
-  email?: string | null
-  shipping_address?: Record<string, unknown> | null
-}) {
-  const payload = readCheckoutAddressFromDom(fallback)
-
-  if (!isValidCheckoutEmail(payload.email)) {
-    throw new Error("Please enter a valid email address before continuing.")
-  }
-
-  const { updateAddressSilently } = await import("medusa-storefront-data/cart")
-  const result = await updateAddressSilently(payload)
-
-  if (result && "success" in result && result.success === false) {
-    throw new Error("Could not save your delivery details. Please check your email and try again.")
-  }
-
-  return payload
-}
+/** @deprecated Import from `medusa-ui-checkout/checkout/util/checkout-dom` */
+export * from "medusa-ui-checkout/checkout/util/checkout-dom"

package/src/util/returns.ts

@@ -1,72 +1,3 @@
-
-import { HttpTypes } from "@medusajs/types"
-
-export type ItemWithDeliveryStatus = HttpTypes.StoreOrderLineItem & {
-    returnable_quantity: number
-    delivered_quantity: number
-    return_requested_quantity: number
-    return_received_quantity: number
-    written_off_quantity: number
-}
-
-export const calculateReturnableQuantity = (
-    item: HttpTypes.StoreOrderLineItem
-): number => {
-    // In a real implementation, these would come from the item.detail or similar
-    // For now, we'll assume we can calculate it from available data or default to quantity
-    // Adjust this based on your actual data structure for item details
-
-    // Note: The actual data structure depends on how Medusa returns order item details
-    // Typically it's in item.detail associated with fulfillments/returns
-
-    // For the purpose of this storefront implementation (assuming standard Medusa):
-    // We strictly follow the logic: delivered - requested - received - written_off
-
-    // Checking if properties exist on item (they might be on a 'detail' object or top level depending on version)
-    const anyItem = item as any
-
-    // Defaulting to item.quantity if details missing (safe fallback for initial dev)
-    // BUT per requirements, we must implement the logic.
-
-    // If the backend provides these fields on the item directly:
-    const delivered = anyItem.delivered_quantity ?? anyItem.quantity ?? 0 // Fallback to quantity if assumed delivered
-    const requested = anyItem.return_requested_quantity ?? 0
-    const received = anyItem.return_received_quantity ?? 0
-    const writtenOff = anyItem.written_off_quantity ?? 0
-
-    // If fulfillment_status is not fulfilled/shipped/partially_shipped, returnable might be 0
-    // But strict formula:
-    const returnable = Math.max(0, delivered - requested - received - writtenOff)
-
-    return returnable
-}
-
-export const isItemReturnable = (item: HttpTypes.StoreOrderLineItem): boolean => {
-    return calculateReturnableQuantity(item) > 0
-}
-
-export const hasReturnableItems = (order: HttpTypes.StoreOrder): boolean => {
-    if (!order || !order.items) return false
-
-    // Simple check: if order is canceled, no returns
-    if (order.status === "canceled") return false
-
-    return order.items.some((item) => isItemReturnable(item))
-}
-
-export const enhanceItemsWithReturnStatus = (
-    items: HttpTypes.StoreOrderLineItem[]
-): ItemWithDeliveryStatus[] => {
-    return items.map((item) => {
-        const anyItem = item as any
-        return {
-            ...item,
-            // Ensure these properties exist
-            delivered_quantity: anyItem.delivered_quantity ?? item.quantity, // Optimistic default
-            return_requested_quantity: anyItem.return_requested_quantity ?? 0,
-            return_received_quantity: anyItem.return_received_quantity ?? 0,
-            written_off_quantity: anyItem.written_off_quantity ?? 0,
-            returnable_quantity: calculateReturnableQuantity(item),
-        }
-    })
-}
+/** @deprecated Account flows: `medusa-ui-account/account/util/returns`. Order checks: `medusa-ui-order/order/util/returns`. */
+export * from "medusa-ui-account/account/util/returns"
+export { hasReturnableItems } from "medusa-ui-order/order/util/returns"