medusa-ui-common 2.0.1 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "medusa-ui-common",
-  "version": "2.0.1",
+  "version": "3.0.0",
   "description": "Shared storefront UI primitives.",
   "type": "module",
   "license": "MIT",
@@ -22,10 +22,11 @@
     "lucide-react": "*",
     "medusa-contact-logic-plugin": "^2.0.0",
     "medusa-reviews-logic": "^2.0.0",
-    "medusa-storefront-analytics": "^1.3.0",
-    "medusa-storefront-data": "^2.0.0",
+    "medusa-storefront-analytics": "^1.0.0",
+    "medusa-storefront-data": "^2.5.3",
     "medusa-storefront-hooks": "^1.0.0",
     "medusa-wishlist-logic": "^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"
@@ -86,6 +87,11 @@
       "types": "./src/constants/*",
       "import": "./src/constants/*",
       "default": "./src/constants/*"
+    },
+    "./page-compose/types": {
+      "types": "./src/page-compose/types.ts",
+      "import": "./src/page-compose/types.ts",
+      "default": "./src/page-compose/types.ts"
     }
   },
   "typesVersions": {
@@ -96,6 +102,11 @@
     }
   },
   "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",

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-gray-800 mb-3 sm:mb-4 overflow-x-auto font-medium">
-      <div className="flex items-center whitespace-nowrap">
-        <LocalizedClientLink href="/" className="hover:text-gray-900 transition-colors">
-          Home
-        </LocalizedClientLink>
-        <span className="mx-2">/</span>
-        <LocalizedClientLink href="/store" className="hover:text-gray-900 transition-colors">
-          Shop
-        </LocalizedClientLink>
-        {primaryCategory && (
-          <>
-            <span className="mx-2">/</span>
-            <LocalizedClientLink
-              href={`/store?category=${primaryCategory.id}`}
-              className="hover:text-gray-900 transition-colors"
-            >
-              {primaryCategory.name}
-            </LocalizedClientLink>
-          </>
-        )}
-        <span className="mx-2">/</span>
-        <span className="text-gray-900 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

@@ -9,6 +9,8 @@ import LocalizedClientLink from "medusa-ui-common/common/components/localized-cl
 import { useRouter, usePathname, useSearchParams } from "next/navigation"
 import ProcessingOverlay from "medusa-ui-common/common/components/processing-overlay"
 import { useSiteCompany } from "medusa-storefront-core"
+import { useButtonClassName } from "../../../context/button-theme-context"
+import { ThemedButton } from "../themed-button"
 
 type CartTotalsProps = {
   totals: {
@@ -27,6 +29,8 @@ type CartTotalsProps = {
 
 const CartTotals: React.FC<CartTotalsProps> = ({ totals, items = [], checkoutStep, customer }) => {
   const company = useSiteCompany()
+  const primaryBtn = useButtonClassName("primary", { size: "lg", className: "w-full" })
+  const secondaryBtn = useButtonClassName("secondary", { size: "lg", className: "w-full" })
   const router = useRouter()
   const pathname = usePathname()
   const searchParams = useSearchParams()
@@ -270,13 +274,13 @@ const CartTotals: React.FC<CartTotalsProps> = ({ totals, items = [], checkoutSte
   }
 
   return (
-    <div className="bg-[#FFFAFE] 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' }}>
+    <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-gray-900 mb-2.5 min-[550px]:mb-3 sm:mb-4 min-[1023px]:mb-3 min-[1150px]:mb-4 min-[1360px]:mb-4">
+      <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"})
       </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-gray-900">
+      <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)]">
         <div className="flex items-center justify-between">
           <span>Total MRP</span>
           <span data-testid="cart-mrp" data-value={totalMRP}>
@@ -288,7 +292,7 @@ const CartTotals: React.FC<CartTotalsProps> = ({ totals, items = [], checkoutSte
           <div className="flex items-center justify-between">
             <span>Discount</span>
             <span
-              className="text-gray-900"
+              className="text-[var(--sf-color-text)]"
               data-testid="cart-discount"
               data-value={calculatedDiscount}
             >
@@ -311,7 +315,7 @@ const CartTotals: React.FC<CartTotalsProps> = ({ totals, items = [], checkoutSte
           <span>Shipping</span>
           <span data-testid="cart-shipping" data-value={shippingAmount} className="flex items-center gap-x-2">
             {isAutoSettingShipping && (
-              <span className="w-4 h-4 border-2 border-[#8B5AB1] border-t-transparent rounded-full animate-spin"></span>
+              <span className="w-4 h-4 border-2 border-[var(--sf-btn-primary)] border-t-transparent rounded-full animate-spin"></span>
             )}
             {convertToLocale({ amount: shippingAmount, currency_code })}
           </span>
@@ -320,7 +324,7 @@ const CartTotals: React.FC<CartTotalsProps> = ({ totals, items = [], checkoutSte
 
       <div className="h-px w-full border-b border-gray-200 my-3 min-[550px]:my-4" />
 
-      <div className="flex items-center justify-between text-xs min-[550px]:text-sm sm:text-base min-[1023px]:text-sm min-[1150px]:text-base min-[1360px]:text-base font-bold text-gray-900 mb-2.5 min-[550px]:mb-3 sm:mb-4 min-[1023px]:mb-3 min-[1150px]:mb-4 min-[1360px]:mb-4">
+      <div className="flex items-center justify-between text-xs min-[550px]:text-sm sm:text-base min-[1023px]:text-sm min-[1150px]:text-base min-[1360px]:text-base 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">
         <span>Total</span>
         <span
           className="text-sm min-[550px]:text-base sm:text-lg min-[1023px]:text-base min-[1150px]:text-lg min-[1360px]:text-lg"
@@ -344,22 +348,22 @@ const CartTotals: React.FC<CartTotalsProps> = ({ totals, items = [], checkoutSte
 
       {/* No manual continue button needed as we are in one-step mode */}
       {isOnCartPage && (
-        <button
+        <ThemedButton
+          variant="primary"
+          size="lg"
+          fullWidth
           onClick={handleProceedToCheckout}
           disabled={isRedirecting}
+          isLoading={isRedirecting}
           data-ga-event="proceed_to_checkout_click"
           data-meta-event="InitiateCheckout"
           data-meta-action="proceed_to_checkout"
           data-ga-label={convertToLocale({ amount: finalTotal, currency_code })}
-          className="w-full h-10 min-[550px]:h-11 sm:h-12 min-[1023px]:h-11 min-[1150px]:h-12 min-[1360px]:h-12 text-xs min-[550px]:text-sm sm:text-base min-[1023px]:text-sm min-[1150px]:text-base min-[1360px]:text-base text-white font-medium transition-colors duration-200 hover:opacity-90 mt-3 min-[550px]:mt-4 sm:mt-6 min-[1023px]:mt-5 min-[1150px]:mt-6 min-[1360px]:mt-6 disabled:opacity-50"
-          style={{
-            backgroundColor: '#8B5AB1',
-            borderRadius: '30px'
-          }}
+          className="mt-3 min-[550px]:mt-4 sm:mt-6 min-[1023px]:mt-5 min-[1150px]:mt-6 min-[1360px]:mt-6"
           data-testid="checkout-button"
         >
           {isRedirecting ? "Loading..." : "Proceed to Checkout"}
-        </button>
+        </ThemedButton>
       )}
       {!isOnCartPage && (
         <div className="w-full">
@@ -376,6 +380,7 @@ const CartTotals: React.FC<CartTotalsProps> = ({ totals, items = [], checkoutSte
                   return (
                     <>
                   <button
+                    type="button"
                     onClick={async () => {
                       trackPaymentMethodClick("cod")
                       setProcessingVariant("order")
@@ -404,18 +409,14 @@ const CartTotals: React.FC<CartTotalsProps> = ({ totals, items = [], checkoutSte
                     data-meta-event="AddPaymentInfo"
                     data-meta-action="select_payment_method"
                     data-meta-payment-type="cod"
-                    className={clx(
-                      "w-full py-2.5 min-[550px]:py-3 text-xs min-[550px]:text-sm sm:text-base text-gray-900 bg-white border-2 font-bold rounded-lg transition-colors border-[#8B5AB1]",
-                      {
-                        "hover:bg-purple-50": !isPaymentDisabled,
-                        "opacity-50 cursor-not-allowed": isPaymentDisabled
-                      }
-                    )}
-                    style={{ borderRadius: '30px' }}
+                    className={clx(secondaryBtn, {
+                      "opacity-50 cursor-not-allowed": isPaymentDisabled,
+                    })}
                   >
                     Cash on Delivery
                   </button>
                   <button
+                    type="button"
                     onClick={async () => {
                       trackPaymentMethodClick("razorpay")
                       setProcessingVariant("payment")
@@ -469,7 +470,7 @@ const CartTotals: React.FC<CartTotalsProps> = ({ totals, items = [], checkoutSte
                               contact: paymentPhone || undefined,
                             },
                             theme: {
-                              color: "#8B5AB1"
+                              color: "var(--sf-btn-primary)"
                             },
                             modal: {
                               ondismiss: () => {
@@ -498,14 +499,9 @@ const CartTotals: React.FC<CartTotalsProps> = ({ totals, items = [], checkoutSte
                     data-meta-event="AddPaymentInfo"
                     data-meta-action="select_payment_method"
                     data-meta-payment-type="razorpay"
-                    className={clx(
-                      "w-full py-2.5 min-[550px]:py-3 text-xs min-[550px]:text-sm sm:text-base text-white font-bold rounded-lg transition-colors bg-[#8B5AB1]",
-                      {
-                        "hover:opacity-90": !isPaymentDisabled,
-                        "opacity-50 cursor-not-allowed": isPaymentDisabled
-                      }
-                    )}
-                    style={{ borderRadius: '30px' }}
+                    className={clx(primaryBtn, {
+                      "opacity-50 cursor-not-allowed": isPaymentDisabled,
+                    })}
                   >
                     Pay with Razorpay
                   </button>
@@ -522,36 +518,35 @@ const CartTotals: React.FC<CartTotalsProps> = ({ totals, items = [], checkoutSte
               )}
             </div>
           ) : activeStep === "address" ? (
-            <button
+            <ThemedButton
+              variant="primary"
+              size="lg"
+              fullWidth
               onClick={() => {
                 window.dispatchEvent(new CustomEvent('trigger-checkout-step'))
               }}
-              className="w-full py-2.5 min-[550px]:py-3 sm:py-4 min-[1023px]:py-3 min-[1150px]:py-4 min-[1360px]:py-4 text-xs min-[550px]:text-sm sm:text-base min-[1023px]:text-sm min-[1150px]:text-base min-[1360px]:text-base text-white font-medium mt-3 min-[550px]:mt-4 sm:mt-6 min-[1023px]:mt-5 min-[1150px]:mt-6 min-[1360px]:mt-6 rounded-lg transition-colors duration-200 hover:opacity-90"
-              style={{
-                backgroundColor: '#8B5AB1',
-                borderRadius: '30px'
-              }}
+              className="mt-3 min-[550px]:mt-4 sm:mt-6 min-[1023px]:mt-5 min-[1150px]:mt-6 min-[1360px]:mt-6"
               data-testid="checkout-button-address"
             >
               Continue to delivery
-            </button>
+            </ThemedButton>
           ) : (
-            <button
+            <ThemedButton
+              variant="primary"
+              size="lg"
+              fullWidth
               onClick={handleProceedToCheckout}
               disabled={isRedirecting}
+              isLoading={isRedirecting}
               data-ga-event="proceed_to_checkout_click"
               data-meta-event="InitiateCheckout"
               data-meta-action="proceed_to_checkout"
               data-ga-label={convertToLocale({ amount: finalTotal, currency_code })}
-              className="w-full h-10 min-[550px]:h-11 sm:h-12 min-[1023px]:h-11 min-[1150px]:h-12 min-[1360px]:h-12 text-xs min-[550px]:text-sm sm:text-base min-[1023px]:text-sm min-[1150px]:text-base min-[1360px]:text-base text-white font-medium transition-colors duration-200 hover:opacity-90 mt-3 min-[550px]:mt-4 sm:mt-6 min-[1023px]:mt-5 min-[1150px]:mt-6 min-[1360px]:mt-6 disabled:opacity-50"
-              style={{
-                backgroundColor: '#8B5AB1',
-                borderRadius: '30px'
-              }}
+              className="mt-3 min-[550px]:mt-4 sm:mt-6 min-[1023px]:mt-5 min-[1150px]:mt-6 min-[1360px]:mt-6"
               data-testid="checkout-button"
             >
               {isRedirecting ? "Loading..." : "Proceed to Checkout"}
-            </button>
+            </ThemedButton>
           )}
         </div>
       )}

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,21 +42,24 @@ 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: '#8B5AB1',
-          borderColor: '#8B5AB1'
+          backgroundColor: 'var(--sf-btn-primary)',
+          borderColor: 'var(--sf-btn-primary)'
         } : {
           backgroundColor: 'white',
           borderColor: '#C0C0C0'
@@ -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/delete-button/index.tsx

@@ -100,7 +100,7 @@ const DeleteButton = ({
           {/* Body Content */}
           <div className="p-6 flex gap-6 pr-12">
             {/* Product Thumbnail */}
-            <div className="w-24 h-24 sm:w-28 sm:h-28 flex-shrink-0 bg-gray-50 rounded-sm overflow-hidden border border-gray-100 shadow-sm">
+            <div className="w-24 h-24 sm:w-28 sm:h-28 flex-shrink-0 bg-[color-mix(in_srgb,var(--sf-color-text-muted)_8%,var(--sf-color-surface))] rounded-sm overflow-hidden border border-gray-100 shadow-sm">
               {thumbnail ? (
                 <Image 
                   src={thumbnail} 
@@ -110,14 +110,14 @@ const DeleteButton = ({
                   className="w-full h-full object-cover"
                 />
               ) : (
-                <div className="w-full h-full flex items-center justify-center text-gray-300 bg-gray-50 uppercase text-[10px] font-bold">No Image</div>
+                <div className="w-full h-full flex items-center justify-center text-[var(--sf-color-text-muted)] bg-[color-mix(in_srgb,var(--sf-color-text-muted)_8%,var(--sf-color-surface))] uppercase text-[10px] font-bold">No Image</div>
               )}
             </div>
 
             {/* Title and Description */}
             <div className="flex flex-col justify-center">
-              <h3 className="text-[17px] font-bold text-gray-800 mb-1.5 leading-tight">Move from Bag</h3>
-              <p className="text-[15px] text-gray-500 leading-snug font-medium max-w-[280px]">
+              <h3 className="text-[17px] font-bold text-[var(--sf-color-text)] mb-1.5 leading-tight">Move from Bag</h3>
+              <p className="text-[15px] text-[var(--sf-color-text-muted)] leading-snug font-medium max-w-[280px]">
                 Are you sure you want to move this item from bag?
               </p>
               
@@ -132,7 +132,7 @@ const DeleteButton = ({
             <button
               onClick={handleDelete}
               disabled={isDeleting}
-              className="flex-1 h-full flex items-center justify-center text-[13px] font-bold text-gray-500 tracking-wider hover:bg-gray-50 transition-colors uppercase"
+              className="flex-1 h-full flex items-center justify-center text-[13px] font-bold text-[var(--sf-color-text-muted)] tracking-wider hover:bg-[color-mix(in_srgb,var(--sf-color-text-muted)_8%,transparent)] transition-colors uppercase"
             >
               {isDeleting ? <Spinner className="animate-spin" /> : "REMOVE"}
             </button>
@@ -143,7 +143,7 @@ const DeleteButton = ({
             <button
               onClick={handleMoveToWishlist}
               disabled={wishlistLoading}
-              className="flex-1 h-full flex items-center justify-center text-[13px] font-bold tracking-wider hover:bg-gray-50 transition-colors uppercase"
+              className="flex-1 h-full flex items-center justify-center text-[13px] font-bold tracking-wider hover:bg-[color-mix(in_srgb,var(--sf-color-text-muted)_8%,transparent)] transition-colors uppercase"
               style={{ color: '#D25C78' }} // Pinkish color from reference
             >
               {wishlistLoading ? <Spinner className="animate-spin" /> : "MOVE TO WISHLIST"}

package/src/common/components/discount-code/index.tsx

@@ -71,7 +71,7 @@ const DiscountCode: React.FC<DiscountCodeProps> = ({ cart }) => {
       style={{ width: '480px', maxWidth: '100%' }}
     >
       {/* COUPONS Heading */}
-      <Heading className="text-lg font-bold text-gray-900 mb-4 uppercase">
+      <Heading className="text-lg font-bold text-[var(--sf-color-text)] mb-4 uppercase">
         COUPONS
       </Heading>
 
@@ -86,15 +86,15 @@ const DiscountCode: React.FC<DiscountCodeProps> = ({ cart }) => {
         <div className="flex items-center gap-3">
           {/* Percentage Icon - White circle with black % symbol */}
           <div className="w-10 h-10 rounded-full bg-white flex items-center justify-center flex-shrink-0 shadow-sm">
-            <span className="text-gray-900 font-bold text-xl">%</span>
+            <span className="text-[var(--sf-color-text)] font-bold text-xl">%</span>
           </div>
 
           {/* Text Content */}
           <div className="flex flex-col items-start">
-            <span className="font-bold text-base text-gray-900">
+            <span className="font-bold text-base text-[var(--sf-color-text)]">
               Apply Coupons
             </span>
-            <span className="text-sm text-gray-500">
+            <span className="text-sm text-[var(--sf-color-text-muted)]">
               View all offers
             </span>
           </div>
@@ -102,7 +102,7 @@ const DiscountCode: React.FC<DiscountCodeProps> = ({ cart }) => {
 
         {/* Chevron Icon */}
         <svg
-          className="w-5 h-5 text-gray-900"
+          className="w-5 h-5 text-[var(--sf-color-text)]"
           fill="none"
           stroke="currentColor"
           viewBox="0 0 24 24"
@@ -131,7 +131,7 @@ const DiscountCode: React.FC<DiscountCodeProps> = ({ cart }) => {
             />
             <SubmitButton
               variant="secondary"
-              className="!bg-[#8B5AB1] hover:!bg-[#7a4a9f] text-white border-0"
+              className="!bg-[var(--sf-btn-primary)] hover:!bg-[var(--sf-btn-primary-hover)] text-white border-0"
               data-testid="discount-apply-button"
             >
               Apply
@@ -157,7 +157,7 @@ const DiscountCode: React.FC<DiscountCodeProps> = ({ cart }) => {
       {/* Applied Promotions - Clean Card Redesign */}
       {promotions.length > 0 && (
         <div className="w-full flex flex-col mt-6 pt-4 border-t border-gray-100">
-          <Heading className="text-sm font-bold mb-3 text-gray-900 uppercase tracking-tight">
+          <Heading className="text-sm font-bold mb-3 text-[var(--sf-color-text)] uppercase tracking-tight">
             Promotion(s) applied:
           </Heading>
 
@@ -166,12 +166,12 @@ const DiscountCode: React.FC<DiscountCodeProps> = ({ cart }) => {
               return (
                 <div
                   key={promotion.id}
-                  className="flex items-center justify-between w-full p-3 rounded-xl border border-purple-100 bg-purple-50/50 transition-all hover:bg-purple-50 group"
+                  className="flex items-center justify-between w-full p-3 rounded-xl border border-purple-100 bg-[var(--sf-color-primary)]/10 transition-all hover:bg-[var(--sf-color-primary)]/10 group"
                   data-testid="discount-row"
                 >
                   <div className="flex items-center gap-x-3 overflow-hidden">
                     {/* Tag Icon */}
-                    <div className="flex-shrink-0 text-[#8B5AB1]">
+                    <div className="flex-shrink-0 text-[var(--sf-btn-primary)]">
                       <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                         <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path>
                         <line x1="7" y1="7" x2="7.01" y2="7"></line>
@@ -179,7 +179,7 @@ const DiscountCode: React.FC<DiscountCodeProps> = ({ cart }) => {
                     </div>
 
                     <div className="flex flex-col overflow-hidden">
-                      <span className="font-bold truncate text-sm uppercase tracking-wider" style={{ color: '#8B5AB1' }} data-testid="discount-code">
+                      <span className="font-bold truncate text-sm uppercase tracking-wider" style={{ color: 'var(--sf-btn-primary)' }} data-testid="discount-code">
                         {promotion.code}
                       </span>
                       {promotion.application_method?.value !== undefined && (
@@ -197,7 +197,7 @@ const DiscountCode: React.FC<DiscountCodeProps> = ({ cart }) => {
 
                   {!promotion.is_automatic && (
                     <button
-                      className="p-2 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-full transition-all"
+                      className="p-2 text-[var(--sf-color-text-muted)] hover:text-red-500 hover:bg-red-50 rounded-full transition-all"
                       onClick={() => {
                         if (!promotion.code) return
                         removePromotionCode(promotion.code)

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-gray-900 uppercase tracking-wider group-hover:text-[#8B5AB1] transition-colors"
-                >
-                    {title}
-                </Heading>
-                <span
-                    className={`transform transition-transform duration-300 text-gray-400 group-hover:text-[#8B5AB1] ${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-[#8B5AB1] 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"