@szymonpiatek/designsystem 0.0.6 → 0.0.7

package/dist/index.cjs

@@ -2,8 +2,11 @@
 
 var react = require('react');
 var styles = require('@mui/material/styles');
-var CircularProgress = require('@mui/material/CircularProgress');
+var material = require('@mui/material');
 var jsxRuntime = require('react/jsx-runtime');
+var ShoppingCartIcon = require('@mui/icons-material/ShoppingCart');
+var FavoriteIcon = require('@mui/icons-material/Favorite');
+var FavoriteBorderIcon = require('@mui/icons-material/FavoriteBorder');
 var ExpandMoreIcon = require('@mui/icons-material/ExpandMore');
 var FileUploadIcon = require('@mui/icons-material/FileUpload');
 var CloudUploadMuiIcon = require('@mui/icons-material/CloudUpload');
@@ -22,19 +25,31 @@ var ChevronRightIcon = require('@mui/icons-material/ChevronRight');
 var KeyboardArrowUpIcon = require('@mui/icons-material/KeyboardArrowUp');
 var KeyboardArrowDownIcon = require('@mui/icons-material/KeyboardArrowDown');
 var react$1 = require('@emotion/react');
+var ImageIcon = require('@mui/icons-material/Image');
 var ArticleIcon = require('@mui/icons-material/Article');
 var CheckCircleOutlinedIcon = require('@mui/icons-material/CheckCircleOutlined');
 var HighlightOffIcon = require('@mui/icons-material/HighlightOff');
+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 reactDom = require('react-dom');
 var KeyboardDoubleArrowLeftIcon = require('@mui/icons-material/KeyboardDoubleArrowLeft');
 var KeyboardDoubleArrowRightIcon = require('@mui/icons-material/KeyboardDoubleArrowRight');
+var InfoOutlinedIcon = require('@mui/icons-material/InfoOutlined');
+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');
-var CssBaseline = require('@mui/material/CssBaseline');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var CircularProgress__default = /*#__PURE__*/_interopDefault(CircularProgress);
+var ShoppingCartIcon__default = /*#__PURE__*/_interopDefault(ShoppingCartIcon);
+var FavoriteIcon__default = /*#__PURE__*/_interopDefault(FavoriteIcon);
+var FavoriteBorderIcon__default = /*#__PURE__*/_interopDefault(FavoriteBorderIcon);
 var ExpandMoreIcon__default = /*#__PURE__*/_interopDefault(ExpandMoreIcon);
 var FileUploadIcon__default = /*#__PURE__*/_interopDefault(FileUploadIcon);
 var CloudUploadMuiIcon__default = /*#__PURE__*/_interopDefault(CloudUploadMuiIcon);
@@ -51,14 +66,24 @@ var ChevronLeftIcon__default = /*#__PURE__*/_interopDefault(ChevronLeftIcon);
 var ChevronRightIcon__default = /*#__PURE__*/_interopDefault(ChevronRightIcon);
 var KeyboardArrowUpIcon__default = /*#__PURE__*/_interopDefault(KeyboardArrowUpIcon);
 var KeyboardArrowDownIcon__default = /*#__PURE__*/_interopDefault(KeyboardArrowDownIcon);
+var ImageIcon__default = /*#__PURE__*/_interopDefault(ImageIcon);
 var ArticleIcon__default = /*#__PURE__*/_interopDefault(ArticleIcon);
 var CheckCircleOutlinedIcon__default = /*#__PURE__*/_interopDefault(CheckCircleOutlinedIcon);
 var HighlightOffIcon__default = /*#__PURE__*/_interopDefault(HighlightOffIcon);
+var CreditCardOutlinedIcon__default = /*#__PURE__*/_interopDefault(CreditCardOutlinedIcon);
+var LocalShippingOutlinedIcon__default = /*#__PURE__*/_interopDefault(LocalShippingOutlinedIcon);
+var GridViewIcon__default = /*#__PURE__*/_interopDefault(GridViewIcon);
+var ViewListIcon__default = /*#__PURE__*/_interopDefault(ViewListIcon);
 var KeyboardDoubleArrowLeftIcon__default = /*#__PURE__*/_interopDefault(KeyboardDoubleArrowLeftIcon);
 var KeyboardDoubleArrowRightIcon__default = /*#__PURE__*/_interopDefault(KeyboardDoubleArrowRightIcon);
+var InfoOutlinedIcon__default = /*#__PURE__*/_interopDefault(InfoOutlinedIcon);
+var WarningAmberOutlinedIcon__default = /*#__PURE__*/_interopDefault(WarningAmberOutlinedIcon);
+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);
-var CssBaseline__default = /*#__PURE__*/_interopDefault(CssBaseline);
 
 // src/components/atoms/buttons/Button/Button.tsx
 var sizeMap = {
@@ -161,7 +186,7 @@ var Button = react.forwardRef(
       "aria-label": ariaLabel,
       "aria-current": ariaCurrent,
       children: [
-        loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, { "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(CircularProgress__default.default, { size: "1em", color: "inherit", thickness: 5 }) }) : startIcon && /* @__PURE__ */ jsxRuntime.jsx(IconSlot, { children: startIcon }),
+        loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, { "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: "1em", color: "inherit", thickness: 5 }) }) : startIcon && /* @__PURE__ */ jsxRuntime.jsx(IconSlot, { children: startIcon }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { children }),
         endIcon && /* @__PURE__ */ jsxRuntime.jsx(IconSlot, { children: endIcon })
       ]
@@ -169,6 +194,102 @@ var Button = react.forwardRef(
   )
 );
 Button.displayName = "Button";
+var iconSizeMap = {
+  sm: 18,
+  md: 20,
+  lg: 24
+};
+var Root = styles.styled("span")({
+  position: "relative",
+  display: "inline-flex"
+});
+var Badge = styles.styled("span")(({ theme }) => ({
+  position: "absolute",
+  top: "-4px",
+  right: "-4px",
+  backgroundColor: theme.palette.primary.main,
+  color: "#fff",
+  borderRadius: "9999px",
+  fontSize: "0.625rem",
+  fontWeight: 700,
+  minWidth: "16px",
+  height: "16px",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: "0 3px",
+  pointerEvents: "none",
+  fontFamily: theme.typography.fontFamily,
+  lineHeight: 1
+}));
+var CartButton = react.forwardRef(
+  ({ count, size = "sm", label = "Koszyk", disabled, onClick, className, "aria-label": ariaLabel }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root, { className, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        ref,
+        variant: "ghost",
+        size,
+        disabled,
+        onClick,
+        "aria-label": ariaLabel ?? (count ? `${label} (${count})` : label),
+        children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "flex" }, children: /* @__PURE__ */ jsxRuntime.jsx(ShoppingCartIcon__default.default, { "aria-hidden": true, style: { fontSize: iconSizeMap[size] } }) })
+      }
+    ),
+    count != null && count > 0 && /* @__PURE__ */ jsxRuntime.jsx(Badge, { "aria-hidden": true, children: count > 99 ? "99+" : count })
+  ] })
+);
+CartButton.displayName = "CartButton";
+var sizeMap2 = {
+  sm: { iconSize: 16, padding: "0.375rem" },
+  md: { iconSize: 20, padding: "0.5rem" },
+  lg: { iconSize: 24, padding: "0.625rem" }
+};
+var Root2 = styles.styled("button")(
+  ({ theme, $active, $size }) => ({
+    appearance: "none",
+    border: `1px solid ${$active ? theme.palette.error.main : theme.palette.divider}`,
+    background: $active ? `${theme.palette.error.main}14` : "transparent",
+    cursor: "pointer",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "50%",
+    padding: sizeMap2[$size].padding,
+    color: $active ? theme.palette.error.main : theme.palette.text.secondary,
+    transition: "color 150ms ease, background-color 150ms ease, border-color 150ms ease",
+    "&:hover:not(:disabled)": {
+      color: theme.palette.error.main,
+      borderColor: theme.palette.error.main,
+      backgroundColor: `${theme.palette.error.main}14`
+    },
+    "&:focus-visible": {
+      outline: `3px solid ${theme.palette.primary.main}`,
+      outlineOffset: "2px"
+    },
+    "&:disabled": {
+      opacity: 0.4,
+      cursor: "not-allowed"
+    }
+  })
+);
+var WishlistButton = react.forwardRef(
+  ({ active = false, loading = false, size = "md", label, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    Root2,
+    {
+      ref,
+      type: "button",
+      $active: active,
+      $size: size,
+      disabled: loading || props.disabled,
+      "aria-label": label ?? (active ? "Usu\u0144 z listy \u017Cycze\u0144" : "Dodaj do listy \u017Cycze\u0144"),
+      "aria-pressed": active,
+      ...props,
+      children: loading ? /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: sizeMap2[size].iconSize, color: "inherit", thickness: 5 }) : active ? /* @__PURE__ */ jsxRuntime.jsx(FavoriteIcon__default.default, { "aria-hidden": true, style: { fontSize: sizeMap2[size].iconSize } }) : /* @__PURE__ */ jsxRuntime.jsx(FavoriteBorderIcon__default.default, { "aria-hidden": true, style: { fontSize: sizeMap2[size].iconSize } })
+    }
+  )
+);
+WishlistButton.displayName = "WishlistButton";
 var StyledHelperText = styles.styled("p")(({ theme, $error }) => ({
   margin: "0.25rem 0 0",
   fontSize: "0.75rem",
@@ -225,7 +346,7 @@ var inputColors = (theme, error) => ({
     boxShadow: `0 0 0 3px ${error ? theme.palette.error.main : theme.palette.primary.main}33`
   }
 });
-var Root = styles.styled("div")(({ $fullWidth }) => ({
+var Root3 = styles.styled("div")(({ $fullWidth }) => ({
   display: $fullWidth ? "block" : "inline-block",
   width: $fullWidth ? "100%" : "auto"
 }));
@@ -290,7 +411,7 @@ var BaseInput = react.forwardRef(
   }, ref) => {
     const autoId = react.useId();
     const inputId = id ?? autoId;
-    return /* @__PURE__ */ jsxRuntime.jsxs(Root, { $fullWidth: fullWidth, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root3, { $fullWidth: fullWidth, children: [
       label && /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: inputId, error, size, children: label }),
       /* @__PURE__ */ jsxRuntime.jsxs(
         InputWrapper,
@@ -394,7 +515,7 @@ var LabelText = styles.styled("span")(
     userSelect: "none"
   })
 );
-var Root2 = styles.styled("span")(({ $disabled }) => ({
+var Root4 = styles.styled("span")(({ $disabled }) => ({
   display: "inline-flex",
   flexDirection: "column",
   cursor: $disabled ? "not-allowed" : "pointer"
@@ -418,7 +539,7 @@ var CheckboxInput = react.forwardRef(
         innerRef.current.indeterminate = indeterminate;
       }
     }, [indeterminate]);
-    return /* @__PURE__ */ jsxRuntime.jsxs(Root2, { $disabled: disabled, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root4, { $disabled: disabled, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Row, { htmlFor: inputId, children: [
         /* @__PURE__ */ jsxRuntime.jsx(Box, { $size: size, $error: error, $disabled: disabled, children: /* @__PURE__ */ jsxRuntime.jsx(
           HiddenInput,
@@ -452,7 +573,7 @@ var CloudUploadIcon = ({ size }) => /* @__PURE__ */ jsxRuntime.jsx(CloudUploadMu
 var FileDocIcon = ({ size }) => /* @__PURE__ */ jsxRuntime.jsx(InsertDriveFileIcon__default.default, { "aria-hidden": true, style: { fontSize: size } });
 var TrashIcon = ({ size = 12 }) => /* @__PURE__ */ jsxRuntime.jsx(DeleteOutlinedIcon__default.default, { "aria-hidden": true, style: { fontSize: size } });
 var XIcon = () => /* @__PURE__ */ jsxRuntime.jsx(CloseIcon__default.default, { "aria-hidden": true, style: { fontSize: 11 } });
-var Root3 = styles.styled("div")(({ $fullWidth }) => ({
+var Root5 = styles.styled("div")(({ $fullWidth }) => ({
   display: $fullWidth ? "block" : "inline-block",
   width: $fullWidth ? "100%" : "auto"
 }));
@@ -942,7 +1063,7 @@ var FileInput = react.forwardRef(
       }
     );
     if (variant === "dropzone") {
-      return /* @__PURE__ */ jsxRuntime.jsxs(Root3, { $fullWidth: fullWidth, children: [
+      return /* @__PURE__ */ jsxRuntime.jsxs(Root5, { $fullWidth: fullWidth, children: [
         label && /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: inputId, error, size, children: label }),
         /* @__PURE__ */ jsxRuntime.jsxs(
           DropzoneArea,
@@ -1070,7 +1191,7 @@ var FileInput = react.forwardRef(
         helperText && /* @__PURE__ */ jsxRuntime.jsx(HelperText, { error, children: helperText })
       ] });
     }
-    return /* @__PURE__ */ jsxRuntime.jsxs(Root3, { $fullWidth: fullWidth, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root5, { $fullWidth: fullWidth, children: [
       label && /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: inputId, error, size, children: label }),
       /* @__PURE__ */ jsxRuntime.jsxs(
         CompactWrapper,
@@ -1189,7 +1310,7 @@ var triggerColors = (theme, error, open) => ({
     borderColor: error ? theme.palette.error.dark : theme.palette.text.secondary
   }
 });
-var Root4 = styles.styled("div")(({ $fullWidth }) => ({
+var Root6 = styles.styled("div")(({ $fullWidth }) => ({
   display: $fullWidth ? "block" : "inline-block",
   width: $fullWidth ? "100%" : "auto",
   position: "relative"
@@ -1306,7 +1427,7 @@ var BaseSelectInput = ({
   }, [isOpen, close]);
   const selectedLabel = options.find((o) => o.value === value)?.label;
   const defaultTriggerContent = /* @__PURE__ */ jsxRuntime.jsx("span", { style: { opacity: selectedLabel ? 1 : 0.5 }, children: selectedLabel ?? placeholder });
-  return /* @__PURE__ */ jsxRuntime.jsxs(Root4, { $fullWidth: fullWidth, ref: rootRef, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Root6, { $fullWidth: fullWidth, ref: rootRef, children: [
     label && /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: inputId, error, size, children: label }),
     /* @__PURE__ */ jsxRuntime.jsxs(
       Trigger,
@@ -1586,7 +1707,7 @@ var borderColors = (theme, error) => ({
     boxShadow: `0 0 0 3px ${error ? theme.palette.error.main : theme.palette.primary.main}33`
   }
 });
-var Root5 = styles.styled("div")(({ $fullWidth }) => ({
+var Root7 = styles.styled("div")(({ $fullWidth }) => ({
   display: $fullWidth ? "block" : "inline-block",
   width: $fullWidth ? "100%" : "auto"
 }));
@@ -1627,7 +1748,7 @@ var TextareaInput = react.forwardRef(
   }, ref) => {
     const autoId = react.useId();
     const inputId = id ?? autoId;
-    return /* @__PURE__ */ jsxRuntime.jsxs(Root5, { $fullWidth: fullWidth, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root7, { $fullWidth: fullWidth, children: [
       label && /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: inputId, error, size, children: label }),
       /* @__PURE__ */ jsxRuntime.jsx(
         StyledTextarea,
@@ -1649,14 +1770,14 @@ var TextareaInput = react.forwardRef(
   }
 );
 TextareaInput.displayName = "TextareaInput";
-var sizeMap2 = { sm: "1em", md: "1.25em", lg: "1.75em" };
+var sizeMap3 = { sm: "1em", md: "1.25em", lg: "1.75em" };
 var toFlagEmoji = (code) => code.toUpperCase().replace(/[A-Z]/g, (char) => String.fromCodePoint(127462 + char.charCodeAt(0) - 65));
 var CountryFlag = ({ countryCode, size = "md", style, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
   "span",
   {
     role: "img",
     "aria-label": `Flag: ${countryCode}`,
-    style: { fontSize: sizeMap2[size], lineHeight: 1, display: "inline-flex", ...style },
+    style: { fontSize: sizeMap3[size], lineHeight: 1, display: "inline-flex", ...style },
     ...rest,
     children: toFlagEmoji(countryCode)
   }
@@ -3252,7 +3373,7 @@ var wrapperColors = (theme, error, focused) => ({
     borderColor: !focused ? error ? theme.palette.error.dark : theme.palette.text.secondary : void 0
   }
 });
-var Root6 = styles.styled("div")(({ $fullWidth }) => ({
+var Root8 = styles.styled("div")(({ $fullWidth }) => ({
   display: $fullWidth ? "block" : "inline-block",
   width: $fullWidth ? "100%" : "auto"
 }));
@@ -3489,7 +3610,7 @@ var PhoneInput = react.forwardRef(
       return () => document.removeEventListener("mousedown", handler);
     }, [isOpen, close]);
     const derivedPlaceholder = placeholder ?? (selectedCountry.minLength === selectedCountry.maxLength ? `${selectedCountry.maxLength} ${digitsLabel}` : `${selectedCountry.minLength}\u2013${selectedCountry.maxLength} ${digitsLabel}`);
-    return /* @__PURE__ */ jsxRuntime.jsxs(Root6, { $fullWidth: fullWidth, ref: rootRef, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root8, { $fullWidth: fullWidth, ref: rootRef, children: [
       label && /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: inputId, error, size, children: label }),
       /* @__PURE__ */ jsxRuntime.jsxs(
         InputWrapper2,
@@ -3604,7 +3725,7 @@ function getActiveColor(color, theme) {
       return theme.palette.primary.main;
   }
 }
-var Root7 = styles.styled("span")(({ $disabled }) => ({
+var Root9 = styles.styled("span")(({ $disabled }) => ({
   display: "inline-flex",
   flexDirection: "column",
   cursor: $disabled ? "not-allowed" : "pointer"
@@ -3689,7 +3810,7 @@ var SwitchInput = react.forwardRef(
   }, ref) => {
     const autoId = react.useId();
     const inputId = id ?? autoId;
-    return /* @__PURE__ */ jsxRuntime.jsxs(Root7, { $disabled: disabled, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root9, { $disabled: disabled, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Row2, { htmlFor: inputId, $placement: labelPlacement, children: [
         /* @__PURE__ */ jsxRuntime.jsxs(Track, { $size: size, $color: color, $error: error, $disabled: disabled, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -3715,7 +3836,7 @@ SwitchInput.displayName = "SwitchInput";
 var switchColors = ["primary", "secondary", "success", "danger"];
 var TRACK_H2 = { sm: "0.25rem", md: "0.375rem", lg: "0.5rem" };
 var THUMB_S2 = { sm: "0.875rem", md: "1.125rem", lg: "1.375rem" };
-var Root8 = styles.styled("div")({
+var Root10 = styles.styled("div")({
   display: "flex",
   flexDirection: "column",
   gap: "0.5rem",
@@ -3838,7 +3959,7 @@ var RangeSlider = react.forwardRef(
     const loP = pct(lo, min, max);
     const hiP = pct(hi, min, max);
     const valueLabel = range ? `${formatValue2(lo)} \u2013 ${formatValue2(hi)}` : formatValue2(lo);
-    return /* @__PURE__ */ jsxRuntime.jsxs(Root8, { ref, ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root10, { ref, ...props, children: [
       (label || showValue) && /* @__PURE__ */ jsxRuntime.jsxs(LabelRow, { children: [
         label && /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
         showValue && /* @__PURE__ */ jsxRuntime.jsx("span", { children: valueLabel })
@@ -3968,7 +4089,7 @@ var inputColors2 = (theme, error) => ({
     boxShadow: `0 0 0 3px ${error ? theme.palette.error.main : theme.palette.primary.main}33`
   }
 });
-var Root9 = styles.styled("div")(({ $fullWidth }) => ({
+var Root11 = styles.styled("div")(({ $fullWidth }) => ({
   display: $fullWidth ? "block" : "inline-block",
   width: $fullWidth ? "100%" : "auto",
   position: "relative"
@@ -4363,7 +4484,7 @@ var DateTimePicker = react.forwardRef(
     const showCalendar = mode !== "time";
     const showTime = mode !== "date";
     const needsConfirm = mode !== "date";
-    return /* @__PURE__ */ jsxRuntime.jsxs(Root9, { ref: rootRef, $fullWidth: fullWidth, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root11, { ref: rootRef, $fullWidth: fullWidth, children: [
       label && /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: inputId, error, size, children: label }),
       /* @__PURE__ */ jsxRuntime.jsxs(
         InputWrapper3,
@@ -4770,7 +4891,7 @@ var StyledBadge = styles.styled("span", {
   fontFamily: theme.typography.fontFamily,
   ...getVariantStyles2($variant, theme)
 }));
-function Badge({ variant = "default", ...props }) {
+function Badge2({ variant = "default", ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(StyledBadge, { $variant: variant, ...props });
 }
 var badgeVariants = [
@@ -4782,7 +4903,41 @@ var badgeVariants = [
   "ghost",
   "promo"
 ];
-var sizeMap3 = {
+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" },
   lg: { width: "3rem", height: "3rem", fontSize: "1rem" },
@@ -4818,7 +4973,7 @@ var StyledAvatar = styles.styled("div", {
   fontWeight: 600,
   fontFamily: theme.typography.fontFamily,
   userSelect: "none",
-  ...sizeMap3[$size],
+  ...sizeMap4[$size],
   ...getColorStyles($color, theme)
 }));
 function Avatar({ initials, size = "md", color = "primary", ...props }) {
@@ -4930,7 +5085,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 Root10 = styles.styled("span", {
+var Root13 = styles.styled("span", {
   shouldForwardProp: (p) => !["$size", "$color"].includes(p)
 })(({ theme, $size, $color }) => {
   const colorMap = {
@@ -5018,8 +5173,8 @@ function Spinner3({
   label = "\u0141adowanie\u2026",
   ...props
 }) {
-  const Inner6 = VARIANTS[variant];
-  return /* @__PURE__ */ jsxRuntime.jsx(Root10, { $size: size, $color: color, role: "status", "aria-label": label, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Inner6, {}) });
+  const Inner7 = VARIANTS[variant];
+  return /* @__PURE__ */ jsxRuntime.jsx(Root13, { $size: size, $color: color, role: "status", "aria-label": label, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Inner7, {}) });
 }
 var spinnerVariants = ["ring", "dots", "pulse", "bars"];
 var spinnerSizes = ["xs", "sm", "md", "lg", "xl"];
@@ -5145,7 +5300,7 @@ var FONT_MAP = {
   lg: "1.125rem",
   xl: "1.5rem"
 };
-var Root11 = styles.styled("div")({ position: "relative", display: "inline-flex", flexShrink: 0 });
+var Root14 = styles.styled("div")({ position: "relative", display: "inline-flex", flexShrink: 0 });
 var Label2 = styles.styled("div", {
   shouldForwardProp: (p) => p !== "$size"
 })(({ theme, $size }) => ({
@@ -5199,7 +5354,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(
-    Root11,
+    Root14,
     {
       role: "progressbar",
       "aria-valuenow": value,
@@ -5546,12 +5701,110 @@ var StyledArticle = styles.styled("article")(({ theme }) => ({
 }));
 var Article = react.forwardRef(({ children, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx(StyledArticle, { ref, ...rest, children }));
 Article.displayName = "Article";
-var sizeMap4 = {
+var PRESET_MAP = {
+  "1/1": 1,
+  "4/3": 4 / 3,
+  "3/2": 3 / 2,
+  "16/9": 16 / 9,
+  "21/9": 21 / 9,
+  "9/16": 9 / 16,
+  "3/4": 3 / 4,
+  "2/3": 2 / 3
+};
+var Root15 = styles.styled("div")({
+  position: "relative",
+  width: "100%",
+  "& > *": {
+    position: "absolute",
+    inset: 0,
+    width: "100%",
+    height: "100%",
+    objectFit: "cover"
+  }
+});
+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 });
+  }
+);
+AspectRatio.displayName = "AspectRatio";
+var aspectRatioPresets = Object.keys(PRESET_MAP);
+var Root16 = styles.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 = styles.styled("div")({
+  margin: "-1.5rem -1.5rem 1rem"
+});
+var Image = styles.styled("img")({
+  objectFit: "cover",
+  width: "100%",
+  height: "100%"
+});
+var ImagePlaceholder = styles.styled("div")(({ theme }) => ({
+  width: "100%",
+  height: "100%",
+  backgroundColor: theme.palette.action.hover,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: theme.palette.text.disabled
+}));
+var Content = styles.styled("div")({
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.25rem"
+});
+var Name = styles.styled("h3")(({ theme }) => ({
+  margin: 0,
+  color: theme.palette.text.primary,
+  fontFamily: theme.typography.fontFamily,
+  fontSize: "1rem",
+  fontWeight: 700,
+  lineHeight: 1.4
+}));
+var Count = styles.styled("span")(({ theme }) => ({
+  color: theme.palette.text.secondary,
+  fontFamily: theme.typography.fontFamily,
+  fontSize: "0.875rem"
+}));
+var CardLink = styles.styled("a")({
+  display: "block",
+  textDecoration: "none",
+  color: "inherit",
+  outline: "none"
+});
+var CategoryCard = react.forwardRef(
+  ({ name, imageUrl, imageAlt, count, href, ...props }, ref) => {
+    const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ImageWrap, { children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: "4/3", children: imageUrl ? /* @__PURE__ */ jsxRuntime.jsx(Image, { src: imageUrl, alt: imageAlt ?? name }) : /* @__PURE__ */ jsxRuntime.jsx(ImagePlaceholder, { "aria-label": imageAlt ?? name, children: /* @__PURE__ */ jsxRuntime.jsx(ImageIcon__default.default, { style: { fontSize: 48 } }) }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Content, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Name, { children: name }),
+        count !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs(Count, { children: [
+          count,
+          " produkt\xF3w"
+        ] })
+      ] })
+    ] });
+    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";
+var sizeMap5 = {
   sm: "1rem",
   md: "1.25rem",
   lg: "1.5rem"
 };
-var Root12 = styles.styled("div")(({ theme }) => ({
+var Root17 = styles.styled("div")(({ theme }) => ({
   display: "inline-flex",
   alignItems: "center",
   gap: "0.5rem",
@@ -5571,7 +5824,7 @@ var StarButton = styles.styled("button")(
     padding: 0,
     color: $active ? "#f59e0b" : theme.palette.action.disabled,
     cursor: "pointer",
-    fontSize: sizeMap4[$size],
+    fontSize: sizeMap5[$size],
     lineHeight: 1,
     "&:disabled": {
       cursor: "default"
@@ -5586,7 +5839,7 @@ var Rating = react.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__ */ jsxRuntime.jsxs(Root12, { ref, "aria-label": `Ocena ${value} z ${max}`, ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root17, { ref, "aria-label": `Ocena ${value} z ${max}`, ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         Stars,
         {
@@ -5617,36 +5870,6 @@ var Rating = react.forwardRef(
   }
 );
 Rating.displayName = "Rating";
-var PRESET_MAP = {
-  "1/1": 1,
-  "4/3": 4 / 3,
-  "3/2": 3 / 2,
-  "16/9": 16 / 9,
-  "21/9": 21 / 9,
-  "9/16": 9 / 16,
-  "3/4": 3 / 4,
-  "2/3": 2 / 3
-};
-var Root13 = styles.styled("div")({
-  position: "relative",
-  width: "100%",
-  "& > *": {
-    position: "absolute",
-    inset: 0,
-    width: "100%",
-    height: "100%",
-    objectFit: "cover"
-  }
-});
-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(Root13, { ref, style: { paddingBottom, ...style }, ...props, children });
-  }
-);
-AspectRatio.displayName = "AspectRatio";
-var aspectRatioPresets = Object.keys(PRESET_MAP);
 var DEFAULT_OMNIBUS_LABEL = "Najni\u017Csza cena z ostatnich 30 dni";
 var FONT_SIZE = {
   sm: "0.875rem",
@@ -5654,7 +5877,7 @@ var FONT_SIZE = {
   lg: "1.5rem",
   xl: "2rem"
 };
-var Root14 = styles.styled("div")({
+var Root18 = styles.styled("div")({
   display: "inline-flex",
   flexDirection: "column",
   gap: "0.25rem"
@@ -5735,7 +5958,7 @@ var Price = react.forwardRef(
     const onSale = originalPrice !== void 0 && originalPrice > price;
     const discount = onSale ? calcDiscount(price, originalPrice) : 0;
     const showOmnibus = lowestPrice !== void 0;
-    return /* @__PURE__ */ jsxRuntime.jsxs(Root14, { ref, ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root18, { ref, ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(PriceRow, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           Current,
@@ -5779,26 +6002,35 @@ var Price = react.forwardRef(
 );
 Price.displayName = "Price";
 var priceSizes = ["sm", "md", "lg", "xl"];
-var Root15 = styles.styled(Card)({
+var Root19 = styles.styled(Card)({
   display: "flex",
   flexDirection: "column",
   height: "100%",
   overflow: "hidden"
 });
-var ImageWrap = styles.styled("div")({
+var ImageWrap2 = styles.styled("div")({
   position: "relative",
   margin: "-1.5rem -1.5rem 1rem"
 });
-var Image = styles.styled("img")(({ theme }) => ({
+var Image2 = styles.styled("img")(({ theme }) => ({
   objectFit: "cover",
   backgroundColor: theme.palette.action.hover
 }));
+var ImagePlaceholder2 = styles.styled("div")(({ theme }) => ({
+  width: "100%",
+  height: "100%",
+  backgroundColor: theme.palette.action.hover,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: theme.palette.text.disabled
+}));
 var BadgeSlot = styles.styled("div")({
   position: "absolute",
   left: "0.75rem",
   top: "0.75rem"
 });
-var Name = styles.styled("h3")(({ theme }) => ({
+var Name2 = styles.styled("h3")(({ theme }) => ({
   margin: 0,
   color: theme.palette.text.primary,
   fontFamily: theme.typography.fontFamily,
@@ -5829,12 +6061,12 @@ var ProductCard = react.forwardRef(
     ctaLabel = "Dodaj do koszyka",
     onAddToCart,
     ...props
-  }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root15, { ref, variant: "default", padding: "md", rounded: "lg", ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ImageWrap, { children: /* @__PURE__ */ jsxRuntime.jsxs(AspectRatio, { ratio: "4/3", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Image, { src: imageUrl, alt: imageAlt ?? name }),
-      badge && /* @__PURE__ */ jsxRuntime.jsx(BadgeSlot, { children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: badgeVariant, children: badge }) })
+  }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root19, { ref, variant: "default", padding: "md", rounded: "lg", ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ImageWrap2, { children: /* @__PURE__ */ jsxRuntime.jsxs(AspectRatio, { ratio: "4/3", children: [
+      imageUrl ? /* @__PURE__ */ jsxRuntime.jsx(Image2, { src: imageUrl, alt: imageAlt ?? name }) : /* @__PURE__ */ jsxRuntime.jsx(ImagePlaceholder2, { "aria-label": imageAlt ?? name, children: /* @__PURE__ */ jsxRuntime.jsx(ImageIcon__default.default, { style: { fontSize: 48 } }) }),
+      badge && /* @__PURE__ */ jsxRuntime.jsx(BadgeSlot, { children: /* @__PURE__ */ jsxRuntime.jsx(Badge2, { variant: badgeVariant, children: badge }) })
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(Name, { children: name }),
+    /* @__PURE__ */ jsxRuntime.jsx(Name2, { children: name }),
     rating !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(Rating, { value: rating, count: reviewCount, size: "sm" }),
     /* @__PURE__ */ jsxRuntime.jsx(
       Price,
@@ -5847,55 +6079,181 @@ var ProductCard = react.forwardRef(
         style: { marginTop: "0.5rem" }
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(Footer, { children: /* @__PURE__ */ jsxRuntime.jsx(Button, { fullWidth: true, onClick: onAddToCart, children: ctaLabel }) })
+    /* @__PURE__ */ jsxRuntime.jsx(Footer, { children: /* @__PURE__ */ jsxRuntime.jsx(Button, { fullWidth: true, onClick: (e) => {
+      e.stopPropagation();
+      onAddToCart?.();
+    }, children: ctaLabel }) })
   ] })
 );
 ProductCard.displayName = "ProductCard";
-var ImageWrapper = styles.styled("div", {
-  shouldForwardProp: (prop) => prop !== "$ar"
-})(({ $ar }) => ({
-  position: "relative",
+var COLLAPSE_AT = "480px";
+var ContainerRoot = styles.styled("div")({
+  containerType: "inline-size",
   width: "100%",
-  aspectRatio: $ar,
-  overflow: "hidden",
-  flexShrink: 0
-}));
-var Img = styles.styled("img")({
+  height: "100%"
+});
+var Inner = styles.styled("div")({
+  display: "flex",
+  flexDirection: "row",
+  height: "100%",
+  [`@container (max-width: ${COLLAPSE_AT})`]: {
+    flexDirection: "column"
+  }
+});
+var ImageWrap3 = styles.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 = styles.styled("img")(({ theme }) => ({
+  position: "absolute",
+  inset: 0,
   width: "100%",
   height: "100%",
   objectFit: "cover",
-  display: "block"
-});
-var Placeholder2 = styles.styled("div")(({ theme }) => ({
+  backgroundColor: theme.palette.action.hover
+}));
+var ImagePlaceholder3 = styles.styled("div")(({ theme }) => ({
+  position: "absolute",
+  inset: 0,
   width: "100%",
   height: "100%",
+  backgroundColor: theme.palette.action.hover,
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
-  backgroundColor: theme.palette.action.hover
+  color: theme.palette.text.disabled
 }));
-var Overlay = styles.styled("div")({
+var BadgeSlot2 = styles.styled("div")({
   position: "absolute",
-  inset: 0,
-  background: "linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, transparent 50%)",
-  pointerEvents: "none"
+  left: "0.75rem",
+  top: "0.75rem",
+  zIndex: 1
 });
-var FileTextIcon = () => /* @__PURE__ */ jsxRuntime.jsx(ArticleIcon__default.default, { "aria-hidden": "true", style: { fontSize: 32, opacity: 0.3 } });
-function toAspectRatioCss(ratio) {
-  if (typeof ratio === "number") return String(ratio);
-  return ratio.replace("/", " / ");
-}
-var PostCardImage = ({
-  src,
-  alt = "",
-  aspectRatio = "4/3",
-  overlay = false,
-  className,
-  style
-}) => {
-  const [imgError, setImgError] = react.useState(false);
-  const showPlaceholder = !src || imgError;
-  return /* @__PURE__ */ jsxRuntime.jsxs(ImageWrapper, { $ar: toAspectRatioCss(aspectRatio), className, style, children: [
+var Content2 = styles.styled("div")({
+  display: "flex",
+  flexDirection: "column",
+  flex: 1,
+  minWidth: 0
+});
+var Name3 = styles.styled("h3")(({ theme }) => ({
+  margin: 0,
+  color: theme.palette.text.primary,
+  fontFamily: theme.typography.fontFamily,
+  fontSize: "1rem",
+  fontWeight: 700,
+  lineHeight: 1.4
+}));
+var Footer2 = styles.styled("div")({
+  display: "grid",
+  gap: "1rem",
+  marginTop: "auto",
+  paddingTop: "1rem"
+});
+var ProductCardHorizontal = react.forwardRef(
+  ({
+    name,
+    imageUrl,
+    imageAlt,
+    price,
+    originalPrice,
+    currency,
+    locale,
+    lowestPrice,
+    badge,
+    badgeVariant = "success",
+    rating,
+    reviewCount,
+    ctaLabel = "Dodaj do koszyka",
+    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.jsxs(ImageWrap3, { children: [
+      imageUrl ? /* @__PURE__ */ jsxRuntime.jsx(Image3, { src: imageUrl, alt: imageAlt ?? name }) : /* @__PURE__ */ jsxRuntime.jsx(ImagePlaceholder3, { "aria-label": imageAlt ?? name, children: /* @__PURE__ */ jsxRuntime.jsx(ImageIcon__default.default, { style: { fontSize: 48 } }) }),
+      badge && /* @__PURE__ */ jsxRuntime.jsx(BadgeSlot2, { children: /* @__PURE__ */ jsxRuntime.jsx(Badge2, { variant: badgeVariant, children: badge }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Content2, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Name3, { children: name }),
+      rating !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(Rating, { value: rating, count: reviewCount, size: "sm" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Price,
+        {
+          price,
+          originalPrice,
+          currency,
+          locale,
+          lowestPrice,
+          style: { marginTop: "0.5rem" }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(Footer2, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          fullWidth: true,
+          onClick: (e) => {
+            e.stopPropagation();
+            onAddToCart?.();
+          },
+          children: ctaLabel
+        }
+      ) })
+    ] })
+  ] }) }) })
+);
+ProductCardHorizontal.displayName = "ProductCardHorizontal";
+var ImageWrapper = styles.styled("div", {
+  shouldForwardProp: (prop) => prop !== "$ar"
+})(({ $ar }) => ({
+  position: "relative",
+  width: "100%",
+  aspectRatio: $ar,
+  overflow: "hidden",
+  flexShrink: 0
+}));
+var Img = styles.styled("img")({
+  width: "100%",
+  height: "100%",
+  objectFit: "cover",
+  display: "block"
+});
+var Placeholder2 = styles.styled("div")(({ theme }) => ({
+  width: "100%",
+  height: "100%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  backgroundColor: theme.palette.action.hover
+}));
+var Overlay = styles.styled("div")({
+  position: "absolute",
+  inset: 0,
+  background: "linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, transparent 50%)",
+  pointerEvents: "none"
+});
+var FileTextIcon = () => /* @__PURE__ */ jsxRuntime.jsx(ArticleIcon__default.default, { "aria-hidden": "true", style: { fontSize: 32, opacity: 0.3 } });
+function toAspectRatioCss(ratio) {
+  if (typeof ratio === "number") return String(ratio);
+  return ratio.replace("/", " / ");
+}
+var PostCardImage = ({
+  src,
+  alt = "",
+  aspectRatio = "4/3",
+  overlay = false,
+  className,
+  style
+}) => {
+  const [imgError, setImgError] = react.useState(false);
+  const showPlaceholder = !src || imgError;
+  return /* @__PURE__ */ jsxRuntime.jsxs(ImageWrapper, { $ar: toAspectRatioCss(aspectRatio), className, style, children: [
     showPlaceholder ? /* @__PURE__ */ jsxRuntime.jsx(Placeholder2, { children: /* @__PURE__ */ jsxRuntime.jsx(FileTextIcon, {}) }) : /* @__PURE__ */ jsxRuntime.jsx(Img, { src, alt, onError: () => setImgError(true) }),
     overlay && !showPlaceholder && /* @__PURE__ */ jsxRuntime.jsx(Overlay, {})
   ] });
@@ -5971,7 +6329,7 @@ var StyledInner = styles.styled("div", {
   height: "100%",
   ...getLayoutStyles($variant)
 }));
-var CardLink = styles.styled("a")(({ theme }) => ({
+var CardLink2 = styles.styled("a")(({ theme }) => ({
   display: "block",
   textDecoration: "none",
   color: "inherit",
@@ -6077,13 +6435,13 @@ 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(Badge, { variant: isFeatured ? "ghost" : "default", children: category }) }),
+        category && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Badge2, { variant: 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 })
       ] })
     ] });
-    return /* @__PURE__ */ jsxRuntime.jsx(Card, { ref, variant: cardVariant, padding: "none", rounded: "lg", ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(StyledRoot, { children: href ? /* @__PURE__ */ jsxRuntime.jsx(CardLink, { href, "aria-label": title, children: inner }) : inner }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(Card, { ref, variant: cardVariant, padding: "none", rounded: "lg", ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(StyledRoot, { children: href ? /* @__PURE__ */ jsxRuntime.jsx(CardLink2, { href, "aria-label": title, children: inner }) : inner }) });
   }
 );
 PostCard.displayName = "PostCard";
@@ -6095,7 +6453,7 @@ var postCardVariants = [
   "featured",
   "compact"
 ];
-var Root16 = styles.styled(Card)({
+var Root20 = styles.styled(Card)({
   display: "flex",
   flexDirection: "column",
   height: "100%"
@@ -6106,7 +6464,7 @@ var NameRow = styles.styled("div")({
   justifyContent: "space-between",
   marginBottom: "0.75rem"
 });
-var Name2 = styles.styled("p")(({ theme }) => ({
+var Name4 = styles.styled("p")(({ theme }) => ({
   margin: 0,
   fontFamily: theme.typography.fontFamily,
   fontWeight: 600,
@@ -6226,10 +6584,10 @@ var PricingCard = react.forwardRef(
   }, ref) => {
     const resolvedCardVariant = cardVariant ?? (popular ? "gradient-primary" : "default");
     const resolvedCtaVariant = ctaVariant ?? (popular ? "primary" : "ghost");
-    return /* @__PURE__ */ jsxRuntime.jsxs(Root16, { ref, variant: resolvedCardVariant, padding: "lg", rounded: "lg", ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root20, { ref, variant: resolvedCardVariant, padding: "lg", rounded: "lg", ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(NameRow, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Name2, { children: name }),
-        popular && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "default", children: popularLabel })
+        /* @__PURE__ */ jsxRuntime.jsx(Name4, { children: name }),
+        popular && /* @__PURE__ */ jsxRuntime.jsx(Badge2, { variant: "default", children: popularLabel })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(PriceRow2, { children: [
         currency && /* @__PURE__ */ jsxRuntime.jsx(Currency, { children: currency }),
@@ -6252,7 +6610,7 @@ var PricingCard = react.forwardRef(
   }
 );
 PricingCard.displayName = "PricingCard";
-var Root17 = styles.styled(Card, {
+var Root21 = styles.styled(Card, {
   shouldForwardProp: (prop) => prop !== "$align"
 })(({ $align }) => ({
   textAlign: $align,
@@ -6282,14 +6640,14 @@ var Description3 = styles.styled("p")(({ theme }) => ({
   lineHeight: 1.5
 }));
 var StatCard = react.forwardRef(
-  ({ stat, cardVariant = "default", align = "center", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root17, { ref, variant: cardVariant, padding: "lg", rounded: "lg", $align: align, ...props, children: [
+  ({ stat, cardVariant = "default", align = "center", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root21, { ref, variant: cardVariant, padding: "lg", rounded: "lg", $align: align, ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx(Value, { children: stat.value }),
     /* @__PURE__ */ jsxRuntime.jsx(Label3, { children: stat.label }),
     stat.description && /* @__PURE__ */ jsxRuntime.jsx(Description3, { children: stat.description })
   ] })
 );
 StatCard.displayName = "StatCard";
-var Root18 = styles.styled(Card)({
+var Root22 = styles.styled(Card)({
   display: "flex",
   flexDirection: "column",
   gap: "1.25rem",
@@ -6315,7 +6673,7 @@ var Quote = styles.styled("blockquote")(({ theme }) => ({
     marginLeft: "0.125rem"
   }
 }));
-var Footer2 = styles.styled("div")({
+var Footer3 = styles.styled("div")({
   display: "flex",
   alignItems: "center",
   gap: "0.75rem"
@@ -6346,10 +6704,10 @@ var AuthorRole = styles.styled("p")(({ theme }) => ({
 var TestimonialCard = react.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__ */ jsxRuntime.jsxs(Root18, { ref, variant: cardVariant, padding: "lg", rounded: "lg", ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root22, { ref, variant: cardVariant, padding: "lg", rounded: "lg", ...props, children: [
       testimonial.rating && /* @__PURE__ */ jsxRuntime.jsx(Rating, { value: testimonial.rating, readonly: true, size: "sm" }),
       /* @__PURE__ */ jsxRuntime.jsx(Quote, { children: testimonial.quote }),
-      /* @__PURE__ */ jsxRuntime.jsxs(Footer2, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Footer3, { children: [
         testimonial.authorAvatarUrl ? /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: testimonial.authorAvatarUrl, alt: testimonial.authorName }) : /* @__PURE__ */ jsxRuntime.jsx(Avatar, { initials, size: "md", color: "primary" }),
         /* @__PURE__ */ jsxRuntime.jsxs(AuthorInfo, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(AuthorName, { children: testimonial.authorName }),
@@ -6360,7 +6718,7 @@ var TestimonialCard = react.forwardRef(
   }
 );
 TestimonialCard.displayName = "TestimonialCard";
-var Root19 = styles.styled(Card)(({ theme }) => ({
+var Root23 = styles.styled(Card)(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   gap: "1rem",
@@ -6379,10 +6737,10 @@ var AvatarImage2 = styles.styled("img")({
   borderRadius: "50%",
   objectFit: "cover"
 });
-var Content = styles.styled("div")({
+var Content3 = styles.styled("div")({
   minWidth: 0
 });
-var Name3 = styles.styled("h3")(({ theme }) => ({
+var Name5 = styles.styled("h3")(({ theme }) => ({
   margin: 0,
   color: theme.palette.text.primary,
   fontFamily: theme.typography.fontFamily,
@@ -6404,10 +6762,10 @@ function getInitials(member) {
   return member.name.split(" ").filter(Boolean).slice(0, 2).map((part) => part[0]).join("").toUpperCase();
 }
 var TeamMemberCard = react.forwardRef(
-  ({ member, cardVariant = "default", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root19, { ref, variant: cardVariant, padding: "lg", rounded: "lg", ...props, children: [
+  ({ member, cardVariant = "default", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root23, { ref, variant: cardVariant, padding: "lg", rounded: "lg", ...props, children: [
     member.avatarUrl ? /* @__PURE__ */ jsxRuntime.jsx(AvatarImage2, { src: member.avatarUrl, alt: member.avatarAlt ?? member.name }) : /* @__PURE__ */ jsxRuntime.jsx(Avatar, { initials: getInitials(member), size: "xl", color: member.avatarColor ?? "primary" }),
-    /* @__PURE__ */ jsxRuntime.jsxs(Content, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Name3, { children: member.name }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Content3, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Name5, { children: member.name }),
       /* @__PURE__ */ jsxRuntime.jsx(Role, { children: member.role })
     ] })
   ] })
@@ -6585,8 +6943,143 @@ function CompareTool({
     }) })
   ] }) });
 }
+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 = styles.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 = styles.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 = styles.styled("div")({
+  display: "flex",
+  alignItems: "center",
+  gap: "0.25rem"
+});
+var Segment = styles.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 = styles.styled("span", {
+  shouldForwardProp: (prop) => prop !== "$variant"
+})(({ $variant }) => ({
+  fontSize: $variant === "inline" ? "1rem" : "1.5rem",
+  fontWeight: 700,
+  lineHeight: 1,
+  color: $variant === "banner" ? "#fff" : "inherit"
+}));
+var Unit = styles.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 = styles.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 = react.forwardRef(
+  ({
+    targetDate,
+    variant = "inline",
+    label,
+    expiredLabel = "Promocja zako\u0144czona",
+    onExpire,
+    ...props
+  }, ref) => {
+    const [timeLeft, setTimeLeft] = react.useState(() => calcTimeLeft(targetDate));
+    react.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__ */ jsxRuntime.jsx(Root24, { ref, $variant: variant, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(TimerLabel, { $variant: variant, children: expiredLabel }) });
+    }
+    const parts = [timeLeft.days, timeLeft.hours, timeLeft.minutes, timeLeft.seconds];
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      Root24,
+      {
+        ref,
+        $variant: variant,
+        "aria-live": "polite",
+        "aria-label": `Czas do ko\u0144ca promocji`,
+        ...props,
+        children: [
+          label && /* @__PURE__ */ jsxRuntime.jsx(TimerLabel, { $variant: variant, children: label }),
+          /* @__PURE__ */ jsxRuntime.jsx(Segments, { children: parts.map((val, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "contents" }, children: [
+            i > 0 && /* @__PURE__ */ jsxRuntime.jsx(Colon, { $variant: variant, children: ":" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(Segment, { $variant: variant, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Value2, { $variant: variant, children: pad(val) }),
+              variant !== "inline" && /* @__PURE__ */ jsxRuntime.jsx(Unit, { $variant: variant, children: UNITS[i] })
+            ] })
+          ] }, UNITS[i])) })
+        ]
+      }
+    );
+  }
+);
+CountdownTimer.displayName = "CountdownTimer";
+var countdownTimerVariants = ["inline", "card", "banner"];
 var spin2 = styles.keyframes`to { transform: rotate(360deg); }`;
-var Root20 = styles.styled("div")({
+var Root25 = styles.styled("div")({
   display: "flex",
   flexDirection: "column",
   gap: "0.5rem"
@@ -6733,7 +7226,7 @@ function CouponInput({
     if (e.key === "Enter") handleApply();
   };
   if (appliedCode) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(Root20, { className, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root25, { className, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(AppliedRow, { role: "status", "aria-label": `Kod rabatowy ${appliedCode} zastosowany`, children: [
         /* @__PURE__ */ jsxRuntime.jsx(AppliedCode, { children: appliedCode }),
         onRemove && /* @__PURE__ */ jsxRuntime.jsx(
@@ -6752,7 +7245,7 @@ function CouponInput({
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(Root20, { className, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Root25, { className, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(InputRow, { $hasError: Boolean(error), $applied: false, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         Input,
@@ -6784,7 +7277,82 @@ function CouponInput({
     error && /* @__PURE__ */ jsxRuntime.jsx(Message, { $type: "error", id: errorId, role: "alert", children: error })
   ] });
 }
-var Root21 = styles.styled("div")({
+var Root26 = styles.styled("div")({
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.5rem"
+});
+var GroupLabel = styles.styled("span")(({ theme }) => ({
+  fontSize: "0.875rem",
+  fontWeight: 600,
+  color: theme.palette.text.primary,
+  fontFamily: theme.typography.fontFamily
+}));
+var MethodLabel = styles.styled("label", {
+  shouldForwardProp: (prop) => prop !== "$selected"
+})(({ theme, $selected }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: "0.875rem",
+  padding: "0.875rem 1rem",
+  border: `${$selected ? 2 : 1}px solid ${$selected ? theme.palette.primary.main : theme.palette.divider}`,
+  borderRadius: theme.shape.borderRadius,
+  cursor: "pointer",
+  backgroundColor: $selected ? `${theme.palette.primary.main}08` : theme.palette.background.paper,
+  transition: "border-color 150ms ease, background-color 150ms ease",
+  fontFamily: theme.typography.fontFamily,
+  "&:hover": { borderColor: theme.palette.primary.main }
+}));
+var Radio = styles.styled("input")({
+  width: "1rem",
+  height: "1rem",
+  flexShrink: 0,
+  cursor: "pointer"
+});
+var IconWrap = styles.styled("span")(({ theme }) => ({
+  color: theme.palette.text.secondary,
+  display: "flex"
+}));
+var Info = styles.styled("div")({ flex: 1 });
+var Name6 = styles.styled("div")(({ theme }) => ({
+  fontSize: "0.9375rem",
+  fontWeight: 600,
+  color: theme.palette.text.primary
+}));
+var Desc = styles.styled("div")(({ theme }) => ({
+  fontSize: "0.8125rem",
+  color: theme.palette.text.secondary,
+  marginTop: "0.125rem"
+}));
+var PaymentMethodSelector = react.forwardRef(
+  ({ methods, value, onChange, label = "Metoda p\u0142atno\u015Bci", disabled, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root26, { ref, ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(GroupLabel, { children: label }),
+    methods.map((method) => {
+      const selected = value === method.id;
+      return /* @__PURE__ */ jsxRuntime.jsxs(MethodLabel, { $selected: selected, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Radio,
+          {
+            type: "radio",
+            name: "payment",
+            value: method.id,
+            checked: selected,
+            disabled,
+            onChange: () => onChange?.(method.id),
+            "aria-label": method.label
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(IconWrap, { children: method.icon ?? /* @__PURE__ */ jsxRuntime.jsx(CreditCardOutlinedIcon__default.default, { "aria-hidden": true }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Info, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Name6, { children: method.label }),
+          method.description && /* @__PURE__ */ jsxRuntime.jsx(Desc, { children: method.description })
+        ] })
+      ] }, method.id);
+    })
+  ] })
+);
+PaymentMethodSelector.displayName = "PaymentMethodSelector";
+var Root27 = styles.styled("div")({
   display: "grid",
   gap: "0.75rem"
 });
@@ -6822,7 +7390,7 @@ var ProductGallery = react.forwardRef(
     if (!activeImage) {
       return null;
     }
-    return /* @__PURE__ */ jsxRuntime.jsxs(Root21, { ref, ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root27, { ref, ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: "4/3", 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,
@@ -6840,7 +7408,7 @@ var ProductGallery = react.forwardRef(
   }
 );
 ProductGallery.displayName = "ProductGallery";
-var Root22 = styles.styled("div")(({ theme, $variant }) => ({
+var Root28 = styles.styled("div")(({ theme, $variant }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
@@ -6860,14 +7428,14 @@ var Link = styles.styled("a")(({ theme }) => ({
   textUnderlineOffset: "0.2em"
 }));
 var PromoStrip = react.forwardRef(
-  ({ message, actionLabel, href, variant = "info", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root22, { ref, $variant: variant, ...props, children: [
+  ({ message, actionLabel, href, variant = "info", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root28, { ref, $variant: variant, ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { children: message }),
     actionLabel && href && /* @__PURE__ */ jsxRuntime.jsx(Link, { href, children: actionLabel })
   ] })
 );
 PromoStrip.displayName = "PromoStrip";
 var promoStripVariants = ["info", "success", "warning"];
-var Root23 = styles.styled("div")(({ theme }) => ({
+var Root29 = styles.styled("div")(({ theme }) => ({
   display: "inline-grid",
   gridTemplateColumns: "2.25rem 3rem 2.25rem",
   alignItems: "center",
@@ -6889,7 +7457,7 @@ var Control = styles.styled("button")(({ theme }) => ({
     cursor: "not-allowed"
   }
 }));
-var Value2 = styles.styled("span")(({ theme }) => ({
+var Value3 = styles.styled("span")(({ theme }) => ({
   display: "inline-flex",
   alignItems: "center",
   justifyContent: "center",
@@ -6903,7 +7471,7 @@ var QuantitySelector = react.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__ */ jsxRuntime.jsxs(Root23, { ref, "aria-label": "Wybierz ilo\u015B\u0107", ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root29, { ref, "aria-label": "Wybierz ilo\u015B\u0107", ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         Control,
         {
@@ -6914,7 +7482,7 @@ var QuantitySelector = react.forwardRef(
           children: "\u2212"
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(Value2, { "aria-live": "polite", children: value }),
+      /* @__PURE__ */ jsxRuntime.jsx(Value3, { "aria-live": "polite", children: value }),
       /* @__PURE__ */ jsxRuntime.jsx(
         Control,
         {
@@ -6929,6 +7497,207 @@ var QuantitySelector = react.forwardRef(
   }
 );
 QuantitySelector.displayName = "QuantitySelector";
+var Root30 = styles.styled("div")({
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.5rem"
+});
+var GroupLabel2 = styles.styled("span")(({ theme }) => ({
+  fontSize: "0.875rem",
+  fontWeight: 600,
+  color: theme.palette.text.primary,
+  fontFamily: theme.typography.fontFamily
+}));
+var OptionLabel = styles.styled("label", {
+  shouldForwardProp: (prop) => prop !== "$selected"
+})(({ theme, $selected }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: "0.875rem",
+  padding: "0.875rem 1rem",
+  border: `${$selected ? 2 : 1}px solid ${$selected ? theme.palette.primary.main : theme.palette.divider}`,
+  borderRadius: theme.shape.borderRadius,
+  cursor: "pointer",
+  backgroundColor: $selected ? `${theme.palette.primary.main}08` : theme.palette.background.paper,
+  transition: "border-color 150ms ease, background-color 150ms ease",
+  fontFamily: theme.typography.fontFamily,
+  "&:hover": {
+    borderColor: theme.palette.primary.main
+  }
+}));
+var Radio2 = styles.styled("input")({
+  width: "1rem",
+  height: "1rem",
+  flexShrink: 0,
+  cursor: "pointer"
+});
+var IconWrap2 = styles.styled("span")(({ theme }) => ({
+  color: theme.palette.text.secondary,
+  display: "flex"
+}));
+var Info2 = styles.styled("div")({ flex: 1 });
+var Name7 = styles.styled("div")(({ theme }) => ({
+  fontSize: "0.9375rem",
+  fontWeight: 600,
+  color: theme.palette.text.primary
+}));
+var Desc2 = styles.styled("div")(({ theme }) => ({
+  fontSize: "0.8125rem",
+  color: theme.palette.text.secondary,
+  marginTop: "0.125rem"
+}));
+var Price3 = styles.styled("div", {
+  shouldForwardProp: (prop) => prop !== "$selected"
+})(({ theme, $selected }) => ({
+  fontSize: "0.9375rem",
+  fontWeight: 700,
+  color: $selected ? theme.palette.primary.main : theme.palette.text.primary,
+  whiteSpace: "nowrap"
+}));
+var ShippingSelector = react.forwardRef(
+  ({ options, value, onChange, label = "Metoda dostawy", disabled, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root30, { ref, ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(GroupLabel2, { children: label }),
+    options.map((opt) => {
+      const selected = value === opt.id;
+      return /* @__PURE__ */ jsxRuntime.jsxs(OptionLabel, { $selected: selected, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Radio2,
+          {
+            type: "radio",
+            name: "shipping",
+            value: opt.id,
+            checked: selected,
+            disabled,
+            onChange: () => onChange?.(opt.id),
+            "aria-label": opt.label
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(IconWrap2, { children: opt.icon ?? /* @__PURE__ */ jsxRuntime.jsx(LocalShippingOutlinedIcon__default.default, { "aria-hidden": true }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Info2, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Name7, { children: opt.label }),
+          (opt.description || opt.estimatedDays) && /* @__PURE__ */ jsxRuntime.jsxs(Desc2, { children: [
+            opt.description,
+            opt.estimatedDays && ` \xB7 ${opt.estimatedDays}`
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(Price3, { $selected: selected, children: opt.price })
+      ] }, opt.id);
+    })
+  ] })
+);
+ShippingSelector.displayName = "ShippingSelector";
+var DEFAULT_SORT_OPTIONS = [
+  { value: "popular", label: "Najpopularniejsze" },
+  { value: "newest", label: "Najnowsze" },
+  { value: "price-asc", label: "Cena rosn\u0105co" },
+  { value: "price-desc", label: "Cena malej\u0105co" }
+];
+var Root31 = styles.styled("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  flexWrap: "wrap",
+  gap: "0.75rem",
+  padding: "0.75rem 0",
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  fontFamily: theme.typography.fontFamily
+}));
+var TotalLabel = styles.styled("span")(({ theme }) => ({
+  fontSize: "0.875rem",
+  color: theme.palette.text.secondary
+}));
+var Controls = styles.styled("div")({
+  display: "flex",
+  alignItems: "center",
+  gap: "0.75rem"
+});
+var SortLabel = styles.styled("label")(({ theme }) => ({
+  fontSize: "0.875rem",
+  color: theme.palette.text.secondary
+}));
+var Select = styles.styled("select")(({ theme }) => ({
+  padding: "0.375rem 2rem 0.375rem 0.625rem",
+  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.5rem center",
+  "&:focus": { outline: `3px solid ${theme.palette.primary.main}`, outlineOffset: "2px" }
+}));
+var ViewToggle = styles.styled("div")(({ theme }) => ({
+  display: "flex",
+  border: `1px solid ${theme.palette.divider}`,
+  borderRadius: theme.shape.borderRadius,
+  overflow: "hidden"
+}));
+var ViewButton = styles.styled("button", {
+  shouldForwardProp: (prop) => prop !== "$active"
+})(({ theme, $active }) => ({
+  appearance: "none",
+  border: "none",
+  cursor: "pointer",
+  display: "flex",
+  alignItems: "center",
+  padding: "0.375rem 0.5rem",
+  backgroundColor: $active ? theme.palette.primary.main : "transparent",
+  color: $active ? theme.palette.primary.contrastText : theme.palette.text.secondary,
+  transition: "background-color 150ms ease, color 150ms ease",
+  "&:hover:not(:disabled)": {
+    backgroundColor: $active ? theme.palette.primary.dark : theme.palette.action.hover
+  },
+  "&:focus-visible": { outline: `3px solid ${theme.palette.primary.main}`, outlineOffset: "-1px" }
+}));
+var SortBar = react.forwardRef(
+  ({
+    total,
+    totalLabel,
+    sortOptions = DEFAULT_SORT_OPTIONS,
+    sortValue,
+    onSortChange,
+    viewMode = "grid",
+    onViewModeChange,
+    showViewToggle = true,
+    ...props
+  }, ref) => {
+    const resolvedLabel = totalLabel ?? (total !== void 0 ? `Znaleziono ${total} produkt\xF3w` : void 0);
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root31, { ref, ...props, children: [
+      resolvedLabel && /* @__PURE__ */ jsxRuntime.jsx(TotalLabel, { children: resolvedLabel }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Controls, { children: [
+        sortOptions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SortLabel, { htmlFor: "sort-select", children: "Sortuj:" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Select,
+            {
+              id: "sort-select",
+              value: sortValue ?? "",
+              onChange: (e) => onSortChange?.(e.target.value),
+              children: sortOptions.map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt.value, children: opt.label }, opt.value))
+            }
+          )
+        ] }),
+        showViewToggle && /* @__PURE__ */ jsxRuntime.jsx(ViewToggle, { "aria-label": "Tryb widoku", children: ["grid", "list"].map((mode) => /* @__PURE__ */ jsxRuntime.jsx(
+          ViewButton,
+          {
+            type: "button",
+            $active: viewMode === mode,
+            "aria-label": mode === "grid" ? "Widok siatki" : "Widok listy",
+            "aria-pressed": viewMode === mode,
+            onClick: () => onViewModeChange?.(mode),
+            children: mode === "grid" ? /* @__PURE__ */ jsxRuntime.jsx(GridViewIcon__default.default, { "aria-hidden": true, style: { fontSize: 16 } }) : /* @__PURE__ */ jsxRuntime.jsx(ViewListIcon__default.default, { "aria-hidden": true, style: { fontSize: 16 } })
+          },
+          mode
+        )) })
+      ] })
+    ] });
+  }
+);
+SortBar.displayName = "SortBar";
 var COLOR_MAP = {
   "in-stock": "success",
   "low-stock": "warning",
@@ -6950,7 +7719,7 @@ function getDefaultLabel(status, count) {
       return "Dost\u0119pny na zam\xF3wienie";
   }
 }
-var Root24 = styles.styled("div", {
+var Root32 = styles.styled("div", {
   shouldForwardProp: (p) => p !== "$color" && p !== "$size"
 })(({ theme, $color, $size }) => {
   const colorMap = {
@@ -6983,29 +7752,132 @@ var Dot2 = styles.styled("span", {
     width: "0.5rem",
     height: "0.5rem",
     borderRadius: "50%",
-    backgroundColor: colorMap[$color],
-    flexShrink: 0
-  };
-});
-var StockStatus = react.forwardRef(
-  ({ status, count, label, showIcon = true, size = "md", ...props }, ref) => {
-    const color = COLOR_MAP[status];
-    const text = label ?? getDefaultLabel(status, count);
-    return /* @__PURE__ */ jsxRuntime.jsxs(Root24, { ref, $color: color, $size: size, role: "status", "aria-label": text, ...props, children: [
-      showIcon && /* @__PURE__ */ jsxRuntime.jsx(Dot2, { $color: color, "aria-hidden": "true" }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: text })
-    ] });
+    backgroundColor: colorMap[$color],
+    flexShrink: 0
+  };
+});
+var StockStatus = react.forwardRef(
+  ({ status, count, label, showIcon = true, size = "md", ...props }, ref) => {
+    const color = COLOR_MAP[status];
+    const text = label ?? getDefaultLabel(status, count);
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root32, { ref, $color: color, $size: size, role: "status", "aria-label": text, ...props, children: [
+      showIcon && /* @__PURE__ */ jsxRuntime.jsx(Dot2, { $color: color, "aria-hidden": "true" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: text })
+    ] });
+  }
+);
+StockStatus.displayName = "StockStatus";
+var stockStatusValues = [
+  "in-stock",
+  "low-stock",
+  "out-of-stock",
+  "preorder",
+  "backorder"
+];
+var Root33 = styles.styled("div")({
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.5rem"
+});
+var Label4 = styles.styled("span")(({ theme }) => ({
+  fontSize: "0.875rem",
+  fontWeight: 600,
+  color: theme.palette.text.primary,
+  fontFamily: theme.typography.fontFamily
+}));
+var OptionsRow = styles.styled("div")({
+  display: "flex",
+  flexWrap: "wrap",
+  gap: "0.5rem"
+});
+var OptionButton = styles.styled("button", {
+  shouldForwardProp: (prop) => prop !== "$active" && prop !== "$mode"
+})(({ theme, $active, $mode }) => ({
+  appearance: "none",
+  cursor: "pointer",
+  fontFamily: theme.typography.fontFamily,
+  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 = styles.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 = react.forwardRef(
+  ({ label, options, value, onChange, mode = "button", disabled, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root33, { ref, ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Label4, { children: [
+      label,
+      value && mode !== "swatch" && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 400, marginLeft: "0.375rem" }, children: options.find((o) => o.value === value)?.label })
+    ] }),
+    mode === "dropdown" ? /* @__PURE__ */ jsxRuntime.jsx(
+      Select2,
+      {
+        value: value ?? "",
+        onChange: (e) => onChange?.(e.target.value),
+        disabled,
+        "aria-label": label,
+        children: options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(OptionsRow, { role: "radiogroup", "aria-label": label, children: options.map((opt) => /* @__PURE__ */ jsxRuntime.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
+    )) })
+  ] })
 );
-StockStatus.displayName = "StockStatus";
-var stockStatusValues = [
-  "in-stock",
-  "low-stock",
-  "out-of-stock",
-  "preorder",
-  "backorder"
-];
-var Root25 = styles.styled("div")(({ theme }) => ({
+VariantSelector.displayName = "VariantSelector";
+var variantSelectorModes = ["button", "swatch", "dropdown"];
+var Root34 = styles.styled("div")(({ theme }) => ({
   borderBottom: `1px solid ${theme.palette.divider}`
 }));
 var Trigger2 = styles.styled("button")(({ theme }) => ({
@@ -7053,7 +7925,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(Root25, { ref, ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root34, { 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" })
@@ -7129,7 +8001,7 @@ var FeatureItem2 = react.forwardRef(
   }
 );
 FeatureItem2.displayName = "FeatureItem";
-var Root26 = styles.styled("div")({
+var Root35 = styles.styled("div")({
   display: "flex",
   flexDirection: "column",
   alignItems: "center",
@@ -7177,7 +8049,7 @@ var Description5 = styles.styled("p")(({ theme }) => ({
   maxWidth: "18rem"
 }));
 var ProcessStep = react.forwardRef(
-  ({ step, title, description, icon, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root26, { ref, ...props, children: [
+  ({ step, title, description, icon, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root35, { 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(Description5, { children: description })
@@ -7363,7 +8235,7 @@ var Dot3 = styles.styled("span", {
     }
   }
 }));
-var Content2 = styles.styled("div")({ flex: 1, minWidth: 0, paddingTop: "0.0625rem" });
+var Content4 = styles.styled("div")({ flex: 1, minWidth: 0, paddingTop: "0.0625rem" });
 var TitleRow = styles.styled("div")({
   display: "flex",
   alignItems: "baseline",
@@ -7408,7 +8280,7 @@ function TimelineItemComponent({
   const hasIcon = Boolean(item.icon);
   return /* @__PURE__ */ jsxRuntime.jsxs(ItemRow, { $compact: compact, $last: last, children: [
     /* @__PURE__ */ jsxRuntime.jsx(DotCol, { $last: last, children: /* @__PURE__ */ jsxRuntime.jsx(Dot3, { $status: status, $hasIcon: hasIcon, children: item.icon ?? /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { status }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(Content2, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Content4, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(TitleRow, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(Title4, { $compact: compact, children: item.title }),
         item.date && /* @__PURE__ */ jsxRuntime.jsx(Date2, { dateTime: item.date, children: item.date })
@@ -7439,7 +8311,7 @@ var timelineItemStatuses = [
   "pending",
   "error"
 ];
-var Root27 = styles.styled("div")({
+var Root36 = styles.styled("div")({
   position: "relative",
   width: "100%",
   overflow: "hidden",
@@ -7549,7 +8421,7 @@ function Carousel({
   }, [prev, next]);
   if (!count) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Root27, { "aria-roledescription": "carousel", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Root36, { "aria-roledescription": "carousel", children: [
       /* @__PURE__ */ jsxRuntime.jsx(Track4, { $index: index, "aria-live": "polite", children: slides.map((slide, i) => /* @__PURE__ */ jsxRuntime.jsx(
         Slide,
         {
@@ -7933,7 +8805,7 @@ var Breadcrumbs = react.forwardRef(
   }) }) })
 );
 Breadcrumbs.displayName = "Breadcrumbs";
-var sizeMap5 = {
+var sizeMap6 = {
   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" }
@@ -7962,7 +8834,7 @@ var StyledButton2 = styles.styled("button")(({ theme, $isActive, $size }) => ({
   lineHeight: 1,
   padding: "0 0.25rem",
   transition: "background-color 150ms ease",
-  ...sizeMap5[$size],
+  ...sizeMap6[$size],
   ...$isActive ? activeStyles(theme) : idleStyles(theme),
   "&:focus-visible": {
     outline: `3px solid ${theme.palette.primary.main}`,
@@ -7991,7 +8863,7 @@ var PaginationButton = react.forwardRef(
   )
 );
 PaginationButton.displayName = "PaginationButton";
-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" }
@@ -8002,7 +8874,7 @@ var StyledEllipsis = styles.styled("span")(({ theme, $size }) => ({
   justifyContent: "center",
   color: theme.palette.text.secondary,
   userSelect: "none",
-  ...sizeMap6[$size]
+  ...sizeMap7[$size]
 }));
 var PaginationEllipsis = ({ size = "md" }) => /* @__PURE__ */ jsxRuntime.jsx(StyledEllipsis, { $size: size, "aria-hidden": "true", children: "\u2026" });
 PaginationEllipsis.displayName = "PaginationEllipsis";
@@ -8112,7 +8984,7 @@ var PaginationBar = ({
   ] });
 };
 PaginationBar.displayName = "PaginationBar";
-var Root28 = styles.styled("div", {
+var Root37 = styles.styled("div", {
   shouldForwardProp: (p) => p !== "$variant"
 })(({ theme, $variant }) => ({
   width: "100%",
@@ -8222,7 +9094,7 @@ var Accordion = react.forwardRef(
       if (controlledKeys === void 0) setInternalKeys(next);
       onChange?.(next);
     };
-    return /* @__PURE__ */ jsxRuntime.jsx(Root28, { ref, $variant: variant, ...props, children: items.map((item) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(Root37, { 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}`;
@@ -8251,6 +9123,74 @@ 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 Root38 = styles.styled("div", {
+  shouldForwardProp: (prop) => prop !== "$severity"
+})(({ theme, $severity }) => {
+  const c = SEVERITY_COLORS[$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,
+    fontFamily: theme.typography.fontFamily,
+    fontSize: "0.9375rem"
+  };
+});
+var IconSlot2 = styles.styled("span")({
+  flexShrink: 0,
+  display: "flex",
+  paddingTop: "0.0625rem"
+});
+var Body = styles.styled("div")({ flex: 1 });
+var Title5 = styles.styled("div")({
+  fontWeight: 700,
+  marginBottom: "0.25rem"
+});
+var CloseButton2 = styles.styled("button")(({ theme }) => ({
+  appearance: "none",
+  border: "none",
+  background: "transparent",
+  cursor: "pointer",
+  display: "flex",
+  alignItems: "center",
+  padding: "0.125rem",
+  color: "inherit",
+  opacity: 0.6,
+  borderRadius: "0.25rem",
+  flexShrink: 0,
+  "&:hover": { opacity: 1 },
+  "&:focus-visible": {
+    outline: `3px solid ${theme.palette.primary.main}`,
+    outlineOffset: "2px"
+  }
+}));
+var Alert = react.forwardRef(
+  ({ severity = "info", title, children, onClose, icon, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root38, { 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
+    ] }),
+    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 } }) })
+  ] })
+);
+Alert.displayName = "Alert";
+var alertSeverities = ["info", "success", "warning", "error"];
 var fadeIn2 = react$1.keyframes`from{opacity:0;transform:translateY(0.5rem)}to{opacity:1;transform:translateY(0)}`;
 var fadeOut = react$1.keyframes`from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(0.5rem)}`;
 var POSITION_MAP = {
@@ -8490,6 +9430,44 @@ var ContextMenu = react.forwardRef(
   }
 );
 ContextMenu.displayName = "ContextMenu";
+var Root39 = styles.styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "1rem",
+  padding: "3rem 1.5rem",
+  textAlign: "center",
+  fontFamily: theme.typography.fontFamily
+}));
+var IconWrap3 = styles.styled("div")(({ theme }) => ({
+  color: theme.palette.text.disabled,
+  display: "flex",
+  "& svg": { fontSize: "3.5rem" }
+}));
+var Title6 = styles.styled("h3")(({ theme }) => ({
+  margin: 0,
+  fontSize: "1.125rem",
+  fontWeight: 700,
+  color: theme.palette.text.primary
+}));
+var Description7 = styles.styled("p")(({ theme }) => ({
+  margin: 0,
+  fontSize: "0.9375rem",
+  color: theme.palette.text.secondary,
+  maxWidth: "28rem"
+}));
+var EmptyState = react.forwardRef(
+  ({ icon, title, description, action, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root39, { 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 }),
+      description && /* @__PURE__ */ jsxRuntime.jsx(Description7, { style: { marginTop: "0.5rem" }, children: description })
+    ] }),
+    action && /* @__PURE__ */ jsxRuntime.jsx("div", { children: action })
+  ] })
+);
+EmptyState.displayName = "EmptyState";
 var PADDING = {
   sm: "0.5rem 0.75rem",
   md: "0.75rem 1rem",
@@ -8500,7 +9478,7 @@ var FONT_SIZE2 = {
   md: "0.9375rem",
   lg: "1rem"
 };
-var Root29 = styles.styled("ul", {
+var Root40 = styles.styled("ul", {
   shouldForwardProp: (p) => p !== "$variant"
 })(({ theme, $variant }) => ({
   listStyle: "none",
@@ -8595,7 +9573,7 @@ var SuffixWrap = styles.styled("span")({
 var List3 = react.forwardRef(
   ({ items, size = "md", variant = "default", dividers = true, ...props }, ref) => {
     const effectiveVariant = !dividers && variant === "default" ? "default" : variant;
-    return /* @__PURE__ */ jsxRuntime.jsx(Root29, { ref, $variant: effectiveVariant, role: "list", ...props, children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ jsxRuntime.jsx(Root40, { ref, $variant: effectiveVariant, role: "list", ...props, children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
       Item2,
       {
         role: "listitem",
@@ -8634,7 +9612,7 @@ var speedDuration = {
   normal: "20s",
   fast: "10s"
 };
-var Root30 = styles.styled("div")({
+var Root41 = styles.styled("div")({
   overflow: "hidden",
   width: "100%",
   userSelect: "none"
@@ -8665,7 +9643,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(Root30, { ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Track5, { $direction: direction, $speed: speed, $pauseOnHover: pauseOnHover, $gap: gapValue, children: content }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(Root41, { ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Track5, { $direction: direction, $speed: speed, $pauseOnHover: pauseOnHover, $gap: gapValue, children: content }) });
   }
 );
 Marquee.displayName = "Marquee";
@@ -8719,7 +9697,7 @@ var Header = styles.styled("div")(({ theme }) => ({
   borderBottom: `1px solid ${theme.palette.divider}`,
   flexShrink: 0
 }));
-var Title5 = styles.styled("h2")(({ theme }) => ({
+var Title7 = styles.styled("h2")(({ theme }) => ({
   margin: 0,
   fontFamily: theme.typography.fontFamily,
   fontSize: "1.125rem",
@@ -8727,7 +9705,7 @@ var Title5 = styles.styled("h2")(({ theme }) => ({
   color: theme.palette.text.primary,
   lineHeight: 1.4
 }));
-var CloseButton2 = styles.styled("button")(({ theme }) => ({
+var CloseButton3 = styles.styled("button")(({ theme }) => ({
   appearance: "none",
   border: "none",
   background: "none",
@@ -8750,14 +9728,14 @@ var CloseButton2 = styles.styled("button")(({ theme }) => ({
     outlineOffset: "2px"
   }
 }));
-var Body = styles.styled("div")(({ theme }) => ({
+var Body2 = styles.styled("div")(({ theme }) => ({
   padding: "1.5rem",
   overflowY: "auto",
   flex: 1,
   fontFamily: theme.typography.fontFamily,
   color: theme.palette.text.primary
 }));
-var Footer3 = styles.styled("div")(({ theme }) => ({
+var Footer4 = styles.styled("div")(({ theme }) => ({
   padding: "1rem 1.5rem",
   borderTop: `1px solid ${theme.palette.divider}`,
   display: "flex",
@@ -8809,11 +9787,11 @@ function Modal({
         onClick: (e) => e.stopPropagation(),
         children: [
           (title || !hideCloseButton) && /* @__PURE__ */ jsxRuntime.jsxs(Header, { children: [
-            title ? /* @__PURE__ */ jsxRuntime.jsx(Title5, { id: "modal-title", children: title }) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
-            !hideCloseButton && /* @__PURE__ */ jsxRuntime.jsx(CloseButton2, { "aria-label": "Zamknij", onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon__default.default, { "aria-hidden": true, style: { fontSize: 16 } }) })
+            title ? /* @__PURE__ */ jsxRuntime.jsx(Title7, { id: "modal-title", children: title }) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
+            !hideCloseButton && /* @__PURE__ */ jsxRuntime.jsx(CloseButton3, { "aria-label": "Zamknij", onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon__default.default, { "aria-hidden": true, style: { fontSize: 16 } }) })
           ] }),
-          children && /* @__PURE__ */ jsxRuntime.jsx(Body, { children }),
-          footer && /* @__PURE__ */ jsxRuntime.jsx(Footer3, { children: footer })
+          children && /* @__PURE__ */ jsxRuntime.jsx(Body2, { children }),
+          footer && /* @__PURE__ */ jsxRuntime.jsx(Footer4, { children: footer })
         ]
       }
     ) }),
@@ -8821,7 +9799,7 @@ function Modal({
   );
 }
 var modalSizes = ["sm", "md", "lg", "xl", "full"];
-var Root31 = styles.styled("div")({ width: "100%" });
+var Root42 = styles.styled("div")({ width: "100%" });
 var TabList = styles.styled("div", {
   shouldForwardProp: (prop) => prop !== "$variant"
 })(({ theme, $variant }) => ({
@@ -8901,7 +9879,7 @@ var Tabs = react.forwardRef(
       onChange?.(key);
     };
     const activeTab = tabs.find((t) => t.key === activeKey);
-    return /* @__PURE__ */ jsxRuntime.jsxs(Root31, { ref, ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root42, { ref, ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsx(TabList, { role: "tablist", $variant: variant, children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
         TabButton,
         {
@@ -8959,7 +9937,7 @@ var Header2 = styles.styled("div")(({ theme }) => ({
   padding: "1rem 1.25rem",
   borderBottom: `1px solid ${theme.palette.divider}`
 }));
-var Title6 = styles.styled("h2")(({ theme }) => ({
+var Title8 = styles.styled("h2")(({ theme }) => ({
   margin: 0,
   fontSize: "1.125rem",
   color: theme.palette.text.primary
@@ -9022,7 +10000,7 @@ var RemoveButton2 = styles.styled("button")(({ theme }) => ({
   padding: 0,
   fontSize: "0.875rem"
 }));
-var Footer4 = styles.styled("div")(({ theme }) => ({
+var Footer5 = styles.styled("div")(({ theme }) => ({
   display: "grid",
   gap: "1rem",
   marginTop: "auto",
@@ -9044,7 +10022,7 @@ var CartDrawer = react.forwardRef(
     ...props
   }, ref) => /* @__PURE__ */ jsxRuntime.jsx(Overlay3, { $open: open, children: /* @__PURE__ */ jsxRuntime.jsxs(Panel3, { ref, "aria-hidden": !open, "aria-label": title, ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Header2, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Title6, { children: title }),
+      /* @__PURE__ */ jsxRuntime.jsx(Title8, { children: title }),
       /* @__PURE__ */ jsxRuntime.jsx(IconButton, { type: "button", "aria-label": closeLabel, onClick: onClose, children: "\xD7" })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(Items, { children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(Item3, { children: [
@@ -9067,7 +10045,7 @@ var CartDrawer = react.forwardRef(
         ] })
       ] })
     ] }, item.id)) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(Footer4, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Footer5, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Row4, { children: [
         /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Suma" }),
         /* @__PURE__ */ jsxRuntime.jsx("strong", { children: subtotal })
@@ -9077,7 +10055,7 @@ var CartDrawer = react.forwardRef(
   ] }) })
 );
 CartDrawer.displayName = "CartDrawer";
-var Root32 = styles.styled("aside")(({ theme }) => ({
+var Root43 = styles.styled("aside")(({ theme }) => ({
   display: "grid",
   gap: "1.5rem",
   width: "100%",
@@ -9094,7 +10072,7 @@ var Header3 = styles.styled("div")({
   justifyContent: "space-between",
   gap: "1rem"
 });
-var Title7 = styles.styled("h2")(({ theme }) => ({
+var Title9 = styles.styled("h2")(({ theme }) => ({
   margin: 0,
   color: theme.palette.text.primary,
   fontSize: "1.125rem"
@@ -9112,7 +10090,7 @@ var Legend = styles.styled("legend")({
   marginBottom: "0.75rem",
   fontWeight: 800
 });
-var OptionLabel = styles.styled("label")(({ theme }) => ({
+var OptionLabel2 = styles.styled("label")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
@@ -9139,7 +10117,7 @@ var NumberInput2 = styles.styled("input")(({ theme }) => ({
   fontFamily: theme.typography.fontFamily
 }));
 function renderOptions(options, selected, onToggle) {
-  return options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(OptionLabel, { children: [
+  return options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(OptionLabel2, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(OptionText, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
@@ -9169,9 +10147,9 @@ var FilterSidebar = react.forwardRef(
     onPriceRangeChange,
     onClear,
     ...props
-  }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root32, { ref, "aria-label": "Filtry produkt\xF3w", ...props, children: [
+  }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root43, { ref, "aria-label": "Filtry produkt\xF3w", ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Header3, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Title7, { children: "Filtry" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Title9, { children: "Filtry" }),
       onClear && /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", onClick: onClear, children: "Wyczy\u015B\u0107" })
     ] }),
     priceRange && /* @__PURE__ */ jsxRuntime.jsxs(Group, { children: [
@@ -9212,8 +10190,8 @@ var FilterSidebar = react.forwardRef(
   ] })
 );
 FilterSidebar.displayName = "FilterSidebar";
-var Root33 = styles.styled(Card)({ display: "grid", gap: "1rem" });
-var Title8 = styles.styled("h2")(({ theme }) => ({
+var Root44 = styles.styled(Card)({ display: "grid", gap: "1rem" });
+var Title10 = styles.styled("h2")(({ theme }) => ({
   margin: 0,
   fontFamily: theme.typography.fontFamily,
   fontSize: "1.125rem",
@@ -9312,8 +10290,8 @@ var OrderSummary = react.forwardRef(
     ctaLabel = "Przejd\u017A do kasy",
     onCheckout,
     ...props
-  }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root33, { ref, variant: "default", padding: "lg", rounded: "lg", ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Title8, { children: title }),
+  }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root44, { 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 }),
       /* @__PURE__ */ jsxRuntime.jsx(ItemList, { children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(Item4, { children: [
@@ -9364,6 +10342,207 @@ var OrderSummary = react.forwardRef(
   ] })
 );
 OrderSummary.displayName = "OrderSummary";
+var Root45 = styles.styled("div")(({ theme }) => ({
+  fontFamily: theme.typography.fontFamily
+}));
+var Grid2 = styles.styled("div", {
+  shouldForwardProp: (prop) => prop !== "$columns"
+})(({ theme, $columns }) => ({
+  display: "grid",
+  gridTemplateColumns: `repeat(1, 1fr)`,
+  gap: "1.25rem",
+  [theme.breakpoints.up("sm")]: {
+    gridTemplateColumns: `repeat(${Math.min($columns, 2)}, 1fr)`
+  },
+  [theme.breakpoints.up("md")]: {
+    gridTemplateColumns: `repeat(${Math.min($columns, 3)}, 1fr)`
+  },
+  [theme.breakpoints.up("lg")]: {
+    gridTemplateColumns: `repeat(${Math.min($columns, 4)}, 1fr)`
+  }
+}));
+var ScrollTrack = styles.styled("div")({
+  display: "flex",
+  gap: "1.25rem",
+  overflowX: "auto",
+  paddingBottom: "0.5rem",
+  scrollSnapType: "x mandatory",
+  "&::-webkit-scrollbar": { height: "4px" },
+  "&::-webkit-scrollbar-track": { background: "transparent" },
+  "&::-webkit-scrollbar-thumb": { borderRadius: "9999px", background: "rgba(0,0,0,0.2)" },
+  "& > *": {
+    flexShrink: 0,
+    scrollSnapAlign: "start",
+    width: "clamp(220px, 28vw, 280px)"
+  }
+});
+var RelatedProducts = react.forwardRef(
+  ({ products, title = "Podobne produkty", layout = "grid", columns = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root45, { 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)) })
+  ] })
+);
+RelatedProducts.displayName = "RelatedProducts";
+var relatedProductsLayouts = ["grid", "scroll"];
+var Root46 = styles.styled("div")(({ theme }) => ({
+  fontFamily: theme.typography.fontFamily
+}));
+var Summary = styles.styled("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: "2rem",
+  flexWrap: "wrap",
+  padding: "1.5rem",
+  backgroundColor: theme.palette.action.hover,
+  borderRadius: theme.shape.borderRadius,
+  marginBottom: "2rem"
+}));
+var AverageBlock = styles.styled("div")({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  gap: "0.25rem"
+});
+var AverageScore = styles.styled("span")(({ theme }) => ({
+  fontSize: "3rem",
+  fontWeight: 800,
+  lineHeight: 1,
+  color: theme.palette.text.primary
+}));
+var Distribution = styles.styled("div")({ flex: 1, display: "flex", flexDirection: "column", gap: "0.375rem" });
+var DistRow = styles.styled("div")({ display: "flex", alignItems: "center", gap: "0.75rem" });
+var DistLabel = styles.styled("span")(({ theme }) => ({
+  fontSize: "0.8125rem",
+  color: theme.palette.text.secondary,
+  width: "1.5rem",
+  textAlign: "right"
+}));
+var DistBar = styles.styled("div")(({ theme }) => ({
+  flex: 1,
+  height: "0.5rem",
+  borderRadius: "9999px",
+  backgroundColor: theme.palette.divider,
+  overflow: "hidden"
+}));
+var DistFill = styles.styled("div", {
+  shouldForwardProp: (prop) => prop !== "$pct"
+})(({ $pct }) => ({
+  height: "100%",
+  width: `${$pct}%`,
+  backgroundColor: "#f59e0b",
+  borderRadius: "9999px",
+  transition: "width 400ms ease"
+}));
+var ReviewList = styles.styled("div")({
+  display: "flex",
+  flexDirection: "column",
+  gap: "1.5rem"
+});
+var ReviewCard = styles.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 = styles.styled("div")({
+  display: "flex",
+  alignItems: "flex-start",
+  gap: "0.875rem"
+});
+var AuthorInfo2 = styles.styled("div")({ flex: 1 });
+var AuthorName2 = styles.styled("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: "0.375rem",
+  fontSize: "0.9375rem",
+  fontWeight: 700,
+  color: theme.palette.text.primary
+}));
+var ReviewDate = styles.styled("div")(({ theme }) => ({
+  fontSize: "0.8125rem",
+  color: theme.palette.text.secondary,
+  marginTop: "0.125rem"
+}));
+var ReviewTitle = styles.styled("div")(({ theme }) => ({
+  fontSize: "0.9375rem",
+  fontWeight: 700,
+  color: theme.palette.text.primary
+}));
+var ReviewContent = styles.styled("p")(({ theme }) => ({
+  margin: 0,
+  fontSize: "0.9375rem",
+  color: theme.palette.text.secondary,
+  lineHeight: 1.6
+}));
+var HelpfulRow = styles.styled("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: "0.375rem",
+  fontSize: "0.8125rem",
+  color: theme.palette.text.secondary
+}));
+function ReviewItem({ review }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(ReviewCard, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(ReviewHeader, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Avatar,
+        {
+          initials: review.author.slice(0, 2).toUpperCase(),
+          size: "sm"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(AuthorInfo2, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(AuthorName2, { children: [
+          review.author,
+          review.verified && /* @__PURE__ */ jsxRuntime.jsx(VerifiedIcon__default.default, { "aria-label": "Zweryfikowany zakup", style: { fontSize: 14, color: "#16a34a" } })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(ReviewDate, { children: review.date })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(Rating, { value: review.rating, size: "sm", readonly: true })
+    ] }),
+    review.title && /* @__PURE__ */ jsxRuntime.jsx(ReviewTitle, { children: review.title }),
+    /* @__PURE__ */ jsxRuntime.jsx(ReviewContent, { children: review.content }),
+    review.helpfulCount !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs(HelpfulRow, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ThumbUpOutlinedIcon__default.default, { "aria-hidden": true, style: { fontSize: 14 } }),
+      review.helpfulCount,
+      " os\xF3b uzna\u0142o t\u0119 recenzj\u0119 za pomocn\u0105"
+    ] })
+  ] });
+}
+var ReviewSection = react.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__ */ jsxRuntime.jsxs(Root46, { ref, ...props, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SectionHeading, { title, align: "left", style: { marginBottom: "1.5rem" } }),
+      (averageRating !== void 0 || ratingDistribution) && /* @__PURE__ */ jsxRuntime.jsxs(Summary, { children: [
+        averageRating !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs(AverageBlock, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(AverageScore, { children: averageRating.toFixed(1) }),
+          /* @__PURE__ */ jsxRuntime.jsx(Rating, { value: averageRating, size: "sm", readonly: true }),
+          totalReviews !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "0.8125rem", marginTop: "0.25rem" }, children: [
+            totalReviews,
+            " opinii"
+          ] })
+        ] }),
+        ratingDistribution && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(DistRow, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(DistLabel, { children: [
+              star,
+              "\u2605"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(DistBar, { children: /* @__PURE__ */ jsxRuntime.jsx(DistFill, { $pct: pct2 }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(DistLabel, { style: { textAlign: "left" }, children: count })
+          ] }, star);
+        }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(ReviewList, { children: reviews.map((review) => /* @__PURE__ */ jsxRuntime.jsx(ReviewItem, { review }, review.id)) })
+    ] });
+  }
+);
+ReviewSection.displayName = "ReviewSection";
 var List4 = styles.styled("div")(({ $hasHeading }) => ({
   marginTop: $hasHeading ? "2.5rem" : 0
 }));
@@ -9392,7 +10571,7 @@ var FaqSection = react.forwardRef(
   }
 );
 FaqSection.displayName = "FaqSection";
-var Grid2 = styles.styled("div", {
+var Grid3 = styles.styled("div", {
   shouldForwardProp: (prop) => !["$columns", "$hasHeading", "$iconLeft"].includes(prop)
 })(({ theme, $columns, $hasHeading, $iconLeft }) => ({
   display: "grid",
@@ -9421,7 +10600,7 @@ var FeatureGrid = 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(Grid2, { $columns: columns, $hasHeading: hasHeading, $iconLeft: itemLayout === "icon-left", children: features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx(Grid3, { $columns: columns, $hasHeading: hasHeading, $iconLeft: itemLayout === "icon-left", children: features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsx(
         FeatureItem2,
         {
           feature,
@@ -9435,7 +10614,7 @@ var FeatureGrid = react.forwardRef(
 );
 FeatureGrid.displayName = "FeatureGrid";
 var featureGridColumns = [2, 3, 4];
-var Grid3 = styles.styled("div", {
+var Grid4 = styles.styled("div", {
   shouldForwardProp: (prop) => !["$columns", "$hasHeading"].includes(prop)
 })(({ theme, $columns, $hasHeading }) => ({
   display: "grid",
@@ -9467,7 +10646,7 @@ var LogoCloud = react.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsx(Section, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { maxWidth, children: [
       hasHeading && title && /* @__PURE__ */ jsxRuntime.jsx(SectionHeading, { title, description, align: headingAlign }),
       hasHeading && !title && description && /* @__PURE__ */ jsxRuntime.jsx(SectionHeading, { title: description, align: headingAlign, as: "h2" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Grid3, { $columns: columns, $hasHeading: hasHeading, children: logos.map((logo) => {
+      /* @__PURE__ */ jsxRuntime.jsx(Grid4, { $columns: columns, $hasHeading: hasHeading, children: logos.map((logo) => {
         const key = `${logo.name}-${logo.href ?? logo.logoUrl ?? "text"}`;
         return /* @__PURE__ */ jsxRuntime.jsx(
           LogoTile,
@@ -9617,12 +10796,12 @@ var Section2 = styles.styled("section")(({ theme }) => ({
   padding: "5rem 1rem",
   backgroundColor: theme.palette.background.default
 }));
-var Inner = styles.styled("div")({
+var Inner2 = styles.styled("div")({
   maxWidth: "80rem",
   marginLeft: "auto",
   marginRight: "auto"
 });
-var Grid4 = styles.styled("div")(({ theme }) => ({
+var Grid5 = styles.styled("div")(({ theme }) => ({
   marginTop: "3rem",
   display: "grid",
   gridTemplateColumns: "1fr",
@@ -9635,16 +10814,16 @@ var Grid4 = styles.styled("div")(({ theme }) => ({
   }
 }));
 function PricingSection({ title, description, plans, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Section2, { ...props, children: /* @__PURE__ */ jsxRuntime.jsxs(Inner, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Section2, { ...props, children: /* @__PURE__ */ jsxRuntime.jsxs(Inner2, { children: [
     (title || description) && /* @__PURE__ */ jsxRuntime.jsx(SectionHeading, { title: title ?? "", description, align: "center" }),
-    /* @__PURE__ */ jsxRuntime.jsx(Grid4, { children: plans.map((plan, i) => /* @__PURE__ */ jsxRuntime.jsx(PricingCard, { ...plan }, i)) })
+    /* @__PURE__ */ jsxRuntime.jsx(Grid5, { children: plans.map((plan, i) => /* @__PURE__ */ jsxRuntime.jsx(PricingCard, { ...plan }, i)) })
   ] }) });
 }
 var Section3 = styles.styled("section")(({ theme }) => ({
   padding: "5rem 1rem",
   backgroundColor: theme.palette.background.default
 }));
-var Inner2 = styles.styled("div")({
+var Inner3 = styles.styled("div")({
   maxWidth: "80rem",
   marginLeft: "auto",
   marginRight: "auto"
@@ -9682,7 +10861,7 @@ function ArrowIcon() {
   return /* @__PURE__ */ jsxRuntime.jsx(ArrowForwardIcon__default.default, { "aria-hidden": "true", style: { fontSize: 24 } });
 }
 function ProcessSection({ title, description, steps, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Section3, { ...props, children: /* @__PURE__ */ jsxRuntime.jsxs(Inner2, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Section3, { ...props, children: /* @__PURE__ */ jsxRuntime.jsxs(Inner3, { children: [
     (title || description) && /* @__PURE__ */ jsxRuntime.jsx(SectionHeading, { title: title ?? "", description, align: "center" }),
     /* @__PURE__ */ jsxRuntime.jsx(StepsRow, { children: steps.map((step, i) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(StepWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -9698,7 +10877,7 @@ function ProcessSection({ title, description, steps, ...props }) {
     ] }, i)) })
   ] }) });
 }
-var Grid5 = styles.styled("div", {
+var Grid6 = styles.styled("div", {
   shouldForwardProp: (prop) => !["$columns", "$hasHeading"].includes(prop)
 })(({ theme, $columns, $hasHeading }) => ({
   display: "grid",
@@ -9727,7 +10906,7 @@ var StatsSection = 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(Grid5, { $columns: columns, $hasHeading: hasHeading, children: stats.map((stat, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx(Grid6, { $columns: columns, $hasHeading: hasHeading, children: stats.map((stat, index) => /* @__PURE__ */ jsxRuntime.jsx(
         StatCard,
         {
           stat,
@@ -9741,7 +10920,7 @@ var StatsSection = react.forwardRef(
 );
 StatsSection.displayName = "StatsSection";
 var statsSectionColumns = [2, 3, 4];
-var Grid6 = styles.styled("div", {
+var Grid7 = styles.styled("div", {
   shouldForwardProp: (prop) => !["$columns", "$hasHeading"].includes(prop)
 })(({ theme, $columns, $hasHeading }) => ({
   display: "grid",
@@ -9770,7 +10949,7 @@ var TeamSection = react.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsx(Section, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { maxWidth, children: [
       hasHeading && title && /* @__PURE__ */ jsxRuntime.jsx(SectionHeading, { title, description, align: headingAlign }),
       hasHeading && !title && description && /* @__PURE__ */ jsxRuntime.jsx(SectionHeading, { title: description, align: headingAlign, as: "h2" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Grid6, { $columns: columns, $hasHeading: hasHeading, children: members.map((member) => /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx(Grid7, { $columns: columns, $hasHeading: hasHeading, children: members.map((member) => /* @__PURE__ */ jsxRuntime.jsx(
         TeamMemberCard,
         {
           member,
@@ -9783,7 +10962,7 @@ var TeamSection = react.forwardRef(
 );
 TeamSection.displayName = "TeamSection";
 var teamSectionColumns = [2, 3, 4];
-var Grid7 = styles.styled("div", {
+var Grid8 = styles.styled("div", {
   shouldForwardProp: (prop) => !["$columns", "$hasHeading"].includes(prop)
 })(({ theme, $columns, $hasHeading }) => ({
   display: "grid",
@@ -9811,7 +10990,7 @@ var TestimonialsSection = 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(Grid7, { $columns: columns, $hasHeading: hasHeading, children: testimonials.map((testimonial, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx(Grid8, { $columns: columns, $hasHeading: hasHeading, children: testimonials.map((testimonial, index) => /* @__PURE__ */ jsxRuntime.jsx(
         TestimonialCard,
         {
           testimonial,
@@ -9896,7 +11075,7 @@ var ResultsScroll = styles.styled("div")({
   flex: 1,
   padding: "0.375rem 0"
 });
-var GroupLabel = styles.styled("div")(({ theme }) => ({
+var GroupLabel3 = styles.styled("div")(({ theme }) => ({
   padding: "0.5rem 1rem 0.25rem",
   fontFamily: theme.typography.fontFamily,
   fontSize: "0.75rem",
@@ -9964,14 +11143,14 @@ var Kbd = styles.styled("kbd")(({ theme }) => ({
   backgroundColor: theme.palette.action.hover,
   lineHeight: 1.6
 }));
-var EmptyState = styles.styled("div")(({ theme }) => ({
+var EmptyState2 = styles.styled("div")(({ theme }) => ({
   padding: "2.5rem 1rem",
   textAlign: "center",
   fontFamily: theme.typography.fontFamily,
   fontSize: "0.9375rem",
   color: theme.palette.text.secondary
 }));
-var Footer5 = styles.styled("div")(({ theme }) => ({
+var Footer6 = styles.styled("div")(({ theme }) => ({
   display: "flex",
   gap: "1.25rem",
   padding: "0.5rem 1rem",
@@ -10098,8 +11277,8 @@ function CommandPalette({
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(KbdHint, { children: "esc" })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(ResultsScroll, { id: `${id}-listbox`, role: "listbox", "aria-label": "Wyniki", children: flat.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(EmptyState, { children: emptyLabel }) : filtered.map((group) => /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "group", "aria-labelledby": `${id}-group-${group.id}`, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(GroupLabel, { id: `${id}-group-${group.id}`, children: group.label }),
+              /* @__PURE__ */ jsxRuntime.jsx(ResultsScroll, { id: `${id}-listbox`, role: "listbox", "aria-label": "Wyniki", children: flat.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(EmptyState2, { children: emptyLabel }) : filtered.map((group) => /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "group", "aria-labelledby": `${id}-group-${group.id}`, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(GroupLabel3, { id: `${id}-group-${group.id}`, children: group.label }),
                 group.items.map((item) => {
                   const idx = globalIndex++;
                   const isActive = idx === activeIndex;
@@ -10126,7 +11305,7 @@ function CommandPalette({
                   );
                 })
               ] }, group.id)) }),
-              /* @__PURE__ */ jsxRuntime.jsxs(Footer5, { id: `${id}-hint`, "aria-hidden": "true", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(Footer6, { id: `${id}-hint`, "aria-hidden": "true", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs(FooterHint, { children: [
                   /* @__PURE__ */ jsxRuntime.jsx(Kbd, { children: "\u2191" }),
                   /* @__PURE__ */ jsxRuntime.jsx(Kbd, { children: "\u2193" }),
@@ -10185,7 +11364,7 @@ var Bar2 = styles.styled("div")(({ theme }) => ({
   boxShadow: "0 -4px 24px rgba(0,0,0,0.12)",
   animation: `${slideUp2} 300ms cubic-bezier(0.16, 1, 0.3, 1)`
 }));
-var Inner3 = styles.styled("div")({
+var Inner4 = styles.styled("div")({
   maxWidth: "72rem",
   margin: "0 auto",
   padding: "1.25rem 1.5rem",
@@ -10200,7 +11379,7 @@ var TopRow = styles.styled("div")({
   flexWrap: "wrap"
 });
 var TextBlock = styles.styled("div")({ flex: 1, minWidth: "16rem" });
-var Title9 = styles.styled("p")(({ theme }) => ({
+var Title11 = styles.styled("p")(({ theme }) => ({
   margin: "0 0 0.25rem",
   fontFamily: theme.typography.fontFamily,
   fontSize: "1rem",
@@ -10208,7 +11387,7 @@ var Title9 = styles.styled("p")(({ theme }) => ({
   color: theme.palette.text.primary,
   lineHeight: 1.4
 }));
-var Description7 = styles.styled("p")(({ theme }) => ({
+var Description8 = styles.styled("p")(({ theme }) => ({
   margin: 0,
   fontFamily: theme.typography.fontFamily,
   fontSize: "0.875rem",
@@ -10362,11 +11541,11 @@ function CookieConsent({
     onSave?.(prefs);
   };
   return reactDom.createPortal(
-    /* @__PURE__ */ jsxRuntime.jsx(Bar2, { role: "region", "aria-label": "Zgoda na pliki cookie", "aria-live": "polite", children: /* @__PURE__ */ jsxRuntime.jsxs(Inner3, { children: [
+    /* @__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.jsx(Title9, { children: title }),
-          /* @__PURE__ */ jsxRuntime.jsxs(Description7, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Title11, { children: title }),
+          /* @__PURE__ */ jsxRuntime.jsxs(Description8, { children: [
             description,
             privacyPolicyLabel && privacyPolicyHref && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
               " ",
@@ -10416,12 +11595,12 @@ function CookieConsent({
   );
 }
 var defaultCookieCategories = DEFAULT_CATEGORIES;
-var Root34 = styles.styled("footer")(({ theme }) => ({
+var Root47 = styles.styled("footer")(({ theme }) => ({
   width: "100%",
   backgroundColor: theme.palette.background.paper,
   borderTop: `1px solid ${theme.palette.divider}`
 }));
-var Inner4 = styles.styled("div")({
+var Inner5 = styles.styled("div")({
   maxWidth: "72rem",
   margin: "0 auto",
   padding: "3rem 1.5rem 2rem"
@@ -10443,7 +11622,7 @@ var BrandBlock = styles.styled("div")({
   flexDirection: "column",
   gap: "0.75rem"
 });
-var Description8 = styles.styled("p")(({ theme }) => ({
+var Description9 = styles.styled("p")(({ theme }) => ({
   margin: 0,
   fontFamily: theme.typography.fontFamily,
   fontSize: "0.875rem",
@@ -10549,7 +11728,7 @@ var SOCIAL_ICONS = {
     /* @__PURE__ */ jsxRuntime.jsx("polygon", { fill: "white", points: "9.75 15.02 15.5 12 9.75 8.98 9.75 15.02" })
   ] })
 };
-function Footer6({
+function Footer7({
   logo,
   description,
   columns = [],
@@ -10557,11 +11736,11 @@ function Footer6({
   copyright
 }) {
   const colCount = columns.length;
-  return /* @__PURE__ */ jsxRuntime.jsx(Root34, { children: /* @__PURE__ */ jsxRuntime.jsxs(Inner4, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Root47, { children: /* @__PURE__ */ jsxRuntime.jsxs(Inner5, { children: [
     (logo || description || colCount > 0) && /* @__PURE__ */ jsxRuntime.jsxs(TopRow2, { style: { "--col-count": colCount }, children: [
       (logo || description) && /* @__PURE__ */ jsxRuntime.jsxs(BrandBlock, { children: [
         logo,
-        description && /* @__PURE__ */ jsxRuntime.jsx(Description8, { children: description })
+        description && /* @__PURE__ */ jsxRuntime.jsx(Description9, { children: description })
       ] }),
       columns.map((col) => /* @__PURE__ */ jsxRuntime.jsxs(Column, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(ColumnTitle, { children: col.title }),
@@ -10584,7 +11763,7 @@ function Footer6({
     ] })
   ] }) });
 }
-var Root35 = styles.styled("header", {
+var Root48 = styles.styled("header", {
   shouldForwardProp: (p) => p !== "$sticky" && p !== "$variant"
 })(({ theme, $sticky, $variant }) => ({
   position: $sticky ? "sticky" : "relative",
@@ -10595,15 +11774,17 @@ var Root35 = styles.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 Inner5 = styles.styled("div")({
-  maxWidth: "72rem",
+var Inner6 = styles.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 = styles.styled("div")({
   flexShrink: 0,
   display: "flex",
@@ -10699,11 +11880,12 @@ function Navbar({
   navItems = [],
   actions,
   sticky = false,
-  variant = "filled"
+  variant = "filled",
+  maxWidth = "72rem"
 }) {
   const [mobileOpen, setMobileOpen] = react.useState(false);
-  return /* @__PURE__ */ jsxRuntime.jsxs(Root35, { $sticky: sticky, $variant: variant, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Inner5, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Root48, { $sticky: sticky, $variant: variant, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Inner6, { $maxWidth: maxWidth, 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)) }),
       (actions || navItems.length > 0) && /* @__PURE__ */ jsxRuntime.jsxs(RightSlot, { children: [
@@ -10823,17 +12005,18 @@ var MyThemeProvider = ({
     }
   }, [theme, mode]);
   return /* @__PURE__ */ jsxRuntime.jsxs(styles.ThemeProvider, { theme: resolvedTheme, children: [
-    !disableCssBaseline && /* @__PURE__ */ jsxRuntime.jsx(CssBaseline__default.default, {}),
+    !disableCssBaseline && /* @__PURE__ */ jsxRuntime.jsx(material.CssBaseline, {}),
     children
   ] });
 };
 
 exports.Accordion = Accordion;
+exports.Alert = Alert;
 exports.Article = Article;
 exports.AspectRatio = AspectRatio;
 exports.Avatar = Avatar;
 exports.BackToTop = BackToTop;
-exports.Badge = Badge;
+exports.Badge = Badge2;
 exports.BaseInput = BaseInput;
 exports.BaseSelectInput = BaseSelectInput;
 exports.Box = Box2;
@@ -10841,24 +12024,28 @@ exports.Breadcrumbs = Breadcrumbs;
 exports.Button = Button;
 exports.Card = Card;
 exports.Carousel = Carousel;
+exports.CartButton = CartButton;
 exports.CartDrawer = CartDrawer;
+exports.CategoryCard = CategoryCard;
 exports.CheckboxInput = CheckboxInput;
 exports.CommandPalette = CommandPalette;
 exports.CompareTool = CompareTool;
 exports.Container = Container;
 exports.ContextMenu = ContextMenu;
 exports.CookieConsent = CookieConsent;
+exports.CountdownTimer = CountdownTimer;
 exports.CountryFlag = CountryFlag;
 exports.CouponInput = CouponInput;
 exports.DateTimePicker = DateTimePicker;
 exports.EmailInput = EmailInput;
+exports.EmptyState = EmptyState;
 exports.FaqItem = FaqItem;
 exports.FaqSection = FaqSection;
 exports.FeatureGrid = FeatureGrid;
 exports.FeatureItem = FeatureItem2;
 exports.FileInput = FileInput;
 exports.FilterSidebar = FilterSidebar;
-exports.Footer = Footer6;
+exports.Footer = Footer7;
 exports.Lightbox = Lightbox;
 exports.List = List3;
 exports.LogoCloud = LogoCloud;
@@ -10877,6 +12064,7 @@ exports.PaginationButton = PaginationButton;
 exports.PaginationEllipsis = PaginationEllipsis;
 exports.Partners = Partners;
 exports.PasswordInput = PasswordInput;
+exports.PaymentMethodSelector = PaymentMethodSelector;
 exports.PhoneInput = PhoneInput;
 exports.PostCard = PostCard;
 exports.PostCardImage = PostCardImage;
@@ -10887,6 +12075,7 @@ exports.PricingSection = PricingSection;
 exports.ProcessSection = ProcessSection;
 exports.ProcessStep = ProcessStep;
 exports.ProductCard = ProductCard;
+exports.ProductCardHorizontal = ProductCardHorizontal;
 exports.ProductGallery = ProductGallery;
 exports.ProgressBar = ProgressBar;
 exports.ProgressCircle = ProgressCircle;
@@ -10895,11 +12084,16 @@ exports.Prose = Prose;
 exports.QuantitySelector = QuantitySelector;
 exports.RangeSlider = RangeSlider;
 exports.Rating = Rating;
+exports.RelatedProducts = RelatedProducts;
+exports.ReviewSection = ReviewSection;
+exports.SaleBadge = SaleBadge;
 exports.SearchInput = SearchInput;
 exports.Section = Section;
 exports.SectionHeading = SectionHeading;
 exports.SelectInput = SelectInput;
+exports.ShippingSelector = ShippingSelector;
 exports.Skeleton = Skeleton;
+exports.SortBar = SortBar;
 exports.Spinner = Spinner3;
 exports.StatCard = StatCard;
 exports.StatsSection = StatsSection;
@@ -10913,8 +12107,11 @@ exports.TestimonialsSection = TestimonialsSection;
 exports.TextInput = TextInput;
 exports.TextareaInput = TextareaInput;
 exports.Timeline = Timeline;
+exports.VariantSelector = VariantSelector;
 exports.VideoPlayer = VideoPlayer;
+exports.WishlistButton = WishlistButton;
 exports.accordionVariants = accordionVariants;
+exports.alertSeverities = alertSeverities;
 exports.aspectRatioPresets = aspectRatioPresets;
 exports.avatarColors = avatarColors;
 exports.avatarSizes = avatarSizes;
@@ -10924,6 +12121,7 @@ exports.badgeVariants = badgeVariants;
 exports.cardPaddings = cardPaddings;
 exports.cardRoundeds = cardRoundeds;
 exports.cardVariants = cardVariants;
+exports.countdownTimerVariants = countdownTimerVariants;
 exports.createMyTheme = createMyTheme;
 exports.dateTimePickerModes = dateTimePickerModes;
 exports.defaultCookieCategories = defaultCookieCategories;
@@ -10946,6 +12144,8 @@ exports.progressCircleSizes = progressCircleSizes;
 exports.progressCircleVariants = progressCircleVariants;
 exports.promoStripVariants = promoStripVariants;
 exports.rangeSliderSizes = rangeSliderSizes;
+exports.relatedProductsLayouts = relatedProductsLayouts;
+exports.saleBadgeVariants = saleBadgeVariants;
 exports.sectionHeadingAligns = sectionHeadingAligns;
 exports.skeletonVariants = skeletonVariants;
 exports.spinnerColors = spinnerColors;
@@ -10962,5 +12162,6 @@ exports.themeHighContrast = themeHighContrast;
 exports.themeLight = themeLight;
 exports.timelineItemStatuses = timelineItemStatuses;
 exports.timelineVariants = timelineVariants;
+exports.variantSelectorModes = variantSelectorModes;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map