@mitumba/ui 0.1.1

package/dist/index.js

@@ -0,0 +1,4687 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  CartItem: () => CartItem,
+  CompleteThisLookPanel: () => CompleteThisLookPanel,
+  ConditionBadge: () => ConditionBadge,
+  DeliveryBadge: () => DeliveryBadge,
+  EscrowStatusBanner: () => EscrowStatusBanner,
+  ListingCard: () => ListingCard,
+  ListingCardSkeleton: () => ListingCardSkeleton,
+  ListingGrid: () => ListingGrid,
+  ListingImageGallery: () => ListingImageGallery,
+  MitumbaAvatar: () => MitumbaAvatar,
+  MitumbaBreadcrumb: () => MitumbaBreadcrumb,
+  MitumbaChip: () => MitumbaChip,
+  MitumbaDivider: () => MitumbaDivider,
+  MitumbaGrid: () => MitumbaGrid,
+  MitumbaPrimaryButton: () => MitumbaPrimaryButton,
+  MitumbaSelect: () => MitumbaSelect,
+  MitumbaTextField: () => MitumbaTextField,
+  MitumbaThemeProvider: () => MitumbaThemeProvider,
+  MobileBottomNav: () => MobileBottomNav,
+  OrderStatusTimeline: () => OrderStatusTimeline,
+  PageContainer: () => PageContainer,
+  PriceTag: () => PriceTag,
+  STIBreakdownPanel: () => STIBreakdownPanel,
+  STIScoreChip: () => STIScoreChip,
+  SectionHeader: () => SectionHeader,
+  SellerCard: () => SellerCard,
+  TopNav: () => TopNav,
+  VAZIBadge: () => VAZIBadge,
+  VAZIFeedSection: () => VAZIFeedSection,
+  VAZIOutfitCard: () => VAZIOutfitCard,
+  VAZIOutfitCardSkeleton: () => VAZIOutfitCardSkeleton,
+  mitumbaTheme: () => mitumbaTheme
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/foundation/MitumbaPrimaryButton/MitumbaPrimaryButton.tsx
+var import_Button = __toESM(require("@mui/material/Button"));
+var import_CircularProgress = __toESM(require("@mui/material/CircularProgress"));
+var import_Box = __toESM(require("@mui/material/Box"));
+var import_tokens = require("@mitumba/tokens");
+var import_jsx_runtime = require("react/jsx-runtime");
+function MitumbaPrimaryButton({
+  label,
+  onClick,
+  loading = false,
+  disabled = false,
+  icon,
+  iconPosition = "left",
+  fullWidth = false,
+  size = "medium",
+  variant = "primary",
+  sx
+}) {
+  const isDisabled = disabled || loading;
+  const isIconOnly = !label && !!icon;
+  const sizeConfig = {
+    small: { height: 32, px: 4, fontSize: import_tokens.tokens.typography.fontSizes.sm },
+    medium: { height: 42, px: 6, fontSize: import_tokens.tokens.typography.fontSizes.base },
+    large: { height: 52, px: 8, fontSize: import_tokens.tokens.typography.fontSizes.md }
+  };
+  const currentSize = sizeConfig[size];
+  const muiVariantMap = {
+    primary: "contained",
+    secondary: "contained",
+    earth: "contained",
+    success: "contained",
+    error: "contained",
+    outline: "outlined",
+    ghost: "text"
+  };
+  const muiColorMap = {
+    primary: "primary",
+    secondary: "secondary",
+    earth: "secondary",
+    success: "success",
+    error: "error",
+    outline: "primary",
+    ghost: "inherit"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_Button.default,
+    {
+      variant: muiVariantMap[variant],
+      color: muiColorMap[variant],
+      disabled: isDisabled,
+      fullWidth,
+      onClick,
+      "aria-busy": loading || void 0,
+      disableElevation: true,
+      sx: [
+        {
+          height: currentSize.height,
+          minWidth: isIconOnly ? currentSize.height : "auto",
+          paddingInline: isIconOnly ? 0 : (theme) => theme.spacing(currentSize.px),
+          borderRadius: import_tokens.tokens.radius.md,
+          fontSize: currentSize.fontSize,
+          fontWeight: 600,
+          fontFamily: import_tokens.tokens.typography.fontFamily,
+          textTransform: "none",
+          position: "relative",
+          overflow: "hidden",
+          transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+          // Inherited from benchmark
+          "&:hover": {
+            transform: "translateY(-2px) scale(1.02)"
+          },
+          "&:active": {
+            transform: "translateY(0) scale(0.98)"
+          }
+        },
+        ...Array.isArray(sx) ? sx : [sx]
+      ],
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_Box.default,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: import_tokens.tokens.spacing.sm,
+              opacity: loading ? 0 : 1,
+              transform: loading ? "scale(0.9)" : "scale(1)",
+              transition: "all 0.2s ease",
+              width: "100%",
+              flexDirection: iconPosition === "left" ? "row" : "row-reverse"
+            },
+            children: [
+              icon,
+              label
+            ]
+          }
+        ),
+        loading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_Box.default,
+          {
+            sx: {
+              position: "absolute",
+              inset: 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              color: "inherit"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_CircularProgress.default,
+              {
+                size: currentSize.height * 0.4,
+                color: "inherit",
+                "aria-label": `${label || "Button"} loading`
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/foundation/MitumbaTextField/MitumbaTextField.tsx
+var import_react = __toESM(require("react"));
+var import_TextField = __toESM(require("@mui/material/TextField"));
+var import_Box2 = __toESM(require("@mui/material/Box"));
+var import_Typography = __toESM(require("@mui/material/Typography"));
+var import_InputAdornment = __toESM(require("@mui/material/InputAdornment"));
+var import_IconButton = __toESM(require("@mui/material/IconButton"));
+var import_CheckCircle = __toESM(require("@mui/icons-material/CheckCircle"));
+var import_Error = __toESM(require("@mui/icons-material/Error"));
+var import_Warning = __toESM(require("@mui/icons-material/Warning"));
+var import_Visibility = __toESM(require("@mui/icons-material/Visibility"));
+var import_VisibilityOff = __toESM(require("@mui/icons-material/VisibilityOff"));
+var import_tokens2 = require("@mitumba/tokens");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function MitumbaTextField({
+  label,
+  hint,
+  value,
+  onChange,
+  helperText,
+  error,
+  size = "medium",
+  rounding = "rounded",
+  status,
+  prefix,
+  suffix,
+  endButton,
+  type = "text",
+  disabled = false,
+  multiline = false,
+  rows = 4,
+  readOnly = false,
+  sx
+}) {
+  const id = (0, import_react.useId)();
+  const [showPassword, setShowPassword] = (0, import_react.useState)(false);
+  const currentStatus = error ? "error" : status;
+  const sizeConfig = {
+    small: { height: 32, fontSize: import_tokens2.tokens.typography.fontSizes.sm, iconSize: 18 },
+    medium: { height: 42, fontSize: import_tokens2.tokens.typography.fontSizes.base, iconSize: 20 },
+    large: { height: 52, fontSize: import_tokens2.tokens.typography.fontSizes.md, iconSize: 24 }
+  };
+  const radiusMap = {
+    pill: import_tokens2.tokens.radius.full,
+    rounded: import_tokens2.tokens.radius.md
+  };
+  const currentSize = sizeConfig[size];
+  const borderRadius = radiusMap[rounding];
+  const statusConfig = {
+    success: { color: import_tokens2.tokens.colors.success, icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_CheckCircle.default, {}) },
+    error: { color: import_tokens2.tokens.colors.error, icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Error.default, {}) },
+    warning: { color: import_tokens2.tokens.colors.warning, icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Warning.default, {}) }
+  };
+  const activeStatus = currentStatus ? statusConfig[currentStatus] : null;
+  let inputType = type;
+  if (type === "password") {
+    inputType = showPassword ? "text" : "password";
+  }
+  const handleTogglePassword = () => setShowPassword((prev) => !prev);
+  const renderEndAdornment = () => {
+    if (!suffix && !activeStatus && type !== "password") return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_InputAdornment.default, { position: "end", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_Box2.default, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+      suffix && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Box2.default, { sx: { color: import_tokens2.tokens.colors.textSecondary, display: "flex" }, children: import_react.default.isValidElement(suffix) ? import_react.default.cloneElement(suffix, { sx: { fontSize: currentSize.iconSize } }) : suffix }),
+      type === "password" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_IconButton.default,
+        {
+          onClick: handleTogglePassword,
+          edge: "end",
+          size: "small",
+          sx: { color: import_tokens2.tokens.colors.textSecondary, p: 0.5 },
+          children: showPassword ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_VisibilityOff.default, { sx: { fontSize: currentSize.iconSize } }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Visibility.default, { sx: { fontSize: currentSize.iconSize } })
+        }
+      ),
+      activeStatus && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Box2.default, { sx: { color: activeStatus.color, display: "flex" }, children: import_react.default.cloneElement(activeStatus.icon, { sx: { fontSize: currentSize.iconSize } }) })
+    ] }) });
+  };
+  const fieldStyles = [
+    {
+      "& .MuiOutlinedInput-root": {
+        height: multiline ? "auto" : currentSize.height,
+        borderRadius: `${borderRadius}px`,
+        bgcolor: import_tokens2.tokens.colors.surface,
+        fontSize: currentSize.fontSize,
+        fontWeight: 600,
+        fontFamily: import_tokens2.tokens.typography.fontFamily,
+        transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+        // Issue Fix: Square corners if integrated button is present
+        ...endButton && {
+          borderTopRightRadius: 0,
+          borderBottomRightRadius: 0
+        },
+        "& .MuiOutlinedInput-notchedOutline": {
+          borderColor: currentStatus ? statusConfig[currentStatus].color : import_tokens2.tokens.colors.divider,
+          borderWidth: currentStatus ? "2px" : "1px",
+          transition: "inherit"
+        },
+        "&:hover .MuiOutlinedInput-notchedOutline": {
+          borderColor: currentStatus ? statusConfig[currentStatus].color : import_tokens2.tokens.colors.textDisabled
+        },
+        "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+          borderColor: currentStatus ? statusConfig[currentStatus].color : import_tokens2.tokens.colors.green,
+          borderWidth: "2px"
+        },
+        "&.Mui-focused": {
+          boxShadow: currentStatus ? "none" : import_tokens2.tokens.shadows.focus
+        },
+        "&.Mui-disabled": {
+          bgcolor: import_tokens2.tokens.colors.background,
+          "& .MuiOutlinedInput-notchedOutline": {
+            borderColor: import_tokens2.tokens.colors.divider
+          }
+        }
+      },
+      "& .MuiInputBase-input": {
+        py: 0,
+        height: "100%",
+        "&::placeholder": {
+          color: import_tokens2.tokens.colors.textDisabled,
+          opacity: 1
+        }
+      },
+      "& .MuiInputBase-inputMultiline": {
+        py: 1.5
+      }
+    },
+    ...Array.isArray(sx) ? sx : [sx]
+  ];
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_Box2.default, { sx: { width: "100%" }, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_Typography.default,
+      {
+        variant: "caption",
+        component: "label",
+        htmlFor: id,
+        sx: {
+          mb: 0.5,
+          display: "block",
+          fontWeight: 700,
+          color: currentStatus ? statusConfig[currentStatus].color : import_tokens2.tokens.colors.textSecondary,
+          textTransform: "uppercase",
+          letterSpacing: "0.05em",
+          fontFamily: import_tokens2.tokens.typography.fontFamily,
+          ml: rounding === "pill" ? 2 : 1
+        },
+        children: label
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_Box2.default, { sx: { display: "flex", width: "100%", alignItems: "flex-start" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_TextField.default,
+        {
+          id,
+          placeholder: hint,
+          value,
+          onChange: (e) => onChange(e.target.value),
+          type: inputType,
+          disabled,
+          multiline,
+          rows: multiline ? rows : void 0,
+          fullWidth: true,
+          error: currentStatus === "error",
+          slotProps: {
+            input: {
+              readOnly,
+              startAdornment: prefix && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_InputAdornment.default, { position: "start", sx: { color: import_tokens2.tokens.colors.textSecondary, ml: rounding === "pill" ? 1 : 0 }, children: import_react.default.isValidElement(prefix) ? import_react.default.cloneElement(prefix, { sx: { fontSize: currentSize.iconSize } }) : prefix }),
+              endAdornment: renderEndAdornment()
+            }
+          },
+          sx: fieldStyles
+        }
+      ),
+      endButton && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_Box2.default,
+        {
+          sx: {
+            height: currentSize.height,
+            display: "flex",
+            // Inject styles to the button to make it integrated
+            "& > button": {
+              height: "100% !important",
+              borderTopLeftRadius: "0 !important",
+              borderBottomLeftRadius: "0 !important",
+              borderLeft: "none !important",
+              // If the input has a 2px focused border, we might need a small overlap or adjustment
+              ml: "-1px",
+              borderRadius: rounding === "pill" ? `0 ${import_tokens2.tokens.radius.full}px ${import_tokens2.tokens.radius.full}px 0` : `0 ${import_tokens2.tokens.radius.md}px ${import_tokens2.tokens.radius.md}px 0`
+            }
+          },
+          children: endButton
+        }
+      )
+    ] }),
+    (helperText || error) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_Typography.default,
+      {
+        variant: "caption",
+        sx: {
+          mt: 0.5,
+          ml: rounding === "pill" ? 2 : 1,
+          display: "block",
+          fontWeight: 600,
+          color: currentStatus ? statusConfig[currentStatus].color : import_tokens2.tokens.colors.textSecondary,
+          fontFamily: import_tokens2.tokens.typography.fontFamily
+        },
+        children: error || helperText
+      }
+    )
+  ] });
+}
+
+// src/components/foundation/MitumbaSelect/MitumbaSelect.tsx
+var import_react2 = __toESM(require("react"));
+var import_MenuItem = __toESM(require("@mui/material/MenuItem"));
+var import_Select = __toESM(require("@mui/material/Select"));
+var import_InputLabel = __toESM(require("@mui/material/InputLabel"));
+var import_FormControl = __toESM(require("@mui/material/FormControl"));
+var import_FormHelperText = __toESM(require("@mui/material/FormHelperText"));
+var import_ListSubheader = __toESM(require("@mui/material/ListSubheader"));
+var import_Box3 = __toESM(require("@mui/material/Box"));
+var import_Typography2 = __toESM(require("@mui/material/Typography"));
+var import_InputAdornment2 = __toESM(require("@mui/material/InputAdornment"));
+var import_TextField2 = __toESM(require("@mui/material/TextField"));
+var import_Checkbox = __toESM(require("@mui/material/Checkbox"));
+var import_Check = __toESM(require("@mui/icons-material/Check"));
+var import_Search = __toESM(require("@mui/icons-material/Search"));
+var import_KeyboardArrowDown = __toESM(require("@mui/icons-material/KeyboardArrowDown"));
+var import_tokens3 = require("@mitumba/tokens");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function MitumbaSelect({
+  value,
+  name,
+  label,
+  placeholder,
+  options,
+  onChange,
+  size = "medium",
+  rounding = "rounded",
+  multiple = false,
+  loading = false,
+  error,
+  disabled = false,
+  showSearch = false,
+  inverted = false,
+  startIcon,
+  displayValue,
+  sx
+}) {
+  const [searchTerm, setSearchIcon] = (0, import_react2.useState)("");
+  const labelId = (0, import_react2.useMemo)(() => `select-label-${label?.replace(/\s+/g, "-").toLowerCase() || Math.random().toString(36).substr(2, 9)}`, [label]);
+  const sizeConfig = {
+    small: { height: 32, fontSize: import_tokens3.tokens.typography.fontSizes.sm, iconSize: 16 },
+    medium: { height: 42, fontSize: import_tokens3.tokens.typography.fontSizes.base, iconSize: 20 },
+    large: { height: 52, fontSize: import_tokens3.tokens.typography.fontSizes.md, iconSize: 24 }
+  };
+  const radiusMap = {
+    pill: import_tokens3.tokens.radius.full,
+    rounded: import_tokens3.tokens.radius.md,
+    square: import_tokens3.tokens.radius.xs
+  };
+  const currentSize = sizeConfig[size];
+  const borderRadius = radiusMap[rounding];
+  const menuBorderRadius = import_tokens3.tokens.radius.md;
+  const filteredOptions = (0, import_react2.useMemo)(() => {
+    if (!showSearch || !searchTerm) return options;
+    return options.filter(
+      (opt) => opt.label.toLowerCase().includes(searchTerm.toLowerCase()) || opt.subtitle?.toLowerCase().includes(searchTerm.toLowerCase())
+    );
+  }, [options, searchTerm, showSearch]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_FormControl.default, { fullWidth: true, error: !!error, disabled: disabled || loading, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_InputLabel.default,
+      {
+        id: labelId,
+        shrink: true,
+        sx: {
+          position: "relative",
+          transform: "none",
+          mb: 0.5,
+          ml: rounding === "pill" ? 2 : 1,
+          fontSize: import_tokens3.tokens.typography.fontSizes.xs,
+          fontWeight: 700,
+          color: error ? `${import_tokens3.tokens.colors.error} !important` : `${import_tokens3.tokens.colors.textSecondary} !important`,
+          textTransform: "uppercase",
+          letterSpacing: "0.05em",
+          fontFamily: import_tokens3.tokens.typography.fontFamily
+        },
+        children: label
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      import_Select.default,
+      {
+        labelId,
+        id: name,
+        name,
+        multiple,
+        value,
+        onChange: (e) => onChange(e.target.value),
+        displayEmpty: true,
+        IconComponent: import_KeyboardArrowDown.default,
+        renderValue: (selected) => {
+          if (displayValue) return displayValue;
+          if (selected === "" || Array.isArray(selected) && selected.length === 0) {
+            return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_Typography2.default, { sx: { color: import_tokens3.tokens.colors.textDisabled, fontSize: "inherit" }, children: placeholder || "Select option" });
+          }
+          if (multiple && Array.isArray(selected)) {
+            return `Selected ${selected.length} items`;
+          }
+          const selectedOpt = options.find((opt) => opt.value === selected);
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_Box3.default, { sx: { display: "flex", alignItems: "center", gap: 1.5 }, children: [
+            selectedOpt?.icon,
+            selectedOpt?.label || selected
+          ] });
+        },
+        MenuProps: {
+          PaperProps: {
+            sx: {
+              mt: 1,
+              borderRadius: `${menuBorderRadius}px`,
+              boxShadow: import_tokens3.tokens.shadows.deep,
+              border: `1px solid ${import_tokens3.tokens.colors.divider}`,
+              bgcolor: inverted ? import_tokens3.tokens.colors.textPrimary : import_tokens3.tokens.colors.surface,
+              color: inverted ? import_tokens3.tokens.colors.white : import_tokens3.tokens.colors.textPrimary,
+              overflow: "hidden",
+              // Ensure no overflow from subheaders
+              "& .MuiMenuItem-root": {
+                py: 1.5,
+                px: 2,
+                transition: "all 0.2s ease",
+                "&:hover": {
+                  bgcolor: inverted ? "rgba(255,255,255,0.1)" : import_tokens3.tokens.colors.background
+                },
+                "&.Mui-selected": {
+                  bgcolor: inverted ? "rgba(255,255,255,0.15)" : `${import_tokens3.tokens.colors.green}15`,
+                  color: inverted ? import_tokens3.tokens.colors.white : import_tokens3.tokens.colors.green,
+                  fontWeight: 700,
+                  "&:hover": {
+                    bgcolor: inverted ? "rgba(255,255,255,0.2)" : `${import_tokens3.tokens.colors.green}25`
+                  }
+                }
+              }
+            }
+          }
+        },
+        sx: [
+          {
+            height: currentSize.height,
+            borderRadius: `${borderRadius}px`,
+            bgcolor: import_tokens3.tokens.colors.surface,
+            fontFamily: import_tokens3.tokens.typography.fontFamily,
+            fontSize: currentSize.fontSize,
+            fontWeight: 600,
+            "& .MuiOutlinedInput-notchedOutline": {
+              borderColor: import_tokens3.tokens.colors.divider,
+              borderWidth: "1px",
+              transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
+            },
+            "&:hover .MuiOutlinedInput-notchedOutline": {
+              borderColor: import_tokens3.tokens.colors.textDisabled
+            },
+            "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+              borderColor: import_tokens3.tokens.colors.green,
+              borderWidth: "2px"
+            },
+            "& .MuiSelect-select": {
+              display: "flex",
+              alignItems: "center",
+              pl: startIcon ? 0 : 2
+            },
+            "& .MuiSelect-icon": {
+              color: import_tokens3.tokens.colors.textSecondary,
+              right: 12,
+              transition: "transform 0.3s ease"
+            },
+            "&.Mui-focused .MuiSelect-icon": {
+              transform: "rotate(180deg)",
+              color: import_tokens3.tokens.colors.green
+            }
+          },
+          ...Array.isArray(sx) ? sx : [sx]
+        ],
+        startAdornment: startIcon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_InputAdornment2.default, { position: "start", sx: { ml: 1.5, color: import_tokens3.tokens.colors.textSecondary }, children: import_react2.default.cloneElement(startIcon, { sx: { fontSize: currentSize.iconSize } }) }),
+        children: [
+          showSearch && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_Box3.default, { sx: { px: 2, py: 1, position: "sticky", top: 0, bgcolor: "inherit", zIndex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            import_TextField2.default,
+            {
+              size: "small",
+              fullWidth: true,
+              placeholder: "Search...",
+              value: searchTerm,
+              onChange: (e) => setSearchIcon(e.target.value),
+              onClick: (e) => e.stopPropagation(),
+              onKeyDown: (e) => e.stopPropagation(),
+              InputProps: {
+                startAdornment: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_InputAdornment2.default, { position: "start", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_Search.default, { sx: { fontSize: 18, color: import_tokens3.tokens.colors.textDisabled } }) }),
+                sx: { borderRadius: `${menuBorderRadius / 2}px`, bgcolor: "rgba(0,0,0,0.03)" }
+              }
+            }
+          ) }),
+          filteredOptions.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_MenuItem.default, { disabled: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_Typography2.default, { variant: "body2", color: "text.secondary", children: "No options found" }) }),
+          (() => {
+            let lastGroup = "";
+            const elements = [];
+            filteredOptions.forEach((option) => {
+              if (option.group && option.group !== lastGroup) {
+                elements.push(
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    import_ListSubheader.default,
+                    {
+                      sx: {
+                        bgcolor: "transparent",
+                        color: import_tokens3.tokens.colors.textSecondary,
+                        fontWeight: 800,
+                        fontSize: 10,
+                        textTransform: "uppercase",
+                        letterSpacing: "0.1em",
+                        lineHeight: "32px",
+                        fontFamily: import_tokens3.tokens.typography.fontFamily
+                      },
+                      children: option.group
+                    },
+                    `group-${option.group}`
+                  )
+                );
+                lastGroup = option.group;
+              }
+              elements.push(
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  import_MenuItem.default,
+                  {
+                    value: option.value,
+                    disabled: option.disabled,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_Box3.default, { sx: { display: "flex", alignItems: "center", width: "100%", gap: 2 }, children: [
+                      multiple && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        import_Checkbox.default,
+                        {
+                          checked: Array.isArray(value) && value.includes(option.value),
+                          size: "small",
+                          sx: { p: 0 }
+                        }
+                      ),
+                      option.icon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_Box3.default, { sx: { display: "flex", color: import_tokens3.tokens.colors.textSecondary }, children: import_react2.default.cloneElement(option.icon, { sx: { fontSize: 20 } }) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_Box3.default, { sx: { flexGrow: 1, display: "flex", flexDirection: "column" }, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_Typography2.default, { variant: "body2", sx: { fontWeight: "inherit", color: "inherit" }, children: option.label }),
+                        option.subtitle && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_Typography2.default, { variant: "caption", sx: { color: "text.secondary", fontWeight: 400 }, children: option.subtitle })
+                      ] }),
+                      !multiple && value === option.value && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_Check.default, { sx: { fontSize: 18, color: import_tokens3.tokens.colors.green } })
+                    ] })
+                  },
+                  option.value
+                )
+              );
+            });
+            return elements;
+          })()
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_FormHelperText.default, { sx: { ml: 1, fontWeight: 600 }, children: error })
+  ] });
+}
+
+// src/components/foundation/MitumbaChip/MitumbaChip.tsx
+var import_react3 = require("react");
+var import_Chip = __toESM(require("@mui/material/Chip"));
+var import_Box4 = __toESM(require("@mui/material/Box"));
+var import_Typography3 = __toESM(require("@mui/material/Typography"));
+var import_Circle = __toESM(require("@mui/icons-material/Circle"));
+var import_tokens4 = require("@mitumba/tokens");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function MitumbaChip({
+  label,
+  onClick,
+  onDelete,
+  selected,
+  disabled = false,
+  icon,
+  avatar,
+  badge,
+  variant = "outline",
+  status = "default",
+  rounding = "rounded",
+  size = "medium",
+  color: propColor,
+  sx
+}) {
+  const isClickable = !!onClick || !!onDelete;
+  const statusConfig = (0, import_react3.useMemo)(() => {
+    const config = {
+      default: { color: import_tokens4.tokens.colors.textSecondary, bgColor: "transparent", borderColor: import_tokens4.tokens.colors.divider },
+      active: { color: import_tokens4.tokens.colors.info, bgColor: `${import_tokens4.tokens.colors.info}10`, borderColor: import_tokens4.tokens.colors.info, icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_Circle.default, { sx: { fontSize: 6 } }) },
+      incomplete: { color: import_tokens4.tokens.colors.warning, bgColor: `${import_tokens4.tokens.colors.warning}10`, borderColor: import_tokens4.tokens.colors.warning },
+      danger: { color: import_tokens4.tokens.colors.error, bgColor: `${import_tokens4.tokens.colors.error}10`, borderColor: import_tokens4.tokens.colors.error },
+      success: { color: import_tokens4.tokens.colors.green, bgColor: `${import_tokens4.tokens.colors.green}10`, borderColor: import_tokens4.tokens.colors.green },
+      common: { color: import_tokens4.tokens.colors.textPrimary, bgColor: "transparent", borderColor: import_tokens4.tokens.colors.divider },
+      special: { color: import_tokens4.tokens.colors.white, bgColor: import_tokens4.tokens.colors.earth, borderColor: "transparent" }
+    };
+    return config[status];
+  }, [status]);
+  const activeColor = propColor ? import_tokens4.tokens.colors[propColor] || propColor : statusConfig.color;
+  let activeBg = "transparent";
+  if (variant === "solid") {
+    activeBg = activeColor;
+  } else if (variant === "soft") {
+    activeBg = `${activeColor}15`;
+  }
+  if (selected) {
+    activeBg = activeColor;
+  }
+  let activeBorder = "transparent";
+  if (variant === "outline" && !selected) {
+    activeBorder = propColor ? activeColor : statusConfig.borderColor;
+  }
+  let borderRadius = `${import_tokens4.tokens.radius.md}px`;
+  if (rounding === "pill") {
+    borderRadius = import_tokens4.tokens.radius.full;
+  } else if (rounding === "square") {
+    borderRadius = `${import_tokens4.tokens.radius.xs}px`;
+  }
+  const styles = (0, import_react3.useMemo)(() => ({
+    height: size === "small" ? 22 : 28,
+    borderRadius,
+    backgroundColor: activeBg,
+    color: variant === "solid" || selected ? import_tokens4.tokens.colors.white : activeColor,
+    border: activeBorder !== "transparent" ? `1.5px solid ${activeBorder}` : "none",
+    transition: "all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)",
+    fontFamily: import_tokens4.tokens.typography.fontFamily,
+    fontWeight: 800,
+    textTransform: "uppercase",
+    letterSpacing: "0.02em",
+    "& .MuiChip-label": {
+      px: 1.2,
+      fontSize: size === "small" ? 9 : 10
+    },
+    "&:hover": isClickable && !disabled ? {
+      transform: "translateY(-1px)",
+      boxShadow: import_tokens4.tokens.shadows.card,
+      backgroundColor: variant === "solid" || selected ? activeColor : `${activeColor}20`
+    } : {},
+    "&:active": isClickable && !disabled ? {
+      transform: "scale(0.96)"
+    } : {},
+    "& .MuiChip-deleteIcon": {
+      fontSize: 14,
+      color: "inherit",
+      opacity: 0.7,
+      "&:hover": { opacity: 1 }
+    },
+    "& .MuiChip-icon": {
+      marginLeft: "6px !important",
+      marginRight: "-4px !important",
+      color: "inherit"
+    }
+  }), [size, borderRadius, variant, selected, activeBg, activeColor, activeBorder, isClickable, disabled]);
+  const displayIcon = icon || statusConfig.icon;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_Chip.default,
+    {
+      label: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_Box4.default, { sx: { display: "flex", alignItems: "center", gap: 0.8 }, children: [
+        label,
+        badge !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_Typography3.default, { variant: "caption", sx: { fontSize: 9, fontWeight: 900, ml: 0.5, opacity: 0.8 }, children: badge })
+      ] }),
+      onClick,
+      onDelete,
+      disabled,
+      icon: displayIcon,
+      avatar,
+      sx: [styles, ...Array.isArray(sx) ? sx : [sx]],
+      role: isClickable ? "button" : "status"
+    }
+  );
+}
+
+// src/components/foundation/MitumbaAvatar/MitumbaAvatar.tsx
+var import_react4 = __toESM(require("react"));
+var import_Avatar = __toESM(require("@mui/material/Avatar"));
+var import_Box5 = __toESM(require("@mui/material/Box"));
+var import_Typography4 = __toESM(require("@mui/material/Typography"));
+var import_Person = __toESM(require("@mui/icons-material/Person"));
+var import_Check2 = __toESM(require("@mui/icons-material/Check"));
+var import_Add = __toESM(require("@mui/icons-material/Add"));
+var import_tokens5 = require("@mitumba/tokens");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var sizeMap = {
+  xs: 24,
+  sm: 32,
+  md: 44,
+  lg: 64,
+  xl: 80
+};
+var fontSizeMap = {
+  xs: 10,
+  sm: 12,
+  md: 16,
+  lg: 20,
+  xl: 24
+};
+function MitumbaAvatar({
+  name,
+  imageUrl,
+  size = "md",
+  badge,
+  status,
+  actionIcon,
+  notificationCount,
+  notificationColor,
+  subtitle,
+  textAlignment,
+  hasNewEvent,
+  progress,
+  selected,
+  isStacked,
+  isCTA,
+  overflowCount,
+  onClick
+}) {
+  const dimension = sizeMap[size];
+  const initials = (0, import_react4.useMemo)(() => {
+    if (!name) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_Person.default, { sx: { fontSize: dimension * 0.6 } });
+    const words = name.trim().split(/\s+/);
+    if (words.length === 1 && words[0]) return words[0].slice(0, 2).toUpperCase();
+    if (words.length >= 2) return (words[0][0] + words[1][0]).toUpperCase();
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_Person.default, { sx: { fontSize: dimension * 0.6 } });
+  }, [name, dimension]);
+  const renderAvatarCircle = () => {
+    if (isCTA) {
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        import_Avatar.default,
+        {
+          sx: {
+            width: dimension,
+            height: dimension,
+            bgcolor: import_tokens5.tokens.colors.background,
+            color: import_tokens5.tokens.colors.textSecondary,
+            border: `2px dashed ${import_tokens5.tokens.colors.border}`,
+            cursor: "pointer",
+            transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+            "&:hover": {
+              bgcolor: import_tokens5.tokens.colors.greenLight,
+              borderColor: import_tokens5.tokens.colors.green,
+              color: import_tokens5.tokens.colors.green
+            }
+          },
+          children: actionIcon || /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_Add.default, {})
+        }
+      );
+    }
+    if (overflowCount !== void 0) {
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        import_Avatar.default,
+        {
+          sx: {
+            width: dimension,
+            height: dimension,
+            bgcolor: import_tokens5.tokens.colors.divider,
+            color: import_tokens5.tokens.colors.textPrimary,
+            fontSize: fontSizeMap[size],
+            fontWeight: "bold",
+            border: `2px solid ${import_tokens5.tokens.colors.surface}`
+          },
+          children: [
+            "+",
+            overflowCount
+          ]
+        }
+      );
+    }
+    const hasBorderDecorator = hasNewEvent || progress !== void 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_Box5.default, { sx: { position: "relative", width: dimension, height: dimension, display: "flex", alignItems: "center", justifyContent: "center" }, children: [
+      hasBorderDecorator && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        import_Box5.default,
+        {
+          component: "svg",
+          viewBox: "0 0 100 100",
+          sx: {
+            position: "absolute",
+            // Absolute mathematical centering via translate
+            width: dimension + 12,
+            height: dimension + 12,
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%) rotate(-90deg)",
+            zIndex: 0,
+            pointerEvents: "none",
+            overflow: "visible"
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "50", cy: "50", r: "44", fill: "none", stroke: import_tokens5.tokens.colors.divider, strokeWidth: "2", opacity: "0.2" }),
+            progress !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              import_Box5.default,
+              {
+                component: "circle",
+                cx: "50",
+                cy: "50",
+                r: "44",
+                fill: "none",
+                stroke: import_tokens5.tokens.colors.green,
+                strokeWidth: "3",
+                strokeDasharray: "276",
+                strokeLinecap: "round",
+                sx: {
+                  transition: "stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1)",
+                  strokeDashoffset: 276 - 276 * progress / 100,
+                  transformOrigin: "center",
+                  animation: "anime-progress 2.5s ease-out forwards",
+                  "@keyframes anime-progress": {
+                    "0%": { strokeDasharray: "2 15" },
+                    "60%": { strokeDasharray: "15 10" },
+                    "100%": { strokeDasharray: "276" }
+                    // Segment length controlled by dashoffset
+                  }
+                }
+              }
+            ),
+            hasNewEvent && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              import_Box5.default,
+              {
+                component: "circle",
+                cx: "50",
+                cy: "50",
+                r: "44",
+                fill: "none",
+                stroke: import_tokens5.tokens.colors.green,
+                strokeWidth: "3",
+                strokeLinecap: "round",
+                sx: {
+                  transformOrigin: "center",
+                  animation: "event-spin 3s linear infinite, event-solidify 2s ease-in-out forwards",
+                  "@keyframes event-spin": {
+                    "0%": { transform: "rotate(0deg)" },
+                    "100%": { transform: "rotate(360deg)" }
+                  },
+                  "@keyframes event-solidify": {
+                    "0%": { strokeDasharray: "5 25" },
+                    "70%": { strokeDasharray: "60 10" },
+                    "100%": { strokeDasharray: "276" }
+                  }
+                }
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        import_Avatar.default,
+        {
+          alt: name,
+          src: imageUrl,
+          sx: {
+            width: "100%",
+            height: "100%",
+            fontSize: fontSizeMap[size],
+            fontFamily: import_tokens5.tokens.typography.fontFamily,
+            fontWeight: import_tokens5.tokens.typography.fontWeights.extrabold,
+            bgcolor: imageUrl ? "transparent" : import_tokens5.tokens.colors.green,
+            color: import_tokens5.tokens.colors.textOnGreen,
+            border: selected ? `2px solid ${import_tokens5.tokens.colors.green}` : `1px solid ${import_tokens5.tokens.colors.divider}`,
+            boxShadow: import_tokens5.tokens.shadows.card,
+            transition: "all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)",
+            zIndex: 1,
+            ...isStacked && {
+              border: `2px solid ${import_tokens5.tokens.colors.surface}`
+            }
+          },
+          children: !imageUrl && initials
+        }
+      ),
+      selected && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        import_Box5.default,
+        {
+          sx: {
+            position: "absolute",
+            bottom: -2,
+            right: -2,
+            width: Math.max(16, dimension * 0.35),
+            height: Math.max(16, dimension * 0.35),
+            bgcolor: import_tokens5.tokens.colors.green,
+            borderRadius: import_tokens5.tokens.radius.full,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            color: import_tokens5.tokens.colors.white,
+            boxShadow: import_tokens5.tokens.shadows.deep,
+            border: `2px solid ${import_tokens5.tokens.colors.surface}`,
+            zIndex: 3,
+            transform: "translateZ(25px)"
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_Check2.default, { sx: { fontSize: "70%" } })
+        }
+      ),
+      notificationCount !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        import_Box5.default,
+        {
+          sx: {
+            position: "absolute",
+            top: -2,
+            right: -2,
+            minWidth: 18,
+            height: 18,
+            bgcolor: notificationColor || import_tokens5.tokens.colors.error,
+            borderRadius: import_tokens5.tokens.radius.full,
+            color: import_tokens5.tokens.colors.white,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            fontSize: 10,
+            fontWeight: "bold",
+            border: `2px solid ${import_tokens5.tokens.colors.surface}`,
+            zIndex: 2,
+            px: 0.5,
+            transform: "translateZ(20px)"
+          },
+          children: notificationCount
+        }
+      ),
+      status && !actionIcon && !selected && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        import_Box5.default,
+        {
+          sx: {
+            position: "absolute",
+            bottom: 2,
+            right: 2,
+            width: dimension * 0.25,
+            height: dimension * 0.25,
+            minWidth: 10,
+            minHeight: 10,
+            bgcolor: status === "online" ? import_tokens5.tokens.colors.success : import_tokens5.tokens.colors.textDisabled,
+            borderRadius: import_tokens5.tokens.radius.full,
+            border: `2px solid ${import_tokens5.tokens.colors.surface}`,
+            zIndex: 2,
+            transform: "translateZ(15px)"
+          }
+        }
+      ),
+      actionIcon && !selected && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        import_Box5.default,
+        {
+          sx: {
+            position: "absolute",
+            bottom: -2,
+            right: -2,
+            width: dimension * 0.4,
+            height: dimension * 0.4,
+            minWidth: 24,
+            minHeight: 24,
+            bgcolor: import_tokens5.tokens.colors.surface,
+            borderRadius: import_tokens5.tokens.radius.full,
+            color: import_tokens5.tokens.colors.textPrimary,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            border: `1px solid ${import_tokens5.tokens.colors.divider}`,
+            boxShadow: import_tokens5.tokens.shadows.card,
+            zIndex: 2,
+            transform: "translateZ(20px)",
+            transition: "all 0.2s ease",
+            "&:hover": {
+              bgcolor: import_tokens5.tokens.colors.background,
+              color: import_tokens5.tokens.colors.green,
+              transform: "translateZ(25px) scale(1.1)"
+            }
+          },
+          children: import_react4.default.cloneElement(actionIcon, { sx: { fontSize: dimension * 0.2 } })
+        }
+      ),
+      badge && !selected && !actionIcon && !status && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        import_Box5.default,
+        {
+          sx: {
+            position: "absolute",
+            bottom: -2,
+            right: -2,
+            width: dimension * 0.4,
+            height: dimension * 0.4,
+            minWidth: 20,
+            minHeight: 20,
+            bgcolor: import_tokens5.tokens.colors.surface,
+            borderRadius: import_tokens5.tokens.radius.full,
+            color: import_tokens5.tokens.colors.textPrimary,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            border: `1px solid ${import_tokens5.tokens.colors.divider}`,
+            boxShadow: import_tokens5.tokens.shadows.card,
+            zIndex: 2,
+            transform: "translateZ(20px)"
+          },
+          children: badge
+        }
+      )
+    ] });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    import_Box5.default,
+    {
+      onClick,
+      sx: {
+        display: "inline-flex",
+        flexDirection: textAlignment === "bottom" ? "column" : "row",
+        alignItems: "center",
+        gap: import_tokens5.tokens.spacing.xxs,
+        cursor: onClick ? "pointer" : "default",
+        perspective: "1000px",
+        "&:hover .avatar-main": {
+          transform: "rotateY(15deg) rotateX(-5deg) scale(1.1)",
+          filter: "brightness(1.05)"
+        },
+        "&:active .avatar-main": {
+          transform: "scale(1.02)"
+        }
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          import_Box5.default,
+          {
+            className: "avatar-main",
+            sx: {
+              position: "relative",
+              width: dimension,
+              height: dimension,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              transition: "all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)",
+              transformStyle: "preserve-3d"
+            },
+            children: renderAvatarCircle()
+          }
+        ),
+        (name || subtitle || progress !== void 0) && textAlignment && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          import_Box5.default,
+          {
+            sx: {
+              textAlign: textAlignment === "bottom" ? "center" : "left",
+              // Tightened vertical/horizontal gap
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center"
+            },
+            children: [
+              name && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                import_Typography4.default,
+                {
+                  sx: {
+                    fontWeight: import_tokens5.tokens.typography.fontWeights.bold,
+                    fontSize: import_tokens5.tokens.typography.fontSizes.base,
+                    color: import_tokens5.tokens.colors.textPrimary,
+                    lineHeight: 1.1,
+                    fontFamily: import_tokens5.tokens.typography.fontFamily,
+                    whiteSpace: "nowrap"
+                  },
+                  children: name
+                }
+              ),
+              (subtitle || progress !== void 0 && textAlignment === "bottom") && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                import_Typography4.default,
+                {
+                  sx: {
+                    fontSize: import_tokens5.tokens.typography.fontSizes.sm,
+                    color: status === "online" && textAlignment === "side" ? import_tokens5.tokens.colors.success : import_tokens5.tokens.colors.textSecondary,
+                    fontWeight: status === "online" ? "bold" : "normal",
+                    mt: "1px",
+                    fontFamily: import_tokens5.tokens.typography.fontFamily,
+                    whiteSpace: "nowrap"
+                  },
+                  children: progress !== void 0 && textAlignment === "bottom" ? `${progress}% complete` : subtitle
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/foundation/MitumbaGlass/MitumbaGlass.tsx
+var import_Box6 = __toESM(require("@mui/material/Box"));
+var import_tokens6 = require("@mitumba/tokens");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+
+// src/components/selection/MitumbaCheckbox/MitumbaCheckbox.tsx
+var import_react5 = require("react");
+var import_Checkbox2 = __toESM(require("@mui/material/Checkbox"));
+var import_FormControlLabel = __toESM(require("@mui/material/FormControlLabel"));
+var import_tokens7 = require("@mitumba/tokens");
+var import_CheckBox = __toESM(require("@mui/icons-material/CheckBox"));
+var import_CheckBoxOutlineBlank = __toESM(require("@mui/icons-material/CheckBoxOutlineBlank"));
+var import_IndeterminateCheckBox = __toESM(require("@mui/icons-material/IndeterminateCheckBox"));
+var import_jsx_runtime7 = require("react/jsx-runtime");
+
+// src/components/selection/MitumbaRadio/MitumbaRadio.tsx
+var import_Radio = __toESM(require("@mui/material/Radio"));
+var import_FormControlLabel2 = __toESM(require("@mui/material/FormControlLabel"));
+var import_tokens8 = require("@mitumba/tokens");
+var import_RadioButtonUnchecked = __toESM(require("@mui/icons-material/RadioButtonUnchecked"));
+var import_RadioButtonChecked = __toESM(require("@mui/icons-material/RadioButtonChecked"));
+var import_jsx_runtime8 = require("react/jsx-runtime");
+
+// src/components/selection/MitumbaSwitch/MitumbaSwitch.tsx
+var import_Switch = __toESM(require("@mui/material/Switch"));
+var import_FormControlLabel3 = __toESM(require("@mui/material/FormControlLabel"));
+var import_tokens9 = require("@mitumba/tokens");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+
+// src/components/selection/MitumbaSlider/MitumbaSlider.tsx
+var import_Slider = __toESM(require("@mui/material/Slider"));
+var import_Box7 = __toESM(require("@mui/material/Box"));
+var import_Typography5 = __toESM(require("@mui/material/Typography"));
+var import_tokens10 = require("@mitumba/tokens");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+
+// src/components/selection/MitumbaDatePicker/MitumbaDatePicker.tsx
+var import_react6 = require("react");
+var import_Popover = __toESM(require("@mui/material/Popover"));
+var import_Box8 = __toESM(require("@mui/material/Box"));
+var import_Typography6 = __toESM(require("@mui/material/Typography"));
+var import_IconButton2 = __toESM(require("@mui/material/IconButton"));
+var import_CalendarToday = __toESM(require("@mui/icons-material/CalendarToday"));
+var import_ChevronLeft = __toESM(require("@mui/icons-material/ChevronLeft"));
+var import_ChevronRight = __toESM(require("@mui/icons-material/ChevronRight"));
+var import_tokens11 = require("@mitumba/tokens");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+
+// src/components/layout/PageContainer/PageContainer.tsx
+var import_Box9 = __toESM(require("@mui/material/Box"));
+var import_tokens12 = require("@mitumba/tokens");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var maxWidthValues = {
+  sm: 640,
+  md: 900,
+  lg: 1280,
+  xl: 1536
+};
+function PageContainer({
+  children,
+  maxWidth = "lg",
+  noPadding = false
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    import_Box9.default,
+    {
+      sx: {
+        mx: "auto",
+        maxWidth: maxWidthValues[maxWidth],
+        px: noPadding ? 0 : {
+          xs: import_tokens12.tokens.spacing.base,
+          md: import_tokens12.tokens.spacing.lg,
+          lg: import_tokens12.tokens.spacing.xl
+        },
+        width: "100%"
+      },
+      children
+    }
+  );
+}
+
+// src/components/layout/SectionHeader/SectionHeader.tsx
+var import_Box10 = __toESM(require("@mui/material/Box"));
+var import_Typography7 = __toESM(require("@mui/material/Typography"));
+var import_tokens13 = require("@mitumba/tokens");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function SectionHeader({
+  title,
+  subtitle,
+  overline,
+  action,
+  align = "left",
+  variant = "standard",
+  sx,
+  actionLabel,
+  onAction
+}) {
+  const isCentered = align === "center";
+  const isLarge = variant === "large";
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    import_Box10.default,
+    {
+      sx: [
+        {
+          width: "100%",
+          display: "flex",
+          flexDirection: isCentered ? "column" : "row",
+          alignItems: isCentered ? "center" : "flex-end",
+          justifyContent: isCentered ? "center" : "space-between",
+          textAlign: isCentered ? "center" : "left",
+          gap: import_tokens13.tokens.spacing.base,
+          mb: isLarge ? import_tokens13.tokens.spacing.xxxl : import_tokens13.tokens.spacing.xxl
+        },
+        ...Array.isArray(sx) ? sx : [sx]
+      ],
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_Box10.default, { sx: { flex: 1 }, children: [
+          overline && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            import_Typography7.default,
+            {
+              variant: "caption",
+              sx: {
+                display: "block",
+                fontWeight: 800,
+                color: import_tokens13.tokens.colors.green,
+                textTransform: "uppercase",
+                letterSpacing: "0.1em",
+                fontFamily: import_tokens13.tokens.typography.fontFamily,
+                mb: 0.5
+              },
+              children: overline
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            import_Typography7.default,
+            {
+              component: "h2",
+              sx: {
+                color: import_tokens13.tokens.colors.textPrimary,
+                fontSize: isLarge ? import_tokens13.tokens.typography.fontSizes.display : import_tokens13.tokens.typography.fontSizes.xxl,
+                fontWeight: 900,
+                lineHeight: 1.1,
+                fontFamily: import_tokens13.tokens.typography.fontFamily,
+                letterSpacing: "-0.02em"
+              },
+              children: title
+            }
+          ),
+          subtitle && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            import_Typography7.default,
+            {
+              sx: {
+                color: import_tokens13.tokens.colors.textSecondary,
+                fontSize: isLarge ? import_tokens13.tokens.typography.fontSizes.md : import_tokens13.tokens.typography.fontSizes.base,
+                mt: 1,
+                fontFamily: import_tokens13.tokens.typography.fontFamily,
+                maxWidth: 560,
+                marginInline: isCentered ? "auto" : "unset",
+                lineHeight: 1.4
+              },
+              children: subtitle
+            }
+          )
+        ] }),
+        (action || actionLabel) && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_Box10.default, { sx: { flexShrink: 0, mb: isCentered ? 0 : 0.5 }, children: action || /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          MitumbaPrimaryButton,
+          {
+            label: actionLabel,
+            onClick: onAction || (() => {
+            }),
+            variant: "ghost",
+            size: "small",
+            fullWidth: false
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+// src/components/layout/MitumbaDivider/MitumbaDivider.tsx
+var import_Box11 = __toESM(require("@mui/material/Box"));
+var import_tokens14 = require("@mitumba/tokens");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function MitumbaDivider() {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    import_Box11.default,
+    {
+      component: "hr",
+      sx: {
+        backgroundColor: import_tokens14.tokens.colors.divider,
+        border: "none",
+        height: "1px",
+        marginBlock: 0,
+        width: "100%"
+      }
+    }
+  );
+}
+
+// src/components/layout/MitumbaGrid/MitumbaGrid.tsx
+var import_Box12 = __toESM(require("@mui/material/Box"));
+var import_tokens15 = require("@mitumba/tokens");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function MitumbaGrid({
+  children,
+  columns = { xs: 4, sm: 8, md: 8, lg: 12 },
+  gap,
+  sx
+}) {
+  const defaultGap = {
+    xs: import_tokens15.tokens.spacing.base,
+    // 12px
+    sm: import_tokens15.tokens.spacing.base,
+    // 12px
+    md: import_tokens15.tokens.spacing.lg,
+    // 16px
+    lg: import_tokens15.tokens.spacing.lg
+    // 16px
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    import_Box12.default,
+    {
+      sx: [
+        {
+          display: "grid",
+          width: "100%",
+          gap: gap || defaultGap,
+          gridTemplateColumns: {
+            xs: `repeat(${columns.xs}, 1fr)`,
+            sm: `repeat(${columns.sm}, 1fr)`,
+            md: `repeat(${columns.md}, 1fr)`,
+            lg: `repeat(${columns.lg}, 1fr)`
+          }
+        },
+        ...Array.isArray(sx) ? sx : [sx]
+      ],
+      children
+    }
+  );
+}
+
+// src/components/navigation/MitumbaBreadcrumb/MitumbaBreadcrumb.tsx
+var import_Breadcrumbs = __toESM(require("@mui/material/Breadcrumbs"));
+var import_Link = __toESM(require("@mui/material/Link"));
+var import_Typography8 = __toESM(require("@mui/material/Typography"));
+var import_tokens16 = require("@mitumba/tokens");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function MitumbaBreadcrumb({ items }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    import_Breadcrumbs.default,
+    {
+      separator: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        import_Typography8.default,
+        {
+          sx: {
+            color: import_tokens16.tokens.colors.divider,
+            mx: 0.5,
+            fontWeight: 400,
+            fontSize: 16,
+            fontFamily: import_tokens16.tokens.typography.fontFamily
+          },
+          children: "/"
+        }
+      ),
+      sx: {
+        "& .MuiBreadcrumbs-ol": {
+          flexWrap: "nowrap"
+        }
+      },
+      children: items.map((item, index) => {
+        const isLast = index === items.length - 1;
+        if (isLast) {
+          return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            import_Typography8.default,
+            {
+              sx: {
+                color: import_tokens16.tokens.colors.textPrimary,
+                fontSize: import_tokens16.tokens.typography.fontSizes.sm,
+                fontWeight: 800,
+                fontFamily: import_tokens16.tokens.typography.fontFamily,
+                whiteSpace: "nowrap"
+              },
+              children: item.label
+            },
+            item.label
+          );
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          import_Link.default,
+          {
+            href: item.href || "#",
+            sx: {
+              color: import_tokens16.tokens.colors.textSecondary,
+              fontSize: import_tokens16.tokens.typography.fontSizes.sm,
+              fontWeight: 600,
+              fontFamily: import_tokens16.tokens.typography.fontFamily,
+              textDecoration: "none",
+              transition: "all 0.2s ease",
+              whiteSpace: "nowrap",
+              "&:hover": {
+                color: import_tokens16.tokens.colors.green,
+                transform: "translateY(-1px)"
+              }
+            },
+            children: item.label
+          },
+          item.label
+        );
+      })
+    }
+  );
+}
+
+// src/components/navigation/MobileBottomNav/MobileBottomNav.tsx
+var import_Box13 = __toESM(require("@mui/material/Box"));
+var import_Typography9 = __toESM(require("@mui/material/Typography"));
+var import_Home = __toESM(require("@mui/icons-material/Home"));
+var import_Search2 = __toESM(require("@mui/icons-material/Search"));
+var import_LocalMall = __toESM(require("@mui/icons-material/LocalMall"));
+var import_Person2 = __toESM(require("@mui/icons-material/Person"));
+var import_AutoAwesome = __toESM(require("@mui/icons-material/AutoAwesome"));
+var import_tokens17 = require("@mitumba/tokens");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var DEFAULT_ITEMS = [
+  { id: "home", label: "Home", icon: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Home.default, {}) },
+  { id: "search", label: "Search", icon: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Search2.default, {}) },
+  { id: "vazi", label: "VAZI", icon: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_AutoAwesome.default, {}) },
+  { id: "orders", label: "Orders", icon: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_LocalMall.default, {}) },
+  { id: "profile", label: "Profile", icon: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Person2.default, {}) }
+];
+function MobileBottomNav({
+  activeTab,
+  onTabChange,
+  variant = "m3",
+  items = DEFAULT_ITEMS,
+  sx
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    import_Box13.default,
+    {
+      sx: [
+        {
+          position: "fixed",
+          bottom: 0,
+          left: 0,
+          right: 0,
+          height: 80,
+          backgroundColor: import_tokens17.tokens.colors.surface,
+          borderTop: `1px solid ${import_tokens17.tokens.colors.divider}`,
+          boxShadow: "0 -4px 12px rgba(0,0,0,0.05)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-around",
+          px: 2,
+          zIndex: (theme) => theme.zIndex.appBar,
+          paddingBottom: "env(safe-area-inset-bottom)"
+        },
+        ...Array.isArray(sx) ? sx : [sx]
+      ],
+      children: items.map((item) => {
+        const isActive = activeTab === item.id;
+        const getStyles = () => {
+          if (variant === "m3") {
+            return {
+              flexDirection: "column",
+              gap: 0.5,
+              "& .icon-wrapper": {
+                width: 64,
+                height: 32,
+                borderRadius: import_tokens17.tokens.radius.full,
+                backgroundColor: isActive ? `${import_tokens17.tokens.colors.green}20` : "transparent",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                transition: "all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)",
+                color: isActive ? import_tokens17.tokens.colors.green : import_tokens17.tokens.colors.textSecondary
+              },
+              "& .label": {
+                fontSize: 10,
+                fontWeight: isActive ? 800 : 600,
+                color: isActive ? import_tokens17.tokens.colors.green : import_tokens17.tokens.colors.textSecondary
+              }
+            };
+          }
+          if (variant === "expansive") {
+            return {
+              flexDirection: "column",
+              backgroundColor: isActive ? import_tokens17.tokens.colors.green : "transparent",
+              borderRadius: `${import_tokens17.tokens.radius.md}px`,
+              py: 1,
+              px: 2,
+              minWidth: 70,
+              transition: "all 0.3s ease",
+              color: isActive ? import_tokens17.tokens.colors.white : import_tokens17.tokens.colors.textSecondary,
+              "& .icon-wrapper": {
+                fontSize: 24,
+                mb: 0.2
+              },
+              "& .label": {
+                fontSize: 10,
+                fontWeight: 700
+              }
+            };
+          }
+          if (variant === "indicator") {
+            return {
+              flexDirection: "column",
+              position: "relative",
+              color: isActive ? import_tokens17.tokens.colors.green : import_tokens17.tokens.colors.textSecondary,
+              "& .label": {
+                fontSize: 11,
+                fontWeight: 700,
+                mt: 0.5
+              },
+              "&::after": {
+                content: '""',
+                position: "absolute",
+                bottom: -12,
+                left: "25%",
+                width: isActive ? "50%" : 0,
+                height: 3,
+                backgroundColor: import_tokens17.tokens.colors.green,
+                borderRadius: "3px 3px 0 0",
+                transition: "all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)"
+              }
+            };
+          }
+          if (variant === "pill") {
+            return {
+              flexDirection: "row",
+              gap: 1,
+              px: isActive ? 2 : 1,
+              py: 1,
+              borderRadius: import_tokens17.tokens.radius.full,
+              backgroundColor: isActive ? import_tokens17.tokens.colors.green : "transparent",
+              color: isActive ? import_tokens17.tokens.colors.white : import_tokens17.tokens.colors.textSecondary,
+              transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+              "& .label": {
+                display: isActive ? "block" : "none",
+                fontSize: 12,
+                fontWeight: 800
+              }
+            };
+          }
+          if (variant === "standalone") {
+            return {
+              flexDirection: "row",
+              gap: 1,
+              px: 2,
+              py: 1.2,
+              borderRadius: import_tokens17.tokens.radius.full,
+              border: isActive ? `1.5px solid ${import_tokens17.tokens.colors.green}` : "1.5px solid transparent",
+              color: isActive ? import_tokens17.tokens.colors.green : import_tokens17.tokens.colors.textSecondary,
+              backgroundColor: isActive ? `${import_tokens17.tokens.colors.green}10` : "transparent",
+              transition: "all 0.3s ease",
+              "& .label": {
+                display: isActive ? "block" : "none",
+                fontSize: 12,
+                fontWeight: 800
+              }
+            };
+          }
+          return {};
+        };
+        return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+          import_Box13.default,
+          {
+            onClick: () => onTabChange(item.id),
+            sx: {
+              cursor: "pointer",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flex: 1,
+              height: "100%",
+              userSelect: "none",
+              ...getStyles(),
+              "&:active": { transform: "scale(0.92)" }
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Box13.default, { className: "icon-wrapper", sx: { display: "flex" }, children: isActive && item.activeIcon ? item.activeIcon : item.icon }),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Typography9.default, { className: "label", sx: { fontFamily: import_tokens17.tokens.typography.fontFamily }, children: item.label })
+            ]
+          },
+          item.id
+        );
+      })
+    }
+  );
+}
+
+// src/components/navigation/TopNav/TopNav.tsx
+var import_AppBar = __toESM(require("@mui/material/AppBar"));
+var import_Box15 = __toESM(require("@mui/material/Box"));
+var import_IconButton3 = __toESM(require("@mui/material/IconButton"));
+var import_Toolbar = __toESM(require("@mui/material/Toolbar"));
+var import_Typography11 = __toESM(require("@mui/material/Typography"));
+var import_Stack = __toESM(require("@mui/material/Stack"));
+var import_Link2 = __toESM(require("@mui/material/Link"));
+var import_Badge = __toESM(require("@mui/material/Badge"));
+var import_ShoppingCart = __toESM(require("@mui/icons-material/ShoppingCart"));
+var import_tokens19 = require("@mitumba/tokens");
+
+// src/components/forms/MitumbaSearchBar/MitumbaSearchBar.tsx
+var import_react7 = require("react");
+var import_Box14 = __toESM(require("@mui/material/Box"));
+var import_Typography10 = __toESM(require("@mui/material/Typography"));
+var import_Search3 = __toESM(require("@mui/icons-material/Search"));
+var import_Close = __toESM(require("@mui/icons-material/Close"));
+var import_tokens18 = require("@mitumba/tokens");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function MitumbaSearchBar({
+  value,
+  onChange,
+  onSubmit,
+  placeholder = "Search...",
+  suggestions,
+  onSuggestionClick
+}) {
+  const [isFocused, setIsFocused] = (0, import_react7.useState)(false);
+  const handleKeyDown = (0, import_react7.useCallback)(
+    (e) => {
+      if (e.key === "Enter") {
+        onSubmit(value);
+      }
+    },
+    [value, onSubmit]
+  );
+  const handleClear = (0, import_react7.useCallback)(() => {
+    onChange("");
+  }, [onChange]);
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_Box14.default, { sx: { position: "relative", width: "100%" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+      import_Box14.default,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          border: "1px solid",
+          borderColor: isFocused ? import_tokens18.tokens.colors.green : import_tokens18.tokens.colors.border,
+          borderWidth: isFocused ? "2px" : "1px",
+          borderRadius: import_tokens18.tokens.radius.lg,
+          backgroundColor: import_tokens18.tokens.colors.surface,
+          paddingInline: import_tokens18.tokens.spacing.base,
+          paddingBlock: isFocused ? "11px" : "12px",
+          gap: import_tokens18.tokens.spacing.sm,
+          transition: "all 200ms ease",
+          boxShadow: isFocused ? import_tokens18.tokens.shadows.focus : "none",
+          "&:hover": {
+            borderColor: isFocused ? import_tokens18.tokens.colors.green : import_tokens18.tokens.colors.textDisabled
+          }
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_Search3.default, { sx: { color: import_tokens18.tokens.colors.textSecondary, fontSize: 20 } }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            import_Box14.default,
+            {
+              component: "input",
+              type: "text",
+              value,
+              onChange: (e) => onChange(e.target.value),
+              onKeyDown: handleKeyDown,
+              onFocus: () => setIsFocused(true),
+              onBlur: () => setTimeout(() => setIsFocused(false), 200),
+              placeholder,
+              "aria-label": "Search",
+              sx: {
+                border: "none",
+                outline: "none",
+                backgroundColor: "transparent",
+                fontSize: import_tokens18.tokens.typography.fontSizes.base,
+                fontFamily: import_tokens18.tokens.typography.fontFamily,
+                color: import_tokens18.tokens.colors.textPrimary,
+                width: "100%",
+                height: "24px",
+                "&::placeholder": {
+                  color: import_tokens18.tokens.colors.textDisabled,
+                  opacity: 1
+                }
+              }
+            }
+          ),
+          value && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            import_Box14.default,
+            {
+              component: "button",
+              onClick: handleClear,
+              "aria-label": "Clear search",
+              sx: {
+                cursor: "pointer",
+                color: import_tokens18.tokens.colors.textDisabled,
+                display: "flex",
+                alignItems: "center",
+                background: "none",
+                border: "none",
+                padding: 0,
+                transition: "all 200ms ease",
+                "&:hover": {
+                  color: import_tokens18.tokens.colors.error
+                },
+                "&:focus-visible": {
+                  outline: `2px solid ${import_tokens18.tokens.colors.greenLight}`,
+                  borderRadius: import_tokens18.tokens.radius.xs
+                }
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_Close.default, { sx: { fontSize: 18 } })
+            }
+          )
+        ]
+      }
+    ),
+    isFocused && suggestions && suggestions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      import_Box14.default,
+      {
+        sx: {
+          position: "absolute",
+          top: "100%",
+          left: 0,
+          right: 0,
+          mt: import_tokens18.tokens.spacing.xs,
+          backgroundColor: import_tokens18.tokens.colors.surface,
+          border: `1px solid ${import_tokens18.tokens.colors.border}`,
+          borderRadius: import_tokens18.tokens.radius.md,
+          boxShadow: import_tokens18.tokens.shadows.elevated,
+          zIndex: 10,
+          overflow: "hidden",
+          animation: "fadeIn 200ms ease",
+          "@keyframes fadeIn": {
+            from: { opacity: 0, transform: "translateY(-10px)" },
+            to: { opacity: 1, transform: "translateY(0)" }
+          }
+        },
+        children: suggestions.map((suggestion) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          import_Box14.default,
+          {
+            onClick: () => {
+              onSuggestionClick?.(suggestion);
+              setIsFocused(false);
+            },
+            sx: {
+              paddingInline: import_tokens18.tokens.spacing.base,
+              paddingBlock: import_tokens18.tokens.spacing.sm,
+              cursor: "pointer",
+              transition: "background-color 200ms ease",
+              "&:hover": {
+                backgroundColor: import_tokens18.tokens.colors.background
+              }
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              import_Typography10.default,
+              {
+                sx: {
+                  fontSize: import_tokens18.tokens.typography.fontSizes.base,
+                  fontFamily: import_tokens18.tokens.typography.fontFamily,
+                  color: import_tokens18.tokens.colors.textPrimary
+                },
+                children: suggestion
+              }
+            )
+          },
+          suggestion
+        ))
+      }
+    )
+  ] });
+}
+
+// src/components/navigation/TopNav/TopNav.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function TopNav({
+  announcement,
+  logo,
+  links = [],
+  actions,
+  cta,
+  sticky = true,
+  transparent = false,
+  searchValue = "",
+  onSearchChange,
+  onSearchSubmit,
+  user,
+  isAuthenticated = false,
+  onLogoClick,
+  onAuthClick,
+  onProfileClick,
+  onCartClick,
+  cartCount = 0,
+  sx
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    import_AppBar.default,
+    {
+      position: sticky ? "sticky" : "static",
+      elevation: 0,
+      sx: [
+        {
+          backgroundColor: transparent ? "transparent" : import_tokens19.tokens.colors.surface,
+          borderBottom: transparent ? "none" : `1px solid ${import_tokens19.tokens.colors.divider}`,
+          color: import_tokens19.tokens.colors.textPrimary,
+          zIndex: (theme) => theme.zIndex.appBar
+        },
+        ...Array.isArray(sx) ? sx : [sx]
+      ],
+      children: [
+        announcement && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          import_Box15.default,
+          {
+            sx: {
+              backgroundColor: import_tokens19.tokens.colors.green,
+              color: import_tokens19.tokens.colors.white,
+              py: 1,
+              px: 2,
+              textAlign: "center",
+              fontSize: 12,
+              fontWeight: 700,
+              fontFamily: import_tokens19.tokens.typography.fontFamily
+            },
+            children: announcement
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+          import_Toolbar.default,
+          {
+            sx: {
+              justifyContent: "space-between",
+              height: { xs: 64, md: 80 },
+              px: { xs: 2, md: 4, lg: 6 },
+              gap: 4
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                import_Box15.default,
+                {
+                  onClick: onLogoClick,
+                  sx: { cursor: "pointer", display: "flex", alignItems: "center" },
+                  children: logo || /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                    import_Typography11.default,
+                    {
+                      variant: "h6",
+                      sx: {
+                        fontWeight: 900,
+                        color: import_tokens19.tokens.colors.green,
+                        letterSpacing: "-0.02em",
+                        fontFamily: import_tokens19.tokens.typography.fontFamily
+                      },
+                      children: "MITUMBA"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                import_Stack.default,
+                {
+                  direction: "row",
+                  spacing: 4,
+                  sx: { display: { xs: "none", md: "flex" }, flexGrow: 1, justifyContent: "center" },
+                  children: links.map((link) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                    import_Link2.default,
+                    {
+                      href: link.href,
+                      sx: {
+                        color: link.active ? import_tokens19.tokens.colors.green : import_tokens19.tokens.colors.textSecondary,
+                        textDecoration: "none",
+                        fontWeight: 700,
+                        fontSize: 14,
+                        fontFamily: import_tokens19.tokens.typography.fontFamily,
+                        transition: "all 0.2s ease",
+                        "&:hover": {
+                          color: import_tokens19.tokens.colors.green,
+                          transform: "translateY(-1px)"
+                        }
+                      },
+                      children: link.label
+                    },
+                    link.label
+                  ))
+                }
+              ),
+              onSearchSubmit && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_Box15.default, { sx: { display: { xs: "none", lg: "block" }, width: 300 }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                MitumbaSearchBar,
+                {
+                  value: searchValue,
+                  onChange: onSearchChange || (() => {
+                  }),
+                  onSubmit: onSearchSubmit,
+                  placeholder: "Search listings..."
+                }
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_Stack.default, { direction: "row", spacing: 1, alignItems: "center", children: [
+                actions,
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_IconButton3.default, { onClick: onCartClick, sx: { color: import_tokens19.tokens.colors.textPrimary }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_Badge.default, { badgeContent: cartCount, color: "error", sx: { "& .MuiBadge-badge": { fontWeight: 800, fontSize: 10 } }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_ShoppingCart.default, {}) }) }),
+                isAuthenticated && user ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_Box15.default, { onClick: onProfileClick, sx: { cursor: "pointer", transition: "transform 0.2s ease", "&:hover": { transform: "scale(1.05)" } }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(MitumbaAvatar, { name: user.name, size: "sm", imageUrl: user.avatarUrl }) }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                  MitumbaPrimaryButton,
+                  {
+                    label: "Sign In",
+                    variant: "ghost",
+                    onClick: onAuthClick || (() => {
+                    }),
+                    size: "small",
+                    sx: { fontWeight: 800 }
+                  }
+                ),
+                cta && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_Box15.default, { sx: { display: { xs: "none", sm: "block" } }, children: cta })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/navigation/MitumbaTabs/MitumbaTabs.tsx
+var import_Tabs = __toESM(require("@mui/material/Tabs"));
+var import_Tab = __toESM(require("@mui/material/Tab"));
+var import_Box16 = __toESM(require("@mui/material/Box"));
+var import_tokens20 = require("@mitumba/tokens");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+
+// src/components/navigation/MitumbaPagination/MitumbaPagination.tsx
+var import_Pagination = __toESM(require("@mui/material/Pagination"));
+var import_PaginationItem = __toESM(require("@mui/material/PaginationItem"));
+var import_Stack2 = __toESM(require("@mui/material/Stack"));
+var import_ChevronLeft2 = __toESM(require("@mui/icons-material/ChevronLeft"));
+var import_ChevronRight2 = __toESM(require("@mui/icons-material/ChevronRight"));
+var import_tokens21 = require("@mitumba/tokens");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+
+// src/components/navigation/MitumbaStepper/MitumbaStepper.tsx
+var import_Stepper = __toESM(require("@mui/material/Stepper"));
+var import_Step = __toESM(require("@mui/material/Step"));
+var import_StepLabel = __toESM(require("@mui/material/StepLabel"));
+var import_StepConnector = __toESM(require("@mui/material/StepConnector"));
+var import_styles = require("@mui/material/styles");
+var import_Box17 = __toESM(require("@mui/material/Box"));
+var import_Typography12 = __toESM(require("@mui/material/Typography"));
+var import_Check3 = __toESM(require("@mui/icons-material/Check"));
+var import_tokens22 = require("@mitumba/tokens");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var MitumbaConnector = (0, import_styles.styled)(import_StepConnector.default)(() => ({
+  [`&.${import_StepConnector.stepConnectorClasses.alternativeLabel}`]: {
+    top: 18
+  },
+  [`&.${import_StepConnector.stepConnectorClasses.active}`]: {
+    [`& .${import_StepConnector.stepConnectorClasses.line}`]: {
+      borderColor: import_tokens22.tokens.colors.green
+    }
+  },
+  [`&.${import_StepConnector.stepConnectorClasses.completed}`]: {
+    [`& .${import_StepConnector.stepConnectorClasses.line}`]: {
+      borderColor: import_tokens22.tokens.colors.green
+    }
+  },
+  [`& .${import_StepConnector.stepConnectorClasses.line}`]: {
+    borderColor: import_tokens22.tokens.colors.divider,
+    borderTopWidth: 2,
+    borderRadius: 1,
+    transition: "all 0.3s ease",
+    borderStyle: "dashed"
+    // Benchmark style for pending
+  },
+  [`&.${import_StepConnector.stepConnectorClasses.completed} .${import_StepConnector.stepConnectorClasses.line}`]: {
+    borderStyle: "solid"
+    // Benchmark style for completed
+  }
+}));
+
+// src/components/seller/STIScoreChip/STIScoreChip.tsx
+var import_Box18 = __toESM(require("@mui/material/Box"));
+var import_tokens23 = require("@mitumba/tokens");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+function getSTIConfig(score) {
+  if (score >= 85) {
+    return { color: import_tokens23.tokens.colors.stiTrusted, label: "Trusted \u2605" };
+  }
+  if (score >= 60) {
+    return { color: import_tokens23.tokens.colors.stiGood, label: "Good" };
+  }
+  if (score >= 40) {
+    return { color: import_tokens23.tokens.colors.stiAtRisk, label: "At risk" };
+  }
+  if (score >= 20) {
+    return { color: import_tokens23.tokens.colors.stiFlagged, label: "Flagged" };
+  }
+  return { color: import_tokens23.tokens.colors.stiSuspended, label: "Suspended" };
+}
+function STIScoreChip({
+  score,
+  compact = false,
+  showLabel
+}) {
+  const clampedScore = Math.min(100, Math.max(0, score));
+  const { color, label } = getSTIConfig(clampedScore);
+  const shouldShowLabel = showLabel ?? !compact;
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+    import_Box18.default,
+    {
+      sx: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: import_tokens23.tokens.spacing.xs,
+        height: compact ? "24px" : "32px",
+        px: compact ? import_tokens23.tokens.spacing.sm : import_tokens23.tokens.spacing.md,
+        borderRadius: import_tokens23.tokens.radius.full,
+        backgroundColor: `${color}14`,
+        border: `1px solid ${color}40`,
+        width: "fit-content",
+        transition: "all 200ms ease"
+      },
+      "aria-label": `STI Score: ${clampedScore}, ${label}`,
+      children: [
+        shouldShowLabel && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          import_Box18.default,
+          {
+            component: "span",
+            sx: {
+              color,
+              fontSize: compact ? 10 : import_tokens23.tokens.typography.fontSizes.xs,
+              fontWeight: import_tokens23.tokens.typography.fontWeights.bold,
+              textTransform: "uppercase",
+              letterSpacing: import_tokens23.tokens.typography.letterSpacings.wide,
+              lineHeight: 1
+            },
+            children: label
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          import_Box18.default,
+          {
+            component: "span",
+            sx: {
+              color,
+              fontSize: compact ? import_tokens23.tokens.typography.fontSizes.xs : import_tokens23.tokens.typography.fontSizes.sm,
+              fontWeight: import_tokens23.tokens.typography.fontWeights.extrabold,
+              lineHeight: 1,
+              minWidth: "1.2em",
+              textAlign: "center",
+              ...shouldShowLabel && {
+                borderLeft: `1px solid ${color}40`,
+                paddingLeft: import_tokens23.tokens.spacing.xs,
+                marginLeft: "2px"
+              }
+            },
+            children: clampedScore
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/seller/SellerCard/SellerCard.tsx
+var import_Box19 = __toESM(require("@mui/material/Box"));
+var import_Typography13 = __toESM(require("@mui/material/Typography"));
+var import_Inventory2Outlined = __toESM(require("@mui/icons-material/Inventory2Outlined"));
+var import_LocationOnOutlined = __toESM(require("@mui/icons-material/LocationOnOutlined"));
+var import_tokens24 = require("@mitumba/tokens");
+
+// src/components/vazi/VAZIBadge/VAZIBadge.tsx
+var import_AutoAwesome2 = __toESM(require("@mui/icons-material/AutoAwesome"));
+var import_jsx_runtime24 = require("react/jsx-runtime");
+function VAZIBadge({ size = "small" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    MitumbaChip,
+    {
+      label: "VAZI Curation",
+      status: "special",
+      variant: "solid",
+      size,
+      icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_AutoAwesome2.default, {}),
+      color: "purple"
+    }
+  );
+}
+
+// src/components/seller/SellerCard/SellerCard.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+function SellerCard({
+  name,
+  avatarUrl,
+  city,
+  stiScore,
+  totalListings,
+  isVaziFeatured = false,
+  onTap
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+    import_Box19.default,
+    {
+      onClick: onTap,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onTap?.();
+        }
+      },
+      role: "button",
+      tabIndex: onTap ? 0 : -1,
+      "aria-label": `${name} storefront, ${totalListings} listings`,
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        gap: import_tokens24.tokens.spacing.base,
+        p: import_tokens24.tokens.spacing.base,
+        borderRadius: import_tokens24.tokens.radius.lg,
+        bgcolor: import_tokens24.tokens.colors.surface,
+        boxShadow: import_tokens24.tokens.shadows.card,
+        border: `1px solid ${import_tokens24.tokens.colors.divider}`,
+        cursor: onTap ? "pointer" : "default",
+        transition: "all 250ms cubic-bezier(0.4, 0, 0.2, 1)",
+        "&:hover": onTap ? {
+          boxShadow: import_tokens24.tokens.shadows.elevated,
+          transform: "translateY(-2px)",
+          borderColor: import_tokens24.tokens.colors.border
+        } : void 0,
+        "&:focus-visible": {
+          outline: `2px solid ${import_tokens24.tokens.colors.greenLight}`,
+          boxShadow: import_tokens24.tokens.shadows.focus
+        }
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(MitumbaAvatar, { name, imageUrl: avatarUrl, size: "md" }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_Box19.default, { sx: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_Box19.default, { sx: { display: "flex", alignItems: "center", gap: import_tokens24.tokens.spacing.sm }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              import_Typography13.default,
+              {
+                sx: {
+                  fontWeight: import_tokens24.tokens.typography.fontWeights.bold,
+                  fontSize: import_tokens24.tokens.typography.fontSizes.base,
+                  color: import_tokens24.tokens.colors.textPrimary,
+                  lineHeight: 1.2,
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap",
+                  fontFamily: import_tokens24.tokens.typography.fontFamily
+                },
+                children: name
+              }
+            ),
+            isVaziFeatured && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(VAZIBadge, { size: "small" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_Box19.default, { sx: { display: "flex", alignItems: "center", gap: import_tokens24.tokens.spacing.sm, mt: import_tokens24.tokens.spacing.xs }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(STIScoreChip, { score: stiScore, compact: true }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_Box19.default, { sx: { display: "flex", alignItems: "center", gap: "4px", opacity: 0.7 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_Inventory2Outlined.default, { sx: { fontSize: 14, color: import_tokens24.tokens.colors.textSecondary } }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                import_Typography13.default,
+                {
+                  sx: {
+                    color: import_tokens24.tokens.colors.textSecondary,
+                    fontSize: 10,
+                    fontWeight: import_tokens24.tokens.typography.fontWeights.semibold,
+                    textTransform: "uppercase",
+                    letterSpacing: import_tokens24.tokens.typography.letterSpacings.wide
+                  },
+                  children: totalListings
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_Box19.default, { sx: { display: "flex", alignItems: "center", gap: "4px", opacity: 0.7 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_LocationOnOutlined.default, { sx: { fontSize: 14, color: import_tokens24.tokens.colors.textSecondary } }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                import_Typography13.default,
+                {
+                  sx: {
+                    color: import_tokens24.tokens.colors.textSecondary,
+                    fontSize: 10,
+                    fontWeight: import_tokens24.tokens.typography.fontWeights.semibold,
+                    textTransform: "uppercase",
+                    letterSpacing: import_tokens24.tokens.typography.letterSpacings.wide
+                  },
+                  children: city
+                }
+              )
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/seller/STIBreakdownPanel/STIBreakdownPanel.tsx
+var import_Box20 = __toESM(require("@mui/material/Box"));
+var import_Typography14 = __toESM(require("@mui/material/Typography"));
+var import_LinearProgress = __toESM(require("@mui/material/LinearProgress"));
+var import_AddOutlined = __toESM(require("@mui/icons-material/AddOutlined"));
+var import_RemoveOutlined = __toESM(require("@mui/icons-material/RemoveOutlined"));
+var import_tokens25 = require("@mitumba/tokens");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+function formatPercent(value) {
+  return `${Math.round(value * 100)}%`;
+}
+function STIBreakdownPanel({
+  score,
+  fulfillmentRate,
+  accuracyRate,
+  avgResponseHours,
+  daysActive,
+  recentEvents
+}) {
+  const factors = [
+    { label: "Fulfillment Rate", value: fulfillmentRate, display: formatPercent(fulfillmentRate) },
+    { label: "Listing Accuracy", value: accuracyRate, display: formatPercent(accuracyRate) },
+    { label: "Avg Response Time", display: `${avgResponseHours}h` },
+    { label: "Days Active", display: `${daysActive}` }
+  ];
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+    import_Box20.default,
+    {
+      sx: {
+        p: import_tokens25.tokens.spacing.base,
+        borderRadius: import_tokens25.tokens.radius.lg,
+        bgcolor: import_tokens25.tokens.colors.surface,
+        boxShadow: import_tokens25.tokens.shadows.card,
+        border: `1px solid ${import_tokens25.tokens.colors.divider}`
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_Box20.default, { sx: { display: "flex", alignItems: "center", gap: import_tokens25.tokens.spacing.base, mb: import_tokens25.tokens.spacing.lg }, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(STIScoreChip, { score }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_Box20.default, { component: "section", "aria-label": "Score factors", sx: { mb: import_tokens25.tokens.spacing.lg }, children: factors.map((factor) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_Box20.default, { sx: { mb: import_tokens25.tokens.spacing.md }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_Box20.default, { sx: { display: "flex", justifyContent: "space-between", mb: import_tokens25.tokens.spacing.xs }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+              import_Typography14.default,
+              {
+                variant: "body2",
+                sx: { color: import_tokens25.tokens.colors.textSecondary, fontSize: import_tokens25.tokens.typography.fontSizes.sm },
+                children: factor.label
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+              import_Typography14.default,
+              {
+                variant: "body2",
+                sx: { fontWeight: import_tokens25.tokens.typography.fontWeights.semibold, fontSize: import_tokens25.tokens.typography.fontSizes.sm },
+                children: factor.display
+              }
+            )
+          ] }),
+          factor.value !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            import_LinearProgress.default,
+            {
+              variant: "determinate",
+              value: factor.value * 100,
+              sx: {
+                height: import_tokens25.tokens.spacing.sm,
+                borderRadius: import_tokens25.tokens.radius.full,
+                bgcolor: import_tokens25.tokens.colors.background,
+                "& .MuiLinearProgress-bar": {
+                  bgcolor: import_tokens25.tokens.colors.green,
+                  borderRadius: import_tokens25.tokens.radius.full
+                }
+              },
+              "aria-label": `${factor.label} progress`
+            }
+          )
+        ] }, factor.label)) }),
+        recentEvents.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_Box20.default, { component: "section", "aria-label": "Recent STI events", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            import_Typography14.default,
+            {
+              variant: "body2",
+              sx: {
+                fontWeight: import_tokens25.tokens.typography.fontWeights.semibold,
+                fontSize: import_tokens25.tokens.typography.fontSizes.sm,
+                color: import_tokens25.tokens.colors.textPrimary,
+                mb: import_tokens25.tokens.spacing.sm
+              },
+              children: "Recent Events"
+            }
+          ),
+          recentEvents.map((event) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+            import_Box20.default,
+            {
+              sx: {
+                display: "flex",
+                alignItems: "flex-start",
+                gap: import_tokens25.tokens.spacing.sm,
+                py: import_tokens25.tokens.spacing.sm,
+                borderBottom: `1px solid ${import_tokens25.tokens.colors.divider}`
+              },
+              children: [
+                event.type === "positive" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_AddOutlined.default, { sx: { fontSize: 16, color: import_tokens25.tokens.colors.success, mt: import_tokens25.tokens.spacing.xs } }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_RemoveOutlined.default, { sx: { fontSize: 16, color: import_tokens25.tokens.colors.error, mt: import_tokens25.tokens.spacing.xs } }),
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_Box20.default, { sx: { flex: 1 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_Box20.default, { sx: { display: "flex", justifyContent: "space-between" }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                      import_Typography14.default,
+                      {
+                        variant: "body2",
+                        sx: {
+                          fontSize: import_tokens25.tokens.typography.fontSizes.sm,
+                          color: import_tokens25.tokens.colors.textPrimary,
+                          fontWeight: import_tokens25.tokens.typography.fontWeights.medium
+                        },
+                        children: event.reason
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+                      import_Typography14.default,
+                      {
+                        variant: "caption",
+                        sx: {
+                          fontSize: import_tokens25.tokens.typography.fontSizes.xs,
+                          fontWeight: import_tokens25.tokens.typography.fontWeights.bold,
+                          color: event.type === "positive" ? import_tokens25.tokens.colors.success : import_tokens25.tokens.colors.error
+                        },
+                        children: [
+                          event.type === "positive" ? "+" : "",
+                          event.pointsChange
+                        ]
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_Typography14.default, { variant: "caption", sx: { fontSize: import_tokens25.tokens.typography.fontSizes.xs, color: import_tokens25.tokens.colors.textSecondary }, children: event.timestamp })
+                ] })
+              ]
+            },
+            `${event.reason}-${event.timestamp}`
+          ))
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/listing/ListingCard/ListingCard.tsx
+var import_react8 = require("react");
+var import_Box21 = __toESM(require("@mui/material/Box"));
+var import_Typography15 = __toESM(require("@mui/material/Typography"));
+var import_Stack3 = __toESM(require("@mui/material/Stack"));
+var import_IconButton4 = __toESM(require("@mui/material/IconButton"));
+var import_Favorite = __toESM(require("@mui/icons-material/Favorite"));
+var import_FavoriteBorder = __toESM(require("@mui/icons-material/FavoriteBorder"));
+var import_ArrowOutward = __toESM(require("@mui/icons-material/ArrowOutward"));
+var import_tokens26 = require("@mitumba/tokens");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+function ListingCard({
+  images,
+  title,
+  price,
+  originalPrice,
+  brand,
+  size,
+  badge,
+  brandLogoUrl,
+  onClick,
+  onBuyClick,
+  isLiked = false,
+  onLikeClick,
+  sx
+}) {
+  const [activeImage, setActiveImage] = (0, import_react8.useState)(0);
+  const handleBuy = (e) => {
+    e.stopPropagation();
+    onBuyClick?.(e);
+  };
+  const handleLike = (e) => {
+    e.stopPropagation();
+    onLikeClick?.(e);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+    import_Box21.default,
+    {
+      onClick,
+      sx: [
+        {
+          width: "100%",
+          backgroundColor: import_tokens26.tokens.colors.surface,
+          borderRadius: `${import_tokens26.tokens.radius.lg}px`,
+          // Standardized to 16px (Serious)
+          overflow: "hidden",
+          // High-end layered shadow, no clunky borders
+          boxShadow: `
+            0 2px 4px 0 rgba(0, 0, 0, 0.05),
+            0 8px 16px -4px rgba(0, 0, 0, 0.1)
+          `,
+          transition: "all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)",
+          cursor: "pointer",
+          position: "relative",
+          "&:hover": {
+            transform: "translateY(-6px)",
+            boxShadow: import_tokens26.tokens.shadows.deep
+          }
+        },
+        ...Array.isArray(sx) ? sx : [sx]
+      ],
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_Box21.default, { sx: { position: "relative", width: "100%", pt: "100%", backgroundColor: import_tokens26.tokens.colors.background }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            import_Box21.default,
+            {
+              component: "img",
+              src: images[activeImage],
+              alt: title,
+              sx: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                height: "100%",
+                objectFit: "cover",
+                transition: "opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1)"
+              }
+            }
+          ),
+          badge && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            import_Box21.default,
+            {
+              sx: {
+                position: "absolute",
+                top: 12,
+                left: 12,
+                backgroundColor: "rgba(255, 255, 255, 0.95)",
+                backdropFilter: "blur(4px)",
+                px: 1.5,
+                py: 0.5,
+                borderRadius: import_tokens26.tokens.radius.full,
+                fontSize: 10,
+                fontWeight: 800,
+                color: import_tokens26.tokens.colors.textPrimary,
+                fontFamily: import_tokens26.tokens.typography.fontFamily,
+                textTransform: "uppercase",
+                boxShadow: import_tokens26.tokens.shadows.card,
+                zIndex: 2
+              },
+              children: badge
+            }
+          ),
+          brandLogoUrl && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            import_Box21.default,
+            {
+              sx: {
+                position: "absolute",
+                top: 12,
+                right: 12,
+                width: 32,
+                height: 32,
+                backgroundColor: import_tokens26.tokens.colors.white,
+                borderRadius: "50%",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                boxShadow: import_tokens26.tokens.shadows.card,
+                p: 0.5,
+                zIndex: 2,
+                "& img": { width: "100%", height: "100%", objectFit: "contain" }
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("img", { src: brandLogoUrl, alt: "brand" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            import_IconButton4.default,
+            {
+              onClick: handleLike,
+              sx: {
+                position: "absolute",
+                bottom: 12,
+                right: 12,
+                backgroundColor: "rgba(255, 255, 255, 0.9)",
+                backdropFilter: "blur(4px)",
+                boxShadow: import_tokens26.tokens.shadows.card,
+                color: isLiked ? import_tokens26.tokens.colors.error : import_tokens26.tokens.colors.textSecondary,
+                zIndex: 2,
+                "&:hover": { backgroundColor: import_tokens26.tokens.colors.white, transform: "scale(1.1)" }
+              },
+              children: isLiked ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_Favorite.default, { sx: { fontSize: 18 } }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_FavoriteBorder.default, { sx: { fontSize: 18 } })
+            }
+          ),
+          images.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            import_Stack3.default,
+            {
+              direction: "row",
+              spacing: 0.8,
+              sx: {
+                position: "absolute",
+                bottom: 12,
+                left: "50%",
+                transform: "translateX(-50%)",
+                zIndex: 2
+              },
+              children: images.map((img, i) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                import_Box21.default,
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    setActiveImage(i);
+                  },
+                  sx: {
+                    width: activeImage === i ? 12 : 6,
+                    height: 6,
+                    borderRadius: import_tokens26.tokens.radius.full,
+                    backgroundColor: import_tokens26.tokens.colors.white,
+                    opacity: activeImage === i ? 1 : 0.5,
+                    transition: "all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)",
+                    cursor: "pointer",
+                    boxShadow: "0 1px 2px rgba(0,0,0,0.1)"
+                  }
+                },
+                img
+              ))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_Box21.default, { sx: { p: 2.5 }, children: [
+          " ",
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            import_Typography15.default,
+            {
+              sx: {
+                fontSize: import_tokens26.tokens.typography.fontSizes.base,
+                fontWeight: 800,
+                color: import_tokens26.tokens.colors.textPrimary,
+                fontFamily: import_tokens26.tokens.typography.fontFamily,
+                lineHeight: 1.2,
+                mb: 0.5,
+                whiteSpace: "nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis"
+              },
+              children: title
+            }
+          ),
+          (brand || size) && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+            import_Typography15.default,
+            {
+              sx: {
+                fontSize: import_tokens26.tokens.typography.fontSizes.xs,
+                color: import_tokens26.tokens.colors.textSecondary,
+                fontFamily: import_tokens26.tokens.typography.fontFamily,
+                fontWeight: 600,
+                mb: 2
+              },
+              children: [
+                brand,
+                brand && size ? " \u2022 " : "",
+                size
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_Stack3.default, { direction: "row", alignItems: "center", justifyContent: "space-between", spacing: 2, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+              import_Box21.default,
+              {
+                sx: {
+                  backgroundColor: import_tokens26.tokens.colors.background,
+                  px: 1.5,
+                  py: 0.8,
+                  borderRadius: import_tokens26.tokens.radius.full,
+                  fontSize: import_tokens26.tokens.typography.fontSizes.base,
+                  fontWeight: 800,
+                  color: import_tokens26.tokens.colors.textPrimary,
+                  fontFamily: import_tokens26.tokens.typography.fontFamily,
+                  display: "flex",
+                  alignItems: "baseline",
+                  gap: 0.5
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_Typography15.default, { component: "span", sx: { fontSize: 10, fontWeight: 900 }, children: "KES" }),
+                  price.toLocaleString(),
+                  originalPrice && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                    import_Typography15.default,
+                    {
+                      component: "span",
+                      sx: {
+                        ml: 0.5,
+                        fontSize: 10,
+                        color: import_tokens26.tokens.colors.textDisabled,
+                        textDecoration: "line-through",
+                        fontWeight: 600
+                      },
+                      children: originalPrice.toLocaleString()
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+              MitumbaPrimaryButton,
+              {
+                label: "Buy Now",
+                variant: "primary",
+                size: "small",
+                onClick: handleBuy,
+                icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_ArrowOutward.default, { sx: { fontSize: 16 } }),
+                iconPosition: "right",
+                sx: {
+                  borderRadius: import_tokens26.tokens.radius.full,
+                  px: 2.5,
+                  height: 32,
+                  // Forced small height for density
+                  fontSize: 11,
+                  fontWeight: 900
+                }
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/listing/ListingCardSkeleton/ListingCardSkeleton.tsx
+var import_Box23 = __toESM(require("@mui/material/Box"));
+var import_tokens28 = require("@mitumba/tokens");
+
+// src/components/feedback/MitumbaSkeleton/MitumbaSkeleton.tsx
+var import_Box22 = __toESM(require("@mui/material/Box"));
+var import_tokens27 = require("@mitumba/tokens");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var variantStyles = {
+  rectangular: { borderRadius: `${import_tokens27.tokens.radius.xxs}px` },
+  rounded: { borderRadius: `${import_tokens27.tokens.radius.md}px` },
+  circular: { borderRadius: "50%" }
+};
+function MitumbaSkeleton({
+  width,
+  height,
+  borderRadius,
+  variant = "rounded"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    import_Box22.default,
+    {
+      sx: {
+        width,
+        height,
+        position: "relative",
+        overflow: "hidden",
+        borderRadius: borderRadius ? `${borderRadius}px` : variantStyles[variant].borderRadius,
+        backgroundColor: import_tokens27.tokens.colors.background,
+        // Base block
+        "&::before": {
+          content: '""',
+          position: "absolute",
+          inset: 0,
+          backgroundColor: import_tokens27.tokens.colors.divider,
+          opacity: 0.5
+        },
+        // Shimmer wave
+        "&::after": {
+          content: '""',
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          background: `linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent)`,
+          transform: "translateX(-100%)",
+          animation: "shimmer 2s infinite cubic-bezier(0.4, 0, 0.2, 1)"
+        },
+        "@keyframes shimmer": {
+          "100%": { transform: "translateX(100%)" }
+        }
+      },
+      "aria-label": "Loading content..."
+    }
+  );
+}
+
+// src/components/listing/ListingCardSkeleton/ListingCardSkeleton.tsx
+var import_jsx_runtime29 = require("react/jsx-runtime");
+function ListingCardSkeleton() {
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+    import_Box23.default,
+    {
+      sx: {
+        width: "100%",
+        backgroundColor: import_tokens28.tokens.colors.surface,
+        borderRadius: `${import_tokens28.tokens.radius.lg}px`,
+        // 16px (Serious Standard)
+        overflow: "hidden",
+        boxShadow: `
+          0 2px 4px 0 rgba(0, 0, 0, 0.05),
+          0 8px 16px -4px rgba(0, 0, 0, 0.1)
+        `
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_Box23.default, { sx: { position: "relative", width: "100%", pt: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          MitumbaSkeleton,
+          {
+            variant: "rectangular",
+            sx: { position: "absolute", inset: 0, height: "100%", width: "100%" }
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_Box23.default, { sx: { p: 2.5 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            MitumbaSkeleton,
+            {
+              variant: "rectangular",
+              width: "80%",
+              height: 20,
+              sx: { mb: 1, borderRadius: 1 }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            MitumbaSkeleton,
+            {
+              variant: "rectangular",
+              width: "40%",
+              height: 12,
+              sx: { mb: 3, borderRadius: 1 }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_Box23.default, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+              MitumbaSkeleton,
+              {
+                variant: "rounded",
+                width: 100,
+                height: 32,
+                sx: { borderRadius: 100 }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+              MitumbaSkeleton,
+              {
+                variant: "rounded",
+                width: 80,
+                height: 32,
+                sx: { borderRadius: 100 }
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/listing/ListingGrid/ListingGrid.tsx
+var import_Box24 = __toESM(require("@mui/material/Box"));
+var import_jsx_runtime30 = require("react/jsx-runtime");
+function ListingGrid({
+  children,
+  columns = { xs: 2, sm: 2, md: 3, lg: 4 },
+  gap,
+  isLoading = false,
+  sx
+}) {
+  if (isLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(MitumbaGrid, { columns, gap, sx, children: [...Array(8)].map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_Box24.default, { sx: { width: "100%", pt: "100%", position: "relative" }, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      MitumbaSkeleton,
+      {
+        variant: "rounded",
+        sx: { position: "absolute", inset: 0, height: "100%", width: "100%", borderRadius: 4 }
+      }
+    ) }, `listing-skeleton-${i + 1}`)) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_Box24.default, { sx: { width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    MitumbaGrid,
+    {
+      columns,
+      gap,
+      sx,
+      children
+    }
+  ) });
+}
+
+// src/components/listing/ListingImageGallery/ListingImageGallery.tsx
+var import_react9 = require("react");
+var import_Box25 = __toESM(require("@mui/material/Box"));
+var import_tokens29 = require("@mitumba/tokens");
+var import_jsx_runtime31 = require("react/jsx-runtime");
+function ListingImageGallery({ images, title }) {
+  const [activeIndex, setActiveIndex] = (0, import_react9.useState)(0);
+  const goTo = (0, import_react9.useCallback)(
+    (index) => {
+      const clamped = Math.max(0, Math.min(images.length - 1, index));
+      setActiveIndex(clamped);
+    },
+    [images.length]
+  );
+  const handleKeyDown = (0, import_react9.useCallback)(
+    (e) => {
+      if (e.key === "ArrowLeft") {
+        goTo(activeIndex - 1);
+      } else if (e.key === "ArrowRight") {
+        goTo(activeIndex + 1);
+      }
+    },
+    [activeIndex, goTo]
+  );
+  (0, import_react9.useEffect)(() => {
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [handleKeyDown]);
+  if (images.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      import_Box25.default,
+      {
+        sx: {
+          alignItems: "center",
+          aspectRatio: "1 / 1",
+          backgroundColor: import_tokens29.tokens.colors.background,
+          borderRadius: `${import_tokens29.tokens.radius.lg}px`,
+          color: import_tokens29.tokens.colors.textSecondary,
+          display: "flex",
+          fontSize: import_tokens29.tokens.typography.fontSizes.base,
+          justifyContent: "center",
+          width: "100%",
+          border: `1px dashed ${import_tokens29.tokens.colors.divider}`
+        },
+        children: "No images available"
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+    import_Box25.default,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        gap: import_tokens29.tokens.spacing.base,
+        width: "100%"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+          import_Box25.default,
+          {
+            sx: {
+              aspectRatio: "1 / 1",
+              borderRadius: `${import_tokens29.tokens.radius.lg}px`,
+              overflow: "hidden",
+              position: "relative",
+              width: "100%",
+              backgroundColor: import_tokens29.tokens.colors.background,
+              boxShadow: `
+            0 2px 4px 0 rgba(0, 0, 0, 0.05),
+            0 8px 16px -4px rgba(0, 0, 0, 0.1)
+          `
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+              import_Box25.default,
+              {
+                component: "img",
+                src: images[activeIndex],
+                alt: `${title} \u2014 image ${activeIndex + 1} of ${images.length}`,
+                sx: {
+                  display: "block",
+                  height: "100%",
+                  objectFit: "cover",
+                  width: "100%",
+                  transition: "opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1)"
+                }
+              }
+            )
+          }
+        ),
+        images.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+          import_Box25.default,
+          {
+            sx: {
+              display: "flex",
+              gap: 1.5,
+              overflowX: "auto",
+              paddingBlock: 0.5,
+              "&::-webkit-scrollbar": { display: "none" },
+              msOverflowStyle: "none",
+              scrollbarWidth: "none"
+            },
+            children: images.map((img, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+              import_Box25.default,
+              {
+                onClick: () => goTo(index),
+                onKeyDown: (e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    goTo(index);
+                  }
+                },
+                role: "button",
+                tabIndex: 0,
+                sx: {
+                  border: index === activeIndex ? `2px solid ${import_tokens29.tokens.colors.green}` : `2px solid transparent`,
+                  borderRadius: `${import_tokens29.tokens.radius.md}px`,
+                  cursor: "pointer",
+                  flexShrink: 0,
+                  height: 56,
+                  overflow: "hidden",
+                  opacity: index === activeIndex ? 1 : 0.6,
+                  transform: index === activeIndex ? "scale(1.05)" : "scale(1)",
+                  transition: "all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)",
+                  width: 56,
+                  "&:hover": {
+                    opacity: 1,
+                    transform: "translateY(-2px)"
+                  },
+                  "&:focus-visible": {
+                    outline: "none",
+                    boxShadow: import_tokens29.tokens.shadows.focus
+                  }
+                },
+                "aria-label": `View image ${index + 1} of ${images.length}`,
+                "aria-pressed": index === activeIndex,
+                children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                  import_Box25.default,
+                  {
+                    component: "img",
+                    src: img,
+                    alt: `${title} thumbnail ${index + 1}`,
+                    sx: {
+                      display: "block",
+                      height: "100%",
+                      objectFit: "cover",
+                      width: "100%"
+                    }
+                  }
+                )
+              },
+              img
+            ))
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/listing/ConditionBadge/ConditionBadge.tsx
+var import_jsx_runtime32 = require("react/jsx-runtime");
+function ConditionBadge({ grade, showLabel = false }) {
+  const gradeConfig = {
+    A: { status: "success", label: "Like new" },
+    B: { status: "active", label: "Good" },
+    C: { status: "incomplete", label: "Fair" }
+  };
+  const config = gradeConfig[grade];
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    MitumbaChip,
+    {
+      label: showLabel ? `${grade} \u2022 ${config.label}` : grade,
+      status: config.status,
+      variant: "solid",
+      size: "small",
+      rounding: "pill"
+    }
+  );
+}
+
+// src/components/commerce/PriceTag/PriceTag.tsx
+var import_Typography16 = __toESM(require("@mui/material/Typography"));
+var import_tokens30 = require("@mitumba/tokens");
+var import_jsx_runtime33 = require("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: import_tokens30.tokens.typography.fontSizes.sm,
+      fontWeight: import_tokens30.tokens.typography.fontWeights.semibold
+    },
+    medium: {
+      fontSize: import_tokens30.tokens.typography.fontSizes.base,
+      fontWeight: import_tokens30.tokens.typography.fontWeights.bold
+    },
+    large: {
+      fontSize: import_tokens30.tokens.typography.fontSizes.xl,
+      fontWeight: import_tokens30.tokens.typography.fontWeights.extrabold
+    }
+  };
+  const colorMap = {
+    green: import_tokens30.tokens.colors.green,
+    earth: import_tokens30.tokens.colors.earth,
+    default: import_tokens30.tokens.colors.textPrimary
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    import_Typography16.default,
+    {
+      component: "span",
+      sx: {
+        ...sizeStyles[size],
+        color: colorMap[color],
+        textDecoration: strikethrough ? "line-through" : "none",
+        opacity: strikethrough ? 0.7 : 1,
+        textDecorationColor: strikethrough ? colorMap[color] : void 0
+      },
+      "aria-label": `Price: ${formatted}`,
+      children: formatted
+    }
+  );
+}
+
+// src/components/commerce/DeliveryBadge/DeliveryBadge.tsx
+var import_LocalShipping = __toESM(require("@mui/icons-material/LocalShipping"));
+var import_jsx_runtime34 = require("react/jsx-runtime");
+function DeliveryBadge({ type, estimatedDays }) {
+  const statusMap = {
+    "same-city": "active",
+    "intercity": "common"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    MitumbaChip,
+    {
+      label: estimatedDays || type,
+      status: statusMap[type],
+      variant: "soft",
+      size: "small",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_LocalShipping.default, {})
+    }
+  );
+}
+
+// src/components/commerce/CartItem/CartItem.tsx
+var import_Box26 = __toESM(require("@mui/material/Box"));
+var import_Typography17 = __toESM(require("@mui/material/Typography"));
+var import_IconButton5 = __toESM(require("@mui/material/IconButton"));
+var import_Close2 = __toESM(require("@mui/icons-material/Close"));
+var import_Stack4 = __toESM(require("@mui/material/Stack"));
+var import_tokens31 = require("@mitumba/tokens");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+function CartItem({
+  imageUrl,
+  title,
+  subtitle,
+  status = "IN STOCK",
+  priceKes,
+  size = "M",
+  quantity = 1,
+  onRemove,
+  onQuantityChange,
+  onSizeChange,
+  sx
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+    import_Box26.default,
+    {
+      sx: [
+        {
+          display: "flex",
+          width: "100%",
+          backgroundColor: import_tokens31.tokens.colors.surface,
+          borderRadius: `${import_tokens31.tokens.radius.lg}px`,
+          // 16px (Serious Standard)
+          p: { xs: 2, md: 3 },
+          boxShadow: `
+            0 2px 4px 0 rgba(0, 0, 0, 0.05),
+            0 8px 16px -4px rgba(0, 0, 0, 0.1)
+          `,
+          transition: "all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)",
+          position: "relative",
+          border: `1px solid ${import_tokens31.tokens.colors.divider}`,
+          "&:hover": {
+            transform: "translateY(-4px)",
+            boxShadow: import_tokens31.tokens.shadows.deep
+          }
+        },
+        ...Array.isArray(sx) ? sx : [sx]
+      ],
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          import_Box26.default,
+          {
+            sx: {
+              width: { xs: 80, sm: 120, md: 140 },
+              height: { xs: 80, sm: 120, md: 140 },
+              borderRadius: `${import_tokens31.tokens.radius.md}px`,
+              overflow: "hidden",
+              backgroundColor: import_tokens31.tokens.colors.background,
+              flexShrink: 0
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+              import_Box26.default,
+              {
+                component: "img",
+                src: imageUrl,
+                alt: title,
+                sx: { width: "100%", height: "100%", objectFit: "cover" }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+          import_Box26.default,
+          {
+            sx: {
+              flexGrow: 1,
+              ml: { xs: 2, sm: 3, md: 4 },
+              display: "flex",
+              flexDirection: { xs: "column", lg: "row" },
+              justifyContent: "space-between",
+              alignItems: { xs: "flex-start", lg: "center" },
+              gap: { xs: 2, lg: 4 }
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_Box26.default, { sx: { flex: 1.5 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                  import_Typography17.default,
+                  {
+                    sx: {
+                      fontSize: import_tokens31.tokens.typography.fontSizes.lg,
+                      fontWeight: 900,
+                      color: import_tokens31.tokens.colors.textPrimary,
+                      fontFamily: import_tokens31.tokens.typography.fontFamily,
+                      textTransform: "uppercase",
+                      lineHeight: 1.1,
+                      mb: 0.5
+                    },
+                    children: title
+                  }
+                ),
+                subtitle && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                  import_Typography17.default,
+                  {
+                    variant: "caption",
+                    sx: {
+                      display: "block",
+                      color: import_tokens31.tokens.colors.textSecondary,
+                      fontWeight: 700,
+                      textTransform: "uppercase",
+                      fontSize: 10
+                    },
+                    children: subtitle
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                  import_Typography17.default,
+                  {
+                    variant: "caption",
+                    sx: {
+                      display: "block",
+                      color: import_tokens31.tokens.colors.green,
+                      fontWeight: 800,
+                      fontSize: 9,
+                      mt: 1,
+                      textTransform: "uppercase",
+                      letterSpacing: "0.05em"
+                    },
+                    children: status
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_Stack4.default, { direction: "row", spacing: { xs: 2, sm: 4, md: 6 }, alignItems: "center", sx: { width: { xs: "100%", lg: "auto" } }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_Box26.default, { sx: { width: 80 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_Typography17.default, { variant: "caption", sx: { display: "block", mb: 1.5, fontWeight: 700, color: import_tokens31.tokens.colors.textDisabled, fontSize: 10 }, children: "SIZE" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                    MitumbaSelect,
+                    {
+                      value: size,
+                      size: "small",
+                      onChange: (val) => onSizeChange?.(val),
+                      options: [{ label: size, value: size }],
+                      rounding: "rounded",
+                      sx: { minWidth: 60 }
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_Box26.default, { sx: { width: 80 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_Typography17.default, { variant: "caption", sx: { display: "block", mb: 1.5, fontWeight: 700, color: import_tokens31.tokens.colors.textDisabled, fontSize: 10 }, children: "QUANTITY" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                    MitumbaSelect,
+                    {
+                      value: quantity,
+                      size: "small",
+                      onChange: (val) => onQuantityChange?.(Number(val)),
+                      options: [{ label: `${quantity}`, value: quantity }],
+                      rounding: "rounded",
+                      sx: { minWidth: 60 }
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_Box26.default, { sx: { textAlign: "right", minWidth: 100 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_Typography17.default, { variant: "caption", sx: { display: "block", mb: 1.5, fontWeight: 700, color: import_tokens31.tokens.colors.textDisabled, fontSize: 10 }, children: "PRICE" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_Typography17.default, { sx: { fontWeight: 900, color: import_tokens31.tokens.colors.textPrimary, fontSize: import_tokens31.tokens.typography.fontSizes.base, fontFamily: import_tokens31.tokens.typography.fontFamily }, children: [
+                    "KES ",
+                    priceKes.toLocaleString()
+                  ] })
+                ] })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          import_IconButton5.default,
+          {
+            onClick: onRemove,
+            sx: {
+              position: "absolute",
+              top: 8,
+              right: 8,
+              color: import_tokens31.tokens.colors.textDisabled,
+              "&:hover": {
+                color: import_tokens31.tokens.colors.error,
+                backgroundColor: import_tokens31.tokens.colors.errorLight,
+                transform: "rotate(90deg)"
+              },
+              transition: "all 0.3s ease"
+            },
+            size: "small",
+            children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_Close2.default, { sx: { fontSize: 16 } })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/commerce/OrderStatusTimeline/OrderStatusTimeline.tsx
+var import_Box27 = __toESM(require("@mui/material/Box"));
+var import_Typography18 = __toESM(require("@mui/material/Typography"));
+var import_CheckCircleOutlined = __toESM(require("@mui/icons-material/CheckCircleOutlined"));
+var import_RadioButtonUncheckedOutlined = __toESM(require("@mui/icons-material/RadioButtonUncheckedOutlined"));
+var import_tokens32 = require("@mitumba/tokens");
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var ORDER_STATUS_ORDER = [
+  "CREATED",
+  "PAYMENT_PENDING",
+  "PAID",
+  "SELLER_CONFIRMED",
+  "SHIPPED",
+  "DELIVERED",
+  "COMPLETED"
+];
+var ORDER_STATUS_LABELS = {
+  CREATED: "Order Created",
+  PAYMENT_PENDING: "Payment Pending",
+  PAID: "Paid",
+  SELLER_CONFIRMED: "Seller Confirmed",
+  SHIPPED: "Shipped",
+  DELIVERED: "Delivered",
+  COMPLETED: "Completed",
+  CANCELLED: "Cancelled",
+  DISPUTED: "Disputed"
+};
+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__ */ (0, import_jsx_runtime36.jsxs)(
+    import_Box27.default,
+    {
+      sx: {
+        p: import_tokens32.tokens.spacing.base,
+        borderRadius: import_tokens32.tokens.radius.lg,
+        bgcolor: import_tokens32.tokens.colors.surface,
+        boxShadow: import_tokens32.tokens.shadows.card,
+        border: `1px solid ${import_tokens32.tokens.colors.divider}`
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_Box27.default, { sx: { display: "flex", alignItems: "center", gap: import_tokens32.tokens.spacing.sm, mb: import_tokens32.tokens.spacing.base }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+            import_Typography18.default,
+            {
+              sx: {
+                fontWeight: import_tokens32.tokens.typography.fontWeights.bold,
+                fontSize: import_tokens32.tokens.typography.fontSizes.md,
+                color: import_tokens32.tokens.colors.textPrimary,
+                fontFamily: import_tokens32.tokens.typography.fontFamily
+              },
+              children: "Order Tracking"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+            import_Box27.default,
+            {
+              sx: {
+                px: import_tokens32.tokens.spacing.sm,
+                py: "2px",
+                borderRadius: import_tokens32.tokens.radius.sm,
+                bgcolor: import_tokens32.tokens.colors.greenLight,
+                color: import_tokens32.tokens.colors.greenDark,
+                fontSize: 10,
+                fontWeight: import_tokens32.tokens.typography.fontWeights.extrabold,
+                textTransform: "uppercase",
+                letterSpacing: import_tokens32.tokens.typography.letterSpacings.wide
+              },
+              children: ORDER_STATUS_LABELS[currentStatus]
+            }
+          )
+        ] }),
+        currentNote && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          import_Box27.default,
+          {
+            sx: {
+              p: import_tokens32.tokens.spacing.sm,
+              borderRadius: import_tokens32.tokens.radius.sm,
+              bgcolor: import_tokens32.tokens.colors.background,
+              borderLeft: `3px solid ${import_tokens32.tokens.colors.info}`,
+              mb: import_tokens32.tokens.spacing.lg
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+              import_Typography18.default,
+              {
+                sx: {
+                  color: import_tokens32.tokens.colors.textPrimary,
+                  fontSize: import_tokens32.tokens.typography.fontSizes.sm,
+                  fontFamily: import_tokens32.tokens.typography.fontFamily,
+                  fontStyle: "italic"
+                },
+                children: [
+                  '"',
+                  currentNote,
+                  '"'
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_Box27.default, { component: "ol", sx: { listStyle: "none", p: 0, m: 0 }, children: ORDER_STATUS_ORDER.map((status, index) => {
+          const isCompleted = index <= currentIndex;
+          const isCurrent = status === currentStatus;
+          const statusEvents = events.filter((e) => e.status === status);
+          const latestEvent = statusEvents.length > 0 ? statusEvents[statusEvents.length - 1] : null;
+          return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+            import_Box27.default,
+            {
+              component: "li",
+              sx: {
+                display: "flex",
+                alignItems: "flex-start",
+                gap: import_tokens32.tokens.spacing.base,
+                position: "relative"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+                  import_Box27.default,
+                  {
+                    sx: {
+                      display: "flex",
+                      flexDirection: "column",
+                      alignItems: "center",
+                      minWidth: "24px"
+                    },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                        import_Box27.default,
+                        {
+                          sx: {
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            width: "24px",
+                            height: "24px",
+                            zIndex: 1,
+                            backgroundColor: import_tokens32.tokens.colors.surface
+                          },
+                          children: isCompleted ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                            import_CheckCircleOutlined.default,
+                            {
+                              sx: {
+                                fontSize: 20,
+                                color: isCurrent ? import_tokens32.tokens.colors.green : import_tokens32.tokens.colors.textDisabled
+                              }
+                            }
+                          ) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                            import_RadioButtonUncheckedOutlined.default,
+                            {
+                              sx: {
+                                fontSize: 18,
+                                color: import_tokens32.tokens.colors.divider
+                              }
+                            }
+                          )
+                        }
+                      ),
+                      index < ORDER_STATUS_ORDER.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                        import_Box27.default,
+                        {
+                          sx: {
+                            width: "2px",
+                            flex: 1,
+                            minHeight: import_tokens32.tokens.spacing.lg,
+                            bgcolor: index < currentIndex ? import_tokens32.tokens.colors.green : import_tokens32.tokens.colors.divider,
+                            marginBlock: "2px"
+                          }
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_Box27.default, { sx: { pt: "2px", pb: import_tokens32.tokens.spacing.lg }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                    import_Typography18.default,
+                    {
+                      sx: {
+                        fontWeight: isCurrent ? import_tokens32.tokens.typography.fontWeights.bold : import_tokens32.tokens.typography.fontWeights.medium,
+                        fontSize: import_tokens32.tokens.typography.fontSizes.sm,
+                        fontFamily: import_tokens32.tokens.typography.fontFamily,
+                        color: isCompleted ? import_tokens32.tokens.colors.textPrimary : import_tokens32.tokens.colors.textDisabled,
+                        lineHeight: 1
+                      },
+                      children: ORDER_STATUS_LABELS[status]
+                    }
+                  ),
+                  latestEvent && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                    import_Typography18.default,
+                    {
+                      sx: {
+                        color: import_tokens32.tokens.colors.textSecondary,
+                        fontSize: 10,
+                        fontFamily: import_tokens32.tokens.typography.fontFamily,
+                        mt: "4px"
+                      },
+                      children: latestEvent.timestamp
+                    }
+                  )
+                ] })
+              ]
+            },
+            status
+          );
+        }) })
+      ]
+    }
+  );
+}
+
+// src/components/commerce/EscrowStatusBanner/EscrowStatusBanner.tsx
+var import_Box28 = __toESM(require("@mui/material/Box"));
+var import_Typography19 = __toESM(require("@mui/material/Typography"));
+var import_ShieldOutlined = __toESM(require("@mui/icons-material/ShieldOutlined"));
+var import_LocalShippingOutlined = __toESM(require("@mui/icons-material/LocalShippingOutlined"));
+var import_AccessTimeOutlined = __toESM(require("@mui/icons-material/AccessTimeOutlined"));
+var import_CheckCircleOutlined2 = __toESM(require("@mui/icons-material/CheckCircleOutlined"));
+var import_WarningAmberOutlined = __toESM(require("@mui/icons-material/WarningAmberOutlined"));
+var import_tokens33 = require("@mitumba/tokens");
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var STATUS_CONFIG = {
+  FUNDED: {
+    label: "Payment in Escrow",
+    message: "Your payment is held securely. The seller will ship your item soon.",
+    icon: import_ShieldOutlined.default,
+    color: import_tokens33.tokens.colors.info,
+    bg: `${import_tokens33.tokens.colors.info}14`
+  },
+  SHIPPED: {
+    label: "Item Shipped",
+    message: "Your item is on the way. Confirm delivery once received.",
+    icon: import_LocalShippingOutlined.default,
+    color: import_tokens33.tokens.colors.green,
+    bg: `${import_tokens33.tokens.colors.green}14`
+  },
+  TIMEOUT_WARNING: {
+    label: "Action Required",
+    message: "Confirm delivery or raise a dispute before time runs out.",
+    icon: import_AccessTimeOutlined.default,
+    color: import_tokens33.tokens.colors.warning,
+    bg: `${import_tokens33.tokens.colors.warning}14`
+  },
+  RELEASED: {
+    label: "Payment Released",
+    message: "Funds have been released to the seller. Transaction complete.",
+    icon: import_CheckCircleOutlined2.default,
+    color: import_tokens33.tokens.colors.success,
+    bg: `${import_tokens33.tokens.colors.success}14`
+  },
+  REFUNDED: {
+    label: "Refunded",
+    message: "Your payment has been refunded to your original payment method.",
+    icon: import_WarningAmberOutlined.default,
+    color: import_tokens33.tokens.colors.error,
+    bg: `${import_tokens33.tokens.colors.error}14`
+  }
+};
+function EscrowStatusBanner({
+  status,
+  hoursRemaining,
+  onConfirmDelivery,
+  onRaiseDispute
+}) {
+  const config = STATUS_CONFIG[status];
+  const Icon = config.icon;
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+    import_Box28.default,
+    {
+      sx: {
+        p: import_tokens33.tokens.spacing.base,
+        borderRadius: import_tokens33.tokens.radius.lg,
+        bgcolor: config.bg,
+        border: `1px solid ${config.color}40`,
+        boxShadow: import_tokens33.tokens.shadows.card
+      },
+      role: "status",
+      "aria-label": `Escrow status: ${config.label}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_Box28.default, { sx: { display: "flex", alignItems: "center", gap: import_tokens33.tokens.spacing.base }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            import_Box28.default,
+            {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: 44,
+                height: 44,
+                borderRadius: import_tokens33.tokens.radius.md,
+                bgcolor: config.color,
+                color: import_tokens33.tokens.colors.white,
+                flexShrink: 0,
+                boxShadow: import_tokens33.tokens.shadows.card
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Icon, { sx: { fontSize: 24 } })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_Box28.default, { sx: { flex: 1 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              import_Typography19.default,
+              {
+                sx: {
+                  fontWeight: import_tokens33.tokens.typography.fontWeights.bold,
+                  fontSize: import_tokens33.tokens.typography.fontSizes.base,
+                  color: config.color,
+                  lineHeight: 1.2,
+                  fontFamily: import_tokens33.tokens.typography.fontFamily
+                },
+                children: config.label
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              import_Typography19.default,
+              {
+                sx: {
+                  fontSize: import_tokens33.tokens.typography.fontSizes.sm,
+                  color: import_tokens33.tokens.colors.textPrimary,
+                  mt: "2px",
+                  fontFamily: import_tokens33.tokens.typography.fontFamily,
+                  opacity: 0.8
+                },
+                children: config.message
+              }
+            )
+          ] })
+        ] }),
+        status === "TIMEOUT_WARNING" && hoursRemaining !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+          import_Box28.default,
+          {
+            sx: {
+              mt: import_tokens33.tokens.spacing.base,
+              p: import_tokens33.tokens.spacing.sm,
+              borderRadius: import_tokens33.tokens.radius.sm,
+              bgcolor: import_tokens33.tokens.colors.white,
+              display: "flex",
+              alignItems: "center",
+              gap: import_tokens33.tokens.spacing.sm,
+              border: `1px solid ${import_tokens33.tokens.colors.warning}40`
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_AccessTimeOutlined.default, { sx: { color: import_tokens33.tokens.colors.warning, fontSize: 18 } }),
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+                import_Typography19.default,
+                {
+                  sx: {
+                    fontSize: import_tokens33.tokens.typography.fontSizes.sm,
+                    fontWeight: import_tokens33.tokens.typography.fontWeights.bold,
+                    color: import_tokens33.tokens.colors.warning
+                  },
+                  children: [
+                    hoursRemaining,
+                    " hour",
+                    hoursRemaining === 1 ? "" : "s",
+                    " remaining"
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        (onConfirmDelivery || onRaiseDispute) && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_Box28.default, { sx: { display: "flex", gap: import_tokens33.tokens.spacing.sm, mt: import_tokens33.tokens.spacing.base }, children: [
+          onConfirmDelivery && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            MitumbaPrimaryButton,
+            {
+              label: "Confirm Delivery",
+              onClick: onConfirmDelivery,
+              size: "medium",
+              variant: "primary"
+            }
+          ),
+          onRaiseDispute && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            MitumbaPrimaryButton,
+            {
+              label: "Raise Dispute",
+              onClick: onRaiseDispute,
+              size: "medium",
+              variant: "ghost",
+              sx: {
+                color: import_tokens33.tokens.colors.error,
+                borderColor: import_tokens33.tokens.colors.error,
+                "&:hover": {
+                  bgcolor: import_tokens33.tokens.colors.errorLight,
+                  borderColor: import_tokens33.tokens.colors.errorDark
+                }
+              }
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/vazi/VAZIOutfitCard/VAZIOutfitCard.tsx
+var import_Box29 = __toESM(require("@mui/material/Box"));
+var import_Card = __toESM(require("@mui/material/Card"));
+var import_CardContent = __toESM(require("@mui/material/CardContent"));
+var import_Typography20 = __toESM(require("@mui/material/Typography"));
+var import_tokens34 = require("@mitumba/tokens");
+var import_react10 = require("react");
+var import_jsx_runtime38 = require("react/jsx-runtime");
+function VAZIOutfitCard({
+  outfitName,
+  items,
+  totalPriceKes,
+  sellersCount,
+  isMultiCity = false,
+  onTap,
+  onBuyAll
+}) {
+  const handleKeyDown = (0, import_react10.useCallback)(
+    (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        onTap?.();
+      }
+    },
+    [onTap]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+    import_Card.default,
+    {
+      onClick: onTap,
+      onKeyDown: handleKeyDown,
+      role: "button",
+      tabIndex: onTap ? 0 : -1,
+      sx: {
+        borderRadius: import_tokens34.tokens.radius.lg,
+        boxShadow: import_tokens34.tokens.shadows.card,
+        cursor: onTap ? "pointer" : "default",
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden",
+        transition: "all 250ms cubic-bezier(0.4, 0, 0.2, 1)",
+        width: "100%",
+        backgroundColor: import_tokens34.tokens.colors.surface,
+        border: `1px solid ${import_tokens34.tokens.colors.divider}`,
+        "&:hover": onTap ? {
+          transform: "translateY(-4px)",
+          boxShadow: import_tokens34.tokens.shadows.elevated,
+          borderColor: import_tokens34.tokens.colors.earthLight
+        } : void 0,
+        "&:focus-visible": {
+          outline: `2px solid ${import_tokens34.tokens.colors.earthLight}`,
+          boxShadow: import_tokens34.tokens.shadows.focus
+        }
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+          import_Box29.default,
+          {
+            sx: {
+              alignItems: "center",
+              display: "flex",
+              gap: import_tokens34.tokens.spacing.sm,
+              paddingInline: import_tokens34.tokens.spacing.base,
+              paddingBlock: import_tokens34.tokens.spacing.base,
+              borderBottom: `1px solid ${import_tokens34.tokens.colors.background}`
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(VAZIBadge, { size: "small" }),
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                import_Typography20.default,
+                {
+                  sx: {
+                    color: import_tokens34.tokens.colors.textPrimary,
+                    flex: 1,
+                    fontSize: import_tokens34.tokens.typography.fontSizes.base,
+                    fontWeight: import_tokens34.tokens.typography.fontWeights.bold,
+                    lineHeight: import_tokens34.tokens.typography.lineHeights.snug,
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap"
+                  },
+                  children: outfitName
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          import_Box29.default,
+          {
+            sx: {
+              display: "flex",
+              gap: import_tokens34.tokens.spacing.sm,
+              overflowX: "auto",
+              padding: import_tokens34.tokens.spacing.base,
+              backgroundColor: import_tokens34.tokens.colors.background,
+              scrollbarWidth: "none",
+              msOverflowStyle: "none",
+              "&::-webkit-scrollbar": {
+                display: "none"
+              }
+            },
+            children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+              import_Box29.default,
+              {
+                sx: {
+                  flexShrink: 0,
+                  width: "88px"
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                    import_Box29.default,
+                    {
+                      sx: {
+                        aspectRatio: "3 / 4",
+                        borderRadius: import_tokens34.tokens.radius.sm,
+                        overflow: "hidden",
+                        width: "100%",
+                        backgroundColor: import_tokens34.tokens.colors.surface,
+                        border: `1px solid ${import_tokens34.tokens.colors.divider}`
+                      },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                        import_Box29.default,
+                        {
+                          component: "img",
+                          src: item.imageUrl,
+                          alt: `${item.garmentType} \u2014 ${item.sellerName}`,
+                          loading: "lazy",
+                          sx: {
+                            display: "block",
+                            height: "100%",
+                            objectFit: "cover",
+                            width: "100%"
+                          }
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                    import_Typography20.default,
+                    {
+                      sx: {
+                        color: import_tokens34.tokens.colors.textSecondary,
+                        fontSize: 10,
+                        fontWeight: import_tokens34.tokens.typography.fontWeights.semibold,
+                        textTransform: "uppercase",
+                        letterSpacing: import_tokens34.tokens.typography.letterSpacings.wide,
+                        marginTop: import_tokens34.tokens.spacing.xs,
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap",
+                        textAlign: "center"
+                      },
+                      children: item.sellerName
+                    }
+                  )
+                ]
+              },
+              item.listingId
+            ))
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+          import_CardContent.default,
+          {
+            sx: {
+              display: "flex",
+              flexDirection: "column",
+              gap: import_tokens34.tokens.spacing.sm,
+              padding: import_tokens34.tokens.spacing.base,
+              "&:last-child": {
+                paddingBottom: import_tokens34.tokens.spacing.base
+              }
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+                import_Box29.default,
+                {
+                  sx: {
+                    alignItems: "center",
+                    display: "flex",
+                    gap: import_tokens34.tokens.spacing.sm,
+                    justifyContent: "space-between"
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PriceTag, { priceKes: totalPriceKes, size: "large", color: "earth" }),
+                    onBuyAll && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_Box29.default, { sx: { flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                      MitumbaPrimaryButton,
+                      {
+                        label: "Buy all",
+                        variant: "earth",
+                        size: "small",
+                        fullWidth: false,
+                        onClick: (e) => {
+                          if (e && e.stopPropagation) {
+                            e.stopPropagation();
+                          }
+                          onBuyAll();
+                        }
+                      }
+                    ) })
+                  ]
+                }
+              ),
+              sellersCount > 1 && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+                import_Box29.default,
+                {
+                  sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: import_tokens34.tokens.spacing.xs,
+                    mt: import_tokens34.tokens.spacing.xs
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+                      import_Typography20.default,
+                      {
+                        sx: {
+                          color: import_tokens34.tokens.colors.textSecondary,
+                          fontSize: import_tokens34.tokens.typography.fontSizes.sm,
+                          lineHeight: 1
+                        },
+                        children: [
+                          "Ships from ",
+                          sellersCount,
+                          " sellers"
+                        ]
+                      }
+                    ),
+                    isMultiCity && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                      import_Box29.default,
+                      {
+                        component: "span",
+                        sx: {
+                          fontSize: import_tokens34.tokens.typography.fontSizes.xs,
+                          color: import_tokens34.tokens.colors.textDisabled
+                        },
+                        children: "\u2022"
+                      }
+                    ),
+                    isMultiCity && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                      import_Typography20.default,
+                      {
+                        sx: {
+                          color: import_tokens34.tokens.colors.earth,
+                          fontSize: import_tokens34.tokens.typography.fontSizes.xs,
+                          fontWeight: import_tokens34.tokens.typography.fontWeights.bold,
+                          textTransform: "uppercase",
+                          letterSpacing: import_tokens34.tokens.typography.letterSpacings.wide,
+                          lineHeight: 1
+                        },
+                        children: "Multi-city"
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/vazi/VAZIOutfitCardSkeleton/VAZIOutfitCardSkeleton.tsx
+var import_Box30 = __toESM(require("@mui/material/Box"));
+var import_Skeleton = __toESM(require("@mui/material/Skeleton"));
+var import_tokens35 = require("@mitumba/tokens");
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var SKELETON_IMAGE_KEYS = ["image-1", "image-2", "image-3", "image-4"];
+function VAZIOutfitCardSkeleton() {
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+    import_Box30.default,
+    {
+      sx: {
+        borderRadius: import_tokens35.tokens.radius.lg,
+        boxShadow: import_tokens35.tokens.shadows.card,
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden",
+        width: "100%"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+          import_Box30.default,
+          {
+            sx: {
+              alignItems: "center",
+              display: "flex",
+              gap: import_tokens35.tokens.spacing.sm,
+              paddingInline: import_tokens35.tokens.spacing.base,
+              paddingBlock: import_tokens35.tokens.spacing.base
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                import_Skeleton.default,
+                {
+                  "aria-label": "Loading VAZI label",
+                  variant: "rounded",
+                  sx: {
+                    borderRadius: import_tokens35.tokens.radius.sm,
+                    height: import_tokens35.tokens.spacing.lg,
+                    width: 48
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                import_Skeleton.default,
+                {
+                  "aria-label": "Loading outfit name",
+                  variant: "text",
+                  sx: {
+                    flex: 1,
+                    fontSize: import_tokens35.tokens.typography.fontSizes.base
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          import_Box30.default,
+          {
+            sx: {
+              display: "flex",
+              gap: import_tokens35.tokens.spacing.sm,
+              overflowX: "auto",
+              paddingInline: import_tokens35.tokens.spacing.base,
+              paddingBottom: import_tokens35.tokens.spacing.base,
+              scrollbarWidth: "none",
+              msOverflowStyle: "none",
+              "&::-webkit-scrollbar": {
+                display: "none"
+              }
+            },
+            children: SKELETON_IMAGE_KEYS.map((imgKey) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+              import_Box30.default,
+              {
+                sx: {
+                  flexShrink: 0,
+                  width: `${3 / 4 * 100}px`,
+                  minWidth: "88px"
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                    import_Skeleton.default,
+                    {
+                      "aria-label": `Loading item image ${imgKey.split("-")[1]}`,
+                      variant: "rounded",
+                      sx: {
+                        aspectRatio: "3 / 4",
+                        borderRadius: import_tokens35.tokens.radius.md,
+                        width: "100%"
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                    import_Skeleton.default,
+                    {
+                      "aria-label": `Loading seller name ${imgKey.split("-")[1]}`,
+                      variant: "text",
+                      sx: {
+                        fontSize: import_tokens35.tokens.typography.fontSizes.xs,
+                        marginTop: import_tokens35.tokens.spacing.xs,
+                        width: "80%"
+                      }
+                    }
+                  )
+                ]
+              },
+              imgKey
+            ))
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+          import_Box30.default,
+          {
+            sx: {
+              display: "flex",
+              flexDirection: "column",
+              gap: import_tokens35.tokens.spacing.sm,
+              paddingInline: import_tokens35.tokens.spacing.base,
+              paddingBlock: import_tokens35.tokens.spacing.base
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+                import_Box30.default,
+                {
+                  sx: {
+                    alignItems: "center",
+                    display: "flex",
+                    gap: import_tokens35.tokens.spacing.sm,
+                    justifyContent: "space-between"
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                      import_Skeleton.default,
+                      {
+                        "aria-label": "Loading total price",
+                        variant: "text",
+                        sx: {
+                          fontSize: import_tokens35.tokens.typography.fontSizes.lg,
+                          width: "40%"
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                      import_Skeleton.default,
+                      {
+                        "aria-label": "Loading buy button",
+                        variant: "rounded",
+                        sx: {
+                          borderRadius: import_tokens35.tokens.radius.md,
+                          height: "36px",
+                          width: 100
+                        }
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                import_Skeleton.default,
+                {
+                  "aria-label": "Loading seller info",
+                  variant: "text",
+                  sx: {
+                    fontSize: import_tokens35.tokens.typography.fontSizes.sm,
+                    width: "60%"
+                  }
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/vazi/VAZIFeedSection/VAZIFeedSection.tsx
+var import_Box31 = __toESM(require("@mui/material/Box"));
+var import_tokens36 = require("@mitumba/tokens");
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var renderOutfitCards = (outfits) => outfits.map((outfit) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  import_Box31.default,
+  {
+    sx: {
+      flexShrink: 0,
+      width: { xs: "82%", md: "100%" },
+      maxWidth: { xs: "340px", md: "none" }
+    },
+    children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      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__ */ (0, import_jsx_runtime40.jsx)(
+  import_Box31.default,
+  {
+    sx: {
+      flexShrink: 0,
+      width: { xs: "82%", md: "100%" },
+      maxWidth: { xs: "340px", md: "none" }
+    },
+    children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(VAZIOutfitCardSkeleton, {})
+  },
+  `skeleton-${skeletonIdx}`
+));
+function VAZIFeedSection({ outfits, loading = false, onSeeAll }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+    import_Box31.default,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        gap: import_tokens36.tokens.spacing.base,
+        width: "100%"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+          import_Box31.default,
+          {
+            sx: {
+              alignItems: "center",
+              display: "flex",
+              justifyContent: "space-between",
+              paddingInline: { xs: import_tokens36.tokens.spacing.base, md: 0 }
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                import_Box31.default,
+                {
+                  component: "h2",
+                  sx: {
+                    color: import_tokens36.tokens.colors.textPrimary,
+                    fontFamily: import_tokens36.tokens.typography.fontFamily,
+                    fontSize: import_tokens36.tokens.typography.fontSizes.xl,
+                    fontWeight: import_tokens36.tokens.typography.fontWeights.bold,
+                    lineHeight: import_tokens36.tokens.typography.lineHeights.snug,
+                    margin: 0
+                  },
+                  children: "VAZI Picks"
+                }
+              ),
+              onSeeAll && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                import_Box31.default,
+                {
+                  component: "button",
+                  onClick: onSeeAll,
+                  sx: {
+                    backgroundColor: "transparent",
+                    border: "none",
+                    color: import_tokens36.tokens.colors.earth,
+                    cursor: "pointer",
+                    fontFamily: import_tokens36.tokens.typography.fontFamily,
+                    fontSize: import_tokens36.tokens.typography.fontSizes.base,
+                    fontWeight: import_tokens36.tokens.typography.fontWeights.semibold,
+                    lineHeight: import_tokens36.tokens.typography.lineHeights.normal,
+                    padding: 0,
+                    textDecoration: "none",
+                    transition: "color 200ms ease",
+                    whiteSpace: "nowrap",
+                    "&:hover": {
+                      color: import_tokens36.tokens.colors.earthDark,
+                      textDecoration: "underline"
+                    },
+                    "&:focus-visible": {
+                      outline: `${import_tokens36.tokens.spacing.xs}px solid transparent`,
+                      boxShadow: import_tokens36.tokens.shadows.focus,
+                      borderRadius: import_tokens36.tokens.radius.sm
+                    }
+                  },
+                  children: "See all"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          import_Box31.default,
+          {
+            sx: {
+              display: { xs: "flex", md: "grid" },
+              gridTemplateColumns: { md: "repeat(3, 1fr)" },
+              gap: import_tokens36.tokens.spacing.base,
+              overflowX: { xs: "auto", md: "visible" },
+              paddingInline: { xs: import_tokens36.tokens.spacing.base, md: 0 },
+              paddingBottom: { xs: import_tokens36.tokens.spacing.sm, md: 0 },
+              scrollbarWidth: "none",
+              msOverflowStyle: "none",
+              "&::-webkit-scrollbar": {
+                display: "none"
+              }
+            },
+            children: loading ? renderSkeletons() : renderOutfitCards(outfits)
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/vazi/CompleteThisLookPanel/CompleteThisLookPanel.tsx
+var import_Box32 = __toESM(require("@mui/material/Box"));
+var import_Typography21 = __toESM(require("@mui/material/Typography"));
+var import_tokens37 = require("@mitumba/tokens");
+var import_jsx_runtime41 = require("react/jsx-runtime");
+function CompleteThisLookPanel({ outfits, loading = false }) {
+  if (!loading && outfits.length === 0) {
+    return null;
+  }
+  const renderOutfitCards2 = () => outfits.map((outfit) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    import_Box32.default,
+    {
+      sx: {
+        flexShrink: 0,
+        width: { xs: "82%", md: "100%" },
+        maxWidth: { xs: "340px", md: "none" }
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        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__ */ (0, import_jsx_runtime41.jsx)(
+    import_Box32.default,
+    {
+      sx: {
+        flexShrink: 0,
+        width: { xs: "82%", md: "100%" },
+        maxWidth: { xs: "340px", md: "none" }
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(VAZIOutfitCardSkeleton, {})
+    },
+    skelKey
+  ));
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+    import_Box32.default,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        gap: import_tokens37.tokens.spacing.base,
+        width: "100%"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          import_Typography21.default,
+          {
+            component: "h2",
+            sx: {
+              color: import_tokens37.tokens.colors.textPrimary,
+              fontSize: import_tokens37.tokens.typography.fontSizes.xl,
+              fontWeight: import_tokens37.tokens.typography.fontWeights.bold,
+              lineHeight: import_tokens37.tokens.typography.lineHeights.snug,
+              margin: 0
+            },
+            children: "Complete this look"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          import_Box32.default,
+          {
+            sx: {
+              display: { xs: "flex", md: "grid" },
+              gridTemplateColumns: { md: "repeat(3, 1fr)" },
+              gap: import_tokens37.tokens.spacing.base,
+              overflowX: { xs: "auto", md: "visible" },
+              paddingBottom: { xs: import_tokens37.tokens.spacing.sm, md: 0 },
+              scrollbarWidth: "none",
+              msOverflowStyle: "none",
+              "&::-webkit-scrollbar": {
+                display: "none"
+              }
+            },
+            children: loading ? renderSkeletons2() : renderOutfitCards2()
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/theme/provider.tsx
+var import_CssBaseline = __toESM(require("@mui/material/CssBaseline"));
+var import_styles3 = require("@mui/material/styles");
+
+// src/theme/theme.ts
+var import_styles2 = require("@mui/material/styles");
+var import_tokens38 = require("@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)"
+};
+var mitumbaTheme = (0, import_styles2.createTheme)({
+  // Spacing factor 4px (Mandate)
+  spacing: (factor) => `${factor * 4}px`,
+  breakpoints: {
+    values: import_tokens38.tokens.breakpoints
+  },
+  palette: {
+    mode: "light",
+    primary: {
+      main: import_tokens38.tokens.colors.green,
+      light: import_tokens38.tokens.colors.greenLight,
+      dark: import_tokens38.tokens.colors.greenDark,
+      contrastText: import_tokens38.tokens.colors.textOnGreen
+    },
+    secondary: {
+      main: import_tokens38.tokens.colors.earth,
+      light: import_tokens38.tokens.colors.earthLight,
+      dark: import_tokens38.tokens.colors.earthDark,
+      contrastText: import_tokens38.tokens.colors.textOnEarth
+    },
+    earth: {
+      main: import_tokens38.tokens.colors.earth,
+      light: import_tokens38.tokens.colors.earthLight,
+      dark: import_tokens38.tokens.colors.earthDark,
+      contrastText: import_tokens38.tokens.colors.textOnEarth
+    },
+    success: {
+      main: import_tokens38.tokens.colors.success,
+      light: import_tokens38.tokens.colors.successLight,
+      dark: import_tokens38.tokens.colors.successDark,
+      contrastText: import_tokens38.tokens.colors.textOnGreen
+    },
+    error: {
+      main: import_tokens38.tokens.colors.error,
+      light: import_tokens38.tokens.colors.errorLight,
+      dark: import_tokens38.tokens.colors.errorDark,
+      contrastText: import_tokens38.tokens.colors.white
+    },
+    warning: {
+      main: import_tokens38.tokens.colors.warning,
+      light: import_tokens38.tokens.colors.warningLight,
+      dark: import_tokens38.tokens.colors.warningDark,
+      contrastText: import_tokens38.tokens.colors.textPrimary
+    },
+    info: {
+      main: import_tokens38.tokens.colors.info,
+      light: import_tokens38.tokens.colors.infoLight,
+      dark: import_tokens38.tokens.colors.infoDark,
+      contrastText: import_tokens38.tokens.colors.white
+    },
+    background: {
+      default: import_tokens38.tokens.colors.background,
+      paper: import_tokens38.tokens.colors.surface
+    },
+    divider: import_tokens38.tokens.colors.divider,
+    text: {
+      primary: import_tokens38.tokens.colors.textPrimary,
+      secondary: import_tokens38.tokens.colors.textSecondary,
+      disabled: import_tokens38.tokens.colors.textDisabled
+    },
+    common: {
+      black: import_tokens38.tokens.colors.textPrimary,
+      white: import_tokens38.tokens.colors.white
+    }
+  },
+  shape: {
+    borderRadius: import_tokens38.tokens.radius.md
+    // 8px default
+  },
+  shadows: [
+    "none",
+    import_tokens38.tokens.shadows.card,
+    // 1
+    import_tokens38.tokens.shadows.elevated,
+    // 2
+    import_tokens38.tokens.shadows.deep,
+    // 3
+    import_tokens38.tokens.shadows.bottomSheet,
+    // 4
+    import_tokens38.tokens.shadows.focus,
+    // 5
+    import_tokens38.tokens.shadows.green,
+    // 6
+    import_tokens38.tokens.shadows.earth,
+    // 7
+    "none",
+    "none",
+    "none",
+    "none",
+    "none",
+    "none",
+    "none",
+    "none",
+    "none",
+    "none",
+    "none",
+    "none",
+    "none",
+    "none",
+    "none",
+    "none",
+    "none"
+  ],
+  typography: {
+    fontFamily: import_tokens38.tokens.typography.fontFamily,
+    fontWeightRegular: import_tokens38.tokens.typography.fontWeights.regular,
+    fontWeightMedium: import_tokens38.tokens.typography.fontWeights.medium,
+    fontWeightBold: import_tokens38.tokens.typography.fontWeights.bold,
+    h1: {
+      fontSize: `${import_tokens38.tokens.typography.fontSizes.display}px`,
+      fontWeight: import_tokens38.tokens.typography.fontWeights.extrabold,
+      lineHeight: 1.1
+    },
+    h2: {
+      fontSize: `${import_tokens38.tokens.typography.fontSizes.xxxl}px`,
+      fontWeight: import_tokens38.tokens.typography.fontWeights.bold,
+      lineHeight: 1.2
+    },
+    h3: {
+      fontSize: `${import_tokens38.tokens.typography.fontSizes.xxl}px`,
+      fontWeight: import_tokens38.tokens.typography.fontWeights.bold,
+      lineHeight: 1.2
+    },
+    h4: {
+      fontSize: `${import_tokens38.tokens.typography.fontSizes.xl}px`,
+      fontWeight: import_tokens38.tokens.typography.fontWeights.bold,
+      lineHeight: 1.2
+    },
+    body1: {
+      fontSize: `${import_tokens38.tokens.typography.fontSizes.md}px`,
+      lineHeight: 1.5
+    },
+    body2: {
+      fontSize: `${import_tokens38.tokens.typography.fontSizes.base}px`,
+      lineHeight: 1.5
+    },
+    button: {
+      fontSize: `${import_tokens38.tokens.typography.fontSizes.base}px`,
+      fontWeight: 600,
+      textTransform: "none"
+    },
+    caption: {
+      fontSize: `${import_tokens38.tokens.typography.fontSizes.sm}px`,
+      lineHeight: 1.5
+    }
+  },
+  components: {
+    MuiCssBaseline: {
+      styleOverrides: {
+        body: {
+          backgroundColor: import_tokens38.tokens.colors.background,
+          color: import_tokens38.tokens.colors.textPrimary,
+          fontFamily: import_tokens38.tokens.typography.fontFamily,
+          WebkitFontSmoothing: "antialiased",
+          MozOsxFontSmoothing: "grayscale"
+        },
+        "*, *::before, *::after": {
+          boxSizing: "border-box"
+        }
+      }
+    },
+    MuiButton: {
+      defaultProps: {
+        disableElevation: true
+      },
+      styleOverrides: {
+        root: {
+          borderRadius: `${import_tokens38.tokens.radius.md}px`,
+          transition: transitions.standard,
+          fontWeight: 600,
+          "&:hover": {
+            transform: "translateY(-2px) scale(1.02)"
+          },
+          "&:active": {
+            transform: "translateY(0) scale(0.98)"
+          },
+          "&.Mui-disabled": {
+            backgroundColor: import_tokens38.tokens.colors.divider,
+            color: import_tokens38.tokens.colors.textDisabled,
+            borderColor: import_tokens38.tokens.colors.divider
+          }
+        },
+        containedPrimary: {
+          backgroundColor: import_tokens38.tokens.colors.green,
+          "&:hover": {
+            backgroundColor: import_tokens38.tokens.colors.greenDark,
+            boxShadow: import_tokens38.tokens.shadows.green
+          }
+        },
+        containedSecondary: {
+          backgroundColor: import_tokens38.tokens.colors.earth,
+          "&:hover": {
+            backgroundColor: import_tokens38.tokens.colors.earthDark,
+            boxShadow: import_tokens38.tokens.shadows.earth
+          }
+        },
+        outlinedPrimary: {
+          borderWidth: "2px !important",
+          borderColor: import_tokens38.tokens.colors.border,
+          color: import_tokens38.tokens.colors.textPrimary,
+          "&:hover": {
+            backgroundColor: import_tokens38.tokens.colors.background,
+            borderColor: import_tokens38.tokens.colors.green,
+            color: import_tokens38.tokens.colors.green
+          }
+        },
+        textPrimary: {
+          color: import_tokens38.tokens.colors.textSecondary,
+          "&:hover": {
+            backgroundColor: import_tokens38.tokens.colors.background,
+            color: import_tokens38.tokens.colors.textPrimary
+          }
+        }
+      }
+    },
+    MuiCard: {
+      styleOverrides: {
+        root: {
+          borderRadius: `${import_tokens38.tokens.radius.xl}px`,
+          backgroundColor: import_tokens38.tokens.colors.surface,
+          boxShadow: import_tokens38.tokens.shadows.card,
+          transition: transitions.standard,
+          border: "1px solid",
+          borderColor: import_tokens38.tokens.colors.divider,
+          "&:hover": {
+            transform: "translateY(-4px)",
+            boxShadow: import_tokens38.tokens.shadows.elevated,
+            borderColor: import_tokens38.tokens.colors.border
+          }
+        }
+      }
+    },
+    MuiPaper: {
+      styleOverrides: {
+        rounded: {
+          borderRadius: `${import_tokens38.tokens.radius.xl}px`
+        },
+        elevation1: {
+          boxShadow: import_tokens38.tokens.shadows.card
+        }
+      }
+    },
+    MuiOutlinedInput: {
+      styleOverrides: {
+        root: {
+          borderRadius: `${import_tokens38.tokens.radius.md}px`,
+          backgroundColor: import_tokens38.tokens.colors.surface,
+          transition: transitions.standard,
+          "& .MuiOutlinedInput-notchedOutline": {
+            borderColor: import_tokens38.tokens.colors.border,
+            borderWidth: "1px",
+            transition: transitions.standard
+          },
+          "&:hover .MuiOutlinedInput-notchedOutline": {
+            borderColor: import_tokens38.tokens.colors.textDisabled
+          },
+          "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+            borderColor: import_tokens38.tokens.colors.green,
+            borderWidth: "2px"
+          },
+          "&.Mui-error .MuiOutlinedInput-notchedOutline": {
+            borderColor: import_tokens38.tokens.colors.error
+          },
+          "&.Mui-focused": {
+            boxShadow: import_tokens38.tokens.shadows.focus
+          }
+        }
+      }
+    },
+    MuiAvatar: {
+      styleOverrides: {
+        root: {
+          transition: transitions.spring,
+          cursor: "pointer",
+          "&:hover": {
+            transform: "perspective(1000px) rotateY(15deg) rotateX(-5deg) scale(1.1)",
+            boxShadow: import_tokens38.tokens.shadows.elevated
+          },
+          "&:active": {
+            transform: "perspective(1000px) rotateY(0deg) rotateX(0deg) scale(1.05)"
+          }
+        }
+      }
+    },
+    MuiDialog: {
+      styleOverrides: {
+        paper: {
+          borderRadius: `${import_tokens38.tokens.radius.xxxl}px`,
+          boxShadow: import_tokens38.tokens.shadows.bottomSheet,
+          backgroundImage: "none"
+        }
+      }
+    },
+    MuiAlert: {
+      styleOverrides: {
+        root: {
+          borderRadius: `${import_tokens38.tokens.radius.lg}px`,
+          alignItems: "center"
+        }
+      }
+    }
+  }
+});
+
+// src/theme/provider.tsx
+var import_jsx_runtime42 = require("react/jsx-runtime");
+function MitumbaThemeProvider({
+  children,
+  disableCssBaseline = false
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_styles3.ThemeProvider, { theme: mitumbaTheme, children: [
+    !disableCssBaseline && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_CssBaseline.default, {}),
+    children
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CartItem,
+  CompleteThisLookPanel,
+  ConditionBadge,
+  DeliveryBadge,
+  EscrowStatusBanner,
+  ListingCard,
+  ListingCardSkeleton,
+  ListingGrid,
+  ListingImageGallery,
+  MitumbaAvatar,
+  MitumbaBreadcrumb,
+  MitumbaChip,
+  MitumbaDivider,
+  MitumbaGrid,
+  MitumbaPrimaryButton,
+  MitumbaSelect,
+  MitumbaTextField,
+  MitumbaThemeProvider,
+  MobileBottomNav,
+  OrderStatusTimeline,
+  PageContainer,
+  PriceTag,
+  STIBreakdownPanel,
+  STIScoreChip,
+  SectionHeader,
+  SellerCard,
+  TopNav,
+  VAZIBadge,
+  VAZIFeedSection,
+  VAZIOutfitCard,
+  VAZIOutfitCardSkeleton,
+  mitumbaTheme
+});