@mitumba/ui 0.1.3 → 0.1.4

package/dist/index.mjs

@@ -1102,6 +1102,60 @@ function MitumbaAvatar({
 import Box6 from "@mui/material/Box";
 import { tokens as tokens6 } from "@mitumba/tokens";
 import { jsx as jsx6 } from "react/jsx-runtime";
+function MitumbaGlass({
+  children,
+  blur = 24,
+  opacity = 0.5,
+  rounding = "large",
+  border = true,
+  role,
+  sx
+}) {
+  const radiusMap = {
+    rounded: tokens6.radius.md,
+    // 8px
+    large: tokens6.radius.lg,
+    // 16px
+    huge: tokens6.radius.xl,
+    // 24px
+    full: tokens6.radius.full
+  };
+  return /* @__PURE__ */ jsx6(
+    Box6,
+    {
+      role,
+      sx: [
+        {
+          position: "relative",
+          overflow: "hidden",
+          backgroundColor: `rgba(255, 255, 255, ${opacity})`,
+          backdropFilter: `blur(${blur}px) saturate(180%)`,
+          WebkitBackdropFilter: `blur(${blur}px) saturate(180%)`,
+          borderRadius: `${radiusMap[rounding]}px`,
+          // High-end glass border: Ultra-thin, white, low-opacity
+          border: border ? "1px solid rgba(255, 255, 255, 0.4)" : "none",
+          // Multi-layered shadow for realistic floating depth
+          boxShadow: `
+            0 4px 12px 0 rgba(0, 0, 0, 0.05),
+            0 12px 32px 0 rgba(31, 38, 135, 0.1)
+          `,
+          transition: "all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)",
+          // Subtle light leak / shine effect
+          "&::before": {
+            content: '""',
+            position: "absolute",
+            inset: 0,
+            zIndex: 0,
+            background: "linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.1) 100%)",
+            pointerEvents: "none"
+          }
+        },
+        ...Array.isArray(sx) ? sx : [sx]
+      ],
+      children: /* @__PURE__ */ jsx6(Box6, { sx: { position: "relative", zIndex: 1 }, children })
+    }
+  );
+}
 
 // src/components/selection/MitumbaCheckbox/MitumbaCheckbox.tsx
 import { useEffect, useRef } from "react";
@@ -2861,30 +2915,72 @@ function STIScoreChip({
 
 // src/components/seller/SellerCard/SellerCard.tsx
 import Box24 from "@mui/material/Box";
-import Typography16 from "@mui/material/Typography";
+import Typography17 from "@mui/material/Typography";
 import Inventory2OutlinedIcon from "@mui/icons-material/Inventory2Outlined";
 import LocationOnOutlinedIcon from "@mui/icons-material/LocationOnOutlined";
-import { tokens as tokens31 } from "@mitumba/tokens";
+import { tokens as tokens32 } from "@mitumba/tokens";
 
 // src/components/vazi/VAZIBadge/VAZIBadge.tsx
+import Typography16 from "@mui/material/Typography";
 import AutoAwesomeIcon2 from "@mui/icons-material/AutoAwesome";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { tokens as tokens31 } from "@mitumba/tokens";
+import { jsx as jsx31, jsxs as jsxs19 } from "react/jsx-runtime";
 function VAZIBadge({ size = "small" }) {
-  return /* @__PURE__ */ jsx31(
-    MitumbaChip,
+  const isLarge = size === "medium";
+  return /* @__PURE__ */ jsxs19(
+    MitumbaGlass,
     {
-      label: "VAZI Curation",
-      status: "special",
-      variant: "solid",
-      size,
-      icon: /* @__PURE__ */ jsx31(AutoAwesomeIcon2, {}),
-      color: "purple"
+      rounding: "full",
+      blur: 8,
+      opacity: 0.9,
+      sx: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 0.8,
+        px: isLarge ? 2 : 1.5,
+        py: 0.6,
+        backgroundColor: "rgba(255, 255, 255, 0.95)",
+        boxShadow: "0 2px 8px rgba(160, 98, 53, 0.15)",
+        border: `1px solid rgba(160, 98, 53, 0.2)`
+      },
+      role: "status",
+      children: [
+        /* @__PURE__ */ jsx31(
+          AutoAwesomeIcon2,
+          {
+            sx: {
+              fontSize: isLarge ? 18 : 14,
+              color: tokens31.colors.earth,
+              animation: "vazi-pulse 3s infinite ease-in-out",
+              "@keyframes vazi-pulse": {
+                "0%, 100%": { transform: "scale(1) rotate(0deg)", opacity: 1 },
+                "50%": { transform: "scale(1.2) rotate(10deg)", opacity: 0.8 }
+              }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx31(
+          Typography16,
+          {
+            sx: {
+              fontSize: isLarge ? 12 : 10,
+              fontWeight: 900,
+              color: tokens31.colors.earth,
+              fontFamily: tokens31.typography.fontFamily,
+              textTransform: "uppercase",
+              letterSpacing: "0.08em",
+              lineHeight: 1
+            },
+            children: "VAZI"
+          }
+        )
+      ]
     }
   );
 }
 
 // src/components/seller/SellerCard/SellerCard.tsx
-import { jsx as jsx32, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs20 } from "react/jsx-runtime";
 function SellerCard({
   name,
   avatarUrl,
@@ -2894,7 +2990,7 @@ function SellerCard({
   isVaziFeatured = false,
   onTap
 }) {
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs20(
     Box24,
     {
       onClick: onTap,
@@ -2910,75 +3006,75 @@ function SellerCard({
       sx: {
         display: "flex",
         alignItems: "center",
-        gap: tokens31.spacing.base,
-        p: tokens31.spacing.base,
-        borderRadius: tokens31.radius.lg,
-        bgcolor: tokens31.colors.surface,
-        boxShadow: tokens31.shadows.card,
-        border: `1px solid ${tokens31.colors.divider}`,
+        gap: tokens32.spacing.base,
+        p: tokens32.spacing.base,
+        borderRadius: tokens32.radius.lg,
+        bgcolor: tokens32.colors.surface,
+        boxShadow: tokens32.shadows.card,
+        border: `1px solid ${tokens32.colors.divider}`,
         cursor: onTap ? "pointer" : "default",
         transition: "all 250ms cubic-bezier(0.4, 0, 0.2, 1)",
         "&:hover": onTap ? {
-          boxShadow: tokens31.shadows.elevated,
+          boxShadow: tokens32.shadows.elevated,
           transform: "translateY(-2px)",
-          borderColor: tokens31.colors.border
+          borderColor: tokens32.colors.border
         } : void 0,
         "&:focus-visible": {
-          outline: `2px solid ${tokens31.colors.greenLight}`,
-          boxShadow: tokens31.shadows.focus
+          outline: `2px solid ${tokens32.colors.greenLight}`,
+          boxShadow: tokens32.shadows.focus
         }
       },
       children: [
         /* @__PURE__ */ jsx32(MitumbaAvatar, { name, imageUrl: avatarUrl, size: "md" }),
-        /* @__PURE__ */ jsxs19(Box24, { sx: { flex: 1, minWidth: 0 }, children: [
-          /* @__PURE__ */ jsxs19(Box24, { sx: { display: "flex", alignItems: "center", gap: tokens31.spacing.sm }, children: [
+        /* @__PURE__ */ jsxs20(Box24, { sx: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ jsxs20(Box24, { sx: { display: "flex", alignItems: "center", gap: tokens32.spacing.sm }, children: [
             /* @__PURE__ */ jsx32(
-              Typography16,
+              Typography17,
               {
                 sx: {
-                  fontWeight: tokens31.typography.fontWeights.bold,
-                  fontSize: tokens31.typography.fontSizes.base,
-                  color: tokens31.colors.textPrimary,
+                  fontWeight: tokens32.typography.fontWeights.bold,
+                  fontSize: tokens32.typography.fontSizes.base,
+                  color: tokens32.colors.textPrimary,
                   lineHeight: 1.2,
                   overflow: "hidden",
                   textOverflow: "ellipsis",
                   whiteSpace: "nowrap",
-                  fontFamily: tokens31.typography.fontFamily
+                  fontFamily: tokens32.typography.fontFamily
                 },
                 children: name
               }
             ),
             isVaziFeatured && /* @__PURE__ */ jsx32(VAZIBadge, { size: "small" })
           ] }),
-          /* @__PURE__ */ jsxs19(Box24, { sx: { display: "flex", alignItems: "center", gap: tokens31.spacing.sm, mt: tokens31.spacing.xs }, children: [
+          /* @__PURE__ */ jsxs20(Box24, { sx: { display: "flex", alignItems: "center", gap: tokens32.spacing.sm, mt: tokens32.spacing.xs }, children: [
             /* @__PURE__ */ jsx32(STIScoreChip, { score: stiScore, compact: true }),
-            /* @__PURE__ */ jsxs19(Box24, { sx: { display: "flex", alignItems: "center", gap: "4px", opacity: 0.7 }, children: [
-              /* @__PURE__ */ jsx32(Inventory2OutlinedIcon, { sx: { fontSize: 14, color: tokens31.colors.textSecondary } }),
+            /* @__PURE__ */ jsxs20(Box24, { sx: { display: "flex", alignItems: "center", gap: "4px", opacity: 0.7 }, children: [
+              /* @__PURE__ */ jsx32(Inventory2OutlinedIcon, { sx: { fontSize: 14, color: tokens32.colors.textSecondary } }),
               /* @__PURE__ */ jsx32(
-                Typography16,
+                Typography17,
                 {
                   sx: {
-                    color: tokens31.colors.textSecondary,
+                    color: tokens32.colors.textSecondary,
                     fontSize: 10,
-                    fontWeight: tokens31.typography.fontWeights.semibold,
+                    fontWeight: tokens32.typography.fontWeights.semibold,
                     textTransform: "uppercase",
-                    letterSpacing: tokens31.typography.letterSpacings.wide
+                    letterSpacing: tokens32.typography.letterSpacings.wide
                   },
                   children: totalListings
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs19(Box24, { sx: { display: "flex", alignItems: "center", gap: "4px", opacity: 0.7 }, children: [
-              /* @__PURE__ */ jsx32(LocationOnOutlinedIcon, { sx: { fontSize: 14, color: tokens31.colors.textSecondary } }),
+            /* @__PURE__ */ jsxs20(Box24, { sx: { display: "flex", alignItems: "center", gap: "4px", opacity: 0.7 }, children: [
+              /* @__PURE__ */ jsx32(LocationOnOutlinedIcon, { sx: { fontSize: 14, color: tokens32.colors.textSecondary } }),
               /* @__PURE__ */ jsx32(
-                Typography16,
+                Typography17,
                 {
                   sx: {
-                    color: tokens31.colors.textSecondary,
+                    color: tokens32.colors.textSecondary,
                     fontSize: 10,
-                    fontWeight: tokens31.typography.fontWeights.semibold,
+                    fontWeight: tokens32.typography.fontWeights.semibold,
                     textTransform: "uppercase",
-                    letterSpacing: tokens31.typography.letterSpacings.wide
+                    letterSpacing: tokens32.typography.letterSpacings.wide
                   },
                   children: city
                 }
@@ -2993,12 +3089,12 @@ function SellerCard({
 
 // src/components/seller/STIBreakdownPanel/STIBreakdownPanel.tsx
 import Box25 from "@mui/material/Box";
-import Typography17 from "@mui/material/Typography";
+import Typography18 from "@mui/material/Typography";
 import LinearProgress2 from "@mui/material/LinearProgress";
 import AddOutlinedIcon from "@mui/icons-material/AddOutlined";
 import RemoveOutlinedIcon from "@mui/icons-material/RemoveOutlined";
-import { tokens as tokens32 } from "@mitumba/tokens";
-import { jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
+import { tokens as tokens33 } from "@mitumba/tokens";
+import { jsx as jsx33, jsxs as jsxs21 } from "react/jsx-runtime";
 function formatPercent(value) {
   return `${Math.round(value * 100)}%`;
 }
@@ -3016,33 +3112,33 @@ function STIBreakdownPanel({
     { label: "Avg Response Time", display: `${avgResponseHours}h` },
     { label: "Days Active", display: `${daysActive}` }
   ];
-  return /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs21(
     Box25,
     {
       sx: {
-        p: tokens32.spacing.base,
-        borderRadius: tokens32.radius.lg,
-        bgcolor: tokens32.colors.surface,
-        boxShadow: tokens32.shadows.card,
-        border: `1px solid ${tokens32.colors.divider}`
+        p: tokens33.spacing.base,
+        borderRadius: tokens33.radius.lg,
+        bgcolor: tokens33.colors.surface,
+        boxShadow: tokens33.shadows.card,
+        border: `1px solid ${tokens33.colors.divider}`
       },
       children: [
-        /* @__PURE__ */ jsx33(Box25, { sx: { display: "flex", alignItems: "center", gap: tokens32.spacing.base, mb: tokens32.spacing.lg }, children: /* @__PURE__ */ jsx33(STIScoreChip, { score }) }),
-        /* @__PURE__ */ jsx33(Box25, { component: "section", "aria-label": "Score factors", sx: { mb: tokens32.spacing.lg }, children: factors.map((factor) => /* @__PURE__ */ jsxs20(Box25, { sx: { mb: tokens32.spacing.md }, children: [
-          /* @__PURE__ */ jsxs20(Box25, { sx: { display: "flex", justifyContent: "space-between", mb: tokens32.spacing.xs }, children: [
+        /* @__PURE__ */ jsx33(Box25, { sx: { display: "flex", alignItems: "center", gap: tokens33.spacing.base, mb: tokens33.spacing.lg }, children: /* @__PURE__ */ jsx33(STIScoreChip, { score }) }),
+        /* @__PURE__ */ jsx33(Box25, { component: "section", "aria-label": "Score factors", sx: { mb: tokens33.spacing.lg }, children: factors.map((factor) => /* @__PURE__ */ jsxs21(Box25, { sx: { mb: tokens33.spacing.md }, children: [
+          /* @__PURE__ */ jsxs21(Box25, { sx: { display: "flex", justifyContent: "space-between", mb: tokens33.spacing.xs }, children: [
             /* @__PURE__ */ jsx33(
-              Typography17,
+              Typography18,
               {
                 variant: "body2",
-                sx: { color: tokens32.colors.textSecondary, fontSize: tokens32.typography.fontSizes.sm },
+                sx: { color: tokens33.colors.textSecondary, fontSize: tokens33.typography.fontSizes.sm },
                 children: factor.label
               }
             ),
             /* @__PURE__ */ jsx33(
-              Typography17,
+              Typography18,
               {
                 variant: "body2",
-                sx: { fontWeight: tokens32.typography.fontWeights.semibold, fontSize: tokens32.typography.fontSizes.sm },
+                sx: { fontWeight: tokens33.typography.fontWeights.semibold, fontSize: tokens33.typography.fontSizes.sm },
                 children: factor.display
               }
             )
@@ -3053,66 +3149,66 @@ function STIBreakdownPanel({
               variant: "determinate",
               value: factor.value * 100,
               sx: {
-                height: tokens32.spacing.sm,
-                borderRadius: tokens32.radius.full,
-                bgcolor: tokens32.colors.background,
+                height: tokens33.spacing.sm,
+                borderRadius: tokens33.radius.full,
+                bgcolor: tokens33.colors.background,
                 "& .MuiLinearProgress-bar": {
-                  bgcolor: tokens32.colors.green,
-                  borderRadius: tokens32.radius.full
+                  bgcolor: tokens33.colors.green,
+                  borderRadius: tokens33.radius.full
                 }
               },
               "aria-label": `${factor.label} progress`
             }
           )
         ] }, factor.label)) }),
-        recentEvents.length > 0 && /* @__PURE__ */ jsxs20(Box25, { component: "section", "aria-label": "Recent STI events", children: [
+        recentEvents.length > 0 && /* @__PURE__ */ jsxs21(Box25, { component: "section", "aria-label": "Recent STI events", children: [
           /* @__PURE__ */ jsx33(
-            Typography17,
+            Typography18,
             {
               variant: "body2",
               sx: {
-                fontWeight: tokens32.typography.fontWeights.semibold,
-                fontSize: tokens32.typography.fontSizes.sm,
-                color: tokens32.colors.textPrimary,
-                mb: tokens32.spacing.sm
+                fontWeight: tokens33.typography.fontWeights.semibold,
+                fontSize: tokens33.typography.fontSizes.sm,
+                color: tokens33.colors.textPrimary,
+                mb: tokens33.spacing.sm
               },
               children: "Recent Events"
             }
           ),
-          recentEvents.map((event) => /* @__PURE__ */ jsxs20(
+          recentEvents.map((event) => /* @__PURE__ */ jsxs21(
             Box25,
             {
               sx: {
                 display: "flex",
                 alignItems: "flex-start",
-                gap: tokens32.spacing.sm,
-                py: tokens32.spacing.sm,
-                borderBottom: `1px solid ${tokens32.colors.divider}`
+                gap: tokens33.spacing.sm,
+                py: tokens33.spacing.sm,
+                borderBottom: `1px solid ${tokens33.colors.divider}`
               },
               children: [
-                event.type === "positive" ? /* @__PURE__ */ jsx33(AddOutlinedIcon, { sx: { fontSize: 16, color: tokens32.colors.success, mt: tokens32.spacing.xs } }) : /* @__PURE__ */ jsx33(RemoveOutlinedIcon, { sx: { fontSize: 16, color: tokens32.colors.error, mt: tokens32.spacing.xs } }),
-                /* @__PURE__ */ jsxs20(Box25, { sx: { flex: 1 }, children: [
-                  /* @__PURE__ */ jsxs20(Box25, { sx: { display: "flex", justifyContent: "space-between" }, children: [
+                event.type === "positive" ? /* @__PURE__ */ jsx33(AddOutlinedIcon, { sx: { fontSize: 16, color: tokens33.colors.success, mt: tokens33.spacing.xs } }) : /* @__PURE__ */ jsx33(RemoveOutlinedIcon, { sx: { fontSize: 16, color: tokens33.colors.error, mt: tokens33.spacing.xs } }),
+                /* @__PURE__ */ jsxs21(Box25, { sx: { flex: 1 }, children: [
+                  /* @__PURE__ */ jsxs21(Box25, { sx: { display: "flex", justifyContent: "space-between" }, children: [
                     /* @__PURE__ */ jsx33(
-                      Typography17,
+                      Typography18,
                       {
                         variant: "body2",
                         sx: {
-                          fontSize: tokens32.typography.fontSizes.sm,
-                          color: tokens32.colors.textPrimary,
-                          fontWeight: tokens32.typography.fontWeights.medium
+                          fontSize: tokens33.typography.fontSizes.sm,
+                          color: tokens33.colors.textPrimary,
+                          fontWeight: tokens33.typography.fontWeights.medium
                         },
                         children: event.reason
                       }
                     ),
-                    /* @__PURE__ */ jsxs20(
-                      Typography17,
+                    /* @__PURE__ */ jsxs21(
+                      Typography18,
                       {
                         variant: "caption",
                         sx: {
-                          fontSize: tokens32.typography.fontSizes.xs,
-                          fontWeight: tokens32.typography.fontWeights.bold,
-                          color: event.type === "positive" ? tokens32.colors.success : tokens32.colors.error
+                          fontSize: tokens33.typography.fontSizes.xs,
+                          fontWeight: tokens33.typography.fontWeights.bold,
+                          color: event.type === "positive" ? tokens33.colors.success : tokens33.colors.error
                         },
                         children: [
                           event.type === "positive" ? "+" : "",
@@ -3121,7 +3217,7 @@ function STIBreakdownPanel({
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsx33(Typography17, { variant: "caption", sx: { fontSize: tokens32.typography.fontSizes.xs, color: tokens32.colors.textSecondary }, children: event.timestamp })
+                  /* @__PURE__ */ jsx33(Typography18, { variant: "caption", sx: { fontSize: tokens33.typography.fontSizes.xs, color: tokens33.colors.textSecondary }, children: event.timestamp })
                 ] })
               ]
             },
@@ -3136,14 +3232,14 @@ function STIBreakdownPanel({
 // src/components/listing/ListingCard/ListingCard.tsx
 import { useState as useState7 } from "react";
 import Box26 from "@mui/material/Box";
-import Typography18 from "@mui/material/Typography";
+import Typography19 from "@mui/material/Typography";
 import Stack4 from "@mui/material/Stack";
 import IconButton6 from "@mui/material/IconButton";
 import FavoriteIcon from "@mui/icons-material/Favorite";
 import FavoriteBorderIcon from "@mui/icons-material/FavoriteBorder";
 import ArrowOutwardIcon from "@mui/icons-material/ArrowOutward";
-import { tokens as tokens33 } from "@mitumba/tokens";
-import { jsx as jsx34, jsxs as jsxs21 } from "react/jsx-runtime";
+import { tokens as tokens34 } from "@mitumba/tokens";
+import { jsx as jsx34, jsxs as jsxs22 } from "react/jsx-runtime";
 function ListingCard({
   images,
   title,
@@ -3168,15 +3264,15 @@ function ListingCard({
     e.stopPropagation();
     onLikeClick?.(e);
   };
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(
     Box26,
     {
       onClick,
       sx: [
         {
           width: "100%",
-          backgroundColor: tokens33.colors.surface,
-          borderRadius: `${tokens33.radius.lg}px`,
+          backgroundColor: tokens34.colors.surface,
+          borderRadius: `${tokens34.radius.lg}px`,
           // Standardized to 16px (Serious)
           overflow: "hidden",
           // High-end layered shadow, no clunky borders
@@ -3189,13 +3285,13 @@ function ListingCard({
           position: "relative",
           "&:hover": {
             transform: "translateY(-6px)",
-            boxShadow: tokens33.shadows.deep
+            boxShadow: tokens34.shadows.deep
           }
         },
         ...Array.isArray(sx) ? sx : [sx]
       ],
       children: [
-        /* @__PURE__ */ jsxs21(Box26, { sx: { position: "relative", width: "100%", pt: "100%", backgroundColor: tokens33.colors.background }, children: [
+        /* @__PURE__ */ jsxs22(Box26, { sx: { position: "relative", width: "100%", pt: "100%", backgroundColor: tokens34.colors.background }, children: [
           /* @__PURE__ */ jsx34(
             Box26,
             {
@@ -3224,13 +3320,13 @@ function ListingCard({
                 backdropFilter: "blur(4px)",
                 px: 1.5,
                 py: 0.5,
-                borderRadius: tokens33.radius.full,
+                borderRadius: tokens34.radius.full,
                 fontSize: 10,
                 fontWeight: 800,
-                color: tokens33.colors.textPrimary,
-                fontFamily: tokens33.typography.fontFamily,
+                color: tokens34.colors.textPrimary,
+                fontFamily: tokens34.typography.fontFamily,
                 textTransform: "uppercase",
-                boxShadow: tokens33.shadows.card,
+                boxShadow: tokens34.shadows.card,
                 zIndex: 2
               },
               children: badge
@@ -3245,12 +3341,12 @@ function ListingCard({
                 right: 12,
                 width: 32,
                 height: 32,
-                backgroundColor: tokens33.colors.white,
+                backgroundColor: tokens34.colors.white,
                 borderRadius: "50%",
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center",
-                boxShadow: tokens33.shadows.card,
+                boxShadow: tokens34.shadows.card,
                 p: 0.5,
                 zIndex: 2,
                 "& img": { width: "100%", height: "100%", objectFit: "contain" }
@@ -3268,10 +3364,10 @@ function ListingCard({
                 right: 12,
                 backgroundColor: "rgba(255, 255, 255, 0.9)",
                 backdropFilter: "blur(4px)",
-                boxShadow: tokens33.shadows.card,
-                color: isLiked ? tokens33.colors.error : tokens33.colors.textSecondary,
+                boxShadow: tokens34.shadows.card,
+                color: isLiked ? tokens34.colors.error : tokens34.colors.textSecondary,
                 zIndex: 2,
-                "&:hover": { backgroundColor: tokens33.colors.white, transform: "scale(1.1)" }
+                "&:hover": { backgroundColor: tokens34.colors.white, transform: "scale(1.1)" }
               },
               children: isLiked ? /* @__PURE__ */ jsx34(FavoriteIcon, { sx: { fontSize: 18 } }) : /* @__PURE__ */ jsx34(FavoriteBorderIcon, { sx: { fontSize: 18 } })
             }
@@ -3298,8 +3394,8 @@ function ListingCard({
                   sx: {
                     width: activeImage === i ? 12 : 6,
                     height: 6,
-                    borderRadius: tokens33.radius.full,
-                    backgroundColor: tokens33.colors.white,
+                    borderRadius: tokens34.radius.full,
+                    backgroundColor: tokens34.colors.white,
                     opacity: activeImage === i ? 1 : 0.5,
                     transition: "all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)",
                     cursor: "pointer",
@@ -3311,16 +3407,16 @@ function ListingCard({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs21(Box26, { sx: { p: 2.5 }, children: [
+        /* @__PURE__ */ jsxs22(Box26, { sx: { p: 2.5 }, children: [
           " ",
           /* @__PURE__ */ jsx34(
-            Typography18,
+            Typography19,
             {
               sx: {
-                fontSize: tokens33.typography.fontSizes.base,
+                fontSize: tokens34.typography.fontSizes.base,
                 fontWeight: 800,
-                color: tokens33.colors.textPrimary,
-                fontFamily: tokens33.typography.fontFamily,
+                color: tokens34.colors.textPrimary,
+                fontFamily: tokens34.typography.fontFamily,
                 lineHeight: 1.2,
                 mb: 0.5,
                 whiteSpace: "nowrap",
@@ -3330,13 +3426,13 @@ function ListingCard({
               children: title
             }
           ),
-          (brand || size) && /* @__PURE__ */ jsxs21(
-            Typography18,
+          (brand || size) && /* @__PURE__ */ jsxs22(
+            Typography19,
             {
               sx: {
-                fontSize: tokens33.typography.fontSizes.xs,
-                color: tokens33.colors.textSecondary,
-                fontFamily: tokens33.typography.fontFamily,
+                fontSize: tokens34.typography.fontSizes.xs,
+                color: tokens34.colors.textSecondary,
+                fontFamily: tokens34.typography.fontFamily,
                 fontWeight: 600,
                 mb: 2
               },
@@ -3347,34 +3443,34 @@ function ListingCard({
               ]
             }
           ),
-          /* @__PURE__ */ jsxs21(Stack4, { direction: "row", alignItems: "center", justifyContent: "space-between", spacing: 2, children: [
-            /* @__PURE__ */ jsxs21(
+          /* @__PURE__ */ jsxs22(Stack4, { direction: "row", alignItems: "center", justifyContent: "space-between", spacing: 2, children: [
+            /* @__PURE__ */ jsxs22(
               Box26,
               {
                 sx: {
-                  backgroundColor: tokens33.colors.background,
+                  backgroundColor: tokens34.colors.background,
                   px: 1.5,
                   py: 0.8,
-                  borderRadius: tokens33.radius.full,
-                  fontSize: tokens33.typography.fontSizes.base,
+                  borderRadius: tokens34.radius.full,
+                  fontSize: tokens34.typography.fontSizes.base,
                   fontWeight: 800,
-                  color: tokens33.colors.textPrimary,
-                  fontFamily: tokens33.typography.fontFamily,
+                  color: tokens34.colors.textPrimary,
+                  fontFamily: tokens34.typography.fontFamily,
                   display: "flex",
                   alignItems: "baseline",
                   gap: 0.5
                 },
                 children: [
-                  /* @__PURE__ */ jsx34(Typography18, { component: "span", sx: { fontSize: 10, fontWeight: 900 }, children: "KES" }),
+                  /* @__PURE__ */ jsx34(Typography19, { component: "span", sx: { fontSize: 10, fontWeight: 900 }, children: "KES" }),
                   price.toLocaleString(),
                   originalPrice && /* @__PURE__ */ jsx34(
-                    Typography18,
+                    Typography19,
                     {
                       component: "span",
                       sx: {
                         ml: 0.5,
                         fontSize: 10,
-                        color: tokens33.colors.textDisabled,
+                        color: tokens34.colors.textDisabled,
                         textDecoration: "line-through",
                         fontWeight: 600
                       },
@@ -3394,7 +3490,7 @@ function ListingCard({
                 icon: /* @__PURE__ */ jsx34(ArrowOutwardIcon, { sx: { fontSize: 16 } }),
                 iconPosition: "right",
                 sx: {
-                  borderRadius: tokens33.radius.full,
+                  borderRadius: tokens34.radius.full,
                   px: 2.5,
                   height: 32,
                   // Forced small height for density
@@ -3412,16 +3508,16 @@ function ListingCard({
 
 // src/components/listing/ListingCardSkeleton/ListingCardSkeleton.tsx
 import Box27 from "@mui/material/Box";
-import { tokens as tokens34 } from "@mitumba/tokens";
-import { jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
+import { tokens as tokens35 } from "@mitumba/tokens";
+import { jsx as jsx35, jsxs as jsxs23 } from "react/jsx-runtime";
 function ListingCardSkeleton() {
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23(
     Box27,
     {
       sx: {
         width: "100%",
-        backgroundColor: tokens34.colors.surface,
-        borderRadius: `${tokens34.radius.lg}px`,
+        backgroundColor: tokens35.colors.surface,
+        borderRadius: `${tokens35.radius.lg}px`,
         // 16px (Serious Standard)
         overflow: "hidden",
         boxShadow: `
@@ -3437,7 +3533,7 @@ function ListingCardSkeleton() {
             sx: { position: "absolute", inset: 0, height: "100%", width: "100%" }
           }
         ) }),
-        /* @__PURE__ */ jsxs22(Box27, { sx: { p: 2.5 }, children: [
+        /* @__PURE__ */ jsxs23(Box27, { sx: { p: 2.5 }, children: [
           /* @__PURE__ */ jsx35(
             MitumbaSkeleton,
             {
@@ -3456,7 +3552,7 @@ function ListingCardSkeleton() {
               sx: { mb: 3, borderRadius: 1 }
             }
           ),
-          /* @__PURE__ */ jsxs22(Box27, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+          /* @__PURE__ */ jsxs23(Box27, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
             /* @__PURE__ */ jsx35(
               MitumbaSkeleton,
               {
@@ -3515,8 +3611,8 @@ function ListingGrid({
 // src/components/listing/ListingImageGallery/ListingImageGallery.tsx
 import { useState as useState8, useCallback as useCallback2, useEffect as useEffect4 } from "react";
 import Box29 from "@mui/material/Box";
-import { tokens as tokens35 } from "@mitumba/tokens";
-import { jsx as jsx37, jsxs as jsxs23 } from "react/jsx-runtime";
+import { tokens as tokens36 } from "@mitumba/tokens";
+import { jsx as jsx37, jsxs as jsxs24 } from "react/jsx-runtime";
 function ListingImageGallery({ images, title }) {
   const [activeIndex, setActiveIndex] = useState8(0);
   const goTo = useCallback2(
@@ -3549,26 +3645,26 @@ function ListingImageGallery({ images, title }) {
         sx: {
           alignItems: "center",
           aspectRatio: "1 / 1",
-          backgroundColor: tokens35.colors.background,
-          borderRadius: `${tokens35.radius.lg}px`,
-          color: tokens35.colors.textSecondary,
+          backgroundColor: tokens36.colors.background,
+          borderRadius: `${tokens36.radius.lg}px`,
+          color: tokens36.colors.textSecondary,
           display: "flex",
-          fontSize: tokens35.typography.fontSizes.base,
+          fontSize: tokens36.typography.fontSizes.base,
           justifyContent: "center",
           width: "100%",
-          border: `1px dashed ${tokens35.colors.divider}`
+          border: `1px dashed ${tokens36.colors.divider}`
         },
         children: "No images available"
       }
     );
   }
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs24(
     Box29,
     {
       sx: {
         display: "flex",
         flexDirection: "column",
-        gap: tokens35.spacing.base,
+        gap: tokens36.spacing.base,
         width: "100%"
       },
       children: [
@@ -3577,11 +3673,11 @@ function ListingImageGallery({ images, title }) {
           {
             sx: {
               aspectRatio: "1 / 1",
-              borderRadius: `${tokens35.radius.lg}px`,
+              borderRadius: `${tokens36.radius.lg}px`,
               overflow: "hidden",
               position: "relative",
               width: "100%",
-              backgroundColor: tokens35.colors.background,
+              backgroundColor: tokens36.colors.background,
               boxShadow: `
             0 2px 4px 0 rgba(0, 0, 0, 0.05),
             0 8px 16px -4px rgba(0, 0, 0, 0.1)
@@ -3629,8 +3725,8 @@ function ListingImageGallery({ images, title }) {
                 role: "button",
                 tabIndex: 0,
                 sx: {
-                  border: index === activeIndex ? `2px solid ${tokens35.colors.green}` : `2px solid transparent`,
-                  borderRadius: `${tokens35.radius.md}px`,
+                  border: index === activeIndex ? `2px solid ${tokens36.colors.green}` : `2px solid transparent`,
+                  borderRadius: `${tokens36.radius.md}px`,
                   cursor: "pointer",
                   flexShrink: 0,
                   height: 56,
@@ -3645,7 +3741,7 @@ function ListingImageGallery({ images, title }) {
                   },
                   "&:focus-visible": {
                     outline: "none",
-                    boxShadow: tokens35.shadows.focus
+                    boxShadow: tokens36.shadows.focus
                   }
                 },
                 "aria-label": `View image ${index + 1} of ${images.length}`,
@@ -3696,33 +3792,33 @@ function ConditionBadge({ grade, showLabel = false }) {
 }
 
 // src/components/commerce/PriceTag/PriceTag.tsx
-import Typography19 from "@mui/material/Typography";
-import { tokens as tokens36 } from "@mitumba/tokens";
+import Typography20 from "@mui/material/Typography";
+import { tokens as tokens37 } from "@mitumba/tokens";
 import { jsx as jsx39 } from "react/jsx-runtime";
 function PriceTag({ priceKes, size = "medium", color = "default", strikethrough = false }) {
   const formattedNumber = new Intl.NumberFormat("en-KE").format(priceKes);
   const formatted = `KES ${formattedNumber}`;
   const sizeStyles = {
     small: {
-      fontSize: tokens36.typography.fontSizes.sm,
-      fontWeight: tokens36.typography.fontWeights.semibold
+      fontSize: tokens37.typography.fontSizes.sm,
+      fontWeight: tokens37.typography.fontWeights.semibold
     },
     medium: {
-      fontSize: tokens36.typography.fontSizes.base,
-      fontWeight: tokens36.typography.fontWeights.bold
+      fontSize: tokens37.typography.fontSizes.base,
+      fontWeight: tokens37.typography.fontWeights.bold
     },
     large: {
-      fontSize: tokens36.typography.fontSizes.xl,
-      fontWeight: tokens36.typography.fontWeights.extrabold
+      fontSize: tokens37.typography.fontSizes.xl,
+      fontWeight: tokens37.typography.fontWeights.extrabold
     }
   };
   const colorMap = {
-    green: tokens36.colors.green,
-    earth: tokens36.colors.earth,
-    default: tokens36.colors.textPrimary
+    green: tokens37.colors.green,
+    earth: tokens37.colors.earth,
+    default: tokens37.colors.textPrimary
   };
   return /* @__PURE__ */ jsx39(
-    Typography19,
+    Typography20,
     {
       component: "span",
       sx: {
@@ -3760,12 +3856,12 @@ function DeliveryBadge({ type, estimatedDays }) {
 
 // src/components/commerce/CartItem/CartItem.tsx
 import Box30 from "@mui/material/Box";
-import Typography20 from "@mui/material/Typography";
+import Typography21 from "@mui/material/Typography";
 import IconButton7 from "@mui/material/IconButton";
 import CloseIcon4 from "@mui/icons-material/Close";
 import Stack5 from "@mui/material/Stack";
-import { tokens as tokens37 } from "@mitumba/tokens";
-import { jsx as jsx41, jsxs as jsxs24 } from "react/jsx-runtime";
+import { tokens as tokens38 } from "@mitumba/tokens";
+import { jsx as jsx41, jsxs as jsxs25 } from "react/jsx-runtime";
 function CartItem({
   imageUrl,
   title,
@@ -3779,15 +3875,15 @@ function CartItem({
   onSizeChange,
   sx
 }) {
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs25(
     Box30,
     {
       sx: [
         {
           display: "flex",
           width: "100%",
-          backgroundColor: tokens37.colors.surface,
-          borderRadius: `${tokens37.radius.lg}px`,
+          backgroundColor: tokens38.colors.surface,
+          borderRadius: `${tokens38.radius.lg}px`,
           // 16px (Serious Standard)
           p: { xs: 2, md: 3 },
           boxShadow: `
@@ -3796,10 +3892,10 @@ function CartItem({
           `,
           transition: "all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)",
           position: "relative",
-          border: `1px solid ${tokens37.colors.divider}`,
+          border: `1px solid ${tokens38.colors.divider}`,
           "&:hover": {
             transform: "translateY(-4px)",
-            boxShadow: tokens37.shadows.deep
+            boxShadow: tokens38.shadows.deep
           }
         },
         ...Array.isArray(sx) ? sx : [sx]
@@ -3811,9 +3907,9 @@ function CartItem({
             sx: {
               width: { xs: 80, sm: 120, md: 140 },
               height: { xs: 80, sm: 120, md: 140 },
-              borderRadius: `${tokens37.radius.md}px`,
+              borderRadius: `${tokens38.radius.md}px`,
               overflow: "hidden",
-              backgroundColor: tokens37.colors.background,
+              backgroundColor: tokens38.colors.background,
               flexShrink: 0
             },
             children: /* @__PURE__ */ jsx41(
@@ -3827,7 +3923,7 @@ function CartItem({
             )
           }
         ),
-        /* @__PURE__ */ jsxs24(
+        /* @__PURE__ */ jsxs25(
           Box30,
           {
             sx: {
@@ -3840,15 +3936,15 @@ function CartItem({
               gap: { xs: 2, lg: 4 }
             },
             children: [
-              /* @__PURE__ */ jsxs24(Box30, { sx: { flex: 1.5 }, children: [
+              /* @__PURE__ */ jsxs25(Box30, { sx: { flex: 1.5 }, children: [
                 /* @__PURE__ */ jsx41(
-                  Typography20,
+                  Typography21,
                   {
                     sx: {
-                      fontSize: tokens37.typography.fontSizes.lg,
+                      fontSize: tokens38.typography.fontSizes.lg,
                       fontWeight: 900,
-                      color: tokens37.colors.textPrimary,
-                      fontFamily: tokens37.typography.fontFamily,
+                      color: tokens38.colors.textPrimary,
+                      fontFamily: tokens38.typography.fontFamily,
                       textTransform: "uppercase",
                       lineHeight: 1.1,
                       mb: 0.5
@@ -3857,12 +3953,12 @@ function CartItem({
                   }
                 ),
                 subtitle && /* @__PURE__ */ jsx41(
-                  Typography20,
+                  Typography21,
                   {
                     variant: "caption",
                     sx: {
                       display: "block",
-                      color: tokens37.colors.textSecondary,
+                      color: tokens38.colors.textSecondary,
                       fontWeight: 700,
                       textTransform: "uppercase",
                       fontSize: 10
@@ -3871,12 +3967,12 @@ function CartItem({
                   }
                 ),
                 /* @__PURE__ */ jsx41(
-                  Typography20,
+                  Typography21,
                   {
                     variant: "caption",
                     sx: {
                       display: "block",
-                      color: tokens37.colors.green,
+                      color: tokens38.colors.green,
                       fontWeight: 800,
                       fontSize: 9,
                       mt: 1,
@@ -3887,9 +3983,9 @@ function CartItem({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs24(Stack5, { direction: "row", spacing: { xs: 2, sm: 4, md: 6 }, alignItems: "center", sx: { width: { xs: "100%", lg: "auto" } }, children: [
-                /* @__PURE__ */ jsxs24(Box30, { sx: { width: 80 }, children: [
-                  /* @__PURE__ */ jsx41(Typography20, { variant: "caption", sx: { display: "block", mb: 1.5, fontWeight: 700, color: tokens37.colors.textDisabled, fontSize: 10 }, children: "SIZE" }),
+              /* @__PURE__ */ jsxs25(Stack5, { direction: "row", spacing: { xs: 2, sm: 4, md: 6 }, alignItems: "center", sx: { width: { xs: "100%", lg: "auto" } }, children: [
+                /* @__PURE__ */ jsxs25(Box30, { sx: { width: 80 }, children: [
+                  /* @__PURE__ */ jsx41(Typography21, { variant: "caption", sx: { display: "block", mb: 1.5, fontWeight: 700, color: tokens38.colors.textDisabled, fontSize: 10 }, children: "SIZE" }),
                   /* @__PURE__ */ jsx41(
                     MitumbaSelect,
                     {
@@ -3902,8 +3998,8 @@ function CartItem({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs24(Box30, { sx: { width: 80 }, children: [
-                  /* @__PURE__ */ jsx41(Typography20, { variant: "caption", sx: { display: "block", mb: 1.5, fontWeight: 700, color: tokens37.colors.textDisabled, fontSize: 10 }, children: "QUANTITY" }),
+                /* @__PURE__ */ jsxs25(Box30, { sx: { width: 80 }, children: [
+                  /* @__PURE__ */ jsx41(Typography21, { variant: "caption", sx: { display: "block", mb: 1.5, fontWeight: 700, color: tokens38.colors.textDisabled, fontSize: 10 }, children: "QUANTITY" }),
                   /* @__PURE__ */ jsx41(
                     MitumbaSelect,
                     {
@@ -3916,9 +4012,9 @@ function CartItem({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs24(Box30, { sx: { textAlign: "right", minWidth: 100 }, children: [
-                  /* @__PURE__ */ jsx41(Typography20, { variant: "caption", sx: { display: "block", mb: 1.5, fontWeight: 700, color: tokens37.colors.textDisabled, fontSize: 10 }, children: "PRICE" }),
-                  /* @__PURE__ */ jsxs24(Typography20, { sx: { fontWeight: 900, color: tokens37.colors.textPrimary, fontSize: tokens37.typography.fontSizes.base, fontFamily: tokens37.typography.fontFamily }, children: [
+                /* @__PURE__ */ jsxs25(Box30, { sx: { textAlign: "right", minWidth: 100 }, children: [
+                  /* @__PURE__ */ jsx41(Typography21, { variant: "caption", sx: { display: "block", mb: 1.5, fontWeight: 700, color: tokens38.colors.textDisabled, fontSize: 10 }, children: "PRICE" }),
+                  /* @__PURE__ */ jsxs25(Typography21, { sx: { fontWeight: 900, color: tokens38.colors.textPrimary, fontSize: tokens38.typography.fontSizes.base, fontFamily: tokens38.typography.fontFamily }, children: [
                     "KES ",
                     priceKes.toLocaleString()
                   ] })
@@ -3935,10 +4031,10 @@ function CartItem({
               position: "absolute",
               top: 8,
               right: 8,
-              color: tokens37.colors.textDisabled,
+              color: tokens38.colors.textDisabled,
               "&:hover": {
-                color: tokens37.colors.error,
-                backgroundColor: tokens37.colors.errorLight,
+                color: tokens38.colors.error,
+                backgroundColor: tokens38.colors.errorLight,
                 transform: "rotate(90deg)"
               },
               transition: "all 0.3s ease"
@@ -3954,11 +4050,11 @@ function CartItem({
 
 // src/components/commerce/OrderStatusTimeline/OrderStatusTimeline.tsx
 import Box31 from "@mui/material/Box";
-import Typography21 from "@mui/material/Typography";
+import Typography22 from "@mui/material/Typography";
 import CheckCircleOutlinedIcon from "@mui/icons-material/CheckCircleOutlined";
 import RadioButtonUncheckedOutlinedIcon from "@mui/icons-material/RadioButtonUncheckedOutlined";
-import { tokens as tokens38 } from "@mitumba/tokens";
-import { jsx as jsx42, jsxs as jsxs25 } from "react/jsx-runtime";
+import { tokens as tokens39 } from "@mitumba/tokens";
+import { jsx as jsx42, jsxs as jsxs26 } from "react/jsx-runtime";
 var ORDER_STATUS_ORDER = [
   "CREATED",
   "PAYMENT_PENDING",
@@ -3983,26 +4079,26 @@ function OrderStatusTimeline({ currentStatus, events }) {
   const currentIndex = ORDER_STATUS_ORDER.indexOf(currentStatus);
   const lastEvent = events.length > 0 ? events[events.length - 1] : null;
   const currentNote = lastEvent?.note;
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs26(
     Box31,
     {
       sx: {
-        p: tokens38.spacing.base,
-        borderRadius: tokens38.radius.lg,
-        bgcolor: tokens38.colors.surface,
-        boxShadow: tokens38.shadows.card,
-        border: `1px solid ${tokens38.colors.divider}`
+        p: tokens39.spacing.base,
+        borderRadius: tokens39.radius.lg,
+        bgcolor: tokens39.colors.surface,
+        boxShadow: tokens39.shadows.card,
+        border: `1px solid ${tokens39.colors.divider}`
       },
       children: [
-        /* @__PURE__ */ jsxs25(Box31, { sx: { display: "flex", alignItems: "center", gap: tokens38.spacing.sm, mb: tokens38.spacing.base }, children: [
+        /* @__PURE__ */ jsxs26(Box31, { sx: { display: "flex", alignItems: "center", gap: tokens39.spacing.sm, mb: tokens39.spacing.base }, children: [
           /* @__PURE__ */ jsx42(
-            Typography21,
+            Typography22,
             {
               sx: {
-                fontWeight: tokens38.typography.fontWeights.bold,
-                fontSize: tokens38.typography.fontSizes.md,
-                color: tokens38.colors.textPrimary,
-                fontFamily: tokens38.typography.fontFamily
+                fontWeight: tokens39.typography.fontWeights.bold,
+                fontSize: tokens39.typography.fontSizes.md,
+                color: tokens39.colors.textPrimary,
+                fontFamily: tokens39.typography.fontFamily
               },
               children: "Order Tracking"
             }
@@ -4011,15 +4107,15 @@ function OrderStatusTimeline({ currentStatus, events }) {
             Box31,
             {
               sx: {
-                px: tokens38.spacing.sm,
+                px: tokens39.spacing.sm,
                 py: "2px",
-                borderRadius: tokens38.radius.sm,
-                bgcolor: tokens38.colors.greenLight,
-                color: tokens38.colors.greenDark,
+                borderRadius: tokens39.radius.sm,
+                bgcolor: tokens39.colors.greenLight,
+                color: tokens39.colors.greenDark,
                 fontSize: 10,
-                fontWeight: tokens38.typography.fontWeights.extrabold,
+                fontWeight: tokens39.typography.fontWeights.extrabold,
                 textTransform: "uppercase",
-                letterSpacing: tokens38.typography.letterSpacings.wide
+                letterSpacing: tokens39.typography.letterSpacings.wide
               },
               children: ORDER_STATUS_LABELS[currentStatus]
             }
@@ -4029,19 +4125,19 @@ function OrderStatusTimeline({ currentStatus, events }) {
           Box31,
           {
             sx: {
-              p: tokens38.spacing.sm,
-              borderRadius: tokens38.radius.sm,
-              bgcolor: tokens38.colors.background,
-              borderLeft: `3px solid ${tokens38.colors.info}`,
-              mb: tokens38.spacing.lg
+              p: tokens39.spacing.sm,
+              borderRadius: tokens39.radius.sm,
+              bgcolor: tokens39.colors.background,
+              borderLeft: `3px solid ${tokens39.colors.info}`,
+              mb: tokens39.spacing.lg
             },
-            children: /* @__PURE__ */ jsxs25(
-              Typography21,
+            children: /* @__PURE__ */ jsxs26(
+              Typography22,
               {
                 sx: {
-                  color: tokens38.colors.textPrimary,
-                  fontSize: tokens38.typography.fontSizes.sm,
-                  fontFamily: tokens38.typography.fontFamily,
+                  color: tokens39.colors.textPrimary,
+                  fontSize: tokens39.typography.fontSizes.sm,
+                  fontFamily: tokens39.typography.fontFamily,
                   fontStyle: "italic"
                 },
                 children: [
@@ -4058,18 +4154,18 @@ function OrderStatusTimeline({ currentStatus, events }) {
           const isCurrent = status === currentStatus;
           const statusEvents = events.filter((e) => e.status === status);
           const latestEvent = statusEvents.length > 0 ? statusEvents[statusEvents.length - 1] : null;
-          return /* @__PURE__ */ jsxs25(
+          return /* @__PURE__ */ jsxs26(
             Box31,
             {
               component: "li",
               sx: {
                 display: "flex",
                 alignItems: "flex-start",
-                gap: tokens38.spacing.base,
+                gap: tokens39.spacing.base,
                 position: "relative"
               },
               children: [
-                /* @__PURE__ */ jsxs25(
+                /* @__PURE__ */ jsxs26(
                   Box31,
                   {
                     sx: {
@@ -4089,14 +4185,14 @@ function OrderStatusTimeline({ currentStatus, events }) {
                             width: "24px",
                             height: "24px",
                             zIndex: 1,
-                            backgroundColor: tokens38.colors.surface
+                            backgroundColor: tokens39.colors.surface
                           },
                           children: isCompleted ? /* @__PURE__ */ jsx42(
                             CheckCircleOutlinedIcon,
                             {
                               sx: {
                                 fontSize: 20,
-                                color: isCurrent ? tokens38.colors.green : tokens38.colors.textDisabled
+                                color: isCurrent ? tokens39.colors.green : tokens39.colors.textDisabled
                               }
                             }
                           ) : /* @__PURE__ */ jsx42(
@@ -4104,7 +4200,7 @@ function OrderStatusTimeline({ currentStatus, events }) {
                             {
                               sx: {
                                 fontSize: 18,
-                                color: tokens38.colors.divider
+                                color: tokens39.colors.divider
                               }
                             }
                           )
@@ -4116,8 +4212,8 @@ function OrderStatusTimeline({ currentStatus, events }) {
                           sx: {
                             width: "2px",
                             flex: 1,
-                            minHeight: tokens38.spacing.lg,
-                            bgcolor: index < currentIndex ? tokens38.colors.green : tokens38.colors.divider,
+                            minHeight: tokens39.spacing.lg,
+                            bgcolor: index < currentIndex ? tokens39.colors.green : tokens39.colors.divider,
                             marginBlock: "2px"
                           }
                         }
@@ -4125,27 +4221,27 @@ function OrderStatusTimeline({ currentStatus, events }) {
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsxs25(Box31, { sx: { pt: "2px", pb: tokens38.spacing.lg }, children: [
+                /* @__PURE__ */ jsxs26(Box31, { sx: { pt: "2px", pb: tokens39.spacing.lg }, children: [
                   /* @__PURE__ */ jsx42(
-                    Typography21,
+                    Typography22,
                     {
                       sx: {
-                        fontWeight: isCurrent ? tokens38.typography.fontWeights.bold : tokens38.typography.fontWeights.medium,
-                        fontSize: tokens38.typography.fontSizes.sm,
-                        fontFamily: tokens38.typography.fontFamily,
-                        color: isCompleted ? tokens38.colors.textPrimary : tokens38.colors.textDisabled,
+                        fontWeight: isCurrent ? tokens39.typography.fontWeights.bold : tokens39.typography.fontWeights.medium,
+                        fontSize: tokens39.typography.fontSizes.sm,
+                        fontFamily: tokens39.typography.fontFamily,
+                        color: isCompleted ? tokens39.colors.textPrimary : tokens39.colors.textDisabled,
                         lineHeight: 1
                       },
                       children: ORDER_STATUS_LABELS[status]
                     }
                   ),
                   latestEvent && /* @__PURE__ */ jsx42(
-                    Typography21,
+                    Typography22,
                     {
                       sx: {
-                        color: tokens38.colors.textSecondary,
+                        color: tokens39.colors.textSecondary,
                         fontSize: 10,
-                        fontFamily: tokens38.typography.fontFamily,
+                        fontFamily: tokens39.typography.fontFamily,
                         mt: "4px"
                       },
                       children: latestEvent.timestamp
@@ -4217,13 +4313,14 @@ function EscrowStatusBanner({ status, amountKes = 0, hoursRemaining, sx }) {
 }
 
 // src/components/vazi/VAZIOutfitCard/VAZIOutfitCard.tsx
-import Box32 from "@mui/material/Box";
-import Card from "@mui/material/Card";
-import CardContent from "@mui/material/CardContent";
-import Typography22 from "@mui/material/Typography";
-import { tokens as tokens39 } from "@mitumba/tokens";
 import { useCallback as useCallback3 } from "react";
-import { jsx as jsx44, jsxs as jsxs26 } from "react/jsx-runtime";
+import Box32 from "@mui/material/Box";
+import Typography23 from "@mui/material/Typography";
+import Stack6 from "@mui/material/Stack";
+import AutoAwesomeIcon3 from "@mui/icons-material/AutoAwesome";
+import LocalShippingIcon3 from "@mui/icons-material/LocalShipping";
+import { tokens as tokens40 } from "@mitumba/tokens";
+import { Fragment, jsx as jsx44, jsxs as jsxs27 } from "react/jsx-runtime";
 function VAZIOutfitCard({
   outfitName,
   items,
@@ -4242,240 +4339,212 @@ function VAZIOutfitCard({
     },
     [onTap]
   );
-  return /* @__PURE__ */ jsxs26(
-    Card,
+  return /* @__PURE__ */ jsxs27(
+    Box32,
     {
       onClick: onTap,
       onKeyDown: handleKeyDown,
       role: "button",
       tabIndex: onTap ? 0 : -1,
       sx: {
-        borderRadius: tokens39.radius.lg,
-        boxShadow: tokens39.shadows.card,
+        width: "100%",
+        position: "relative",
         cursor: onTap ? "pointer" : "default",
-        display: "flex",
-        flexDirection: "column",
+        borderRadius: `${tokens40.radius.lg}px`,
         overflow: "hidden",
-        transition: "all 250ms cubic-bezier(0.4, 0, 0.2, 1)",
-        width: "100%",
-        backgroundColor: tokens39.colors.surface,
-        border: `1px solid ${tokens39.colors.divider}`,
-        "&:hover": onTap ? {
-          transform: "translateY(-4px)",
-          boxShadow: tokens39.shadows.elevated,
-          borderColor: tokens39.colors.earthLight
-        } : void 0,
-        "&:focus-visible": {
-          outline: `2px solid ${tokens39.colors.earthLight}`,
-          boxShadow: tokens39.shadows.focus
+        backgroundColor: tokens40.colors.surface,
+        boxShadow: `
+          0 4px 12px 0 rgba(0, 0, 0, 0.05),
+          0 12px 32px 0 rgba(31, 38, 135, 0.1)
+        `,
+        transition: "all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)",
+        "&:hover": {
+          transform: "translateY(-8px) scale(1.01)",
+          boxShadow: tokens40.shadows.deep,
+          "& .collage-image-2": { transform: "rotate(4deg) translate(8px, -4px)" },
+          "& .collage-image-3": { transform: "rotate(-4deg) translate(-8px, -4px)" }
         }
       },
       children: [
-        /* @__PURE__ */ jsxs26(
-          Box32,
-          {
-            sx: {
-              alignItems: "center",
-              display: "flex",
-              gap: tokens39.spacing.sm,
-              paddingInline: tokens39.spacing.base,
-              paddingBlock: tokens39.spacing.base,
-              borderBottom: `1px solid ${tokens39.colors.background}`
-            },
-            children: [
-              /* @__PURE__ */ jsx44(VAZIBadge, { size: "small" }),
-              /* @__PURE__ */ jsx44(
-                Typography22,
-                {
-                  sx: {
-                    color: tokens39.colors.textPrimary,
-                    flex: 1,
-                    fontSize: tokens39.typography.fontSizes.base,
-                    fontWeight: tokens39.typography.fontWeights.bold,
-                    lineHeight: tokens39.typography.lineHeights.snug,
-                    overflow: "hidden",
-                    textOverflow: "ellipsis",
-                    whiteSpace: "nowrap"
-                  },
-                  children: outfitName
-                }
-              )
-            ]
-          }
-        ),
         /* @__PURE__ */ jsx44(
           Box32,
           {
             sx: {
-              display: "flex",
-              gap: tokens39.spacing.sm,
-              overflowX: "auto",
-              padding: tokens39.spacing.base,
-              backgroundColor: tokens39.colors.background,
-              scrollbarWidth: "none",
-              msOverflowStyle: "none",
-              "&::-webkit-scrollbar": {
-                display: "none"
-              }
+              position: "absolute",
+              top: 12,
+              left: 12,
+              zIndex: 10
             },
-            children: items.map((item) => /* @__PURE__ */ jsxs26(
-              Box32,
-              {
-                sx: {
-                  flexShrink: 0,
-                  width: "88px"
-                },
-                children: [
-                  /* @__PURE__ */ jsx44(
-                    Box32,
-                    {
-                      sx: {
-                        aspectRatio: "3 / 4",
-                        borderRadius: tokens39.radius.sm,
-                        overflow: "hidden",
-                        width: "100%",
-                        backgroundColor: tokens39.colors.surface,
-                        border: `1px solid ${tokens39.colors.divider}`
-                      },
-                      children: /* @__PURE__ */ jsx44(
-                        Box32,
-                        {
-                          component: "img",
-                          src: item.imageUrl,
-                          alt: `${item.garmentType} \u2014 ${item.sellerName}`,
-                          loading: "lazy",
-                          sx: {
-                            display: "block",
-                            height: "100%",
-                            objectFit: "cover",
-                            width: "100%"
-                          }
-                        }
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ jsx44(
-                    Typography22,
-                    {
-                      sx: {
-                        color: tokens39.colors.textSecondary,
-                        fontSize: 10,
-                        fontWeight: tokens39.typography.fontWeights.semibold,
-                        textTransform: "uppercase",
-                        letterSpacing: tokens39.typography.letterSpacings.wide,
-                        marginTop: tokens39.spacing.xs,
-                        overflow: "hidden",
-                        textOverflow: "ellipsis",
-                        whiteSpace: "nowrap",
-                        textAlign: "center"
-                      },
-                      children: item.sellerName
-                    }
-                  )
-                ]
-              },
-              item.listingId
-            ))
+            children: /* @__PURE__ */ jsx44(VAZIBadge, { size: "small" })
           }
         ),
-        /* @__PURE__ */ jsxs26(
-          CardContent,
+        /* @__PURE__ */ jsxs27(
+          Box32,
           {
             sx: {
+              position: "relative",
+              width: "100%",
+              height: 280,
+              backgroundColor: tokens40.colors.background,
               display: "flex",
-              flexDirection: "column",
-              gap: tokens39.spacing.sm,
-              padding: tokens39.spacing.base,
-              "&:last-child": {
-                paddingBottom: tokens39.spacing.base
-              }
+              alignItems: "center",
+              justifyContent: "center",
+              overflow: "hidden",
+              p: 3
             },
             children: [
-              /* @__PURE__ */ jsxs26(
+              /* @__PURE__ */ jsx44(
                 Box32,
                 {
                   sx: {
-                    alignItems: "center",
-                    display: "flex",
-                    gap: tokens39.spacing.sm,
-                    justifyContent: "space-between"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx44(PriceTag, { priceKes: totalPriceKes, size: "large", color: "earth" }),
-                    onBuyAll && /* @__PURE__ */ jsx44(Box32, { sx: { flexShrink: 0 }, children: /* @__PURE__ */ jsx44(
-                      MitumbaPrimaryButton,
-                      {
-                        label: "Buy all",
-                        variant: "earth",
-                        size: "small",
-                        fullWidth: false,
-                        onClick: (e) => {
-                          if (e && e.stopPropagation) {
-                            e.stopPropagation();
-                          }
-                          onBuyAll();
-                        }
-                      }
-                    ) })
-                  ]
+                    position: "absolute",
+                    inset: 0,
+                    background: "radial-gradient(circle at center, rgba(160, 98, 53, 0.05) 0%, rgba(255,255,255,0) 70%)",
+                    pointerEvents: "none"
+                  }
                 }
               ),
-              sellersCount > 1 && /* @__PURE__ */ jsxs26(
-                Box32,
-                {
-                  sx: {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: tokens39.spacing.xs,
-                    mt: tokens39.spacing.xs
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxs26(
-                      Typography22,
-                      {
-                        sx: {
-                          color: tokens39.colors.textSecondary,
-                          fontSize: tokens39.typography.fontSizes.sm,
-                          lineHeight: 1
-                        },
-                        children: [
-                          "Ships from ",
-                          sellersCount,
-                          " sellers"
-                        ]
-                      }
-                    ),
-                    isMultiCity && /* @__PURE__ */ jsx44(
+              /* @__PURE__ */ jsx44(Box32, { sx: { position: "relative", width: 140, height: 180 }, children: items.slice(0, 3).map((item, index) => {
+                const isMain = index === 0;
+                let rotation = 0;
+                if (index === 1) rotation = -4;
+                if (index === 2) rotation = 4;
+                let leftOffset = 0;
+                if (index === 1) leftOffset = -12;
+                if (index === 2) leftOffset = 12;
+                return /* @__PURE__ */ jsx44(
+                  Box32,
+                  {
+                    className: `collage-image-${index + 1}`,
+                    sx: {
+                      position: "absolute",
+                      top: isMain ? 0 : 4,
+                      left: isMain ? 0 : leftOffset,
+                      width: "100%",
+                      height: "100%",
+                      borderRadius: `${tokens40.radius.md}px`,
+                      overflow: "hidden",
+                      zIndex: 3 - index,
+                      boxShadow: tokens40.shadows.card,
+                      border: `2px solid ${tokens40.colors.white}`,
+                      transform: `rotate(${rotation}deg)`,
+                      transition: "all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)",
+                      backgroundColor: tokens40.colors.surface
+                    },
+                    children: /* @__PURE__ */ jsx44(
                       Box32,
                       {
-                        component: "span",
-                        sx: {
-                          fontSize: tokens39.typography.fontSizes.xs,
-                          color: tokens39.colors.textDisabled
-                        },
-                        children: "\u2022"
-                      }
-                    ),
-                    isMultiCity && /* @__PURE__ */ jsx44(
-                      Typography22,
-                      {
-                        sx: {
-                          color: tokens39.colors.earth,
-                          fontSize: tokens39.typography.fontSizes.xs,
-                          fontWeight: tokens39.typography.fontWeights.bold,
-                          textTransform: "uppercase",
-                          letterSpacing: tokens39.typography.letterSpacings.wide,
-                          lineHeight: 1
-                        },
-                        children: "Multi-city"
+                        component: "img",
+                        src: item.imageUrl,
+                        alt: item.garmentType,
+                        sx: { width: "100%", height: "100%", objectFit: "cover" }
                       }
                     )
-                  ]
+                  },
+                  item.listingId
+                );
+              }) }),
+              items.length > 3 && /* @__PURE__ */ jsx44(
+                MitumbaGlass,
+                {
+                  rounding: "full",
+                  opacity: 0.8,
+                  blur: 12,
+                  sx: {
+                    position: "absolute",
+                    bottom: 20,
+                    right: 20,
+                    px: 1.5,
+                    py: 0.5,
+                    zIndex: 5
+                  },
+                  children: /* @__PURE__ */ jsxs27(Typography23, { sx: { fontSize: 10, fontWeight: 900, color: tokens40.colors.earth }, children: [
+                    "+",
+                    items.length - 3,
+                    " MORE"
+                  ] })
                 }
               )
             ]
           }
-        )
+        ),
+        /* @__PURE__ */ jsxs27(Box32, { sx: { p: 2.5 }, children: [
+          /* @__PURE__ */ jsx44(
+            Typography23,
+            {
+              sx: {
+                fontSize: tokens40.typography.fontSizes.lg,
+                fontWeight: 900,
+                color: tokens40.colors.textPrimary,
+                fontFamily: tokens40.typography.fontFamily,
+                lineHeight: 1.1,
+                mb: 1,
+                letterSpacing: "-0.01em"
+              },
+              children: outfitName
+            }
+          ),
+          /* @__PURE__ */ jsxs27(Stack6, { direction: "row", spacing: 1, alignItems: "center", sx: { mb: 2.5 }, children: [
+            /* @__PURE__ */ jsxs27(
+              Typography23,
+              {
+                sx: {
+                  fontSize: 11,
+                  fontWeight: 700,
+                  color: tokens40.colors.textSecondary,
+                  textTransform: "uppercase",
+                  letterSpacing: "0.05em"
+                },
+                children: [
+                  sellersCount,
+                  " Sellers"
+                ]
+              }
+            ),
+            isMultiCity && /* @__PURE__ */ jsxs27(Fragment, { children: [
+              /* @__PURE__ */ jsx44(Box32, { sx: { width: 4, height: 4, borderRadius: "50%", bgcolor: tokens40.colors.divider } }),
+              /* @__PURE__ */ jsxs27(Stack6, { direction: "row", spacing: 0.5, alignItems: "center", children: [
+                /* @__PURE__ */ jsx44(LocalShippingIcon3, { sx: { fontSize: 14, color: tokens40.colors.earth } }),
+                /* @__PURE__ */ jsx44(
+                  Typography23,
+                  {
+                    sx: {
+                      fontSize: 10,
+                      fontWeight: 800,
+                      color: tokens40.colors.earth,
+                      textTransform: "uppercase"
+                    },
+                    children: "Multi-City"
+                  }
+                )
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs27(Stack6, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [
+            /* @__PURE__ */ jsxs27(Box32, { children: [
+              /* @__PURE__ */ jsx44(Typography23, { sx: { fontSize: 10, fontWeight: 800, color: tokens40.colors.textDisabled, textTransform: "uppercase", mb: 0.2 }, children: "Total Look" }),
+              /* @__PURE__ */ jsxs27(Typography23, { sx: { fontSize: tokens40.typography.fontSizes.xl, fontWeight: 900, color: tokens40.colors.textPrimary, fontFamily: tokens40.typography.fontFamily }, children: [
+                "KES ",
+                totalPriceKes.toLocaleString()
+              ] })
+            ] }),
+            onBuyAll && /* @__PURE__ */ jsx44(
+              MitumbaPrimaryButton,
+              {
+                label: "Buy entire look",
+                variant: "earth",
+                size: "small",
+                icon: /* @__PURE__ */ jsx44(AutoAwesomeIcon3, { sx: { fontSize: 16 } }),
+                iconPosition: "right",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onBuyAll();
+                },
+                sx: { borderRadius: tokens40.radius.full, height: 36, px: 3 }
+              }
+            )
+          ] })
+        ] })
       ]
     }
   );
@@ -4483,175 +4552,99 @@ function VAZIOutfitCard({
 
 // src/components/vazi/VAZIOutfitCardSkeleton/VAZIOutfitCardSkeleton.tsx
 import Box33 from "@mui/material/Box";
-import Skeleton from "@mui/material/Skeleton";
-import { tokens as tokens40 } from "@mitumba/tokens";
-import { jsx as jsx45, jsxs as jsxs27 } from "react/jsx-runtime";
-var SKELETON_IMAGE_KEYS = ["image-1", "image-2", "image-3", "image-4"];
+import { tokens as tokens41 } from "@mitumba/tokens";
+import { jsx as jsx45, jsxs as jsxs28 } from "react/jsx-runtime";
 function VAZIOutfitCardSkeleton() {
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs28(
     Box33,
     {
       sx: {
-        borderRadius: tokens40.radius.lg,
-        boxShadow: tokens40.shadows.card,
-        display: "flex",
-        flexDirection: "column",
+        borderRadius: `${tokens41.radius.lg}px`,
         overflow: "hidden",
+        backgroundColor: tokens41.colors.surface,
+        boxShadow: tokens41.shadows.card,
         width: "100%"
       },
       children: [
-        /* @__PURE__ */ jsxs27(
+        /* @__PURE__ */ jsx45(
           Box33,
           {
             sx: {
-              alignItems: "center",
+              height: 280,
+              backgroundColor: tokens41.colors.background,
               display: "flex",
-              gap: tokens40.spacing.sm,
-              paddingInline: tokens40.spacing.base,
-              paddingBlock: tokens40.spacing.base
+              alignItems: "center",
+              justifyContent: "center",
+              position: "relative"
             },
-            children: [
+            children: /* @__PURE__ */ jsxs28(Box33, { sx: { position: "relative", width: 140, height: 180 }, children: [
               /* @__PURE__ */ jsx45(
-                Skeleton,
+                MitumbaSkeleton,
                 {
-                  "aria-label": "Loading VAZI label",
-                  variant: "rounded",
+                  variant: "rectangular",
                   sx: {
-                    borderRadius: tokens40.radius.sm,
-                    height: tokens40.spacing.lg,
-                    width: 48
+                    position: "absolute",
+                    inset: 0,
+                    borderRadius: 2,
+                    border: `2px solid ${tokens41.colors.white}`
                   }
                 }
               ),
               /* @__PURE__ */ jsx45(
-                Skeleton,
+                MitumbaSkeleton,
                 {
-                  "aria-label": "Loading outfit name",
-                  variant: "text",
+                  variant: "rectangular",
                   sx: {
-                    flex: 1,
-                    fontSize: tokens40.typography.fontSizes.base
+                    position: "absolute",
+                    top: 4,
+                    left: -12,
+                    width: "100%",
+                    height: "100%",
+                    borderRadius: 2,
+                    zIndex: -1,
+                    transform: "rotate(-4deg)",
+                    opacity: 0.5
                   }
                 }
               )
-            ]
+            ] })
           }
         ),
-        /* @__PURE__ */ jsx45(
-          Box33,
-          {
-            sx: {
-              display: "flex",
-              gap: tokens40.spacing.sm,
-              overflowX: "auto",
-              paddingInline: tokens40.spacing.base,
-              paddingBottom: tokens40.spacing.base,
-              scrollbarWidth: "none",
-              msOverflowStyle: "none",
-              "&::-webkit-scrollbar": {
-                display: "none"
-              }
-            },
-            children: SKELETON_IMAGE_KEYS.map((imgKey) => /* @__PURE__ */ jsxs27(
-              Box33,
+        /* @__PURE__ */ jsxs28(Box33, { sx: { p: 2.5 }, children: [
+          /* @__PURE__ */ jsx45(
+            MitumbaSkeleton,
+            {
+              variant: "rectangular",
+              width: "70%",
+              height: 24,
+              sx: { mb: 1, borderRadius: 1 }
+            }
+          ),
+          /* @__PURE__ */ jsx45(
+            MitumbaSkeleton,
+            {
+              variant: "rectangular",
+              width: "40%",
+              height: 12,
+              sx: { mb: 3, borderRadius: 1 }
+            }
+          ),
+          /* @__PURE__ */ jsxs28(Box33, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+            /* @__PURE__ */ jsxs28(Box33, { children: [
+              /* @__PURE__ */ jsx45(MitumbaSkeleton, { variant: "rectangular", width: 60, height: 10, sx: { mb: 0.5, borderRadius: 0.5 } }),
+              /* @__PURE__ */ jsx45(MitumbaSkeleton, { variant: "rectangular", width: 100, height: 28, sx: { borderRadius: 0.5 } })
+            ] }),
+            /* @__PURE__ */ jsx45(
+              MitumbaSkeleton,
               {
-                sx: {
-                  flexShrink: 0,
-                  width: `${3 / 4 * 100}px`,
-                  minWidth: "88px"
-                },
-                children: [
-                  /* @__PURE__ */ jsx45(
-                    Skeleton,
-                    {
-                      "aria-label": `Loading item image ${imgKey.split("-")[1]}`,
-                      variant: "rounded",
-                      sx: {
-                        aspectRatio: "3 / 4",
-                        borderRadius: tokens40.radius.md,
-                        width: "100%"
-                      }
-                    }
-                  ),
-                  /* @__PURE__ */ jsx45(
-                    Skeleton,
-                    {
-                      "aria-label": `Loading seller name ${imgKey.split("-")[1]}`,
-                      variant: "text",
-                      sx: {
-                        fontSize: tokens40.typography.fontSizes.xs,
-                        marginTop: tokens40.spacing.xs,
-                        width: "80%"
-                      }
-                    }
-                  )
-                ]
-              },
-              imgKey
-            ))
-          }
-        ),
-        /* @__PURE__ */ jsxs27(
-          Box33,
-          {
-            sx: {
-              display: "flex",
-              flexDirection: "column",
-              gap: tokens40.spacing.sm,
-              paddingInline: tokens40.spacing.base,
-              paddingBlock: tokens40.spacing.base
-            },
-            children: [
-              /* @__PURE__ */ jsxs27(
-                Box33,
-                {
-                  sx: {
-                    alignItems: "center",
-                    display: "flex",
-                    gap: tokens40.spacing.sm,
-                    justifyContent: "space-between"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx45(
-                      Skeleton,
-                      {
-                        "aria-label": "Loading total price",
-                        variant: "text",
-                        sx: {
-                          fontSize: tokens40.typography.fontSizes.lg,
-                          width: "40%"
-                        }
-                      }
-                    ),
-                    /* @__PURE__ */ jsx45(
-                      Skeleton,
-                      {
-                        "aria-label": "Loading buy button",
-                        variant: "rounded",
-                        sx: {
-                          borderRadius: tokens40.radius.md,
-                          height: "36px",
-                          width: 100
-                        }
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx45(
-                Skeleton,
-                {
-                  "aria-label": "Loading seller info",
-                  variant: "text",
-                  sx: {
-                    fontSize: tokens40.typography.fontSizes.sm,
-                    width: "60%"
-                  }
-                }
-              )
-            ]
-          }
-        )
+                variant: "rounded",
+                width: 120,
+                height: 36,
+                sx: { borderRadius: 100 }
+              }
+            )
+          ] })
+        ] })
       ]
     }
   );
@@ -4659,132 +4652,115 @@ function VAZIOutfitCardSkeleton() {
 
 // src/components/vazi/VAZIFeedSection/VAZIFeedSection.tsx
 import Box34 from "@mui/material/Box";
-import { tokens as tokens41 } from "@mitumba/tokens";
-import { jsx as jsx46, jsxs as jsxs28 } from "react/jsx-runtime";
-var renderOutfitCards = (outfits) => outfits.map((outfit) => /* @__PURE__ */ jsx46(
-  Box34,
-  {
-    sx: {
-      flexShrink: 0,
-      width: { xs: "82%", md: "100%" },
-      maxWidth: { xs: "340px", md: "none" }
-    },
-    children: /* @__PURE__ */ jsx46(
-      VAZIOutfitCard,
-      {
-        outfitName: outfit.outfitName,
-        items: outfit.items,
-        totalPriceKes: outfit.totalPriceKes,
-        sellersCount: outfit.sellersCount,
-        isMultiCity: outfit.isMultiCity,
-        onTap: outfit.onTap,
-        onBuyAll: outfit.onBuyAll
-      }
-    )
-  },
-  outfit.outfitName
-));
-var renderSkeletons = () => Array.from({ length: 3 }, (_, skeletonIdx) => /* @__PURE__ */ jsx46(
-  Box34,
-  {
-    sx: {
-      flexShrink: 0,
-      width: { xs: "82%", md: "100%" },
-      maxWidth: { xs: "340px", md: "none" }
-    },
-    children: /* @__PURE__ */ jsx46(VAZIOutfitCardSkeleton, {})
-  },
-  `skeleton-${skeletonIdx}`
-));
+import Typography24 from "@mui/material/Typography";
+import Stack7 from "@mui/material/Stack";
+import AutoAwesomeIcon4 from "@mui/icons-material/AutoAwesome";
+import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
+import { tokens as tokens42 } from "@mitumba/tokens";
+import { jsx as jsx46, jsxs as jsxs29 } from "react/jsx-runtime";
 function VAZIFeedSection({ outfits, loading = false, onSeeAll }) {
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs29(
     Box34,
     {
       sx: {
         display: "flex",
         flexDirection: "column",
-        gap: tokens41.spacing.base,
+        gap: 4,
         width: "100%"
       },
       children: [
-        /* @__PURE__ */ jsxs28(
+        /* @__PURE__ */ jsxs29(
           Box34,
           {
             sx: {
-              alignItems: "center",
               display: "flex",
               justifyContent: "space-between",
-              paddingInline: { xs: tokens41.spacing.base, md: 0 }
+              alignItems: "flex-end",
+              paddingInline: { xs: 2, md: 0 }
             },
             children: [
-              /* @__PURE__ */ jsx46(
-                Box34,
-                {
-                  component: "h2",
-                  sx: {
-                    color: tokens41.colors.textPrimary,
-                    fontFamily: tokens41.typography.fontFamily,
-                    fontSize: tokens41.typography.fontSizes.xl,
-                    fontWeight: tokens41.typography.fontWeights.bold,
-                    lineHeight: tokens41.typography.lineHeights.snug,
-                    margin: 0
-                  },
-                  children: "VAZI Picks"
-                }
-              ),
-              onSeeAll && /* @__PURE__ */ jsx46(
+              /* @__PURE__ */ jsxs29(Stack7, { spacing: 1, children: [
+                /* @__PURE__ */ jsxs29(Stack7, { direction: "row", spacing: 1, alignItems: "center", children: [
+                  /* @__PURE__ */ jsx46(AutoAwesomeIcon4, { sx: { fontSize: 18, color: tokens42.colors.earth } }),
+                  /* @__PURE__ */ jsx46(
+                    Typography24,
+                    {
+                      sx: {
+                        fontSize: 12,
+                        fontWeight: 900,
+                        color: tokens42.colors.earth,
+                        textTransform: "uppercase",
+                        letterSpacing: "0.1em"
+                      },
+                      children: "AI Curation"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx46(
+                  Typography24,
+                  {
+                    component: "h2",
+                    sx: {
+                      color: tokens42.colors.textPrimary,
+                      fontFamily: tokens42.typography.fontFamily,
+                      fontSize: tokens42.typography.fontSizes.xxl,
+                      fontWeight: 900,
+                      lineHeight: 1,
+                      margin: 0
+                    },
+                    children: "VAZI Picks for You"
+                  }
+                )
+              ] }),
+              onSeeAll && /* @__PURE__ */ jsxs29(
                 Box34,
                 {
-                  component: "button",
                   onClick: onSeeAll,
                   sx: {
-                    backgroundColor: "transparent",
-                    border: "none",
-                    color: tokens41.colors.earth,
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 1,
+                    color: tokens42.colors.earth,
                     cursor: "pointer",
-                    fontFamily: tokens41.typography.fontFamily,
-                    fontSize: tokens41.typography.fontSizes.base,
-                    fontWeight: tokens41.typography.fontWeights.semibold,
-                    lineHeight: tokens41.typography.lineHeights.normal,
-                    padding: 0,
-                    textDecoration: "none",
-                    transition: "color 200ms ease",
-                    whiteSpace: "nowrap",
+                    transition: "all 0.3s ease",
                     "&:hover": {
-                      color: tokens41.colors.earthDark,
-                      textDecoration: "underline"
-                    },
-                    "&:focus-visible": {
-                      outline: `${tokens41.spacing.xs}px solid transparent`,
-                      boxShadow: tokens41.shadows.focus,
-                      borderRadius: tokens41.radius.sm
+                      gap: 1.5,
+                      color: tokens42.colors.earthDark
                     }
                   },
-                  children: "See all"
+                  children: [
+                    /* @__PURE__ */ jsx46(
+                      Typography24,
+                      {
+                        sx: {
+                          fontSize: 12,
+                          fontWeight: 900,
+                          textTransform: "uppercase",
+                          letterSpacing: "0.05em"
+                        },
+                        children: "Explore All"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx46(ArrowForwardIcon, { sx: { fontSize: 16 } })
+                  ]
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ jsx46(
-          Box34,
+        /* @__PURE__ */ jsx46(MitumbaGrid, { columns: { xs: 1, sm: 2, md: 3, lg: 3 }, gap: 3, children: loading ? Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsx46(VAZIOutfitCardSkeleton, {}, `vazi-skeleton-${i + 1}`)) : outfits.map((outfit) => /* @__PURE__ */ jsx46(
+          VAZIOutfitCard,
           {
-            sx: {
-              display: { xs: "flex", md: "grid" },
-              gridTemplateColumns: { md: "repeat(3, 1fr)" },
-              gap: tokens41.spacing.base,
-              overflowX: { xs: "auto", md: "visible" },
-              paddingInline: { xs: tokens41.spacing.base, md: 0 },
-              paddingBottom: { xs: tokens41.spacing.sm, md: 0 },
-              scrollbarWidth: "none",
-              msOverflowStyle: "none",
-              "&::-webkit-scrollbar": {
-                display: "none"
-              }
-            },
-            children: loading ? renderSkeletons() : renderOutfitCards(outfits)
-          }
-        )
+            outfitName: outfit.outfitName,
+            items: outfit.items,
+            totalPriceKes: outfit.totalPriceKes,
+            sellersCount: outfit.sellersCount,
+            isMultiCity: outfit.isMultiCity,
+            onTap: outfit.onTap,
+            onBuyAll: outfit.onBuyAll
+          },
+          outfit.outfitName
+        )) })
       ]
     }
   );
@@ -4792,90 +4768,71 @@ function VAZIFeedSection({ outfits, loading = false, onSeeAll }) {
 
 // src/components/vazi/CompleteThisLookPanel/CompleteThisLookPanel.tsx
 import Box35 from "@mui/material/Box";
-import Typography23 from "@mui/material/Typography";
-import { tokens as tokens42 } from "@mitumba/tokens";
-import { jsx as jsx47, jsxs as jsxs29 } from "react/jsx-runtime";
+import Typography25 from "@mui/material/Typography";
+import Stack8 from "@mui/material/Stack";
+import AutoAwesomeIcon5 from "@mui/icons-material/AutoAwesome";
+import { tokens as tokens43 } from "@mitumba/tokens";
+import { jsx as jsx47, jsxs as jsxs30 } from "react/jsx-runtime";
 function CompleteThisLookPanel({ outfits, loading = false }) {
   if (!loading && outfits.length === 0) {
     return null;
   }
-  const renderOutfitCards2 = () => outfits.map((outfit) => /* @__PURE__ */ jsx47(
-    Box35,
-    {
-      sx: {
-        flexShrink: 0,
-        width: { xs: "82%", md: "100%" },
-        maxWidth: { xs: "340px", md: "none" }
-      },
-      children: /* @__PURE__ */ jsx47(
-        VAZIOutfitCard,
-        {
-          outfitName: outfit.outfitName,
-          items: outfit.items,
-          totalPriceKes: outfit.totalPriceKes,
-          sellersCount: outfit.sellersCount,
-          isMultiCity: outfit.isMultiCity,
-          onTap: outfit.onTap,
-          onBuyAll: outfit.onBuyAll
-        }
-      )
-    },
-    outfit.outfitName
-  ));
-  const renderSkeletons2 = () => ["skel-0", "skel-1", "skel-2"].map((skelKey) => /* @__PURE__ */ jsx47(
-    Box35,
-    {
-      sx: {
-        flexShrink: 0,
-        width: { xs: "82%", md: "100%" },
-        maxWidth: { xs: "340px", md: "none" }
-      },
-      children: /* @__PURE__ */ jsx47(VAZIOutfitCardSkeleton, {})
-    },
-    skelKey
-  ));
-  return /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs30(
     Box35,
     {
       sx: {
         display: "flex",
         flexDirection: "column",
-        gap: tokens42.spacing.base,
+        gap: 3,
         width: "100%"
       },
       children: [
-        /* @__PURE__ */ jsx47(
-          Typography23,
-          {
-            component: "h2",
-            sx: {
-              color: tokens42.colors.textPrimary,
-              fontSize: tokens42.typography.fontSizes.xl,
-              fontWeight: tokens42.typography.fontWeights.bold,
-              lineHeight: tokens42.typography.lineHeights.snug,
-              margin: 0
-            },
-            children: "Complete this look"
-          }
-        ),
-        /* @__PURE__ */ jsx47(
-          Box35,
-          {
-            sx: {
-              display: { xs: "flex", md: "grid" },
-              gridTemplateColumns: { md: "repeat(3, 1fr)" },
-              gap: tokens42.spacing.base,
-              overflowX: { xs: "auto", md: "visible" },
-              paddingBottom: { xs: tokens42.spacing.sm, md: 0 },
-              scrollbarWidth: "none",
-              msOverflowStyle: "none",
-              "&::-webkit-scrollbar": {
-                display: "none"
+        /* @__PURE__ */ jsxs30(Stack8, { spacing: 1, sx: { paddingInline: { xs: 2, md: 0 } }, children: [
+          /* @__PURE__ */ jsxs30(Stack8, { direction: "row", spacing: 1, alignItems: "center", children: [
+            /* @__PURE__ */ jsx47(AutoAwesomeIcon5, { sx: { fontSize: 16, color: tokens43.colors.earth } }),
+            /* @__PURE__ */ jsx47(
+              Typography25,
+              {
+                sx: {
+                  fontSize: 11,
+                  fontWeight: 900,
+                  color: tokens43.colors.earth,
+                  textTransform: "uppercase",
+                  letterSpacing: "0.08em"
+                },
+                children: "AI Recommendations"
               }
-            },
-            children: loading ? renderSkeletons2() : renderOutfitCards2()
-          }
-        )
+            )
+          ] }),
+          /* @__PURE__ */ jsx47(
+            Typography25,
+            {
+              component: "h2",
+              sx: {
+                color: tokens43.colors.textPrimary,
+                fontFamily: tokens43.typography.fontFamily,
+                fontSize: tokens43.typography.fontSizes.xl,
+                fontWeight: 900,
+                lineHeight: 1,
+                margin: 0
+              },
+              children: "Complete this look"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx47(MitumbaGrid, { columns: { xs: 1, sm: 2, md: 3, lg: 3 }, gap: 3, children: loading ? Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsx47(VAZIOutfitCardSkeleton, {}, `vazi-skel-${i + 1}`)) : outfits.map((outfit) => /* @__PURE__ */ jsx47(
+          VAZIOutfitCard,
+          {
+            outfitName: outfit.outfitName,
+            items: outfit.items,
+            totalPriceKes: outfit.totalPriceKes,
+            sellersCount: outfit.sellersCount,
+            isMultiCity: outfit.isMultiCity,
+            onTap: outfit.onTap,
+            onBuyAll: outfit.onBuyAll
+          },
+          outfit.outfitName
+        )) })
       ]
     }
   );
@@ -4887,7 +4844,7 @@ import { ThemeProvider } from "@mui/material/styles";
 
 // src/theme/theme.ts
 import { createTheme } from "@mui/material/styles";
-import { tokens as tokens43 } from "@mitumba/tokens";
+import { tokens as tokens44 } from "@mitumba/tokens";
 var transitions = {
   standard: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
   spring: "all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)"
@@ -4896,86 +4853,86 @@ var mitumbaTheme = createTheme({
   // Spacing factor 4px (Mandate)
   spacing: (factor) => `${factor * 4}px`,
   breakpoints: {
-    values: tokens43.breakpoints
+    values: tokens44.breakpoints
   },
   palette: {
     mode: "light",
     primary: {
-      main: tokens43.colors.green,
-      light: tokens43.colors.greenLight,
-      dark: tokens43.colors.greenDark,
-      contrastText: tokens43.colors.textOnGreen
+      main: tokens44.colors.green,
+      light: tokens44.colors.greenLight,
+      dark: tokens44.colors.greenDark,
+      contrastText: tokens44.colors.textOnGreen
     },
     secondary: {
-      main: tokens43.colors.earth,
-      light: tokens43.colors.earthLight,
-      dark: tokens43.colors.earthDark,
-      contrastText: tokens43.colors.textOnEarth
+      main: tokens44.colors.earth,
+      light: tokens44.colors.earthLight,
+      dark: tokens44.colors.earthDark,
+      contrastText: tokens44.colors.textOnEarth
     },
     earth: {
-      main: tokens43.colors.earth,
-      light: tokens43.colors.earthLight,
-      dark: tokens43.colors.earthDark,
-      contrastText: tokens43.colors.textOnEarth
+      main: tokens44.colors.earth,
+      light: tokens44.colors.earthLight,
+      dark: tokens44.colors.earthDark,
+      contrastText: tokens44.colors.textOnEarth
     },
     success: {
-      main: tokens43.colors.success,
-      light: tokens43.colors.successLight,
-      dark: tokens43.colors.successDark,
-      contrastText: tokens43.colors.textOnGreen
+      main: tokens44.colors.success,
+      light: tokens44.colors.successLight,
+      dark: tokens44.colors.successDark,
+      contrastText: tokens44.colors.textOnGreen
     },
     error: {
-      main: tokens43.colors.error,
-      light: tokens43.colors.errorLight,
-      dark: tokens43.colors.errorDark,
-      contrastText: tokens43.colors.white
+      main: tokens44.colors.error,
+      light: tokens44.colors.errorLight,
+      dark: tokens44.colors.errorDark,
+      contrastText: tokens44.colors.white
     },
     warning: {
-      main: tokens43.colors.warning,
-      light: tokens43.colors.warningLight,
-      dark: tokens43.colors.warningDark,
-      contrastText: tokens43.colors.textPrimary
+      main: tokens44.colors.warning,
+      light: tokens44.colors.warningLight,
+      dark: tokens44.colors.warningDark,
+      contrastText: tokens44.colors.textPrimary
     },
     info: {
-      main: tokens43.colors.info,
-      light: tokens43.colors.infoLight,
-      dark: tokens43.colors.infoDark,
-      contrastText: tokens43.colors.white
+      main: tokens44.colors.info,
+      light: tokens44.colors.infoLight,
+      dark: tokens44.colors.infoDark,
+      contrastText: tokens44.colors.white
     },
     background: {
-      default: tokens43.colors.background,
-      paper: tokens43.colors.surface
+      default: tokens44.colors.background,
+      paper: tokens44.colors.surface
     },
-    divider: tokens43.colors.divider,
+    divider: tokens44.colors.divider,
     text: {
-      primary: tokens43.colors.textPrimary,
-      secondary: tokens43.colors.textSecondary,
-      disabled: tokens43.colors.textDisabled
+      primary: tokens44.colors.textPrimary,
+      secondary: tokens44.colors.textSecondary,
+      disabled: tokens44.colors.textDisabled
     },
     common: {
-      black: tokens43.colors.textPrimary,
-      white: tokens43.colors.white
+      black: tokens44.colors.textPrimary,
+      white: tokens44.colors.white
     }
   },
   shape: {
-    borderRadius: tokens43.radius.md
+    borderRadius: tokens44.radius.md
     // 8px default
   },
   shadows: [
     "none",
-    tokens43.shadows.card,
+    tokens44.shadows.card,
     // 1
-    tokens43.shadows.elevated,
+    tokens44.shadows.elevated,
     // 2
-    tokens43.shadows.deep,
+    tokens44.shadows.deep,
     // 3
-    tokens43.shadows.bottomSheet,
+    tokens44.shadows.bottomSheet,
     // 4
-    tokens43.shadows.focus,
+    tokens44.shadows.focus,
     // 5
-    tokens43.shadows.green,
+    tokens44.shadows.green,
     // 6
-    tokens43.shadows.earth,
+    tokens44.shadows.earth,
     // 7
     "none",
     "none",
@@ -4996,45 +4953,45 @@ var mitumbaTheme = createTheme({
     "none"
   ],
   typography: {
-    fontFamily: tokens43.typography.fontFamily,
-    fontWeightRegular: tokens43.typography.fontWeights.regular,
-    fontWeightMedium: tokens43.typography.fontWeights.medium,
-    fontWeightBold: tokens43.typography.fontWeights.bold,
+    fontFamily: tokens44.typography.fontFamily,
+    fontWeightRegular: tokens44.typography.fontWeights.regular,
+    fontWeightMedium: tokens44.typography.fontWeights.medium,
+    fontWeightBold: tokens44.typography.fontWeights.bold,
     h1: {
-      fontSize: `${tokens43.typography.fontSizes.display}px`,
-      fontWeight: tokens43.typography.fontWeights.extrabold,
+      fontSize: `${tokens44.typography.fontSizes.display}px`,
+      fontWeight: tokens44.typography.fontWeights.extrabold,
       lineHeight: 1.1
     },
     h2: {
-      fontSize: `${tokens43.typography.fontSizes.xxxl}px`,
-      fontWeight: tokens43.typography.fontWeights.bold,
+      fontSize: `${tokens44.typography.fontSizes.xxxl}px`,
+      fontWeight: tokens44.typography.fontWeights.bold,
       lineHeight: 1.2
     },
     h3: {
-      fontSize: `${tokens43.typography.fontSizes.xxl}px`,
-      fontWeight: tokens43.typography.fontWeights.bold,
+      fontSize: `${tokens44.typography.fontSizes.xxl}px`,
+      fontWeight: tokens44.typography.fontWeights.bold,
       lineHeight: 1.2
     },
     h4: {
-      fontSize: `${tokens43.typography.fontSizes.xl}px`,
-      fontWeight: tokens43.typography.fontWeights.bold,
+      fontSize: `${tokens44.typography.fontSizes.xl}px`,
+      fontWeight: tokens44.typography.fontWeights.bold,
       lineHeight: 1.2
     },
     body1: {
-      fontSize: `${tokens43.typography.fontSizes.md}px`,
+      fontSize: `${tokens44.typography.fontSizes.md}px`,
       lineHeight: 1.5
     },
     body2: {
-      fontSize: `${tokens43.typography.fontSizes.base}px`,
+      fontSize: `${tokens44.typography.fontSizes.base}px`,
       lineHeight: 1.5
     },
     button: {
-      fontSize: `${tokens43.typography.fontSizes.base}px`,
+      fontSize: `${tokens44.typography.fontSizes.base}px`,
       fontWeight: 600,
       textTransform: "none"
     },
     caption: {
-      fontSize: `${tokens43.typography.fontSizes.sm}px`,
+      fontSize: `${tokens44.typography.fontSizes.sm}px`,
       lineHeight: 1.5
     }
   },
@@ -5042,9 +4999,9 @@ var mitumbaTheme = createTheme({
     MuiCssBaseline: {
       styleOverrides: {
         body: {
-          backgroundColor: tokens43.colors.background,
-          color: tokens43.colors.textPrimary,
-          fontFamily: tokens43.typography.fontFamily,
+          backgroundColor: tokens44.colors.background,
+          color: tokens44.colors.textPrimary,
+          fontFamily: tokens44.typography.fontFamily,
           WebkitFontSmoothing: "antialiased",
           MozOsxFontSmoothing: "grayscale"
         },
@@ -5059,7 +5016,7 @@ var mitumbaTheme = createTheme({
       },
       styleOverrides: {
         root: {
-          borderRadius: `${tokens43.radius.md}px`,
+          borderRadius: `${tokens44.radius.md}px`,
           transition: transitions.standard,
           fontWeight: 600,
           "&:hover": {
@@ -5069,40 +5026,40 @@ var mitumbaTheme = createTheme({
             transform: "translateY(0) scale(0.98)"
           },
           "&.Mui-disabled": {
-            backgroundColor: tokens43.colors.divider,
-            color: tokens43.colors.textDisabled,
-            borderColor: tokens43.colors.divider
+            backgroundColor: tokens44.colors.divider,
+            color: tokens44.colors.textDisabled,
+            borderColor: tokens44.colors.divider
           }
         },
         containedPrimary: {
-          backgroundColor: tokens43.colors.green,
+          backgroundColor: tokens44.colors.green,
           "&:hover": {
-            backgroundColor: tokens43.colors.greenDark,
-            boxShadow: tokens43.shadows.green
+            backgroundColor: tokens44.colors.greenDark,
+            boxShadow: tokens44.shadows.green
           }
         },
         containedSecondary: {
-          backgroundColor: tokens43.colors.earth,
+          backgroundColor: tokens44.colors.earth,
           "&:hover": {
-            backgroundColor: tokens43.colors.earthDark,
-            boxShadow: tokens43.shadows.earth
+            backgroundColor: tokens44.colors.earthDark,
+            boxShadow: tokens44.shadows.earth
           }
         },
         outlinedPrimary: {
           borderWidth: "2px !important",
-          borderColor: tokens43.colors.border,
-          color: tokens43.colors.textPrimary,
+          borderColor: tokens44.colors.border,
+          color: tokens44.colors.textPrimary,
           "&:hover": {
-            backgroundColor: tokens43.colors.background,
-            borderColor: tokens43.colors.green,
-            color: tokens43.colors.green
+            backgroundColor: tokens44.colors.background,
+            borderColor: tokens44.colors.green,
+            color: tokens44.colors.green
           }
         },
         textPrimary: {
-          color: tokens43.colors.textSecondary,
+          color: tokens44.colors.textSecondary,
           "&:hover": {
-            backgroundColor: tokens43.colors.background,
-            color: tokens43.colors.textPrimary
+            backgroundColor: tokens44.colors.background,
+            color: tokens44.colors.textPrimary
           }
         }
       }
@@ -5110,16 +5067,16 @@ var mitumbaTheme = createTheme({
     MuiCard: {
       styleOverrides: {
         root: {
-          borderRadius: `${tokens43.radius.xl}px`,
-          backgroundColor: tokens43.colors.surface,
-          boxShadow: tokens43.shadows.card,
+          borderRadius: `${tokens44.radius.xl}px`,
+          backgroundColor: tokens44.colors.surface,
+          boxShadow: tokens44.shadows.card,
           transition: transitions.standard,
           border: "1px solid",
-          borderColor: tokens43.colors.divider,
+          borderColor: tokens44.colors.divider,
           "&:hover": {
             transform: "translateY(-4px)",
-            boxShadow: tokens43.shadows.elevated,
-            borderColor: tokens43.colors.border
+            boxShadow: tokens44.shadows.elevated,
+            borderColor: tokens44.colors.border
           }
         }
       }
@@ -5127,36 +5084,36 @@ var mitumbaTheme = createTheme({
     MuiPaper: {
       styleOverrides: {
         rounded: {
-          borderRadius: `${tokens43.radius.xl}px`
+          borderRadius: `${tokens44.radius.xl}px`
         },
         elevation1: {
-          boxShadow: tokens43.shadows.card
+          boxShadow: tokens44.shadows.card
         }
       }
     },
     MuiOutlinedInput: {
       styleOverrides: {
         root: {
-          borderRadius: `${tokens43.radius.md}px`,
-          backgroundColor: tokens43.colors.surface,
+          borderRadius: `${tokens44.radius.md}px`,
+          backgroundColor: tokens44.colors.surface,
           transition: transitions.standard,
           "& .MuiOutlinedInput-notchedOutline": {
-            borderColor: tokens43.colors.border,
+            borderColor: tokens44.colors.border,
             borderWidth: "1px",
             transition: transitions.standard
           },
           "&:hover .MuiOutlinedInput-notchedOutline": {
-            borderColor: tokens43.colors.textDisabled
+            borderColor: tokens44.colors.textDisabled
           },
           "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-            borderColor: tokens43.colors.green,
+            borderColor: tokens44.colors.green,
             borderWidth: "2px"
           },
           "&.Mui-error .MuiOutlinedInput-notchedOutline": {
-            borderColor: tokens43.colors.error
+            borderColor: tokens44.colors.error
           },
           "&.Mui-focused": {
-            boxShadow: tokens43.shadows.focus
+            boxShadow: tokens44.shadows.focus
           }
         }
       }
@@ -5168,7 +5125,7 @@ var mitumbaTheme = createTheme({
           cursor: "pointer",
           "&:hover": {
             transform: "perspective(1000px) rotateY(15deg) rotateX(-5deg) scale(1.1)",
-            boxShadow: tokens43.shadows.elevated
+            boxShadow: tokens44.shadows.elevated
           },
           "&:active": {
             transform: "perspective(1000px) rotateY(0deg) rotateX(0deg) scale(1.05)"
@@ -5179,8 +5136,8 @@ var mitumbaTheme = createTheme({
     MuiDialog: {
       styleOverrides: {
         paper: {
-          borderRadius: `${tokens43.radius.xxxl}px`,
-          boxShadow: tokens43.shadows.bottomSheet,
+          borderRadius: `${tokens44.radius.xxxl}px`,
+          boxShadow: tokens44.shadows.bottomSheet,
           backgroundImage: "none"
         }
       }
@@ -5188,7 +5145,7 @@ var mitumbaTheme = createTheme({
     MuiAlert: {
       styleOverrides: {
         root: {
-          borderRadius: `${tokens43.radius.lg}px`,
+          borderRadius: `${tokens44.radius.lg}px`,
           alignItems: "center"
         }
       }
@@ -5197,12 +5154,12 @@ var mitumbaTheme = createTheme({
 });
 
 // src/theme/provider.tsx
-import { jsx as jsx48, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs31 } from "react/jsx-runtime";
 function MitumbaThemeProvider({
   children,
   disableCssBaseline = false
 }) {
-  return /* @__PURE__ */ jsxs30(ThemeProvider, { theme: mitumbaTheme, children: [
+  return /* @__PURE__ */ jsxs31(ThemeProvider, { theme: mitumbaTheme, children: [
     !disableCssBaseline && /* @__PURE__ */ jsx48(CssBaseline, {}),
     children
   ] });