@szymonpiatek/designsystem 0.0.7 → 0.0.9

package/dist/index.js

@@ -27,10 +27,14 @@ import ImageIcon from '@mui/icons-material/Image';
 import ArticleIcon from '@mui/icons-material/Article';
 import CheckCircleOutlinedIcon from '@mui/icons-material/CheckCircleOutlined';
 import HighlightOffIcon from '@mui/icons-material/HighlightOff';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import LocalOfferIcon from '@mui/icons-material/LocalOffer';
 import CreditCardOutlinedIcon from '@mui/icons-material/CreditCardOutlined';
 import LocalShippingOutlinedIcon from '@mui/icons-material/LocalShippingOutlined';
 import GridViewIcon from '@mui/icons-material/GridView';
 import ViewListIcon from '@mui/icons-material/ViewList';
+import ThumbUpOutlinedIcon from '@mui/icons-material/ThumbUpOutlined';
+import ReplyIcon from '@mui/icons-material/Reply';
 import { createPortal } from 'react-dom';
 import KeyboardDoubleArrowLeftIcon from '@mui/icons-material/KeyboardDoubleArrowLeft';
 import KeyboardDoubleArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowRight';
@@ -39,7 +43,6 @@ import WarningAmberOutlinedIcon from '@mui/icons-material/WarningAmberOutlined';
 import ErrorOutlineOutlinedIcon from '@mui/icons-material/ErrorOutlineOutlined';
 import InboxOutlinedIcon from '@mui/icons-material/InboxOutlined';
 import VerifiedIcon from '@mui/icons-material/Verified';
-import ThumbUpOutlinedIcon from '@mui/icons-material/ThumbUpOutlined';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import MenuIcon from '@mui/icons-material/Menu';
 
@@ -3324,6 +3327,19 @@ var COUNTRIES = countries_default.countries.map((c) => {
   };
 }).sort((a, b) => a.country.localeCompare(b.country, "pl"));
 var DEFAULT_COUNTRY = COUNTRIES.find((c) => c.flagCode === "US") ?? COUNTRIES[0];
+var COUNTRIES_BY_DIAL_CODE_LENGTH = [...COUNTRIES].sort(
+  (a, b) => b.dialCode.length - a.dialCode.length
+);
+var parsePhoneValue = (full) => {
+  if (full.startsWith("+")) {
+    for (const c of COUNTRIES_BY_DIAL_CODE_LENGTH) {
+      if (full.startsWith(c.dialCode)) {
+        return { country: c, localDigits: full.slice(c.dialCode.length).replace(/\D/g, "") };
+      }
+    }
+  }
+  return { country: DEFAULT_COUNTRY, localDigits: full.replace(/\D/g, "") };
+};
 var wrapperColors = (theme, error, focused) => ({
   borderColor: focused ? error ? theme.palette.error.main : theme.palette.primary.main : error ? theme.palette.error.main : theme.palette.divider,
   boxShadow: focused ? `0 0 0 3px ${error ? theme.palette.error.main : theme.palette.primary.main}33` : "none",
@@ -3511,13 +3527,24 @@ var PhoneInput = forwardRef(
       () => COUNTRIES.find((c) => c.flagCode === defaultCountry) ?? DEFAULT_COUNTRY,
       [defaultCountry]
     );
-    const [selectedCountry, setSelectedCountry] = useState(initialCountry);
+    const [selectedCountry, setSelectedCountry] = useState(() => {
+      if (defaultValue?.startsWith("+")) return parsePhoneValue(defaultValue).country;
+      return initialCountry;
+    });
     const [isOpen, setIsOpen] = useState(false);
     const [searchQuery, setSearchQuery] = useState("");
     const [focused, setFocused] = useState(false);
     const isControlled = value !== void 0;
-    const [internalValue, setInternalValue] = useState(defaultValue);
-    const phoneValue = isControlled ? value : internalValue;
+    const [internalDigits, setInternalDigits] = useState(() => {
+      if (defaultValue?.startsWith("+")) return parsePhoneValue(defaultValue).localDigits;
+      return defaultValue ?? "";
+    });
+    const parsedControlled = useMemo(() => {
+      if (!isControlled || typeof value !== "string" || !value.startsWith("+")) return null;
+      return parsePhoneValue(value);
+    }, [isControlled, value]);
+    const activeCountry = parsedControlled?.country ?? selectedCountry;
+    const inputDisplayValue = isControlled ? parsedControlled?.localDigits ?? (typeof value === "string" ? value : "") ?? "" : internalDigits;
     const rootRef = useRef(null);
     const searchRef = useRef(null);
     const filteredCountries = useMemo(() => {
@@ -3542,21 +3569,29 @@ var PhoneInput = forwardRef(
       setSelectedCountry(country);
       onCountryChange?.(country);
       close();
-      if (!isControlled) setInternalValue("");
-      onChange?.("", { country, dialCode: country.dialCode, fullNumber: country.dialCode });
+      if (!isControlled) setInternalDigits("");
+      onChange?.(country.dialCode, { country, dialCode: country.dialCode, fullNumber: country.dialCode });
     };
     const handlePhoneChange = (e) => {
-      const raw = e.target.value.replace(/\D/g, "");
-      const clamped = raw.slice(0, selectedCountry.maxLength);
-      if (!isControlled) setInternalValue(clamped);
-      onChange?.(clamped, {
-        country: selectedCountry,
-        dialCode: selectedCountry.dialCode,
-        fullNumber: selectedCountry.dialCode + clamped
-      });
+      const raw = e.target.value;
+      if (raw.startsWith("+")) {
+        const { country, localDigits } = parsePhoneValue(raw);
+        const clamped = localDigits.slice(0, country.maxLength);
+        setSelectedCountry(country);
+        onCountryChange?.(country);
+        if (!isControlled) setInternalDigits(clamped);
+        const full = country.dialCode + clamped;
+        onChange?.(full, { country, dialCode: country.dialCode, fullNumber: full });
+      } else {
+        const clamped = raw.replace(/\D/g, "").slice(0, activeCountry.maxLength);
+        if (!isControlled) setInternalDigits(clamped);
+        const full = activeCountry.dialCode + clamped;
+        onChange?.(full, { country: activeCountry, dialCode: activeCountry.dialCode, fullNumber: full });
+      }
     };
     const handlePhoneKeyDown = (e) => {
       if (e.ctrlKey || e.metaKey || e.altKey || e.key.length > 1) return;
+      if (e.key === "+" && e.target.value === "") return;
       if (!/^\d$/.test(e.key)) e.preventDefault();
     };
     useEffect(() => {
@@ -3567,7 +3602,7 @@ var PhoneInput = forwardRef(
       document.addEventListener("mousedown", handler);
       return () => document.removeEventListener("mousedown", handler);
     }, [isOpen, close]);
-    const derivedPlaceholder = placeholder ?? (selectedCountry.minLength === selectedCountry.maxLength ? `${selectedCountry.maxLength} ${digitsLabel}` : `${selectedCountry.minLength}\u2013${selectedCountry.maxLength} ${digitsLabel}`);
+    const derivedPlaceholder = placeholder ?? (activeCountry.minLength === activeCountry.maxLength ? `${activeCountry.maxLength} ${digitsLabel}` : `${activeCountry.minLength}\u2013${activeCountry.maxLength} ${digitsLabel}`);
     return /* @__PURE__ */ jsxs(Root8, { $fullWidth: fullWidth, ref: rootRef, children: [
       label && /* @__PURE__ */ jsx(Label, { htmlFor: inputId, error, size, children: label }),
       /* @__PURE__ */ jsxs(
@@ -3589,14 +3624,14 @@ var PhoneInput = forwardRef(
                 "aria-haspopup": "listbox",
                 "aria-expanded": isOpen,
                 "aria-controls": isOpen ? listboxId : void 0,
-                "aria-label": countrySelectAriaLabel(selectedCountry.country, selectedCountry.dialCode),
+                "aria-label": countrySelectAriaLabel(activeCountry.country, activeCountry.dialCode),
                 onClick: openDropdown,
                 onKeyDown: (e) => e.key === "Escape" && close(),
                 onFocus: () => setFocused(true),
                 onBlur: () => setFocused(false),
                 children: [
-                  /* @__PURE__ */ jsx(CountryFlag, { countryCode: selectedCountry.flagCode, size }),
-                  /* @__PURE__ */ jsx(DialCode, { children: selectedCountry.dialCode }),
+                  /* @__PURE__ */ jsx(CountryFlag, { countryCode: activeCountry.flagCode, size }),
+                  /* @__PURE__ */ jsx(DialCode, { children: activeCountry.dialCode }),
                   /* @__PURE__ */ jsx(ChevronIcon, { $open: isOpen, children: /* @__PURE__ */ jsx(Chevron, {}) })
                 ]
               }
@@ -3610,14 +3645,14 @@ var PhoneInput = forwardRef(
                 $size: size,
                 type: "tel",
                 inputMode: "numeric",
-                value: phoneValue,
+                value: inputDisplayValue,
                 onChange: handlePhoneChange,
                 onKeyDown: handlePhoneKeyDown,
                 onFocus: () => setFocused(true),
                 onBlur: () => setFocused(false),
                 disabled,
                 placeholder: derivedPlaceholder,
-                maxLength: selectedCountry.maxLength,
+                maxLength: activeCountry.maxLength,
                 "aria-label": label ? void 0 : phoneAriaLabel
               }
             ),
@@ -3634,26 +3669,23 @@ var PhoneInput = forwardRef(
                   "aria-label": countrySearchAriaLabel
                 }
               ) }),
-              /* @__PURE__ */ jsx(OptionList, { children: filteredCountries.length === 0 ? /* @__PURE__ */ jsx(EmptyMessage, { children: "Nie znaleziono kraju" }) : filteredCountries.map((country) => {
-                const isSelected = country.flagCode === selectedCountry.flagCode;
-                return /* @__PURE__ */ jsxs(
-                  OptionItem2,
-                  {
-                    role: "option",
-                    "aria-selected": isSelected,
-                    $selected: isSelected,
-                    onClick: () => selectCountry(country),
-                    onKeyDown: (e) => e.key === "Enter" && selectCountry(country),
-                    tabIndex: 0,
-                    children: [
-                      /* @__PURE__ */ jsx(CountryFlag, { countryCode: country.flagCode, size: "sm" }),
-                      /* @__PURE__ */ jsx(CountryName, { children: country.country }),
-                      /* @__PURE__ */ jsx(OptionDialCode, { children: country.dialCode })
-                    ]
-                  },
-                  country.flagCode
-                );
-              }) })
+              /* @__PURE__ */ jsx(OptionList, { children: filteredCountries.length === 0 ? /* @__PURE__ */ jsx(EmptyMessage, { children: "Nie znaleziono kraju" }) : filteredCountries.map((country) => /* @__PURE__ */ jsxs(
+                OptionItem2,
+                {
+                  role: "option",
+                  "aria-selected": country.flagCode === activeCountry.flagCode,
+                  $selected: country.flagCode === activeCountry.flagCode,
+                  onClick: () => selectCountry(country),
+                  onKeyDown: (e) => e.key === "Enter" && selectCountry(country),
+                  tabIndex: 0,
+                  children: [
+                    /* @__PURE__ */ jsx(CountryFlag, { countryCode: country.flagCode, size: "sm" }),
+                    /* @__PURE__ */ jsx(CountryName, { children: country.country }),
+                    /* @__PURE__ */ jsx(OptionDialCode, { children: country.dialCode })
+                  ]
+                },
+                country.flagCode
+              )) })
             ] })
           ]
         }
@@ -4788,55 +4820,51 @@ var cardVariants = [
 ];
 var cardPaddings = ["none", "sm", "md", "lg", "xl"];
 var cardRoundeds = ["none", "sm", "md", "lg", "full"];
-function getVariantStyles2(variant, theme) {
-  const primary = theme.palette.primary.main;
-  const secondary = theme.palette.secondary.main;
-  const error = theme.palette.error.main;
-  switch (variant) {
-    case "default":
-      return {
-        backgroundColor: `${primary}26`,
-        color: primary,
-        border: "1px solid transparent"
-      };
-    case "secondary":
-      return {
-        backgroundColor: `${secondary}26`,
-        color: secondary,
-        border: "1px solid transparent"
-      };
-    case "outline":
-      return {
-        backgroundColor: "transparent",
-        border: `1px solid ${theme.palette.divider}`,
-        color: theme.palette.text.primary
-      };
-    case "destructive":
-      return {
-        backgroundColor: `${error}26`,
-        color: error,
-        border: "1px solid transparent"
-      };
-    case "success":
-      return {
-        backgroundColor: "rgba(34,197,94,0.15)",
-        color: theme.palette.mode === "dark" ? "rgb(134,239,172)" : "rgb(22,163,74)",
-        border: "1px solid transparent"
-      };
-    case "ghost":
-      return {
-        backgroundColor: "rgba(255,255,255,0.15)",
-        color: theme.palette.common.white,
-        border: "1px solid rgba(255,255,255,0.4)"
-      };
-    case "promo":
-      return {
-        backgroundColor: theme.palette.mode === "dark" ? "rgb(22,163,74)" : "rgb(22,163,74)",
-        color: "#ffffff",
-        border: "1px solid transparent"
-      };
-  }
-}
+
+// src/components/atoms/badges/Badge/Badge.variants.ts
+var variantStyles2 = {
+  default: (theme) => ({
+    backgroundColor: theme.palette.primary.main,
+    color: "#fff",
+    border: "1px solid transparent"
+  }),
+  secondary: (theme) => ({
+    backgroundColor: theme.palette.secondary.main,
+    color: "#fff",
+    border: "1px solid transparent"
+  }),
+  outline: (theme) => ({
+    backgroundColor: "transparent",
+    border: `1px solid ${theme.palette.divider}`,
+    color: theme.palette.text.primary
+  }),
+  destructive: (theme) => ({
+    backgroundColor: theme.palette.error.main,
+    color: "#fff",
+    border: "1px solid transparent"
+  }),
+  success: (theme) => ({
+    backgroundColor: theme.palette.success.main,
+    color: "#fff",
+    border: "1px solid transparent"
+  }),
+  ghost: (theme) => ({
+    backgroundColor: "rgba(255,255,255,0.15)",
+    color: theme.palette.common.white,
+    border: "1px solid rgba(255,255,255,0.4)"
+  }),
+  warning: (theme) => ({
+    backgroundColor: theme.palette.warning.main,
+    color: "#fff",
+    border: "1px solid transparent"
+  }),
+  promo: (theme) => ({
+    backgroundColor: theme.palette.success.main,
+    color: "#fff",
+    border: "1px solid transparent"
+  })
+};
+var badgeVariants = Object.keys(variantStyles2);
 var StyledBadge = styled("span", {
   shouldForwardProp: (prop) => prop !== "$variant"
 })(({ theme, $variant }) => ({
@@ -4847,54 +4875,11 @@ var StyledBadge = styled("span", {
   fontWeight: 500,
   lineHeight: 1,
   fontFamily: theme.typography.fontFamily,
-  ...getVariantStyles2($variant, theme)
+  ...variantStyles2[$variant](theme)
 }));
 function Badge2({ variant = "default", ...props }) {
   return /* @__PURE__ */ jsx(StyledBadge, { $variant: variant, ...props });
 }
-var badgeVariants = [
-  "default",
-  "secondary",
-  "outline",
-  "destructive",
-  "success",
-  "ghost",
-  "promo"
-];
-function getBgColor(variant) {
-  switch (variant) {
-    case "flash":
-      return "#f59e0b";
-    case "new":
-      return "#3b82f6";
-    case "hot":
-      return "#ef4444";
-    default:
-      return "#16a34a";
-  }
-}
-var Root12 = styled("span", {
-  shouldForwardProp: (prop) => prop !== "$variant"
-})(({ theme, $variant }) => ({
-  display: "inline-flex",
-  alignItems: "center",
-  gap: "0.25rem",
-  borderRadius: "0.375rem",
-  padding: "0.25rem 0.625rem",
-  fontSize: "0.75rem",
-  fontWeight: 700,
-  lineHeight: 1,
-  letterSpacing: "0.02em",
-  fontFamily: theme.typography.fontFamily,
-  backgroundColor: getBgColor($variant),
-  color: "#ffffff",
-  textTransform: "uppercase"
-}));
-function SaleBadge({ discount, label, variant = "default", ...props }) {
-  const text = label ?? (discount !== void 0 ? `-${discount}%` : "SALE");
-  return /* @__PURE__ */ jsx(Root12, { $variant: variant, ...props, children: text });
-}
-var saleBadgeVariants = ["default", "flash", "new", "hot"];
 var sizeMap4 = {
   sm: { width: "2rem", height: "2rem", fontSize: "0.75rem" },
   md: { width: "2.5rem", height: "2.5rem", fontSize: "0.875rem" },
@@ -5043,7 +5028,7 @@ var spin = keyframes$1`to { transform: rotate(360deg); }`;
 var fade = keyframes$1`0%,100%{opacity:.15} 50%{opacity:1}`;
 var scalePulse = keyframes$1`0%,100%{transform:scale(0.6);opacity:.4} 50%{transform:scale(1);opacity:1}`;
 var barAnim = keyframes$1`0%,100%{transform:scaleY(.4);opacity:.5} 50%{transform:scaleY(1);opacity:1}`;
-var Root13 = styled("span", {
+var Root12 = styled("span", {
   shouldForwardProp: (p) => !["$size", "$color"].includes(p)
 })(({ theme, $size, $color }) => {
   const colorMap = {
@@ -5131,8 +5116,8 @@ function Spinner3({
   label = "\u0141adowanie\u2026",
   ...props
 }) {
-  const Inner7 = VARIANTS[variant];
-  return /* @__PURE__ */ jsx(Root13, { $size: size, $color: color, role: "status", "aria-label": label, ...props, children: /* @__PURE__ */ jsx(Inner7, {}) });
+  const Inner5 = VARIANTS[variant];
+  return /* @__PURE__ */ jsx(Root12, { $size: size, $color: color, role: "status", "aria-label": label, ...props, children: /* @__PURE__ */ jsx(Inner5, {}) });
 }
 var spinnerVariants = ["ring", "dots", "pulse", "bars"];
 var spinnerSizes = ["xs", "sm", "md", "lg", "xl"];
@@ -5258,7 +5243,7 @@ var FONT_MAP = {
   lg: "1.125rem",
   xl: "1.5rem"
 };
-var Root14 = styled("div")({ position: "relative", display: "inline-flex", flexShrink: 0 });
+var Root13 = styled("div")({ position: "relative", display: "inline-flex", flexShrink: 0 });
 var Label2 = styled("div", {
   shouldForwardProp: (p) => p !== "$size"
 })(({ theme, $size }) => ({
@@ -5312,7 +5297,7 @@ function ProgressCircle({
   const { color, gradient } = useStrokeColor(variant, gradientId);
   const trackColor = theme.palette.mode === "dark" ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.08)";
   return /* @__PURE__ */ jsxs(
-    Root14,
+    Root13,
     {
       role: "progressbar",
       "aria-valuenow": value,
@@ -5669,9 +5654,10 @@ var PRESET_MAP = {
   "3/4": 3 / 4,
   "2/3": 2 / 3
 };
-var Root15 = styled("div")({
+var Root14 = styled("div")({
   position: "relative",
   width: "100%",
+  aspectRatio: "var(--ar)",
   "& > *": {
     position: "absolute",
     inset: 0,
@@ -5683,32 +5669,25 @@ var Root15 = styled("div")({
 var AspectRatio = forwardRef(
   ({ ratio = "16/9", children, style, ...props }, ref) => {
     const numericRatio = typeof ratio === "string" ? PRESET_MAP[ratio] ?? 16 / 9 : ratio;
-    const paddingBottom = `${1 / numericRatio * 100}%`;
-    return /* @__PURE__ */ jsx(Root15, { ref, style: { paddingBottom, ...style }, ...props, children });
+    return /* @__PURE__ */ jsx(
+      Root14,
+      {
+        ref,
+        style: { "--ar": String(numericRatio), ...style },
+        ...props,
+        children
+      }
+    );
   }
 );
 AspectRatio.displayName = "AspectRatio";
 var aspectRatioPresets = Object.keys(PRESET_MAP);
-var Root16 = styled(Card)(({ theme }) => ({
-  display: "flex",
-  flexDirection: "column",
-  overflow: "hidden",
-  cursor: "pointer",
-  transition: "box-shadow 150ms ease, transform 150ms ease",
-  "&:hover": {
-    boxShadow: theme.shadows[4],
-    transform: "translateY(-2px)"
-  }
-}));
-var ImageWrap = styled("div")({
-  margin: "-1.5rem -1.5rem 1rem"
-});
-var Image = styled("img")({
+var Img = styled("img")({
   objectFit: "cover",
   width: "100%",
   height: "100%"
 });
-var ImagePlaceholder = styled("div")(({ theme }) => ({
+var Placeholder2 = styled("div")(({ theme }) => ({
   width: "100%",
   height: "100%",
   backgroundColor: theme.palette.action.hover,
@@ -5717,7 +5696,9 @@ var ImagePlaceholder = styled("div")(({ theme }) => ({
   justifyContent: "center",
   color: theme.palette.text.disabled
 }));
-var Content = styled("div")({
+var CategoryCardImage = ({ src, alt }) => /* @__PURE__ */ jsx(AspectRatio, { ratio: "4/3", children: src ? /* @__PURE__ */ jsx(Img, { src, alt }) : /* @__PURE__ */ jsx(Placeholder2, { "aria-label": alt, children: /* @__PURE__ */ jsx(ImageIcon, { style: { fontSize: 48 } }) }) });
+CategoryCardImage.displayName = "CategoryCardImage";
+var Root15 = styled("div")({
   display: "flex",
   flexDirection: "column",
   gap: "0.25rem"
@@ -5735,6 +5716,33 @@ var Count = styled("span")(({ theme }) => ({
   fontFamily: theme.typography.fontFamily,
   fontSize: "0.875rem"
 }));
+var CategoryCardInfo = ({
+  name,
+  count,
+  countLabel = "produkt\xF3w"
+}) => /* @__PURE__ */ jsxs(Root15, { children: [
+  /* @__PURE__ */ jsx(Name, { children: name }),
+  count !== void 0 && /* @__PURE__ */ jsxs(Count, { children: [
+    count,
+    " ",
+    countLabel
+  ] })
+] });
+CategoryCardInfo.displayName = "CategoryCardInfo";
+var Root16 = styled(Card)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  overflow: "hidden",
+  cursor: "pointer",
+  transition: "box-shadow 150ms ease, transform 150ms ease",
+  "&:hover": {
+    boxShadow: theme.shadows[4],
+    transform: "translateY(-2px)"
+  }
+}));
+var ImageWrap = styled("div")({
+  margin: "-1.5rem -1.5rem 1rem"
+});
 var CardLink = styled("a")({
   display: "block",
   textDecoration: "none",
@@ -5744,90 +5752,95 @@ var CardLink = styled("a")({
 var CategoryCard = forwardRef(
   ({ name, imageUrl, imageAlt, count, href, ...props }, ref) => {
     const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(ImageWrap, { children: /* @__PURE__ */ jsx(AspectRatio, { ratio: "4/3", children: imageUrl ? /* @__PURE__ */ jsx(Image, { src: imageUrl, alt: imageAlt ?? name }) : /* @__PURE__ */ jsx(ImagePlaceholder, { "aria-label": imageAlt ?? name, children: /* @__PURE__ */ jsx(ImageIcon, { style: { fontSize: 48 } }) }) }) }),
-      /* @__PURE__ */ jsxs(Content, { children: [
-        /* @__PURE__ */ jsx(Name, { children: name }),
-        count !== void 0 && /* @__PURE__ */ jsxs(Count, { children: [
-          count,
-          " produkt\xF3w"
-        ] })
-      ] })
+      /* @__PURE__ */ jsx(ImageWrap, { children: /* @__PURE__ */ jsx(CategoryCardImage, { src: imageUrl, alt: imageAlt ?? name }) }),
+      /* @__PURE__ */ jsx(CategoryCardInfo, { name, count })
     ] });
     return /* @__PURE__ */ jsx(Root16, { ref, variant: "default", padding: "md", rounded: "lg", ...props, children: href ? /* @__PURE__ */ jsx(CardLink, { href, children: content }) : content });
   }
 );
 CategoryCard.displayName = "CategoryCard";
-var sizeMap5 = {
-  sm: "1rem",
-  md: "1.25rem",
-  lg: "1.5rem"
-};
-var Root17 = styled("div")(({ theme }) => ({
-  display: "inline-flex",
+function deriveInitials(name) {
+  return name.split(/\s+/).filter(Boolean).slice(0, 2).map((p) => p[0]?.toUpperCase() ?? "").join("");
+}
+var Root17 = styled(Card)({
+  display: "flex",
   alignItems: "center",
-  gap: "0.5rem",
-  color: theme.palette.text.secondary,
-  fontFamily: theme.typography.fontFamily
-}));
-var Stars = styled("div")({
-  display: "inline-flex",
+  justifyContent: "space-between",
+  gap: "1rem",
+  flexWrap: "wrap"
+});
+var AvatarImg = styled("img")({
+  borderRadius: "50%",
+  objectFit: "cover",
+  flexShrink: 0
+});
+var Identity = styled("div")({
+  display: "flex",
   alignItems: "center",
-  gap: "0.125rem"
+  gap: "1rem",
+  flex: 1,
+  minWidth: 0
 });
-var StarButton = styled("button")(
-  ({ theme, $size, $active }) => ({
-    appearance: "none",
-    border: 0,
-    background: "transparent",
-    padding: 0,
-    color: $active ? "#f59e0b" : theme.palette.action.disabled,
-    cursor: "pointer",
-    fontSize: sizeMap5[$size],
-    lineHeight: 1,
-    "&:disabled": {
-      cursor: "default"
-    }
-  })
-);
-var Meta = styled("span")(({ theme }) => ({
+var TextBlock = styled("div")({ minWidth: 0 });
+var Name2 = styled("h2")(({ theme }) => ({
+  margin: 0,
+  fontFamily: theme.typography.fontFamily,
+  fontSize: "1.25rem",
+  fontWeight: 700,
+  color: theme.palette.text.primary,
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis"
+}));
+var Subtitle = styled("p")(({ theme }) => ({
+  margin: "0.25rem 0 0",
+  fontFamily: theme.typography.fontFamily,
   fontSize: "0.875rem",
-  color: theme.palette.text.secondary
+  color: theme.palette.text.secondary,
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis"
 }));
-var Rating = forwardRef(
-  ({ value, max = 5, readonly = true, size = "md", label, count, onChange, ...props }, ref) => {
-    const roundedValue = Math.round(value);
-    const meta = label ?? (count !== void 0 ? `(${count})` : void 0);
-    return /* @__PURE__ */ jsxs(Root17, { ref, "aria-label": `Ocena ${value} z ${max}`, ...props, children: [
-      /* @__PURE__ */ jsx(
-        Stars,
-        {
-          role: readonly ? "img" : "radiogroup",
-          "aria-label": readonly ? void 0 : "Wybierz ocen\u0119",
-          children: Array.from({ length: max }, (_, index) => {
-            const starValue = index + 1;
-            return /* @__PURE__ */ jsx(
-              StarButton,
-              {
-                type: "button",
-                $size: size,
-                $active: starValue <= roundedValue,
-                disabled: readonly,
-                "aria-label": `${starValue} z ${max}`,
-                "aria-checked": readonly ? void 0 : starValue === roundedValue,
-                role: readonly ? void 0 : "radio",
-                onClick: () => onChange?.(starValue),
-                children: "\u2605"
-              },
-              starValue
-            );
-          })
-        }
-      ),
-      meta && /* @__PURE__ */ jsx(Meta, { children: meta })
+var Actions = styled("div")({
+  display: "flex",
+  alignItems: "center",
+  gap: "0.75rem",
+  flexWrap: "wrap",
+  justifyContent: "flex-end"
+});
+var sizeMap5 = {
+  sm: "2rem",
+  md: "2.5rem",
+  lg: "3rem",
+  xl: "4rem"
+};
+var ProfileCard = forwardRef(
+  ({
+    name,
+    subtitle,
+    initials,
+    avatarUrl,
+    avatarColor = "primary",
+    avatarSize = "xl",
+    actions,
+    cardVariant = "default",
+    ...props
+  }, ref) => {
+    const resolvedInitials = initials ?? deriveInitials(name);
+    const imgSize = sizeMap5[avatarSize] ?? "4rem";
+    return /* @__PURE__ */ jsxs(Root17, { ref, variant: cardVariant, padding: "lg", rounded: "lg", ...props, children: [
+      /* @__PURE__ */ jsxs(Identity, { children: [
+        avatarUrl ? /* @__PURE__ */ jsx(AvatarImg, { src: avatarUrl, alt: name, style: { width: imgSize, height: imgSize } }) : /* @__PURE__ */ jsx(Avatar, { initials: resolvedInitials, size: avatarSize, color: avatarColor }),
+        /* @__PURE__ */ jsxs(TextBlock, { children: [
+          /* @__PURE__ */ jsx(Name2, { children: name }),
+          subtitle && /* @__PURE__ */ jsx(Subtitle, { children: subtitle })
+        ] })
+      ] }),
+      actions && /* @__PURE__ */ jsx(Actions, { children: actions })
     ] });
   }
 );
-Rating.displayName = "Rating";
+ProfileCard.displayName = "ProfileCard";
 var DEFAULT_OMNIBUS_LABEL = "Najni\u017Csza cena z ostatnich 30 dni";
 var FONT_SIZE = {
   sm: "0.875rem",
@@ -5960,147 +5973,150 @@ var Price = forwardRef(
 );
 Price.displayName = "Price";
 var priceSizes = ["sm", "md", "lg", "xl"];
-var Root19 = styled(Card)({
-  display: "flex",
-  flexDirection: "column",
-  height: "100%",
-  overflow: "hidden"
-});
-var ImageWrap2 = styled("div")({
-  position: "relative",
-  margin: "-1.5rem -1.5rem 1rem"
-});
-var Image2 = styled("img")(({ theme }) => ({
-  objectFit: "cover",
-  backgroundColor: theme.palette.action.hover
+function calcTimeLeft(target) {
+  const diff = new Date(target).getTime() - Date.now();
+  if (diff <= 0) return null;
+  return {
+    days: Math.floor(diff / 864e5),
+    hours: Math.floor(diff % 864e5 / 36e5),
+    minutes: Math.floor(diff % 36e5 / 6e4),
+    seconds: Math.floor(diff % 6e4 / 1e3)
+  };
+}
+function pad(n) {
+  return String(n).padStart(2, "0");
+}
+var Root19 = styled("div", {
+  shouldForwardProp: (prop) => prop !== "$variant"
+})(({ theme, $variant }) => ({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  flexWrap: "wrap",
+  gap: "0.5rem",
+  fontFamily: theme.typography.fontFamily,
+  ...$variant === "card" && {
+    backgroundColor: theme.palette.background.paper,
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: theme.shape.borderRadius,
+    padding: "1rem 1.5rem"
+  },
+  ...$variant === "banner" && {
+    backgroundColor: theme.palette.error.main,
+    color: "#fff",
+    borderRadius: theme.shape.borderRadius,
+    padding: "0.75rem 1.25rem"
+  }
 }));
-var ImagePlaceholder2 = styled("div")(({ theme }) => ({
-  width: "100%",
-  height: "100%",
-  backgroundColor: theme.palette.action.hover,
+var TimerLabel = styled("span", {
+  shouldForwardProp: (prop) => prop !== "$variant"
+})(({ theme, $variant }) => ({
+  fontSize: "0.875rem",
+  fontWeight: 600,
+  color: $variant === "banner" ? "rgba(255,255,255,0.85)" : theme.palette.text.secondary,
+  marginRight: "0.25rem"
+}));
+var Segments = styled("div")({
   display: "flex",
   alignItems: "center",
-  justifyContent: "center",
-  color: theme.palette.text.disabled
-}));
-var BadgeSlot = styled("div")({
-  position: "absolute",
-  left: "0.75rem",
-  top: "0.75rem"
+  gap: "0.25rem"
 });
-var Name2 = styled("h3")(({ theme }) => ({
-  margin: 0,
-  color: theme.palette.text.primary,
-  fontFamily: theme.typography.fontFamily,
-  fontSize: "1rem",
+var Segment = styled("div", {
+  shouldForwardProp: (prop) => prop !== "$variant"
+})(({ theme, $variant }) => ({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  minWidth: "2.5rem",
+  ...$variant === "card" && {
+    backgroundColor: theme.palette.action.hover,
+    borderRadius: "0.375rem",
+    padding: "0.375rem 0.5rem"
+  }
+}));
+var Value = styled("span", {
+  shouldForwardProp: (prop) => prop !== "$variant"
+})(({ $variant }) => ({
+  fontSize: $variant === "inline" ? "1rem" : "1.5rem",
   fontWeight: 700,
-  lineHeight: 1.4
+  lineHeight: 1,
+  color: $variant === "banner" ? "#fff" : "inherit"
 }));
-var Footer = styled("div")({
-  display: "grid",
-  gap: "1rem",
-  marginTop: "auto",
-  paddingTop: "1rem"
-});
-var ProductCard = forwardRef(
+var Unit = styled("span", {
+  shouldForwardProp: (prop) => prop !== "$variant"
+})(({ theme, $variant }) => ({
+  fontSize: "0.6875rem",
+  color: $variant === "banner" ? "rgba(255,255,255,0.7)" : theme.palette.text.secondary,
+  marginTop: "0.125rem"
+}));
+var Colon = styled("span", {
+  shouldForwardProp: (prop) => prop !== "$variant"
+})(({ theme, $variant }) => ({
+  fontSize: $variant === "inline" ? "1rem" : "1.5rem",
+  fontWeight: 700,
+  color: $variant === "banner" ? "rgba(255,255,255,0.6)" : theme.palette.text.disabled,
+  alignSelf: $variant === "card" ? "flex-start" : "center",
+  marginTop: $variant === "card" ? "0.375rem" : 0
+}));
+var UNITS = ["dni", "godz", "min", "sek"];
+var CountdownTimer = forwardRef(
   ({
-    name,
-    imageUrl,
-    imageAlt,
-    price,
-    originalPrice,
-    currency,
-    locale,
-    lowestPrice,
-    badge,
-    badgeVariant = "success",
-    rating,
-    reviewCount,
-    ctaLabel = "Dodaj do koszyka",
-    onAddToCart,
+    targetDate,
+    variant = "inline",
+    label,
+    expiredLabel = "Promocja zako\u0144czona",
+    onExpire,
     ...props
-  }, ref) => /* @__PURE__ */ jsxs(Root19, { ref, variant: "default", padding: "md", rounded: "lg", ...props, children: [
-    /* @__PURE__ */ jsx(ImageWrap2, { children: /* @__PURE__ */ jsxs(AspectRatio, { ratio: "4/3", children: [
-      imageUrl ? /* @__PURE__ */ jsx(Image2, { src: imageUrl, alt: imageAlt ?? name }) : /* @__PURE__ */ jsx(ImagePlaceholder2, { "aria-label": imageAlt ?? name, children: /* @__PURE__ */ jsx(ImageIcon, { style: { fontSize: 48 } }) }),
-      badge && /* @__PURE__ */ jsx(BadgeSlot, { children: /* @__PURE__ */ jsx(Badge2, { variant: badgeVariant, children: badge }) })
-    ] }) }),
-    /* @__PURE__ */ jsx(Name2, { children: name }),
-    rating !== void 0 && /* @__PURE__ */ jsx(Rating, { value: rating, count: reviewCount, size: "sm" }),
-    /* @__PURE__ */ jsx(
-      Price,
+  }, ref) => {
+    const [timeLeft, setTimeLeft] = useState(() => calcTimeLeft(targetDate));
+    useEffect(() => {
+      const id = setInterval(() => {
+        const tl = calcTimeLeft(targetDate);
+        setTimeLeft(tl);
+        if (!tl) {
+          clearInterval(id);
+          onExpire?.();
+        }
+      }, 1e3);
+      return () => clearInterval(id);
+    }, [targetDate, onExpire]);
+    if (!timeLeft) {
+      return /* @__PURE__ */ jsx(Root19, { ref, $variant: variant, ...props, children: /* @__PURE__ */ jsx(TimerLabel, { $variant: variant, children: expiredLabel }) });
+    }
+    const parts = [timeLeft.days, timeLeft.hours, timeLeft.minutes, timeLeft.seconds];
+    return /* @__PURE__ */ jsxs(
+      Root19,
       {
-        price,
-        originalPrice,
-        currency,
-        locale,
-        lowestPrice,
-        style: { marginTop: "0.5rem" }
+        ref,
+        $variant: variant,
+        "aria-live": "polite",
+        "aria-label": `Czas do ko\u0144ca promocji`,
+        ...props,
+        children: [
+          label && /* @__PURE__ */ jsx(TimerLabel, { $variant: variant, children: label }),
+          /* @__PURE__ */ jsx(Segments, { children: parts.map((val, i) => /* @__PURE__ */ jsxs("div", { style: { display: "contents" }, children: [
+            i > 0 && /* @__PURE__ */ jsx(Colon, { $variant: variant, children: ":" }),
+            /* @__PURE__ */ jsxs(Segment, { $variant: variant, children: [
+              /* @__PURE__ */ jsx(Value, { $variant: variant, children: pad(val) }),
+              variant !== "inline" && /* @__PURE__ */ jsx(Unit, { $variant: variant, children: UNITS[i] })
+            ] })
+          ] }, UNITS[i])) })
+        ]
       }
-    ),
-    /* @__PURE__ */ jsx(Footer, { children: /* @__PURE__ */ jsx(Button, { fullWidth: true, onClick: (e) => {
-      e.stopPropagation();
-      onAddToCart?.();
-    }, children: ctaLabel }) })
-  ] })
+    );
+  }
 );
-ProductCard.displayName = "ProductCard";
-var COLLAPSE_AT = "480px";
-var ContainerRoot = styled("div")({
-  containerType: "inline-size",
-  width: "100%",
-  height: "100%"
-});
-var Inner = styled("div")({
+CountdownTimer.displayName = "CountdownTimer";
+var countdownTimerVariants = ["inline", "card", "banner"];
+var Root20 = styled(Card)({
   display: "flex",
-  flexDirection: "row",
+  flexDirection: "column",
   height: "100%",
-  [`@container (max-width: ${COLLAPSE_AT})`]: {
-    flexDirection: "column"
-  }
+  overflow: "hidden"
 });
-var ImageWrap3 = styled("div")({
+var ImageWrap2 = styled("div")({
   position: "relative",
-  flexShrink: 0,
-  width: "clamp(120px, 33%, 200px)",
-  alignSelf: "stretch",
-  margin: "-1.5rem 1rem -1.5rem -1.5rem",
-  [`@container (max-width: ${COLLAPSE_AT})`]: {
-    width: "auto",
-    alignSelf: "auto",
-    margin: "-1.5rem -1.5rem 1rem",
-    aspectRatio: "4 / 3"
-  }
-});
-var Image3 = styled("img")(({ theme }) => ({
-  position: "absolute",
-  inset: 0,
-  width: "100%",
-  height: "100%",
-  objectFit: "cover",
-  backgroundColor: theme.palette.action.hover
-}));
-var ImagePlaceholder3 = styled("div")(({ theme }) => ({
-  position: "absolute",
-  inset: 0,
-  width: "100%",
-  height: "100%",
-  backgroundColor: theme.palette.action.hover,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  color: theme.palette.text.disabled
-}));
-var BadgeSlot2 = styled("div")({
-  position: "absolute",
-  left: "0.75rem",
-  top: "0.75rem",
-  zIndex: 1
-});
-var Content2 = styled("div")({
-  display: "flex",
-  flexDirection: "column",
-  flex: 1,
-  minWidth: 0
+  margin: "-1.5rem -1.5rem 1rem"
 });
 var Name3 = styled("h3")(({ theme }) => ({
   margin: 0,
@@ -6110,13 +6126,13 @@ var Name3 = styled("h3")(({ theme }) => ({
   fontWeight: 700,
   lineHeight: 1.4
 }));
-var Footer2 = styled("div")({
+var Footer = styled("div")({
   display: "grid",
   gap: "1rem",
   marginTop: "auto",
   paddingTop: "1rem"
 });
-var ProductCardHorizontal = forwardRef(
+var DealCard = forwardRef(
   ({
     name,
     imageUrl,
@@ -6125,22 +6141,14 @@ var ProductCardHorizontal = forwardRef(
     originalPrice,
     currency,
     locale,
-    lowestPrice,
-    badge,
-    badgeVariant = "success",
-    rating,
-    reviewCount,
-    ctaLabel = "Dodaj do koszyka",
+    dealEndsAt,
+    ctaLabel = "Kup teraz",
     onAddToCart,
     ...props
-  }, ref) => /* @__PURE__ */ jsx(Card, { ref, variant: "default", padding: "md", rounded: "lg", ...props, children: /* @__PURE__ */ jsx(ContainerRoot, { children: /* @__PURE__ */ jsxs(Inner, { children: [
-    /* @__PURE__ */ jsxs(ImageWrap3, { children: [
-      imageUrl ? /* @__PURE__ */ jsx(Image3, { src: imageUrl, alt: imageAlt ?? name }) : /* @__PURE__ */ jsx(ImagePlaceholder3, { "aria-label": imageAlt ?? name, children: /* @__PURE__ */ jsx(ImageIcon, { style: { fontSize: 48 } }) }),
-      badge && /* @__PURE__ */ jsx(BadgeSlot2, { children: /* @__PURE__ */ jsx(Badge2, { variant: badgeVariant, children: badge }) })
-    ] }),
-    /* @__PURE__ */ jsxs(Content2, { children: [
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(Root20, { ref, variant: "default", padding: "md", rounded: "lg", ...props, children: [
+      /* @__PURE__ */ jsx(ImageWrap2, { children: /* @__PURE__ */ jsx(ProductCardImage, { src: imageUrl, alt: imageAlt ?? name }) }),
       /* @__PURE__ */ jsx(Name3, { children: name }),
-      rating !== void 0 && /* @__PURE__ */ jsx(Rating, { value: rating, count: reviewCount, size: "sm" }),
       /* @__PURE__ */ jsx(
         Price,
         {
@@ -6148,14 +6156,22 @@ var ProductCardHorizontal = forwardRef(
           originalPrice,
           currency,
           locale,
-          lowestPrice,
           style: { marginTop: "0.5rem" }
         }
       ),
-      /* @__PURE__ */ jsx(Footer2, { children: /* @__PURE__ */ jsx(
+      dealEndsAt && /* @__PURE__ */ jsx(
+        CountdownTimer,
+        {
+          targetDate: dealEndsAt,
+          label: "Oferta ko\u0144czy si\u0119 za:",
+          style: { marginTop: "0.75rem" }
+        }
+      ),
+      /* @__PURE__ */ jsx(Footer, { children: /* @__PURE__ */ jsx(
         Button,
         {
           fullWidth: true,
+          variant: "primary",
           onClick: (e) => {
             e.stopPropagation();
             onAddToCart?.();
@@ -6163,10 +6179,10 @@ var ProductCardHorizontal = forwardRef(
           children: ctaLabel
         }
       ) })
-    ] })
-  ] }) }) })
+    ] });
+  }
 );
-ProductCardHorizontal.displayName = "ProductCardHorizontal";
+DealCard.displayName = "DealCard";
 var ImageWrapper = styled("div", {
   shouldForwardProp: (prop) => prop !== "$ar"
 })(({ $ar }) => ({
@@ -6176,13 +6192,13 @@ var ImageWrapper = styled("div", {
   overflow: "hidden",
   flexShrink: 0
 }));
-var Img = styled("img")({
+var Img2 = styled("img")({
   width: "100%",
   height: "100%",
   objectFit: "cover",
   display: "block"
 });
-var Placeholder2 = styled("div")(({ theme }) => ({
+var Placeholder3 = styled("div")(({ theme }) => ({
   width: "100%",
   height: "100%",
   display: "flex",
@@ -6212,7 +6228,7 @@ var PostCardImage = ({
   const [imgError, setImgError] = useState(false);
   const showPlaceholder = !src || imgError;
   return /* @__PURE__ */ jsxs(ImageWrapper, { $ar: toAspectRatioCss(aspectRatio), className, style, children: [
-    showPlaceholder ? /* @__PURE__ */ jsx(Placeholder2, { children: /* @__PURE__ */ jsx(FileTextIcon, {}) }) : /* @__PURE__ */ jsx(Img, { src, alt, onError: () => setImgError(true) }),
+    showPlaceholder ? /* @__PURE__ */ jsx(Placeholder3, { children: /* @__PURE__ */ jsx(FileTextIcon, {}) }) : /* @__PURE__ */ jsx(Img2, { src, alt, onError: () => setImgError(true) }),
     overlay && !showPlaceholder && /* @__PURE__ */ jsx(Overlay, {})
   ] });
 };
@@ -6382,6 +6398,7 @@ var PostCard = forwardRef(
     author,
     href,
     category,
+    categoryBadgeVariant,
     variant = "vertical",
     cardVariant = "default",
     ...rest
@@ -6393,7 +6410,7 @@ var PostCard = forwardRef(
       isFeatured && showImage && /* @__PURE__ */ jsx(FeaturedImageWrapper, { children: /* @__PURE__ */ jsx(PostCardImage, { src: imageUrl, alt: imageAlt, aspectRatio: "16/9", overlay: true }) }),
       !isFeatured && showImage && (isHorizontal ? /* @__PURE__ */ jsx(HorizontalImageWrapper, { children: /* @__PURE__ */ jsx(PostCardImage, { src: imageUrl, alt: imageAlt, aspectRatio: "4/3" }) }) : /* @__PURE__ */ jsx(PostCardImage, { src: imageUrl, alt: imageAlt, aspectRatio: "16/9" })),
       /* @__PURE__ */ jsxs(StyledContent, { $variant: variant, children: [
-        category && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Badge2, { variant: isFeatured ? "ghost" : "default", children: category }) }),
+        category && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Badge2, { variant: categoryBadgeVariant ?? (isFeatured ? "ghost" : "default"), children: category }) }),
         /* @__PURE__ */ jsx(StyledTitle, { className: "post-card-title", $featured: isFeatured, children: title }),
         excerpt && variant !== "compact" && !isFeatured && /* @__PURE__ */ jsx(StyledExcerpt, { children: excerpt }),
         (date || author) && /* @__PURE__ */ jsx(PostCardMeta, { date, author, inverted: isFeatured })
@@ -6411,28 +6428,10 @@ var postCardVariants = [
   "featured",
   "compact"
 ];
-var Root20 = styled(Card)({
+var Row3 = styled("div")({
   display: "flex",
-  flexDirection: "column",
-  height: "100%"
-});
-var NameRow = styled("div")({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-between",
-  marginBottom: "0.75rem"
-});
-var Name4 = styled("p")(({ theme }) => ({
-  margin: 0,
-  fontFamily: theme.typography.fontFamily,
-  fontWeight: 600,
-  fontSize: "1rem",
-  color: theme.palette.text.primary
-}));
-var PriceRow2 = styled("div")({
-  display: "flex",
-  alignItems: "baseline",
-  gap: "0.25rem"
+  alignItems: "baseline",
+  gap: "0.25rem"
 });
 var Currency = styled("span")(({ theme }) => ({
   fontFamily: theme.typography.fontFamily,
@@ -6442,7 +6441,7 @@ var Currency = styled("span")(({ theme }) => ({
   alignSelf: "flex-start",
   paddingTop: "0.375rem"
 }));
-var Price2 = styled("span")(({ theme }) => ({
+var Amount = styled("span")(({ theme }) => ({
   fontFamily: theme.typography.fontFamily,
   fontWeight: 700,
   fontSize: "3rem",
@@ -6454,28 +6453,21 @@ var Period = styled("span")(({ theme }) => ({
   fontSize: "0.875rem",
   color: theme.palette.text.secondary
 }));
-var Description2 = styled("p")(({ theme }) => ({
-  margin: "0.75rem 0 0",
-  fontFamily: theme.typography.fontFamily,
-  fontSize: "0.875rem",
-  color: theme.palette.text.secondary,
-  lineHeight: 1.6
-}));
-var Divider2 = styled("hr")(({ theme }) => ({
-  border: "none",
-  borderTop: `1px solid ${theme.palette.divider}`,
-  margin: "1.25rem 0"
-}));
-var FeatureList = styled("ul")({
+var PricingCardPrice = ({ price, currency, period }) => /* @__PURE__ */ jsxs(Row3, { children: [
+  currency && /* @__PURE__ */ jsx(Currency, { children: currency }),
+  /* @__PURE__ */ jsx(Amount, { children: price }),
+  period && /* @__PURE__ */ jsx(Period, { children: period })
+] });
+PricingCardPrice.displayName = "PricingCardPrice";
+var List = styled("ul")({
   listStyle: "none",
   margin: 0,
   padding: 0,
   display: "flex",
   flexDirection: "column",
-  gap: "0.625rem",
-  flex: 1
+  gap: "0.625rem"
 });
-var FeatureItem = styled("li", {
+var Item = styled("li", {
   shouldForwardProp: (prop) => prop !== "$included"
 })(({ theme, $included }) => ({
   display: "flex",
@@ -6485,6 +6477,50 @@ var FeatureItem = styled("li", {
   fontSize: "0.875rem",
   color: $included ? theme.palette.text.primary : theme.palette.text.disabled
 }));
+function CheckIcon3() {
+  return /* @__PURE__ */ jsx(CheckCircleOutlinedIcon, { "aria-hidden": "true", style: { fontSize: 16, flexShrink: 0 } });
+}
+function XIcon3() {
+  return /* @__PURE__ */ jsx(HighlightOffIcon, { "aria-hidden": "true", style: { fontSize: 16, flexShrink: 0 } });
+}
+var PricingCardFeatureList = ({ features }) => /* @__PURE__ */ jsx(List, { children: features.map((feature, i) => {
+  const included = feature.included !== false;
+  return /* @__PURE__ */ jsxs(Item, { $included: included, children: [
+    included ? /* @__PURE__ */ jsx(CheckIcon3, {}) : /* @__PURE__ */ jsx(XIcon3, {}),
+    feature.text
+  ] }, i);
+}) });
+PricingCardFeatureList.displayName = "PricingCardFeatureList";
+var Root21 = styled(Card)({
+  display: "flex",
+  flexDirection: "column",
+  height: "100%"
+});
+var NameRow = styled("div")({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  marginBottom: "0.75rem"
+});
+var Name4 = styled("p")(({ theme }) => ({
+  margin: 0,
+  fontFamily: theme.typography.fontFamily,
+  fontWeight: 600,
+  fontSize: "1rem",
+  color: theme.palette.text.primary
+}));
+var Description2 = styled("p")(({ theme }) => ({
+  margin: "0.75rem 0 0",
+  fontFamily: theme.typography.fontFamily,
+  fontSize: "0.875rem",
+  color: theme.palette.text.secondary,
+  lineHeight: 1.6
+}));
+var Divider2 = styled("hr")(({ theme }) => ({
+  border: "none",
+  borderTop: `1px solid ${theme.palette.divider}`,
+  margin: "1.25rem 0"
+}));
 var CtaLink = styled("a", {
   shouldForwardProp: (prop) => prop !== "$variant"
 })(({ theme, $variant }) => ({
@@ -6517,12 +6553,6 @@ var CtaLink = styled("a", {
 var CtaWrapper = styled("div")({
   marginTop: "1.5rem"
 });
-function CheckIcon3() {
-  return /* @__PURE__ */ jsx(CheckCircleOutlinedIcon, { "aria-hidden": "true", style: { fontSize: 16, flexShrink: 0 } });
-}
-function XIcon3() {
-  return /* @__PURE__ */ jsx(HighlightOffIcon, { "aria-hidden": "true", style: { fontSize: 16, flexShrink: 0 } });
-}
 var PricingCard = forwardRef(
   ({
     name,
@@ -6537,44 +6567,320 @@ var PricingCard = forwardRef(
     href,
     popular = false,
     popularLabel = "Najpopularniejszy",
+    popularBadgeVariant = "default",
     cardVariant,
     ...props
   }, ref) => {
     const resolvedCardVariant = cardVariant ?? (popular ? "gradient-primary" : "default");
     const resolvedCtaVariant = ctaVariant ?? (popular ? "primary" : "ghost");
-    return /* @__PURE__ */ jsxs(Root20, { ref, variant: resolvedCardVariant, padding: "lg", rounded: "lg", ...props, children: [
+    return /* @__PURE__ */ jsxs(Root21, { ref, variant: resolvedCardVariant, padding: "lg", rounded: "lg", ...props, children: [
       /* @__PURE__ */ jsxs(NameRow, { children: [
         /* @__PURE__ */ jsx(Name4, { children: name }),
-        popular && /* @__PURE__ */ jsx(Badge2, { variant: "default", children: popularLabel })
-      ] }),
-      /* @__PURE__ */ jsxs(PriceRow2, { children: [
-        currency && /* @__PURE__ */ jsx(Currency, { children: currency }),
-        /* @__PURE__ */ jsx(Price2, { children: price }),
-        period && /* @__PURE__ */ jsx(Period, { children: period })
+        popular && /* @__PURE__ */ jsx(Badge2, { variant: popularBadgeVariant, children: popularLabel })
       ] }),
+      /* @__PURE__ */ jsx(PricingCardPrice, { price, currency, period }),
       description && /* @__PURE__ */ jsx(Description2, { children: description }),
       features.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(Divider2, {}),
-        /* @__PURE__ */ jsx(FeatureList, { children: features.map((feature, i) => {
-          const included = feature.included !== false;
-          return /* @__PURE__ */ jsxs(FeatureItem, { $included: included, children: [
-            included ? /* @__PURE__ */ jsx(CheckIcon3, {}) : /* @__PURE__ */ jsx(XIcon3, {}),
-            feature.text
-          ] }, i);
-        }) })
+        /* @__PURE__ */ jsx(PricingCardFeatureList, { features })
       ] }),
       /* @__PURE__ */ jsx(CtaWrapper, { children: href ? /* @__PURE__ */ jsx(CtaLink, { href, $variant: resolvedCtaVariant, children: ctaLabel }) : /* @__PURE__ */ jsx(Button, { variant: resolvedCtaVariant, fullWidth: true, onClick: onCtaClick, children: ctaLabel }) })
     ] });
   }
 );
 PricingCard.displayName = "PricingCard";
-var Root21 = styled(Card, {
+var sizeMap6 = {
+  sm: "1rem",
+  md: "1.25rem",
+  lg: "1.5rem"
+};
+var Root22 = styled("div")(({ theme }) => ({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "0.5rem",
+  color: theme.palette.text.secondary,
+  fontFamily: theme.typography.fontFamily
+}));
+var Stars = styled("div")({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "0.125rem"
+});
+var StarButton = styled("button")(
+  ({ theme, $size, $active }) => ({
+    appearance: "none",
+    border: 0,
+    background: "transparent",
+    padding: 0,
+    color: $active ? "#f59e0b" : theme.palette.action.disabled,
+    cursor: "pointer",
+    fontSize: sizeMap6[$size],
+    lineHeight: 1,
+    "&:disabled": {
+      cursor: "default"
+    }
+  })
+);
+var Meta = styled("span")(({ theme }) => ({
+  fontSize: "0.875rem",
+  color: theme.palette.text.secondary
+}));
+var Rating = forwardRef(
+  ({ value, max = 5, readonly = true, size = "md", label, count, onChange, ...props }, ref) => {
+    const roundedValue = Math.round(value);
+    const meta = label ?? (count !== void 0 ? `(${count})` : void 0);
+    return /* @__PURE__ */ jsxs(Root22, { ref, "aria-label": `Ocena ${value} z ${max}`, ...props, children: [
+      /* @__PURE__ */ jsx(
+        Stars,
+        {
+          role: readonly ? "img" : "radiogroup",
+          "aria-label": readonly ? void 0 : "Wybierz ocen\u0119",
+          children: Array.from({ length: max }, (_, index) => {
+            const starValue = index + 1;
+            return /* @__PURE__ */ jsx(
+              StarButton,
+              {
+                type: "button",
+                $size: size,
+                $active: starValue <= roundedValue,
+                disabled: readonly,
+                "aria-label": `${starValue} z ${max}`,
+                "aria-checked": readonly ? void 0 : starValue === roundedValue,
+                role: readonly ? void 0 : "radio",
+                onClick: () => onChange?.(starValue),
+                children: "\u2605"
+              },
+              starValue
+            );
+          })
+        }
+      ),
+      meta && /* @__PURE__ */ jsx(Meta, { children: meta })
+    ] });
+  }
+);
+Rating.displayName = "Rating";
+var Container2 = styled("div")({
+  width: "100%",
+  height: "100%"
+});
+var Img3 = styled("img")(({ theme }) => ({
+  position: "absolute",
+  inset: 0,
+  width: "100%",
+  height: "100%",
+  objectFit: "cover",
+  backgroundColor: theme.palette.action.hover
+}));
+var Placeholder4 = styled("div")(({ theme }) => ({
+  position: "absolute",
+  inset: 0,
+  width: "100%",
+  height: "100%",
+  backgroundColor: theme.palette.action.hover,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: theme.palette.text.disabled
+}));
+var BadgeSlot = styled("div")({
+  position: "absolute",
+  left: "0.75rem",
+  top: "0.75rem",
+  zIndex: 1
+});
+var ProductCardImage = ({
+  src,
+  alt,
+  badge,
+  badgeVariant = "success"
+}) => /* @__PURE__ */ jsxs(Container2, { children: [
+  src ? /* @__PURE__ */ jsx(Img3, { src, alt }) : /* @__PURE__ */ jsx(Placeholder4, { "aria-label": alt, children: /* @__PURE__ */ jsx(ImageIcon, { style: { fontSize: 48 } }) }),
+  badge && /* @__PURE__ */ jsx(BadgeSlot, { children: /* @__PURE__ */ jsx(Badge2, { variant: badgeVariant, children: badge }) })
+] });
+ProductCardImage.displayName = "ProductCardImage";
+var Root23 = styled(Card)({
+  display: "flex",
+  flexDirection: "column",
+  height: "100%",
+  overflow: "hidden"
+});
+var Name5 = styled("h3")(({ theme }) => ({
+  margin: 0,
+  color: theme.palette.text.primary,
+  fontFamily: theme.typography.fontFamily,
+  fontSize: "1rem",
+  fontWeight: 700,
+  lineHeight: 1.4
+}));
+var Footer2 = styled("div")({
+  display: "grid",
+  gap: "1rem",
+  marginTop: "auto",
+  paddingTop: "1rem"
+});
+var ProductCard = forwardRef(
+  ({
+    name,
+    imageUrl,
+    imageAlt,
+    price,
+    originalPrice,
+    currency,
+    locale,
+    lowestPrice,
+    badge,
+    badgeVariant = "success",
+    imageRatio = "4/3",
+    rating,
+    reviewCount,
+    ctaLabel = "Dodaj do koszyka",
+    onAddToCart,
+    buttonVariant = "primary",
+    disabledButton = false,
+    hideButton = false,
+    ...props
+  }, ref) => /* @__PURE__ */ jsxs(Root23, { ref, variant: "default", padding: "md", rounded: "lg", ...props, children: [
+    /* @__PURE__ */ jsx(AspectRatio, { ratio: imageRatio, style: { margin: "-1.5rem -1.5rem 1rem", width: "calc(100% + 3rem)" }, children: /* @__PURE__ */ jsx(
+      ProductCardImage,
+      {
+        src: imageUrl,
+        alt: imageAlt ?? name,
+        badge,
+        badgeVariant
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Name5, { children: name }),
+    rating !== void 0 && /* @__PURE__ */ jsx(Rating, { value: rating, count: reviewCount, size: "sm" }),
+    /* @__PURE__ */ jsx(
+      Price,
+      {
+        price,
+        originalPrice,
+        currency,
+        locale,
+        lowestPrice,
+        style: { marginTop: "0.5rem" }
+      }
+    ),
+    !hideButton && /* @__PURE__ */ jsx(Footer2, { children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        fullWidth: true,
+        variant: buttonVariant,
+        disabled: disabledButton,
+        onClick: (e) => {
+          e.stopPropagation();
+          onAddToCart?.();
+        },
+        children: ctaLabel
+      }
+    ) })
+  ] })
+);
+ProductCard.displayName = "ProductCard";
+var COLLAPSE_AT = "480px";
+var ContainerRoot = styled("div")({
+  containerType: "inline-size",
+  width: "100%",
+  height: "100%"
+});
+var Inner = styled("div")({
+  display: "flex",
+  flexDirection: "row",
+  height: "100%",
+  [`@container (max-width: ${COLLAPSE_AT})`]: {
+    flexDirection: "column"
+  }
+});
+var ImageWrap3 = styled("div")({
+  position: "relative",
+  flexShrink: 0,
+  width: "clamp(120px, 33%, 200px)",
+  alignSelf: "stretch",
+  margin: "-1.5rem 1rem -1.5rem -1.5rem",
+  [`@container (max-width: ${COLLAPSE_AT})`]: {
+    width: "auto",
+    alignSelf: "auto",
+    margin: "-1.5rem -1.5rem 1rem",
+    aspectRatio: "4 / 3"
+  }
+});
+var Content = styled("div")({
+  display: "flex",
+  flexDirection: "column",
+  flex: 1,
+  minWidth: 0
+});
+var Name6 = styled("h3")(({ theme }) => ({
+  margin: 0,
+  color: theme.palette.text.primary,
+  fontFamily: theme.typography.fontFamily,
+  fontSize: "1rem",
+  fontWeight: 700,
+  lineHeight: 1.4
+}));
+var Footer3 = styled("div")({
+  display: "grid",
+  gap: "1rem",
+  marginTop: "auto",
+  paddingTop: "1rem"
+});
+var ProductCardHorizontal = forwardRef(
+  ({
+    name,
+    imageUrl,
+    imageAlt,
+    price,
+    originalPrice,
+    currency,
+    locale,
+    lowestPrice,
+    badge,
+    badgeVariant = "success",
+    rating,
+    reviewCount,
+    ctaLabel = "Dodaj do koszyka",
+    onAddToCart,
+    ...props
+  }, ref) => /* @__PURE__ */ jsx(Card, { ref, variant: "default", padding: "md", rounded: "lg", ...props, children: /* @__PURE__ */ jsx(ContainerRoot, { children: /* @__PURE__ */ jsxs(Inner, { children: [
+    /* @__PURE__ */ jsx(ImageWrap3, { children: /* @__PURE__ */ jsx(ProductCardImage, { src: imageUrl, alt: imageAlt ?? name, badge, badgeVariant }) }),
+    /* @__PURE__ */ jsxs(Content, { children: [
+      /* @__PURE__ */ jsx(Name6, { children: name }),
+      rating !== void 0 && /* @__PURE__ */ jsx(Rating, { value: rating, count: reviewCount, size: "sm" }),
+      /* @__PURE__ */ jsx(
+        Price,
+        {
+          price,
+          originalPrice,
+          currency,
+          locale,
+          lowestPrice,
+          style: { marginTop: "0.5rem" }
+        }
+      ),
+      /* @__PURE__ */ jsx(Footer3, { children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          fullWidth: true,
+          onClick: (e) => {
+            e.stopPropagation();
+            onAddToCart?.();
+          },
+          children: ctaLabel
+        }
+      ) })
+    ] })
+  ] }) }) })
+);
+ProductCardHorizontal.displayName = "ProductCardHorizontal";
+var Root24 = styled(Card, {
   shouldForwardProp: (prop) => prop !== "$align"
 })(({ $align }) => ({
   textAlign: $align,
   height: "100%"
 }));
-var Value = styled("p")(({ theme }) => ({
+var Value2 = styled("p")(({ theme }) => ({
   margin: 0,
   fontFamily: theme.typography.fontFamily,
   fontSize: "2.5rem",
@@ -6598,19 +6904,85 @@ var Description3 = styled("p")(({ theme }) => ({
   lineHeight: 1.5
 }));
 var StatCard = forwardRef(
-  ({ stat, cardVariant = "default", align = "center", ...props }, ref) => /* @__PURE__ */ jsxs(Root21, { ref, variant: cardVariant, padding: "lg", rounded: "lg", $align: align, ...props, children: [
-    /* @__PURE__ */ jsx(Value, { children: stat.value }),
+  ({ stat, cardVariant = "default", align = "center", ...props }, ref) => /* @__PURE__ */ jsxs(Root24, { ref, variant: cardVariant, padding: "lg", rounded: "lg", $align: align, ...props, children: [
+    /* @__PURE__ */ jsx(Value2, { children: stat.value }),
     /* @__PURE__ */ jsx(Label3, { children: stat.label }),
     stat.description && /* @__PURE__ */ jsx(Description3, { children: stat.description })
   ] })
 );
-StatCard.displayName = "StatCard";
-var Root22 = styled(Card)({
-  display: "flex",
-  flexDirection: "column",
-  gap: "1.25rem",
-  height: "100%"
-});
+StatCard.displayName = "StatCard";
+var Img4 = styled("img")({
+  width: "4rem",
+  height: "4rem",
+  flexShrink: 0,
+  borderRadius: "50%",
+  objectFit: "cover"
+});
+function deriveInitials2(name) {
+  return name.split(" ").filter(Boolean).slice(0, 2).map((part) => part[0]).join("").toUpperCase();
+}
+var TeamMemberAvatar = ({
+  name,
+  avatarUrl,
+  avatarAlt,
+  initials,
+  avatarColor = "primary"
+}) => {
+  if (avatarUrl) {
+    return /* @__PURE__ */ jsx(Img4, { src: avatarUrl, alt: avatarAlt ?? name });
+  }
+  return /* @__PURE__ */ jsx(Avatar, { initials: initials ?? deriveInitials2(name), size: "xl", color: avatarColor });
+};
+TeamMemberAvatar.displayName = "TeamMemberAvatar";
+var Root25 = styled("div")({ minWidth: 0 });
+var Name7 = styled("h3")(({ theme }) => ({
+  margin: 0,
+  color: theme.palette.text.primary,
+  fontFamily: theme.typography.fontFamily,
+  fontSize: "1rem",
+  fontWeight: 700,
+  lineHeight: 1.4
+}));
+var Role = styled("p")(({ theme }) => ({
+  margin: "0.25rem 0 0",
+  color: theme.palette.text.secondary,
+  fontFamily: theme.typography.fontFamily,
+  fontSize: "0.875rem",
+  lineHeight: 1.5
+}));
+var TeamMemberInfo = ({ name, role }) => /* @__PURE__ */ jsxs(Root25, { children: [
+  /* @__PURE__ */ jsx(Name7, { children: name }),
+  role && /* @__PURE__ */ jsx(Role, { children: role })
+] });
+TeamMemberInfo.displayName = "TeamMemberInfo";
+var Root26 = styled(Card)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: "1rem",
+  height: "100%",
+  transition: "border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease",
+  "&:hover": {
+    borderColor: theme.palette.primary.main,
+    boxShadow: theme.shadows[2],
+    transform: "translateY(-2px)"
+  }
+}));
+var TeamMemberCard = forwardRef(
+  ({ member, cardVariant = "default", ...props }, ref) => /* @__PURE__ */ jsxs(Root26, { ref, variant: cardVariant, padding: "lg", rounded: "lg", ...props, children: [
+    /* @__PURE__ */ jsx(
+      TeamMemberAvatar,
+      {
+        name: member.name,
+        avatarUrl: member.avatarUrl,
+        avatarAlt: member.avatarAlt,
+        initials: member.initials,
+        avatarColor: member.avatarColor
+      }
+    ),
+    /* @__PURE__ */ jsx(TeamMemberInfo, { name: member.name, role: member.role })
+  ] })
+);
+TeamMemberCard.displayName = "TeamMemberCard";
 var Quote = styled("blockquote")(({ theme }) => ({
   margin: 0,
   fontFamily: theme.typography.fontFamily,
@@ -6631,104 +7003,162 @@ var Quote = styled("blockquote")(({ theme }) => ({
     marginLeft: "0.125rem"
   }
 }));
-var Footer3 = styled("div")({
+var TestimonialQuote = ({ quote }) => /* @__PURE__ */ jsx(Quote, { children: quote });
+TestimonialQuote.displayName = "TestimonialQuote";
+var Root27 = styled("div")({
   display: "flex",
   alignItems: "center",
   gap: "0.75rem"
 });
-var AvatarImage = styled("img")({
+var AvatarImg2 = styled("img")({
   width: "2.5rem",
   height: "2.5rem",
   borderRadius: "50%",
   objectFit: "cover",
   flexShrink: 0
 });
-var AuthorInfo = styled("div")({
-  minWidth: 0
-});
-var AuthorName = styled("p")(({ theme }) => ({
+var Info = styled("div")({ minWidth: 0 });
+var Name8 = styled("p")(({ theme }) => ({
   margin: 0,
   fontFamily: theme.typography.fontFamily,
   fontSize: "0.875rem",
   fontWeight: 700,
   color: theme.palette.text.primary
 }));
-var AuthorRole = styled("p")(({ theme }) => ({
+var Role2 = styled("p")(({ theme }) => ({
   margin: "0.125rem 0 0",
   fontFamily: theme.typography.fontFamily,
   fontSize: "0.8125rem",
   color: theme.palette.text.secondary
 }));
+function deriveInitials3(name) {
+  return name.split(" ").filter(Boolean).slice(0, 2).map((p) => p[0]).join("").toUpperCase();
+}
+var TestimonialAuthor = ({
+  authorName,
+  authorRole,
+  authorAvatarUrl,
+  authorInitials
+}) => /* @__PURE__ */ jsxs(Root27, { children: [
+  authorAvatarUrl ? /* @__PURE__ */ jsx(AvatarImg2, { src: authorAvatarUrl, alt: authorName }) : /* @__PURE__ */ jsx(Avatar, { initials: authorInitials ?? deriveInitials3(authorName), size: "md", color: "primary" }),
+  /* @__PURE__ */ jsxs(Info, { children: [
+    /* @__PURE__ */ jsx(Name8, { children: authorName }),
+    authorRole && /* @__PURE__ */ jsx(Role2, { children: authorRole })
+  ] })
+] });
+TestimonialAuthor.displayName = "TestimonialAuthor";
+var Root28 = styled(Card)({
+  display: "flex",
+  flexDirection: "column",
+  gap: "1.25rem",
+  height: "100%"
+});
 var TestimonialCard = forwardRef(
-  ({ testimonial, cardVariant = "default", ...props }, ref) => {
-    const initials = testimonial.authorInitials ?? testimonial.authorName.split(" ").filter(Boolean).slice(0, 2).map((p) => p[0]).join("").toUpperCase();
-    return /* @__PURE__ */ jsxs(Root22, { ref, variant: cardVariant, padding: "lg", rounded: "lg", ...props, children: [
-      testimonial.rating && /* @__PURE__ */ jsx(Rating, { value: testimonial.rating, readonly: true, size: "sm" }),
-      /* @__PURE__ */ jsx(Quote, { children: testimonial.quote }),
-      /* @__PURE__ */ jsxs(Footer3, { children: [
-        testimonial.authorAvatarUrl ? /* @__PURE__ */ jsx(AvatarImage, { src: testimonial.authorAvatarUrl, alt: testimonial.authorName }) : /* @__PURE__ */ jsx(Avatar, { initials, size: "md", color: "primary" }),
-        /* @__PURE__ */ jsxs(AuthorInfo, { children: [
-          /* @__PURE__ */ jsx(AuthorName, { children: testimonial.authorName }),
-          testimonial.authorRole && /* @__PURE__ */ jsx(AuthorRole, { children: testimonial.authorRole })
-        ] })
-      ] })
-    ] });
-  }
+  ({ testimonial, cardVariant = "default", ...props }, ref) => /* @__PURE__ */ jsxs(Root28, { ref, variant: cardVariant, padding: "lg", rounded: "lg", ...props, children: [
+    testimonial.rating && /* @__PURE__ */ jsx(Rating, { value: testimonial.rating, readonly: true, size: "sm" }),
+    /* @__PURE__ */ jsx(TestimonialQuote, { quote: testimonial.quote }),
+    /* @__PURE__ */ jsx(
+      TestimonialAuthor,
+      {
+        authorName: testimonial.authorName,
+        authorRole: testimonial.authorRole,
+        authorAvatarUrl: testimonial.authorAvatarUrl,
+        authorInitials: testimonial.authorInitials
+      }
+    )
+  ] })
 );
 TestimonialCard.displayName = "TestimonialCard";
-var Root23 = styled(Card)(({ theme }) => ({
+var Root29 = styled("div")(({ theme }) => ({
+  position: "relative",
+  padding: "1.5rem",
+  borderRadius: "1rem",
+  border: `2px dashed ${theme.palette.primary.main}`,
+  backgroundColor: theme.palette.background.paper,
+  fontFamily: theme.typography.fontFamily,
   display: "flex",
-  alignItems: "center",
-  gap: "1rem",
-  height: "100%",
-  transition: "border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease",
-  "&:hover": {
-    borderColor: theme.palette.primary.main,
-    boxShadow: theme.shadows[2],
-    transform: "translateY(-2px)"
-  }
+  flexDirection: "column",
+  gap: "1rem"
 }));
-var AvatarImage2 = styled("img")({
-  width: "4rem",
-  height: "4rem",
-  flexShrink: 0,
-  borderRadius: "50%",
-  objectFit: "cover"
-});
-var Content3 = styled("div")({
-  minWidth: 0
+var Header = styled("div")({
+  display: "flex",
+  alignItems: "center",
+  gap: "0.75rem"
 });
-var Name5 = styled("h3")(({ theme }) => ({
-  margin: 0,
-  color: theme.palette.text.primary,
-  fontFamily: theme.typography.fontFamily,
-  fontSize: "1rem",
-  fontWeight: 700,
-  lineHeight: 1.4
+var Discount = styled("span")(({ theme }) => ({
+  fontSize: "2rem",
+  fontWeight: 800,
+  lineHeight: 1,
+  color: theme.palette.primary.main
 }));
-var Role = styled("p")(({ theme }) => ({
-  margin: "0.25rem 0 0",
-  color: theme.palette.text.secondary,
-  fontFamily: theme.typography.fontFamily,
+var Description4 = styled("p")(({ theme }) => ({
+  margin: 0,
   fontSize: "0.875rem",
+  color: theme.palette.text.secondary,
   lineHeight: 1.5
 }));
-function getInitials(member) {
-  if (member.initials) {
-    return member.initials;
+var CodeRow = styled("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: "0.5rem",
+  padding: "0.625rem 1rem",
+  backgroundColor: theme.palette.action.hover,
+  borderRadius: theme.shape.borderRadius
+}));
+var Code = styled("span")(({ theme }) => ({
+  flex: 1,
+  fontFamily: "monospace",
+  fontSize: "1rem",
+  fontWeight: 700,
+  letterSpacing: "0.1em",
+  color: theme.palette.text.primary,
+  userSelect: "all"
+}));
+var CopyButton = styled("button")(({ theme }) => ({
+  border: 0,
+  background: "transparent",
+  color: theme.palette.primary.main,
+  cursor: "pointer",
+  padding: "0.25rem",
+  display: "flex",
+  alignItems: "center",
+  borderRadius: theme.shape.borderRadius,
+  transition: "background-color 150ms ease",
+  "&:hover": {
+    backgroundColor: theme.palette.action.hover
   }
-  return member.name.split(" ").filter(Boolean).slice(0, 2).map((part) => part[0]).join("").toUpperCase();
-}
-var TeamMemberCard = forwardRef(
-  ({ member, cardVariant = "default", ...props }, ref) => /* @__PURE__ */ jsxs(Root23, { ref, variant: cardVariant, padding: "lg", rounded: "lg", ...props, children: [
-    member.avatarUrl ? /* @__PURE__ */ jsx(AvatarImage2, { src: member.avatarUrl, alt: member.avatarAlt ?? member.name }) : /* @__PURE__ */ jsx(Avatar, { initials: getInitials(member), size: "xl", color: member.avatarColor ?? "primary" }),
-    /* @__PURE__ */ jsxs(Content3, { children: [
-      /* @__PURE__ */ jsx(Name5, { children: member.name }),
-      /* @__PURE__ */ jsx(Role, { children: member.role })
+}));
+var Expiry = styled("p")(({ theme }) => ({
+  margin: 0,
+  fontSize: "0.75rem",
+  color: theme.palette.text.disabled
+}));
+var VoucherCard = forwardRef(
+  ({ code, discount, description, expiresAt, copied = false, onCopy, ...props }, ref) => /* @__PURE__ */ jsxs(Root29, { ref, ...props, children: [
+    /* @__PURE__ */ jsxs(Header, { children: [
+      /* @__PURE__ */ jsx(LocalOfferIcon, { style: { fontSize: 20 }, color: "primary" }),
+      /* @__PURE__ */ jsx(Discount, { children: discount })
+    ] }),
+    description && /* @__PURE__ */ jsx(Description4, { children: description }),
+    /* @__PURE__ */ jsxs(CodeRow, { children: [
+      /* @__PURE__ */ jsx(Code, { children: code }),
+      /* @__PURE__ */ jsx(
+        CopyButton,
+        {
+          type: "button",
+          "aria-label": copied ? "Skopiowano" : "Kopiuj kod",
+          onClick: () => onCopy?.(code),
+          children: copied ? /* @__PURE__ */ jsx(CheckIcon, { style: { fontSize: 18, color: "green" } }) : /* @__PURE__ */ jsx(ContentCopyIcon, { style: { fontSize: 18 } })
+        }
+      )
+    ] }),
+    expiresAt && /* @__PURE__ */ jsxs(Expiry, { children: [
+      "Wa\u017Cny do: ",
+      expiresAt
     ] })
   ] })
 );
-TeamMemberCard.displayName = "TeamMemberCard";
+VoucherCard.displayName = "VoucherCard";
 var Wrapper3 = styled("div")({
   width: "100%",
   overflowX: "auto",
@@ -6813,7 +7243,7 @@ var RemoveBtn = styled("button")(({ theme }) => ({
   }
 }));
 var Tbody = styled("tbody")({});
-var Row3 = styled("tr", {
+var Row4 = styled("tr", {
   shouldForwardProp: (p) => p !== "$diff"
 })(({ theme, $diff }) => ({
   backgroundColor: $diff ? theme.palette.mode === "dark" ? "rgba(255,255,255,0.03)" : "rgba(0,0,0,0.02)" : "transparent",
@@ -6834,210 +7264,75 @@ var ValueCell = styled("td", {
 })(({ theme, $highlight }) => ({
   padding: "0.75rem 1rem",
   textAlign: "center",
-  fontSize: "0.9375rem",
-  color: theme.palette.text.primary,
-  borderBottom: `1px solid ${theme.palette.divider}`,
-  fontWeight: $highlight ? 700 : 400,
-  backgroundColor: $highlight ? theme.palette.mode === "dark" ? "rgba(99,102,241,0.08)" : "rgba(99,102,241,0.06)" : "transparent"
-}));
-var BoolIcon = ({ value }) => /* @__PURE__ */ jsx("span", { "aria-label": value ? "Tak" : "Nie", style: { display: "inline-flex", fontSize: "1.125rem" }, children: value ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(CloseIcon, {}) });
-function formatValue(v) {
-  if (typeof v === "boolean") return /* @__PURE__ */ jsx(BoolIcon, { value: v });
-  return String(v);
-}
-function isDiff(specKey, products) {
-  const values = products.map((p) => p.specs[specKey]);
-  return values.some((v) => String(v) !== String(values[0]));
-}
-function getSpecKeys(products) {
-  const keys = /* @__PURE__ */ new Set();
-  products.forEach((p) => Object.keys(p.specs).forEach((k) => keys.add(k)));
-  return Array.from(keys);
-}
-function CompareTool({
-  products,
-  specLabels = {},
-  onRemove,
-  highlightDifferences = true,
-  className
-}) {
-  if (!products.length) return null;
-  const specKeys = getSpecKeys(products);
-  const bestValues = {};
-  specKeys.forEach((key) => {
-    const nums = products.map((p) => p.specs[key]).filter((v) => typeof v === "number");
-    if (nums.length === products.length) {
-      bestValues[key] = Math.max(...nums);
-    }
-  });
-  return /* @__PURE__ */ jsx(Wrapper3, { className, children: /* @__PURE__ */ jsxs(Table, { role: "table", "aria-label": "Por\xF3wnanie produkt\xF3w", children: [
-    /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs("tr", { children: [
-      /* @__PURE__ */ jsx(HeaderCell, { $isLabel: true, as: "th", scope: "col", children: "Parametr" }),
-      products.map((p) => /* @__PURE__ */ jsxs(HeaderCell, { as: "th", scope: "col", children: [
-        p.imageUrl ? /* @__PURE__ */ jsx(ProductImage, { src: p.imageUrl, alt: p.name }) : /* @__PURE__ */ jsx(ProductImagePlaceholder, { "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx(ProductName, { children: p.name }),
-        /* @__PURE__ */ jsx(ProductPrice, { children: p.price }),
-        onRemove && /* @__PURE__ */ jsx(
-          RemoveBtn,
-          {
-            type: "button",
-            "aria-label": `Usu\u0144 ${p.name} z por\xF3wnania`,
-            onClick: () => onRemove(p.id),
-            children: "Usu\u0144"
-          }
-        )
-      ] }, p.id))
-    ] }) }),
-    /* @__PURE__ */ jsx(Tbody, { children: specKeys.map((key) => {
-      const diff = highlightDifferences && isDiff(key, products);
-      return /* @__PURE__ */ jsxs(Row3, { $diff: diff, children: [
-        /* @__PURE__ */ jsx(LabelCell, { as: "th", scope: "row", children: specLabels[key] ?? key }),
-        products.map((p) => {
-          const val = p.specs[key];
-          const isHighlighted = highlightDifferences && key in bestValues && typeof val === "number" && val === bestValues[key];
-          return /* @__PURE__ */ jsx(ValueCell, { $highlight: isHighlighted, children: val !== void 0 ? formatValue(val) : /* @__PURE__ */ jsx("span", { "aria-label": "Brak danych", children: "\u2014" }) }, p.id);
-        })
-      ] }, key);
-    }) })
-  ] }) });
-}
-function calcTimeLeft(target) {
-  const diff = new Date(target).getTime() - Date.now();
-  if (diff <= 0) return null;
-  return {
-    days: Math.floor(diff / 864e5),
-    hours: Math.floor(diff % 864e5 / 36e5),
-    minutes: Math.floor(diff % 36e5 / 6e4),
-    seconds: Math.floor(diff % 6e4 / 1e3)
-  };
-}
-function pad(n) {
-  return String(n).padStart(2, "0");
-}
-var Root24 = styled("div", {
-  shouldForwardProp: (prop) => prop !== "$variant"
-})(({ theme, $variant }) => ({
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "space-between",
-  flexWrap: "wrap",
-  gap: "0.5rem",
-  fontFamily: theme.typography.fontFamily,
-  ...$variant === "card" && {
-    backgroundColor: theme.palette.background.paper,
-    border: `1px solid ${theme.palette.divider}`,
-    borderRadius: theme.shape.borderRadius,
-    padding: "1rem 1.5rem"
-  },
-  ...$variant === "banner" && {
-    backgroundColor: theme.palette.error.main,
-    color: "#fff",
-    borderRadius: theme.shape.borderRadius,
-    padding: "0.75rem 1.25rem"
-  }
-}));
-var TimerLabel = styled("span", {
-  shouldForwardProp: (prop) => prop !== "$variant"
-})(({ theme, $variant }) => ({
-  fontSize: "0.875rem",
-  fontWeight: 600,
-  color: $variant === "banner" ? "rgba(255,255,255,0.85)" : theme.palette.text.secondary,
-  marginRight: "0.25rem"
-}));
-var Segments = styled("div")({
-  display: "flex",
-  alignItems: "center",
-  gap: "0.25rem"
-});
-var Segment = styled("div", {
-  shouldForwardProp: (prop) => prop !== "$variant"
-})(({ theme, $variant }) => ({
-  display: "flex",
-  flexDirection: "column",
-  alignItems: "center",
-  minWidth: "2.5rem",
-  ...$variant === "card" && {
-    backgroundColor: theme.palette.action.hover,
-    borderRadius: "0.375rem",
-    padding: "0.375rem 0.5rem"
-  }
-}));
-var Value2 = styled("span", {
-  shouldForwardProp: (prop) => prop !== "$variant"
-})(({ $variant }) => ({
-  fontSize: $variant === "inline" ? "1rem" : "1.5rem",
-  fontWeight: 700,
-  lineHeight: 1,
-  color: $variant === "banner" ? "#fff" : "inherit"
-}));
-var Unit = styled("span", {
-  shouldForwardProp: (prop) => prop !== "$variant"
-})(({ theme, $variant }) => ({
-  fontSize: "0.6875rem",
-  color: $variant === "banner" ? "rgba(255,255,255,0.7)" : theme.palette.text.secondary,
-  marginTop: "0.125rem"
-}));
-var Colon = styled("span", {
-  shouldForwardProp: (prop) => prop !== "$variant"
-})(({ theme, $variant }) => ({
-  fontSize: $variant === "inline" ? "1rem" : "1.5rem",
-  fontWeight: 700,
-  color: $variant === "banner" ? "rgba(255,255,255,0.6)" : theme.palette.text.disabled,
-  alignSelf: $variant === "card" ? "flex-start" : "center",
-  marginTop: $variant === "card" ? "0.375rem" : 0
+  fontSize: "0.9375rem",
+  color: theme.palette.text.primary,
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  fontWeight: $highlight ? 700 : 400,
+  backgroundColor: $highlight ? theme.palette.mode === "dark" ? "rgba(99,102,241,0.08)" : "rgba(99,102,241,0.06)" : "transparent"
 }));
-var UNITS = ["dni", "godz", "min", "sek"];
-var CountdownTimer = forwardRef(
-  ({
-    targetDate,
-    variant = "inline",
-    label,
-    expiredLabel = "Promocja zako\u0144czona",
-    onExpire,
-    ...props
-  }, ref) => {
-    const [timeLeft, setTimeLeft] = useState(() => calcTimeLeft(targetDate));
-    useEffect(() => {
-      const id = setInterval(() => {
-        const tl = calcTimeLeft(targetDate);
-        setTimeLeft(tl);
-        if (!tl) {
-          clearInterval(id);
-          onExpire?.();
-        }
-      }, 1e3);
-      return () => clearInterval(id);
-    }, [targetDate, onExpire]);
-    if (!timeLeft) {
-      return /* @__PURE__ */ jsx(Root24, { ref, $variant: variant, ...props, children: /* @__PURE__ */ jsx(TimerLabel, { $variant: variant, children: expiredLabel }) });
+var BoolIcon = ({ value }) => /* @__PURE__ */ jsx("span", { "aria-label": value ? "Tak" : "Nie", style: { display: "inline-flex", fontSize: "1.125rem" }, children: value ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(CloseIcon, {}) });
+function formatValue(v) {
+  if (typeof v === "boolean") return /* @__PURE__ */ jsx(BoolIcon, { value: v });
+  return String(v);
+}
+function isDiff(specKey, products) {
+  const values = products.map((p) => p.specs[specKey]);
+  return values.some((v) => String(v) !== String(values[0]));
+}
+function getSpecKeys(products) {
+  const keys = /* @__PURE__ */ new Set();
+  products.forEach((p) => Object.keys(p.specs).forEach((k) => keys.add(k)));
+  return Array.from(keys);
+}
+function CompareTool({
+  products,
+  specLabels = {},
+  onRemove,
+  highlightDifferences = true,
+  className
+}) {
+  if (!products.length) return null;
+  const specKeys = getSpecKeys(products);
+  const bestValues = {};
+  specKeys.forEach((key) => {
+    const nums = products.map((p) => p.specs[key]).filter((v) => typeof v === "number");
+    if (nums.length === products.length) {
+      bestValues[key] = Math.max(...nums);
     }
-    const parts = [timeLeft.days, timeLeft.hours, timeLeft.minutes, timeLeft.seconds];
-    return /* @__PURE__ */ jsxs(
-      Root24,
-      {
-        ref,
-        $variant: variant,
-        "aria-live": "polite",
-        "aria-label": `Czas do ko\u0144ca promocji`,
-        ...props,
-        children: [
-          label && /* @__PURE__ */ jsx(TimerLabel, { $variant: variant, children: label }),
-          /* @__PURE__ */ jsx(Segments, { children: parts.map((val, i) => /* @__PURE__ */ jsxs("div", { style: { display: "contents" }, children: [
-            i > 0 && /* @__PURE__ */ jsx(Colon, { $variant: variant, children: ":" }),
-            /* @__PURE__ */ jsxs(Segment, { $variant: variant, children: [
-              /* @__PURE__ */ jsx(Value2, { $variant: variant, children: pad(val) }),
-              variant !== "inline" && /* @__PURE__ */ jsx(Unit, { $variant: variant, children: UNITS[i] })
-            ] })
-          ] }, UNITS[i])) })
-        ]
-      }
-    );
-  }
-);
-CountdownTimer.displayName = "CountdownTimer";
-var countdownTimerVariants = ["inline", "card", "banner"];
+  });
+  return /* @__PURE__ */ jsx(Wrapper3, { className, children: /* @__PURE__ */ jsxs(Table, { role: "table", "aria-label": "Por\xF3wnanie produkt\xF3w", children: [
+    /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx(HeaderCell, { $isLabel: true, as: "th", scope: "col", children: "Parametr" }),
+      products.map((p) => /* @__PURE__ */ jsxs(HeaderCell, { as: "th", scope: "col", children: [
+        p.imageUrl ? /* @__PURE__ */ jsx(ProductImage, { src: p.imageUrl, alt: p.name }) : /* @__PURE__ */ jsx(ProductImagePlaceholder, { "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx(ProductName, { children: p.name }),
+        /* @__PURE__ */ jsx(ProductPrice, { children: p.price }),
+        onRemove && /* @__PURE__ */ jsx(
+          RemoveBtn,
+          {
+            type: "button",
+            "aria-label": `Usu\u0144 ${p.name} z por\xF3wnania`,
+            onClick: () => onRemove(p.id),
+            children: "Usu\u0144"
+          }
+        )
+      ] }, p.id))
+    ] }) }),
+    /* @__PURE__ */ jsx(Tbody, { children: specKeys.map((key) => {
+      const diff = highlightDifferences && isDiff(key, products);
+      return /* @__PURE__ */ jsxs(Row4, { $diff: diff, children: [
+        /* @__PURE__ */ jsx(LabelCell, { as: "th", scope: "row", children: specLabels[key] ?? key }),
+        products.map((p) => {
+          const val = p.specs[key];
+          const isHighlighted = highlightDifferences && key in bestValues && typeof val === "number" && val === bestValues[key];
+          return /* @__PURE__ */ jsx(ValueCell, { $highlight: isHighlighted, children: val !== void 0 ? formatValue(val) : /* @__PURE__ */ jsx("span", { "aria-label": "Brak danych", children: "\u2014" }) }, p.id);
+        })
+      ] }, key);
+    }) })
+  ] }) });
+}
 var spin2 = keyframes`to { transform: rotate(360deg); }`;
-var Root25 = styled("div")({
+var Root30 = styled("div")({
   display: "flex",
   flexDirection: "column",
   gap: "0.5rem"
@@ -7184,7 +7479,7 @@ function CouponInput({
     if (e.key === "Enter") handleApply();
   };
   if (appliedCode) {
-    return /* @__PURE__ */ jsxs(Root25, { className, children: [
+    return /* @__PURE__ */ jsxs(Root30, { className, children: [
       /* @__PURE__ */ jsxs(AppliedRow, { role: "status", "aria-label": `Kod rabatowy ${appliedCode} zastosowany`, children: [
         /* @__PURE__ */ jsx(AppliedCode, { children: appliedCode }),
         onRemove && /* @__PURE__ */ jsx(
@@ -7203,7 +7498,7 @@ function CouponInput({
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs(Root25, { className, children: [
+  return /* @__PURE__ */ jsxs(Root30, { className, children: [
     /* @__PURE__ */ jsxs(InputRow, { $hasError: Boolean(error), $applied: false, children: [
       /* @__PURE__ */ jsx(
         Input,
@@ -7235,7 +7530,7 @@ function CouponInput({
     error && /* @__PURE__ */ jsx(Message, { $type: "error", id: errorId, role: "alert", children: error })
   ] });
 }
-var Root26 = styled("div")({
+var Root31 = styled("div")({
   display: "flex",
   flexDirection: "column",
   gap: "0.5rem"
@@ -7271,8 +7566,8 @@ var IconWrap = styled("span")(({ theme }) => ({
   color: theme.palette.text.secondary,
   display: "flex"
 }));
-var Info = styled("div")({ flex: 1 });
-var Name6 = styled("div")(({ theme }) => ({
+var Info2 = styled("div")({ flex: 1 });
+var Name9 = styled("div")(({ theme }) => ({
   fontSize: "0.9375rem",
   fontWeight: 600,
   color: theme.palette.text.primary
@@ -7283,7 +7578,7 @@ var Desc = styled("div")(({ theme }) => ({
   marginTop: "0.125rem"
 }));
 var PaymentMethodSelector = forwardRef(
-  ({ methods, value, onChange, label = "Metoda p\u0142atno\u015Bci", disabled, ...props }, ref) => /* @__PURE__ */ jsxs(Root26, { ref, ...props, children: [
+  ({ methods, value, onChange, label = "Metoda p\u0142atno\u015Bci", disabled, ...props }, ref) => /* @__PURE__ */ jsxs(Root31, { ref, ...props, children: [
     /* @__PURE__ */ jsx(GroupLabel, { children: label }),
     methods.map((method) => {
       const selected = value === method.id;
@@ -7301,8 +7596,8 @@ var PaymentMethodSelector = forwardRef(
           }
         ),
         /* @__PURE__ */ jsx(IconWrap, { children: method.icon ?? /* @__PURE__ */ jsx(CreditCardOutlinedIcon, { "aria-hidden": true }) }),
-        /* @__PURE__ */ jsxs(Info, { children: [
-          /* @__PURE__ */ jsx(Name6, { children: method.label }),
+        /* @__PURE__ */ jsxs(Info2, { children: [
+          /* @__PURE__ */ jsx(Name9, { children: method.label }),
           method.description && /* @__PURE__ */ jsx(Desc, { children: method.description })
         ] })
       ] }, method.id);
@@ -7310,7 +7605,7 @@ var PaymentMethodSelector = forwardRef(
   ] })
 );
 PaymentMethodSelector.displayName = "PaymentMethodSelector";
-var Root27 = styled("div")({
+var Root32 = styled("div")({
   display: "grid",
   gap: "0.75rem"
 });
@@ -7337,7 +7632,7 @@ var ThumbnailImage = styled("img")({
   objectFit: "cover"
 });
 var ProductGallery = forwardRef(
-  ({ images, selectedIndex, onSelect, ...props }, ref) => {
+  ({ images, selectedIndex, onSelect, imageRatio = "4/3", ...props }, ref) => {
     const [internalIndex, setInternalIndex] = useState(0);
     const activeIndex = selectedIndex ?? internalIndex;
     const activeImage = images[activeIndex] ?? images[0];
@@ -7348,8 +7643,8 @@ var ProductGallery = forwardRef(
     if (!activeImage) {
       return null;
     }
-    return /* @__PURE__ */ jsxs(Root27, { ref, ...props, children: [
-      /* @__PURE__ */ jsx(AspectRatio, { ratio: "4/3", children: /* @__PURE__ */ jsx(MainImage, { src: activeImage.src, alt: activeImage.alt }) }),
+    return /* @__PURE__ */ jsxs(Root32, { ref, ...props, children: [
+      /* @__PURE__ */ jsx(AspectRatio, { ratio: imageRatio, children: /* @__PURE__ */ jsx(MainImage, { src: activeImage.src, alt: activeImage.alt }) }),
       images.length > 1 && /* @__PURE__ */ jsx(Thumbnails, { children: images.map((image, index) => /* @__PURE__ */ jsx(
         ThumbnailButton,
         {
@@ -7366,7 +7661,7 @@ var ProductGallery = forwardRef(
   }
 );
 ProductGallery.displayName = "ProductGallery";
-var Root28 = styled("div")(({ theme, $variant }) => ({
+var Root33 = styled("div")(({ theme, $variant }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
@@ -7386,14 +7681,14 @@ var Link = styled("a")(({ theme }) => ({
   textUnderlineOffset: "0.2em"
 }));
 var PromoStrip = forwardRef(
-  ({ message, actionLabel, href, variant = "info", ...props }, ref) => /* @__PURE__ */ jsxs(Root28, { ref, $variant: variant, ...props, children: [
+  ({ message, actionLabel, href, variant = "info", ...props }, ref) => /* @__PURE__ */ jsxs(Root33, { ref, $variant: variant, ...props, children: [
     /* @__PURE__ */ jsx("span", { children: message }),
     actionLabel && href && /* @__PURE__ */ jsx(Link, { href, children: actionLabel })
   ] })
 );
 PromoStrip.displayName = "PromoStrip";
 var promoStripVariants = ["info", "success", "warning"];
-var Root29 = styled("div")(({ theme }) => ({
+var Root34 = styled("div")(({ theme }) => ({
   display: "inline-grid",
   gridTemplateColumns: "2.25rem 3rem 2.25rem",
   alignItems: "center",
@@ -7429,7 +7724,7 @@ var QuantitySelector = forwardRef(
   ({ value, min = 1, max = 99, step = 1, disabled = false, onChange, ...props }, ref) => {
     const decrease = Math.max(min, value - step);
     const increase = Math.min(max, value + step);
-    return /* @__PURE__ */ jsxs(Root29, { ref, "aria-label": "Wybierz ilo\u015B\u0107", ...props, children: [
+    return /* @__PURE__ */ jsxs(Root34, { ref, "aria-label": "Wybierz ilo\u015B\u0107", ...props, children: [
       /* @__PURE__ */ jsx(
         Control,
         {
@@ -7455,7 +7750,7 @@ var QuantitySelector = forwardRef(
   }
 );
 QuantitySelector.displayName = "QuantitySelector";
-var Root30 = styled("div")({
+var Root35 = styled("div")({
   display: "flex",
   flexDirection: "column",
   gap: "0.5rem"
@@ -7493,8 +7788,8 @@ var IconWrap2 = styled("span")(({ theme }) => ({
   color: theme.palette.text.secondary,
   display: "flex"
 }));
-var Info2 = styled("div")({ flex: 1 });
-var Name7 = styled("div")(({ theme }) => ({
+var Info3 = styled("div")({ flex: 1 });
+var Name10 = styled("div")(({ theme }) => ({
   fontSize: "0.9375rem",
   fontWeight: 600,
   color: theme.palette.text.primary
@@ -7504,7 +7799,7 @@ var Desc2 = styled("div")(({ theme }) => ({
   color: theme.palette.text.secondary,
   marginTop: "0.125rem"
 }));
-var Price3 = styled("div", {
+var Price2 = styled("div", {
   shouldForwardProp: (prop) => prop !== "$selected"
 })(({ theme, $selected }) => ({
   fontSize: "0.9375rem",
@@ -7513,7 +7808,7 @@ var Price3 = styled("div", {
   whiteSpace: "nowrap"
 }));
 var ShippingSelector = forwardRef(
-  ({ options, value, onChange, label = "Metoda dostawy", disabled, ...props }, ref) => /* @__PURE__ */ jsxs(Root30, { ref, ...props, children: [
+  ({ options, value, onChange, label = "Metoda dostawy", disabled, ...props }, ref) => /* @__PURE__ */ jsxs(Root35, { ref, ...props, children: [
     /* @__PURE__ */ jsx(GroupLabel2, { children: label }),
     options.map((opt) => {
       const selected = value === opt.id;
@@ -7531,14 +7826,14 @@ var ShippingSelector = forwardRef(
           }
         ),
         /* @__PURE__ */ jsx(IconWrap2, { children: opt.icon ?? /* @__PURE__ */ jsx(LocalShippingOutlinedIcon, { "aria-hidden": true }) }),
-        /* @__PURE__ */ jsxs(Info2, { children: [
-          /* @__PURE__ */ jsx(Name7, { children: opt.label }),
+        /* @__PURE__ */ jsxs(Info3, { children: [
+          /* @__PURE__ */ jsx(Name10, { children: opt.label }),
           (opt.description || opt.estimatedDays) && /* @__PURE__ */ jsxs(Desc2, { children: [
             opt.description,
             opt.estimatedDays && ` \xB7 ${opt.estimatedDays}`
           ] })
         ] }),
-        /* @__PURE__ */ jsx(Price3, { $selected: selected, children: opt.price })
+        /* @__PURE__ */ jsx(Price2, { $selected: selected, children: opt.price })
       ] }, opt.id);
     })
   ] })
@@ -7550,7 +7845,7 @@ var DEFAULT_SORT_OPTIONS = [
   { value: "price-asc", label: "Cena rosn\u0105co" },
   { value: "price-desc", label: "Cena malej\u0105co" }
 ];
-var Root31 = styled("div")(({ theme }) => ({
+var Root36 = styled("div")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
@@ -7624,7 +7919,7 @@ var SortBar = forwardRef(
     ...props
   }, ref) => {
     const resolvedLabel = totalLabel ?? (total !== void 0 ? `Znaleziono ${total} produkt\xF3w` : void 0);
-    return /* @__PURE__ */ jsxs(Root31, { ref, ...props, children: [
+    return /* @__PURE__ */ jsxs(Root36, { ref, ...props, children: [
       resolvedLabel && /* @__PURE__ */ jsx(TotalLabel, { children: resolvedLabel }),
       /* @__PURE__ */ jsxs(Controls, { children: [
         sortOptions.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -7677,7 +7972,7 @@ function getDefaultLabel(status, count) {
       return "Dost\u0119pny na zam\xF3wienie";
   }
 }
-var Root32 = styled("div", {
+var Root37 = styled("div", {
   shouldForwardProp: (p) => p !== "$color" && p !== "$size"
 })(({ theme, $color, $size }) => {
   const colorMap = {
@@ -7718,7 +8013,7 @@ var StockStatus = forwardRef(
   ({ status, count, label, showIcon = true, size = "md", ...props }, ref) => {
     const color = COLOR_MAP[status];
     const text = label ?? getDefaultLabel(status, count);
-    return /* @__PURE__ */ jsxs(Root32, { ref, $color: color, $size: size, role: "status", "aria-label": text, ...props, children: [
+    return /* @__PURE__ */ jsxs(Root37, { ref, $color: color, $size: size, role: "status", "aria-label": text, ...props, children: [
       showIcon && /* @__PURE__ */ jsx(Dot2, { $color: color, "aria-hidden": "true" }),
       /* @__PURE__ */ jsx("span", { children: text })
     ] });
@@ -7732,7 +8027,7 @@ var stockStatusValues = [
   "preorder",
   "backorder"
 ];
-var Root33 = styled("div")({
+var Root38 = styled("div")({
   display: "flex",
   flexDirection: "column",
   gap: "0.5rem"
@@ -7754,88 +8049,231 @@ var OptionButton = styled("button", {
   appearance: "none",
   cursor: "pointer",
   fontFamily: theme.typography.fontFamily,
-  fontSize: "0.875rem",
+  fontSize: "0.875rem",
+  fontWeight: 500,
+  transition: "border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease",
+  "&:disabled": {
+    opacity: 0.4,
+    cursor: "not-allowed",
+    textDecoration: $mode === "button" ? "line-through" : "none"
+  },
+  "&:focus-visible": {
+    outline: `3px solid ${theme.palette.primary.main}`,
+    outlineOffset: "2px"
+  },
+  ...$mode === "swatch" ? {
+    width: "2rem",
+    height: "2rem",
+    borderRadius: "50%",
+    border: $active ? `3px solid ${theme.palette.primary.main}` : `2px solid ${theme.palette.divider}`,
+    boxShadow: $active ? `0 0 0 2px ${theme.palette.background.paper}, 0 0 0 4px ${theme.palette.primary.main}` : "none",
+    padding: 0,
+    background: "currentColor"
+  } : {
+    padding: "0.375rem 0.875rem",
+    border: $active ? `2px solid ${theme.palette.primary.main}` : `1px solid ${theme.palette.divider}`,
+    borderRadius: theme.shape.borderRadius,
+    backgroundColor: $active ? `${theme.palette.primary.main}14` : "transparent",
+    color: $active ? theme.palette.primary.main : theme.palette.text.primary
+  }
+}));
+var Select2 = styled("select")(({ theme }) => ({
+  padding: "0.5rem 2rem 0.5rem 0.75rem",
+  border: `1px solid ${theme.palette.divider}`,
+  borderRadius: theme.shape.borderRadius,
+  backgroundColor: theme.palette.background.paper,
+  color: theme.palette.text.primary,
+  fontFamily: theme.typography.fontFamily,
+  fontSize: "0.875rem",
+  cursor: "pointer",
+  appearance: "none",
+  backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E")`,
+  backgroundRepeat: "no-repeat",
+  backgroundPosition: "right 0.75rem center",
+  "&:focus": {
+    outline: `3px solid ${theme.palette.primary.main}`,
+    outlineOffset: "2px"
+  }
+}));
+var VariantSelector = forwardRef(
+  ({ label, options, value, onChange, mode = "button", disabled, ...props }, ref) => /* @__PURE__ */ jsxs(Root38, { ref, ...props, children: [
+    /* @__PURE__ */ jsxs(Label4, { children: [
+      label,
+      value && mode !== "swatch" && /* @__PURE__ */ jsx("span", { style: { fontWeight: 400, marginLeft: "0.375rem" }, children: options.find((o) => o.value === value)?.label })
+    ] }),
+    mode === "dropdown" ? /* @__PURE__ */ jsx(
+      Select2,
+      {
+        value: value ?? "",
+        onChange: (e) => onChange?.(e.target.value),
+        disabled,
+        "aria-label": label,
+        children: options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))
+      }
+    ) : /* @__PURE__ */ jsx(OptionsRow, { role: "radiogroup", "aria-label": label, children: options.map((opt) => /* @__PURE__ */ jsx(
+      OptionButton,
+      {
+        type: "button",
+        $active: value === opt.value,
+        $mode: mode,
+        disabled: opt.disabled || disabled,
+        style: mode === "swatch" ? { color: opt.color ?? "#ccc" } : void 0,
+        title: opt.label,
+        "aria-label": opt.label,
+        "aria-pressed": value === opt.value,
+        onClick: () => onChange?.(opt.value),
+        children: mode === "button" && opt.label
+      },
+      opt.value
+    )) })
+  ] })
+);
+VariantSelector.displayName = "VariantSelector";
+var variantSelectorModes = ["button", "swatch", "dropdown"];
+function deriveInitials4(name) {
+  return name.split(" ").filter(Boolean).slice(0, 2).map((p) => p[0]).join("").toUpperCase();
+}
+var Root39 = styled("div")({
+  display: "flex",
+  alignItems: "center",
+  gap: "0.75rem"
+});
+var AvatarImg3 = styled("img")({
+  width: "2.5rem",
+  height: "2.5rem",
+  borderRadius: "50%",
+  objectFit: "cover",
+  flexShrink: 0
+});
+var Info4 = styled("div")({ minWidth: 0 });
+var NameRow2 = styled("div")({
+  display: "flex",
+  alignItems: "center",
+  gap: "0.5rem",
+  flexWrap: "wrap"
+});
+var Name11 = styled("span")(({ theme }) => ({
+  fontFamily: theme.typography.fontFamily,
+  fontSize: "0.9375rem",
+  fontWeight: 700,
+  color: theme.palette.text.primary
+}));
+var AuthorBadge = styled("span")(({ theme }) => ({
+  display: "inline-flex",
+  alignItems: "center",
+  fontSize: "0.6875rem",
+  fontWeight: 600,
+  padding: "0.125rem 0.5rem",
+  borderRadius: "999px",
+  backgroundColor: theme.palette.primary.main,
+  color: theme.palette.primary.contrastText,
+  fontFamily: theme.typography.fontFamily,
+  letterSpacing: "0.03em",
+  textTransform: "uppercase"
+}));
+var DateText = styled("time")(({ theme }) => ({
+  display: "block",
+  marginTop: "0.125rem",
+  fontFamily: theme.typography.fontFamily,
+  fontSize: "0.8125rem",
+  color: theme.palette.text.secondary
+}));
+function CommentMeta({ author, date }) {
+  return /* @__PURE__ */ jsxs(Root39, { children: [
+    author.avatarUrl ? /* @__PURE__ */ jsx(AvatarImg3, { src: author.avatarUrl, alt: author.name }) : /* @__PURE__ */ jsx(Avatar, { initials: deriveInitials4(author.name), size: "md", color: "primary" }),
+    /* @__PURE__ */ jsxs(Info4, { children: [
+      /* @__PURE__ */ jsxs(NameRow2, { children: [
+        /* @__PURE__ */ jsx(Name11, { children: author.name }),
+        author.isPostAuthor && /* @__PURE__ */ jsx(AuthorBadge, { children: "Autor" })
+      ] }),
+      /* @__PURE__ */ jsx(DateText, { dateTime: date, children: date })
+    ] })
+  ] });
+}
+CommentMeta.displayName = "CommentMeta";
+var Text = styled("p")(({ theme }) => ({
+  margin: 0,
+  fontFamily: theme.typography.fontFamily,
+  fontSize: "0.9375rem",
+  lineHeight: 1.7,
+  color: theme.palette.text.primary
+}));
+function CommentBody({ content }) {
+  return /* @__PURE__ */ jsx(Text, { children: content });
+}
+CommentBody.displayName = "CommentBody";
+var Root40 = styled("div")({
+  display: "flex",
+  alignItems: "center",
+  gap: "0.25rem"
+});
+var ActionButton = styled("button")(({ theme }) => ({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "0.375rem",
+  padding: "0.3125rem 0.625rem",
+  background: "none",
+  border: "none",
+  borderRadius: theme.shape.borderRadius,
+  cursor: "pointer",
+  color: theme.palette.text.secondary,
+  fontFamily: theme.typography.fontFamily,
+  fontSize: "0.8125rem",
   fontWeight: 500,
-  transition: "border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease",
-  "&:disabled": {
-    opacity: 0.4,
-    cursor: "not-allowed",
-    textDecoration: $mode === "button" ? "line-through" : "none"
+  lineHeight: 1,
+  transition: "background-color 150ms ease, color 150ms ease",
+  "&:hover": {
+    backgroundColor: theme.palette.action.hover,
+    color: theme.palette.primary.main
   },
   "&:focus-visible": {
     outline: `3px solid ${theme.palette.primary.main}`,
     outlineOffset: "2px"
-  },
-  ...$mode === "swatch" ? {
-    width: "2rem",
-    height: "2rem",
-    borderRadius: "50%",
-    border: $active ? `3px solid ${theme.palette.primary.main}` : `2px solid ${theme.palette.divider}`,
-    boxShadow: $active ? `0 0 0 2px ${theme.palette.background.paper}, 0 0 0 4px ${theme.palette.primary.main}` : "none",
-    padding: 0,
-    background: "currentColor"
-  } : {
-    padding: "0.375rem 0.875rem",
-    border: $active ? `2px solid ${theme.palette.primary.main}` : `1px solid ${theme.palette.divider}`,
-    borderRadius: theme.shape.borderRadius,
-    backgroundColor: $active ? `${theme.palette.primary.main}14` : "transparent",
-    color: $active ? theme.palette.primary.main : theme.palette.text.primary
   }
 }));
-var Select2 = styled("select")(({ theme }) => ({
-  padding: "0.5rem 2rem 0.5rem 0.75rem",
-  border: `1px solid ${theme.palette.divider}`,
-  borderRadius: theme.shape.borderRadius,
-  backgroundColor: theme.palette.background.paper,
-  color: theme.palette.text.primary,
-  fontFamily: theme.typography.fontFamily,
-  fontSize: "0.875rem",
-  cursor: "pointer",
-  appearance: "none",
-  backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E")`,
-  backgroundRepeat: "no-repeat",
-  backgroundPosition: "right 0.75rem center",
-  "&:focus": {
-    outline: `3px solid ${theme.palette.primary.main}`,
-    outlineOffset: "2px"
+function CommentActions({ commentId, likesCount, onLike, onReply }) {
+  return /* @__PURE__ */ jsxs(Root40, { children: [
+    /* @__PURE__ */ jsxs(ActionButton, { type: "button", "aria-label": "Lubi\u0119 to", onClick: () => onLike?.(commentId), children: [
+      /* @__PURE__ */ jsx(ThumbUpOutlinedIcon, { style: { fontSize: "0.9375rem" }, "aria-hidden": "true" }),
+      typeof likesCount === "number" && /* @__PURE__ */ jsx("span", { children: likesCount }),
+      "Lubi\u0119 to"
+    ] }),
+    /* @__PURE__ */ jsxs(ActionButton, { type: "button", "aria-label": "Odpowiedz", onClick: () => onReply?.(commentId), children: [
+      /* @__PURE__ */ jsx(ReplyIcon, { style: { fontSize: "0.9375rem" }, "aria-hidden": "true" }),
+      "Odpowiedz"
+    ] })
+  ] });
+}
+CommentActions.displayName = "CommentActions";
+var Root41 = styled("div", {
+  shouldForwardProp: (p) => p !== "$depth"
+})(({ theme, $depth }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.75rem",
+  ...$depth > 0 && {
+    paddingLeft: "1.25rem",
+    borderLeft: `3px solid ${theme.palette.divider}`,
+    marginLeft: "1rem"
   }
 }));
-var VariantSelector = forwardRef(
-  ({ label, options, value, onChange, mode = "button", disabled, ...props }, ref) => /* @__PURE__ */ jsxs(Root33, { ref, ...props, children: [
-    /* @__PURE__ */ jsxs(Label4, { children: [
-      label,
-      value && mode !== "swatch" && /* @__PURE__ */ jsx("span", { style: { fontWeight: 400, marginLeft: "0.375rem" }, children: options.find((o) => o.value === value)?.label })
-    ] }),
-    mode === "dropdown" ? /* @__PURE__ */ jsx(
-      Select2,
+var CommentCard = forwardRef(
+  ({ comment, depth = 0, onLike, onReply, ...props }, ref) => /* @__PURE__ */ jsxs(Root41, { ref, $depth: depth, ...props, children: [
+    /* @__PURE__ */ jsx(CommentMeta, { author: comment.author, date: comment.date }),
+    /* @__PURE__ */ jsx(CommentBody, { content: comment.content }),
+    /* @__PURE__ */ jsx(
+      CommentActions,
       {
-        value: value ?? "",
-        onChange: (e) => onChange?.(e.target.value),
-        disabled,
-        "aria-label": label,
-        children: options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))
+        commentId: comment.id,
+        likesCount: comment.likesCount,
+        onLike,
+        onReply
       }
-    ) : /* @__PURE__ */ jsx(OptionsRow, { role: "radiogroup", "aria-label": label, children: options.map((opt) => /* @__PURE__ */ jsx(
-      OptionButton,
-      {
-        type: "button",
-        $active: value === opt.value,
-        $mode: mode,
-        disabled: opt.disabled || disabled,
-        style: mode === "swatch" ? { color: opt.color ?? "#ccc" } : void 0,
-        title: opt.label,
-        "aria-label": opt.label,
-        "aria-pressed": value === opt.value,
-        onClick: () => onChange?.(opt.value),
-        children: mode === "button" && opt.label
-      },
-      opt.value
-    )) })
+    )
   ] })
 );
-VariantSelector.displayName = "VariantSelector";
-var variantSelectorModes = ["button", "swatch", "dropdown"];
-var Root34 = styled("div")(({ theme }) => ({
+CommentCard.displayName = "CommentCard";
+var Root42 = styled("div")(({ theme }) => ({
   borderBottom: `1px solid ${theme.palette.divider}`
 }));
 var Trigger2 = styled("button")(({ theme }) => ({
@@ -7883,7 +8321,7 @@ var PanelInner = styled("p")(({ theme }) => ({
 var FaqItem = forwardRef(
   ({ item, defaultOpen = false, ...props }, ref) => {
     const [open, setOpen] = useState(defaultOpen);
-    return /* @__PURE__ */ jsxs(Root34, { ref, ...props, children: [
+    return /* @__PURE__ */ jsxs(Root42, { ref, ...props, children: [
       /* @__PURE__ */ jsxs(Trigger2, { type: "button", "aria-expanded": open, onClick: () => setOpen((prev) => !prev), children: [
         item.question,
         /* @__PURE__ */ jsx(ChevronIcon2, { $open: open, "aria-hidden": "true" })
@@ -7931,21 +8369,21 @@ var Title2 = styled("h3")(({ theme }) => ({
   color: theme.palette.text.primary,
   lineHeight: 1.4
 }));
-var Description4 = styled("p")(({ theme }) => ({
+var Description5 = styled("p")(({ theme }) => ({
   margin: "0.375rem 0 0",
   fontFamily: theme.typography.fontFamily,
   fontSize: "0.9rem",
   color: theme.palette.text.secondary,
   lineHeight: 1.6
 }));
-var FeatureItem2 = forwardRef(
+var FeatureItem = forwardRef(
   ({ feature, cardVariant = "default", layout = "card", ...props }, ref) => {
     if (layout === "icon-left") {
       return /* @__PURE__ */ jsxs(IconLeftRoot, { ref, ...props, children: [
         feature.icon && /* @__PURE__ */ jsx(IconWrapper, { children: feature.icon }),
         /* @__PURE__ */ jsxs(TextGroup2, { children: [
           /* @__PURE__ */ jsx(Title2, { children: feature.title }),
-          /* @__PURE__ */ jsx(Description4, { children: feature.description })
+          /* @__PURE__ */ jsx(Description5, { children: feature.description })
         ] })
       ] });
     }
@@ -7953,13 +8391,13 @@ var FeatureItem2 = forwardRef(
       feature.icon && /* @__PURE__ */ jsx(IconWrapper, { children: feature.icon }),
       /* @__PURE__ */ jsxs(TextGroup2, { children: [
         /* @__PURE__ */ jsx(Title2, { children: feature.title }),
-        /* @__PURE__ */ jsx(Description4, { children: feature.description })
+        /* @__PURE__ */ jsx(Description5, { children: feature.description })
       ] })
     ] });
   }
 );
-FeatureItem2.displayName = "FeatureItem";
-var Root35 = styled("div")({
+FeatureItem.displayName = "FeatureItem";
+var Root43 = styled("div")({
   display: "flex",
   flexDirection: "column",
   alignItems: "center",
@@ -7998,7 +8436,7 @@ var Title3 = styled("h3")(({ theme }) => ({
   fontSize: "1rem",
   color: theme.palette.text.primary
 }));
-var Description5 = styled("p")(({ theme }) => ({
+var Description6 = styled("p")(({ theme }) => ({
   margin: 0,
   fontFamily: theme.typography.fontFamily,
   fontSize: "0.875rem",
@@ -8007,10 +8445,10 @@ var Description5 = styled("p")(({ theme }) => ({
   maxWidth: "18rem"
 }));
 var ProcessStep = forwardRef(
-  ({ step, title, description, icon, ...props }, ref) => /* @__PURE__ */ jsxs(Root35, { ref, ...props, children: [
+  ({ step, title, description, icon, ...props }, ref) => /* @__PURE__ */ jsxs(Root43, { ref, ...props, children: [
     /* @__PURE__ */ jsx(StepBadge, { "aria-hidden": "true", children: icon ? /* @__PURE__ */ jsx(IconWrapper2, { children: icon }) : /* @__PURE__ */ jsx(StepNumber, { children: step }) }),
     /* @__PURE__ */ jsx(Title3, { children: title }),
-    description && /* @__PURE__ */ jsx(Description5, { children: description })
+    description && /* @__PURE__ */ jsx(Description6, { children: description })
   ] })
 );
 ProcessStep.displayName = "ProcessStep";
@@ -8133,7 +8571,7 @@ function getDotColor(status, theme) {
       return theme.palette.mode === "dark" ? "rgba(255,255,255,0.2)" : "rgba(0,0,0,0.15)";
   }
 }
-var List = styled("ol")({
+var List2 = styled("ol")({
   listStyle: "none",
   margin: 0,
   padding: 0,
@@ -8193,7 +8631,7 @@ var Dot3 = styled("span", {
     }
   }
 }));
-var Content4 = styled("div")({ flex: 1, minWidth: 0, paddingTop: "0.0625rem" });
+var Content2 = styled("div")({ flex: 1, minWidth: 0, paddingTop: "0.0625rem" });
 var TitleRow = styled("div")({
   display: "flex",
   alignItems: "baseline",
@@ -8216,7 +8654,7 @@ var Date2 = styled("time")(({ theme }) => ({
   color: theme.palette.text.secondary,
   whiteSpace: "nowrap"
 }));
-var Description6 = styled("div")(({ theme }) => ({
+var Description7 = styled("div")(({ theme }) => ({
   marginTop: "0.25rem",
   fontFamily: theme.typography.fontFamily,
   fontSize: "0.875rem",
@@ -8238,19 +8676,19 @@ function TimelineItemComponent({
   const hasIcon = Boolean(item.icon);
   return /* @__PURE__ */ jsxs(ItemRow, { $compact: compact, $last: last, children: [
     /* @__PURE__ */ jsx(DotCol, { $last: last, children: /* @__PURE__ */ jsx(Dot3, { $status: status, $hasIcon: hasIcon, children: item.icon ?? /* @__PURE__ */ jsx(StatusIcon, { status }) }) }),
-    /* @__PURE__ */ jsxs(Content4, { children: [
+    /* @__PURE__ */ jsxs(Content2, { children: [
       /* @__PURE__ */ jsxs(TitleRow, { children: [
         /* @__PURE__ */ jsx(Title4, { $compact: compact, children: item.title }),
         item.date && /* @__PURE__ */ jsx(Date2, { dateTime: item.date, children: item.date })
       ] }),
-      item.description && /* @__PURE__ */ jsx(Description6, { children: item.description })
+      item.description && /* @__PURE__ */ jsx(Description7, { children: item.description })
     ] })
   ] });
 }
 var Timeline = forwardRef(
   ({ items, variant = "default", align: _align = "left", ...props }, ref) => {
     const compact = variant === "compact";
-    return /* @__PURE__ */ jsx(List, { ref, "aria-label": "O\u015B czasu", ...props, children: items.map((item, i) => /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(List2, { ref, "aria-label": "O\u015B czasu", ...props, children: items.map((item, i) => /* @__PURE__ */ jsx(
       TimelineItemComponent,
       {
         item,
@@ -8269,7 +8707,7 @@ var timelineItemStatuses = [
   "pending",
   "error"
 ];
-var Root36 = styled("div")({
+var Root44 = styled("div")({
   position: "relative",
   width: "100%",
   overflow: "hidden",
@@ -8379,7 +8817,7 @@ function Carousel({
   }, [prev, next]);
   if (!count) return null;
   return /* @__PURE__ */ jsxs("div", { className, children: [
-    /* @__PURE__ */ jsxs(Root36, { "aria-roledescription": "carousel", children: [
+    /* @__PURE__ */ jsxs(Root44, { "aria-roledescription": "carousel", children: [
       /* @__PURE__ */ jsx(Track4, { $index: index, "aria-live": "polite", children: slides.map((slide, i) => /* @__PURE__ */ jsx(
         Slide,
         {
@@ -8426,6 +8864,46 @@ function Carousel({
     )) })
   ] });
 }
+var Img5 = styled("img")({
+  position: "absolute",
+  inset: 0,
+  width: "100%",
+  height: "100%"
+});
+var Placeholder5 = styled("div")(({ theme }) => ({
+  position: "absolute",
+  inset: 0,
+  width: "100%",
+  height: "100%",
+  backgroundColor: theme.palette.action.hover,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: theme.palette.text.disabled
+}));
+var Image = forwardRef(
+  ({
+    src,
+    alt = "",
+    ratio = "16/9",
+    objectFit = "cover",
+    objectPosition = "center",
+    loading = "lazy",
+    style,
+    ...props
+  }, ref) => /* @__PURE__ */ jsx(AspectRatio, { ratio, children: src ? /* @__PURE__ */ jsx(
+    Img5,
+    {
+      ref,
+      src,
+      alt,
+      loading,
+      style: { objectFit, objectPosition, ...style },
+      ...props
+    }
+  ) : /* @__PURE__ */ jsx(Placeholder5, { "aria-label": alt || "Image placeholder", children: /* @__PURE__ */ jsx(ImageIcon, { style: { fontSize: 48 } }) }) })
+);
+Image.displayName = "Image";
 var Wrapper4 = styled("div")(({ theme }) => ({
   borderRadius: "0.75rem",
   overflow: "hidden",
@@ -8727,7 +9205,7 @@ var Nav = styled("nav")(({ theme }) => ({
   fontSize: "0.875rem",
   color: theme.palette.text.secondary
 }));
-var List2 = styled("ol")({
+var List3 = styled("ol")({
   display: "flex",
   alignItems: "center",
   flexWrap: "wrap",
@@ -8751,7 +9229,7 @@ var Separator2 = styled("span")(({ theme }) => ({
   color: theme.palette.text.disabled
 }));
 var Breadcrumbs = forwardRef(
-  ({ items, separator = "/", ...props }, ref) => /* @__PURE__ */ jsx(Nav, { ref, "aria-label": "\u015Acie\u017Cka nawigacji", ...props, children: /* @__PURE__ */ jsx(List2, { children: items.map((item, index) => {
+  ({ items, separator = "/", ...props }, ref) => /* @__PURE__ */ jsx(Nav, { ref, "aria-label": "\u015Acie\u017Cka nawigacji", ...props, children: /* @__PURE__ */ jsx(List3, { children: items.map((item, index) => {
     const isLast = index === items.length - 1;
     return /* @__PURE__ */ jsxs("li", { children: [
       item.href && !isLast ? /* @__PURE__ */ jsx(Link2, { href: item.href, children: item.label }) : /* @__PURE__ */ jsx(Current2, { "aria-current": isLast ? "page" : void 0, children: item.label }),
@@ -8763,7 +9241,7 @@ var Breadcrumbs = forwardRef(
   }) }) })
 );
 Breadcrumbs.displayName = "Breadcrumbs";
-var sizeMap6 = {
+var sizeMap7 = {
   sm: { minWidth: "1.75rem", height: "1.75rem", fontSize: "0.75rem" },
   md: { minWidth: "2rem", height: "2rem", fontSize: "0.875rem" },
   lg: { minWidth: "2.5rem", height: "2.5rem", fontSize: "1rem" }
@@ -8792,7 +9270,7 @@ var StyledButton2 = styled("button")(({ theme, $isActive, $size }) => ({
   lineHeight: 1,
   padding: "0 0.25rem",
   transition: "background-color 150ms ease",
-  ...sizeMap6[$size],
+  ...sizeMap7[$size],
   ...$isActive ? activeStyles(theme) : idleStyles(theme),
   "&:focus-visible": {
     outline: `3px solid ${theme.palette.primary.main}`,
@@ -8821,7 +9299,7 @@ var PaginationButton = forwardRef(
   )
 );
 PaginationButton.displayName = "PaginationButton";
-var sizeMap7 = {
+var sizeMap8 = {
   sm: { minWidth: "1.75rem", height: "1.75rem", fontSize: "0.75rem" },
   md: { minWidth: "2rem", height: "2rem", fontSize: "0.875rem" },
   lg: { minWidth: "2.5rem", height: "2.5rem", fontSize: "1rem" }
@@ -8832,7 +9310,7 @@ var StyledEllipsis = styled("span")(({ theme, $size }) => ({
   justifyContent: "center",
   color: theme.palette.text.secondary,
   userSelect: "none",
-  ...sizeMap7[$size]
+  ...sizeMap8[$size]
 }));
 var PaginationEllipsis = ({ size = "md" }) => /* @__PURE__ */ jsx(StyledEllipsis, { $size: size, "aria-hidden": "true", children: "\u2026" });
 PaginationEllipsis.displayName = "PaginationEllipsis";
@@ -8942,7 +9420,7 @@ var PaginationBar = ({
   ] });
 };
 PaginationBar.displayName = "PaginationBar";
-var Root37 = styled("div", {
+var Root45 = styled("div", {
   shouldForwardProp: (p) => p !== "$variant"
 })(({ theme, $variant }) => ({
   width: "100%",
@@ -8957,7 +9435,7 @@ var Root37 = styled("div", {
     gap: "0.5rem"
   }
 }));
-var Item = styled("div", {
+var Item2 = styled("div", {
   shouldForwardProp: (p) => !["$variant", "$disabled"].includes(p)
 })(({ theme, $variant, $disabled }) => ({
   opacity: $disabled ? 0.5 : 1,
@@ -9052,11 +9530,11 @@ var Accordion = forwardRef(
       if (controlledKeys === void 0) setInternalKeys(next);
       onChange?.(next);
     };
-    return /* @__PURE__ */ jsx(Root37, { ref, $variant: variant, ...props, children: items.map((item) => {
+    return /* @__PURE__ */ jsx(Root45, { ref, $variant: variant, ...props, children: items.map((item) => {
       const isOpen = openKeys.includes(item.key);
       const panelId = `accordion-panel-${item.key}`;
       const triggerId = `accordion-trigger-${item.key}`;
-      return /* @__PURE__ */ jsxs(Item, { $variant: variant, $disabled: Boolean(item.disabled), children: [
+      return /* @__PURE__ */ jsxs(Item2, { $variant: variant, $disabled: Boolean(item.disabled), children: [
         /* @__PURE__ */ jsxs(
           Trigger3,
           {
@@ -9081,32 +9559,31 @@ var Accordion = forwardRef(
 );
 Accordion.displayName = "Accordion";
 var accordionVariants = ["default", "bordered", "separated"];
-var SEVERITY_COLORS = {
-  info: { bg: "rgba(25,118,210,0.08)", color: "#1565c0", border: "rgba(25,118,210,0.3)" },
-  success: { bg: "rgba(34,197,94,0.1)", color: "#15803d", border: "rgba(34,197,94,0.35)" },
-  warning: { bg: "rgba(245,158,11,0.1)", color: "#b45309", border: "rgba(245,158,11,0.35)" },
-  error: { bg: "rgba(211,47,47,0.08)", color: "#c62828", border: "rgba(211,47,47,0.3)" }
-};
 var ICONS = {
   info: /* @__PURE__ */ jsx(InfoOutlinedIcon, { "aria-hidden": true, style: { fontSize: 20 } }),
   success: /* @__PURE__ */ jsx(CheckCircleOutlinedIcon, { "aria-hidden": true, style: { fontSize: 20 } }),
   warning: /* @__PURE__ */ jsx(WarningAmberOutlinedIcon, { "aria-hidden": true, style: { fontSize: 20 } }),
   error: /* @__PURE__ */ jsx(ErrorOutlineOutlinedIcon, { "aria-hidden": true, style: { fontSize: 20 } })
 };
-var Root38 = styled("div", {
+var Root46 = styled("div", {
   shouldForwardProp: (prop) => prop !== "$severity"
 })(({ theme, $severity }) => {
-  const c = SEVERITY_COLORS[$severity];
+  const palette = {
+    info: theme.palette.info,
+    success: theme.palette.success,
+    warning: theme.palette.warning,
+    error: theme.palette.error
+  }[$severity];
   return {
     display: "flex",
     gap: "0.75rem",
     padding: "0.875rem 1rem",
     borderRadius: theme.shape.borderRadius,
-    border: `1px solid ${c.border}`,
-    backgroundColor: c.bg,
-    color: c.color,
+    border: `1px solid ${palette.dark}`,
+    backgroundColor: palette.main,
+    color: palette.contrastText,
     fontFamily: theme.typography.fontFamily,
-    fontSize: "0.9375rem"
+    fontSize: "1rem"
   };
 });
 var IconSlot2 = styled("span")({
@@ -9138,11 +9615,11 @@ var CloseButton2 = styled("button")(({ theme }) => ({
   }
 }));
 var Alert = forwardRef(
-  ({ severity = "info", title, children, onClose, icon, ...props }, ref) => /* @__PURE__ */ jsxs(Root38, { ref, role: "alert", $severity: severity, ...props, children: [
+  ({ severity = "info", title, children, onClose, icon, ...props }, ref) => /* @__PURE__ */ jsxs(Root46, { ref, role: "alert", $severity: severity, ...props, children: [
     /* @__PURE__ */ jsx(IconSlot2, { children: icon ?? ICONS[severity] }),
     /* @__PURE__ */ jsxs(Body, { children: [
       title && /* @__PURE__ */ jsx(Title5, { children: title }),
-      children
+      typeof children === "string" ? /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: children } }) : children
     ] }),
     onClose && /* @__PURE__ */ jsx(CloseButton2, { type: "button", onClick: onClose, "aria-label": "Zamknij", children: /* @__PURE__ */ jsx(CloseIcon, { "aria-hidden": true, style: { fontSize: 16 } }) })
   ] })
@@ -9159,7 +9636,7 @@ var POSITION_MAP = {
 var Btn = styled("button", {
   shouldForwardProp: (p) => !["$variant", "$visible", "$position"].includes(p)
 })(({ theme, $variant, $visible, $position }) => {
-  const variantStyles2 = {
+  const variantStyles3 = {
     default: {
       backgroundColor: theme.palette.background.paper,
       border: `1px solid ${theme.palette.divider}`,
@@ -9200,7 +9677,7 @@ var Btn = styled("button", {
       outlineOffset: "3px"
     },
     ...POSITION_MAP[$position],
-    ...variantStyles2
+    ...variantStyles3
   };
 });
 function BackToTop({
@@ -9388,7 +9865,7 @@ var ContextMenu = forwardRef(
   }
 );
 ContextMenu.displayName = "ContextMenu";
-var Root39 = styled("div")(({ theme }) => ({
+var Root47 = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
   alignItems: "center",
@@ -9409,18 +9886,18 @@ var Title6 = styled("h3")(({ theme }) => ({
   fontWeight: 700,
   color: theme.palette.text.primary
 }));
-var Description7 = styled("p")(({ theme }) => ({
+var Description8 = styled("p")(({ theme }) => ({
   margin: 0,
   fontSize: "0.9375rem",
   color: theme.palette.text.secondary,
   maxWidth: "28rem"
 }));
 var EmptyState = forwardRef(
-  ({ icon, title, description, action, ...props }, ref) => /* @__PURE__ */ jsxs(Root39, { ref, ...props, children: [
+  ({ icon, title, description, action, ...props }, ref) => /* @__PURE__ */ jsxs(Root47, { ref, ...props, children: [
     /* @__PURE__ */ jsx(IconWrap3, { "aria-hidden": true, children: icon ?? /* @__PURE__ */ jsx(InboxOutlinedIcon, {}) }),
     /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx(Title6, { children: title }),
-      description && /* @__PURE__ */ jsx(Description7, { style: { marginTop: "0.5rem" }, children: description })
+      description && /* @__PURE__ */ jsx(Description8, { style: { marginTop: "0.5rem" }, children: description })
     ] }),
     action && /* @__PURE__ */ jsx("div", { children: action })
   ] })
@@ -9436,7 +9913,7 @@ var FONT_SIZE2 = {
   md: "0.9375rem",
   lg: "1rem"
 };
-var Root40 = styled("ul", {
+var Root48 = styled("ul", {
   shouldForwardProp: (p) => p !== "$variant"
 })(({ theme, $variant }) => ({
   listStyle: "none",
@@ -9454,7 +9931,7 @@ var Root40 = styled("ul", {
     gap: "0.375rem"
   }
 }));
-var Item2 = styled("li", {
+var Item3 = styled("li", {
   shouldForwardProp: (p) => !["$size", "$variant", "$clickable", "$disabled"].includes(p)
 })(({ theme, $size, $variant, $clickable, $disabled }) => ({
   display: "flex",
@@ -9528,11 +10005,11 @@ var SuffixWrap = styled("span")({
   display: "flex",
   alignItems: "center"
 });
-var List3 = forwardRef(
+var List4 = forwardRef(
   ({ items, size = "md", variant = "default", dividers = true, ...props }, ref) => {
     const effectiveVariant = !dividers && variant === "default" ? "default" : variant;
-    return /* @__PURE__ */ jsx(Root40, { ref, $variant: effectiveVariant, role: "list", ...props, children: items.map((item) => /* @__PURE__ */ jsxs(
-      Item2,
+    return /* @__PURE__ */ jsx(Root48, { ref, $variant: effectiveVariant, role: "list", ...props, children: items.map((item) => /* @__PURE__ */ jsxs(
+      Item3,
       {
         role: "listitem",
         $size: size,
@@ -9554,7 +10031,7 @@ var List3 = forwardRef(
     )) });
   }
 );
-List3.displayName = "List";
+List4.displayName = "List";
 var listVariants = ["default", "bordered", "separated"];
 var listSizes = ["sm", "md", "lg"];
 var scrollLeft = keyframes`
@@ -9570,7 +10047,7 @@ var speedDuration = {
   normal: "20s",
   fast: "10s"
 };
-var Root41 = styled("div")({
+var Root49 = styled("div")({
   overflow: "hidden",
   width: "100%",
   userSelect: "none"
@@ -9601,7 +10078,7 @@ var Marquee = forwardRef(
       /* @__PURE__ */ jsx(ItemWrap, { $gap: gapValue, "aria-hidden": "false", children }),
       /* @__PURE__ */ jsx(ItemWrap, { $gap: gapValue, "aria-hidden": "true", children })
     ] });
-    return /* @__PURE__ */ jsx(Root41, { ref, ...props, children: /* @__PURE__ */ jsx(Track5, { $direction: direction, $speed: speed, $pauseOnHover: pauseOnHover, $gap: gapValue, children: content }) });
+    return /* @__PURE__ */ jsx(Root49, { ref, ...props, children: /* @__PURE__ */ jsx(Track5, { $direction: direction, $speed: speed, $pauseOnHover: pauseOnHover, $gap: gapValue, children: content }) });
   }
 );
 Marquee.displayName = "Marquee";
@@ -9647,7 +10124,7 @@ var Dialog = styled("div", {
     margin: 0
   }
 }));
-var Header = styled("div")(({ theme }) => ({
+var Header2 = styled("div")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
@@ -9744,7 +10221,7 @@ function Modal({
         tabIndex: -1,
         onClick: (e) => e.stopPropagation(),
         children: [
-          (title || !hideCloseButton) && /* @__PURE__ */ jsxs(Header, { children: [
+          (title || !hideCloseButton) && /* @__PURE__ */ jsxs(Header2, { children: [
             title ? /* @__PURE__ */ jsx(Title7, { id: "modal-title", children: title }) : /* @__PURE__ */ jsx("span", {}),
             !hideCloseButton && /* @__PURE__ */ jsx(CloseButton3, { "aria-label": "Zamknij", onClick: onClose, children: /* @__PURE__ */ jsx(CloseIcon, { "aria-hidden": true, style: { fontSize: 16 } }) })
           ] }),
@@ -9757,7 +10234,7 @@ function Modal({
   );
 }
 var modalSizes = ["sm", "md", "lg", "xl", "full"];
-var Root42 = styled("div")({ width: "100%" });
+var Root50 = styled("div")({ width: "100%" });
 var TabList = styled("div", {
   shouldForwardProp: (prop) => prop !== "$variant"
 })(({ theme, $variant }) => ({
@@ -9837,7 +10314,7 @@ var Tabs = forwardRef(
       onChange?.(key);
     };
     const activeTab = tabs.find((t) => t.key === activeKey);
-    return /* @__PURE__ */ jsxs(Root42, { ref, ...props, children: [
+    return /* @__PURE__ */ jsxs(Root50, { ref, ...props, children: [
       /* @__PURE__ */ jsx(TabList, { role: "tablist", $variant: variant, children: tabs.map((tab) => /* @__PURE__ */ jsx(
         TabButton,
         {
@@ -9869,6 +10346,79 @@ var Tabs = forwardRef(
 );
 Tabs.displayName = "Tabs";
 var tabsVariants = ["underline", "pills", "bordered"];
+var Root51 = styled("div")(({ theme }) => ({
+  display: "grid",
+  gridTemplateColumns: "4.5rem 1fr",
+  gap: "0.875rem",
+  paddingBottom: "1rem",
+  borderBottom: `1px solid ${theme.palette.divider}`
+}));
+var ImageWrap4 = styled("div")(({ theme }) => ({
+  position: "relative",
+  width: "4.5rem",
+  height: "4.5rem",
+  borderRadius: theme.shape.borderRadius,
+  overflow: "hidden",
+  flexShrink: 0
+}));
+var Info5 = styled("div")({ display: "grid", gap: "0.5rem" });
+var Row5 = styled("div")({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: "0.75rem"
+});
+var Name12 = styled("p")(({ theme }) => ({
+  margin: 0,
+  color: theme.palette.text.primary,
+  fontFamily: theme.typography.fontFamily,
+  fontWeight: 700
+}));
+var Price3 = styled("p")(({ theme }) => ({
+  margin: 0,
+  color: theme.palette.text.secondary,
+  fontFamily: theme.typography.fontFamily,
+  fontSize: "0.875rem"
+}));
+var RemoveButton2 = styled("button")(({ theme }) => ({
+  border: 0,
+  background: "transparent",
+  color: theme.palette.error.main,
+  cursor: "pointer",
+  padding: 0,
+  fontFamily: theme.typography.fontFamily,
+  fontSize: "0.875rem"
+}));
+var CartDrawerItem = ({
+  id,
+  name,
+  price,
+  quantity,
+  imageUrl,
+  imageAlt,
+  onQuantityChange,
+  onRemove
+}) => /* @__PURE__ */ jsxs(Root51, { children: [
+  /* @__PURE__ */ jsx(ImageWrap4, { children: /* @__PURE__ */ jsx(ProductCardImage, { src: imageUrl, alt: imageAlt ?? name }) }),
+  /* @__PURE__ */ jsxs(Info5, { children: [
+    /* @__PURE__ */ jsxs(Row5, { children: [
+      /* @__PURE__ */ jsx(Name12, { children: name }),
+      /* @__PURE__ */ jsx(Price3, { children: price })
+    ] }),
+    /* @__PURE__ */ jsxs(Row5, { children: [
+      /* @__PURE__ */ jsx(
+        QuantitySelector,
+        {
+          value: quantity,
+          min: 1,
+          onChange: (qty) => onQuantityChange?.(id, qty)
+        }
+      ),
+      /* @__PURE__ */ jsx(RemoveButton2, { type: "button", onClick: () => onRemove?.(id), children: "Usu\u0144" })
+    ] })
+  ] })
+] });
+CartDrawerItem.displayName = "CartDrawerItem";
 var Overlay3 = styled("div")(({ $open }) => ({
   position: "fixed",
   inset: 0,
@@ -9888,7 +10438,7 @@ var Panel3 = styled("aside")(({ theme }) => ({
   boxShadow: theme.shadows[5],
   fontFamily: theme.typography.fontFamily
 }));
-var Header2 = styled("div")(({ theme }) => ({
+var Header3 = styled("div")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
@@ -9913,51 +10463,12 @@ var Items = styled("div")({
   padding: "1rem 1.25rem",
   overflow: "auto"
 });
-var Item3 = styled("div")(({ theme }) => ({
-  display: "grid",
-  gridTemplateColumns: "4.5rem 1fr",
-  gap: "0.875rem",
-  paddingBottom: "1rem",
-  borderBottom: `1px solid ${theme.palette.divider}`
-}));
-var ItemImage = styled("img")(({ theme }) => ({
-  width: "4.5rem",
-  height: "4.5rem",
-  borderRadius: theme.shape.borderRadius,
-  objectFit: "cover",
-  backgroundColor: theme.palette.action.hover
-}));
-var PlaceholderImage = styled("div")(({ theme }) => ({
-  width: "4.5rem",
-  height: "4.5rem",
-  borderRadius: theme.shape.borderRadius,
-  backgroundColor: theme.palette.action.hover
-}));
-var ItemInfo = styled("div")({ display: "grid", gap: "0.5rem" });
-var ItemName = styled("p")(({ theme }) => ({
-  margin: 0,
-  color: theme.palette.text.primary,
-  fontWeight: 700
-}));
-var ItemMeta = styled("p")(({ theme }) => ({
-  margin: 0,
-  color: theme.palette.text.secondary,
-  fontSize: "0.875rem"
-}));
-var Row4 = styled("div")({
+var Row6 = styled("div")({
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
   gap: "0.75rem"
 });
-var RemoveButton2 = styled("button")(({ theme }) => ({
-  border: 0,
-  background: "transparent",
-  color: theme.palette.error.main,
-  cursor: "pointer",
-  padding: 0,
-  fontSize: "0.875rem"
-}));
 var Footer5 = styled("div")(({ theme }) => ({
   display: "grid",
   gap: "1rem",
@@ -9979,32 +10490,21 @@ var CartDrawer = forwardRef(
     onRemove,
     ...props
   }, ref) => /* @__PURE__ */ jsx(Overlay3, { $open: open, children: /* @__PURE__ */ jsxs(Panel3, { ref, "aria-hidden": !open, "aria-label": title, ...props, children: [
-    /* @__PURE__ */ jsxs(Header2, { children: [
+    /* @__PURE__ */ jsxs(Header3, { children: [
       /* @__PURE__ */ jsx(Title8, { children: title }),
       /* @__PURE__ */ jsx(IconButton, { type: "button", "aria-label": closeLabel, onClick: onClose, children: "\xD7" })
     ] }),
-    /* @__PURE__ */ jsx(Items, { children: items.map((item) => /* @__PURE__ */ jsxs(Item3, { children: [
-      item.imageUrl ? /* @__PURE__ */ jsx(ItemImage, { src: item.imageUrl, alt: item.imageAlt ?? item.name }) : /* @__PURE__ */ jsx(PlaceholderImage, {}),
-      /* @__PURE__ */ jsxs(ItemInfo, { children: [
-        /* @__PURE__ */ jsxs(Row4, { children: [
-          /* @__PURE__ */ jsx(ItemName, { children: item.name }),
-          /* @__PURE__ */ jsx(ItemMeta, { children: item.price })
-        ] }),
-        /* @__PURE__ */ jsxs(Row4, { children: [
-          /* @__PURE__ */ jsx(
-            QuantitySelector,
-            {
-              value: item.quantity,
-              min: 1,
-              onChange: (quantity) => onQuantityChange?.(item.id, quantity)
-            }
-          ),
-          /* @__PURE__ */ jsx(RemoveButton2, { type: "button", onClick: () => onRemove?.(item.id), children: "Usu\u0144" })
-        ] })
-      ] })
-    ] }, item.id)) }),
+    /* @__PURE__ */ jsx(Items, { children: items.map((item) => /* @__PURE__ */ jsx(
+      CartDrawerItem,
+      {
+        ...item,
+        onQuantityChange,
+        onRemove
+      },
+      item.id
+    )) }),
     /* @__PURE__ */ jsxs(Footer5, { children: [
-      /* @__PURE__ */ jsxs(Row4, { children: [
+      /* @__PURE__ */ jsxs(Row6, { children: [
         /* @__PURE__ */ jsx("strong", { children: "Suma" }),
         /* @__PURE__ */ jsx("strong", { children: subtotal })
       ] }),
@@ -10013,7 +10513,7 @@ var CartDrawer = forwardRef(
   ] }) })
 );
 CartDrawer.displayName = "CartDrawer";
-var Root43 = styled("aside")(({ theme }) => ({
+var Root52 = styled("aside")(({ theme }) => ({
   display: "grid",
   gap: "1.5rem",
   width: "100%",
@@ -10024,7 +10524,7 @@ var Root43 = styled("aside")(({ theme }) => ({
   backgroundColor: theme.palette.background.paper,
   fontFamily: theme.typography.fontFamily
 }));
-var Header3 = styled("div")({
+var Header4 = styled("div")({
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
@@ -10105,8 +10605,8 @@ var FilterSidebar = forwardRef(
     onPriceRangeChange,
     onClear,
     ...props
-  }, ref) => /* @__PURE__ */ jsxs(Root43, { ref, "aria-label": "Filtry produkt\xF3w", ...props, children: [
-    /* @__PURE__ */ jsxs(Header3, { children: [
+  }, ref) => /* @__PURE__ */ jsxs(Root52, { ref, "aria-label": "Filtry produkt\xF3w", ...props, children: [
+    /* @__PURE__ */ jsxs(Header4, { children: [
       /* @__PURE__ */ jsx(Title9, { children: "Filtry" }),
       onClear && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: onClear, children: "Wyczy\u015B\u0107" })
     ] }),
@@ -10133,67 +10633,37 @@ var FilterSidebar = forwardRef(
         )
       ] })
     ] }),
-    categories.length > 0 && /* @__PURE__ */ jsxs(Group, { children: [
-      /* @__PURE__ */ jsx(Legend, { children: "Kategorie" }),
-      renderOptions(categories, selectedCategories, onToggleCategory)
-    ] }),
-    colors.length > 0 && /* @__PURE__ */ jsxs(Group, { children: [
-      /* @__PURE__ */ jsx(Legend, { children: "Kolory" }),
-      renderOptions(colors, selectedColors, onToggleColor)
-    ] }),
-    sizes.length > 0 && /* @__PURE__ */ jsxs(Group, { children: [
-      /* @__PURE__ */ jsx(Legend, { children: "Rozmiary" }),
-      renderOptions(sizes, selectedSizes, onToggleSize)
-    ] })
-  ] })
-);
-FilterSidebar.displayName = "FilterSidebar";
-var Root44 = styled(Card)({ display: "grid", gap: "1rem" });
-var Title10 = styled("h2")(({ theme }) => ({
-  margin: 0,
-  fontFamily: theme.typography.fontFamily,
-  fontSize: "1.125rem",
-  fontWeight: 800,
-  color: theme.palette.text.primary
-}));
-var Rows = styled("dl")({ display: "grid", gap: "0.75rem", margin: 0 });
-var SectionTitle = styled("h3")(({ theme }) => ({
-  margin: 0,
-  fontFamily: theme.typography.fontFamily,
-  fontSize: "0.875rem",
-  fontWeight: 800,
-  color: theme.palette.text.primary
-}));
-var ItemList = styled("ul")({
-  display: "grid",
-  gap: "0.875rem",
-  padding: 0,
-  margin: 0,
-  listStyle: "none"
-});
-var Item4 = styled("li")({
+    categories.length > 0 && /* @__PURE__ */ jsxs(Group, { children: [
+      /* @__PURE__ */ jsx(Legend, { children: "Kategorie" }),
+      renderOptions(categories, selectedCategories, onToggleCategory)
+    ] }),
+    colors.length > 0 && /* @__PURE__ */ jsxs(Group, { children: [
+      /* @__PURE__ */ jsx(Legend, { children: "Kolory" }),
+      renderOptions(colors, selectedColors, onToggleColor)
+    ] }),
+    sizes.length > 0 && /* @__PURE__ */ jsxs(Group, { children: [
+      /* @__PURE__ */ jsx(Legend, { children: "Rozmiary" }),
+      renderOptions(sizes, selectedSizes, onToggleSize)
+    ] })
+  ] })
+);
+FilterSidebar.displayName = "FilterSidebar";
+var Root53 = styled("li")({
   display: "grid",
   gridTemplateColumns: "3.5rem 1fr auto",
   alignItems: "center",
   gap: "0.75rem"
 });
-var ItemImage2 = styled("img")(({ theme }) => ({
-  width: "3.5rem",
-  height: "3.5rem",
-  borderRadius: theme.shape.borderRadius,
-  objectFit: "cover",
-  backgroundColor: theme.palette.action.hover
-}));
-var ItemImagePlaceholder = styled("div")(({ theme }) => ({
+var ImageWrap5 = styled("div")(({ theme }) => ({
+  position: "relative",
   width: "3.5rem",
   height: "3.5rem",
   borderRadius: theme.shape.borderRadius,
-  backgroundColor: theme.palette.action.hover
+  overflow: "hidden",
+  flexShrink: 0
 }));
-var ItemInfo2 = styled("div")({
-  minWidth: 0
-});
-var ItemName2 = styled("p")(({ theme }) => ({
+var Info6 = styled("div")({ minWidth: 0 });
+var Name13 = styled("p")(({ theme }) => ({
   margin: 0,
   color: theme.palette.text.primary,
   fontFamily: theme.typography.fontFamily,
@@ -10201,39 +10671,88 @@ var ItemName2 = styled("p")(({ theme }) => ({
   fontWeight: 700,
   lineHeight: 1.4
 }));
-var ItemMeta2 = styled("p")(({ theme }) => ({
+var Meta2 = styled("p")(({ theme }) => ({
   margin: "0.25rem 0 0",
   color: theme.palette.text.secondary,
   fontFamily: theme.typography.fontFamily,
   fontSize: "0.8125rem",
   lineHeight: 1.4
 }));
-var ItemPrice = styled("span")(({ theme }) => ({
+var Price4 = styled("span")(({ theme }) => ({
   color: theme.palette.text.primary,
   fontFamily: theme.typography.fontFamily,
   fontSize: "0.875rem",
   fontWeight: 800,
   whiteSpace: "nowrap"
 }));
-var Row5 = styled("div")(({ theme }) => ({
+var OrderSummaryItem = ({
+  name,
+  price,
+  imageUrl,
+  imageAlt,
+  quantity,
+  meta
+}) => /* @__PURE__ */ jsxs(Root53, { children: [
+  /* @__PURE__ */ jsx(ImageWrap5, { children: /* @__PURE__ */ jsx(ProductCardImage, { src: imageUrl, alt: imageAlt ?? String(name) }) }),
+  /* @__PURE__ */ jsxs(Info6, { children: [
+    /* @__PURE__ */ jsx(Name13, { children: name }),
+    (quantity !== void 0 || meta) && /* @__PURE__ */ jsxs(Meta2, { children: [
+      quantity !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        "Ilo\u015B\u0107: ",
+        quantity
+      ] }),
+      quantity !== void 0 && meta && " \xB7 ",
+      meta
+    ] })
+  ] }),
+  /* @__PURE__ */ jsx(Price4, { children: price })
+] });
+OrderSummaryItem.displayName = "OrderSummaryItem";
+var Root54 = styled("div", {
+  shouldForwardProp: (prop) => prop !== "$total"
+})(({ theme, $total }) => ({
   display: "flex",
   justifyContent: "space-between",
   gap: "1rem",
-  color: theme.palette.text.secondary,
+  color: $total ? theme.palette.text.primary : theme.palette.text.secondary,
   fontFamily: theme.typography.fontFamily,
-  fontSize: "0.875rem",
+  fontSize: $total ? "1rem" : "0.875rem",
+  fontWeight: $total ? 800 : 400,
   "& dt, & dd": { margin: 0 }
 }));
+var OrderSummaryRow = ({ label, value, total = false }) => /* @__PURE__ */ jsxs(Root54, { as: "div", $total: total, children: [
+  /* @__PURE__ */ jsx("dt", { children: label }),
+  /* @__PURE__ */ jsx("dd", { children: value })
+] });
+OrderSummaryRow.displayName = "OrderSummaryRow";
+var Root55 = styled(Card)({ display: "grid", gap: "1rem" });
+var Title10 = styled("h2")(({ theme }) => ({
+  margin: 0,
+  fontFamily: theme.typography.fontFamily,
+  fontSize: "1.125rem",
+  fontWeight: 800,
+  color: theme.palette.text.primary
+}));
+var Rows = styled("dl")({ display: "grid", gap: "0.75rem", margin: 0 });
+var SectionTitle = styled("h3")(({ theme }) => ({
+  margin: 0,
+  fontFamily: theme.typography.fontFamily,
+  fontSize: "0.875rem",
+  fontWeight: 800,
+  color: theme.palette.text.primary
+}));
+var ItemList = styled("ul")({
+  display: "grid",
+  gap: "0.875rem",
+  padding: 0,
+  margin: 0,
+  listStyle: "none"
+});
 var Divider3 = styled("hr")(({ theme }) => ({
   width: "100%",
   border: 0,
   borderTop: `1px solid ${theme.palette.divider}`
 }));
-var TotalRow = styled(Row5)(({ theme }) => ({
-  color: theme.palette.text.primary,
-  fontSize: "1rem",
-  fontWeight: 800
-}));
 var OrderSummary = forwardRef(
   ({
     title = "Podsumowanie zam\xF3wienia",
@@ -10248,59 +10767,27 @@ var OrderSummary = forwardRef(
     ctaLabel = "Przejd\u017A do kasy",
     onCheckout,
     ...props
-  }, ref) => /* @__PURE__ */ jsxs(Root44, { ref, variant: "default", padding: "lg", rounded: "lg", ...props, children: [
+  }, ref) => /* @__PURE__ */ jsxs(Root55, { ref, variant: "default", padding: "lg", rounded: "lg", ...props, children: [
     /* @__PURE__ */ jsx(Title10, { children: title }),
     items.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(SectionTitle, { children: itemsTitle }),
-      /* @__PURE__ */ jsx(ItemList, { children: items.map((item) => /* @__PURE__ */ jsxs(Item4, { children: [
-        item.imageUrl ? /* @__PURE__ */ jsx(ItemImage2, { src: item.imageUrl, alt: item.imageAlt ?? String(item.name) }) : /* @__PURE__ */ jsx(ItemImagePlaceholder, { "aria-hidden": "true" }),
-        /* @__PURE__ */ jsxs(ItemInfo2, { children: [
-          /* @__PURE__ */ jsx(ItemName2, { children: item.name }),
-          (item.quantity !== void 0 || item.meta) && /* @__PURE__ */ jsxs(ItemMeta2, { children: [
-            item.quantity !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-              "Ilo\u015B\u0107: ",
-              item.quantity
-            ] }),
-            item.quantity !== void 0 && item.meta && " \xB7 ",
-            item.meta
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx(ItemPrice, { children: item.price })
-      ] }, item.id)) }),
+      /* @__PURE__ */ jsx(ItemList, { children: items.map((item) => /* @__PURE__ */ jsx(OrderSummaryItem, { ...item }, item.id)) }),
       /* @__PURE__ */ jsx(Divider3, {})
     ] }),
     /* @__PURE__ */ jsxs(Rows, { children: [
-      /* @__PURE__ */ jsxs(Row5, { children: [
-        /* @__PURE__ */ jsx("dt", { children: "Warto\u015B\u0107 produkt\xF3w" }),
-        /* @__PURE__ */ jsx("dd", { children: subtotal })
-      ] }),
-      shipping !== void 0 && /* @__PURE__ */ jsxs(Row5, { children: [
-        /* @__PURE__ */ jsx("dt", { children: "Dostawa" }),
-        /* @__PURE__ */ jsx("dd", { children: shipping })
-      ] }),
-      tax !== void 0 && /* @__PURE__ */ jsxs(Row5, { children: [
-        /* @__PURE__ */ jsx("dt", { children: "Podatek" }),
-        /* @__PURE__ */ jsx("dd", { children: tax })
-      ] }),
-      discount !== void 0 && /* @__PURE__ */ jsxs(Row5, { children: [
-        /* @__PURE__ */ jsx("dt", { children: "Rabat" }),
-        /* @__PURE__ */ jsx("dd", { children: discount })
-      ] }),
-      lines.map((line, index) => /* @__PURE__ */ jsxs(Row5, { children: [
-        /* @__PURE__ */ jsx("dt", { children: line.label }),
-        /* @__PURE__ */ jsx("dd", { children: line.value })
-      ] }, index))
+      /* @__PURE__ */ jsx(OrderSummaryRow, { label: "Warto\u015B\u0107 produkt\xF3w", value: subtotal }),
+      shipping !== void 0 && /* @__PURE__ */ jsx(OrderSummaryRow, { label: "Dostawa", value: shipping }),
+      tax !== void 0 && /* @__PURE__ */ jsx(OrderSummaryRow, { label: "Podatek", value: tax }),
+      discount !== void 0 && /* @__PURE__ */ jsx(OrderSummaryRow, { label: "Rabat", value: discount }),
+      lines.map((line, index) => /* @__PURE__ */ jsx(OrderSummaryRow, { label: line.label, value: line.value }, index))
     ] }),
     /* @__PURE__ */ jsx(Divider3, {}),
-    /* @__PURE__ */ jsx(Rows, { children: /* @__PURE__ */ jsxs(TotalRow, { children: [
-      /* @__PURE__ */ jsx("dt", { children: "Razem" }),
-      /* @__PURE__ */ jsx("dd", { children: total })
-    ] }) }),
+    /* @__PURE__ */ jsx(Rows, { children: /* @__PURE__ */ jsx(OrderSummaryRow, { label: "Razem", value: total, total: true }) }),
     /* @__PURE__ */ jsx(Button, { fullWidth: true, onClick: onCheckout, children: ctaLabel })
   ] })
 );
 OrderSummary.displayName = "OrderSummary";
-var Root45 = styled("div")(({ theme }) => ({
+var Root56 = styled("div")(({ theme }) => ({
   fontFamily: theme.typography.fontFamily
 }));
 var Grid2 = styled("div", {
@@ -10335,17 +10822,87 @@ var ScrollTrack = styled("div")({
   }
 });
 var RelatedProducts = forwardRef(
-  ({ products, title = "Podobne produkty", layout = "grid", columns = 4, ...props }, ref) => /* @__PURE__ */ jsxs(Root45, { ref, ...props, children: [
+  ({ products, title = "Podobne produkty", layout = "grid", columns = 4, ...props }, ref) => /* @__PURE__ */ jsxs(Root56, { ref, ...props, children: [
     /* @__PURE__ */ jsx(SectionHeading, { title, align: "left", style: { marginBottom: "1.5rem" } }),
     layout === "scroll" ? /* @__PURE__ */ jsx(ScrollTrack, { children: products.map((product, i) => /* @__PURE__ */ jsx(ProductCard, { ...product }, product.name + i)) }) : /* @__PURE__ */ jsx(Grid2, { $columns: columns, children: products.map((product, i) => /* @__PURE__ */ jsx(ProductCard, { ...product }, product.name + i)) })
   ] })
 );
 RelatedProducts.displayName = "RelatedProducts";
 var relatedProductsLayouts = ["grid", "scroll"];
-var Root46 = styled("div")(({ theme }) => ({
+var Card2 = styled("div")(({ theme }) => ({
+  padding: "1.25rem",
+  border: `1px solid ${theme.palette.divider}`,
+  borderRadius: theme.shape.borderRadius,
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.75rem",
   fontFamily: theme.typography.fontFamily
 }));
-var Summary = styled("div")(({ theme }) => ({
+var Header5 = styled("div")({
+  display: "flex",
+  alignItems: "flex-start",
+  gap: "0.875rem"
+});
+var AuthorInfo = styled("div")({ flex: 1 });
+var AuthorName = styled("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: "0.375rem",
+  fontSize: "0.9375rem",
+  fontWeight: 700,
+  color: theme.palette.text.primary
+}));
+var ReviewDate = styled("div")(({ theme }) => ({
+  fontSize: "0.8125rem",
+  color: theme.palette.text.secondary,
+  marginTop: "0.125rem"
+}));
+var Title11 = styled("div")(({ theme }) => ({
+  fontSize: "0.9375rem",
+  fontWeight: 700,
+  color: theme.palette.text.primary
+}));
+var Content3 = styled("p")(({ theme }) => ({
+  margin: 0,
+  fontSize: "0.9375rem",
+  color: theme.palette.text.secondary,
+  lineHeight: 1.6
+}));
+var HelpfulRow = styled("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: "0.375rem",
+  fontSize: "0.8125rem",
+  color: theme.palette.text.secondary
+}));
+var ReviewItem = ({ review }) => /* @__PURE__ */ jsxs(Card2, { children: [
+  /* @__PURE__ */ jsxs(Header5, { children: [
+    /* @__PURE__ */ jsx(Avatar, { initials: review.author.slice(0, 2).toUpperCase(), size: "sm" }),
+    /* @__PURE__ */ jsxs(AuthorInfo, { children: [
+      /* @__PURE__ */ jsxs(AuthorName, { children: [
+        review.author,
+        review.verified && /* @__PURE__ */ jsx(
+          VerifiedIcon,
+          {
+            "aria-label": "Zweryfikowany zakup",
+            style: { fontSize: 14, color: "#16a34a" }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(ReviewDate, { children: review.date })
+    ] }),
+    /* @__PURE__ */ jsx(Rating, { value: review.rating, size: "sm", readonly: true })
+  ] }),
+  review.title && /* @__PURE__ */ jsx(Title11, { children: review.title }),
+  /* @__PURE__ */ jsx(Content3, { children: review.content }),
+  review.helpfulCount !== void 0 && /* @__PURE__ */ jsxs(HelpfulRow, { children: [
+    /* @__PURE__ */ jsx(ThumbUpOutlinedIcon, { "aria-hidden": true, style: { fontSize: 14 } }),
+    review.helpfulCount,
+    " os\xF3b uzna\u0142o t\u0119 recenzj\u0119 za pomocn\u0105"
+  ] })
+] });
+ReviewItem.displayName = "ReviewItem";
+var Root57 = styled("div")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   gap: "2rem",
@@ -10353,7 +10910,7 @@ var Summary = styled("div")(({ theme }) => ({
   padding: "1.5rem",
   backgroundColor: theme.palette.action.hover,
   borderRadius: theme.shape.borderRadius,
-  marginBottom: "2rem"
+  fontFamily: theme.typography.fontFamily
 }));
 var AverageBlock = styled("div")({
   display: "flex",
@@ -10361,13 +10918,23 @@ var AverageBlock = styled("div")({
   alignItems: "center",
   gap: "0.25rem"
 });
-var AverageScore = styled("span")(({ theme }) => ({
+var Score = styled("span")(({ theme }) => ({
   fontSize: "3rem",
   fontWeight: 800,
   lineHeight: 1,
   color: theme.palette.text.primary
 }));
-var Distribution = styled("div")({ flex: 1, display: "flex", flexDirection: "column", gap: "0.375rem" });
+var ReviewCount = styled("span")(({ theme }) => ({
+  fontSize: "0.8125rem",
+  marginTop: "0.25rem",
+  color: theme.palette.text.secondary
+}));
+var Distribution = styled("div")({
+  flex: 1,
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.375rem"
+});
 var DistRow = styled("div")({ display: "flex", alignItems: "center", gap: "0.75rem" });
 var DistLabel = styled("span")(({ theme }) => ({
   fontSize: "0.8125rem",
@@ -10391,117 +10958,142 @@ var DistFill = styled("div", {
   borderRadius: "9999px",
   transition: "width 400ms ease"
 }));
+var ReviewSummary = ({
+  averageRating,
+  totalReviews,
+  ratingDistribution
+}) => {
+  const totalDist = ratingDistribution ? Object.values(ratingDistribution).reduce((a, b) => a + b, 0) : 0;
+  return /* @__PURE__ */ jsxs(Root57, { children: [
+    /* @__PURE__ */ jsxs(AverageBlock, { children: [
+      /* @__PURE__ */ jsx(Score, { children: averageRating.toFixed(1) }),
+      /* @__PURE__ */ jsx(Rating, { value: averageRating, size: "sm", readonly: true }),
+      totalReviews !== void 0 && /* @__PURE__ */ jsxs(ReviewCount, { children: [
+        totalReviews,
+        " opinii"
+      ] })
+    ] }),
+    ratingDistribution && /* @__PURE__ */ jsx(Distribution, { children: [5, 4, 3, 2, 1].map((star) => {
+      const count = ratingDistribution[star] ?? 0;
+      const pct2 = totalDist > 0 ? count / totalDist * 100 : 0;
+      return /* @__PURE__ */ jsxs(DistRow, { children: [
+        /* @__PURE__ */ jsxs(DistLabel, { children: [
+          star,
+          "\u2605"
+        ] }),
+        /* @__PURE__ */ jsx(DistBar, { children: /* @__PURE__ */ jsx(DistFill, { $pct: pct2 }) }),
+        /* @__PURE__ */ jsx(DistLabel, { style: { textAlign: "left" }, children: count })
+      ] }, star);
+    }) })
+  ] });
+};
+ReviewSummary.displayName = "ReviewSummary";
+var Root58 = styled("div")(({ theme }) => ({
+  fontFamily: theme.typography.fontFamily
+}));
 var ReviewList = styled("div")({
   display: "flex",
   flexDirection: "column",
   gap: "1.5rem"
 });
-var ReviewCard = styled("div")(({ theme }) => ({
-  padding: "1.25rem",
-  border: `1px solid ${theme.palette.divider}`,
-  borderRadius: theme.shape.borderRadius,
-  display: "flex",
-  flexDirection: "column",
-  gap: "0.75rem"
-}));
-var ReviewHeader = styled("div")({
-  display: "flex",
-  alignItems: "flex-start",
-  gap: "0.875rem"
-});
-var AuthorInfo2 = styled("div")({ flex: 1 });
-var AuthorName2 = styled("div")(({ theme }) => ({
-  display: "flex",
-  alignItems: "center",
-  gap: "0.375rem",
-  fontSize: "0.9375rem",
-  fontWeight: 700,
-  color: theme.palette.text.primary
-}));
-var ReviewDate = styled("div")(({ theme }) => ({
-  fontSize: "0.8125rem",
-  color: theme.palette.text.secondary,
-  marginTop: "0.125rem"
-}));
-var ReviewTitle = styled("div")(({ theme }) => ({
-  fontSize: "0.9375rem",
+var ReviewSection = forwardRef(
+  ({
+    reviews,
+    averageRating,
+    totalReviews,
+    title = "Opinie klient\xF3w",
+    ratingDistribution,
+    ...props
+  }, ref) => /* @__PURE__ */ jsxs(Root58, { ref, ...props, children: [
+    /* @__PURE__ */ jsx(SectionHeading, { title, align: "left", style: { marginBottom: "1.5rem" } }),
+    averageRating !== void 0 && /* @__PURE__ */ jsx("div", { style: { marginBottom: "2rem" }, children: /* @__PURE__ */ jsx(
+      ReviewSummary,
+      {
+        averageRating,
+        totalReviews,
+        ratingDistribution
+      }
+    ) }),
+    /* @__PURE__ */ jsx(ReviewList, { children: reviews.map((review) => /* @__PURE__ */ jsx(ReviewItem, { review }, review.id)) })
+  ] })
+);
+ReviewSection.displayName = "ReviewSection";
+var Heading = styled("h2")(({ theme }) => ({
+  margin: "0 0 2rem",
+  fontFamily: theme.typography.fontFamily,
+  fontSize: "1.5rem",
   fontWeight: 700,
   color: theme.palette.text.primary
 }));
-var ReviewContent = styled("p")(({ theme }) => ({
-  margin: 0,
-  fontSize: "0.9375rem",
+var CommentCount = styled("span")(({ theme }) => ({
+  marginLeft: "0.375rem",
   color: theme.palette.text.secondary,
-  lineHeight: 1.6
+  fontWeight: 400
 }));
-var HelpfulRow = styled("div")(({ theme }) => ({
+var List5 = styled("div")({
   display: "flex",
-  alignItems: "center",
-  gap: "0.375rem",
-  fontSize: "0.8125rem",
-  color: theme.palette.text.secondary
+  flexDirection: "column"
+});
+var ThreadWrapper = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: "1.5rem",
+  paddingTop: "1.5rem",
+  paddingBottom: "1.5rem",
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  "&:first-of-type": {
+    paddingTop: 0
+  },
+  "&:last-child": {
+    borderBottom: "none",
+    paddingBottom: 0
+  }
 }));
-function ReviewItem({ review }) {
-  return /* @__PURE__ */ jsxs(ReviewCard, { children: [
-    /* @__PURE__ */ jsxs(ReviewHeader, { children: [
-      /* @__PURE__ */ jsx(
-        Avatar,
-        {
-          initials: review.author.slice(0, 2).toUpperCase(),
-          size: "sm"
-        }
-      ),
-      /* @__PURE__ */ jsxs(AuthorInfo2, { children: [
-        /* @__PURE__ */ jsxs(AuthorName2, { children: [
-          review.author,
-          review.verified && /* @__PURE__ */ jsx(VerifiedIcon, { "aria-label": "Zweryfikowany zakup", style: { fontSize: 14, color: "#16a34a" } })
-        ] }),
-        /* @__PURE__ */ jsx(ReviewDate, { children: review.date })
-      ] }),
-      /* @__PURE__ */ jsx(Rating, { value: review.rating, size: "sm", readonly: true })
-    ] }),
-    review.title && /* @__PURE__ */ jsx(ReviewTitle, { children: review.title }),
-    /* @__PURE__ */ jsx(ReviewContent, { children: review.content }),
-    review.helpfulCount !== void 0 && /* @__PURE__ */ jsxs(HelpfulRow, { children: [
-      /* @__PURE__ */ jsx(ThumbUpOutlinedIcon, { "aria-hidden": true, style: { fontSize: 14 } }),
-      review.helpfulCount,
-      " os\xF3b uzna\u0142o t\u0119 recenzj\u0119 za pomocn\u0105"
-    ] })
-  ] });
+var Replies = styled("div")({
+  display: "flex",
+  flexDirection: "column",
+  gap: "1.5rem"
+});
+function countTotal(comments) {
+  return comments.reduce((acc, c) => acc + 1 + (c.replies?.length ?? 0), 0);
 }
-var ReviewSection = forwardRef(
-  ({ reviews, averageRating, totalReviews, title = "Opinie klient\xF3w", ratingDistribution, ...props }, ref) => {
-    const totalDist = ratingDistribution ? Object.values(ratingDistribution).reduce((a, b) => a + b, 0) : 0;
-    return /* @__PURE__ */ jsxs(Root46, { ref, ...props, children: [
-      /* @__PURE__ */ jsx(SectionHeading, { title, align: "left", style: { marginBottom: "1.5rem" } }),
-      (averageRating !== void 0 || ratingDistribution) && /* @__PURE__ */ jsxs(Summary, { children: [
-        averageRating !== void 0 && /* @__PURE__ */ jsxs(AverageBlock, { children: [
-          /* @__PURE__ */ jsx(AverageScore, { children: averageRating.toFixed(1) }),
-          /* @__PURE__ */ jsx(Rating, { value: averageRating, size: "sm", readonly: true }),
-          totalReviews !== void 0 && /* @__PURE__ */ jsxs("span", { style: { fontSize: "0.8125rem", marginTop: "0.25rem" }, children: [
-            totalReviews,
-            " opinii"
-          ] })
-        ] }),
-        ratingDistribution && /* @__PURE__ */ jsx(Distribution, { children: [5, 4, 3, 2, 1].map((star) => {
-          const count = ratingDistribution[star] ?? 0;
-          const pct2 = totalDist > 0 ? count / totalDist * 100 : 0;
-          return /* @__PURE__ */ jsxs(DistRow, { children: [
-            /* @__PURE__ */ jsxs(DistLabel, { children: [
-              star,
-              "\u2605"
-            ] }),
-            /* @__PURE__ */ jsx(DistBar, { children: /* @__PURE__ */ jsx(DistFill, { $pct: pct2 }) }),
-            /* @__PURE__ */ jsx(DistLabel, { style: { textAlign: "left" }, children: count })
-          ] }, star);
-        }) })
+var CommentSection = forwardRef(
+  ({
+    title = "Komentarze",
+    comments,
+    maxWidth = "xl",
+    onLike,
+    onReply,
+    ...rest
+  }, ref) => {
+    const total = countTotal(comments);
+    return /* @__PURE__ */ jsx(Section, { ref, ...rest, children: /* @__PURE__ */ jsxs(Container, { maxWidth, children: [
+      /* @__PURE__ */ jsxs(Heading, { children: [
+        title,
+        /* @__PURE__ */ jsxs(CommentCount, { children: [
+          "(",
+          total,
+          ")"
+        ] })
       ] }),
-      /* @__PURE__ */ jsx(ReviewList, { children: reviews.map((review) => /* @__PURE__ */ jsx(ReviewItem, { review }, review.id)) })
-    ] });
+      /* @__PURE__ */ jsx(List5, { children: comments.map((comment) => /* @__PURE__ */ jsxs(ThreadWrapper, { children: [
+        /* @__PURE__ */ jsx(CommentCard, { comment, depth: 0, onLike, onReply }),
+        comment.replies && comment.replies.length > 0 && /* @__PURE__ */ jsx(Replies, { children: comment.replies.map((reply) => /* @__PURE__ */ jsx(
+          CommentCard,
+          {
+            comment: reply,
+            depth: 1,
+            onLike,
+            onReply
+          },
+          reply.id
+        )) })
+      ] }, comment.id)) })
+    ] }) });
   }
 );
-ReviewSection.displayName = "ReviewSection";
-var List4 = styled("div")(({ $hasHeading }) => ({
+CommentSection.displayName = "CommentSection";
+var List6 = styled("div")(({ $hasHeading }) => ({
   marginTop: $hasHeading ? "2.5rem" : 0
 }));
 var FaqSection = forwardRef(
@@ -10517,7 +11109,7 @@ var FaqSection = forwardRef(
     const hasHeading = Boolean(title || description);
     return /* @__PURE__ */ jsx(Section, { ref, ...rest, children: /* @__PURE__ */ jsxs(Container, { maxWidth, children: [
       hasHeading && /* @__PURE__ */ jsx(SectionHeading, { title: title ?? "", description, align: headingAlign }),
-      /* @__PURE__ */ jsx(List4, { $hasHeading: hasHeading, children: items.map((item, index) => /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(List6, { $hasHeading: hasHeading, children: items.map((item, index) => /* @__PURE__ */ jsx(
         FaqItem,
         {
           item,
@@ -10559,7 +11151,7 @@ var FeatureGrid = forwardRef(
     return /* @__PURE__ */ jsx(Section, { ref, ...rest, children: /* @__PURE__ */ jsxs(Container, { maxWidth, children: [
       hasHeading && /* @__PURE__ */ jsx(SectionHeading, { title: title ?? "", description, align: headingAlign }),
       /* @__PURE__ */ jsx(Grid3, { $columns: columns, $hasHeading: hasHeading, $iconLeft: itemLayout === "icon-left", children: features.map((feature, index) => /* @__PURE__ */ jsx(
-        FeatureItem2,
+        FeatureItem,
         {
           feature,
           cardVariant,
@@ -11042,7 +11634,7 @@ var GroupLabel3 = styled("div")(({ theme }) => ({
   textTransform: "uppercase",
   letterSpacing: "0.06em"
 }));
-var Item5 = styled("div", {
+var Item4 = styled("div", {
   shouldForwardProp: (p) => p !== "$active"
 })(({ theme, $active }) => ({
   display: "flex",
@@ -11241,7 +11833,7 @@ function CommandPalette({
                   const idx = globalIndex++;
                   const isActive = idx === activeIndex;
                   return /* @__PURE__ */ jsxs(
-                    Item5,
+                    Item4,
                     {
                       id: `${id}-item-${item.id}`,
                       role: "option",
@@ -11336,8 +11928,8 @@ var TopRow = styled("div")({
   gap: "1rem",
   flexWrap: "wrap"
 });
-var TextBlock = styled("div")({ flex: 1, minWidth: "16rem" });
-var Title11 = styled("p")(({ theme }) => ({
+var TextBlock2 = styled("div")({ flex: 1, minWidth: "16rem" });
+var Title12 = styled("p")(({ theme }) => ({
   margin: "0 0 0.25rem",
   fontFamily: theme.typography.fontFamily,
   fontSize: "1rem",
@@ -11345,7 +11937,7 @@ var Title11 = styled("p")(({ theme }) => ({
   color: theme.palette.text.primary,
   lineHeight: 1.4
 }));
-var Description8 = styled("p")(({ theme }) => ({
+var Description9 = styled("p")(({ theme }) => ({
   margin: 0,
   fontFamily: theme.typography.fontFamily,
   fontSize: "0.875rem",
@@ -11357,7 +11949,7 @@ var Link3 = styled("a")(({ theme }) => ({
   textDecoration: "underline",
   "&:hover": { opacity: 0.8 }
 }));
-var Actions = styled("div")({
+var Actions2 = styled("div")({
   display: "flex",
   alignItems: "center",
   gap: "0.625rem",
@@ -11501,9 +12093,9 @@ function CookieConsent({
   return createPortal(
     /* @__PURE__ */ jsx(Bar2, { role: "region", "aria-label": "Zgoda na pliki cookie", "aria-live": "polite", children: /* @__PURE__ */ jsxs(Inner4, { children: [
       /* @__PURE__ */ jsxs(TopRow, { children: [
-        /* @__PURE__ */ jsxs(TextBlock, { children: [
-          /* @__PURE__ */ jsx(Title11, { children: title }),
-          /* @__PURE__ */ jsxs(Description8, { children: [
+        /* @__PURE__ */ jsxs(TextBlock2, { children: [
+          /* @__PURE__ */ jsx(Title12, { children: title }),
+          /* @__PURE__ */ jsxs(Description9, { children: [
             description,
             privacyPolicyLabel && privacyPolicyHref && /* @__PURE__ */ jsxs(Fragment, { children: [
               " ",
@@ -11511,7 +12103,7 @@ function CookieConsent({
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs(Actions, { children: [
+        /* @__PURE__ */ jsxs(Actions2, { children: [
           /* @__PURE__ */ jsx(
             TextButton,
             {
@@ -11553,16 +12145,11 @@ function CookieConsent({
   );
 }
 var defaultCookieCategories = DEFAULT_CATEGORIES;
-var Root47 = styled("footer")(({ theme }) => ({
+var Root59 = styled("footer")(({ theme }) => ({
   width: "100%",
   backgroundColor: theme.palette.background.paper,
   borderTop: `1px solid ${theme.palette.divider}`
 }));
-var Inner5 = styled("div")({
-  maxWidth: "72rem",
-  margin: "0 auto",
-  padding: "3rem 1.5rem 2rem"
-});
 var TopRow2 = styled("div")({
   display: "grid",
   gridTemplateColumns: "1fr",
@@ -11580,7 +12167,7 @@ var BrandBlock = styled("div")({
   flexDirection: "column",
   gap: "0.75rem"
 });
-var Description9 = styled("p")(({ theme }) => ({
+var Description10 = styled("p")(({ theme }) => ({
   margin: 0,
   fontFamily: theme.typography.fontFamily,
   fontSize: "0.875rem",
@@ -11691,14 +12278,16 @@ function Footer7({
   description,
   columns = [],
   socialLinks = [],
-  copyright
+  copyright,
+  maxWidth = "lg",
+  style
 }) {
   const colCount = columns.length;
-  return /* @__PURE__ */ jsx(Root47, { children: /* @__PURE__ */ jsxs(Inner5, { children: [
+  return /* @__PURE__ */ jsx(Root59, { style, children: /* @__PURE__ */ jsxs(Container, { maxWidth, style: { paddingTop: "3rem", paddingBottom: "2rem" }, children: [
     (logo || description || colCount > 0) && /* @__PURE__ */ jsxs(TopRow2, { style: { "--col-count": colCount }, children: [
       (logo || description) && /* @__PURE__ */ jsxs(BrandBlock, { children: [
         logo,
-        description && /* @__PURE__ */ jsx(Description9, { children: description })
+        description && /* @__PURE__ */ jsx(Description10, { children: description })
       ] }),
       columns.map((col) => /* @__PURE__ */ jsxs(Column, { children: [
         /* @__PURE__ */ jsx(ColumnTitle, { children: col.title }),
@@ -11721,7 +12310,7 @@ function Footer7({
     ] })
   ] }) });
 }
-var Root48 = styled("header", {
+var Root60 = styled("header", {
   shouldForwardProp: (p) => p !== "$sticky" && p !== "$variant"
 })(({ theme, $sticky, $variant }) => ({
   position: $sticky ? "sticky" : "relative",
@@ -11732,17 +12321,6 @@ var Root48 = styled("header", {
   borderBottom: $variant === "transparent" ? "none" : `1px solid ${theme.palette.divider}`,
   boxShadow: $variant === "transparent" ? "none" : "0 1px 4px rgba(0,0,0,0.08)"
 }));
-var Inner6 = styled("div", {
-  shouldForwardProp: (p) => p !== "$maxWidth"
-})(({ $maxWidth }) => ({
-  maxWidth: typeof $maxWidth === "number" ? `${$maxWidth}px` : $maxWidth,
-  margin: "0 auto",
-  padding: "0 1.5rem",
-  height: "3.75rem",
-  display: "flex",
-  alignItems: "center",
-  gap: "1.5rem"
-}));
 var LogoSlot = styled("div")({
   flexShrink: 0,
   display: "flex",
@@ -11808,7 +12386,8 @@ var MobileDrawer = styled("div", {
   display: $open ? "flex" : "none",
   flexDirection: "column",
   gap: "0.25rem",
-  padding: "0.75rem 1.5rem 1rem",
+  paddingTop: "0.75rem",
+  paddingBottom: "1rem",
   borderTop: `1px solid ${theme.palette.divider}`,
   backgroundColor: theme.palette.background.paper,
   "@media (min-width: 768px)": {
@@ -11839,87 +12418,80 @@ function Navbar({
   actions,
   sticky = false,
   variant = "filled",
-  maxWidth = "72rem"
+  maxWidth = "lg",
+  style
 }) {
   const [mobileOpen, setMobileOpen] = useState(false);
-  return /* @__PURE__ */ jsxs(Root48, { $sticky: sticky, $variant: variant, children: [
-    /* @__PURE__ */ jsxs(Inner6, { $maxWidth: maxWidth, children: [
-      logo && /* @__PURE__ */ jsx(LogoSlot, { children: logo }),
-      /* @__PURE__ */ jsx(Nav3, { "aria-label": "Nawigacja g\u0142\xF3wna", children: navItems.map((item) => /* @__PURE__ */ jsx(NavLink, { href: item.href, $active: !!item.active, children: item.label }, item.href)) }),
-      (actions || navItems.length > 0) && /* @__PURE__ */ jsxs(RightSlot, { children: [
-        actions,
-        navItems.length > 0 && /* @__PURE__ */ jsx(
-          HamburgerButton,
-          {
-            type: "button",
-            "aria-label": mobileOpen ? "Zamknij menu" : "Otw\xF3rz menu",
-            "aria-expanded": mobileOpen,
-            onClick: () => setMobileOpen((v) => !v),
-            children: /* @__PURE__ */ jsx(HamburgerIcon, { open: mobileOpen })
-          }
-        )
-      ] })
-    ] }),
-    navItems.length > 0 && /* @__PURE__ */ jsx(MobileDrawer, { $open: mobileOpen, "aria-label": "Menu mobilne", children: navItems.map((item) => /* @__PURE__ */ jsx(MobileNavLink, { href: item.href, $active: !!item.active, children: item.label }, item.href)) })
+  return /* @__PURE__ */ jsxs(Root60, { $sticky: sticky, $variant: variant, style, children: [
+    /* @__PURE__ */ jsxs(
+      Container,
+      {
+        maxWidth,
+        style: { height: "3.75rem", display: "flex", alignItems: "center", gap: "1.5rem" },
+        children: [
+          logo && /* @__PURE__ */ jsx(LogoSlot, { children: logo }),
+          /* @__PURE__ */ jsx(Nav3, { "aria-label": "Nawigacja g\u0142\xF3wna", children: navItems.map((item) => /* @__PURE__ */ jsx(NavLink, { href: item.href, $active: !!item.active, children: item.label }, item.href)) }),
+          (actions || navItems.length > 0) && /* @__PURE__ */ jsxs(RightSlot, { children: [
+            actions,
+            navItems.length > 0 && /* @__PURE__ */ jsx(
+              HamburgerButton,
+              {
+                type: "button",
+                "aria-label": mobileOpen ? "Zamknij menu" : "Otw\xF3rz menu",
+                "aria-expanded": mobileOpen,
+                onClick: () => setMobileOpen((v) => !v),
+                children: /* @__PURE__ */ jsx(HamburgerIcon, { open: mobileOpen })
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    navItems.length > 0 && /* @__PURE__ */ jsx(MobileDrawer, { $open: mobileOpen, "aria-label": "Menu mobilne", children: /* @__PURE__ */ jsx(Container, { maxWidth, children: navItems.map((item) => /* @__PURE__ */ jsx(MobileNavLink, { href: item.href, $active: !!item.active, children: item.label }, item.href)) }) })
   ] });
 }
-var ss = "sans-serif";
+var fontFamily = "'Lato', sans-serif";
 var typographyOptions = {
-  fontFamily: ["'Lato'", ss].join(","),
-  h1: {
-    fontFamily: ["'Lato'", ss].join(","),
-    fontSize: "1.75rem"
-  },
-  h2: {
-    fontFamily: ["'Lato'", ss].join(","),
-    fontSize: "1.375rem"
-  },
-  h3: {
-    fontFamily: ["'Lato'", ss].join(","),
-    fontSize: "1.125rem"
-  },
-  h4: {
-    fontFamily: ["'Lato'", ss].join(","),
-    fontSize: "1rem"
-  },
-  h5: {
-    fontFamily: ["'Lato'", ss].join(","),
-    fontSize: "0.875rem"
-  },
-  h6: {
-    fontFamily: ["'Lato'", ss].join(","),
-    fontSize: "0.75rem"
-  }
+  fontFamily,
+  h1: { fontSize: "1.75rem" },
+  h2: { fontSize: "1.375rem" },
+  h3: { fontSize: "1.125rem" },
+  h4: { fontSize: "1rem" },
+  h5: { fontSize: "0.875rem" },
+  h6: { fontSize: "0.75rem" }
 };
-var themeLight = createTheme({
+var themeBase = {
   typography: typographyOptions,
+  palette: {
+    error: { main: "#d32f2f", dark: "#b71c1c", light: "#ef5350", contrastText: "#ffffff" },
+    success: { main: "#388e3c", dark: "#2e7d32", light: "#66bb6a", contrastText: "#ffffff" },
+    warning: { main: "#f57c00", dark: "#ef6c00", light: "#ffb74d", contrastText: "#000000" },
+    info: { main: "#1976d2", dark: "#1565c0", light: "#42a5f5", contrastText: "#ffffff" }
+  }
+};
+var themeLight = createTheme(themeBase, {
   palette: {
     mode: "light",
     primary: { main: "#1976d2", dark: "#1565c0", light: "#42a5f5", contrastText: "#ffffff" },
     secondary: { main: "#6b7280", dark: "#4b5563", light: "#9ca3af", contrastText: "#ffffff" },
-    error: { main: "#d32f2f", dark: "#b71c1c", light: "#ef5350", contrastText: "#ffffff" },
     action: { disabled: "rgba(0,0,0,0.38)", disabledBackground: "rgba(0,0,0,0.12)" },
     background: { default: "#ffffff", paper: "#f5f5f5" }
   }
 });
-var themeDark = createTheme({
-  typography: typographyOptions,
+var themeDark = createTheme(themeBase, {
   palette: {
     mode: "dark",
     primary: { main: "#90caf9", dark: "#42a5f5", light: "#bbdefb", contrastText: "#0d1b2a" },
     secondary: { main: "#9ca3af", dark: "#6b7280", light: "#d1d5db", contrastText: "#111827" },
-    error: { main: "#f48fb1", dark: "#f06292", light: "#fce4ec", contrastText: "#1a0010" },
     action: { disabled: "rgba(255,255,255,0.30)", disabledBackground: "rgba(255,255,255,0.12)" },
     background: { default: "#121212", paper: "#1e1e1e" }
   }
 });
-var themeHighContrast = createTheme({
-  typography: typographyOptions,
+var themeHighContrast = createTheme(themeBase, {
   palette: {
     mode: "dark",
     primary: { main: "#ffffff", dark: "#e0e0e0", light: "#ffffff", contrastText: "#000000" },
     secondary: { main: "#ffff00", dark: "#cccc00", light: "#ffff66", contrastText: "#000000" },
-    error: { main: "#ff6b6b", dark: "#ff3333", light: "#ffaaaa", contrastText: "#000000" },
     action: { disabled: "rgba(255,255,255,0.38)", disabledBackground: "rgba(255,255,255,0.12)" },
     background: { default: "#000000", paper: "#1a1a1a" }
   }
@@ -11968,6 +12540,6 @@ var MyThemeProvider = ({
   ] });
 };
 
-export { Accordion, Alert, Article, AspectRatio, Avatar, BackToTop, Badge2 as Badge, BaseInput, BaseSelectInput, Box2 as Box, Breadcrumbs, Button, Card, Carousel, CartButton, CartDrawer, CategoryCard, CheckboxInput, CommandPalette, CompareTool, Container, ContextMenu, CookieConsent, CountdownTimer, CountryFlag, CouponInput, DateTimePicker, EmailInput, EmptyState, FaqItem, FaqSection, FeatureGrid, FeatureItem2 as FeatureItem, FileInput, FilterSidebar, Footer7 as Footer, Lightbox, List3 as List, LogoCloud, LogoTile, Main, Marquee, Modal, MultiSelectInput, MyThemeProvider, Navbar, NewsletterSection, NumberInput, OrderSummary, PaginationBar, PaginationButton, PaginationEllipsis, Partners, PasswordInput, PaymentMethodSelector, PhoneInput, PostCard, PostCardImage, PostCardMeta, Price, PricingCard, PricingSection, ProcessSection, ProcessStep, ProductCard, ProductCardHorizontal, ProductGallery, ProgressBar, ProgressCircle, PromoStrip, Prose, QuantitySelector, RangeSlider, Rating, RelatedProducts, ReviewSection, SaleBadge, SearchInput, Section, SectionHeading, SelectInput, ShippingSelector, Skeleton, SortBar, Spinner3 as Spinner, StatCard, StatsSection, StockStatus, SwitchInput, Tabs, TeamMemberCard, TeamSection, TestimonialCard, TestimonialsSection, TextInput, TextareaInput, Timeline, VariantSelector, VideoPlayer, WishlistButton, accordionVariants, alertSeverities, aspectRatioPresets, avatarColors, avatarSizes, backToTopPositions, backToTopVariants, badgeVariants, cardPaddings, cardRoundeds, cardVariants, countdownTimerVariants, createMyTheme, dateTimePickerModes, defaultCookieCategories, featureGridColumns, listSizes, listVariants, logoCloudColumns, logoCloudVariants, logoTileVariants, marqueeDirections, marqueeSpeeds, modalSizes, myTheme, newsletterLayouts, postCardVariants, priceSizes, progressBarSizes, progressBarVariants, progressCircleSizes, progressCircleVariants, promoStripVariants, rangeSliderSizes, relatedProductsLayouts, saleBadgeVariants, sectionHeadingAligns, skeletonVariants, spinnerColors, spinnerSizes, spinnerVariants, statsSectionColumns, stockStatusValues, switchColors, tabsVariants, teamSectionColumns, testimonialsSectionColumns, themeDark, themeHighContrast, themeLight, timelineItemStatuses, timelineVariants, variantSelectorModes };
+export { Accordion, Alert, Article, AspectRatio, Avatar, BackToTop, Badge2 as Badge, BaseInput, BaseSelectInput, Box2 as Box, Breadcrumbs, Button, Card, Carousel, CartButton, CartDrawer, CartDrawerItem as CartDrawerItemComponent, CategoryCard, CategoryCardImage, CategoryCardInfo, CheckboxInput, CommandPalette, CommentActions, CommentBody, CommentCard, CommentMeta, CommentSection, CompareTool, Container, ContextMenu, CookieConsent, CountdownTimer, CountryFlag, CouponInput, DateTimePicker, DealCard, EmailInput, EmptyState, FaqItem, FaqSection, FeatureGrid, FeatureItem, FileInput, FilterSidebar, Footer7 as Footer, Image, Lightbox, List4 as List, LogoCloud, LogoTile, Main, Marquee, Modal, MultiSelectInput, MyThemeProvider, Navbar, NewsletterSection, NumberInput, OrderSummary, OrderSummaryItem as OrderSummaryItemComponent, OrderSummaryRow, PaginationBar, PaginationButton, PaginationEllipsis, Partners, PasswordInput, PaymentMethodSelector, PhoneInput, PostCard, PostCardImage, PostCardMeta, Price, PricingCard, PricingCardFeatureList, PricingCardPrice, PricingSection, ProcessSection, ProcessStep, ProductCard, ProductCardHorizontal, ProductCardImage, ProductGallery, ProfileCard, ProgressBar, ProgressCircle, PromoStrip, Prose, QuantitySelector, RangeSlider, Rating, RelatedProducts, ReviewItem, ReviewSection, ReviewSummary, SearchInput, Section, SectionHeading, SelectInput, ShippingSelector, Skeleton, SortBar, Spinner3 as Spinner, StatCard, StatsSection, StockStatus, SwitchInput, Tabs, TeamMemberAvatar, TeamMemberCard, TeamMemberInfo, TeamSection, TestimonialAuthor, TestimonialCard, TestimonialQuote, TestimonialsSection, TextInput, TextareaInput, Timeline, VariantSelector, VideoPlayer, VoucherCard, WishlistButton, accordionVariants, alertSeverities, aspectRatioPresets, avatarColors, avatarSizes, backToTopPositions, backToTopVariants, badgeVariants, cardPaddings, cardRoundeds, cardVariants, countdownTimerVariants, createMyTheme, dateTimePickerModes, defaultCookieCategories, featureGridColumns, listSizes, listVariants, logoCloudColumns, logoCloudVariants, logoTileVariants, marqueeDirections, marqueeSpeeds, modalSizes, myTheme, newsletterLayouts, postCardVariants, priceSizes, progressBarSizes, progressBarVariants, progressCircleSizes, progressCircleVariants, promoStripVariants, rangeSliderSizes, relatedProductsLayouts, sectionHeadingAligns, skeletonVariants, spinnerColors, spinnerSizes, spinnerVariants, statsSectionColumns, stockStatusValues, switchColors, tabsVariants, teamSectionColumns, testimonialsSectionColumns, themeDark, themeHighContrast, themeLight, timelineItemStatuses, timelineVariants, variantSelectorModes };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map