@szymonpiatek/designsystem 0.0.8 → 0.0.9

package/dist/index.cjs

@@ -35,6 +35,8 @@ var CreditCardOutlinedIcon = require('@mui/icons-material/CreditCardOutlined');
 var LocalShippingOutlinedIcon = require('@mui/icons-material/LocalShippingOutlined');
 var GridViewIcon = require('@mui/icons-material/GridView');
 var ViewListIcon = require('@mui/icons-material/ViewList');
+var ThumbUpOutlinedIcon = require('@mui/icons-material/ThumbUpOutlined');
+var ReplyIcon = require('@mui/icons-material/Reply');
 var reactDom = require('react-dom');
 var KeyboardDoubleArrowLeftIcon = require('@mui/icons-material/KeyboardDoubleArrowLeft');
 var KeyboardDoubleArrowRightIcon = require('@mui/icons-material/KeyboardDoubleArrowRight');
@@ -43,7 +45,6 @@ var WarningAmberOutlinedIcon = require('@mui/icons-material/WarningAmberOutlined
 var ErrorOutlineOutlinedIcon = require('@mui/icons-material/ErrorOutlineOutlined');
 var InboxOutlinedIcon = require('@mui/icons-material/InboxOutlined');
 var VerifiedIcon = require('@mui/icons-material/Verified');
-var ThumbUpOutlinedIcon = require('@mui/icons-material/ThumbUpOutlined');
 var ArrowForwardIcon = require('@mui/icons-material/ArrowForward');
 var MenuIcon = require('@mui/icons-material/Menu');
 
@@ -78,6 +79,8 @@ var CreditCardOutlinedIcon__default = /*#__PURE__*/_interopDefault(CreditCardOut
 var LocalShippingOutlinedIcon__default = /*#__PURE__*/_interopDefault(LocalShippingOutlinedIcon);
 var GridViewIcon__default = /*#__PURE__*/_interopDefault(GridViewIcon);
 var ViewListIcon__default = /*#__PURE__*/_interopDefault(ViewListIcon);
+var ThumbUpOutlinedIcon__default = /*#__PURE__*/_interopDefault(ThumbUpOutlinedIcon);
+var ReplyIcon__default = /*#__PURE__*/_interopDefault(ReplyIcon);
 var KeyboardDoubleArrowLeftIcon__default = /*#__PURE__*/_interopDefault(KeyboardDoubleArrowLeftIcon);
 var KeyboardDoubleArrowRightIcon__default = /*#__PURE__*/_interopDefault(KeyboardDoubleArrowRightIcon);
 var InfoOutlinedIcon__default = /*#__PURE__*/_interopDefault(InfoOutlinedIcon);
@@ -85,7 +88,6 @@ var WarningAmberOutlinedIcon__default = /*#__PURE__*/_interopDefault(WarningAmbe
 var ErrorOutlineOutlinedIcon__default = /*#__PURE__*/_interopDefault(ErrorOutlineOutlinedIcon);
 var InboxOutlinedIcon__default = /*#__PURE__*/_interopDefault(InboxOutlinedIcon);
 var VerifiedIcon__default = /*#__PURE__*/_interopDefault(VerifiedIcon);
-var ThumbUpOutlinedIcon__default = /*#__PURE__*/_interopDefault(ThumbUpOutlinedIcon);
 var ArrowForwardIcon__default = /*#__PURE__*/_interopDefault(ArrowForwardIcon);
 var MenuIcon__default = /*#__PURE__*/_interopDefault(MenuIcon);
 
@@ -3370,6 +3372,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",
@@ -3557,13 +3572,24 @@ var PhoneInput = react.forwardRef(
       () => COUNTRIES.find((c) => c.flagCode === defaultCountry) ?? DEFAULT_COUNTRY,
       [defaultCountry]
     );
-    const [selectedCountry, setSelectedCountry] = react.useState(initialCountry);
+    const [selectedCountry, setSelectedCountry] = react.useState(() => {
+      if (defaultValue?.startsWith("+")) return parsePhoneValue(defaultValue).country;
+      return initialCountry;
+    });
     const [isOpen, setIsOpen] = react.useState(false);
     const [searchQuery, setSearchQuery] = react.useState("");
     const [focused, setFocused] = react.useState(false);
     const isControlled = value !== void 0;
-    const [internalValue, setInternalValue] = react.useState(defaultValue);
-    const phoneValue = isControlled ? value : internalValue;
+    const [internalDigits, setInternalDigits] = react.useState(() => {
+      if (defaultValue?.startsWith("+")) return parsePhoneValue(defaultValue).localDigits;
+      return defaultValue ?? "";
+    });
+    const parsedControlled = react.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 = react.useRef(null);
     const searchRef = react.useRef(null);
     const filteredCountries = react.useMemo(() => {
@@ -3588,21 +3614,29 @@ var PhoneInput = react.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();
     };
     react.useEffect(() => {
@@ -3613,7 +3647,7 @@ var PhoneInput = react.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__ */ jsxRuntime.jsxs(Root8, { $fullWidth: fullWidth, ref: rootRef, children: [
       label && /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: inputId, error, size, children: label }),
       /* @__PURE__ */ jsxRuntime.jsxs(
@@ -3635,14 +3669,14 @@ var PhoneInput = react.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__ */ jsxRuntime.jsx(CountryFlag, { countryCode: selectedCountry.flagCode, size }),
-                  /* @__PURE__ */ jsxRuntime.jsx(DialCode, { children: selectedCountry.dialCode }),
+                  /* @__PURE__ */ jsxRuntime.jsx(CountryFlag, { countryCode: activeCountry.flagCode, size }),
+                  /* @__PURE__ */ jsxRuntime.jsx(DialCode, { children: activeCountry.dialCode }),
                   /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon, { $open: isOpen, children: /* @__PURE__ */ jsxRuntime.jsx(Chevron, {}) })
                 ]
               }
@@ -3656,14 +3690,14 @@ var PhoneInput = react.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
               }
             ),
@@ -3680,26 +3714,23 @@ var PhoneInput = react.forwardRef(
                   "aria-label": countrySearchAriaLabel
                 }
               ) }),
-              /* @__PURE__ */ jsxRuntime.jsx(OptionList, { children: filteredCountries.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(EmptyMessage, { children: "Nie znaleziono kraju" }) : filteredCountries.map((country) => {
-                const isSelected = country.flagCode === selectedCountry.flagCode;
-                return /* @__PURE__ */ jsxRuntime.jsxs(
-                  OptionItem2,
-                  {
-                    role: "option",
-                    "aria-selected": isSelected,
-                    $selected: isSelected,
-                    onClick: () => selectCountry(country),
-                    onKeyDown: (e) => e.key === "Enter" && selectCountry(country),
-                    tabIndex: 0,
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(CountryFlag, { countryCode: country.flagCode, size: "sm" }),
-                      /* @__PURE__ */ jsxRuntime.jsx(CountryName, { children: country.country }),
-                      /* @__PURE__ */ jsxRuntime.jsx(OptionDialCode, { children: country.dialCode })
-                    ]
-                  },
-                  country.flagCode
-                );
-              }) })
+              /* @__PURE__ */ jsxRuntime.jsx(OptionList, { children: filteredCountries.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(EmptyMessage, { children: "Nie znaleziono kraju" }) : filteredCountries.map((country) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(CountryFlag, { countryCode: country.flagCode, size: "sm" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(CountryName, { children: country.country }),
+                    /* @__PURE__ */ jsxRuntime.jsx(OptionDialCode, { children: country.dialCode })
+                  ]
+                },
+                country.flagCode
+              )) })
             ] })
           ]
         }
@@ -4834,55 +4865,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 = styles.styled("span", {
   shouldForwardProp: (prop) => prop !== "$variant"
 })(({ theme, $variant }) => ({
@@ -4893,54 +4920,11 @@ var StyledBadge = styles.styled("span", {
   fontWeight: 500,
   lineHeight: 1,
   fontFamily: theme.typography.fontFamily,
-  ...getVariantStyles2($variant, theme)
+  ...variantStyles2[$variant](theme)
 }));
 function Badge2({ variant = "default", ...props }) {
   return /* @__PURE__ */ jsxRuntime.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 = styles.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__ */ jsxRuntime.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" },
@@ -5089,7 +5073,7 @@ var spin = react$1.keyframes`to { transform: rotate(360deg); }`;
 var fade = react$1.keyframes`0%,100%{opacity:.15} 50%{opacity:1}`;
 var scalePulse = react$1.keyframes`0%,100%{transform:scale(0.6);opacity:.4} 50%{transform:scale(1);opacity:1}`;
 var barAnim = react$1.keyframes`0%,100%{transform:scaleY(.4);opacity:.5} 50%{transform:scaleY(1);opacity:1}`;
-var Root13 = styles.styled("span", {
+var Root12 = styles.styled("span", {
   shouldForwardProp: (p) => !["$size", "$color"].includes(p)
 })(({ theme, $size, $color }) => {
   const colorMap = {
@@ -5178,7 +5162,7 @@ function Spinner3({
   ...props
 }) {
   const Inner5 = VARIANTS[variant];
-  return /* @__PURE__ */ jsxRuntime.jsx(Root13, { $size: size, $color: color, role: "status", "aria-label": label, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Inner5, {}) });
+  return /* @__PURE__ */ jsxRuntime.jsx(Root12, { $size: size, $color: color, role: "status", "aria-label": label, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Inner5, {}) });
 }
 var spinnerVariants = ["ring", "dots", "pulse", "bars"];
 var spinnerSizes = ["xs", "sm", "md", "lg", "xl"];
@@ -5304,7 +5288,7 @@ var FONT_MAP = {
   lg: "1.125rem",
   xl: "1.5rem"
 };
-var Root14 = styles.styled("div")({ position: "relative", display: "inline-flex", flexShrink: 0 });
+var Root13 = styles.styled("div")({ position: "relative", display: "inline-flex", flexShrink: 0 });
 var Label2 = styles.styled("div", {
   shouldForwardProp: (p) => p !== "$size"
 })(({ theme, $size }) => ({
@@ -5358,7 +5342,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__ */ jsxRuntime.jsxs(
-    Root14,
+    Root13,
     {
       role: "progressbar",
       "aria-valuenow": value,
@@ -5715,9 +5699,10 @@ var PRESET_MAP = {
   "3/4": 3 / 4,
   "2/3": 2 / 3
 };
-var Root15 = styles.styled("div")({
+var Root14 = styles.styled("div")({
   position: "relative",
   width: "100%",
+  aspectRatio: "var(--ar)",
   "& > *": {
     position: "absolute",
     inset: 0,
@@ -5729,8 +5714,15 @@ var Root15 = styles.styled("div")({
 var AspectRatio = react.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__ */ jsxRuntime.jsx(Root15, { ref, style: { paddingBottom, ...style }, ...props, children });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Root14,
+      {
+        ref,
+        style: { "--ar": String(numericRatio), ...style },
+        ...props,
+        children
+      }
+    );
   }
 );
 AspectRatio.displayName = "AspectRatio";
@@ -5751,7 +5743,7 @@ var Placeholder2 = styles.styled("div")(({ theme }) => ({
 }));
 var CategoryCardImage = ({ src, alt }) => /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: "4/3", children: src ? /* @__PURE__ */ jsxRuntime.jsx(Img, { src, alt }) : /* @__PURE__ */ jsxRuntime.jsx(Placeholder2, { "aria-label": alt, children: /* @__PURE__ */ jsxRuntime.jsx(ImageIcon__default.default, { style: { fontSize: 48 } }) }) });
 CategoryCardImage.displayName = "CategoryCardImage";
-var Root16 = styles.styled("div")({
+var Root15 = styles.styled("div")({
   display: "flex",
   flexDirection: "column",
   gap: "0.25rem"
@@ -5773,7 +5765,7 @@ var CategoryCardInfo = ({
   name,
   count,
   countLabel = "produkt\xF3w"
-}) => /* @__PURE__ */ jsxRuntime.jsxs(Root16, { children: [
+}) => /* @__PURE__ */ jsxRuntime.jsxs(Root15, { children: [
   /* @__PURE__ */ jsxRuntime.jsx(Name, { children: name }),
   count !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs(Count, { children: [
     count,
@@ -5782,7 +5774,7 @@ var CategoryCardInfo = ({
   ] })
 ] });
 CategoryCardInfo.displayName = "CategoryCardInfo";
-var Root17 = styles.styled(Card)(({ theme }) => ({
+var Root16 = styles.styled(Card)(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
   overflow: "hidden",
@@ -5808,10 +5800,92 @@ var CategoryCard = react.forwardRef(
       /* @__PURE__ */ jsxRuntime.jsx(ImageWrap, { children: /* @__PURE__ */ jsxRuntime.jsx(CategoryCardImage, { src: imageUrl, alt: imageAlt ?? name }) }),
       /* @__PURE__ */ jsxRuntime.jsx(CategoryCardInfo, { name, count })
     ] });
-    return /* @__PURE__ */ jsxRuntime.jsx(Root17, { ref, variant: "default", padding: "md", rounded: "lg", ...props, children: href ? /* @__PURE__ */ jsxRuntime.jsx(CardLink, { href, children: content }) : content });
+    return /* @__PURE__ */ jsxRuntime.jsx(Root16, { ref, variant: "default", padding: "md", rounded: "lg", ...props, children: href ? /* @__PURE__ */ jsxRuntime.jsx(CardLink, { href, children: content }) : content });
   }
 );
 CategoryCard.displayName = "CategoryCard";
+function deriveInitials(name) {
+  return name.split(/\s+/).filter(Boolean).slice(0, 2).map((p) => p[0]?.toUpperCase() ?? "").join("");
+}
+var Root17 = styles.styled(Card)({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: "1rem",
+  flexWrap: "wrap"
+});
+var AvatarImg = styles.styled("img")({
+  borderRadius: "50%",
+  objectFit: "cover",
+  flexShrink: 0
+});
+var Identity = styles.styled("div")({
+  display: "flex",
+  alignItems: "center",
+  gap: "1rem",
+  flex: 1,
+  minWidth: 0
+});
+var TextBlock = styles.styled("div")({ minWidth: 0 });
+var Name2 = styles.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 = styles.styled("p")(({ theme }) => ({
+  margin: "0.25rem 0 0",
+  fontFamily: theme.typography.fontFamily,
+  fontSize: "0.875rem",
+  color: theme.palette.text.secondary,
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis"
+}));
+var Actions = styles.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 = react.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__ */ jsxRuntime.jsxs(Root17, { ref, variant: cardVariant, padding: "lg", rounded: "lg", ...props, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Identity, { children: [
+        avatarUrl ? /* @__PURE__ */ jsxRuntime.jsx(AvatarImg, { src: avatarUrl, alt: name, style: { width: imgSize, height: imgSize } }) : /* @__PURE__ */ jsxRuntime.jsx(Avatar, { initials: resolvedInitials, size: avatarSize, color: avatarColor }),
+        /* @__PURE__ */ jsxRuntime.jsxs(TextBlock, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Name2, { children: name }),
+          subtitle && /* @__PURE__ */ jsxRuntime.jsx(Subtitle, { children: subtitle })
+        ] })
+      ] }),
+      actions && /* @__PURE__ */ jsxRuntime.jsx(Actions, { children: actions })
+    ] });
+  }
+);
+ProfileCard.displayName = "ProfileCard";
 var DEFAULT_OMNIBUS_LABEL = "Najni\u017Csza cena z ostatnich 30 dni";
 var FONT_SIZE = {
   sm: "0.875rem",
@@ -6089,7 +6163,7 @@ var ImageWrap2 = styles.styled("div")({
   position: "relative",
   margin: "-1.5rem -1.5rem 1rem"
 });
-var Name2 = styles.styled("h3")(({ theme }) => ({
+var Name3 = styles.styled("h3")(({ theme }) => ({
   margin: 0,
   color: theme.palette.text.primary,
   fontFamily: theme.typography.fontFamily,
@@ -6119,7 +6193,7 @@ var DealCard = react.forwardRef(
   }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsxs(Root20, { ref, variant: "default", padding: "md", rounded: "lg", ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsx(ImageWrap2, { children: /* @__PURE__ */ jsxRuntime.jsx(ProductCardImage, { src: imageUrl, alt: imageAlt ?? name }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Name2, { children: name }),
+      /* @__PURE__ */ jsxRuntime.jsx(Name3, { children: name }),
       /* @__PURE__ */ jsxRuntime.jsx(
         Price,
         {
@@ -6369,6 +6443,7 @@ var PostCard = react.forwardRef(
     author,
     href,
     category,
+    categoryBadgeVariant,
     variant = "vertical",
     cardVariant = "default",
     ...rest
@@ -6380,7 +6455,7 @@ var PostCard = react.forwardRef(
       isFeatured && showImage && /* @__PURE__ */ jsxRuntime.jsx(FeaturedImageWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(PostCardImage, { src: imageUrl, alt: imageAlt, aspectRatio: "16/9", overlay: true }) }),
       !isFeatured && showImage && (isHorizontal ? /* @__PURE__ */ jsxRuntime.jsx(HorizontalImageWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(PostCardImage, { src: imageUrl, alt: imageAlt, aspectRatio: "4/3" }) }) : /* @__PURE__ */ jsxRuntime.jsx(PostCardImage, { src: imageUrl, alt: imageAlt, aspectRatio: "16/9" })),
       /* @__PURE__ */ jsxRuntime.jsxs(StyledContent, { $variant: variant, children: [
-        category && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Badge2, { variant: isFeatured ? "ghost" : "default", children: category }) }),
+        category && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Badge2, { variant: categoryBadgeVariant ?? (isFeatured ? "ghost" : "default"), children: category }) }),
         /* @__PURE__ */ jsxRuntime.jsx(StyledTitle, { className: "post-card-title", $featured: isFeatured, children: title }),
         excerpt && variant !== "compact" && !isFeatured && /* @__PURE__ */ jsxRuntime.jsx(StyledExcerpt, { children: excerpt }),
         (date || author) && /* @__PURE__ */ jsxRuntime.jsx(PostCardMeta, { date, author, inverted: isFeatured })
@@ -6472,7 +6547,7 @@ var NameRow = styles.styled("div")({
   justifyContent: "space-between",
   marginBottom: "0.75rem"
 });
-var Name3 = styles.styled("p")(({ theme }) => ({
+var Name4 = styles.styled("p")(({ theme }) => ({
   margin: 0,
   fontFamily: theme.typography.fontFamily,
   fontWeight: 600,
@@ -6537,6 +6612,7 @@ var PricingCard = react.forwardRef(
     href,
     popular = false,
     popularLabel = "Najpopularniejszy",
+    popularBadgeVariant = "default",
     cardVariant,
     ...props
   }, ref) => {
@@ -6544,8 +6620,8 @@ var PricingCard = react.forwardRef(
     const resolvedCtaVariant = ctaVariant ?? (popular ? "primary" : "ghost");
     return /* @__PURE__ */ jsxRuntime.jsxs(Root21, { ref, variant: resolvedCardVariant, padding: "lg", rounded: "lg", ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(NameRow, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Name3, { children: name }),
-        popular && /* @__PURE__ */ jsxRuntime.jsx(Badge2, { variant: "default", children: popularLabel })
+        /* @__PURE__ */ jsxRuntime.jsx(Name4, { children: name }),
+        popular && /* @__PURE__ */ jsxRuntime.jsx(Badge2, { variant: popularBadgeVariant, children: popularLabel })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(PricingCardPrice, { price, currency, period }),
       description && /* @__PURE__ */ jsxRuntime.jsx(Description2, { children: description }),
@@ -6558,7 +6634,7 @@ var PricingCard = react.forwardRef(
   }
 );
 PricingCard.displayName = "PricingCard";
-var sizeMap5 = {
+var sizeMap6 = {
   sm: "1rem",
   md: "1.25rem",
   lg: "1.5rem"
@@ -6583,7 +6659,7 @@ var StarButton = styles.styled("button")(
     padding: 0,
     color: $active ? "#f59e0b" : theme.palette.action.disabled,
     cursor: "pointer",
-    fontSize: sizeMap5[$size],
+    fontSize: sizeMap6[$size],
     lineHeight: 1,
     "&:disabled": {
       cursor: "default"
@@ -6629,6 +6705,10 @@ var Rating = react.forwardRef(
   }
 );
 Rating.displayName = "Rating";
+var Container2 = styles.styled("div")({
+  width: "100%",
+  height: "100%"
+});
 var Img3 = styles.styled("img")(({ theme }) => ({
   position: "absolute",
   inset: 0,
@@ -6659,7 +6739,7 @@ var ProductCardImage = ({
   alt,
   badge,
   badgeVariant = "success"
-}) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+}) => /* @__PURE__ */ jsxRuntime.jsxs(Container2, { children: [
   src ? /* @__PURE__ */ jsxRuntime.jsx(Img3, { src, alt }) : /* @__PURE__ */ jsxRuntime.jsx(Placeholder4, { "aria-label": alt, children: /* @__PURE__ */ jsxRuntime.jsx(ImageIcon__default.default, { style: { fontSize: 48 } }) }),
   badge && /* @__PURE__ */ jsxRuntime.jsx(BadgeSlot, { children: /* @__PURE__ */ jsxRuntime.jsx(Badge2, { variant: badgeVariant, children: badge }) })
 ] });
@@ -6670,12 +6750,7 @@ var Root23 = styles.styled(Card)({
   height: "100%",
   overflow: "hidden"
 });
-var ImageWrap3 = styles.styled("div")({
-  position: "relative",
-  aspectRatio: "4 / 3",
-  margin: "-1.5rem -1.5rem 1rem"
-});
-var Name4 = styles.styled("h3")(({ theme }) => ({
+var Name5 = styles.styled("h3")(({ theme }) => ({
   margin: 0,
   color: theme.palette.text.primary,
   fontFamily: theme.typography.fontFamily,
@@ -6701,14 +6776,26 @@ var ProductCard = react.forwardRef(
     lowestPrice,
     badge,
     badgeVariant = "success",
+    imageRatio = "4/3",
     rating,
     reviewCount,
     ctaLabel = "Dodaj do koszyka",
     onAddToCart,
+    buttonVariant = "primary",
+    disabledButton = false,
+    hideButton = false,
     ...props
   }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root23, { ref, variant: "default", padding: "md", rounded: "lg", ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ImageWrap3, { children: /* @__PURE__ */ jsxRuntime.jsx(ProductCardImage, { src: imageUrl, alt: imageAlt ?? name, badge, badgeVariant }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(Name4, { children: name }),
+    /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: imageRatio, style: { margin: "-1.5rem -1.5rem 1rem", width: "calc(100% + 3rem)" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      ProductCardImage,
+      {
+        src: imageUrl,
+        alt: imageAlt ?? name,
+        badge,
+        badgeVariant
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Name5, { children: name }),
     rating !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(Rating, { value: rating, count: reviewCount, size: "sm" }),
     /* @__PURE__ */ jsxRuntime.jsx(
       Price,
@@ -6721,10 +6808,19 @@ var ProductCard = react.forwardRef(
         style: { marginTop: "0.5rem" }
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(Footer2, { children: /* @__PURE__ */ jsxRuntime.jsx(Button, { fullWidth: true, onClick: (e) => {
-      e.stopPropagation();
-      onAddToCart?.();
-    }, children: ctaLabel }) })
+    !hideButton && /* @__PURE__ */ jsxRuntime.jsx(Footer2, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        fullWidth: true,
+        variant: buttonVariant,
+        disabled: disabledButton,
+        onClick: (e) => {
+          e.stopPropagation();
+          onAddToCart?.();
+        },
+        children: ctaLabel
+      }
+    ) })
   ] })
 );
 ProductCard.displayName = "ProductCard";
@@ -6742,7 +6838,7 @@ var Inner = styles.styled("div")({
     flexDirection: "column"
   }
 });
-var ImageWrap4 = styles.styled("div")({
+var ImageWrap3 = styles.styled("div")({
   position: "relative",
   flexShrink: 0,
   width: "clamp(120px, 33%, 200px)",
@@ -6761,7 +6857,7 @@ var Content = styles.styled("div")({
   flex: 1,
   minWidth: 0
 });
-var Name5 = styles.styled("h3")(({ theme }) => ({
+var Name6 = styles.styled("h3")(({ theme }) => ({
   margin: 0,
   color: theme.palette.text.primary,
   fontFamily: theme.typography.fontFamily,
@@ -6793,9 +6889,9 @@ var ProductCardHorizontal = react.forwardRef(
     onAddToCart,
     ...props
   }, ref) => /* @__PURE__ */ jsxRuntime.jsx(Card, { ref, variant: "default", padding: "md", rounded: "lg", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(ContainerRoot, { children: /* @__PURE__ */ jsxRuntime.jsxs(Inner, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ImageWrap4, { children: /* @__PURE__ */ jsxRuntime.jsx(ProductCardImage, { src: imageUrl, alt: imageAlt ?? name, badge, badgeVariant }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(ImageWrap3, { children: /* @__PURE__ */ jsxRuntime.jsx(ProductCardImage, { src: imageUrl, alt: imageAlt ?? name, badge, badgeVariant }) }),
     /* @__PURE__ */ jsxRuntime.jsxs(Content, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Name5, { children: name }),
+      /* @__PURE__ */ jsxRuntime.jsx(Name6, { children: name }),
       rating !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(Rating, { value: rating, count: reviewCount, size: "sm" }),
       /* @__PURE__ */ jsxRuntime.jsx(
         Price,
@@ -6867,7 +6963,7 @@ var Img4 = styles.styled("img")({
   borderRadius: "50%",
   objectFit: "cover"
 });
-function deriveInitials(name) {
+function deriveInitials2(name) {
   return name.split(" ").filter(Boolean).slice(0, 2).map((part) => part[0]).join("").toUpperCase();
 }
 var TeamMemberAvatar = ({
@@ -6880,18 +6976,11 @@ var TeamMemberAvatar = ({
   if (avatarUrl) {
     return /* @__PURE__ */ jsxRuntime.jsx(Img4, { src: avatarUrl, alt: avatarAlt ?? name });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Avatar,
-    {
-      initials: initials ?? deriveInitials(name),
-      size: "xl",
-      color: avatarColor
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsx(Avatar, { initials: initials ?? deriveInitials2(name), size: "xl", color: avatarColor });
 };
 TeamMemberAvatar.displayName = "TeamMemberAvatar";
 var Root25 = styles.styled("div")({ minWidth: 0 });
-var Name6 = styles.styled("h3")(({ theme }) => ({
+var Name7 = styles.styled("h3")(({ theme }) => ({
   margin: 0,
   color: theme.palette.text.primary,
   fontFamily: theme.typography.fontFamily,
@@ -6907,7 +6996,7 @@ var Role = styles.styled("p")(({ theme }) => ({
   lineHeight: 1.5
 }));
 var TeamMemberInfo = ({ name, role }) => /* @__PURE__ */ jsxRuntime.jsxs(Root25, { children: [
-  /* @__PURE__ */ jsxRuntime.jsx(Name6, { children: name }),
+  /* @__PURE__ */ jsxRuntime.jsx(Name7, { children: name }),
   role && /* @__PURE__ */ jsxRuntime.jsx(Role, { children: role })
 ] });
 TeamMemberInfo.displayName = "TeamMemberInfo";
@@ -6966,7 +7055,7 @@ var Root27 = styles.styled("div")({
   alignItems: "center",
   gap: "0.75rem"
 });
-var AvatarImg = styles.styled("img")({
+var AvatarImg2 = styles.styled("img")({
   width: "2.5rem",
   height: "2.5rem",
   borderRadius: "50%",
@@ -6974,7 +7063,7 @@ var AvatarImg = styles.styled("img")({
   flexShrink: 0
 });
 var Info = styles.styled("div")({ minWidth: 0 });
-var Name7 = styles.styled("p")(({ theme }) => ({
+var Name8 = styles.styled("p")(({ theme }) => ({
   margin: 0,
   fontFamily: theme.typography.fontFamily,
   fontSize: "0.875rem",
@@ -6987,7 +7076,7 @@ var Role2 = styles.styled("p")(({ theme }) => ({
   fontSize: "0.8125rem",
   color: theme.palette.text.secondary
 }));
-function deriveInitials2(name) {
+function deriveInitials3(name) {
   return name.split(" ").filter(Boolean).slice(0, 2).map((p) => p[0]).join("").toUpperCase();
 }
 var TestimonialAuthor = ({
@@ -6996,9 +7085,9 @@ var TestimonialAuthor = ({
   authorAvatarUrl,
   authorInitials
 }) => /* @__PURE__ */ jsxRuntime.jsxs(Root27, { children: [
-  authorAvatarUrl ? /* @__PURE__ */ jsxRuntime.jsx(AvatarImg, { src: authorAvatarUrl, alt: authorName }) : /* @__PURE__ */ jsxRuntime.jsx(Avatar, { initials: authorInitials ?? deriveInitials2(authorName), size: "md", color: "primary" }),
+  authorAvatarUrl ? /* @__PURE__ */ jsxRuntime.jsx(AvatarImg2, { src: authorAvatarUrl, alt: authorName }) : /* @__PURE__ */ jsxRuntime.jsx(Avatar, { initials: authorInitials ?? deriveInitials3(authorName), size: "md", color: "primary" }),
   /* @__PURE__ */ jsxRuntime.jsxs(Info, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Name7, { children: authorName }),
+    /* @__PURE__ */ jsxRuntime.jsx(Name8, { children: authorName }),
     authorRole && /* @__PURE__ */ jsxRuntime.jsx(Role2, { children: authorRole })
   ] })
 ] });
@@ -7523,7 +7612,7 @@ var IconWrap = styles.styled("span")(({ theme }) => ({
   display: "flex"
 }));
 var Info2 = styles.styled("div")({ flex: 1 });
-var Name8 = styles.styled("div")(({ theme }) => ({
+var Name9 = styles.styled("div")(({ theme }) => ({
   fontSize: "0.9375rem",
   fontWeight: 600,
   color: theme.palette.text.primary
@@ -7553,7 +7642,7 @@ var PaymentMethodSelector = react.forwardRef(
         ),
         /* @__PURE__ */ jsxRuntime.jsx(IconWrap, { children: method.icon ?? /* @__PURE__ */ jsxRuntime.jsx(CreditCardOutlinedIcon__default.default, { "aria-hidden": true }) }),
         /* @__PURE__ */ jsxRuntime.jsxs(Info2, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Name8, { children: method.label }),
+          /* @__PURE__ */ jsxRuntime.jsx(Name9, { children: method.label }),
           method.description && /* @__PURE__ */ jsxRuntime.jsx(Desc, { children: method.description })
         ] })
       ] }, method.id);
@@ -7588,7 +7677,7 @@ var ThumbnailImage = styles.styled("img")({
   objectFit: "cover"
 });
 var ProductGallery = react.forwardRef(
-  ({ images, selectedIndex, onSelect, ...props }, ref) => {
+  ({ images, selectedIndex, onSelect, imageRatio = "4/3", ...props }, ref) => {
     const [internalIndex, setInternalIndex] = react.useState(0);
     const activeIndex = selectedIndex ?? internalIndex;
     const activeImage = images[activeIndex] ?? images[0];
@@ -7600,7 +7689,7 @@ var ProductGallery = react.forwardRef(
       return null;
     }
     return /* @__PURE__ */ jsxRuntime.jsxs(Root32, { ref, ...props, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: "4/3", children: /* @__PURE__ */ jsxRuntime.jsx(MainImage, { src: activeImage.src, alt: activeImage.alt }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: imageRatio, children: /* @__PURE__ */ jsxRuntime.jsx(MainImage, { src: activeImage.src, alt: activeImage.alt }) }),
       images.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(Thumbnails, { children: images.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(
         ThumbnailButton,
         {
@@ -7745,7 +7834,7 @@ var IconWrap2 = styles.styled("span")(({ theme }) => ({
   display: "flex"
 }));
 var Info3 = styles.styled("div")({ flex: 1 });
-var Name9 = styles.styled("div")(({ theme }) => ({
+var Name10 = styles.styled("div")(({ theme }) => ({
   fontSize: "0.9375rem",
   fontWeight: 600,
   color: theme.palette.text.primary
@@ -7783,7 +7872,7 @@ var ShippingSelector = react.forwardRef(
         ),
         /* @__PURE__ */ jsxRuntime.jsx(IconWrap2, { children: opt.icon ?? /* @__PURE__ */ jsxRuntime.jsx(LocalShippingOutlinedIcon__default.default, { "aria-hidden": true }) }),
         /* @__PURE__ */ jsxRuntime.jsxs(Info3, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Name9, { children: opt.label }),
+          /* @__PURE__ */ jsxRuntime.jsx(Name10, { children: opt.label }),
           (opt.description || opt.estimatedDays) && /* @__PURE__ */ jsxRuntime.jsxs(Desc2, { children: [
             opt.description,
             opt.estimatedDays && ` \xB7 ${opt.estimatedDays}`
@@ -8086,7 +8175,150 @@ var VariantSelector = react.forwardRef(
 );
 VariantSelector.displayName = "VariantSelector";
 var variantSelectorModes = ["button", "swatch", "dropdown"];
-var Root39 = styles.styled("div")(({ theme }) => ({
+function deriveInitials4(name) {
+  return name.split(" ").filter(Boolean).slice(0, 2).map((p) => p[0]).join("").toUpperCase();
+}
+var Root39 = styles.styled("div")({
+  display: "flex",
+  alignItems: "center",
+  gap: "0.75rem"
+});
+var AvatarImg3 = styles.styled("img")({
+  width: "2.5rem",
+  height: "2.5rem",
+  borderRadius: "50%",
+  objectFit: "cover",
+  flexShrink: 0
+});
+var Info4 = styles.styled("div")({ minWidth: 0 });
+var NameRow2 = styles.styled("div")({
+  display: "flex",
+  alignItems: "center",
+  gap: "0.5rem",
+  flexWrap: "wrap"
+});
+var Name11 = styles.styled("span")(({ theme }) => ({
+  fontFamily: theme.typography.fontFamily,
+  fontSize: "0.9375rem",
+  fontWeight: 700,
+  color: theme.palette.text.primary
+}));
+var AuthorBadge = styles.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 = styles.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__ */ jsxRuntime.jsxs(Root39, { children: [
+    author.avatarUrl ? /* @__PURE__ */ jsxRuntime.jsx(AvatarImg3, { src: author.avatarUrl, alt: author.name }) : /* @__PURE__ */ jsxRuntime.jsx(Avatar, { initials: deriveInitials4(author.name), size: "md", color: "primary" }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Info4, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(NameRow2, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Name11, { children: author.name }),
+        author.isPostAuthor && /* @__PURE__ */ jsxRuntime.jsx(AuthorBadge, { children: "Autor" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(DateText, { dateTime: date, children: date })
+    ] })
+  ] });
+}
+CommentMeta.displayName = "CommentMeta";
+var Text = styles.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__ */ jsxRuntime.jsx(Text, { children: content });
+}
+CommentBody.displayName = "CommentBody";
+var Root40 = styles.styled("div")({
+  display: "flex",
+  alignItems: "center",
+  gap: "0.25rem"
+});
+var ActionButton = styles.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,
+  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"
+  }
+}));
+function CommentActions({ commentId, likesCount, onLike, onReply }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Root40, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(ActionButton, { type: "button", "aria-label": "Lubi\u0119 to", onClick: () => onLike?.(commentId), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ThumbUpOutlinedIcon__default.default, { style: { fontSize: "0.9375rem" }, "aria-hidden": "true" }),
+      typeof likesCount === "number" && /* @__PURE__ */ jsxRuntime.jsx("span", { children: likesCount }),
+      "Lubi\u0119 to"
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(ActionButton, { type: "button", "aria-label": "Odpowiedz", onClick: () => onReply?.(commentId), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ReplyIcon__default.default, { style: { fontSize: "0.9375rem" }, "aria-hidden": "true" }),
+      "Odpowiedz"
+    ] })
+  ] });
+}
+CommentActions.displayName = "CommentActions";
+var Root41 = styles.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 CommentCard = react.forwardRef(
+  ({ comment, depth = 0, onLike, onReply, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root41, { ref, $depth: depth, ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(CommentMeta, { author: comment.author, date: comment.date }),
+    /* @__PURE__ */ jsxRuntime.jsx(CommentBody, { content: comment.content }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      CommentActions,
+      {
+        commentId: comment.id,
+        likesCount: comment.likesCount,
+        onLike,
+        onReply
+      }
+    )
+  ] })
+);
+CommentCard.displayName = "CommentCard";
+var Root42 = styles.styled("div")(({ theme }) => ({
   borderBottom: `1px solid ${theme.palette.divider}`
 }));
 var Trigger2 = styles.styled("button")(({ theme }) => ({
@@ -8134,7 +8366,7 @@ var PanelInner = styles.styled("p")(({ theme }) => ({
 var FaqItem = react.forwardRef(
   ({ item, defaultOpen = false, ...props }, ref) => {
     const [open, setOpen] = react.useState(defaultOpen);
-    return /* @__PURE__ */ jsxRuntime.jsxs(Root39, { ref, ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root42, { ref, ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Trigger2, { type: "button", "aria-expanded": open, onClick: () => setOpen((prev) => !prev), children: [
         item.question,
         /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon2, { $open: open, "aria-hidden": "true" })
@@ -8210,7 +8442,7 @@ var FeatureItem = react.forwardRef(
   }
 );
 FeatureItem.displayName = "FeatureItem";
-var Root40 = styles.styled("div")({
+var Root43 = styles.styled("div")({
   display: "flex",
   flexDirection: "column",
   alignItems: "center",
@@ -8258,7 +8490,7 @@ var Description6 = styles.styled("p")(({ theme }) => ({
   maxWidth: "18rem"
 }));
 var ProcessStep = react.forwardRef(
-  ({ step, title, description, icon, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root40, { ref, ...props, children: [
+  ({ step, title, description, icon, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root43, { ref, ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx(StepBadge, { "aria-hidden": "true", children: icon ? /* @__PURE__ */ jsxRuntime.jsx(IconWrapper2, { children: icon }) : /* @__PURE__ */ jsxRuntime.jsx(StepNumber, { children: step }) }),
     /* @__PURE__ */ jsxRuntime.jsx(Title3, { children: title }),
     description && /* @__PURE__ */ jsxRuntime.jsx(Description6, { children: description })
@@ -8520,7 +8752,7 @@ var timelineItemStatuses = [
   "pending",
   "error"
 ];
-var Root41 = styles.styled("div")({
+var Root44 = styles.styled("div")({
   position: "relative",
   width: "100%",
   overflow: "hidden",
@@ -8630,7 +8862,7 @@ function Carousel({
   }, [prev, next]);
   if (!count) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Root41, { "aria-roledescription": "carousel", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Root44, { "aria-roledescription": "carousel", children: [
       /* @__PURE__ */ jsxRuntime.jsx(Track4, { $index: index, "aria-live": "polite", children: slides.map((slide, i) => /* @__PURE__ */ jsxRuntime.jsx(
         Slide,
         {
@@ -8677,6 +8909,46 @@ function Carousel({
     )) })
   ] });
 }
+var Img5 = styles.styled("img")({
+  position: "absolute",
+  inset: 0,
+  width: "100%",
+  height: "100%"
+});
+var Placeholder5 = styles.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 = react.forwardRef(
+  ({
+    src,
+    alt = "",
+    ratio = "16/9",
+    objectFit = "cover",
+    objectPosition = "center",
+    loading = "lazy",
+    style,
+    ...props
+  }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio, children: src ? /* @__PURE__ */ jsxRuntime.jsx(
+    Img5,
+    {
+      ref,
+      src,
+      alt,
+      loading,
+      style: { objectFit, objectPosition, ...style },
+      ...props
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsx(Placeholder5, { "aria-label": alt || "Image placeholder", children: /* @__PURE__ */ jsxRuntime.jsx(ImageIcon__default.default, { style: { fontSize: 48 } }) }) })
+);
+Image.displayName = "Image";
 var Wrapper4 = styles.styled("div")(({ theme }) => ({
   borderRadius: "0.75rem",
   overflow: "hidden",
@@ -9014,7 +9286,7 @@ var Breadcrumbs = react.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" }
@@ -9043,7 +9315,7 @@ var StyledButton2 = styles.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}`,
@@ -9072,7 +9344,7 @@ var PaginationButton = react.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" }
@@ -9083,7 +9355,7 @@ var StyledEllipsis = styles.styled("span")(({ theme, $size }) => ({
   justifyContent: "center",
   color: theme.palette.text.secondary,
   userSelect: "none",
-  ...sizeMap7[$size]
+  ...sizeMap8[$size]
 }));
 var PaginationEllipsis = ({ size = "md" }) => /* @__PURE__ */ jsxRuntime.jsx(StyledEllipsis, { $size: size, "aria-hidden": "true", children: "\u2026" });
 PaginationEllipsis.displayName = "PaginationEllipsis";
@@ -9193,7 +9465,7 @@ var PaginationBar = ({
   ] });
 };
 PaginationBar.displayName = "PaginationBar";
-var Root42 = styles.styled("div", {
+var Root45 = styles.styled("div", {
   shouldForwardProp: (p) => p !== "$variant"
 })(({ theme, $variant }) => ({
   width: "100%",
@@ -9303,7 +9575,7 @@ var Accordion = react.forwardRef(
       if (controlledKeys === void 0) setInternalKeys(next);
       onChange?.(next);
     };
-    return /* @__PURE__ */ jsxRuntime.jsx(Root42, { ref, $variant: variant, ...props, children: items.map((item) => {
+    return /* @__PURE__ */ jsxRuntime.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}`;
@@ -9332,32 +9604,31 @@ var Accordion = react.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__ */ jsxRuntime.jsx(InfoOutlinedIcon__default.default, { "aria-hidden": true, style: { fontSize: 20 } }),
   success: /* @__PURE__ */ jsxRuntime.jsx(CheckCircleOutlinedIcon__default.default, { "aria-hidden": true, style: { fontSize: 20 } }),
   warning: /* @__PURE__ */ jsxRuntime.jsx(WarningAmberOutlinedIcon__default.default, { "aria-hidden": true, style: { fontSize: 20 } }),
   error: /* @__PURE__ */ jsxRuntime.jsx(ErrorOutlineOutlinedIcon__default.default, { "aria-hidden": true, style: { fontSize: 20 } })
 };
-var Root43 = styles.styled("div", {
+var Root46 = styles.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 = styles.styled("span")({
@@ -9389,11 +9660,11 @@ var CloseButton2 = styles.styled("button")(({ theme }) => ({
   }
 }));
 var Alert = react.forwardRef(
-  ({ severity = "info", title, children, onClose, icon, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root43, { ref, role: "alert", $severity: severity, ...props, children: [
+  ({ severity = "info", title, children, onClose, icon, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root46, { ref, role: "alert", $severity: severity, ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx(IconSlot2, { children: icon ?? ICONS[severity] }),
     /* @__PURE__ */ jsxRuntime.jsxs(Body, { children: [
       title && /* @__PURE__ */ jsxRuntime.jsx(Title5, { children: title }),
-      children
+      typeof children === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { dangerouslySetInnerHTML: { __html: children } }) : children
     ] }),
     onClose && /* @__PURE__ */ jsxRuntime.jsx(CloseButton2, { type: "button", onClick: onClose, "aria-label": "Zamknij", children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon__default.default, { "aria-hidden": true, style: { fontSize: 16 } }) })
   ] })
@@ -9410,7 +9681,7 @@ var POSITION_MAP = {
 var Btn = styles.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}`,
@@ -9451,7 +9722,7 @@ var Btn = styles.styled("button", {
       outlineOffset: "3px"
     },
     ...POSITION_MAP[$position],
-    ...variantStyles2
+    ...variantStyles3
   };
 });
 function BackToTop({
@@ -9639,7 +9910,7 @@ var ContextMenu = react.forwardRef(
   }
 );
 ContextMenu.displayName = "ContextMenu";
-var Root44 = styles.styled("div")(({ theme }) => ({
+var Root47 = styles.styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
   alignItems: "center",
@@ -9667,7 +9938,7 @@ var Description8 = styles.styled("p")(({ theme }) => ({
   maxWidth: "28rem"
 }));
 var EmptyState = react.forwardRef(
-  ({ icon, title, description, action, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root44, { ref, ...props, children: [
+  ({ icon, title, description, action, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root47, { ref, ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx(IconWrap3, { "aria-hidden": true, children: icon ?? /* @__PURE__ */ jsxRuntime.jsx(InboxOutlinedIcon__default.default, {}) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
       /* @__PURE__ */ jsxRuntime.jsx(Title6, { children: title }),
@@ -9687,7 +9958,7 @@ var FONT_SIZE2 = {
   md: "0.9375rem",
   lg: "1rem"
 };
-var Root45 = styles.styled("ul", {
+var Root48 = styles.styled("ul", {
   shouldForwardProp: (p) => p !== "$variant"
 })(({ theme, $variant }) => ({
   listStyle: "none",
@@ -9782,7 +10053,7 @@ var SuffixWrap = styles.styled("span")({
 var List4 = react.forwardRef(
   ({ items, size = "md", variant = "default", dividers = true, ...props }, ref) => {
     const effectiveVariant = !dividers && variant === "default" ? "default" : variant;
-    return /* @__PURE__ */ jsxRuntime.jsx(Root45, { ref, $variant: effectiveVariant, role: "list", ...props, children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ jsxRuntime.jsx(Root48, { ref, $variant: effectiveVariant, role: "list", ...props, children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
       Item3,
       {
         role: "listitem",
@@ -9821,7 +10092,7 @@ var speedDuration = {
   normal: "20s",
   fast: "10s"
 };
-var Root46 = styles.styled("div")({
+var Root49 = styles.styled("div")({
   overflow: "hidden",
   width: "100%",
   userSelect: "none"
@@ -9852,7 +10123,7 @@ var Marquee = react.forwardRef(
       /* @__PURE__ */ jsxRuntime.jsx(ItemWrap, { $gap: gapValue, "aria-hidden": "false", children }),
       /* @__PURE__ */ jsxRuntime.jsx(ItemWrap, { $gap: gapValue, "aria-hidden": "true", children })
     ] });
-    return /* @__PURE__ */ jsxRuntime.jsx(Root46, { ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Track5, { $direction: direction, $speed: speed, $pauseOnHover: pauseOnHover, $gap: gapValue, children: content }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(Root49, { ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Track5, { $direction: direction, $speed: speed, $pauseOnHover: pauseOnHover, $gap: gapValue, children: content }) });
   }
 );
 Marquee.displayName = "Marquee";
@@ -10008,7 +10279,7 @@ function Modal({
   );
 }
 var modalSizes = ["sm", "md", "lg", "xl", "full"];
-var Root47 = styles.styled("div")({ width: "100%" });
+var Root50 = styles.styled("div")({ width: "100%" });
 var TabList = styles.styled("div", {
   shouldForwardProp: (prop) => prop !== "$variant"
 })(({ theme, $variant }) => ({
@@ -10088,7 +10359,7 @@ var Tabs = react.forwardRef(
       onChange?.(key);
     };
     const activeTab = tabs.find((t) => t.key === activeKey);
-    return /* @__PURE__ */ jsxRuntime.jsxs(Root47, { ref, ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root50, { ref, ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsx(TabList, { role: "tablist", $variant: variant, children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
         TabButton,
         {
@@ -10120,14 +10391,14 @@ var Tabs = react.forwardRef(
 );
 Tabs.displayName = "Tabs";
 var tabsVariants = ["underline", "pills", "bordered"];
-var Root48 = styles.styled("div")(({ theme }) => ({
+var Root51 = styles.styled("div")(({ theme }) => ({
   display: "grid",
   gridTemplateColumns: "4.5rem 1fr",
   gap: "0.875rem",
   paddingBottom: "1rem",
   borderBottom: `1px solid ${theme.palette.divider}`
 }));
-var ImageWrap5 = styles.styled("div")(({ theme }) => ({
+var ImageWrap4 = styles.styled("div")(({ theme }) => ({
   position: "relative",
   width: "4.5rem",
   height: "4.5rem",
@@ -10135,14 +10406,14 @@ var ImageWrap5 = styles.styled("div")(({ theme }) => ({
   overflow: "hidden",
   flexShrink: 0
 }));
-var Info4 = styles.styled("div")({ display: "grid", gap: "0.5rem" });
+var Info5 = styles.styled("div")({ display: "grid", gap: "0.5rem" });
 var Row5 = styles.styled("div")({
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
   gap: "0.75rem"
 });
-var Name10 = styles.styled("p")(({ theme }) => ({
+var Name12 = styles.styled("p")(({ theme }) => ({
   margin: 0,
   color: theme.palette.text.primary,
   fontFamily: theme.typography.fontFamily,
@@ -10172,11 +10443,11 @@ var CartDrawerItem = ({
   imageAlt,
   onQuantityChange,
   onRemove
-}) => /* @__PURE__ */ jsxRuntime.jsxs(Root48, { children: [
-  /* @__PURE__ */ jsxRuntime.jsx(ImageWrap5, { children: /* @__PURE__ */ jsxRuntime.jsx(ProductCardImage, { src: imageUrl, alt: imageAlt ?? name }) }),
-  /* @__PURE__ */ jsxRuntime.jsxs(Info4, { children: [
+}) => /* @__PURE__ */ jsxRuntime.jsxs(Root51, { children: [
+  /* @__PURE__ */ jsxRuntime.jsx(ImageWrap4, { children: /* @__PURE__ */ jsxRuntime.jsx(ProductCardImage, { src: imageUrl, alt: imageAlt ?? name }) }),
+  /* @__PURE__ */ jsxRuntime.jsxs(Info5, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Row5, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Name10, { children: name }),
+      /* @__PURE__ */ jsxRuntime.jsx(Name12, { children: name }),
       /* @__PURE__ */ jsxRuntime.jsx(Price3, { children: price })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(Row5, { children: [
@@ -10287,7 +10558,7 @@ var CartDrawer = react.forwardRef(
   ] }) })
 );
 CartDrawer.displayName = "CartDrawer";
-var Root49 = styles.styled("aside")(({ theme }) => ({
+var Root52 = styles.styled("aside")(({ theme }) => ({
   display: "grid",
   gap: "1.5rem",
   width: "100%",
@@ -10379,7 +10650,7 @@ var FilterSidebar = react.forwardRef(
     onPriceRangeChange,
     onClear,
     ...props
-  }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root49, { ref, "aria-label": "Filtry produkt\xF3w", ...props, children: [
+  }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root52, { ref, "aria-label": "Filtry produkt\xF3w", ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Header4, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(Title9, { children: "Filtry" }),
       onClear && /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", onClick: onClear, children: "Wyczy\u015B\u0107" })
@@ -10422,13 +10693,13 @@ var FilterSidebar = react.forwardRef(
   ] })
 );
 FilterSidebar.displayName = "FilterSidebar";
-var Root50 = styles.styled("li")({
+var Root53 = styles.styled("li")({
   display: "grid",
   gridTemplateColumns: "3.5rem 1fr auto",
   alignItems: "center",
   gap: "0.75rem"
 });
-var ImageWrap6 = styles.styled("div")(({ theme }) => ({
+var ImageWrap5 = styles.styled("div")(({ theme }) => ({
   position: "relative",
   width: "3.5rem",
   height: "3.5rem",
@@ -10436,8 +10707,8 @@ var ImageWrap6 = styles.styled("div")(({ theme }) => ({
   overflow: "hidden",
   flexShrink: 0
 }));
-var Info5 = styles.styled("div")({ minWidth: 0 });
-var Name11 = styles.styled("p")(({ theme }) => ({
+var Info6 = styles.styled("div")({ minWidth: 0 });
+var Name13 = styles.styled("p")(({ theme }) => ({
   margin: 0,
   color: theme.palette.text.primary,
   fontFamily: theme.typography.fontFamily,
@@ -10466,10 +10737,10 @@ var OrderSummaryItem = ({
   imageAlt,
   quantity,
   meta
-}) => /* @__PURE__ */ jsxRuntime.jsxs(Root50, { children: [
-  /* @__PURE__ */ jsxRuntime.jsx(ImageWrap6, { children: /* @__PURE__ */ jsxRuntime.jsx(ProductCardImage, { src: imageUrl, alt: imageAlt ?? String(name) }) }),
-  /* @__PURE__ */ jsxRuntime.jsxs(Info5, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Name11, { children: name }),
+}) => /* @__PURE__ */ jsxRuntime.jsxs(Root53, { children: [
+  /* @__PURE__ */ jsxRuntime.jsx(ImageWrap5, { children: /* @__PURE__ */ jsxRuntime.jsx(ProductCardImage, { src: imageUrl, alt: imageAlt ?? String(name) }) }),
+  /* @__PURE__ */ jsxRuntime.jsxs(Info6, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Name13, { children: name }),
     (quantity !== void 0 || meta) && /* @__PURE__ */ jsxRuntime.jsxs(Meta2, { children: [
       quantity !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         "Ilo\u015B\u0107: ",
@@ -10482,7 +10753,7 @@ var OrderSummaryItem = ({
   /* @__PURE__ */ jsxRuntime.jsx(Price4, { children: price })
 ] });
 OrderSummaryItem.displayName = "OrderSummaryItem";
-var Root51 = styles.styled("div", {
+var Root54 = styles.styled("div", {
   shouldForwardProp: (prop) => prop !== "$total"
 })(({ theme, $total }) => ({
   display: "flex",
@@ -10494,12 +10765,12 @@ var Root51 = styles.styled("div", {
   fontWeight: $total ? 800 : 400,
   "& dt, & dd": { margin: 0 }
 }));
-var OrderSummaryRow = ({ label, value, total = false }) => /* @__PURE__ */ jsxRuntime.jsxs(Root51, { as: "div", $total: total, children: [
+var OrderSummaryRow = ({ label, value, total = false }) => /* @__PURE__ */ jsxRuntime.jsxs(Root54, { as: "div", $total: total, children: [
   /* @__PURE__ */ jsxRuntime.jsx("dt", { children: label }),
   /* @__PURE__ */ jsxRuntime.jsx("dd", { children: value })
 ] });
 OrderSummaryRow.displayName = "OrderSummaryRow";
-var Root52 = styles.styled(Card)({ display: "grid", gap: "1rem" });
+var Root55 = styles.styled(Card)({ display: "grid", gap: "1rem" });
 var Title10 = styles.styled("h2")(({ theme }) => ({
   margin: 0,
   fontFamily: theme.typography.fontFamily,
@@ -10541,7 +10812,7 @@ var OrderSummary = react.forwardRef(
     ctaLabel = "Przejd\u017A do kasy",
     onCheckout,
     ...props
-  }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root52, { ref, variant: "default", padding: "lg", rounded: "lg", ...props, children: [
+  }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root55, { ref, variant: "default", padding: "lg", rounded: "lg", ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx(Title10, { children: title }),
     items.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(SectionTitle, { children: itemsTitle }),
@@ -10561,7 +10832,7 @@ var OrderSummary = react.forwardRef(
   ] })
 );
 OrderSummary.displayName = "OrderSummary";
-var Root53 = styles.styled("div")(({ theme }) => ({
+var Root56 = styles.styled("div")(({ theme }) => ({
   fontFamily: theme.typography.fontFamily
 }));
 var Grid2 = styles.styled("div", {
@@ -10596,7 +10867,7 @@ var ScrollTrack = styles.styled("div")({
   }
 });
 var RelatedProducts = react.forwardRef(
-  ({ products, title = "Podobne produkty", layout = "grid", columns = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root53, { ref, ...props, children: [
+  ({ products, title = "Podobne produkty", layout = "grid", columns = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root56, { ref, ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx(SectionHeading, { title, align: "left", style: { marginBottom: "1.5rem" } }),
     layout === "scroll" ? /* @__PURE__ */ jsxRuntime.jsx(ScrollTrack, { children: products.map((product, i) => /* @__PURE__ */ jsxRuntime.jsx(ProductCard, { ...product }, product.name + i)) }) : /* @__PURE__ */ jsxRuntime.jsx(Grid2, { $columns: columns, children: products.map((product, i) => /* @__PURE__ */ jsxRuntime.jsx(ProductCard, { ...product }, product.name + i)) })
   ] })
@@ -10655,7 +10926,13 @@ var ReviewItem = ({ review }) => /* @__PURE__ */ jsxRuntime.jsxs(Card2, { childr
     /* @__PURE__ */ jsxRuntime.jsxs(AuthorInfo, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(AuthorName, { children: [
         review.author,
-        review.verified && /* @__PURE__ */ jsxRuntime.jsx(VerifiedIcon__default.default, { "aria-label": "Zweryfikowany zakup", style: { fontSize: 14, color: "#16a34a" } })
+        review.verified && /* @__PURE__ */ jsxRuntime.jsx(
+          VerifiedIcon__default.default,
+          {
+            "aria-label": "Zweryfikowany zakup",
+            style: { fontSize: 14, color: "#16a34a" }
+          }
+        )
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(ReviewDate, { children: review.date })
     ] }),
@@ -10670,7 +10947,7 @@ var ReviewItem = ({ review }) => /* @__PURE__ */ jsxRuntime.jsxs(Card2, { childr
   ] })
 ] });
 ReviewItem.displayName = "ReviewItem";
-var Root54 = styles.styled("div")(({ theme }) => ({
+var Root57 = styles.styled("div")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   gap: "2rem",
@@ -10732,7 +11009,7 @@ var ReviewSummary = ({
   ratingDistribution
 }) => {
   const totalDist = ratingDistribution ? Object.values(ratingDistribution).reduce((a, b) => a + b, 0) : 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs(Root54, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Root57, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(AverageBlock, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(Score, { children: averageRating.toFixed(1) }),
       /* @__PURE__ */ jsxRuntime.jsx(Rating, { value: averageRating, size: "sm", readonly: true }),
@@ -10756,7 +11033,7 @@ var ReviewSummary = ({
   ] });
 };
 ReviewSummary.displayName = "ReviewSummary";
-var Root55 = styles.styled("div")(({ theme }) => ({
+var Root58 = styles.styled("div")(({ theme }) => ({
   fontFamily: theme.typography.fontFamily
 }));
 var ReviewList = styles.styled("div")({
@@ -10765,7 +11042,14 @@ var ReviewList = styles.styled("div")({
   gap: "1.5rem"
 });
 var ReviewSection = react.forwardRef(
-  ({ reviews, averageRating, totalReviews, title = "Opinie klient\xF3w", ratingDistribution, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root55, { ref, ...props, children: [
+  ({
+    reviews,
+    averageRating,
+    totalReviews,
+    title = "Opinie klient\xF3w",
+    ratingDistribution,
+    ...props
+  }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root58, { ref, ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx(SectionHeading, { title, align: "left", style: { marginBottom: "1.5rem" } }),
     averageRating !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: "2rem" }, children: /* @__PURE__ */ jsxRuntime.jsx(
       ReviewSummary,
@@ -10779,7 +11063,82 @@ var ReviewSection = react.forwardRef(
   ] })
 );
 ReviewSection.displayName = "ReviewSection";
-var List5 = styles.styled("div")(({ $hasHeading }) => ({
+var Heading = styles.styled("h2")(({ theme }) => ({
+  margin: "0 0 2rem",
+  fontFamily: theme.typography.fontFamily,
+  fontSize: "1.5rem",
+  fontWeight: 700,
+  color: theme.palette.text.primary
+}));
+var CommentCount = styles.styled("span")(({ theme }) => ({
+  marginLeft: "0.375rem",
+  color: theme.palette.text.secondary,
+  fontWeight: 400
+}));
+var List5 = styles.styled("div")({
+  display: "flex",
+  flexDirection: "column"
+});
+var ThreadWrapper = styles.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
+  }
+}));
+var Replies = styles.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 CommentSection = react.forwardRef(
+  ({
+    title = "Komentarze",
+    comments,
+    maxWidth = "xl",
+    onLike,
+    onReply,
+    ...rest
+  }, ref) => {
+    const total = countTotal(comments);
+    return /* @__PURE__ */ jsxRuntime.jsx(Section, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { maxWidth, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Heading, { children: [
+        title,
+        /* @__PURE__ */ jsxRuntime.jsxs(CommentCount, { children: [
+          "(",
+          total,
+          ")"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(List5, { children: comments.map((comment) => /* @__PURE__ */ jsxRuntime.jsxs(ThreadWrapper, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(CommentCard, { comment, depth: 0, onLike, onReply }),
+        comment.replies && comment.replies.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Replies, { children: comment.replies.map((reply) => /* @__PURE__ */ jsxRuntime.jsx(
+          CommentCard,
+          {
+            comment: reply,
+            depth: 1,
+            onLike,
+            onReply
+          },
+          reply.id
+        )) })
+      ] }, comment.id)) })
+    ] }) });
+  }
+);
+CommentSection.displayName = "CommentSection";
+var List6 = styles.styled("div")(({ $hasHeading }) => ({
   marginTop: $hasHeading ? "2.5rem" : 0
 }));
 var FaqSection = react.forwardRef(
@@ -10795,7 +11154,7 @@ var FaqSection = react.forwardRef(
     const hasHeading = Boolean(title || description);
     return /* @__PURE__ */ jsxRuntime.jsx(Section, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { maxWidth, children: [
       hasHeading && /* @__PURE__ */ jsxRuntime.jsx(SectionHeading, { title: title ?? "", description, align: headingAlign }),
-      /* @__PURE__ */ jsxRuntime.jsx(List5, { $hasHeading: hasHeading, children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx(List6, { $hasHeading: hasHeading, children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
         FaqItem,
         {
           item,
@@ -11614,7 +11973,7 @@ var TopRow = styles.styled("div")({
   gap: "1rem",
   flexWrap: "wrap"
 });
-var TextBlock = styles.styled("div")({ flex: 1, minWidth: "16rem" });
+var TextBlock2 = styles.styled("div")({ flex: 1, minWidth: "16rem" });
 var Title12 = styles.styled("p")(({ theme }) => ({
   margin: "0 0 0.25rem",
   fontFamily: theme.typography.fontFamily,
@@ -11635,7 +11994,7 @@ var Link3 = styles.styled("a")(({ theme }) => ({
   textDecoration: "underline",
   "&:hover": { opacity: 0.8 }
 }));
-var Actions = styles.styled("div")({
+var Actions2 = styles.styled("div")({
   display: "flex",
   alignItems: "center",
   gap: "0.625rem",
@@ -11779,7 +12138,7 @@ function CookieConsent({
   return reactDom.createPortal(
     /* @__PURE__ */ jsxRuntime.jsx(Bar2, { role: "region", "aria-label": "Zgoda na pliki cookie", "aria-live": "polite", children: /* @__PURE__ */ jsxRuntime.jsxs(Inner4, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(TopRow, { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(TextBlock, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(TextBlock2, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(Title12, { children: title }),
           /* @__PURE__ */ jsxRuntime.jsxs(Description9, { children: [
             description,
@@ -11789,7 +12148,7 @@ function CookieConsent({
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(Actions, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(Actions2, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             TextButton,
             {
@@ -11831,7 +12190,7 @@ function CookieConsent({
   );
 }
 var defaultCookieCategories = DEFAULT_CATEGORIES;
-var Root56 = styles.styled("footer")(({ theme }) => ({
+var Root59 = styles.styled("footer")(({ theme }) => ({
   width: "100%",
   backgroundColor: theme.palette.background.paper,
   borderTop: `1px solid ${theme.palette.divider}`
@@ -11969,7 +12328,7 @@ function Footer7({
   style
 }) {
   const colCount = columns.length;
-  return /* @__PURE__ */ jsxRuntime.jsx(Root56, { style, children: /* @__PURE__ */ jsxRuntime.jsxs(material.Container, { maxWidth, sx: { pt: "3rem", pb: "2rem" }, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Root59, { style, children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { maxWidth, style: { paddingTop: "3rem", paddingBottom: "2rem" }, children: [
     (logo || description || colCount > 0) && /* @__PURE__ */ jsxRuntime.jsxs(TopRow2, { style: { "--col-count": colCount }, children: [
       (logo || description) && /* @__PURE__ */ jsxRuntime.jsxs(BrandBlock, { children: [
         logo,
@@ -11996,7 +12355,7 @@ function Footer7({
     ] })
   ] }) });
 }
-var Root57 = styles.styled("header", {
+var Root60 = styles.styled("header", {
   shouldForwardProp: (p) => p !== "$sticky" && p !== "$variant"
 })(({ theme, $sticky, $variant }) => ({
   position: $sticky ? "sticky" : "relative",
@@ -12108,12 +12467,12 @@ function Navbar({
   style
 }) {
   const [mobileOpen, setMobileOpen] = react.useState(false);
-  return /* @__PURE__ */ jsxRuntime.jsxs(Root57, { $sticky: sticky, $variant: variant, style, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Root60, { $sticky: sticky, $variant: variant, style, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
-      material.Container,
+      Container,
       {
         maxWidth,
-        sx: { height: "3.75rem", display: "flex", alignItems: "center", gap: "1.5rem" },
+        style: { height: "3.75rem", display: "flex", alignItems: "center", gap: "1.5rem" },
         children: [
           logo && /* @__PURE__ */ jsxRuntime.jsx(LogoSlot, { children: logo }),
           /* @__PURE__ */ jsxRuntime.jsx(Nav3, { "aria-label": "Nawigacja g\u0142\xF3wna", children: navItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(NavLink, { href: item.href, $active: !!item.active, children: item.label }, item.href)) }),
@@ -12133,66 +12492,51 @@ function Navbar({
         ]
       }
     ),
-    navItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(MobileDrawer, { $open: mobileOpen, "aria-label": "Menu mobilne", children: /* @__PURE__ */ jsxRuntime.jsx(material.Container, { maxWidth, children: navItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(MobileNavLink, { href: item.href, $active: !!item.active, children: item.label }, item.href)) }) })
+    navItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(MobileDrawer, { $open: mobileOpen, "aria-label": "Menu mobilne", children: /* @__PURE__ */ jsxRuntime.jsx(Container, { maxWidth, children: navItems.map((item) => /* @__PURE__ */ jsxRuntime.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 = styles.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 = styles.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 = styles.createTheme({
-  typography: typographyOptions,
+var themeDark = styles.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 = styles.createTheme({
-  typography: typographyOptions,
+var themeHighContrast = styles.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" }
   }
@@ -12263,6 +12607,11 @@ exports.CategoryCardImage = CategoryCardImage;
 exports.CategoryCardInfo = CategoryCardInfo;
 exports.CheckboxInput = CheckboxInput;
 exports.CommandPalette = CommandPalette;
+exports.CommentActions = CommentActions;
+exports.CommentBody = CommentBody;
+exports.CommentCard = CommentCard;
+exports.CommentMeta = CommentMeta;
+exports.CommentSection = CommentSection;
 exports.CompareTool = CompareTool;
 exports.Container = Container;
 exports.ContextMenu = ContextMenu;
@@ -12281,6 +12630,7 @@ exports.FeatureItem = FeatureItem;
 exports.FileInput = FileInput;
 exports.FilterSidebar = FilterSidebar;
 exports.Footer = Footer7;
+exports.Image = Image;
 exports.Lightbox = Lightbox;
 exports.List = List4;
 exports.LogoCloud = LogoCloud;
@@ -12317,6 +12667,7 @@ exports.ProductCard = ProductCard;
 exports.ProductCardHorizontal = ProductCardHorizontal;
 exports.ProductCardImage = ProductCardImage;
 exports.ProductGallery = ProductGallery;
+exports.ProfileCard = ProfileCard;
 exports.ProgressBar = ProgressBar;
 exports.ProgressCircle = ProgressCircle;
 exports.PromoStrip = PromoStrip;
@@ -12328,7 +12679,6 @@ exports.RelatedProducts = RelatedProducts;
 exports.ReviewItem = ReviewItem;
 exports.ReviewSection = ReviewSection;
 exports.ReviewSummary = ReviewSummary;
-exports.SaleBadge = SaleBadge;
 exports.SearchInput = SearchInput;
 exports.Section = Section;
 exports.SectionHeading = SectionHeading;
@@ -12392,7 +12742,6 @@ exports.progressCircleVariants = progressCircleVariants;
 exports.promoStripVariants = promoStripVariants;
 exports.rangeSliderSizes = rangeSliderSizes;
 exports.relatedProductsLayouts = relatedProductsLayouts;
-exports.saleBadgeVariants = saleBadgeVariants;
 exports.sectionHeadingAligns = sectionHeadingAligns;
 exports.skeletonVariants = skeletonVariants;
 exports.spinnerColors = spinnerColors;