@mitumba/ui 0.1.1

package/dist/index.mjs

@@ -0,0 +1,4619 @@
+// src/components/foundation/MitumbaPrimaryButton/MitumbaPrimaryButton.tsx
+import Button from "@mui/material/Button";
+import CircularProgress from "@mui/material/CircularProgress";
+import Box from "@mui/material/Box";
+import { tokens } from "@mitumba/tokens";
+import { jsx, jsxs } from "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: tokens.typography.fontSizes.sm },
+    medium: { height: 42, px: 6, fontSize: tokens.typography.fontSizes.base },
+    large: { height: 52, px: 8, fontSize: 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__ */ jsxs(
+    Button,
+    {
+      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: tokens.radius.md,
+          fontSize: currentSize.fontSize,
+          fontWeight: 600,
+          fontFamily: 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__ */ jsxs(
+          Box,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: 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__ */ jsx(
+          Box,
+          {
+            sx: {
+              position: "absolute",
+              inset: 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              color: "inherit"
+            },
+            children: /* @__PURE__ */ jsx(
+              CircularProgress,
+              {
+                size: currentSize.height * 0.4,
+                color: "inherit",
+                "aria-label": `${label || "Button"} loading`
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/foundation/MitumbaTextField/MitumbaTextField.tsx
+import React, { useId, useState } from "react";
+import TextField from "@mui/material/TextField";
+import Box2 from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import InputAdornment from "@mui/material/InputAdornment";
+import IconButton from "@mui/material/IconButton";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import ErrorIcon from "@mui/icons-material/Error";
+import WarningIcon from "@mui/icons-material/Warning";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
+import { tokens as tokens2 } from "@mitumba/tokens";
+import { jsx as jsx2, jsxs as jsxs2 } from "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 = useId();
+  const [showPassword, setShowPassword] = useState(false);
+  const currentStatus = error ? "error" : status;
+  const sizeConfig = {
+    small: { height: 32, fontSize: tokens2.typography.fontSizes.sm, iconSize: 18 },
+    medium: { height: 42, fontSize: tokens2.typography.fontSizes.base, iconSize: 20 },
+    large: { height: 52, fontSize: tokens2.typography.fontSizes.md, iconSize: 24 }
+  };
+  const radiusMap = {
+    pill: tokens2.radius.full,
+    rounded: tokens2.radius.md
+  };
+  const currentSize = sizeConfig[size];
+  const borderRadius = radiusMap[rounding];
+  const statusConfig = {
+    success: { color: tokens2.colors.success, icon: /* @__PURE__ */ jsx2(CheckCircleIcon, {}) },
+    error: { color: tokens2.colors.error, icon: /* @__PURE__ */ jsx2(ErrorIcon, {}) },
+    warning: { color: tokens2.colors.warning, icon: /* @__PURE__ */ jsx2(WarningIcon, {}) }
+  };
+  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__ */ jsx2(InputAdornment, { position: "end", children: /* @__PURE__ */ jsxs2(Box2, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+      suffix && /* @__PURE__ */ jsx2(Box2, { sx: { color: tokens2.colors.textSecondary, display: "flex" }, children: React.isValidElement(suffix) ? React.cloneElement(suffix, { sx: { fontSize: currentSize.iconSize } }) : suffix }),
+      type === "password" && /* @__PURE__ */ jsx2(
+        IconButton,
+        {
+          onClick: handleTogglePassword,
+          edge: "end",
+          size: "small",
+          sx: { color: tokens2.colors.textSecondary, p: 0.5 },
+          children: showPassword ? /* @__PURE__ */ jsx2(VisibilityOffIcon, { sx: { fontSize: currentSize.iconSize } }) : /* @__PURE__ */ jsx2(VisibilityIcon, { sx: { fontSize: currentSize.iconSize } })
+        }
+      ),
+      activeStatus && /* @__PURE__ */ jsx2(Box2, { sx: { color: activeStatus.color, display: "flex" }, children: React.cloneElement(activeStatus.icon, { sx: { fontSize: currentSize.iconSize } }) })
+    ] }) });
+  };
+  const fieldStyles = [
+    {
+      "& .MuiOutlinedInput-root": {
+        height: multiline ? "auto" : currentSize.height,
+        borderRadius: `${borderRadius}px`,
+        bgcolor: tokens2.colors.surface,
+        fontSize: currentSize.fontSize,
+        fontWeight: 600,
+        fontFamily: tokens2.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 : tokens2.colors.divider,
+          borderWidth: currentStatus ? "2px" : "1px",
+          transition: "inherit"
+        },
+        "&:hover .MuiOutlinedInput-notchedOutline": {
+          borderColor: currentStatus ? statusConfig[currentStatus].color : tokens2.colors.textDisabled
+        },
+        "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+          borderColor: currentStatus ? statusConfig[currentStatus].color : tokens2.colors.green,
+          borderWidth: "2px"
+        },
+        "&.Mui-focused": {
+          boxShadow: currentStatus ? "none" : tokens2.shadows.focus
+        },
+        "&.Mui-disabled": {
+          bgcolor: tokens2.colors.background,
+          "& .MuiOutlinedInput-notchedOutline": {
+            borderColor: tokens2.colors.divider
+          }
+        }
+      },
+      "& .MuiInputBase-input": {
+        py: 0,
+        height: "100%",
+        "&::placeholder": {
+          color: tokens2.colors.textDisabled,
+          opacity: 1
+        }
+      },
+      "& .MuiInputBase-inputMultiline": {
+        py: 1.5
+      }
+    },
+    ...Array.isArray(sx) ? sx : [sx]
+  ];
+  return /* @__PURE__ */ jsxs2(Box2, { sx: { width: "100%" }, children: [
+    label && /* @__PURE__ */ jsx2(
+      Typography,
+      {
+        variant: "caption",
+        component: "label",
+        htmlFor: id,
+        sx: {
+          mb: 0.5,
+          display: "block",
+          fontWeight: 700,
+          color: currentStatus ? statusConfig[currentStatus].color : tokens2.colors.textSecondary,
+          textTransform: "uppercase",
+          letterSpacing: "0.05em",
+          fontFamily: tokens2.typography.fontFamily,
+          ml: rounding === "pill" ? 2 : 1
+        },
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsxs2(Box2, { sx: { display: "flex", width: "100%", alignItems: "flex-start" }, children: [
+      /* @__PURE__ */ jsx2(
+        TextField,
+        {
+          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__ */ jsx2(InputAdornment, { position: "start", sx: { color: tokens2.colors.textSecondary, ml: rounding === "pill" ? 1 : 0 }, children: React.isValidElement(prefix) ? React.cloneElement(prefix, { sx: { fontSize: currentSize.iconSize } }) : prefix }),
+              endAdornment: renderEndAdornment()
+            }
+          },
+          sx: fieldStyles
+        }
+      ),
+      endButton && /* @__PURE__ */ jsx2(
+        Box2,
+        {
+          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 ${tokens2.radius.full}px ${tokens2.radius.full}px 0` : `0 ${tokens2.radius.md}px ${tokens2.radius.md}px 0`
+            }
+          },
+          children: endButton
+        }
+      )
+    ] }),
+    (helperText || error) && /* @__PURE__ */ jsx2(
+      Typography,
+      {
+        variant: "caption",
+        sx: {
+          mt: 0.5,
+          ml: rounding === "pill" ? 2 : 1,
+          display: "block",
+          fontWeight: 600,
+          color: currentStatus ? statusConfig[currentStatus].color : tokens2.colors.textSecondary,
+          fontFamily: tokens2.typography.fontFamily
+        },
+        children: error || helperText
+      }
+    )
+  ] });
+}
+
+// src/components/foundation/MitumbaSelect/MitumbaSelect.tsx
+import React2, { useMemo, useState as useState2 } from "react";
+import MenuItem from "@mui/material/MenuItem";
+import Select from "@mui/material/Select";
+import InputLabel from "@mui/material/InputLabel";
+import FormControl from "@mui/material/FormControl";
+import FormHelperText from "@mui/material/FormHelperText";
+import ListSubheader from "@mui/material/ListSubheader";
+import Box3 from "@mui/material/Box";
+import Typography2 from "@mui/material/Typography";
+import InputAdornment2 from "@mui/material/InputAdornment";
+import TextField2 from "@mui/material/TextField";
+import Checkbox from "@mui/material/Checkbox";
+import CheckIcon from "@mui/icons-material/Check";
+import SearchIcon from "@mui/icons-material/Search";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import { tokens as tokens3 } from "@mitumba/tokens";
+import { jsx as jsx3, jsxs as jsxs3 } from "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] = useState2("");
+  const labelId = useMemo(() => `select-label-${label?.replace(/\s+/g, "-").toLowerCase() || Math.random().toString(36).substr(2, 9)}`, [label]);
+  const sizeConfig = {
+    small: { height: 32, fontSize: tokens3.typography.fontSizes.sm, iconSize: 16 },
+    medium: { height: 42, fontSize: tokens3.typography.fontSizes.base, iconSize: 20 },
+    large: { height: 52, fontSize: tokens3.typography.fontSizes.md, iconSize: 24 }
+  };
+  const radiusMap = {
+    pill: tokens3.radius.full,
+    rounded: tokens3.radius.md,
+    square: tokens3.radius.xs
+  };
+  const currentSize = sizeConfig[size];
+  const borderRadius = radiusMap[rounding];
+  const menuBorderRadius = tokens3.radius.md;
+  const filteredOptions = 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__ */ jsxs3(FormControl, { fullWidth: true, error: !!error, disabled: disabled || loading, children: [
+    label && /* @__PURE__ */ jsx3(
+      InputLabel,
+      {
+        id: labelId,
+        shrink: true,
+        sx: {
+          position: "relative",
+          transform: "none",
+          mb: 0.5,
+          ml: rounding === "pill" ? 2 : 1,
+          fontSize: tokens3.typography.fontSizes.xs,
+          fontWeight: 700,
+          color: error ? `${tokens3.colors.error} !important` : `${tokens3.colors.textSecondary} !important`,
+          textTransform: "uppercase",
+          letterSpacing: "0.05em",
+          fontFamily: tokens3.typography.fontFamily
+        },
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsxs3(
+      Select,
+      {
+        labelId,
+        id: name,
+        name,
+        multiple,
+        value,
+        onChange: (e) => onChange(e.target.value),
+        displayEmpty: true,
+        IconComponent: KeyboardArrowDownIcon,
+        renderValue: (selected) => {
+          if (displayValue) return displayValue;
+          if (selected === "" || Array.isArray(selected) && selected.length === 0) {
+            return /* @__PURE__ */ jsx3(Typography2, { sx: { color: tokens3.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__ */ jsxs3(Box3, { sx: { display: "flex", alignItems: "center", gap: 1.5 }, children: [
+            selectedOpt?.icon,
+            selectedOpt?.label || selected
+          ] });
+        },
+        MenuProps: {
+          PaperProps: {
+            sx: {
+              mt: 1,
+              borderRadius: `${menuBorderRadius}px`,
+              boxShadow: tokens3.shadows.deep,
+              border: `1px solid ${tokens3.colors.divider}`,
+              bgcolor: inverted ? tokens3.colors.textPrimary : tokens3.colors.surface,
+              color: inverted ? tokens3.colors.white : tokens3.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)" : tokens3.colors.background
+                },
+                "&.Mui-selected": {
+                  bgcolor: inverted ? "rgba(255,255,255,0.15)" : `${tokens3.colors.green}15`,
+                  color: inverted ? tokens3.colors.white : tokens3.colors.green,
+                  fontWeight: 700,
+                  "&:hover": {
+                    bgcolor: inverted ? "rgba(255,255,255,0.2)" : `${tokens3.colors.green}25`
+                  }
+                }
+              }
+            }
+          }
+        },
+        sx: [
+          {
+            height: currentSize.height,
+            borderRadius: `${borderRadius}px`,
+            bgcolor: tokens3.colors.surface,
+            fontFamily: tokens3.typography.fontFamily,
+            fontSize: currentSize.fontSize,
+            fontWeight: 600,
+            "& .MuiOutlinedInput-notchedOutline": {
+              borderColor: tokens3.colors.divider,
+              borderWidth: "1px",
+              transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
+            },
+            "&:hover .MuiOutlinedInput-notchedOutline": {
+              borderColor: tokens3.colors.textDisabled
+            },
+            "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+              borderColor: tokens3.colors.green,
+              borderWidth: "2px"
+            },
+            "& .MuiSelect-select": {
+              display: "flex",
+              alignItems: "center",
+              pl: startIcon ? 0 : 2
+            },
+            "& .MuiSelect-icon": {
+              color: tokens3.colors.textSecondary,
+              right: 12,
+              transition: "transform 0.3s ease"
+            },
+            "&.Mui-focused .MuiSelect-icon": {
+              transform: "rotate(180deg)",
+              color: tokens3.colors.green
+            }
+          },
+          ...Array.isArray(sx) ? sx : [sx]
+        ],
+        startAdornment: startIcon && /* @__PURE__ */ jsx3(InputAdornment2, { position: "start", sx: { ml: 1.5, color: tokens3.colors.textSecondary }, children: React2.cloneElement(startIcon, { sx: { fontSize: currentSize.iconSize } }) }),
+        children: [
+          showSearch && /* @__PURE__ */ jsx3(Box3, { sx: { px: 2, py: 1, position: "sticky", top: 0, bgcolor: "inherit", zIndex: 1 }, children: /* @__PURE__ */ jsx3(
+            TextField2,
+            {
+              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__ */ jsx3(InputAdornment2, { position: "start", children: /* @__PURE__ */ jsx3(SearchIcon, { sx: { fontSize: 18, color: tokens3.colors.textDisabled } }) }),
+                sx: { borderRadius: `${menuBorderRadius / 2}px`, bgcolor: "rgba(0,0,0,0.03)" }
+              }
+            }
+          ) }),
+          filteredOptions.length === 0 && /* @__PURE__ */ jsx3(MenuItem, { disabled: true, children: /* @__PURE__ */ jsx3(Typography2, { 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__ */ jsx3(
+                    ListSubheader,
+                    {
+                      sx: {
+                        bgcolor: "transparent",
+                        color: tokens3.colors.textSecondary,
+                        fontWeight: 800,
+                        fontSize: 10,
+                        textTransform: "uppercase",
+                        letterSpacing: "0.1em",
+                        lineHeight: "32px",
+                        fontFamily: tokens3.typography.fontFamily
+                      },
+                      children: option.group
+                    },
+                    `group-${option.group}`
+                  )
+                );
+                lastGroup = option.group;
+              }
+              elements.push(
+                /* @__PURE__ */ jsx3(
+                  MenuItem,
+                  {
+                    value: option.value,
+                    disabled: option.disabled,
+                    children: /* @__PURE__ */ jsxs3(Box3, { sx: { display: "flex", alignItems: "center", width: "100%", gap: 2 }, children: [
+                      multiple && /* @__PURE__ */ jsx3(
+                        Checkbox,
+                        {
+                          checked: Array.isArray(value) && value.includes(option.value),
+                          size: "small",
+                          sx: { p: 0 }
+                        }
+                      ),
+                      option.icon && /* @__PURE__ */ jsx3(Box3, { sx: { display: "flex", color: tokens3.colors.textSecondary }, children: React2.cloneElement(option.icon, { sx: { fontSize: 20 } }) }),
+                      /* @__PURE__ */ jsxs3(Box3, { sx: { flexGrow: 1, display: "flex", flexDirection: "column" }, children: [
+                        /* @__PURE__ */ jsx3(Typography2, { variant: "body2", sx: { fontWeight: "inherit", color: "inherit" }, children: option.label }),
+                        option.subtitle && /* @__PURE__ */ jsx3(Typography2, { variant: "caption", sx: { color: "text.secondary", fontWeight: 400 }, children: option.subtitle })
+                      ] }),
+                      !multiple && value === option.value && /* @__PURE__ */ jsx3(CheckIcon, { sx: { fontSize: 18, color: tokens3.colors.green } })
+                    ] })
+                  },
+                  option.value
+                )
+              );
+            });
+            return elements;
+          })()
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ jsx3(FormHelperText, { sx: { ml: 1, fontWeight: 600 }, children: error })
+  ] });
+}
+
+// src/components/foundation/MitumbaChip/MitumbaChip.tsx
+import { useMemo as useMemo2 } from "react";
+import Chip from "@mui/material/Chip";
+import Box4 from "@mui/material/Box";
+import Typography3 from "@mui/material/Typography";
+import CircleIcon from "@mui/icons-material/Circle";
+import { tokens as tokens4 } from "@mitumba/tokens";
+import { jsx as jsx4, jsxs as jsxs4 } from "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 = useMemo2(() => {
+    const config = {
+      default: { color: tokens4.colors.textSecondary, bgColor: "transparent", borderColor: tokens4.colors.divider },
+      active: { color: tokens4.colors.info, bgColor: `${tokens4.colors.info}10`, borderColor: tokens4.colors.info, icon: /* @__PURE__ */ jsx4(CircleIcon, { sx: { fontSize: 6 } }) },
+      incomplete: { color: tokens4.colors.warning, bgColor: `${tokens4.colors.warning}10`, borderColor: tokens4.colors.warning },
+      danger: { color: tokens4.colors.error, bgColor: `${tokens4.colors.error}10`, borderColor: tokens4.colors.error },
+      success: { color: tokens4.colors.green, bgColor: `${tokens4.colors.green}10`, borderColor: tokens4.colors.green },
+      common: { color: tokens4.colors.textPrimary, bgColor: "transparent", borderColor: tokens4.colors.divider },
+      special: { color: tokens4.colors.white, bgColor: tokens4.colors.earth, borderColor: "transparent" }
+    };
+    return config[status];
+  }, [status]);
+  const activeColor = propColor ? tokens4.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 = `${tokens4.radius.md}px`;
+  if (rounding === "pill") {
+    borderRadius = tokens4.radius.full;
+  } else if (rounding === "square") {
+    borderRadius = `${tokens4.radius.xs}px`;
+  }
+  const styles = useMemo2(() => ({
+    height: size === "small" ? 22 : 28,
+    borderRadius,
+    backgroundColor: activeBg,
+    color: variant === "solid" || selected ? tokens4.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: tokens4.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: tokens4.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__ */ jsx4(
+    Chip,
+    {
+      label: /* @__PURE__ */ jsxs4(Box4, { sx: { display: "flex", alignItems: "center", gap: 0.8 }, children: [
+        label,
+        badge !== void 0 && /* @__PURE__ */ jsx4(Typography3, { 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
+import React4, { useMemo as useMemo3 } from "react";
+import Avatar from "@mui/material/Avatar";
+import Box5 from "@mui/material/Box";
+import Typography4 from "@mui/material/Typography";
+import PersonIcon from "@mui/icons-material/Person";
+import CheckIcon2 from "@mui/icons-material/Check";
+import AddIcon from "@mui/icons-material/Add";
+import { tokens as tokens5 } from "@mitumba/tokens";
+import { jsx as jsx5, jsxs as jsxs5 } from "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 = useMemo3(() => {
+    if (!name) return /* @__PURE__ */ jsx5(PersonIcon, { 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__ */ jsx5(PersonIcon, { sx: { fontSize: dimension * 0.6 } });
+  }, [name, dimension]);
+  const renderAvatarCircle = () => {
+    if (isCTA) {
+      return /* @__PURE__ */ jsx5(
+        Avatar,
+        {
+          sx: {
+            width: dimension,
+            height: dimension,
+            bgcolor: tokens5.colors.background,
+            color: tokens5.colors.textSecondary,
+            border: `2px dashed ${tokens5.colors.border}`,
+            cursor: "pointer",
+            transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+            "&:hover": {
+              bgcolor: tokens5.colors.greenLight,
+              borderColor: tokens5.colors.green,
+              color: tokens5.colors.green
+            }
+          },
+          children: actionIcon || /* @__PURE__ */ jsx5(AddIcon, {})
+        }
+      );
+    }
+    if (overflowCount !== void 0) {
+      return /* @__PURE__ */ jsxs5(
+        Avatar,
+        {
+          sx: {
+            width: dimension,
+            height: dimension,
+            bgcolor: tokens5.colors.divider,
+            color: tokens5.colors.textPrimary,
+            fontSize: fontSizeMap[size],
+            fontWeight: "bold",
+            border: `2px solid ${tokens5.colors.surface}`
+          },
+          children: [
+            "+",
+            overflowCount
+          ]
+        }
+      );
+    }
+    const hasBorderDecorator = hasNewEvent || progress !== void 0;
+    return /* @__PURE__ */ jsxs5(Box5, { sx: { position: "relative", width: dimension, height: dimension, display: "flex", alignItems: "center", justifyContent: "center" }, children: [
+      hasBorderDecorator && /* @__PURE__ */ jsxs5(
+        Box5,
+        {
+          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__ */ jsx5("circle", { cx: "50", cy: "50", r: "44", fill: "none", stroke: tokens5.colors.divider, strokeWidth: "2", opacity: "0.2" }),
+            progress !== void 0 && /* @__PURE__ */ jsx5(
+              Box5,
+              {
+                component: "circle",
+                cx: "50",
+                cy: "50",
+                r: "44",
+                fill: "none",
+                stroke: tokens5.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__ */ jsx5(
+              Box5,
+              {
+                component: "circle",
+                cx: "50",
+                cy: "50",
+                r: "44",
+                fill: "none",
+                stroke: tokens5.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__ */ jsx5(
+        Avatar,
+        {
+          alt: name,
+          src: imageUrl,
+          sx: {
+            width: "100%",
+            height: "100%",
+            fontSize: fontSizeMap[size],
+            fontFamily: tokens5.typography.fontFamily,
+            fontWeight: tokens5.typography.fontWeights.extrabold,
+            bgcolor: imageUrl ? "transparent" : tokens5.colors.green,
+            color: tokens5.colors.textOnGreen,
+            border: selected ? `2px solid ${tokens5.colors.green}` : `1px solid ${tokens5.colors.divider}`,
+            boxShadow: tokens5.shadows.card,
+            transition: "all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)",
+            zIndex: 1,
+            ...isStacked && {
+              border: `2px solid ${tokens5.colors.surface}`
+            }
+          },
+          children: !imageUrl && initials
+        }
+      ),
+      selected && /* @__PURE__ */ jsx5(
+        Box5,
+        {
+          sx: {
+            position: "absolute",
+            bottom: -2,
+            right: -2,
+            width: Math.max(16, dimension * 0.35),
+            height: Math.max(16, dimension * 0.35),
+            bgcolor: tokens5.colors.green,
+            borderRadius: tokens5.radius.full,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            color: tokens5.colors.white,
+            boxShadow: tokens5.shadows.deep,
+            border: `2px solid ${tokens5.colors.surface}`,
+            zIndex: 3,
+            transform: "translateZ(25px)"
+          },
+          children: /* @__PURE__ */ jsx5(CheckIcon2, { sx: { fontSize: "70%" } })
+        }
+      ),
+      notificationCount !== void 0 && /* @__PURE__ */ jsx5(
+        Box5,
+        {
+          sx: {
+            position: "absolute",
+            top: -2,
+            right: -2,
+            minWidth: 18,
+            height: 18,
+            bgcolor: notificationColor || tokens5.colors.error,
+            borderRadius: tokens5.radius.full,
+            color: tokens5.colors.white,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            fontSize: 10,
+            fontWeight: "bold",
+            border: `2px solid ${tokens5.colors.surface}`,
+            zIndex: 2,
+            px: 0.5,
+            transform: "translateZ(20px)"
+          },
+          children: notificationCount
+        }
+      ),
+      status && !actionIcon && !selected && /* @__PURE__ */ jsx5(
+        Box5,
+        {
+          sx: {
+            position: "absolute",
+            bottom: 2,
+            right: 2,
+            width: dimension * 0.25,
+            height: dimension * 0.25,
+            minWidth: 10,
+            minHeight: 10,
+            bgcolor: status === "online" ? tokens5.colors.success : tokens5.colors.textDisabled,
+            borderRadius: tokens5.radius.full,
+            border: `2px solid ${tokens5.colors.surface}`,
+            zIndex: 2,
+            transform: "translateZ(15px)"
+          }
+        }
+      ),
+      actionIcon && !selected && /* @__PURE__ */ jsx5(
+        Box5,
+        {
+          sx: {
+            position: "absolute",
+            bottom: -2,
+            right: -2,
+            width: dimension * 0.4,
+            height: dimension * 0.4,
+            minWidth: 24,
+            minHeight: 24,
+            bgcolor: tokens5.colors.surface,
+            borderRadius: tokens5.radius.full,
+            color: tokens5.colors.textPrimary,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            border: `1px solid ${tokens5.colors.divider}`,
+            boxShadow: tokens5.shadows.card,
+            zIndex: 2,
+            transform: "translateZ(20px)",
+            transition: "all 0.2s ease",
+            "&:hover": {
+              bgcolor: tokens5.colors.background,
+              color: tokens5.colors.green,
+              transform: "translateZ(25px) scale(1.1)"
+            }
+          },
+          children: React4.cloneElement(actionIcon, { sx: { fontSize: dimension * 0.2 } })
+        }
+      ),
+      badge && !selected && !actionIcon && !status && /* @__PURE__ */ jsx5(
+        Box5,
+        {
+          sx: {
+            position: "absolute",
+            bottom: -2,
+            right: -2,
+            width: dimension * 0.4,
+            height: dimension * 0.4,
+            minWidth: 20,
+            minHeight: 20,
+            bgcolor: tokens5.colors.surface,
+            borderRadius: tokens5.radius.full,
+            color: tokens5.colors.textPrimary,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            border: `1px solid ${tokens5.colors.divider}`,
+            boxShadow: tokens5.shadows.card,
+            zIndex: 2,
+            transform: "translateZ(20px)"
+          },
+          children: badge
+        }
+      )
+    ] });
+  };
+  return /* @__PURE__ */ jsxs5(
+    Box5,
+    {
+      onClick,
+      sx: {
+        display: "inline-flex",
+        flexDirection: textAlignment === "bottom" ? "column" : "row",
+        alignItems: "center",
+        gap: tokens5.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__ */ jsx5(
+          Box5,
+          {
+            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__ */ jsxs5(
+          Box5,
+          {
+            sx: {
+              textAlign: textAlignment === "bottom" ? "center" : "left",
+              // Tightened vertical/horizontal gap
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center"
+            },
+            children: [
+              name && /* @__PURE__ */ jsx5(
+                Typography4,
+                {
+                  sx: {
+                    fontWeight: tokens5.typography.fontWeights.bold,
+                    fontSize: tokens5.typography.fontSizes.base,
+                    color: tokens5.colors.textPrimary,
+                    lineHeight: 1.1,
+                    fontFamily: tokens5.typography.fontFamily,
+                    whiteSpace: "nowrap"
+                  },
+                  children: name
+                }
+              ),
+              (subtitle || progress !== void 0 && textAlignment === "bottom") && /* @__PURE__ */ jsx5(
+                Typography4,
+                {
+                  sx: {
+                    fontSize: tokens5.typography.fontSizes.sm,
+                    color: status === "online" && textAlignment === "side" ? tokens5.colors.success : tokens5.colors.textSecondary,
+                    fontWeight: status === "online" ? "bold" : "normal",
+                    mt: "1px",
+                    fontFamily: tokens5.typography.fontFamily,
+                    whiteSpace: "nowrap"
+                  },
+                  children: progress !== void 0 && textAlignment === "bottom" ? `${progress}% complete` : subtitle
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/foundation/MitumbaGlass/MitumbaGlass.tsx
+import Box6 from "@mui/material/Box";
+import { tokens as tokens6 } from "@mitumba/tokens";
+import { jsx as jsx6 } from "react/jsx-runtime";
+
+// src/components/selection/MitumbaCheckbox/MitumbaCheckbox.tsx
+import { useEffect, useRef } from "react";
+import Checkbox2 from "@mui/material/Checkbox";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import { tokens as tokens7 } from "@mitumba/tokens";
+import CheckBoxIcon from "@mui/icons-material/CheckBox";
+import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank";
+import IndeterminateCheckBoxIcon from "@mui/icons-material/IndeterminateCheckBox";
+import { jsx as jsx7 } from "react/jsx-runtime";
+
+// src/components/selection/MitumbaRadio/MitumbaRadio.tsx
+import Radio from "@mui/material/Radio";
+import FormControlLabel2 from "@mui/material/FormControlLabel";
+import { tokens as tokens8 } from "@mitumba/tokens";
+import RadioButtonUncheckedIcon from "@mui/icons-material/RadioButtonUnchecked";
+import RadioButtonCheckedIcon from "@mui/icons-material/RadioButtonChecked";
+import { jsx as jsx8 } from "react/jsx-runtime";
+
+// src/components/selection/MitumbaSwitch/MitumbaSwitch.tsx
+import Switch from "@mui/material/Switch";
+import FormControlLabel3 from "@mui/material/FormControlLabel";
+import { tokens as tokens9 } from "@mitumba/tokens";
+import { jsx as jsx9 } from "react/jsx-runtime";
+
+// src/components/selection/MitumbaSlider/MitumbaSlider.tsx
+import Slider from "@mui/material/Slider";
+import Box7 from "@mui/material/Box";
+import Typography5 from "@mui/material/Typography";
+import { tokens as tokens10 } from "@mitumba/tokens";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+
+// src/components/selection/MitumbaDatePicker/MitumbaDatePicker.tsx
+import { useState as useState3, useMemo as useMemo4 } from "react";
+import Popover from "@mui/material/Popover";
+import Box8 from "@mui/material/Box";
+import Typography6 from "@mui/material/Typography";
+import IconButton2 from "@mui/material/IconButton";
+import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import { tokens as tokens11 } from "@mitumba/tokens";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+
+// src/components/layout/PageContainer/PageContainer.tsx
+import Box9 from "@mui/material/Box";
+import { tokens as tokens12 } from "@mitumba/tokens";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var maxWidthValues = {
+  sm: 640,
+  md: 900,
+  lg: 1280,
+  xl: 1536
+};
+function PageContainer({
+  children,
+  maxWidth = "lg",
+  noPadding = false
+}) {
+  return /* @__PURE__ */ jsx12(
+    Box9,
+    {
+      sx: {
+        mx: "auto",
+        maxWidth: maxWidthValues[maxWidth],
+        px: noPadding ? 0 : {
+          xs: tokens12.spacing.base,
+          md: tokens12.spacing.lg,
+          lg: tokens12.spacing.xl
+        },
+        width: "100%"
+      },
+      children
+    }
+  );
+}
+
+// src/components/layout/SectionHeader/SectionHeader.tsx
+import Box10 from "@mui/material/Box";
+import Typography7 from "@mui/material/Typography";
+import { tokens as tokens13 } from "@mitumba/tokens";
+import { jsx as jsx13, jsxs as jsxs8 } from "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__ */ jsxs8(
+    Box10,
+    {
+      sx: [
+        {
+          width: "100%",
+          display: "flex",
+          flexDirection: isCentered ? "column" : "row",
+          alignItems: isCentered ? "center" : "flex-end",
+          justifyContent: isCentered ? "center" : "space-between",
+          textAlign: isCentered ? "center" : "left",
+          gap: tokens13.spacing.base,
+          mb: isLarge ? tokens13.spacing.xxxl : tokens13.spacing.xxl
+        },
+        ...Array.isArray(sx) ? sx : [sx]
+      ],
+      children: [
+        /* @__PURE__ */ jsxs8(Box10, { sx: { flex: 1 }, children: [
+          overline && /* @__PURE__ */ jsx13(
+            Typography7,
+            {
+              variant: "caption",
+              sx: {
+                display: "block",
+                fontWeight: 800,
+                color: tokens13.colors.green,
+                textTransform: "uppercase",
+                letterSpacing: "0.1em",
+                fontFamily: tokens13.typography.fontFamily,
+                mb: 0.5
+              },
+              children: overline
+            }
+          ),
+          /* @__PURE__ */ jsx13(
+            Typography7,
+            {
+              component: "h2",
+              sx: {
+                color: tokens13.colors.textPrimary,
+                fontSize: isLarge ? tokens13.typography.fontSizes.display : tokens13.typography.fontSizes.xxl,
+                fontWeight: 900,
+                lineHeight: 1.1,
+                fontFamily: tokens13.typography.fontFamily,
+                letterSpacing: "-0.02em"
+              },
+              children: title
+            }
+          ),
+          subtitle && /* @__PURE__ */ jsx13(
+            Typography7,
+            {
+              sx: {
+                color: tokens13.colors.textSecondary,
+                fontSize: isLarge ? tokens13.typography.fontSizes.md : tokens13.typography.fontSizes.base,
+                mt: 1,
+                fontFamily: tokens13.typography.fontFamily,
+                maxWidth: 560,
+                marginInline: isCentered ? "auto" : "unset",
+                lineHeight: 1.4
+              },
+              children: subtitle
+            }
+          )
+        ] }),
+        (action || actionLabel) && /* @__PURE__ */ jsx13(Box10, { sx: { flexShrink: 0, mb: isCentered ? 0 : 0.5 }, children: action || /* @__PURE__ */ jsx13(
+          MitumbaPrimaryButton,
+          {
+            label: actionLabel,
+            onClick: onAction || (() => {
+            }),
+            variant: "ghost",
+            size: "small",
+            fullWidth: false
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+// src/components/layout/MitumbaDivider/MitumbaDivider.tsx
+import Box11 from "@mui/material/Box";
+import { tokens as tokens14 } from "@mitumba/tokens";
+import { jsx as jsx14 } from "react/jsx-runtime";
+function MitumbaDivider() {
+  return /* @__PURE__ */ jsx14(
+    Box11,
+    {
+      component: "hr",
+      sx: {
+        backgroundColor: tokens14.colors.divider,
+        border: "none",
+        height: "1px",
+        marginBlock: 0,
+        width: "100%"
+      }
+    }
+  );
+}
+
+// src/components/layout/MitumbaGrid/MitumbaGrid.tsx
+import Box12 from "@mui/material/Box";
+import { tokens as tokens15 } from "@mitumba/tokens";
+import { jsx as jsx15 } from "react/jsx-runtime";
+function MitumbaGrid({
+  children,
+  columns = { xs: 4, sm: 8, md: 8, lg: 12 },
+  gap,
+  sx
+}) {
+  const defaultGap = {
+    xs: tokens15.spacing.base,
+    // 12px
+    sm: tokens15.spacing.base,
+    // 12px
+    md: tokens15.spacing.lg,
+    // 16px
+    lg: tokens15.spacing.lg
+    // 16px
+  };
+  return /* @__PURE__ */ jsx15(
+    Box12,
+    {
+      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
+import Breadcrumbs from "@mui/material/Breadcrumbs";
+import Link from "@mui/material/Link";
+import Typography8 from "@mui/material/Typography";
+import { tokens as tokens16 } from "@mitumba/tokens";
+import { jsx as jsx16 } from "react/jsx-runtime";
+function MitumbaBreadcrumb({ items }) {
+  return /* @__PURE__ */ jsx16(
+    Breadcrumbs,
+    {
+      separator: /* @__PURE__ */ jsx16(
+        Typography8,
+        {
+          sx: {
+            color: tokens16.colors.divider,
+            mx: 0.5,
+            fontWeight: 400,
+            fontSize: 16,
+            fontFamily: tokens16.typography.fontFamily
+          },
+          children: "/"
+        }
+      ),
+      sx: {
+        "& .MuiBreadcrumbs-ol": {
+          flexWrap: "nowrap"
+        }
+      },
+      children: items.map((item, index) => {
+        const isLast = index === items.length - 1;
+        if (isLast) {
+          return /* @__PURE__ */ jsx16(
+            Typography8,
+            {
+              sx: {
+                color: tokens16.colors.textPrimary,
+                fontSize: tokens16.typography.fontSizes.sm,
+                fontWeight: 800,
+                fontFamily: tokens16.typography.fontFamily,
+                whiteSpace: "nowrap"
+              },
+              children: item.label
+            },
+            item.label
+          );
+        }
+        return /* @__PURE__ */ jsx16(
+          Link,
+          {
+            href: item.href || "#",
+            sx: {
+              color: tokens16.colors.textSecondary,
+              fontSize: tokens16.typography.fontSizes.sm,
+              fontWeight: 600,
+              fontFamily: tokens16.typography.fontFamily,
+              textDecoration: "none",
+              transition: "all 0.2s ease",
+              whiteSpace: "nowrap",
+              "&:hover": {
+                color: tokens16.colors.green,
+                transform: "translateY(-1px)"
+              }
+            },
+            children: item.label
+          },
+          item.label
+        );
+      })
+    }
+  );
+}
+
+// src/components/navigation/MobileBottomNav/MobileBottomNav.tsx
+import Box13 from "@mui/material/Box";
+import Typography9 from "@mui/material/Typography";
+import HomeIcon from "@mui/icons-material/Home";
+import SearchIcon2 from "@mui/icons-material/Search";
+import LocalMallIcon from "@mui/icons-material/LocalMall";
+import PersonIcon2 from "@mui/icons-material/Person";
+import AutoAwesomeIcon from "@mui/icons-material/AutoAwesome";
+import { tokens as tokens17 } from "@mitumba/tokens";
+import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
+var DEFAULT_ITEMS = [
+  { id: "home", label: "Home", icon: /* @__PURE__ */ jsx17(HomeIcon, {}) },
+  { id: "search", label: "Search", icon: /* @__PURE__ */ jsx17(SearchIcon2, {}) },
+  { id: "vazi", label: "VAZI", icon: /* @__PURE__ */ jsx17(AutoAwesomeIcon, {}) },
+  { id: "orders", label: "Orders", icon: /* @__PURE__ */ jsx17(LocalMallIcon, {}) },
+  { id: "profile", label: "Profile", icon: /* @__PURE__ */ jsx17(PersonIcon2, {}) }
+];
+function MobileBottomNav({
+  activeTab,
+  onTabChange,
+  variant = "m3",
+  items = DEFAULT_ITEMS,
+  sx
+}) {
+  return /* @__PURE__ */ jsx17(
+    Box13,
+    {
+      sx: [
+        {
+          position: "fixed",
+          bottom: 0,
+          left: 0,
+          right: 0,
+          height: 80,
+          backgroundColor: tokens17.colors.surface,
+          borderTop: `1px solid ${tokens17.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: tokens17.radius.full,
+                backgroundColor: isActive ? `${tokens17.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 ? tokens17.colors.green : tokens17.colors.textSecondary
+              },
+              "& .label": {
+                fontSize: 10,
+                fontWeight: isActive ? 800 : 600,
+                color: isActive ? tokens17.colors.green : tokens17.colors.textSecondary
+              }
+            };
+          }
+          if (variant === "expansive") {
+            return {
+              flexDirection: "column",
+              backgroundColor: isActive ? tokens17.colors.green : "transparent",
+              borderRadius: `${tokens17.radius.md}px`,
+              py: 1,
+              px: 2,
+              minWidth: 70,
+              transition: "all 0.3s ease",
+              color: isActive ? tokens17.colors.white : tokens17.colors.textSecondary,
+              "& .icon-wrapper": {
+                fontSize: 24,
+                mb: 0.2
+              },
+              "& .label": {
+                fontSize: 10,
+                fontWeight: 700
+              }
+            };
+          }
+          if (variant === "indicator") {
+            return {
+              flexDirection: "column",
+              position: "relative",
+              color: isActive ? tokens17.colors.green : tokens17.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: tokens17.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: tokens17.radius.full,
+              backgroundColor: isActive ? tokens17.colors.green : "transparent",
+              color: isActive ? tokens17.colors.white : tokens17.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: tokens17.radius.full,
+              border: isActive ? `1.5px solid ${tokens17.colors.green}` : "1.5px solid transparent",
+              color: isActive ? tokens17.colors.green : tokens17.colors.textSecondary,
+              backgroundColor: isActive ? `${tokens17.colors.green}10` : "transparent",
+              transition: "all 0.3s ease",
+              "& .label": {
+                display: isActive ? "block" : "none",
+                fontSize: 12,
+                fontWeight: 800
+              }
+            };
+          }
+          return {};
+        };
+        return /* @__PURE__ */ jsxs9(
+          Box13,
+          {
+            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__ */ jsx17(Box13, { className: "icon-wrapper", sx: { display: "flex" }, children: isActive && item.activeIcon ? item.activeIcon : item.icon }),
+              /* @__PURE__ */ jsx17(Typography9, { className: "label", sx: { fontFamily: tokens17.typography.fontFamily }, children: item.label })
+            ]
+          },
+          item.id
+        );
+      })
+    }
+  );
+}
+
+// src/components/navigation/TopNav/TopNav.tsx
+import AppBar from "@mui/material/AppBar";
+import Box15 from "@mui/material/Box";
+import IconButton3 from "@mui/material/IconButton";
+import Toolbar from "@mui/material/Toolbar";
+import Typography11 from "@mui/material/Typography";
+import Stack from "@mui/material/Stack";
+import Link2 from "@mui/material/Link";
+import Badge from "@mui/material/Badge";
+import ShoppingCartIcon from "@mui/icons-material/ShoppingCart";
+import { tokens as tokens19 } from "@mitumba/tokens";
+
+// src/components/forms/MitumbaSearchBar/MitumbaSearchBar.tsx
+import { useState as useState4, useCallback } from "react";
+import Box14 from "@mui/material/Box";
+import Typography10 from "@mui/material/Typography";
+import SearchIcon3 from "@mui/icons-material/Search";
+import CloseIcon from "@mui/icons-material/Close";
+import { tokens as tokens18 } from "@mitumba/tokens";
+import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
+function MitumbaSearchBar({
+  value,
+  onChange,
+  onSubmit,
+  placeholder = "Search...",
+  suggestions,
+  onSuggestionClick
+}) {
+  const [isFocused, setIsFocused] = useState4(false);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter") {
+        onSubmit(value);
+      }
+    },
+    [value, onSubmit]
+  );
+  const handleClear = useCallback(() => {
+    onChange("");
+  }, [onChange]);
+  return /* @__PURE__ */ jsxs10(Box14, { sx: { position: "relative", width: "100%" }, children: [
+    /* @__PURE__ */ jsxs10(
+      Box14,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          border: "1px solid",
+          borderColor: isFocused ? tokens18.colors.green : tokens18.colors.border,
+          borderWidth: isFocused ? "2px" : "1px",
+          borderRadius: tokens18.radius.lg,
+          backgroundColor: tokens18.colors.surface,
+          paddingInline: tokens18.spacing.base,
+          paddingBlock: isFocused ? "11px" : "12px",
+          gap: tokens18.spacing.sm,
+          transition: "all 200ms ease",
+          boxShadow: isFocused ? tokens18.shadows.focus : "none",
+          "&:hover": {
+            borderColor: isFocused ? tokens18.colors.green : tokens18.colors.textDisabled
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx18(SearchIcon3, { sx: { color: tokens18.colors.textSecondary, fontSize: 20 } }),
+          /* @__PURE__ */ jsx18(
+            Box14,
+            {
+              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: tokens18.typography.fontSizes.base,
+                fontFamily: tokens18.typography.fontFamily,
+                color: tokens18.colors.textPrimary,
+                width: "100%",
+                height: "24px",
+                "&::placeholder": {
+                  color: tokens18.colors.textDisabled,
+                  opacity: 1
+                }
+              }
+            }
+          ),
+          value && /* @__PURE__ */ jsx18(
+            Box14,
+            {
+              component: "button",
+              onClick: handleClear,
+              "aria-label": "Clear search",
+              sx: {
+                cursor: "pointer",
+                color: tokens18.colors.textDisabled,
+                display: "flex",
+                alignItems: "center",
+                background: "none",
+                border: "none",
+                padding: 0,
+                transition: "all 200ms ease",
+                "&:hover": {
+                  color: tokens18.colors.error
+                },
+                "&:focus-visible": {
+                  outline: `2px solid ${tokens18.colors.greenLight}`,
+                  borderRadius: tokens18.radius.xs
+                }
+              },
+              children: /* @__PURE__ */ jsx18(CloseIcon, { sx: { fontSize: 18 } })
+            }
+          )
+        ]
+      }
+    ),
+    isFocused && suggestions && suggestions.length > 0 && /* @__PURE__ */ jsx18(
+      Box14,
+      {
+        sx: {
+          position: "absolute",
+          top: "100%",
+          left: 0,
+          right: 0,
+          mt: tokens18.spacing.xs,
+          backgroundColor: tokens18.colors.surface,
+          border: `1px solid ${tokens18.colors.border}`,
+          borderRadius: tokens18.radius.md,
+          boxShadow: tokens18.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__ */ jsx18(
+          Box14,
+          {
+            onClick: () => {
+              onSuggestionClick?.(suggestion);
+              setIsFocused(false);
+            },
+            sx: {
+              paddingInline: tokens18.spacing.base,
+              paddingBlock: tokens18.spacing.sm,
+              cursor: "pointer",
+              transition: "background-color 200ms ease",
+              "&:hover": {
+                backgroundColor: tokens18.colors.background
+              }
+            },
+            children: /* @__PURE__ */ jsx18(
+              Typography10,
+              {
+                sx: {
+                  fontSize: tokens18.typography.fontSizes.base,
+                  fontFamily: tokens18.typography.fontFamily,
+                  color: tokens18.colors.textPrimary
+                },
+                children: suggestion
+              }
+            )
+          },
+          suggestion
+        ))
+      }
+    )
+  ] });
+}
+
+// src/components/navigation/TopNav/TopNav.tsx
+import { jsx as jsx19, jsxs as jsxs11 } from "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__ */ jsxs11(
+    AppBar,
+    {
+      position: sticky ? "sticky" : "static",
+      elevation: 0,
+      sx: [
+        {
+          backgroundColor: transparent ? "transparent" : tokens19.colors.surface,
+          borderBottom: transparent ? "none" : `1px solid ${tokens19.colors.divider}`,
+          color: tokens19.colors.textPrimary,
+          zIndex: (theme) => theme.zIndex.appBar
+        },
+        ...Array.isArray(sx) ? sx : [sx]
+      ],
+      children: [
+        announcement && /* @__PURE__ */ jsx19(
+          Box15,
+          {
+            sx: {
+              backgroundColor: tokens19.colors.green,
+              color: tokens19.colors.white,
+              py: 1,
+              px: 2,
+              textAlign: "center",
+              fontSize: 12,
+              fontWeight: 700,
+              fontFamily: tokens19.typography.fontFamily
+            },
+            children: announcement
+          }
+        ),
+        /* @__PURE__ */ jsxs11(
+          Toolbar,
+          {
+            sx: {
+              justifyContent: "space-between",
+              height: { xs: 64, md: 80 },
+              px: { xs: 2, md: 4, lg: 6 },
+              gap: 4
+            },
+            children: [
+              /* @__PURE__ */ jsx19(
+                Box15,
+                {
+                  onClick: onLogoClick,
+                  sx: { cursor: "pointer", display: "flex", alignItems: "center" },
+                  children: logo || /* @__PURE__ */ jsx19(
+                    Typography11,
+                    {
+                      variant: "h6",
+                      sx: {
+                        fontWeight: 900,
+                        color: tokens19.colors.green,
+                        letterSpacing: "-0.02em",
+                        fontFamily: tokens19.typography.fontFamily
+                      },
+                      children: "MITUMBA"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx19(
+                Stack,
+                {
+                  direction: "row",
+                  spacing: 4,
+                  sx: { display: { xs: "none", md: "flex" }, flexGrow: 1, justifyContent: "center" },
+                  children: links.map((link) => /* @__PURE__ */ jsx19(
+                    Link2,
+                    {
+                      href: link.href,
+                      sx: {
+                        color: link.active ? tokens19.colors.green : tokens19.colors.textSecondary,
+                        textDecoration: "none",
+                        fontWeight: 700,
+                        fontSize: 14,
+                        fontFamily: tokens19.typography.fontFamily,
+                        transition: "all 0.2s ease",
+                        "&:hover": {
+                          color: tokens19.colors.green,
+                          transform: "translateY(-1px)"
+                        }
+                      },
+                      children: link.label
+                    },
+                    link.label
+                  ))
+                }
+              ),
+              onSearchSubmit && /* @__PURE__ */ jsx19(Box15, { sx: { display: { xs: "none", lg: "block" }, width: 300 }, children: /* @__PURE__ */ jsx19(
+                MitumbaSearchBar,
+                {
+                  value: searchValue,
+                  onChange: onSearchChange || (() => {
+                  }),
+                  onSubmit: onSearchSubmit,
+                  placeholder: "Search listings..."
+                }
+              ) }),
+              /* @__PURE__ */ jsxs11(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [
+                actions,
+                /* @__PURE__ */ jsx19(IconButton3, { onClick: onCartClick, sx: { color: tokens19.colors.textPrimary }, children: /* @__PURE__ */ jsx19(Badge, { badgeContent: cartCount, color: "error", sx: { "& .MuiBadge-badge": { fontWeight: 800, fontSize: 10 } }, children: /* @__PURE__ */ jsx19(ShoppingCartIcon, {}) }) }),
+                isAuthenticated && user ? /* @__PURE__ */ jsx19(Box15, { onClick: onProfileClick, sx: { cursor: "pointer", transition: "transform 0.2s ease", "&:hover": { transform: "scale(1.05)" } }, children: /* @__PURE__ */ jsx19(MitumbaAvatar, { name: user.name, size: "sm", imageUrl: user.avatarUrl }) }) : /* @__PURE__ */ jsx19(
+                  MitumbaPrimaryButton,
+                  {
+                    label: "Sign In",
+                    variant: "ghost",
+                    onClick: onAuthClick || (() => {
+                    }),
+                    size: "small",
+                    sx: { fontWeight: 800 }
+                  }
+                ),
+                cta && /* @__PURE__ */ jsx19(Box15, { sx: { display: { xs: "none", sm: "block" } }, children: cta })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/navigation/MitumbaTabs/MitumbaTabs.tsx
+import Tabs from "@mui/material/Tabs";
+import Tab from "@mui/material/Tab";
+import Box16 from "@mui/material/Box";
+import { tokens as tokens20 } from "@mitumba/tokens";
+import { jsx as jsx20 } from "react/jsx-runtime";
+
+// src/components/navigation/MitumbaPagination/MitumbaPagination.tsx
+import Pagination from "@mui/material/Pagination";
+import PaginationItem from "@mui/material/PaginationItem";
+import Stack2 from "@mui/material/Stack";
+import ChevronLeftIcon2 from "@mui/icons-material/ChevronLeft";
+import ChevronRightIcon2 from "@mui/icons-material/ChevronRight";
+import { tokens as tokens21 } from "@mitumba/tokens";
+import { jsx as jsx21 } from "react/jsx-runtime";
+
+// src/components/navigation/MitumbaStepper/MitumbaStepper.tsx
+import Stepper from "@mui/material/Stepper";
+import Step from "@mui/material/Step";
+import StepLabel from "@mui/material/StepLabel";
+import StepConnector, { stepConnectorClasses } from "@mui/material/StepConnector";
+import { styled } from "@mui/material/styles";
+import Box17 from "@mui/material/Box";
+import Typography12 from "@mui/material/Typography";
+import CheckIcon3 from "@mui/icons-material/Check";
+import { tokens as tokens22 } from "@mitumba/tokens";
+import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
+var MitumbaConnector = styled(StepConnector)(() => ({
+  [`&.${stepConnectorClasses.alternativeLabel}`]: {
+    top: 18
+  },
+  [`&.${stepConnectorClasses.active}`]: {
+    [`& .${stepConnectorClasses.line}`]: {
+      borderColor: tokens22.colors.green
+    }
+  },
+  [`&.${stepConnectorClasses.completed}`]: {
+    [`& .${stepConnectorClasses.line}`]: {
+      borderColor: tokens22.colors.green
+    }
+  },
+  [`& .${stepConnectorClasses.line}`]: {
+    borderColor: tokens22.colors.divider,
+    borderTopWidth: 2,
+    borderRadius: 1,
+    transition: "all 0.3s ease",
+    borderStyle: "dashed"
+    // Benchmark style for pending
+  },
+  [`&.${stepConnectorClasses.completed} .${stepConnectorClasses.line}`]: {
+    borderStyle: "solid"
+    // Benchmark style for completed
+  }
+}));
+
+// src/components/seller/STIScoreChip/STIScoreChip.tsx
+import Box18 from "@mui/material/Box";
+import { tokens as tokens23 } from "@mitumba/tokens";
+import { jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
+function getSTIConfig(score) {
+  if (score >= 85) {
+    return { color: tokens23.colors.stiTrusted, label: "Trusted \u2605" };
+  }
+  if (score >= 60) {
+    return { color: tokens23.colors.stiGood, label: "Good" };
+  }
+  if (score >= 40) {
+    return { color: tokens23.colors.stiAtRisk, label: "At risk" };
+  }
+  if (score >= 20) {
+    return { color: tokens23.colors.stiFlagged, label: "Flagged" };
+  }
+  return { color: tokens23.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__ */ jsxs13(
+    Box18,
+    {
+      sx: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: tokens23.spacing.xs,
+        height: compact ? "24px" : "32px",
+        px: compact ? tokens23.spacing.sm : tokens23.spacing.md,
+        borderRadius: tokens23.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__ */ jsx23(
+          Box18,
+          {
+            component: "span",
+            sx: {
+              color,
+              fontSize: compact ? 10 : tokens23.typography.fontSizes.xs,
+              fontWeight: tokens23.typography.fontWeights.bold,
+              textTransform: "uppercase",
+              letterSpacing: tokens23.typography.letterSpacings.wide,
+              lineHeight: 1
+            },
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsx23(
+          Box18,
+          {
+            component: "span",
+            sx: {
+              color,
+              fontSize: compact ? tokens23.typography.fontSizes.xs : tokens23.typography.fontSizes.sm,
+              fontWeight: tokens23.typography.fontWeights.extrabold,
+              lineHeight: 1,
+              minWidth: "1.2em",
+              textAlign: "center",
+              ...shouldShowLabel && {
+                borderLeft: `1px solid ${color}40`,
+                paddingLeft: tokens23.spacing.xs,
+                marginLeft: "2px"
+              }
+            },
+            children: clampedScore
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/seller/SellerCard/SellerCard.tsx
+import Box19 from "@mui/material/Box";
+import Typography13 from "@mui/material/Typography";
+import Inventory2OutlinedIcon from "@mui/icons-material/Inventory2Outlined";
+import LocationOnOutlinedIcon from "@mui/icons-material/LocationOnOutlined";
+import { tokens as tokens24 } from "@mitumba/tokens";
+
+// src/components/vazi/VAZIBadge/VAZIBadge.tsx
+import AutoAwesomeIcon2 from "@mui/icons-material/AutoAwesome";
+import { jsx as jsx24 } from "react/jsx-runtime";
+function VAZIBadge({ size = "small" }) {
+  return /* @__PURE__ */ jsx24(
+    MitumbaChip,
+    {
+      label: "VAZI Curation",
+      status: "special",
+      variant: "solid",
+      size,
+      icon: /* @__PURE__ */ jsx24(AutoAwesomeIcon2, {}),
+      color: "purple"
+    }
+  );
+}
+
+// src/components/seller/SellerCard/SellerCard.tsx
+import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
+function SellerCard({
+  name,
+  avatarUrl,
+  city,
+  stiScore,
+  totalListings,
+  isVaziFeatured = false,
+  onTap
+}) {
+  return /* @__PURE__ */ jsxs14(
+    Box19,
+    {
+      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: tokens24.spacing.base,
+        p: tokens24.spacing.base,
+        borderRadius: tokens24.radius.lg,
+        bgcolor: tokens24.colors.surface,
+        boxShadow: tokens24.shadows.card,
+        border: `1px solid ${tokens24.colors.divider}`,
+        cursor: onTap ? "pointer" : "default",
+        transition: "all 250ms cubic-bezier(0.4, 0, 0.2, 1)",
+        "&:hover": onTap ? {
+          boxShadow: tokens24.shadows.elevated,
+          transform: "translateY(-2px)",
+          borderColor: tokens24.colors.border
+        } : void 0,
+        "&:focus-visible": {
+          outline: `2px solid ${tokens24.colors.greenLight}`,
+          boxShadow: tokens24.shadows.focus
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx25(MitumbaAvatar, { name, imageUrl: avatarUrl, size: "md" }),
+        /* @__PURE__ */ jsxs14(Box19, { sx: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ jsxs14(Box19, { sx: { display: "flex", alignItems: "center", gap: tokens24.spacing.sm }, children: [
+            /* @__PURE__ */ jsx25(
+              Typography13,
+              {
+                sx: {
+                  fontWeight: tokens24.typography.fontWeights.bold,
+                  fontSize: tokens24.typography.fontSizes.base,
+                  color: tokens24.colors.textPrimary,
+                  lineHeight: 1.2,
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap",
+                  fontFamily: tokens24.typography.fontFamily
+                },
+                children: name
+              }
+            ),
+            isVaziFeatured && /* @__PURE__ */ jsx25(VAZIBadge, { size: "small" })
+          ] }),
+          /* @__PURE__ */ jsxs14(Box19, { sx: { display: "flex", alignItems: "center", gap: tokens24.spacing.sm, mt: tokens24.spacing.xs }, children: [
+            /* @__PURE__ */ jsx25(STIScoreChip, { score: stiScore, compact: true }),
+            /* @__PURE__ */ jsxs14(Box19, { sx: { display: "flex", alignItems: "center", gap: "4px", opacity: 0.7 }, children: [
+              /* @__PURE__ */ jsx25(Inventory2OutlinedIcon, { sx: { fontSize: 14, color: tokens24.colors.textSecondary } }),
+              /* @__PURE__ */ jsx25(
+                Typography13,
+                {
+                  sx: {
+                    color: tokens24.colors.textSecondary,
+                    fontSize: 10,
+                    fontWeight: tokens24.typography.fontWeights.semibold,
+                    textTransform: "uppercase",
+                    letterSpacing: tokens24.typography.letterSpacings.wide
+                  },
+                  children: totalListings
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs14(Box19, { sx: { display: "flex", alignItems: "center", gap: "4px", opacity: 0.7 }, children: [
+              /* @__PURE__ */ jsx25(LocationOnOutlinedIcon, { sx: { fontSize: 14, color: tokens24.colors.textSecondary } }),
+              /* @__PURE__ */ jsx25(
+                Typography13,
+                {
+                  sx: {
+                    color: tokens24.colors.textSecondary,
+                    fontSize: 10,
+                    fontWeight: tokens24.typography.fontWeights.semibold,
+                    textTransform: "uppercase",
+                    letterSpacing: tokens24.typography.letterSpacings.wide
+                  },
+                  children: city
+                }
+              )
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/seller/STIBreakdownPanel/STIBreakdownPanel.tsx
+import Box20 from "@mui/material/Box";
+import Typography14 from "@mui/material/Typography";
+import LinearProgress from "@mui/material/LinearProgress";
+import AddOutlinedIcon from "@mui/icons-material/AddOutlined";
+import RemoveOutlinedIcon from "@mui/icons-material/RemoveOutlined";
+import { tokens as tokens25 } from "@mitumba/tokens";
+import { jsx as jsx26, jsxs as jsxs15 } from "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__ */ jsxs15(
+    Box20,
+    {
+      sx: {
+        p: tokens25.spacing.base,
+        borderRadius: tokens25.radius.lg,
+        bgcolor: tokens25.colors.surface,
+        boxShadow: tokens25.shadows.card,
+        border: `1px solid ${tokens25.colors.divider}`
+      },
+      children: [
+        /* @__PURE__ */ jsx26(Box20, { sx: { display: "flex", alignItems: "center", gap: tokens25.spacing.base, mb: tokens25.spacing.lg }, children: /* @__PURE__ */ jsx26(STIScoreChip, { score }) }),
+        /* @__PURE__ */ jsx26(Box20, { component: "section", "aria-label": "Score factors", sx: { mb: tokens25.spacing.lg }, children: factors.map((factor) => /* @__PURE__ */ jsxs15(Box20, { sx: { mb: tokens25.spacing.md }, children: [
+          /* @__PURE__ */ jsxs15(Box20, { sx: { display: "flex", justifyContent: "space-between", mb: tokens25.spacing.xs }, children: [
+            /* @__PURE__ */ jsx26(
+              Typography14,
+              {
+                variant: "body2",
+                sx: { color: tokens25.colors.textSecondary, fontSize: tokens25.typography.fontSizes.sm },
+                children: factor.label
+              }
+            ),
+            /* @__PURE__ */ jsx26(
+              Typography14,
+              {
+                variant: "body2",
+                sx: { fontWeight: tokens25.typography.fontWeights.semibold, fontSize: tokens25.typography.fontSizes.sm },
+                children: factor.display
+              }
+            )
+          ] }),
+          factor.value !== void 0 && /* @__PURE__ */ jsx26(
+            LinearProgress,
+            {
+              variant: "determinate",
+              value: factor.value * 100,
+              sx: {
+                height: tokens25.spacing.sm,
+                borderRadius: tokens25.radius.full,
+                bgcolor: tokens25.colors.background,
+                "& .MuiLinearProgress-bar": {
+                  bgcolor: tokens25.colors.green,
+                  borderRadius: tokens25.radius.full
+                }
+              },
+              "aria-label": `${factor.label} progress`
+            }
+          )
+        ] }, factor.label)) }),
+        recentEvents.length > 0 && /* @__PURE__ */ jsxs15(Box20, { component: "section", "aria-label": "Recent STI events", children: [
+          /* @__PURE__ */ jsx26(
+            Typography14,
+            {
+              variant: "body2",
+              sx: {
+                fontWeight: tokens25.typography.fontWeights.semibold,
+                fontSize: tokens25.typography.fontSizes.sm,
+                color: tokens25.colors.textPrimary,
+                mb: tokens25.spacing.sm
+              },
+              children: "Recent Events"
+            }
+          ),
+          recentEvents.map((event) => /* @__PURE__ */ jsxs15(
+            Box20,
+            {
+              sx: {
+                display: "flex",
+                alignItems: "flex-start",
+                gap: tokens25.spacing.sm,
+                py: tokens25.spacing.sm,
+                borderBottom: `1px solid ${tokens25.colors.divider}`
+              },
+              children: [
+                event.type === "positive" ? /* @__PURE__ */ jsx26(AddOutlinedIcon, { sx: { fontSize: 16, color: tokens25.colors.success, mt: tokens25.spacing.xs } }) : /* @__PURE__ */ jsx26(RemoveOutlinedIcon, { sx: { fontSize: 16, color: tokens25.colors.error, mt: tokens25.spacing.xs } }),
+                /* @__PURE__ */ jsxs15(Box20, { sx: { flex: 1 }, children: [
+                  /* @__PURE__ */ jsxs15(Box20, { sx: { display: "flex", justifyContent: "space-between" }, children: [
+                    /* @__PURE__ */ jsx26(
+                      Typography14,
+                      {
+                        variant: "body2",
+                        sx: {
+                          fontSize: tokens25.typography.fontSizes.sm,
+                          color: tokens25.colors.textPrimary,
+                          fontWeight: tokens25.typography.fontWeights.medium
+                        },
+                        children: event.reason
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs15(
+                      Typography14,
+                      {
+                        variant: "caption",
+                        sx: {
+                          fontSize: tokens25.typography.fontSizes.xs,
+                          fontWeight: tokens25.typography.fontWeights.bold,
+                          color: event.type === "positive" ? tokens25.colors.success : tokens25.colors.error
+                        },
+                        children: [
+                          event.type === "positive" ? "+" : "",
+                          event.pointsChange
+                        ]
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx26(Typography14, { variant: "caption", sx: { fontSize: tokens25.typography.fontSizes.xs, color: tokens25.colors.textSecondary }, children: event.timestamp })
+                ] })
+              ]
+            },
+            `${event.reason}-${event.timestamp}`
+          ))
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/listing/ListingCard/ListingCard.tsx
+import { useState as useState5 } from "react";
+import Box21 from "@mui/material/Box";
+import Typography15 from "@mui/material/Typography";
+import Stack3 from "@mui/material/Stack";
+import IconButton4 from "@mui/material/IconButton";
+import FavoriteIcon from "@mui/icons-material/Favorite";
+import FavoriteBorderIcon from "@mui/icons-material/FavoriteBorder";
+import ArrowOutwardIcon from "@mui/icons-material/ArrowOutward";
+import { tokens as tokens26 } from "@mitumba/tokens";
+import { jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
+function ListingCard({
+  images,
+  title,
+  price,
+  originalPrice,
+  brand,
+  size,
+  badge,
+  brandLogoUrl,
+  onClick,
+  onBuyClick,
+  isLiked = false,
+  onLikeClick,
+  sx
+}) {
+  const [activeImage, setActiveImage] = useState5(0);
+  const handleBuy = (e) => {
+    e.stopPropagation();
+    onBuyClick?.(e);
+  };
+  const handleLike = (e) => {
+    e.stopPropagation();
+    onLikeClick?.(e);
+  };
+  return /* @__PURE__ */ jsxs16(
+    Box21,
+    {
+      onClick,
+      sx: [
+        {
+          width: "100%",
+          backgroundColor: tokens26.colors.surface,
+          borderRadius: `${tokens26.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: tokens26.shadows.deep
+          }
+        },
+        ...Array.isArray(sx) ? sx : [sx]
+      ],
+      children: [
+        /* @__PURE__ */ jsxs16(Box21, { sx: { position: "relative", width: "100%", pt: "100%", backgroundColor: tokens26.colors.background }, children: [
+          /* @__PURE__ */ jsx27(
+            Box21,
+            {
+              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__ */ jsx27(
+            Box21,
+            {
+              sx: {
+                position: "absolute",
+                top: 12,
+                left: 12,
+                backgroundColor: "rgba(255, 255, 255, 0.95)",
+                backdropFilter: "blur(4px)",
+                px: 1.5,
+                py: 0.5,
+                borderRadius: tokens26.radius.full,
+                fontSize: 10,
+                fontWeight: 800,
+                color: tokens26.colors.textPrimary,
+                fontFamily: tokens26.typography.fontFamily,
+                textTransform: "uppercase",
+                boxShadow: tokens26.shadows.card,
+                zIndex: 2
+              },
+              children: badge
+            }
+          ),
+          brandLogoUrl && /* @__PURE__ */ jsx27(
+            Box21,
+            {
+              sx: {
+                position: "absolute",
+                top: 12,
+                right: 12,
+                width: 32,
+                height: 32,
+                backgroundColor: tokens26.colors.white,
+                borderRadius: "50%",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                boxShadow: tokens26.shadows.card,
+                p: 0.5,
+                zIndex: 2,
+                "& img": { width: "100%", height: "100%", objectFit: "contain" }
+              },
+              children: /* @__PURE__ */ jsx27("img", { src: brandLogoUrl, alt: "brand" })
+            }
+          ),
+          /* @__PURE__ */ jsx27(
+            IconButton4,
+            {
+              onClick: handleLike,
+              sx: {
+                position: "absolute",
+                bottom: 12,
+                right: 12,
+                backgroundColor: "rgba(255, 255, 255, 0.9)",
+                backdropFilter: "blur(4px)",
+                boxShadow: tokens26.shadows.card,
+                color: isLiked ? tokens26.colors.error : tokens26.colors.textSecondary,
+                zIndex: 2,
+                "&:hover": { backgroundColor: tokens26.colors.white, transform: "scale(1.1)" }
+              },
+              children: isLiked ? /* @__PURE__ */ jsx27(FavoriteIcon, { sx: { fontSize: 18 } }) : /* @__PURE__ */ jsx27(FavoriteBorderIcon, { sx: { fontSize: 18 } })
+            }
+          ),
+          images.length > 1 && /* @__PURE__ */ jsx27(
+            Stack3,
+            {
+              direction: "row",
+              spacing: 0.8,
+              sx: {
+                position: "absolute",
+                bottom: 12,
+                left: "50%",
+                transform: "translateX(-50%)",
+                zIndex: 2
+              },
+              children: images.map((img, i) => /* @__PURE__ */ jsx27(
+                Box21,
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    setActiveImage(i);
+                  },
+                  sx: {
+                    width: activeImage === i ? 12 : 6,
+                    height: 6,
+                    borderRadius: tokens26.radius.full,
+                    backgroundColor: tokens26.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__ */ jsxs16(Box21, { sx: { p: 2.5 }, children: [
+          " ",
+          /* @__PURE__ */ jsx27(
+            Typography15,
+            {
+              sx: {
+                fontSize: tokens26.typography.fontSizes.base,
+                fontWeight: 800,
+                color: tokens26.colors.textPrimary,
+                fontFamily: tokens26.typography.fontFamily,
+                lineHeight: 1.2,
+                mb: 0.5,
+                whiteSpace: "nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis"
+              },
+              children: title
+            }
+          ),
+          (brand || size) && /* @__PURE__ */ jsxs16(
+            Typography15,
+            {
+              sx: {
+                fontSize: tokens26.typography.fontSizes.xs,
+                color: tokens26.colors.textSecondary,
+                fontFamily: tokens26.typography.fontFamily,
+                fontWeight: 600,
+                mb: 2
+              },
+              children: [
+                brand,
+                brand && size ? " \u2022 " : "",
+                size
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs16(Stack3, { direction: "row", alignItems: "center", justifyContent: "space-between", spacing: 2, children: [
+            /* @__PURE__ */ jsxs16(
+              Box21,
+              {
+                sx: {
+                  backgroundColor: tokens26.colors.background,
+                  px: 1.5,
+                  py: 0.8,
+                  borderRadius: tokens26.radius.full,
+                  fontSize: tokens26.typography.fontSizes.base,
+                  fontWeight: 800,
+                  color: tokens26.colors.textPrimary,
+                  fontFamily: tokens26.typography.fontFamily,
+                  display: "flex",
+                  alignItems: "baseline",
+                  gap: 0.5
+                },
+                children: [
+                  /* @__PURE__ */ jsx27(Typography15, { component: "span", sx: { fontSize: 10, fontWeight: 900 }, children: "KES" }),
+                  price.toLocaleString(),
+                  originalPrice && /* @__PURE__ */ jsx27(
+                    Typography15,
+                    {
+                      component: "span",
+                      sx: {
+                        ml: 0.5,
+                        fontSize: 10,
+                        color: tokens26.colors.textDisabled,
+                        textDecoration: "line-through",
+                        fontWeight: 600
+                      },
+                      children: originalPrice.toLocaleString()
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx27(
+              MitumbaPrimaryButton,
+              {
+                label: "Buy Now",
+                variant: "primary",
+                size: "small",
+                onClick: handleBuy,
+                icon: /* @__PURE__ */ jsx27(ArrowOutwardIcon, { sx: { fontSize: 16 } }),
+                iconPosition: "right",
+                sx: {
+                  borderRadius: tokens26.radius.full,
+                  px: 2.5,
+                  height: 32,
+                  // Forced small height for density
+                  fontSize: 11,
+                  fontWeight: 900
+                }
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/listing/ListingCardSkeleton/ListingCardSkeleton.tsx
+import Box23 from "@mui/material/Box";
+import { tokens as tokens28 } from "@mitumba/tokens";
+
+// src/components/feedback/MitumbaSkeleton/MitumbaSkeleton.tsx
+import Box22 from "@mui/material/Box";
+import { tokens as tokens27 } from "@mitumba/tokens";
+import { jsx as jsx28 } from "react/jsx-runtime";
+var variantStyles = {
+  rectangular: { borderRadius: `${tokens27.radius.xxs}px` },
+  rounded: { borderRadius: `${tokens27.radius.md}px` },
+  circular: { borderRadius: "50%" }
+};
+function MitumbaSkeleton({
+  width,
+  height,
+  borderRadius,
+  variant = "rounded"
+}) {
+  return /* @__PURE__ */ jsx28(
+    Box22,
+    {
+      sx: {
+        width,
+        height,
+        position: "relative",
+        overflow: "hidden",
+        borderRadius: borderRadius ? `${borderRadius}px` : variantStyles[variant].borderRadius,
+        backgroundColor: tokens27.colors.background,
+        // Base block
+        "&::before": {
+          content: '""',
+          position: "absolute",
+          inset: 0,
+          backgroundColor: tokens27.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
+import { jsx as jsx29, jsxs as jsxs17 } from "react/jsx-runtime";
+function ListingCardSkeleton() {
+  return /* @__PURE__ */ jsxs17(
+    Box23,
+    {
+      sx: {
+        width: "100%",
+        backgroundColor: tokens28.colors.surface,
+        borderRadius: `${tokens28.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__ */ jsx29(Box23, { sx: { position: "relative", width: "100%", pt: "100%" }, children: /* @__PURE__ */ jsx29(
+          MitumbaSkeleton,
+          {
+            variant: "rectangular",
+            sx: { position: "absolute", inset: 0, height: "100%", width: "100%" }
+          }
+        ) }),
+        /* @__PURE__ */ jsxs17(Box23, { sx: { p: 2.5 }, children: [
+          /* @__PURE__ */ jsx29(
+            MitumbaSkeleton,
+            {
+              variant: "rectangular",
+              width: "80%",
+              height: 20,
+              sx: { mb: 1, borderRadius: 1 }
+            }
+          ),
+          /* @__PURE__ */ jsx29(
+            MitumbaSkeleton,
+            {
+              variant: "rectangular",
+              width: "40%",
+              height: 12,
+              sx: { mb: 3, borderRadius: 1 }
+            }
+          ),
+          /* @__PURE__ */ jsxs17(Box23, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+            /* @__PURE__ */ jsx29(
+              MitumbaSkeleton,
+              {
+                variant: "rounded",
+                width: 100,
+                height: 32,
+                sx: { borderRadius: 100 }
+              }
+            ),
+            /* @__PURE__ */ jsx29(
+              MitumbaSkeleton,
+              {
+                variant: "rounded",
+                width: 80,
+                height: 32,
+                sx: { borderRadius: 100 }
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/listing/ListingGrid/ListingGrid.tsx
+import Box24 from "@mui/material/Box";
+import { jsx as jsx30 } from "react/jsx-runtime";
+function ListingGrid({
+  children,
+  columns = { xs: 2, sm: 2, md: 3, lg: 4 },
+  gap,
+  isLoading = false,
+  sx
+}) {
+  if (isLoading) {
+    return /* @__PURE__ */ jsx30(MitumbaGrid, { columns, gap, sx, children: [...Array(8)].map((_, i) => /* @__PURE__ */ jsx30(Box24, { sx: { width: "100%", pt: "100%", position: "relative" }, children: /* @__PURE__ */ jsx30(
+      MitumbaSkeleton,
+      {
+        variant: "rounded",
+        sx: { position: "absolute", inset: 0, height: "100%", width: "100%", borderRadius: 4 }
+      }
+    ) }, `listing-skeleton-${i + 1}`)) });
+  }
+  return /* @__PURE__ */ jsx30(Box24, { sx: { width: "100%" }, children: /* @__PURE__ */ jsx30(
+    MitumbaGrid,
+    {
+      columns,
+      gap,
+      sx,
+      children
+    }
+  ) });
+}
+
+// src/components/listing/ListingImageGallery/ListingImageGallery.tsx
+import { useState as useState6, useCallback as useCallback2, useEffect as useEffect2 } from "react";
+import Box25 from "@mui/material/Box";
+import { tokens as tokens29 } from "@mitumba/tokens";
+import { jsx as jsx31, jsxs as jsxs18 } from "react/jsx-runtime";
+function ListingImageGallery({ images, title }) {
+  const [activeIndex, setActiveIndex] = useState6(0);
+  const goTo = useCallback2(
+    (index) => {
+      const clamped = Math.max(0, Math.min(images.length - 1, index));
+      setActiveIndex(clamped);
+    },
+    [images.length]
+  );
+  const handleKeyDown = useCallback2(
+    (e) => {
+      if (e.key === "ArrowLeft") {
+        goTo(activeIndex - 1);
+      } else if (e.key === "ArrowRight") {
+        goTo(activeIndex + 1);
+      }
+    },
+    [activeIndex, goTo]
+  );
+  useEffect2(() => {
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [handleKeyDown]);
+  if (images.length === 0) {
+    return /* @__PURE__ */ jsx31(
+      Box25,
+      {
+        sx: {
+          alignItems: "center",
+          aspectRatio: "1 / 1",
+          backgroundColor: tokens29.colors.background,
+          borderRadius: `${tokens29.radius.lg}px`,
+          color: tokens29.colors.textSecondary,
+          display: "flex",
+          fontSize: tokens29.typography.fontSizes.base,
+          justifyContent: "center",
+          width: "100%",
+          border: `1px dashed ${tokens29.colors.divider}`
+        },
+        children: "No images available"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs18(
+    Box25,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        gap: tokens29.spacing.base,
+        width: "100%"
+      },
+      children: [
+        /* @__PURE__ */ jsx31(
+          Box25,
+          {
+            sx: {
+              aspectRatio: "1 / 1",
+              borderRadius: `${tokens29.radius.lg}px`,
+              overflow: "hidden",
+              position: "relative",
+              width: "100%",
+              backgroundColor: tokens29.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__ */ jsx31(
+              Box25,
+              {
+                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__ */ jsx31(
+          Box25,
+          {
+            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__ */ jsx31(
+              Box25,
+              {
+                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 ${tokens29.colors.green}` : `2px solid transparent`,
+                  borderRadius: `${tokens29.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: tokens29.shadows.focus
+                  }
+                },
+                "aria-label": `View image ${index + 1} of ${images.length}`,
+                "aria-pressed": index === activeIndex,
+                children: /* @__PURE__ */ jsx31(
+                  Box25,
+                  {
+                    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
+import { jsx as jsx32 } from "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__ */ jsx32(
+    MitumbaChip,
+    {
+      label: showLabel ? `${grade} \u2022 ${config.label}` : grade,
+      status: config.status,
+      variant: "solid",
+      size: "small",
+      rounding: "pill"
+    }
+  );
+}
+
+// src/components/commerce/PriceTag/PriceTag.tsx
+import Typography16 from "@mui/material/Typography";
+import { tokens as tokens30 } from "@mitumba/tokens";
+import { jsx as jsx33 } from "react/jsx-runtime";
+function PriceTag({ priceKes, size = "medium", color = "default", strikethrough = false }) {
+  const formattedNumber = new Intl.NumberFormat("en-KE").format(priceKes);
+  const formatted = `KES ${formattedNumber}`;
+  const sizeStyles = {
+    small: {
+      fontSize: tokens30.typography.fontSizes.sm,
+      fontWeight: tokens30.typography.fontWeights.semibold
+    },
+    medium: {
+      fontSize: tokens30.typography.fontSizes.base,
+      fontWeight: tokens30.typography.fontWeights.bold
+    },
+    large: {
+      fontSize: tokens30.typography.fontSizes.xl,
+      fontWeight: tokens30.typography.fontWeights.extrabold
+    }
+  };
+  const colorMap = {
+    green: tokens30.colors.green,
+    earth: tokens30.colors.earth,
+    default: tokens30.colors.textPrimary
+  };
+  return /* @__PURE__ */ jsx33(
+    Typography16,
+    {
+      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
+import LocalShippingIcon from "@mui/icons-material/LocalShipping";
+import { jsx as jsx34 } from "react/jsx-runtime";
+function DeliveryBadge({ type, estimatedDays }) {
+  const statusMap = {
+    "same-city": "active",
+    "intercity": "common"
+  };
+  return /* @__PURE__ */ jsx34(
+    MitumbaChip,
+    {
+      label: estimatedDays || type,
+      status: statusMap[type],
+      variant: "soft",
+      size: "small",
+      icon: /* @__PURE__ */ jsx34(LocalShippingIcon, {})
+    }
+  );
+}
+
+// src/components/commerce/CartItem/CartItem.tsx
+import Box26 from "@mui/material/Box";
+import Typography17 from "@mui/material/Typography";
+import IconButton5 from "@mui/material/IconButton";
+import CloseIcon2 from "@mui/icons-material/Close";
+import Stack4 from "@mui/material/Stack";
+import { tokens as tokens31 } from "@mitumba/tokens";
+import { jsx as jsx35, jsxs as jsxs19 } from "react/jsx-runtime";
+function CartItem({
+  imageUrl,
+  title,
+  subtitle,
+  status = "IN STOCK",
+  priceKes,
+  size = "M",
+  quantity = 1,
+  onRemove,
+  onQuantityChange,
+  onSizeChange,
+  sx
+}) {
+  return /* @__PURE__ */ jsxs19(
+    Box26,
+    {
+      sx: [
+        {
+          display: "flex",
+          width: "100%",
+          backgroundColor: tokens31.colors.surface,
+          borderRadius: `${tokens31.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 ${tokens31.colors.divider}`,
+          "&:hover": {
+            transform: "translateY(-4px)",
+            boxShadow: tokens31.shadows.deep
+          }
+        },
+        ...Array.isArray(sx) ? sx : [sx]
+      ],
+      children: [
+        /* @__PURE__ */ jsx35(
+          Box26,
+          {
+            sx: {
+              width: { xs: 80, sm: 120, md: 140 },
+              height: { xs: 80, sm: 120, md: 140 },
+              borderRadius: `${tokens31.radius.md}px`,
+              overflow: "hidden",
+              backgroundColor: tokens31.colors.background,
+              flexShrink: 0
+            },
+            children: /* @__PURE__ */ jsx35(
+              Box26,
+              {
+                component: "img",
+                src: imageUrl,
+                alt: title,
+                sx: { width: "100%", height: "100%", objectFit: "cover" }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs19(
+          Box26,
+          {
+            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__ */ jsxs19(Box26, { sx: { flex: 1.5 }, children: [
+                /* @__PURE__ */ jsx35(
+                  Typography17,
+                  {
+                    sx: {
+                      fontSize: tokens31.typography.fontSizes.lg,
+                      fontWeight: 900,
+                      color: tokens31.colors.textPrimary,
+                      fontFamily: tokens31.typography.fontFamily,
+                      textTransform: "uppercase",
+                      lineHeight: 1.1,
+                      mb: 0.5
+                    },
+                    children: title
+                  }
+                ),
+                subtitle && /* @__PURE__ */ jsx35(
+                  Typography17,
+                  {
+                    variant: "caption",
+                    sx: {
+                      display: "block",
+                      color: tokens31.colors.textSecondary,
+                      fontWeight: 700,
+                      textTransform: "uppercase",
+                      fontSize: 10
+                    },
+                    children: subtitle
+                  }
+                ),
+                /* @__PURE__ */ jsx35(
+                  Typography17,
+                  {
+                    variant: "caption",
+                    sx: {
+                      display: "block",
+                      color: tokens31.colors.green,
+                      fontWeight: 800,
+                      fontSize: 9,
+                      mt: 1,
+                      textTransform: "uppercase",
+                      letterSpacing: "0.05em"
+                    },
+                    children: status
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs19(Stack4, { direction: "row", spacing: { xs: 2, sm: 4, md: 6 }, alignItems: "center", sx: { width: { xs: "100%", lg: "auto" } }, children: [
+                /* @__PURE__ */ jsxs19(Box26, { sx: { width: 80 }, children: [
+                  /* @__PURE__ */ jsx35(Typography17, { variant: "caption", sx: { display: "block", mb: 1.5, fontWeight: 700, color: tokens31.colors.textDisabled, fontSize: 10 }, children: "SIZE" }),
+                  /* @__PURE__ */ jsx35(
+                    MitumbaSelect,
+                    {
+                      value: size,
+                      size: "small",
+                      onChange: (val) => onSizeChange?.(val),
+                      options: [{ label: size, value: size }],
+                      rounding: "rounded",
+                      sx: { minWidth: 60 }
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs19(Box26, { sx: { width: 80 }, children: [
+                  /* @__PURE__ */ jsx35(Typography17, { variant: "caption", sx: { display: "block", mb: 1.5, fontWeight: 700, color: tokens31.colors.textDisabled, fontSize: 10 }, children: "QUANTITY" }),
+                  /* @__PURE__ */ jsx35(
+                    MitumbaSelect,
+                    {
+                      value: quantity,
+                      size: "small",
+                      onChange: (val) => onQuantityChange?.(Number(val)),
+                      options: [{ label: `${quantity}`, value: quantity }],
+                      rounding: "rounded",
+                      sx: { minWidth: 60 }
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs19(Box26, { sx: { textAlign: "right", minWidth: 100 }, children: [
+                  /* @__PURE__ */ jsx35(Typography17, { variant: "caption", sx: { display: "block", mb: 1.5, fontWeight: 700, color: tokens31.colors.textDisabled, fontSize: 10 }, children: "PRICE" }),
+                  /* @__PURE__ */ jsxs19(Typography17, { sx: { fontWeight: 900, color: tokens31.colors.textPrimary, fontSize: tokens31.typography.fontSizes.base, fontFamily: tokens31.typography.fontFamily }, children: [
+                    "KES ",
+                    priceKes.toLocaleString()
+                  ] })
+                ] })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx35(
+          IconButton5,
+          {
+            onClick: onRemove,
+            sx: {
+              position: "absolute",
+              top: 8,
+              right: 8,
+              color: tokens31.colors.textDisabled,
+              "&:hover": {
+                color: tokens31.colors.error,
+                backgroundColor: tokens31.colors.errorLight,
+                transform: "rotate(90deg)"
+              },
+              transition: "all 0.3s ease"
+            },
+            size: "small",
+            children: /* @__PURE__ */ jsx35(CloseIcon2, { sx: { fontSize: 16 } })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/commerce/OrderStatusTimeline/OrderStatusTimeline.tsx
+import Box27 from "@mui/material/Box";
+import Typography18 from "@mui/material/Typography";
+import CheckCircleOutlinedIcon from "@mui/icons-material/CheckCircleOutlined";
+import RadioButtonUncheckedOutlinedIcon from "@mui/icons-material/RadioButtonUncheckedOutlined";
+import { tokens as tokens32 } from "@mitumba/tokens";
+import { jsx as jsx36, jsxs as jsxs20 } from "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__ */ jsxs20(
+    Box27,
+    {
+      sx: {
+        p: tokens32.spacing.base,
+        borderRadius: tokens32.radius.lg,
+        bgcolor: tokens32.colors.surface,
+        boxShadow: tokens32.shadows.card,
+        border: `1px solid ${tokens32.colors.divider}`
+      },
+      children: [
+        /* @__PURE__ */ jsxs20(Box27, { sx: { display: "flex", alignItems: "center", gap: tokens32.spacing.sm, mb: tokens32.spacing.base }, children: [
+          /* @__PURE__ */ jsx36(
+            Typography18,
+            {
+              sx: {
+                fontWeight: tokens32.typography.fontWeights.bold,
+                fontSize: tokens32.typography.fontSizes.md,
+                color: tokens32.colors.textPrimary,
+                fontFamily: tokens32.typography.fontFamily
+              },
+              children: "Order Tracking"
+            }
+          ),
+          /* @__PURE__ */ jsx36(
+            Box27,
+            {
+              sx: {
+                px: tokens32.spacing.sm,
+                py: "2px",
+                borderRadius: tokens32.radius.sm,
+                bgcolor: tokens32.colors.greenLight,
+                color: tokens32.colors.greenDark,
+                fontSize: 10,
+                fontWeight: tokens32.typography.fontWeights.extrabold,
+                textTransform: "uppercase",
+                letterSpacing: tokens32.typography.letterSpacings.wide
+              },
+              children: ORDER_STATUS_LABELS[currentStatus]
+            }
+          )
+        ] }),
+        currentNote && /* @__PURE__ */ jsx36(
+          Box27,
+          {
+            sx: {
+              p: tokens32.spacing.sm,
+              borderRadius: tokens32.radius.sm,
+              bgcolor: tokens32.colors.background,
+              borderLeft: `3px solid ${tokens32.colors.info}`,
+              mb: tokens32.spacing.lg
+            },
+            children: /* @__PURE__ */ jsxs20(
+              Typography18,
+              {
+                sx: {
+                  color: tokens32.colors.textPrimary,
+                  fontSize: tokens32.typography.fontSizes.sm,
+                  fontFamily: tokens32.typography.fontFamily,
+                  fontStyle: "italic"
+                },
+                children: [
+                  '"',
+                  currentNote,
+                  '"'
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx36(Box27, { 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__ */ jsxs20(
+            Box27,
+            {
+              component: "li",
+              sx: {
+                display: "flex",
+                alignItems: "flex-start",
+                gap: tokens32.spacing.base,
+                position: "relative"
+              },
+              children: [
+                /* @__PURE__ */ jsxs20(
+                  Box27,
+                  {
+                    sx: {
+                      display: "flex",
+                      flexDirection: "column",
+                      alignItems: "center",
+                      minWidth: "24px"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx36(
+                        Box27,
+                        {
+                          sx: {
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            width: "24px",
+                            height: "24px",
+                            zIndex: 1,
+                            backgroundColor: tokens32.colors.surface
+                          },
+                          children: isCompleted ? /* @__PURE__ */ jsx36(
+                            CheckCircleOutlinedIcon,
+                            {
+                              sx: {
+                                fontSize: 20,
+                                color: isCurrent ? tokens32.colors.green : tokens32.colors.textDisabled
+                              }
+                            }
+                          ) : /* @__PURE__ */ jsx36(
+                            RadioButtonUncheckedOutlinedIcon,
+                            {
+                              sx: {
+                                fontSize: 18,
+                                color: tokens32.colors.divider
+                              }
+                            }
+                          )
+                        }
+                      ),
+                      index < ORDER_STATUS_ORDER.length - 1 && /* @__PURE__ */ jsx36(
+                        Box27,
+                        {
+                          sx: {
+                            width: "2px",
+                            flex: 1,
+                            minHeight: tokens32.spacing.lg,
+                            bgcolor: index < currentIndex ? tokens32.colors.green : tokens32.colors.divider,
+                            marginBlock: "2px"
+                          }
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs20(Box27, { sx: { pt: "2px", pb: tokens32.spacing.lg }, children: [
+                  /* @__PURE__ */ jsx36(
+                    Typography18,
+                    {
+                      sx: {
+                        fontWeight: isCurrent ? tokens32.typography.fontWeights.bold : tokens32.typography.fontWeights.medium,
+                        fontSize: tokens32.typography.fontSizes.sm,
+                        fontFamily: tokens32.typography.fontFamily,
+                        color: isCompleted ? tokens32.colors.textPrimary : tokens32.colors.textDisabled,
+                        lineHeight: 1
+                      },
+                      children: ORDER_STATUS_LABELS[status]
+                    }
+                  ),
+                  latestEvent && /* @__PURE__ */ jsx36(
+                    Typography18,
+                    {
+                      sx: {
+                        color: tokens32.colors.textSecondary,
+                        fontSize: 10,
+                        fontFamily: tokens32.typography.fontFamily,
+                        mt: "4px"
+                      },
+                      children: latestEvent.timestamp
+                    }
+                  )
+                ] })
+              ]
+            },
+            status
+          );
+        }) })
+      ]
+    }
+  );
+}
+
+// src/components/commerce/EscrowStatusBanner/EscrowStatusBanner.tsx
+import Box28 from "@mui/material/Box";
+import Typography19 from "@mui/material/Typography";
+import ShieldOutlinedIcon from "@mui/icons-material/ShieldOutlined";
+import LocalShippingOutlinedIcon from "@mui/icons-material/LocalShippingOutlined";
+import AccessTimeOutlinedIcon from "@mui/icons-material/AccessTimeOutlined";
+import CheckCircleOutlinedIcon2 from "@mui/icons-material/CheckCircleOutlined";
+import WarningAmberOutlinedIcon from "@mui/icons-material/WarningAmberOutlined";
+import { tokens as tokens33 } from "@mitumba/tokens";
+import { jsx as jsx37, jsxs as jsxs21 } from "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: ShieldOutlinedIcon,
+    color: tokens33.colors.info,
+    bg: `${tokens33.colors.info}14`
+  },
+  SHIPPED: {
+    label: "Item Shipped",
+    message: "Your item is on the way. Confirm delivery once received.",
+    icon: LocalShippingOutlinedIcon,
+    color: tokens33.colors.green,
+    bg: `${tokens33.colors.green}14`
+  },
+  TIMEOUT_WARNING: {
+    label: "Action Required",
+    message: "Confirm delivery or raise a dispute before time runs out.",
+    icon: AccessTimeOutlinedIcon,
+    color: tokens33.colors.warning,
+    bg: `${tokens33.colors.warning}14`
+  },
+  RELEASED: {
+    label: "Payment Released",
+    message: "Funds have been released to the seller. Transaction complete.",
+    icon: CheckCircleOutlinedIcon2,
+    color: tokens33.colors.success,
+    bg: `${tokens33.colors.success}14`
+  },
+  REFUNDED: {
+    label: "Refunded",
+    message: "Your payment has been refunded to your original payment method.",
+    icon: WarningAmberOutlinedIcon,
+    color: tokens33.colors.error,
+    bg: `${tokens33.colors.error}14`
+  }
+};
+function EscrowStatusBanner({
+  status,
+  hoursRemaining,
+  onConfirmDelivery,
+  onRaiseDispute
+}) {
+  const config = STATUS_CONFIG[status];
+  const Icon = config.icon;
+  return /* @__PURE__ */ jsxs21(
+    Box28,
+    {
+      sx: {
+        p: tokens33.spacing.base,
+        borderRadius: tokens33.radius.lg,
+        bgcolor: config.bg,
+        border: `1px solid ${config.color}40`,
+        boxShadow: tokens33.shadows.card
+      },
+      role: "status",
+      "aria-label": `Escrow status: ${config.label}`,
+      children: [
+        /* @__PURE__ */ jsxs21(Box28, { sx: { display: "flex", alignItems: "center", gap: tokens33.spacing.base }, children: [
+          /* @__PURE__ */ jsx37(
+            Box28,
+            {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: 44,
+                height: 44,
+                borderRadius: tokens33.radius.md,
+                bgcolor: config.color,
+                color: tokens33.colors.white,
+                flexShrink: 0,
+                boxShadow: tokens33.shadows.card
+              },
+              children: /* @__PURE__ */ jsx37(Icon, { sx: { fontSize: 24 } })
+            }
+          ),
+          /* @__PURE__ */ jsxs21(Box28, { sx: { flex: 1 }, children: [
+            /* @__PURE__ */ jsx37(
+              Typography19,
+              {
+                sx: {
+                  fontWeight: tokens33.typography.fontWeights.bold,
+                  fontSize: tokens33.typography.fontSizes.base,
+                  color: config.color,
+                  lineHeight: 1.2,
+                  fontFamily: tokens33.typography.fontFamily
+                },
+                children: config.label
+              }
+            ),
+            /* @__PURE__ */ jsx37(
+              Typography19,
+              {
+                sx: {
+                  fontSize: tokens33.typography.fontSizes.sm,
+                  color: tokens33.colors.textPrimary,
+                  mt: "2px",
+                  fontFamily: tokens33.typography.fontFamily,
+                  opacity: 0.8
+                },
+                children: config.message
+              }
+            )
+          ] })
+        ] }),
+        status === "TIMEOUT_WARNING" && hoursRemaining !== void 0 && /* @__PURE__ */ jsxs21(
+          Box28,
+          {
+            sx: {
+              mt: tokens33.spacing.base,
+              p: tokens33.spacing.sm,
+              borderRadius: tokens33.radius.sm,
+              bgcolor: tokens33.colors.white,
+              display: "flex",
+              alignItems: "center",
+              gap: tokens33.spacing.sm,
+              border: `1px solid ${tokens33.colors.warning}40`
+            },
+            children: [
+              /* @__PURE__ */ jsx37(AccessTimeOutlinedIcon, { sx: { color: tokens33.colors.warning, fontSize: 18 } }),
+              /* @__PURE__ */ jsxs21(
+                Typography19,
+                {
+                  sx: {
+                    fontSize: tokens33.typography.fontSizes.sm,
+                    fontWeight: tokens33.typography.fontWeights.bold,
+                    color: tokens33.colors.warning
+                  },
+                  children: [
+                    hoursRemaining,
+                    " hour",
+                    hoursRemaining === 1 ? "" : "s",
+                    " remaining"
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        (onConfirmDelivery || onRaiseDispute) && /* @__PURE__ */ jsxs21(Box28, { sx: { display: "flex", gap: tokens33.spacing.sm, mt: tokens33.spacing.base }, children: [
+          onConfirmDelivery && /* @__PURE__ */ jsx37(
+            MitumbaPrimaryButton,
+            {
+              label: "Confirm Delivery",
+              onClick: onConfirmDelivery,
+              size: "medium",
+              variant: "primary"
+            }
+          ),
+          onRaiseDispute && /* @__PURE__ */ jsx37(
+            MitumbaPrimaryButton,
+            {
+              label: "Raise Dispute",
+              onClick: onRaiseDispute,
+              size: "medium",
+              variant: "ghost",
+              sx: {
+                color: tokens33.colors.error,
+                borderColor: tokens33.colors.error,
+                "&:hover": {
+                  bgcolor: tokens33.colors.errorLight,
+                  borderColor: tokens33.colors.errorDark
+                }
+              }
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/vazi/VAZIOutfitCard/VAZIOutfitCard.tsx
+import Box29 from "@mui/material/Box";
+import Card from "@mui/material/Card";
+import CardContent from "@mui/material/CardContent";
+import Typography20 from "@mui/material/Typography";
+import { tokens as tokens34 } from "@mitumba/tokens";
+import { useCallback as useCallback3 } from "react";
+import { jsx as jsx38, jsxs as jsxs22 } from "react/jsx-runtime";
+function VAZIOutfitCard({
+  outfitName,
+  items,
+  totalPriceKes,
+  sellersCount,
+  isMultiCity = false,
+  onTap,
+  onBuyAll
+}) {
+  const handleKeyDown = useCallback3(
+    (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        onTap?.();
+      }
+    },
+    [onTap]
+  );
+  return /* @__PURE__ */ jsxs22(
+    Card,
+    {
+      onClick: onTap,
+      onKeyDown: handleKeyDown,
+      role: "button",
+      tabIndex: onTap ? 0 : -1,
+      sx: {
+        borderRadius: tokens34.radius.lg,
+        boxShadow: tokens34.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: tokens34.colors.surface,
+        border: `1px solid ${tokens34.colors.divider}`,
+        "&:hover": onTap ? {
+          transform: "translateY(-4px)",
+          boxShadow: tokens34.shadows.elevated,
+          borderColor: tokens34.colors.earthLight
+        } : void 0,
+        "&:focus-visible": {
+          outline: `2px solid ${tokens34.colors.earthLight}`,
+          boxShadow: tokens34.shadows.focus
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxs22(
+          Box29,
+          {
+            sx: {
+              alignItems: "center",
+              display: "flex",
+              gap: tokens34.spacing.sm,
+              paddingInline: tokens34.spacing.base,
+              paddingBlock: tokens34.spacing.base,
+              borderBottom: `1px solid ${tokens34.colors.background}`
+            },
+            children: [
+              /* @__PURE__ */ jsx38(VAZIBadge, { size: "small" }),
+              /* @__PURE__ */ jsx38(
+                Typography20,
+                {
+                  sx: {
+                    color: tokens34.colors.textPrimary,
+                    flex: 1,
+                    fontSize: tokens34.typography.fontSizes.base,
+                    fontWeight: tokens34.typography.fontWeights.bold,
+                    lineHeight: tokens34.typography.lineHeights.snug,
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap"
+                  },
+                  children: outfitName
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx38(
+          Box29,
+          {
+            sx: {
+              display: "flex",
+              gap: tokens34.spacing.sm,
+              overflowX: "auto",
+              padding: tokens34.spacing.base,
+              backgroundColor: tokens34.colors.background,
+              scrollbarWidth: "none",
+              msOverflowStyle: "none",
+              "&::-webkit-scrollbar": {
+                display: "none"
+              }
+            },
+            children: items.map((item) => /* @__PURE__ */ jsxs22(
+              Box29,
+              {
+                sx: {
+                  flexShrink: 0,
+                  width: "88px"
+                },
+                children: [
+                  /* @__PURE__ */ jsx38(
+                    Box29,
+                    {
+                      sx: {
+                        aspectRatio: "3 / 4",
+                        borderRadius: tokens34.radius.sm,
+                        overflow: "hidden",
+                        width: "100%",
+                        backgroundColor: tokens34.colors.surface,
+                        border: `1px solid ${tokens34.colors.divider}`
+                      },
+                      children: /* @__PURE__ */ jsx38(
+                        Box29,
+                        {
+                          component: "img",
+                          src: item.imageUrl,
+                          alt: `${item.garmentType} \u2014 ${item.sellerName}`,
+                          loading: "lazy",
+                          sx: {
+                            display: "block",
+                            height: "100%",
+                            objectFit: "cover",
+                            width: "100%"
+                          }
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx38(
+                    Typography20,
+                    {
+                      sx: {
+                        color: tokens34.colors.textSecondary,
+                        fontSize: 10,
+                        fontWeight: tokens34.typography.fontWeights.semibold,
+                        textTransform: "uppercase",
+                        letterSpacing: tokens34.typography.letterSpacings.wide,
+                        marginTop: tokens34.spacing.xs,
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap",
+                        textAlign: "center"
+                      },
+                      children: item.sellerName
+                    }
+                  )
+                ]
+              },
+              item.listingId
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsxs22(
+          CardContent,
+          {
+            sx: {
+              display: "flex",
+              flexDirection: "column",
+              gap: tokens34.spacing.sm,
+              padding: tokens34.spacing.base,
+              "&:last-child": {
+                paddingBottom: tokens34.spacing.base
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsxs22(
+                Box29,
+                {
+                  sx: {
+                    alignItems: "center",
+                    display: "flex",
+                    gap: tokens34.spacing.sm,
+                    justifyContent: "space-between"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx38(PriceTag, { priceKes: totalPriceKes, size: "large", color: "earth" }),
+                    onBuyAll && /* @__PURE__ */ jsx38(Box29, { sx: { flexShrink: 0 }, children: /* @__PURE__ */ jsx38(
+                      MitumbaPrimaryButton,
+                      {
+                        label: "Buy all",
+                        variant: "earth",
+                        size: "small",
+                        fullWidth: false,
+                        onClick: (e) => {
+                          if (e && e.stopPropagation) {
+                            e.stopPropagation();
+                          }
+                          onBuyAll();
+                        }
+                      }
+                    ) })
+                  ]
+                }
+              ),
+              sellersCount > 1 && /* @__PURE__ */ jsxs22(
+                Box29,
+                {
+                  sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: tokens34.spacing.xs,
+                    mt: tokens34.spacing.xs
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs22(
+                      Typography20,
+                      {
+                        sx: {
+                          color: tokens34.colors.textSecondary,
+                          fontSize: tokens34.typography.fontSizes.sm,
+                          lineHeight: 1
+                        },
+                        children: [
+                          "Ships from ",
+                          sellersCount,
+                          " sellers"
+                        ]
+                      }
+                    ),
+                    isMultiCity && /* @__PURE__ */ jsx38(
+                      Box29,
+                      {
+                        component: "span",
+                        sx: {
+                          fontSize: tokens34.typography.fontSizes.xs,
+                          color: tokens34.colors.textDisabled
+                        },
+                        children: "\u2022"
+                      }
+                    ),
+                    isMultiCity && /* @__PURE__ */ jsx38(
+                      Typography20,
+                      {
+                        sx: {
+                          color: tokens34.colors.earth,
+                          fontSize: tokens34.typography.fontSizes.xs,
+                          fontWeight: tokens34.typography.fontWeights.bold,
+                          textTransform: "uppercase",
+                          letterSpacing: tokens34.typography.letterSpacings.wide,
+                          lineHeight: 1
+                        },
+                        children: "Multi-city"
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/vazi/VAZIOutfitCardSkeleton/VAZIOutfitCardSkeleton.tsx
+import Box30 from "@mui/material/Box";
+import Skeleton from "@mui/material/Skeleton";
+import { tokens as tokens35 } from "@mitumba/tokens";
+import { jsx as jsx39, jsxs as jsxs23 } from "react/jsx-runtime";
+var SKELETON_IMAGE_KEYS = ["image-1", "image-2", "image-3", "image-4"];
+function VAZIOutfitCardSkeleton() {
+  return /* @__PURE__ */ jsxs23(
+    Box30,
+    {
+      sx: {
+        borderRadius: tokens35.radius.lg,
+        boxShadow: tokens35.shadows.card,
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden",
+        width: "100%"
+      },
+      children: [
+        /* @__PURE__ */ jsxs23(
+          Box30,
+          {
+            sx: {
+              alignItems: "center",
+              display: "flex",
+              gap: tokens35.spacing.sm,
+              paddingInline: tokens35.spacing.base,
+              paddingBlock: tokens35.spacing.base
+            },
+            children: [
+              /* @__PURE__ */ jsx39(
+                Skeleton,
+                {
+                  "aria-label": "Loading VAZI label",
+                  variant: "rounded",
+                  sx: {
+                    borderRadius: tokens35.radius.sm,
+                    height: tokens35.spacing.lg,
+                    width: 48
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx39(
+                Skeleton,
+                {
+                  "aria-label": "Loading outfit name",
+                  variant: "text",
+                  sx: {
+                    flex: 1,
+                    fontSize: tokens35.typography.fontSizes.base
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx39(
+          Box30,
+          {
+            sx: {
+              display: "flex",
+              gap: tokens35.spacing.sm,
+              overflowX: "auto",
+              paddingInline: tokens35.spacing.base,
+              paddingBottom: tokens35.spacing.base,
+              scrollbarWidth: "none",
+              msOverflowStyle: "none",
+              "&::-webkit-scrollbar": {
+                display: "none"
+              }
+            },
+            children: SKELETON_IMAGE_KEYS.map((imgKey) => /* @__PURE__ */ jsxs23(
+              Box30,
+              {
+                sx: {
+                  flexShrink: 0,
+                  width: `${3 / 4 * 100}px`,
+                  minWidth: "88px"
+                },
+                children: [
+                  /* @__PURE__ */ jsx39(
+                    Skeleton,
+                    {
+                      "aria-label": `Loading item image ${imgKey.split("-")[1]}`,
+                      variant: "rounded",
+                      sx: {
+                        aspectRatio: "3 / 4",
+                        borderRadius: tokens35.radius.md,
+                        width: "100%"
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx39(
+                    Skeleton,
+                    {
+                      "aria-label": `Loading seller name ${imgKey.split("-")[1]}`,
+                      variant: "text",
+                      sx: {
+                        fontSize: tokens35.typography.fontSizes.xs,
+                        marginTop: tokens35.spacing.xs,
+                        width: "80%"
+                      }
+                    }
+                  )
+                ]
+              },
+              imgKey
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsxs23(
+          Box30,
+          {
+            sx: {
+              display: "flex",
+              flexDirection: "column",
+              gap: tokens35.spacing.sm,
+              paddingInline: tokens35.spacing.base,
+              paddingBlock: tokens35.spacing.base
+            },
+            children: [
+              /* @__PURE__ */ jsxs23(
+                Box30,
+                {
+                  sx: {
+                    alignItems: "center",
+                    display: "flex",
+                    gap: tokens35.spacing.sm,
+                    justifyContent: "space-between"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx39(
+                      Skeleton,
+                      {
+                        "aria-label": "Loading total price",
+                        variant: "text",
+                        sx: {
+                          fontSize: tokens35.typography.fontSizes.lg,
+                          width: "40%"
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx39(
+                      Skeleton,
+                      {
+                        "aria-label": "Loading buy button",
+                        variant: "rounded",
+                        sx: {
+                          borderRadius: tokens35.radius.md,
+                          height: "36px",
+                          width: 100
+                        }
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx39(
+                Skeleton,
+                {
+                  "aria-label": "Loading seller info",
+                  variant: "text",
+                  sx: {
+                    fontSize: tokens35.typography.fontSizes.sm,
+                    width: "60%"
+                  }
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/vazi/VAZIFeedSection/VAZIFeedSection.tsx
+import Box31 from "@mui/material/Box";
+import { tokens as tokens36 } from "@mitumba/tokens";
+import { jsx as jsx40, jsxs as jsxs24 } from "react/jsx-runtime";
+var renderOutfitCards = (outfits) => outfits.map((outfit) => /* @__PURE__ */ jsx40(
+  Box31,
+  {
+    sx: {
+      flexShrink: 0,
+      width: { xs: "82%", md: "100%" },
+      maxWidth: { xs: "340px", md: "none" }
+    },
+    children: /* @__PURE__ */ jsx40(
+      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__ */ jsx40(
+  Box31,
+  {
+    sx: {
+      flexShrink: 0,
+      width: { xs: "82%", md: "100%" },
+      maxWidth: { xs: "340px", md: "none" }
+    },
+    children: /* @__PURE__ */ jsx40(VAZIOutfitCardSkeleton, {})
+  },
+  `skeleton-${skeletonIdx}`
+));
+function VAZIFeedSection({ outfits, loading = false, onSeeAll }) {
+  return /* @__PURE__ */ jsxs24(
+    Box31,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        gap: tokens36.spacing.base,
+        width: "100%"
+      },
+      children: [
+        /* @__PURE__ */ jsxs24(
+          Box31,
+          {
+            sx: {
+              alignItems: "center",
+              display: "flex",
+              justifyContent: "space-between",
+              paddingInline: { xs: tokens36.spacing.base, md: 0 }
+            },
+            children: [
+              /* @__PURE__ */ jsx40(
+                Box31,
+                {
+                  component: "h2",
+                  sx: {
+                    color: tokens36.colors.textPrimary,
+                    fontFamily: tokens36.typography.fontFamily,
+                    fontSize: tokens36.typography.fontSizes.xl,
+                    fontWeight: tokens36.typography.fontWeights.bold,
+                    lineHeight: tokens36.typography.lineHeights.snug,
+                    margin: 0
+                  },
+                  children: "VAZI Picks"
+                }
+              ),
+              onSeeAll && /* @__PURE__ */ jsx40(
+                Box31,
+                {
+                  component: "button",
+                  onClick: onSeeAll,
+                  sx: {
+                    backgroundColor: "transparent",
+                    border: "none",
+                    color: tokens36.colors.earth,
+                    cursor: "pointer",
+                    fontFamily: tokens36.typography.fontFamily,
+                    fontSize: tokens36.typography.fontSizes.base,
+                    fontWeight: tokens36.typography.fontWeights.semibold,
+                    lineHeight: tokens36.typography.lineHeights.normal,
+                    padding: 0,
+                    textDecoration: "none",
+                    transition: "color 200ms ease",
+                    whiteSpace: "nowrap",
+                    "&:hover": {
+                      color: tokens36.colors.earthDark,
+                      textDecoration: "underline"
+                    },
+                    "&:focus-visible": {
+                      outline: `${tokens36.spacing.xs}px solid transparent`,
+                      boxShadow: tokens36.shadows.focus,
+                      borderRadius: tokens36.radius.sm
+                    }
+                  },
+                  children: "See all"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx40(
+          Box31,
+          {
+            sx: {
+              display: { xs: "flex", md: "grid" },
+              gridTemplateColumns: { md: "repeat(3, 1fr)" },
+              gap: tokens36.spacing.base,
+              overflowX: { xs: "auto", md: "visible" },
+              paddingInline: { xs: tokens36.spacing.base, md: 0 },
+              paddingBottom: { xs: tokens36.spacing.sm, md: 0 },
+              scrollbarWidth: "none",
+              msOverflowStyle: "none",
+              "&::-webkit-scrollbar": {
+                display: "none"
+              }
+            },
+            children: loading ? renderSkeletons() : renderOutfitCards(outfits)
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/vazi/CompleteThisLookPanel/CompleteThisLookPanel.tsx
+import Box32 from "@mui/material/Box";
+import Typography21 from "@mui/material/Typography";
+import { tokens as tokens37 } from "@mitumba/tokens";
+import { jsx as jsx41, jsxs as jsxs25 } from "react/jsx-runtime";
+function CompleteThisLookPanel({ outfits, loading = false }) {
+  if (!loading && outfits.length === 0) {
+    return null;
+  }
+  const renderOutfitCards2 = () => outfits.map((outfit) => /* @__PURE__ */ jsx41(
+    Box32,
+    {
+      sx: {
+        flexShrink: 0,
+        width: { xs: "82%", md: "100%" },
+        maxWidth: { xs: "340px", md: "none" }
+      },
+      children: /* @__PURE__ */ jsx41(
+        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__ */ jsx41(
+    Box32,
+    {
+      sx: {
+        flexShrink: 0,
+        width: { xs: "82%", md: "100%" },
+        maxWidth: { xs: "340px", md: "none" }
+      },
+      children: /* @__PURE__ */ jsx41(VAZIOutfitCardSkeleton, {})
+    },
+    skelKey
+  ));
+  return /* @__PURE__ */ jsxs25(
+    Box32,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        gap: tokens37.spacing.base,
+        width: "100%"
+      },
+      children: [
+        /* @__PURE__ */ jsx41(
+          Typography21,
+          {
+            component: "h2",
+            sx: {
+              color: tokens37.colors.textPrimary,
+              fontSize: tokens37.typography.fontSizes.xl,
+              fontWeight: tokens37.typography.fontWeights.bold,
+              lineHeight: tokens37.typography.lineHeights.snug,
+              margin: 0
+            },
+            children: "Complete this look"
+          }
+        ),
+        /* @__PURE__ */ jsx41(
+          Box32,
+          {
+            sx: {
+              display: { xs: "flex", md: "grid" },
+              gridTemplateColumns: { md: "repeat(3, 1fr)" },
+              gap: tokens37.spacing.base,
+              overflowX: { xs: "auto", md: "visible" },
+              paddingBottom: { xs: tokens37.spacing.sm, md: 0 },
+              scrollbarWidth: "none",
+              msOverflowStyle: "none",
+              "&::-webkit-scrollbar": {
+                display: "none"
+              }
+            },
+            children: loading ? renderSkeletons2() : renderOutfitCards2()
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/theme/provider.tsx
+import CssBaseline from "@mui/material/CssBaseline";
+import { ThemeProvider } from "@mui/material/styles";
+
+// src/theme/theme.ts
+import { createTheme } from "@mui/material/styles";
+import { tokens as tokens38 } from "@mitumba/tokens";
+var transitions = {
+  standard: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+  spring: "all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)"
+};
+var mitumbaTheme = createTheme({
+  // Spacing factor 4px (Mandate)
+  spacing: (factor) => `${factor * 4}px`,
+  breakpoints: {
+    values: tokens38.breakpoints
+  },
+  palette: {
+    mode: "light",
+    primary: {
+      main: tokens38.colors.green,
+      light: tokens38.colors.greenLight,
+      dark: tokens38.colors.greenDark,
+      contrastText: tokens38.colors.textOnGreen
+    },
+    secondary: {
+      main: tokens38.colors.earth,
+      light: tokens38.colors.earthLight,
+      dark: tokens38.colors.earthDark,
+      contrastText: tokens38.colors.textOnEarth
+    },
+    earth: {
+      main: tokens38.colors.earth,
+      light: tokens38.colors.earthLight,
+      dark: tokens38.colors.earthDark,
+      contrastText: tokens38.colors.textOnEarth
+    },
+    success: {
+      main: tokens38.colors.success,
+      light: tokens38.colors.successLight,
+      dark: tokens38.colors.successDark,
+      contrastText: tokens38.colors.textOnGreen
+    },
+    error: {
+      main: tokens38.colors.error,
+      light: tokens38.colors.errorLight,
+      dark: tokens38.colors.errorDark,
+      contrastText: tokens38.colors.white
+    },
+    warning: {
+      main: tokens38.colors.warning,
+      light: tokens38.colors.warningLight,
+      dark: tokens38.colors.warningDark,
+      contrastText: tokens38.colors.textPrimary
+    },
+    info: {
+      main: tokens38.colors.info,
+      light: tokens38.colors.infoLight,
+      dark: tokens38.colors.infoDark,
+      contrastText: tokens38.colors.white
+    },
+    background: {
+      default: tokens38.colors.background,
+      paper: tokens38.colors.surface
+    },
+    divider: tokens38.colors.divider,
+    text: {
+      primary: tokens38.colors.textPrimary,
+      secondary: tokens38.colors.textSecondary,
+      disabled: tokens38.colors.textDisabled
+    },
+    common: {
+      black: tokens38.colors.textPrimary,
+      white: tokens38.colors.white
+    }
+  },
+  shape: {
+    borderRadius: tokens38.radius.md
+    // 8px default
+  },
+  shadows: [
+    "none",
+    tokens38.shadows.card,
+    // 1
+    tokens38.shadows.elevated,
+    // 2
+    tokens38.shadows.deep,
+    // 3
+    tokens38.shadows.bottomSheet,
+    // 4
+    tokens38.shadows.focus,
+    // 5
+    tokens38.shadows.green,
+    // 6
+    tokens38.shadows.earth,
+    // 7
+    "none",
+    "none",
+    "none",
+    "none",
+    "none",
+    "none",
+    "none",
+    "none",
+    "none",
+    "none",
+    "none",
+    "none",
+    "none",
+    "none",
+    "none",
+    "none",
+    "none"
+  ],
+  typography: {
+    fontFamily: tokens38.typography.fontFamily,
+    fontWeightRegular: tokens38.typography.fontWeights.regular,
+    fontWeightMedium: tokens38.typography.fontWeights.medium,
+    fontWeightBold: tokens38.typography.fontWeights.bold,
+    h1: {
+      fontSize: `${tokens38.typography.fontSizes.display}px`,
+      fontWeight: tokens38.typography.fontWeights.extrabold,
+      lineHeight: 1.1
+    },
+    h2: {
+      fontSize: `${tokens38.typography.fontSizes.xxxl}px`,
+      fontWeight: tokens38.typography.fontWeights.bold,
+      lineHeight: 1.2
+    },
+    h3: {
+      fontSize: `${tokens38.typography.fontSizes.xxl}px`,
+      fontWeight: tokens38.typography.fontWeights.bold,
+      lineHeight: 1.2
+    },
+    h4: {
+      fontSize: `${tokens38.typography.fontSizes.xl}px`,
+      fontWeight: tokens38.typography.fontWeights.bold,
+      lineHeight: 1.2
+    },
+    body1: {
+      fontSize: `${tokens38.typography.fontSizes.md}px`,
+      lineHeight: 1.5
+    },
+    body2: {
+      fontSize: `${tokens38.typography.fontSizes.base}px`,
+      lineHeight: 1.5
+    },
+    button: {
+      fontSize: `${tokens38.typography.fontSizes.base}px`,
+      fontWeight: 600,
+      textTransform: "none"
+    },
+    caption: {
+      fontSize: `${tokens38.typography.fontSizes.sm}px`,
+      lineHeight: 1.5
+    }
+  },
+  components: {
+    MuiCssBaseline: {
+      styleOverrides: {
+        body: {
+          backgroundColor: tokens38.colors.background,
+          color: tokens38.colors.textPrimary,
+          fontFamily: tokens38.typography.fontFamily,
+          WebkitFontSmoothing: "antialiased",
+          MozOsxFontSmoothing: "grayscale"
+        },
+        "*, *::before, *::after": {
+          boxSizing: "border-box"
+        }
+      }
+    },
+    MuiButton: {
+      defaultProps: {
+        disableElevation: true
+      },
+      styleOverrides: {
+        root: {
+          borderRadius: `${tokens38.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: tokens38.colors.divider,
+            color: tokens38.colors.textDisabled,
+            borderColor: tokens38.colors.divider
+          }
+        },
+        containedPrimary: {
+          backgroundColor: tokens38.colors.green,
+          "&:hover": {
+            backgroundColor: tokens38.colors.greenDark,
+            boxShadow: tokens38.shadows.green
+          }
+        },
+        containedSecondary: {
+          backgroundColor: tokens38.colors.earth,
+          "&:hover": {
+            backgroundColor: tokens38.colors.earthDark,
+            boxShadow: tokens38.shadows.earth
+          }
+        },
+        outlinedPrimary: {
+          borderWidth: "2px !important",
+          borderColor: tokens38.colors.border,
+          color: tokens38.colors.textPrimary,
+          "&:hover": {
+            backgroundColor: tokens38.colors.background,
+            borderColor: tokens38.colors.green,
+            color: tokens38.colors.green
+          }
+        },
+        textPrimary: {
+          color: tokens38.colors.textSecondary,
+          "&:hover": {
+            backgroundColor: tokens38.colors.background,
+            color: tokens38.colors.textPrimary
+          }
+        }
+      }
+    },
+    MuiCard: {
+      styleOverrides: {
+        root: {
+          borderRadius: `${tokens38.radius.xl}px`,
+          backgroundColor: tokens38.colors.surface,
+          boxShadow: tokens38.shadows.card,
+          transition: transitions.standard,
+          border: "1px solid",
+          borderColor: tokens38.colors.divider,
+          "&:hover": {
+            transform: "translateY(-4px)",
+            boxShadow: tokens38.shadows.elevated,
+            borderColor: tokens38.colors.border
+          }
+        }
+      }
+    },
+    MuiPaper: {
+      styleOverrides: {
+        rounded: {
+          borderRadius: `${tokens38.radius.xl}px`
+        },
+        elevation1: {
+          boxShadow: tokens38.shadows.card
+        }
+      }
+    },
+    MuiOutlinedInput: {
+      styleOverrides: {
+        root: {
+          borderRadius: `${tokens38.radius.md}px`,
+          backgroundColor: tokens38.colors.surface,
+          transition: transitions.standard,
+          "& .MuiOutlinedInput-notchedOutline": {
+            borderColor: tokens38.colors.border,
+            borderWidth: "1px",
+            transition: transitions.standard
+          },
+          "&:hover .MuiOutlinedInput-notchedOutline": {
+            borderColor: tokens38.colors.textDisabled
+          },
+          "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+            borderColor: tokens38.colors.green,
+            borderWidth: "2px"
+          },
+          "&.Mui-error .MuiOutlinedInput-notchedOutline": {
+            borderColor: tokens38.colors.error
+          },
+          "&.Mui-focused": {
+            boxShadow: tokens38.shadows.focus
+          }
+        }
+      }
+    },
+    MuiAvatar: {
+      styleOverrides: {
+        root: {
+          transition: transitions.spring,
+          cursor: "pointer",
+          "&:hover": {
+            transform: "perspective(1000px) rotateY(15deg) rotateX(-5deg) scale(1.1)",
+            boxShadow: tokens38.shadows.elevated
+          },
+          "&:active": {
+            transform: "perspective(1000px) rotateY(0deg) rotateX(0deg) scale(1.05)"
+          }
+        }
+      }
+    },
+    MuiDialog: {
+      styleOverrides: {
+        paper: {
+          borderRadius: `${tokens38.radius.xxxl}px`,
+          boxShadow: tokens38.shadows.bottomSheet,
+          backgroundImage: "none"
+        }
+      }
+    },
+    MuiAlert: {
+      styleOverrides: {
+        root: {
+          borderRadius: `${tokens38.radius.lg}px`,
+          alignItems: "center"
+        }
+      }
+    }
+  }
+});
+
+// src/theme/provider.tsx
+import { jsx as jsx42, jsxs as jsxs26 } from "react/jsx-runtime";
+function MitumbaThemeProvider({
+  children,
+  disableCssBaseline = false
+}) {
+  return /* @__PURE__ */ jsxs26(ThemeProvider, { theme: mitumbaTheme, children: [
+    !disableCssBaseline && /* @__PURE__ */ jsx42(CssBaseline, {}),
+    children
+  ] });
+}
+export {
+  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
+};