@szymonpiatek/designsystem 0.0.10 → 0.0.11

package/dist/index.js

@@ -33,6 +33,7 @@ import CreditCardOutlinedIcon from '@mui/icons-material/CreditCardOutlined';
 import LocalShippingOutlinedIcon from '@mui/icons-material/LocalShippingOutlined';
 import GridViewIcon from '@mui/icons-material/GridView';
 import ViewListIcon from '@mui/icons-material/ViewList';
+import ThumbUpIcon from '@mui/icons-material/ThumbUp';
 import ThumbUpOutlinedIcon from '@mui/icons-material/ThumbUpOutlined';
 import ReplyIcon from '@mui/icons-material/Reply';
 import { createPortal } from 'react-dom';
@@ -524,6 +525,87 @@ var CheckboxInput = forwardRef(
   }
 );
 CheckboxInput.displayName = "CheckboxInput";
+var radioSizeMap = {
+  sm: "14px",
+  md: "16px",
+  lg: "20px"
+};
+var labelFontSizeMap2 = {
+  sm: "0.75rem",
+  md: "0.875rem",
+  lg: "1rem"
+};
+var checkedColor2 = (theme, error) => error ? theme.palette.error.main : theme.palette.primary.main;
+var Circle = styled("span")(({ theme, $size, $error, $disabled }) => ({
+  position: "relative",
+  flexShrink: 0,
+  width: radioSizeMap[$size],
+  height: radioSizeMap[$size],
+  borderRadius: "50%",
+  border: "1px solid",
+  borderColor: $disabled ? theme.palette.action.disabled : $error ? theme.palette.error.main : theme.palette.divider,
+  backgroundColor: $disabled ? theme.palette.action.disabledBackground : theme.palette.background.paper,
+  transition: "border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  ...!$disabled && {
+    "label:hover &": {
+      borderColor: $error ? theme.palette.error.dark : theme.palette.text.secondary
+    },
+    "label:has(input:checked) &": {
+      borderColor: checkedColor2(theme, $error),
+      backgroundColor: checkedColor2(theme, $error)
+    },
+    "label:has(input:focus-visible) &": {
+      boxShadow: `0 0 0 3px ${checkedColor2(theme, $error)}33`
+    }
+  }
+}));
+var HiddenInput2 = styled("input")({
+  position: "absolute",
+  width: 1,
+  height: 1,
+  margin: -1,
+  overflow: "hidden",
+  clip: "rect(0 0 0 0)",
+  whiteSpace: "nowrap",
+  borderWidth: 0
+});
+var Row2 = styled("label")(({ theme }) => ({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "0.5rem",
+  cursor: "inherit",
+  fontFamily: theme.typography.fontFamily
+}));
+var LabelText2 = styled("span")(
+  ({ theme, $size, $disabled, $error }) => ({
+    fontSize: labelFontSizeMap2[$size],
+    fontWeight: 400,
+    color: $disabled ? theme.palette.action.disabled : $error ? theme.palette.error.main : theme.palette.text.primary,
+    userSelect: "none"
+  })
+);
+var Root5 = styled("span")(({ $disabled }) => ({
+  display: "inline-flex",
+  flexDirection: "column",
+  cursor: $disabled ? "not-allowed" : "pointer"
+}));
+var RadioInput = forwardRef(
+  ({ label, helperText, error = false, size = "md", disabled = false, id, ...rest }, ref) => {
+    const autoId = useId();
+    const inputId = id ?? autoId;
+    return /* @__PURE__ */ jsxs(Root5, { $disabled: disabled, children: [
+      /* @__PURE__ */ jsxs(Row2, { htmlFor: inputId, children: [
+        /* @__PURE__ */ jsx(Circle, { $size: size, $error: error, $disabled: disabled, children: /* @__PURE__ */ jsx(HiddenInput2, { ref, id: inputId, type: "radio", disabled, ...rest }) }),
+        label && /* @__PURE__ */ jsx(LabelText2, { $size: size, $disabled: disabled, $error: error, children: label })
+      ] }),
+      helperText && /* @__PURE__ */ jsx(HelperText, { error, children: helperText })
+    ] });
+  }
+);
+RadioInput.displayName = "RadioInput";
 var formatSize = (bytes) => {
   if (bytes < 1024) return `${bytes} B`;
   if (bytes < 1024 ** 2) return `${(bytes / 1024).toFixed(1)} KB`;
@@ -534,11 +616,11 @@ var CloudUploadIcon = ({ size }) => /* @__PURE__ */ jsx(CloudUploadMuiIcon, { "a
 var FileDocIcon = ({ size }) => /* @__PURE__ */ jsx(InsertDriveFileIcon, { "aria-hidden": true, style: { fontSize: size } });
 var TrashIcon = ({ size = 12 }) => /* @__PURE__ */ jsx(DeleteOutlinedIcon, { "aria-hidden": true, style: { fontSize: size } });
 var XIcon = () => /* @__PURE__ */ jsx(CloseIcon, { "aria-hidden": true, style: { fontSize: 11 } });
-var Root5 = styled("div")(({ $fullWidth }) => ({
+var Root6 = styled("div")(({ $fullWidth }) => ({
   display: $fullWidth ? "block" : "inline-block",
   width: $fullWidth ? "100%" : "auto"
 }));
-var HiddenInput2 = styled("input")({
+var HiddenInput3 = styled("input")({
   position: "absolute",
   width: 1,
   height: 1,
@@ -1012,7 +1094,7 @@ var FileInput = forwardRef(
     const ds = dropzoneSizes[size];
     const compactLabel = hasFiles ? files.length === 1 ? files[0].name : filesSelectedLabel(files.length) : noFileLabel;
     const hiddenInput = /* @__PURE__ */ jsx(
-      HiddenInput2,
+      HiddenInput3,
       {
         ref: assignRef,
         id: inputId,
@@ -1024,7 +1106,7 @@ var FileInput = forwardRef(
       }
     );
     if (variant === "dropzone") {
-      return /* @__PURE__ */ jsxs(Root5, { $fullWidth: fullWidth, children: [
+      return /* @__PURE__ */ jsxs(Root6, { $fullWidth: fullWidth, children: [
         label && /* @__PURE__ */ jsx(Label, { htmlFor: inputId, error, size, children: label }),
         /* @__PURE__ */ jsxs(
           DropzoneArea,
@@ -1152,7 +1234,7 @@ var FileInput = forwardRef(
         helperText && /* @__PURE__ */ jsx(HelperText, { error, children: helperText })
       ] });
     }
-    return /* @__PURE__ */ jsxs(Root5, { $fullWidth: fullWidth, children: [
+    return /* @__PURE__ */ jsxs(Root6, { $fullWidth: fullWidth, children: [
       label && /* @__PURE__ */ jsx(Label, { htmlFor: inputId, error, size, children: label }),
       /* @__PURE__ */ jsxs(
         CompactWrapper,
@@ -1271,7 +1353,7 @@ var triggerColors = (theme, error, open) => ({
     borderColor: error ? theme.palette.error.dark : theme.palette.text.secondary
   }
 });
-var Root6 = styled("div")(({ $fullWidth }) => ({
+var Root7 = styled("div")(({ $fullWidth }) => ({
   display: $fullWidth ? "block" : "inline-block",
   width: $fullWidth ? "100%" : "auto",
   position: "relative"
@@ -1388,7 +1470,7 @@ var BaseSelectInput = ({
   }, [isOpen, close]);
   const selectedLabel = options.find((o) => o.value === value)?.label;
   const defaultTriggerContent = /* @__PURE__ */ jsx("span", { style: { opacity: selectedLabel ? 1 : 0.5 }, children: selectedLabel ?? placeholder });
-  return /* @__PURE__ */ jsxs(Root6, { $fullWidth: fullWidth, ref: rootRef, children: [
+  return /* @__PURE__ */ jsxs(Root7, { $fullWidth: fullWidth, ref: rootRef, children: [
     label && /* @__PURE__ */ jsx(Label, { htmlFor: inputId, error, size, children: label }),
     /* @__PURE__ */ jsxs(
       Trigger,
@@ -1668,7 +1750,7 @@ var borderColors = (theme, error) => ({
     boxShadow: `0 0 0 3px ${error ? theme.palette.error.main : theme.palette.primary.main}33`
   }
 });
-var Root7 = styled("div")(({ $fullWidth }) => ({
+var Root8 = styled("div")(({ $fullWidth }) => ({
   display: $fullWidth ? "block" : "inline-block",
   width: $fullWidth ? "100%" : "auto"
 }));
@@ -1709,7 +1791,7 @@ var TextareaInput = forwardRef(
   }, ref) => {
     const autoId = useId();
     const inputId = id ?? autoId;
-    return /* @__PURE__ */ jsxs(Root7, { $fullWidth: fullWidth, children: [
+    return /* @__PURE__ */ jsxs(Root8, { $fullWidth: fullWidth, children: [
       label && /* @__PURE__ */ jsx(Label, { htmlFor: inputId, error, size, children: label }),
       /* @__PURE__ */ jsx(
         StyledTextarea,
@@ -3347,7 +3429,7 @@ var wrapperColors = (theme, error, focused) => ({
     borderColor: !focused ? error ? theme.palette.error.dark : theme.palette.text.secondary : void 0
   }
 });
-var Root8 = styled("div")(({ $fullWidth }) => ({
+var Root9 = styled("div")(({ $fullWidth }) => ({
   display: $fullWidth ? "block" : "inline-block",
   width: $fullWidth ? "100%" : "auto"
 }));
@@ -3603,7 +3685,7 @@ var PhoneInput = forwardRef(
       return () => document.removeEventListener("mousedown", handler);
     }, [isOpen, close]);
     const derivedPlaceholder = placeholder ?? (activeCountry.minLength === activeCountry.maxLength ? `${activeCountry.maxLength} ${digitsLabel}` : `${activeCountry.minLength}\u2013${activeCountry.maxLength} ${digitsLabel}`);
-    return /* @__PURE__ */ jsxs(Root8, { $fullWidth: fullWidth, ref: rootRef, children: [
+    return /* @__PURE__ */ jsxs(Root9, { $fullWidth: fullWidth, ref: rootRef, children: [
       label && /* @__PURE__ */ jsx(Label, { htmlFor: inputId, error, size, children: label }),
       /* @__PURE__ */ jsxs(
         InputWrapper2,
@@ -3715,19 +3797,19 @@ function getActiveColor(color, theme) {
       return theme.palette.primary.main;
   }
 }
-var Root9 = styled("span")(({ $disabled }) => ({
+var Root10 = styled("span")(({ $disabled }) => ({
   display: "inline-flex",
   flexDirection: "column",
   cursor: $disabled ? "not-allowed" : "pointer"
 }));
-var Row2 = styled("label")(({ $placement }) => ({
+var Row3 = styled("label")(({ $placement }) => ({
   display: "inline-flex",
   alignItems: "center",
   flexDirection: $placement === "start" ? "row-reverse" : "row",
   gap: "0.5rem",
   cursor: "inherit"
 }));
-var HiddenInput3 = styled("input")({
+var HiddenInput4 = styled("input")({
   position: "absolute",
   width: 1,
   height: 1,
@@ -3778,7 +3860,7 @@ var Thumb = styled("span", {
     transform: "scale(1.1)"
   }
 }));
-var LabelText2 = styled("span")(
+var LabelText3 = styled("span")(
   ({ theme, $size, $disabled, $error }) => ({
     fontSize: FONT_S[$size],
     color: $disabled ? theme.palette.action.disabled : $error ? theme.palette.error.main : theme.palette.text.primary,
@@ -3800,11 +3882,11 @@ var SwitchInput = forwardRef(
   }, ref) => {
     const autoId = useId();
     const inputId = id ?? autoId;
-    return /* @__PURE__ */ jsxs(Root9, { $disabled: disabled, children: [
-      /* @__PURE__ */ jsxs(Row2, { htmlFor: inputId, $placement: labelPlacement, children: [
+    return /* @__PURE__ */ jsxs(Root10, { $disabled: disabled, children: [
+      /* @__PURE__ */ jsxs(Row3, { htmlFor: inputId, $placement: labelPlacement, children: [
         /* @__PURE__ */ jsxs(Track, { $size: size, $color: color, $error: error, $disabled: disabled, children: [
           /* @__PURE__ */ jsx(
-            HiddenInput3,
+            HiddenInput4,
             {
               ref,
               id: inputId,
@@ -3816,7 +3898,7 @@ var SwitchInput = forwardRef(
           ),
           /* @__PURE__ */ jsx(Thumb, { $size: size })
         ] }),
-        label && /* @__PURE__ */ jsx(LabelText2, { $size: size, $disabled: disabled, $error: error, children: label })
+        label && /* @__PURE__ */ jsx(LabelText3, { $size: size, $disabled: disabled, $error: error, children: label })
       ] }),
       helperText && /* @__PURE__ */ jsx(HelperText, { error, children: helperText })
     ] });
@@ -3826,7 +3908,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 Root10 = styled("div")({
+var Root11 = styled("div")({
   display: "flex",
   flexDirection: "column",
   gap: "0.5rem",
@@ -3859,7 +3941,7 @@ var Fill = styled("div")(({ theme, $left, $width }) => ({
   width: `${$width}%`,
   pointerEvents: "none"
 }));
-var HiddenInput4 = styled("input", {
+var HiddenInput5 = styled("input", {
   shouldForwardProp: (p) => !["$size", "$disabled"].includes(p)
 })(({ theme, $disabled }) => ({
   position: "absolute",
@@ -3949,7 +4031,7 @@ var RangeSlider = 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__ */ jsxs(Root10, { ref, ...props, children: [
+    return /* @__PURE__ */ jsxs(Root11, { ref, ...props, children: [
       (label || showValue) && /* @__PURE__ */ jsxs(LabelRow, { children: [
         label && /* @__PURE__ */ jsx("span", { children: label }),
         showValue && /* @__PURE__ */ jsx("span", { children: valueLabel })
@@ -3958,7 +4040,7 @@ var RangeSlider = forwardRef(
         /* @__PURE__ */ jsx(Fill, { $left: range ? loP : 0, $width: range ? hiP - loP : loP }),
         range ? /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(
-            HiddenInput4,
+            HiddenInput5,
             {
               id: `${inputId}-lo`,
               type: "range",
@@ -3977,7 +4059,7 @@ var RangeSlider = forwardRef(
           ),
           /* @__PURE__ */ jsx(ThumbVisual, { $size: size, $pct: loP, $disabled: disabled }),
           /* @__PURE__ */ jsx(
-            HiddenInput4,
+            HiddenInput5,
             {
               id: `${inputId}-hi`,
               type: "range",
@@ -3997,7 +4079,7 @@ var RangeSlider = forwardRef(
           /* @__PURE__ */ jsx(ThumbVisual, { $size: size, $pct: hiP, $disabled: disabled })
         ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(
-            HiddenInput4,
+            HiddenInput5,
             {
               id: inputId,
               type: "range",
@@ -4079,7 +4161,7 @@ var inputColors2 = (theme, error) => ({
     boxShadow: `0 0 0 3px ${error ? theme.palette.error.main : theme.palette.primary.main}33`
   }
 });
-var Root11 = styled("div")(({ $fullWidth }) => ({
+var Root12 = styled("div")(({ $fullWidth }) => ({
   display: $fullWidth ? "block" : "inline-block",
   width: $fullWidth ? "100%" : "auto",
   position: "relative"
@@ -4474,7 +4556,7 @@ var DateTimePicker = forwardRef(
     const showCalendar = mode !== "time";
     const showTime = mode !== "date";
     const needsConfirm = mode !== "date";
-    return /* @__PURE__ */ jsxs(Root11, { ref: rootRef, $fullWidth: fullWidth, children: [
+    return /* @__PURE__ */ jsxs(Root12, { ref: rootRef, $fullWidth: fullWidth, children: [
       label && /* @__PURE__ */ jsx(Label, { htmlFor: inputId, error, size, children: label }),
       /* @__PURE__ */ jsxs(
         InputWrapper3,
@@ -4966,6 +5048,34 @@ function SectionHeading({
   ] });
 }
 var sectionHeadingAligns = ["center", "left", "right"];
+var StyledSeparator = styled("hr", {
+  shouldForwardProp: (prop) => prop !== "$orientation"
+})(({ theme, $orientation }) => ({
+  border: "none",
+  margin: 0,
+  flexShrink: 0,
+  ...$orientation === "horizontal" ? {
+    width: "100%",
+    height: "1px",
+    backgroundColor: theme.palette.divider
+  } : {
+    width: "1px",
+    height: "100%",
+    alignSelf: "stretch",
+    backgroundColor: theme.palette.divider
+  }
+}));
+function Separator({ orientation = "horizontal", ...rest }) {
+  return /* @__PURE__ */ jsx(
+    StyledSeparator,
+    {
+      $orientation: orientation,
+      role: "separator",
+      "aria-orientation": orientation,
+      ...rest
+    }
+  );
+}
 var shimmer = keyframes$1`
   0%   { background-position: -200% 0; }
   100% { background-position:  200% 0; }
@@ -5028,7 +5138,7 @@ var spin = keyframes$1`to { transform: rotate(360deg); }`;
 var fade = keyframes$1`0%,100%{opacity:.15} 50%{opacity:1}`;
 var scalePulse = keyframes$1`0%,100%{transform:scale(0.6);opacity:.4} 50%{transform:scale(1);opacity:1}`;
 var barAnim = keyframes$1`0%,100%{transform:scaleY(.4);opacity:.5} 50%{transform:scaleY(1);opacity:1}`;
-var Root12 = styled("span", {
+var Root13 = styled("span", {
   shouldForwardProp: (p) => !["$size", "$color"].includes(p)
 })(({ theme, $size, $color }) => {
   const colorMap = {
@@ -5117,7 +5227,7 @@ function Spinner3({
   ...props
 }) {
   const Inner5 = VARIANTS[variant];
-  return /* @__PURE__ */ jsx(Root12, { $size: size, $color: color, role: "status", "aria-label": label, ...props, children: /* @__PURE__ */ jsx(Inner5, {}) });
+  return /* @__PURE__ */ jsx(Root13, { $size: size, $color: color, role: "status", "aria-label": label, ...props, children: /* @__PURE__ */ jsx(Inner5, {}) });
 }
 var spinnerVariants = ["ring", "dots", "pulse", "bars"];
 var spinnerSizes = ["xs", "sm", "md", "lg", "xl"];
@@ -5243,7 +5353,7 @@ var FONT_MAP = {
   lg: "1.125rem",
   xl: "1.5rem"
 };
-var Root13 = styled("div")({ position: "relative", display: "inline-flex", flexShrink: 0 });
+var Root14 = styled("div")({ position: "relative", display: "inline-flex", flexShrink: 0 });
 var Label2 = styled("div", {
   shouldForwardProp: (p) => p !== "$size"
 })(({ theme, $size }) => ({
@@ -5297,7 +5407,7 @@ function ProgressCircle({
   const { color, gradient } = useStrokeColor(variant, gradientId);
   const trackColor = theme.palette.mode === "dark" ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.08)";
   return /* @__PURE__ */ jsxs(
-    Root13,
+    Root14,
     {
       role: "progressbar",
       "aria-valuenow": value,
@@ -5654,7 +5764,7 @@ var PRESET_MAP = {
   "3/4": 3 / 4,
   "2/3": 2 / 3
 };
-var Root14 = styled("div")({
+var Root15 = styled("div")({
   position: "relative",
   width: "100%",
   aspectRatio: "var(--ar)",
@@ -5670,7 +5780,7 @@ var AspectRatio = forwardRef(
   ({ ratio = "16/9", children, style, ...props }, ref) => {
     const numericRatio = typeof ratio === "string" ? PRESET_MAP[ratio] ?? 16 / 9 : ratio;
     return /* @__PURE__ */ jsx(
-      Root14,
+      Root15,
       {
         ref,
         style: { "--ar": String(numericRatio), ...style },
@@ -5698,7 +5808,7 @@ var Placeholder2 = styled("div")(({ theme }) => ({
 }));
 var CategoryCardImage = ({ src, alt }) => /* @__PURE__ */ jsx(AspectRatio, { ratio: "4/3", children: src ? /* @__PURE__ */ jsx(Img, { src, alt }) : /* @__PURE__ */ jsx(Placeholder2, { "aria-label": alt, children: /* @__PURE__ */ jsx(ImageIcon, { style: { fontSize: 48 } }) }) });
 CategoryCardImage.displayName = "CategoryCardImage";
-var Root15 = styled("div")({
+var Root16 = styled("div")({
   display: "flex",
   flexDirection: "column",
   gap: "0.25rem"
@@ -5720,7 +5830,7 @@ var CategoryCardInfo = ({
   name,
   count,
   countLabel = "produkt\xF3w"
-}) => /* @__PURE__ */ jsxs(Root15, { children: [
+}) => /* @__PURE__ */ jsxs(Root16, { children: [
   /* @__PURE__ */ jsx(Name, { children: name }),
   count !== void 0 && /* @__PURE__ */ jsxs(Count, { children: [
     count,
@@ -5729,7 +5839,7 @@ var CategoryCardInfo = ({
   ] })
 ] });
 CategoryCardInfo.displayName = "CategoryCardInfo";
-var Root16 = styled(Card)(({ theme }) => ({
+var Root17 = styled(Card)(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
   overflow: "hidden",
@@ -5755,14 +5865,14 @@ var CategoryCard = forwardRef(
       /* @__PURE__ */ jsx(ImageWrap, { children: /* @__PURE__ */ jsx(CategoryCardImage, { src: imageUrl, alt: imageAlt ?? name }) }),
       /* @__PURE__ */ jsx(CategoryCardInfo, { name, count })
     ] });
-    return /* @__PURE__ */ jsx(Root16, { ref, variant: "default", padding: "md", rounded: "lg", ...props, children: href ? /* @__PURE__ */ jsx(CardLink, { href, children: content }) : content });
+    return /* @__PURE__ */ jsx(Root17, { ref, variant: "default", padding: "md", rounded: "lg", ...props, children: href ? /* @__PURE__ */ jsx(CardLink, { href, children: content }) : content });
   }
 );
 CategoryCard.displayName = "CategoryCard";
 function deriveInitials(name) {
   return name.split(/\s+/).filter(Boolean).slice(0, 2).map((p) => p[0]?.toUpperCase() ?? "").join("");
 }
-var Root17 = styled(Card)({
+var Root18 = styled(Card)({
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
@@ -5828,7 +5938,7 @@ var ProfileCard = forwardRef(
   }, ref) => {
     const resolvedInitials = initials ?? deriveInitials(name);
     const imgSize = sizeMap5[avatarSize] ?? "4rem";
-    return /* @__PURE__ */ jsxs(Root17, { ref, variant: cardVariant, padding: "lg", rounded: "lg", ...props, children: [
+    return /* @__PURE__ */ jsxs(Root18, { ref, variant: cardVariant, padding: "lg", rounded: "lg", ...props, children: [
       /* @__PURE__ */ jsxs(Identity, { children: [
         avatarUrl ? /* @__PURE__ */ jsx(AvatarImg, { src: avatarUrl, alt: name, style: { width: imgSize, height: imgSize } }) : /* @__PURE__ */ jsx(Avatar, { initials: resolvedInitials, size: avatarSize, color: avatarColor }),
         /* @__PURE__ */ jsxs(TextBlock, { children: [
@@ -5848,7 +5958,7 @@ var FONT_SIZE = {
   lg: "1.5rem",
   xl: "2rem"
 };
-var Root18 = styled("div")({
+var Root19 = styled("div")({
   display: "inline-flex",
   flexDirection: "column",
   gap: "0.25rem"
@@ -5929,7 +6039,7 @@ var Price = forwardRef(
     const onSale = originalPrice !== void 0 && originalPrice > price;
     const discount = onSale ? calcDiscount(price, originalPrice) : 0;
     const showOmnibus = lowestPrice !== void 0;
-    return /* @__PURE__ */ jsxs(Root18, { ref, ...props, children: [
+    return /* @__PURE__ */ jsxs(Root19, { ref, ...props, children: [
       /* @__PURE__ */ jsxs(PriceRow, { children: [
         /* @__PURE__ */ jsx(
           Current,
@@ -5986,7 +6096,7 @@ function calcTimeLeft(target) {
 function pad(n) {
   return String(n).padStart(2, "0");
 }
-var Root19 = styled("div", {
+var Root20 = styled("div", {
   shouldForwardProp: (prop) => prop !== "$variant"
 })(({ theme, $variant }) => ({
   display: "inline-flex",
@@ -6081,11 +6191,11 @@ var CountdownTimer = forwardRef(
       return () => clearInterval(id);
     }, [targetDate, onExpire]);
     if (!timeLeft) {
-      return /* @__PURE__ */ jsx(Root19, { ref, $variant: variant, ...props, children: /* @__PURE__ */ jsx(TimerLabel, { $variant: variant, children: expiredLabel }) });
+      return /* @__PURE__ */ jsx(Root20, { ref, $variant: variant, ...props, children: /* @__PURE__ */ jsx(TimerLabel, { $variant: variant, children: expiredLabel }) });
     }
     const parts = [timeLeft.days, timeLeft.hours, timeLeft.minutes, timeLeft.seconds];
     return /* @__PURE__ */ jsxs(
-      Root19,
+      Root20,
       {
         ref,
         $variant: variant,
@@ -6108,7 +6218,7 @@ var CountdownTimer = forwardRef(
 );
 CountdownTimer.displayName = "CountdownTimer";
 var countdownTimerVariants = ["inline", "card", "banner"];
-var Root20 = styled(Card)({
+var Root21 = styled(Card)({
   display: "flex",
   flexDirection: "column",
   height: "100%",
@@ -6146,7 +6256,7 @@ var DealCard = forwardRef(
     onAddToCart,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsxs(Root20, { ref, variant: "default", padding: "md", rounded: "lg", ...props, children: [
+    return /* @__PURE__ */ jsxs(Root21, { ref, variant: "default", padding: "md", rounded: "lg", ...props, children: [
       /* @__PURE__ */ jsx(ImageWrap2, { children: /* @__PURE__ */ jsx(ProductCardImage, { src: imageUrl, alt: imageAlt ?? name }) }),
       /* @__PURE__ */ jsx(Name3, { children: name }),
       /* @__PURE__ */ jsx(
@@ -6251,7 +6361,7 @@ var MetaRow = styled("div", {
   color: $inverted ? "rgba(255,255,255,0.75)" : theme.palette.text.secondary,
   fontFamily: theme.typography.fontFamily
 }));
-var Separator = styled("span")({
+var Separator2 = styled("span")({
   userSelect: "none"
 });
 var PostCardMeta = ({
@@ -6263,7 +6373,7 @@ var PostCardMeta = ({
   if (!date && !author) return null;
   return /* @__PURE__ */ jsxs(MetaRow, { $inverted: inverted, children: [
     date && /* @__PURE__ */ jsx("span", { children: formatDate(date, locale) }),
-    date && author && /* @__PURE__ */ jsx(Separator, { children: "\xB7" }),
+    date && author && /* @__PURE__ */ jsx(Separator2, { children: "\xB7" }),
     author && /* @__PURE__ */ jsx("span", { children: author })
   ] });
 };
@@ -6428,7 +6538,7 @@ var postCardVariants = [
   "featured",
   "compact"
 ];
-var Row3 = styled("div")({
+var Row4 = styled("div")({
   display: "flex",
   alignItems: "baseline",
   gap: "0.25rem"
@@ -6453,7 +6563,7 @@ var Period = styled("span")(({ theme }) => ({
   fontSize: "0.875rem",
   color: theme.palette.text.secondary
 }));
-var PricingCardPrice = ({ price, currency, period }) => /* @__PURE__ */ jsxs(Row3, { children: [
+var PricingCardPrice = ({ price, currency, period }) => /* @__PURE__ */ jsxs(Row4, { children: [
   currency && /* @__PURE__ */ jsx(Currency, { children: currency }),
   /* @__PURE__ */ jsx(Amount, { children: price }),
   period && /* @__PURE__ */ jsx(Period, { children: period })
@@ -6491,7 +6601,7 @@ var PricingCardFeatureList = ({ features }) => /* @__PURE__ */ jsx(List, { child
   ] }, i);
 }) });
 PricingCardFeatureList.displayName = "PricingCardFeatureList";
-var Root21 = styled(Card)({
+var Root22 = styled(Card)({
   display: "flex",
   flexDirection: "column",
   height: "100%"
@@ -6573,7 +6683,7 @@ var PricingCard = forwardRef(
   }, ref) => {
     const resolvedCardVariant = cardVariant ?? (popular ? "gradient-primary" : "default");
     const resolvedCtaVariant = ctaVariant ?? (popular ? "primary" : "ghost");
-    return /* @__PURE__ */ jsxs(Root21, { ref, variant: resolvedCardVariant, padding: "lg", rounded: "lg", ...props, children: [
+    return /* @__PURE__ */ jsxs(Root22, { ref, variant: resolvedCardVariant, padding: "lg", rounded: "lg", ...props, children: [
       /* @__PURE__ */ jsxs(NameRow, { children: [
         /* @__PURE__ */ jsx(Name4, { children: name }),
         popular && /* @__PURE__ */ jsx(Badge2, { variant: popularBadgeVariant, children: popularLabel })
@@ -6594,7 +6704,7 @@ var sizeMap6 = {
   md: "1.25rem",
   lg: "1.5rem"
 };
-var Root22 = styled("div")(({ theme }) => ({
+var Root23 = styled("div")(({ theme }) => ({
   display: "inline-flex",
   alignItems: "center",
   gap: "0.5rem",
@@ -6629,7 +6739,7 @@ var Rating = forwardRef(
   ({ value, max = 5, readonly = true, size = "md", label, count, onChange, ...props }, ref) => {
     const roundedValue = Math.round(value);
     const meta = label ?? (count !== void 0 ? `(${count})` : void 0);
-    return /* @__PURE__ */ jsxs(Root22, { ref, "aria-label": `Ocena ${value} z ${max}`, ...props, children: [
+    return /* @__PURE__ */ jsxs(Root23, { ref, "aria-label": `Ocena ${value} z ${max}`, ...props, children: [
       /* @__PURE__ */ jsx(
         Stars,
         {
@@ -6699,7 +6809,7 @@ var ProductCardImage = ({
   badge && /* @__PURE__ */ jsx(BadgeSlot, { children: /* @__PURE__ */ jsx(Badge2, { variant: badgeVariant, children: badge }) })
 ] });
 ProductCardImage.displayName = "ProductCardImage";
-var Root23 = styled(Card)({
+var Root24 = styled(Card)({
   display: "flex",
   flexDirection: "column",
   height: "100%",
@@ -6740,7 +6850,7 @@ var ProductCard = forwardRef(
     disabledButton = false,
     hideButton = false,
     ...props
-  }, ref) => /* @__PURE__ */ jsxs(Root23, { ref, variant: "default", padding: "md", rounded: "lg", ...props, children: [
+  }, ref) => /* @__PURE__ */ jsxs(Root24, { ref, variant: "default", padding: "md", rounded: "lg", ...props, children: [
     /* @__PURE__ */ jsx(AspectRatio, { ratio: imageRatio, style: { margin: "-1.5rem -1.5rem 1rem", width: "calc(100% + 3rem)" }, children: /* @__PURE__ */ jsx(
       ProductCardImage,
       {
@@ -6874,7 +6984,7 @@ var ProductCardHorizontal = forwardRef(
   ] }) }) })
 );
 ProductCardHorizontal.displayName = "ProductCardHorizontal";
-var Root24 = styled(Card, {
+var Root25 = styled(Card, {
   shouldForwardProp: (prop) => prop !== "$align"
 })(({ $align }) => ({
   textAlign: $align,
@@ -6904,7 +7014,7 @@ var Description3 = styled("p")(({ theme }) => ({
   lineHeight: 1.5
 }));
 var StatCard = forwardRef(
-  ({ stat, cardVariant = "default", align = "center", ...props }, ref) => /* @__PURE__ */ jsxs(Root24, { ref, variant: cardVariant, padding: "lg", rounded: "lg", $align: align, ...props, children: [
+  ({ stat, cardVariant = "default", align = "center", ...props }, ref) => /* @__PURE__ */ jsxs(Root25, { ref, variant: cardVariant, padding: "lg", rounded: "lg", $align: align, ...props, children: [
     /* @__PURE__ */ jsx(Value2, { children: stat.value }),
     /* @__PURE__ */ jsx(Label3, { children: stat.label }),
     stat.description && /* @__PURE__ */ jsx(Description3, { children: stat.description })
@@ -6934,7 +7044,7 @@ var TeamMemberAvatar = ({
   return /* @__PURE__ */ jsx(Avatar, { initials: initials ?? deriveInitials2(name), size: "xl", color: avatarColor });
 };
 TeamMemberAvatar.displayName = "TeamMemberAvatar";
-var Root25 = styled("div")({ minWidth: 0 });
+var Root26 = styled("div")({ minWidth: 0 });
 var Name7 = styled("h3")(({ theme }) => ({
   margin: 0,
   color: theme.palette.text.primary,
@@ -6950,12 +7060,12 @@ var Role = styled("p")(({ theme }) => ({
   fontSize: "0.875rem",
   lineHeight: 1.5
 }));
-var TeamMemberInfo = ({ name, role }) => /* @__PURE__ */ jsxs(Root25, { children: [
+var TeamMemberInfo = ({ name, role }) => /* @__PURE__ */ jsxs(Root26, { children: [
   /* @__PURE__ */ jsx(Name7, { children: name }),
   role && /* @__PURE__ */ jsx(Role, { children: role })
 ] });
 TeamMemberInfo.displayName = "TeamMemberInfo";
-var Root26 = styled(Card)(({ theme }) => ({
+var Root27 = styled(Card)(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   gap: "1rem",
@@ -6968,7 +7078,7 @@ var Root26 = styled(Card)(({ theme }) => ({
   }
 }));
 var TeamMemberCard = forwardRef(
-  ({ member, cardVariant = "default", ...props }, ref) => /* @__PURE__ */ jsxs(Root26, { ref, variant: cardVariant, padding: "lg", rounded: "lg", ...props, children: [
+  ({ member, cardVariant = "default", ...props }, ref) => /* @__PURE__ */ jsxs(Root27, { ref, variant: cardVariant, padding: "lg", rounded: "lg", ...props, children: [
     /* @__PURE__ */ jsx(
       TeamMemberAvatar,
       {
@@ -7005,7 +7115,7 @@ var Quote = styled("blockquote")(({ theme }) => ({
 }));
 var TestimonialQuote = ({ quote }) => /* @__PURE__ */ jsx(Quote, { children: quote });
 TestimonialQuote.displayName = "TestimonialQuote";
-var Root27 = styled("div")({
+var Root28 = styled("div")({
   display: "flex",
   alignItems: "center",
   gap: "0.75rem"
@@ -7039,7 +7149,7 @@ var TestimonialAuthor = ({
   authorRole,
   authorAvatarUrl,
   authorInitials
-}) => /* @__PURE__ */ jsxs(Root27, { children: [
+}) => /* @__PURE__ */ jsxs(Root28, { children: [
   authorAvatarUrl ? /* @__PURE__ */ jsx(AvatarImg2, { src: authorAvatarUrl, alt: authorName }) : /* @__PURE__ */ jsx(Avatar, { initials: authorInitials ?? deriveInitials3(authorName), size: "md", color: "primary" }),
   /* @__PURE__ */ jsxs(Info, { children: [
     /* @__PURE__ */ jsx(Name8, { children: authorName }),
@@ -7047,14 +7157,14 @@ var TestimonialAuthor = ({
   ] })
 ] });
 TestimonialAuthor.displayName = "TestimonialAuthor";
-var Root28 = styled(Card)({
+var Root29 = styled(Card)({
   display: "flex",
   flexDirection: "column",
   gap: "1.25rem",
   height: "100%"
 });
 var TestimonialCard = forwardRef(
-  ({ testimonial, cardVariant = "default", ...props }, ref) => /* @__PURE__ */ jsxs(Root28, { ref, variant: cardVariant, padding: "lg", rounded: "lg", ...props, children: [
+  ({ testimonial, cardVariant = "default", ...props }, ref) => /* @__PURE__ */ jsxs(Root29, { ref, variant: cardVariant, padding: "lg", rounded: "lg", ...props, children: [
     testimonial.rating && /* @__PURE__ */ jsx(Rating, { value: testimonial.rating, readonly: true, size: "sm" }),
     /* @__PURE__ */ jsx(TestimonialQuote, { quote: testimonial.quote }),
     /* @__PURE__ */ jsx(
@@ -7069,7 +7179,7 @@ var TestimonialCard = forwardRef(
   ] })
 );
 TestimonialCard.displayName = "TestimonialCard";
-var Root29 = styled("div")(({ theme }) => ({
+var Root30 = styled("div")(({ theme }) => ({
   position: "relative",
   padding: "1.5rem",
   borderRadius: "1rem",
@@ -7134,7 +7244,7 @@ var Expiry = styled("p")(({ theme }) => ({
   color: theme.palette.text.disabled
 }));
 var VoucherCard = forwardRef(
-  ({ code, discount, description, expiresAt, copied = false, onCopy, ...props }, ref) => /* @__PURE__ */ jsxs(Root29, { ref, ...props, children: [
+  ({ code, discount, description, expiresAt, copied = false, onCopy, ...props }, ref) => /* @__PURE__ */ jsxs(Root30, { ref, ...props, children: [
     /* @__PURE__ */ jsxs(Header, { children: [
       /* @__PURE__ */ jsx(LocalOfferIcon, { style: { fontSize: 20 }, color: "primary" }),
       /* @__PURE__ */ jsx(Discount, { children: discount })
@@ -7243,7 +7353,7 @@ var RemoveBtn = styled("button")(({ theme }) => ({
   }
 }));
 var Tbody = styled("tbody")({});
-var Row4 = styled("tr", {
+var Row5 = styled("tr", {
   shouldForwardProp: (p) => p !== "$diff"
 })(({ theme, $diff }) => ({
   backgroundColor: $diff ? theme.palette.mode === "dark" ? "rgba(255,255,255,0.03)" : "rgba(0,0,0,0.02)" : "transparent",
@@ -7320,7 +7430,7 @@ function CompareTool({
     ] }) }),
     /* @__PURE__ */ jsx(Tbody, { children: specKeys.map((key) => {
       const diff = highlightDifferences && isDiff(key, products);
-      return /* @__PURE__ */ jsxs(Row4, { $diff: diff, children: [
+      return /* @__PURE__ */ jsxs(Row5, { $diff: diff, children: [
         /* @__PURE__ */ jsx(LabelCell, { as: "th", scope: "row", children: specLabels[key] ?? key }),
         products.map((p) => {
           const val = p.specs[key];
@@ -7332,7 +7442,7 @@ function CompareTool({
   ] }) });
 }
 var spin2 = keyframes`to { transform: rotate(360deg); }`;
-var Root30 = styled("div")({
+var Root31 = styled("div")({
   display: "flex",
   flexDirection: "column",
   gap: "0.5rem"
@@ -7479,7 +7589,7 @@ function CouponInput({
     if (e.key === "Enter") handleApply();
   };
   if (appliedCode) {
-    return /* @__PURE__ */ jsxs(Root30, { className, children: [
+    return /* @__PURE__ */ jsxs(Root31, { className, children: [
       /* @__PURE__ */ jsxs(AppliedRow, { role: "status", "aria-label": `Kod rabatowy ${appliedCode} zastosowany`, children: [
         /* @__PURE__ */ jsx(AppliedCode, { children: appliedCode }),
         onRemove && /* @__PURE__ */ jsx(
@@ -7498,7 +7608,7 @@ function CouponInput({
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs(Root30, { className, children: [
+  return /* @__PURE__ */ jsxs(Root31, { className, children: [
     /* @__PURE__ */ jsxs(InputRow, { $hasError: Boolean(error), $applied: false, children: [
       /* @__PURE__ */ jsx(
         Input,
@@ -7530,7 +7640,7 @@ function CouponInput({
     error && /* @__PURE__ */ jsx(Message, { $type: "error", id: errorId, role: "alert", children: error })
   ] });
 }
-var Root31 = styled("div")({
+var Root32 = styled("div")({
   display: "flex",
   flexDirection: "column",
   gap: "0.5rem"
@@ -7578,7 +7688,7 @@ var Desc = styled("div")(({ theme }) => ({
   marginTop: "0.125rem"
 }));
 var PaymentMethodSelector = forwardRef(
-  ({ methods, value, onChange, label = "Metoda p\u0142atno\u015Bci", disabled, ...props }, ref) => /* @__PURE__ */ jsxs(Root31, { ref, ...props, children: [
+  ({ methods, value, onChange, label = "Metoda p\u0142atno\u015Bci", disabled, ...props }, ref) => /* @__PURE__ */ jsxs(Root32, { ref, ...props, children: [
     /* @__PURE__ */ jsx(GroupLabel, { children: label }),
     methods.map((method) => {
       const selected = value === method.id;
@@ -7605,7 +7715,7 @@ var PaymentMethodSelector = forwardRef(
   ] })
 );
 PaymentMethodSelector.displayName = "PaymentMethodSelector";
-var Root32 = styled("div")({
+var Root33 = styled("div")({
   display: "grid",
   gap: "0.75rem"
 });
@@ -7643,7 +7753,7 @@ var ProductGallery = forwardRef(
     if (!activeImage) {
       return null;
     }
-    return /* @__PURE__ */ jsxs(Root32, { ref, ...props, children: [
+    return /* @__PURE__ */ jsxs(Root33, { ref, ...props, children: [
       /* @__PURE__ */ jsx(AspectRatio, { ratio: imageRatio, children: /* @__PURE__ */ jsx(MainImage, { src: activeImage.src, alt: activeImage.alt }) }),
       images.length > 1 && /* @__PURE__ */ jsx(Thumbnails, { children: images.map((image, index) => /* @__PURE__ */ jsx(
         ThumbnailButton,
@@ -7661,7 +7771,7 @@ var ProductGallery = forwardRef(
   }
 );
 ProductGallery.displayName = "ProductGallery";
-var Root33 = styled("div")(({ theme, $variant }) => ({
+var Root34 = styled("div")(({ theme, $variant }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
@@ -7681,14 +7791,14 @@ var Link = styled("a")(({ theme }) => ({
   textUnderlineOffset: "0.2em"
 }));
 var PromoStrip = forwardRef(
-  ({ message, actionLabel, href, variant = "info", ...props }, ref) => /* @__PURE__ */ jsxs(Root33, { ref, $variant: variant, ...props, children: [
+  ({ message, actionLabel, href, variant = "info", ...props }, ref) => /* @__PURE__ */ jsxs(Root34, { ref, $variant: variant, ...props, children: [
     /* @__PURE__ */ jsx("span", { children: message }),
     actionLabel && href && /* @__PURE__ */ jsx(Link, { href, children: actionLabel })
   ] })
 );
 PromoStrip.displayName = "PromoStrip";
 var promoStripVariants = ["info", "success", "warning"];
-var Root34 = styled("div")(({ theme }) => ({
+var Root35 = styled("div")(({ theme }) => ({
   display: "inline-grid",
   gridTemplateColumns: "2.25rem 3rem 2.25rem",
   alignItems: "center",
@@ -7724,7 +7834,7 @@ var QuantitySelector = forwardRef(
   ({ value, min = 1, max = 99, step = 1, disabled = false, onChange, ...props }, ref) => {
     const decrease = Math.max(min, value - step);
     const increase = Math.min(max, value + step);
-    return /* @__PURE__ */ jsxs(Root34, { ref, "aria-label": "Wybierz ilo\u015B\u0107", ...props, children: [
+    return /* @__PURE__ */ jsxs(Root35, { ref, "aria-label": "Wybierz ilo\u015B\u0107", ...props, children: [
       /* @__PURE__ */ jsx(
         Control,
         {
@@ -7750,7 +7860,7 @@ var QuantitySelector = forwardRef(
   }
 );
 QuantitySelector.displayName = "QuantitySelector";
-var Root35 = styled("div")({
+var Root36 = styled("div")({
   display: "flex",
   flexDirection: "column",
   gap: "0.5rem"
@@ -7808,7 +7918,7 @@ var Price2 = styled("div", {
   whiteSpace: "nowrap"
 }));
 var ShippingSelector = forwardRef(
-  ({ options, value, onChange, label = "Metoda dostawy", disabled, ...props }, ref) => /* @__PURE__ */ jsxs(Root35, { ref, ...props, children: [
+  ({ options, value, onChange, label = "Metoda dostawy", disabled, ...props }, ref) => /* @__PURE__ */ jsxs(Root36, { ref, ...props, children: [
     /* @__PURE__ */ jsx(GroupLabel2, { children: label }),
     options.map((opt) => {
       const selected = value === opt.id;
@@ -7845,7 +7955,7 @@ var DEFAULT_SORT_OPTIONS = [
   { value: "price-asc", label: "Cena rosn\u0105co" },
   { value: "price-desc", label: "Cena malej\u0105co" }
 ];
-var Root36 = styled("div")(({ theme }) => ({
+var Root37 = styled("div")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
@@ -7919,7 +8029,7 @@ var SortBar = forwardRef(
     ...props
   }, ref) => {
     const resolvedLabel = totalLabel ?? (total !== void 0 ? `Znaleziono ${total} produkt\xF3w` : void 0);
-    return /* @__PURE__ */ jsxs(Root36, { ref, ...props, children: [
+    return /* @__PURE__ */ jsxs(Root37, { ref, ...props, children: [
       resolvedLabel && /* @__PURE__ */ jsx(TotalLabel, { children: resolvedLabel }),
       /* @__PURE__ */ jsxs(Controls, { children: [
         sortOptions.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -7972,7 +8082,7 @@ function getDefaultLabel(status, count) {
       return "Dost\u0119pny na zam\xF3wienie";
   }
 }
-var Root37 = styled("div", {
+var Root38 = styled("div", {
   shouldForwardProp: (p) => p !== "$color" && p !== "$size"
 })(({ theme, $color, $size }) => {
   const colorMap = {
@@ -8013,7 +8123,7 @@ var StockStatus = forwardRef(
   ({ status, count, label, showIcon = true, size = "md", ...props }, ref) => {
     const color = COLOR_MAP[status];
     const text = label ?? getDefaultLabel(status, count);
-    return /* @__PURE__ */ jsxs(Root37, { ref, $color: color, $size: size, role: "status", "aria-label": text, ...props, children: [
+    return /* @__PURE__ */ jsxs(Root38, { ref, $color: color, $size: size, role: "status", "aria-label": text, ...props, children: [
       showIcon && /* @__PURE__ */ jsx(Dot2, { $color: color, "aria-hidden": "true" }),
       /* @__PURE__ */ jsx("span", { children: text })
     ] });
@@ -8027,7 +8137,7 @@ var stockStatusValues = [
   "preorder",
   "backorder"
 ];
-var Root38 = styled("div")({
+var Root39 = styled("div")({
   display: "flex",
   flexDirection: "column",
   gap: "0.5rem"
@@ -8096,7 +8206,7 @@ var Select2 = styled("select")(({ theme }) => ({
   }
 }));
 var VariantSelector = forwardRef(
-  ({ label, options, value, onChange, mode = "button", disabled, ...props }, ref) => /* @__PURE__ */ jsxs(Root38, { ref, ...props, children: [
+  ({ label, options, value, onChange, mode = "button", disabled, ...props }, ref) => /* @__PURE__ */ jsxs(Root39, { ref, ...props, children: [
     /* @__PURE__ */ jsxs(Label4, { children: [
       label,
       value && mode !== "swatch" && /* @__PURE__ */ jsx("span", { style: { fontWeight: 400, marginLeft: "0.375rem" }, children: options.find((o) => o.value === value)?.label })
@@ -8133,7 +8243,7 @@ var variantSelectorModes = ["button", "swatch", "dropdown"];
 function deriveInitials4(name) {
   return name.split(" ").filter(Boolean).slice(0, 2).map((p) => p[0]).join("").toUpperCase();
 }
-var Root39 = styled("div")({
+var Root40 = styled("div")({
   display: "flex",
   alignItems: "center",
   gap: "0.75rem"
@@ -8179,7 +8289,7 @@ var DateText = styled("time")(({ theme }) => ({
   color: theme.palette.text.secondary
 }));
 function CommentMeta({ author, date }) {
-  return /* @__PURE__ */ jsxs(Root39, { children: [
+  return /* @__PURE__ */ jsxs(Root40, { children: [
     author.avatarUrl ? /* @__PURE__ */ jsx(AvatarImg3, { src: author.avatarUrl, alt: author.name }) : /* @__PURE__ */ jsx(Avatar, { initials: deriveInitials4(author.name), size: "md", color: "primary" }),
     /* @__PURE__ */ jsxs(Info4, { children: [
       /* @__PURE__ */ jsxs(NameRow2, { children: [
@@ -8202,12 +8312,12 @@ function CommentBody({ content }) {
   return /* @__PURE__ */ jsx(Text, { children: content });
 }
 CommentBody.displayName = "CommentBody";
-var Root40 = styled("div")({
+var Root41 = styled("div")({
   display: "flex",
   alignItems: "center",
   gap: "0.25rem"
 });
-var ActionButton = styled("button")(({ theme }) => ({
+var ActionButton = styled("button")(({ theme, $isLiked }) => ({
   display: "inline-flex",
   alignItems: "center",
   gap: "0.375rem",
@@ -8216,10 +8326,10 @@ var ActionButton = styled("button")(({ theme }) => ({
   border: "none",
   borderRadius: theme.shape.borderRadius,
   cursor: "pointer",
-  color: theme.palette.text.secondary,
+  color: $isLiked ? theme.palette.primary.main : theme.palette.text.secondary,
   fontFamily: theme.typography.fontFamily,
   fontSize: "0.8125rem",
-  fontWeight: 500,
+  fontWeight: $isLiked ? 600 : 500,
   lineHeight: 1,
   transition: "background-color 150ms ease, color 150ms ease",
   "&:hover": {
@@ -8231,13 +8341,29 @@ var ActionButton = styled("button")(({ theme }) => ({
     outlineOffset: "2px"
   }
 }));
-function CommentActions({ commentId, likesCount, onLike, onReply }) {
-  return /* @__PURE__ */ jsxs(Root40, { children: [
-    /* @__PURE__ */ jsxs(ActionButton, { type: "button", "aria-label": "Lubi\u0119 to", onClick: () => onLike?.(commentId), children: [
-      /* @__PURE__ */ jsx(ThumbUpOutlinedIcon, { style: { fontSize: "0.9375rem" }, "aria-hidden": "true" }),
-      typeof likesCount === "number" && /* @__PURE__ */ jsx("span", { children: likesCount }),
-      "Lubi\u0119 to"
-    ] }),
+function CommentActions({
+  commentId,
+  likesCount,
+  isLiked,
+  onLike,
+  onReply
+}) {
+  return /* @__PURE__ */ jsxs(Root41, { children: [
+    /* @__PURE__ */ jsxs(
+      ActionButton,
+      {
+        type: "button",
+        "aria-label": "Lubi\u0119 to",
+        "aria-pressed": !!isLiked,
+        $isLiked: isLiked,
+        onClick: () => onLike?.(commentId),
+        children: [
+          isLiked ? /* @__PURE__ */ jsx(ThumbUpIcon, { style: { fontSize: "0.9375rem" }, "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ThumbUpOutlinedIcon, { style: { fontSize: "0.9375rem" }, "aria-hidden": "true" }),
+          typeof likesCount === "number" && /* @__PURE__ */ jsx("span", { children: likesCount }),
+          "Lubi\u0119 to"
+        ]
+      }
+    ),
     /* @__PURE__ */ jsxs(ActionButton, { type: "button", "aria-label": "Odpowiedz", onClick: () => onReply?.(commentId), children: [
       /* @__PURE__ */ jsx(ReplyIcon, { style: { fontSize: "0.9375rem" }, "aria-hidden": "true" }),
       "Odpowiedz"
@@ -8245,7 +8371,7 @@ function CommentActions({ commentId, likesCount, onLike, onReply }) {
   ] });
 }
 CommentActions.displayName = "CommentActions";
-var Root41 = styled("div", {
+var Root42 = styled("div", {
   shouldForwardProp: (p) => p !== "$depth"
 })(({ theme, $depth }) => ({
   display: "flex",
@@ -8258,7 +8384,7 @@ var Root41 = styled("div", {
   }
 }));
 var CommentCard = forwardRef(
-  ({ comment, depth = 0, onLike, onReply, ...props }, ref) => /* @__PURE__ */ jsxs(Root41, { ref, $depth: depth, ...props, children: [
+  ({ comment, depth = 0, onLike, onReply, ...props }, ref) => /* @__PURE__ */ jsxs(Root42, { ref, $depth: depth, ...props, children: [
     /* @__PURE__ */ jsx(CommentMeta, { author: comment.author, date: comment.date }),
     /* @__PURE__ */ jsx(CommentBody, { content: comment.content }),
     /* @__PURE__ */ jsx(
@@ -8266,6 +8392,7 @@ var CommentCard = forwardRef(
       {
         commentId: comment.id,
         likesCount: comment.likesCount,
+        isLiked: comment.isLiked,
         onLike,
         onReply
       }
@@ -8273,7 +8400,7 @@ var CommentCard = forwardRef(
   ] })
 );
 CommentCard.displayName = "CommentCard";
-var Root42 = styled("div")(({ theme }) => ({
+var Root43 = styled("div")(({ theme }) => ({
   borderBottom: `1px solid ${theme.palette.divider}`
 }));
 var Trigger2 = styled("button")(({ theme }) => ({
@@ -8321,7 +8448,7 @@ var PanelInner = styled("p")(({ theme }) => ({
 var FaqItem = forwardRef(
   ({ item, defaultOpen = false, ...props }, ref) => {
     const [open, setOpen] = useState(defaultOpen);
-    return /* @__PURE__ */ jsxs(Root42, { ref, ...props, children: [
+    return /* @__PURE__ */ jsxs(Root43, { ref, ...props, children: [
       /* @__PURE__ */ jsxs(Trigger2, { type: "button", "aria-expanded": open, onClick: () => setOpen((prev) => !prev), children: [
         item.question,
         /* @__PURE__ */ jsx(ChevronIcon2, { $open: open, "aria-hidden": "true" })
@@ -8397,7 +8524,7 @@ var FeatureItem = forwardRef(
   }
 );
 FeatureItem.displayName = "FeatureItem";
-var Root43 = styled("div")({
+var Root44 = styled("div")({
   display: "flex",
   flexDirection: "column",
   alignItems: "center",
@@ -8445,7 +8572,7 @@ var Description6 = styled("p")(({ theme }) => ({
   maxWidth: "18rem"
 }));
 var ProcessStep = forwardRef(
-  ({ step, title, description, icon, ...props }, ref) => /* @__PURE__ */ jsxs(Root43, { ref, ...props, children: [
+  ({ step, title, description, icon, ...props }, ref) => /* @__PURE__ */ jsxs(Root44, { ref, ...props, children: [
     /* @__PURE__ */ jsx(StepBadge, { "aria-hidden": "true", children: icon ? /* @__PURE__ */ jsx(IconWrapper2, { children: icon }) : /* @__PURE__ */ jsx(StepNumber, { children: step }) }),
     /* @__PURE__ */ jsx(Title3, { children: title }),
     description && /* @__PURE__ */ jsx(Description6, { children: description })
@@ -8707,7 +8834,7 @@ var timelineItemStatuses = [
   "pending",
   "error"
 ];
-var Root44 = styled("div")({
+var Root45 = styled("div")({
   position: "relative",
   width: "100%",
   overflow: "hidden",
@@ -8817,7 +8944,7 @@ function Carousel({
   }, [prev, next]);
   if (!count) return null;
   return /* @__PURE__ */ jsxs("div", { className, children: [
-    /* @__PURE__ */ jsxs(Root44, { "aria-roledescription": "carousel", children: [
+    /* @__PURE__ */ jsxs(Root45, { "aria-roledescription": "carousel", children: [
       /* @__PURE__ */ jsx(Track4, { $index: index, "aria-live": "polite", children: slides.map((slide, i) => /* @__PURE__ */ jsx(
         Slide,
         {
@@ -9225,7 +9352,7 @@ var Current2 = styled("span")(({ theme }) => ({
   color: theme.palette.text.primary,
   fontWeight: 600
 }));
-var Separator2 = styled("span")(({ theme }) => ({
+var Separator3 = styled("span")(({ theme }) => ({
   color: theme.palette.text.disabled
 }));
 var Breadcrumbs = forwardRef(
@@ -9233,7 +9360,7 @@ var Breadcrumbs = forwardRef(
     const isLast = index === items.length - 1;
     return /* @__PURE__ */ jsxs("li", { children: [
       item.href && !isLast ? /* @__PURE__ */ jsx(Link2, { href: item.href, children: item.label }) : /* @__PURE__ */ jsx(Current2, { "aria-current": isLast ? "page" : void 0, children: item.label }),
-      !isLast && /* @__PURE__ */ jsxs(Separator2, { "aria-hidden": "true", children: [
+      !isLast && /* @__PURE__ */ jsxs(Separator3, { "aria-hidden": "true", children: [
         " ",
         separator
       ] })
@@ -9420,7 +9547,7 @@ var PaginationBar = ({
   ] });
 };
 PaginationBar.displayName = "PaginationBar";
-var Root45 = styled("div", {
+var Root46 = styled("div", {
   shouldForwardProp: (p) => p !== "$variant"
 })(({ theme, $variant }) => ({
   width: "100%",
@@ -9530,7 +9657,7 @@ var Accordion = forwardRef(
       if (controlledKeys === void 0) setInternalKeys(next);
       onChange?.(next);
     };
-    return /* @__PURE__ */ jsx(Root45, { ref, $variant: variant, ...props, children: items.map((item) => {
+    return /* @__PURE__ */ jsx(Root46, { 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}`;
@@ -9565,7 +9692,7 @@ var ICONS = {
   warning: /* @__PURE__ */ jsx(WarningAmberOutlinedIcon, { "aria-hidden": true, style: { fontSize: 20 } }),
   error: /* @__PURE__ */ jsx(ErrorOutlineOutlinedIcon, { "aria-hidden": true, style: { fontSize: 20 } })
 };
-var Root46 = styled("div", {
+var Root47 = styled("div", {
   shouldForwardProp: (prop) => prop !== "$severity"
 })(({ theme, $severity }) => {
   const palette = {
@@ -9615,7 +9742,7 @@ var CloseButton2 = styled("button")(({ theme }) => ({
   }
 }));
 var Alert = forwardRef(
-  ({ severity = "info", title, children, onClose, icon, ...props }, ref) => /* @__PURE__ */ jsxs(Root46, { ref, role: "alert", $severity: severity, ...props, children: [
+  ({ severity = "info", title, children, onClose, icon, ...props }, ref) => /* @__PURE__ */ jsxs(Root47, { ref, role: "alert", $severity: severity, ...props, children: [
     /* @__PURE__ */ jsx(IconSlot2, { children: icon ?? ICONS[severity] }),
     /* @__PURE__ */ jsxs(Body, { children: [
       title && /* @__PURE__ */ jsx(Title5, { children: title }),
@@ -9773,7 +9900,7 @@ var MenuItemIcon = styled("span")({
   width: "1rem",
   height: "1rem"
 });
-var Separator3 = styled("hr")(({ theme }) => ({
+var Separator4 = styled("hr")(({ theme }) => ({
   margin: "0.25rem 0",
   border: "none",
   borderTop: `1px solid ${theme.palette.divider}`
@@ -9843,7 +9970,7 @@ var ContextMenu = forwardRef(
           $x: pos.x,
           $y: pos.y,
           children: items.map(
-            (item) => item.separator ? /* @__PURE__ */ jsx(Separator3, { role: "separator" }, item.key) : /* @__PURE__ */ jsxs(
+            (item) => item.separator ? /* @__PURE__ */ jsx(Separator4, { role: "separator" }, item.key) : /* @__PURE__ */ jsxs(
               MenuItem,
               {
                 role: "menuitem",
@@ -9865,7 +9992,7 @@ var ContextMenu = forwardRef(
   }
 );
 ContextMenu.displayName = "ContextMenu";
-var Root47 = styled("div")(({ theme }) => ({
+var Root48 = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
   alignItems: "center",
@@ -9893,7 +10020,7 @@ var Description8 = styled("p")(({ theme }) => ({
   maxWidth: "28rem"
 }));
 var EmptyState = forwardRef(
-  ({ icon, title, description, action, ...props }, ref) => /* @__PURE__ */ jsxs(Root47, { ref, ...props, children: [
+  ({ icon, title, description, action, ...props }, ref) => /* @__PURE__ */ jsxs(Root48, { ref, ...props, children: [
     /* @__PURE__ */ jsx(IconWrap3, { "aria-hidden": true, children: icon ?? /* @__PURE__ */ jsx(InboxOutlinedIcon, {}) }),
     /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx(Title6, { children: title }),
@@ -9913,7 +10040,7 @@ var FONT_SIZE2 = {
   md: "0.9375rem",
   lg: "1rem"
 };
-var Root48 = styled("ul", {
+var Root49 = styled("ul", {
   shouldForwardProp: (p) => p !== "$variant"
 })(({ theme, $variant }) => ({
   listStyle: "none",
@@ -10008,7 +10135,7 @@ var SuffixWrap = styled("span")({
 var List4 = forwardRef(
   ({ items, size = "md", variant = "default", dividers = true, ...props }, ref) => {
     const effectiveVariant = !dividers && variant === "default" ? "default" : variant;
-    return /* @__PURE__ */ jsx(Root48, { ref, $variant: effectiveVariant, role: "list", ...props, children: items.map((item) => /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(Root49, { ref, $variant: effectiveVariant, role: "list", ...props, children: items.map((item) => /* @__PURE__ */ jsxs(
       Item3,
       {
         role: "listitem",
@@ -10047,7 +10174,7 @@ var speedDuration = {
   normal: "20s",
   fast: "10s"
 };
-var Root49 = styled("div")({
+var Root50 = styled("div")({
   overflow: "hidden",
   width: "100%",
   userSelect: "none"
@@ -10078,7 +10205,7 @@ var Marquee = forwardRef(
       /* @__PURE__ */ jsx(ItemWrap, { $gap: gapValue, "aria-hidden": "false", children }),
       /* @__PURE__ */ jsx(ItemWrap, { $gap: gapValue, "aria-hidden": "true", children })
     ] });
-    return /* @__PURE__ */ jsx(Root49, { ref, ...props, children: /* @__PURE__ */ jsx(Track5, { $direction: direction, $speed: speed, $pauseOnHover: pauseOnHover, $gap: gapValue, children: content }) });
+    return /* @__PURE__ */ jsx(Root50, { ref, ...props, children: /* @__PURE__ */ jsx(Track5, { $direction: direction, $speed: speed, $pauseOnHover: pauseOnHover, $gap: gapValue, children: content }) });
   }
 );
 Marquee.displayName = "Marquee";
@@ -10234,7 +10361,167 @@ function Modal({
   );
 }
 var modalSizes = ["sm", "md", "lg", "xl", "full"];
-var Root50 = styled("div")({ width: "100%" });
+var fadeIn4 = keyframes$1`from { opacity: 0; } to { opacity: 1; }`;
+var slideInLeft = keyframes$1`from { transform: translateX(-100%); } to { transform: translateX(0); }`;
+var slideInRight = keyframes$1`from { transform: translateX(100%); } to { transform: translateX(0); }`;
+var slideInTop = keyframes$1`from { transform: translateY(-100%); } to { transform: translateY(0); }`;
+var slideInBottom = keyframes$1`from { transform: translateY(100%); } to { transform: translateY(0); }`;
+var SLIDE_ANIMATION = {
+  left: slideInLeft,
+  right: slideInRight,
+  top: slideInTop,
+  bottom: slideInBottom
+};
+var SIZE_MAP3 = {
+  sm: "16rem",
+  md: "24rem",
+  lg: "32rem",
+  full: "100%"
+};
+var Backdrop2 = styled("div")(({ theme }) => ({
+  position: "fixed",
+  inset: 0,
+  backgroundColor: theme.palette.mode === "dark" ? "rgba(0,0,0,0.7)" : "rgba(0,0,0,0.5)",
+  zIndex: 1300,
+  animation: `${fadeIn4} 200ms ease`
+}));
+var Panel2 = styled("div", {
+  shouldForwardProp: (prop) => prop !== "$position" && prop !== "$size"
+})(({ theme, $position, $size }) => {
+  const isVertical = $position === "left" || $position === "right";
+  const size = SIZE_MAP3[$size];
+  return {
+    position: "fixed",
+    backgroundColor: theme.palette.background.paper,
+    border: `1px solid ${theme.palette.divider}`,
+    boxShadow: theme.shadows[8],
+    display: "flex",
+    flexDirection: "column",
+    zIndex: 1301,
+    animation: `${SLIDE_ANIMATION[$position]} 250ms cubic-bezier(0.4, 0, 0.2, 1)`,
+    ...isVertical ? {
+      top: 0,
+      bottom: 0,
+      [$position]: 0,
+      width: $size === "full" ? "100%" : size,
+      maxWidth: "100vw"
+    } : {
+      left: 0,
+      right: 0,
+      [$position]: 0,
+      height: $size === "full" ? "100%" : size,
+      maxHeight: "100vh"
+    }
+  };
+});
+var Header3 = styled("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: "1.25rem 1.5rem",
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  flexShrink: 0
+}));
+var Title8 = styled("h2")(({ theme }) => ({
+  margin: 0,
+  fontFamily: theme.typography.fontFamily,
+  fontSize: "1.125rem",
+  fontWeight: 700,
+  color: theme.palette.text.primary,
+  lineHeight: 1.4
+}));
+var CloseButton4 = styled("button")(({ theme }) => ({
+  appearance: "none",
+  border: "none",
+  background: "none",
+  cursor: "pointer",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "2rem",
+  height: "2rem",
+  borderRadius: "0.375rem",
+  color: theme.palette.text.secondary,
+  flexShrink: 0,
+  transition: "background-color 150ms ease, color 150ms ease",
+  "&:hover": {
+    backgroundColor: theme.palette.action.hover,
+    color: theme.palette.text.primary
+  },
+  "&:focus-visible": {
+    outline: `3px solid ${theme.palette.primary.main}`,
+    outlineOffset: "2px"
+  }
+}));
+var Body3 = styled("div")(({ theme }) => ({
+  padding: "1.5rem",
+  overflowY: "auto",
+  flex: 1,
+  fontFamily: theme.typography.fontFamily,
+  color: theme.palette.text.primary
+}));
+var Footer5 = styled("div")(({ theme }) => ({
+  padding: "1rem 1.5rem",
+  borderTop: `1px solid ${theme.palette.divider}`,
+  display: "flex",
+  justifyContent: "flex-end",
+  gap: "0.75rem",
+  flexShrink: 0
+}));
+function Sheet({
+  open,
+  onClose,
+  title,
+  children,
+  footer,
+  position = "right",
+  size = "md",
+  closeOnBackdrop = true,
+  hideCloseButton = false
+}) {
+  useEffect(() => {
+    if (!open) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [open]);
+  useEffect(() => {
+    if (!open) return;
+    const handleKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [open, onClose]);
+  if (!open) return null;
+  return createPortal(
+    /* @__PURE__ */ jsx(Backdrop2, { "aria-hidden": "false", onClick: closeOnBackdrop ? onClose : void 0, children: /* @__PURE__ */ jsxs(
+      Panel2,
+      {
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": title ? "sheet-title" : void 0,
+        $position: position,
+        $size: size,
+        onClick: (e) => e.stopPropagation(),
+        children: [
+          (title || !hideCloseButton) && /* @__PURE__ */ jsxs(Header3, { children: [
+            title ? /* @__PURE__ */ jsx(Title8, { id: "sheet-title", children: title }) : /* @__PURE__ */ jsx("span", {}),
+            !hideCloseButton && /* @__PURE__ */ jsx(CloseButton4, { "aria-label": "Zamknij", onClick: onClose, children: /* @__PURE__ */ jsx(CloseIcon, { "aria-hidden": true, style: { fontSize: 16 } }) })
+          ] }),
+          children && /* @__PURE__ */ jsx(Body3, { children }),
+          footer && /* @__PURE__ */ jsx(Footer5, { children: footer })
+        ]
+      }
+    ) }),
+    document.body
+  );
+}
+var sheetPositions = ["left", "right", "top", "bottom"];
+var sheetSizes = ["sm", "md", "lg", "full"];
+var Root51 = styled("div")({ width: "100%" });
 var TabList = styled("div", {
   shouldForwardProp: (prop) => prop !== "$variant"
 })(({ theme, $variant }) => ({
@@ -10300,7 +10587,7 @@ var TabButton = styled("button", {
     }
   }
 }));
-var Panel2 = styled("div")(({ theme }) => ({
+var Panel3 = styled("div")(({ theme }) => ({
   paddingTop: "1.25rem",
   fontFamily: theme.typography.fontFamily,
   color: theme.palette.text.primary
@@ -10314,7 +10601,7 @@ var Tabs = forwardRef(
       onChange?.(key);
     };
     const activeTab = tabs.find((t) => t.key === activeKey);
-    return /* @__PURE__ */ jsxs(Root50, { ref, ...props, children: [
+    return /* @__PURE__ */ jsxs(Root51, { ref, ...props, children: [
       /* @__PURE__ */ jsx(TabList, { role: "tablist", $variant: variant, children: tabs.map((tab) => /* @__PURE__ */ jsx(
         TabButton,
         {
@@ -10333,7 +10620,7 @@ var Tabs = forwardRef(
         tab.key
       )) }),
       activeTab && /* @__PURE__ */ jsx(
-        Panel2,
+        Panel3,
         {
           role: "tabpanel",
           id: `tabpanel-${activeTab.key}`,
@@ -10346,7 +10633,7 @@ var Tabs = forwardRef(
 );
 Tabs.displayName = "Tabs";
 var tabsVariants = ["underline", "pills", "bordered"];
-var Root51 = styled("div")(({ theme }) => ({
+var Root52 = styled("div")(({ theme }) => ({
   display: "grid",
   gridTemplateColumns: "4.5rem 1fr",
   gap: "0.875rem",
@@ -10362,7 +10649,7 @@ var ImageWrap4 = styled("div")(({ theme }) => ({
   flexShrink: 0
 }));
 var Info5 = styled("div")({ display: "grid", gap: "0.5rem" });
-var Row5 = styled("div")({
+var Row6 = styled("div")({
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
@@ -10398,14 +10685,14 @@ var CartDrawerItem = ({
   imageAlt,
   onQuantityChange,
   onRemove
-}) => /* @__PURE__ */ jsxs(Root51, { children: [
+}) => /* @__PURE__ */ jsxs(Root52, { children: [
   /* @__PURE__ */ jsx(ImageWrap4, { children: /* @__PURE__ */ jsx(ProductCardImage, { src: imageUrl, alt: imageAlt ?? name }) }),
   /* @__PURE__ */ jsxs(Info5, { children: [
-    /* @__PURE__ */ jsxs(Row5, { children: [
+    /* @__PURE__ */ jsxs(Row6, { children: [
       /* @__PURE__ */ jsx(Name12, { children: name }),
       /* @__PURE__ */ jsx(Price3, { children: price })
     ] }),
-    /* @__PURE__ */ jsxs(Row5, { children: [
+    /* @__PURE__ */ jsxs(Row6, { children: [
       /* @__PURE__ */ jsx(
         QuantitySelector,
         {
@@ -10426,7 +10713,7 @@ var Overlay3 = styled("div")(({ $open }) => ({
   backgroundColor: "rgba(0,0,0,0.36)",
   zIndex: 1200
 }));
-var Panel3 = styled("aside")(({ theme }) => ({
+var Panel4 = styled("aside")(({ theme }) => ({
   position: "absolute",
   top: 0,
   right: 0,
@@ -10438,14 +10725,14 @@ var Panel3 = styled("aside")(({ theme }) => ({
   boxShadow: theme.shadows[5],
   fontFamily: theme.typography.fontFamily
 }));
-var Header3 = styled("div")(({ theme }) => ({
+var Header4 = styled("div")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
   padding: "1rem 1.25rem",
   borderBottom: `1px solid ${theme.palette.divider}`
 }));
-var Title8 = styled("h2")(({ theme }) => ({
+var Title9 = styled("h2")(({ theme }) => ({
   margin: 0,
   fontSize: "1.125rem",
   color: theme.palette.text.primary
@@ -10463,13 +10750,13 @@ var Items = styled("div")({
   padding: "1rem 1.25rem",
   overflow: "auto"
 });
-var Row6 = styled("div")({
+var Row7 = styled("div")({
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
   gap: "0.75rem"
 });
-var Footer5 = styled("div")(({ theme }) => ({
+var Footer6 = styled("div")(({ theme }) => ({
   display: "grid",
   gap: "1rem",
   marginTop: "auto",
@@ -10489,9 +10776,9 @@ var CartDrawer = forwardRef(
     onQuantityChange,
     onRemove,
     ...props
-  }, ref) => /* @__PURE__ */ jsx(Overlay3, { $open: open, children: /* @__PURE__ */ jsxs(Panel3, { ref, "aria-hidden": !open, "aria-label": title, ...props, children: [
-    /* @__PURE__ */ jsxs(Header3, { children: [
-      /* @__PURE__ */ jsx(Title8, { children: title }),
+  }, ref) => /* @__PURE__ */ jsx(Overlay3, { $open: open, children: /* @__PURE__ */ jsxs(Panel4, { ref, "aria-hidden": !open, "aria-label": title, ...props, children: [
+    /* @__PURE__ */ jsxs(Header4, { children: [
+      /* @__PURE__ */ jsx(Title9, { children: title }),
       /* @__PURE__ */ jsx(IconButton, { type: "button", "aria-label": closeLabel, onClick: onClose, children: "\xD7" })
     ] }),
     /* @__PURE__ */ jsx(Items, { children: items.map((item) => /* @__PURE__ */ jsx(
@@ -10503,8 +10790,8 @@ var CartDrawer = forwardRef(
       },
       item.id
     )) }),
-    /* @__PURE__ */ jsxs(Footer5, { children: [
-      /* @__PURE__ */ jsxs(Row6, { children: [
+    /* @__PURE__ */ jsxs(Footer6, { children: [
+      /* @__PURE__ */ jsxs(Row7, { children: [
         /* @__PURE__ */ jsx("strong", { children: "Suma" }),
         /* @__PURE__ */ jsx("strong", { children: subtotal })
       ] }),
@@ -10513,7 +10800,7 @@ var CartDrawer = forwardRef(
   ] }) })
 );
 CartDrawer.displayName = "CartDrawer";
-var Root52 = styled("aside")(({ theme }) => ({
+var Root53 = styled("aside")(({ theme }) => ({
   display: "grid",
   gap: "1.5rem",
   width: "100%",
@@ -10524,13 +10811,13 @@ var Root52 = styled("aside")(({ theme }) => ({
   backgroundColor: theme.palette.background.paper,
   fontFamily: theme.typography.fontFamily
 }));
-var Header4 = styled("div")({
+var Header5 = styled("div")({
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
   gap: "1rem"
 });
-var Title9 = styled("h2")(({ theme }) => ({
+var Title10 = styled("h2")(({ theme }) => ({
   margin: 0,
   color: theme.palette.text.primary,
   fontSize: "1.125rem"
@@ -10605,9 +10892,9 @@ var FilterSidebar = forwardRef(
     onPriceRangeChange,
     onClear,
     ...props
-  }, ref) => /* @__PURE__ */ jsxs(Root52, { ref, "aria-label": "Filtry produkt\xF3w", ...props, children: [
-    /* @__PURE__ */ jsxs(Header4, { children: [
-      /* @__PURE__ */ jsx(Title9, { children: "Filtry" }),
+  }, ref) => /* @__PURE__ */ jsxs(Root53, { ref, "aria-label": "Filtry produkt\xF3w", ...props, children: [
+    /* @__PURE__ */ jsxs(Header5, { children: [
+      /* @__PURE__ */ jsx(Title10, { children: "Filtry" }),
       onClear && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: onClear, children: "Wyczy\u015B\u0107" })
     ] }),
     priceRange && /* @__PURE__ */ jsxs(Group, { children: [
@@ -10648,7 +10935,7 @@ var FilterSidebar = forwardRef(
   ] })
 );
 FilterSidebar.displayName = "FilterSidebar";
-var Root53 = styled("li")({
+var Root54 = styled("li")({
   display: "grid",
   gridTemplateColumns: "3.5rem 1fr auto",
   alignItems: "center",
@@ -10692,7 +10979,7 @@ var OrderSummaryItem = ({
   imageAlt,
   quantity,
   meta
-}) => /* @__PURE__ */ jsxs(Root53, { children: [
+}) => /* @__PURE__ */ jsxs(Root54, { children: [
   /* @__PURE__ */ jsx(ImageWrap5, { children: /* @__PURE__ */ jsx(ProductCardImage, { src: imageUrl, alt: imageAlt ?? String(name) }) }),
   /* @__PURE__ */ jsxs(Info6, { children: [
     /* @__PURE__ */ jsx(Name13, { children: name }),
@@ -10708,7 +10995,7 @@ var OrderSummaryItem = ({
   /* @__PURE__ */ jsx(Price4, { children: price })
 ] });
 OrderSummaryItem.displayName = "OrderSummaryItem";
-var Root54 = styled("div", {
+var Root55 = styled("div", {
   shouldForwardProp: (prop) => prop !== "$total"
 })(({ theme, $total }) => ({
   display: "flex",
@@ -10720,13 +11007,13 @@ var Root54 = styled("div", {
   fontWeight: $total ? 800 : 400,
   "& dt, & dd": { margin: 0 }
 }));
-var OrderSummaryRow = ({ label, value, total = false }) => /* @__PURE__ */ jsxs(Root54, { as: "div", $total: total, children: [
+var OrderSummaryRow = ({ label, value, total = false }) => /* @__PURE__ */ jsxs(Root55, { as: "div", $total: total, children: [
   /* @__PURE__ */ jsx("dt", { children: label }),
   /* @__PURE__ */ jsx("dd", { children: value })
 ] });
 OrderSummaryRow.displayName = "OrderSummaryRow";
-var Root55 = styled(Card)({ display: "grid", gap: "1rem" });
-var Title10 = styled("h2")(({ theme }) => ({
+var Root56 = styled(Card)({ display: "grid", gap: "1rem" });
+var Title11 = styled("h2")(({ theme }) => ({
   margin: 0,
   fontFamily: theme.typography.fontFamily,
   fontSize: "1.125rem",
@@ -10767,8 +11054,8 @@ var OrderSummary = forwardRef(
     ctaLabel = "Przejd\u017A do kasy",
     onCheckout,
     ...props
-  }, ref) => /* @__PURE__ */ jsxs(Root55, { ref, variant: "default", padding: "lg", rounded: "lg", ...props, children: [
-    /* @__PURE__ */ jsx(Title10, { children: title }),
+  }, ref) => /* @__PURE__ */ jsxs(Root56, { ref, variant: "default", padding: "lg", rounded: "lg", ...props, children: [
+    /* @__PURE__ */ jsx(Title11, { children: title }),
     items.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(SectionTitle, { children: itemsTitle }),
       /* @__PURE__ */ jsx(ItemList, { children: items.map((item) => /* @__PURE__ */ jsx(OrderSummaryItem, { ...item }, item.id)) }),
@@ -10787,7 +11074,7 @@ var OrderSummary = forwardRef(
   ] })
 );
 OrderSummary.displayName = "OrderSummary";
-var Root56 = styled("div")(({ theme }) => ({
+var Root57 = styled("div")(({ theme }) => ({
   fontFamily: theme.typography.fontFamily
 }));
 var Grid2 = styled("div", {
@@ -10822,7 +11109,7 @@ var ScrollTrack = styled("div")({
   }
 });
 var RelatedProducts = forwardRef(
-  ({ products, title = "Podobne produkty", layout = "grid", columns = 4, ...props }, ref) => /* @__PURE__ */ jsxs(Root56, { ref, ...props, children: [
+  ({ products, title = "Podobne produkty", layout = "grid", columns = 4, ...props }, ref) => /* @__PURE__ */ jsxs(Root57, { ref, ...props, children: [
     /* @__PURE__ */ jsx(SectionHeading, { title, align: "left", style: { marginBottom: "1.5rem" } }),
     layout === "scroll" ? /* @__PURE__ */ jsx(ScrollTrack, { children: products.map((product, i) => /* @__PURE__ */ jsx(ProductCard, { ...product }, product.name + i)) }) : /* @__PURE__ */ jsx(Grid2, { $columns: columns, children: products.map((product, i) => /* @__PURE__ */ jsx(ProductCard, { ...product }, product.name + i)) })
   ] })
@@ -10838,7 +11125,7 @@ var Card2 = styled("div")(({ theme }) => ({
   gap: "0.75rem",
   fontFamily: theme.typography.fontFamily
 }));
-var Header5 = styled("div")({
+var Header6 = styled("div")({
   display: "flex",
   alignItems: "flex-start",
   gap: "0.875rem"
@@ -10857,7 +11144,7 @@ var ReviewDate = styled("div")(({ theme }) => ({
   color: theme.palette.text.secondary,
   marginTop: "0.125rem"
 }));
-var Title11 = styled("div")(({ theme }) => ({
+var Title12 = styled("div")(({ theme }) => ({
   fontSize: "0.9375rem",
   fontWeight: 700,
   color: theme.palette.text.primary
@@ -10876,7 +11163,7 @@ var HelpfulRow = styled("div")(({ theme }) => ({
   color: theme.palette.text.secondary
 }));
 var ReviewItem = ({ review }) => /* @__PURE__ */ jsxs(Card2, { children: [
-  /* @__PURE__ */ jsxs(Header5, { children: [
+  /* @__PURE__ */ jsxs(Header6, { children: [
     /* @__PURE__ */ jsx(Avatar, { initials: review.author.slice(0, 2).toUpperCase(), size: "sm" }),
     /* @__PURE__ */ jsxs(AuthorInfo, { children: [
       /* @__PURE__ */ jsxs(AuthorName, { children: [
@@ -10893,7 +11180,7 @@ var ReviewItem = ({ review }) => /* @__PURE__ */ jsxs(Card2, { children: [
     ] }),
     /* @__PURE__ */ jsx(Rating, { value: review.rating, size: "sm", readonly: true })
   ] }),
-  review.title && /* @__PURE__ */ jsx(Title11, { children: review.title }),
+  review.title && /* @__PURE__ */ jsx(Title12, { children: review.title }),
   /* @__PURE__ */ jsx(Content3, { children: review.content }),
   review.helpfulCount !== void 0 && /* @__PURE__ */ jsxs(HelpfulRow, { children: [
     /* @__PURE__ */ jsx(ThumbUpOutlinedIcon, { "aria-hidden": true, style: { fontSize: 14 } }),
@@ -10902,7 +11189,7 @@ var ReviewItem = ({ review }) => /* @__PURE__ */ jsxs(Card2, { children: [
   ] })
 ] });
 ReviewItem.displayName = "ReviewItem";
-var Root57 = styled("div")(({ theme }) => ({
+var Root58 = styled("div")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   gap: "2rem",
@@ -10964,7 +11251,7 @@ var ReviewSummary = ({
   ratingDistribution
 }) => {
   const totalDist = ratingDistribution ? Object.values(ratingDistribution).reduce((a, b) => a + b, 0) : 0;
-  return /* @__PURE__ */ jsxs(Root57, { children: [
+  return /* @__PURE__ */ jsxs(Root58, { children: [
     /* @__PURE__ */ jsxs(AverageBlock, { children: [
       /* @__PURE__ */ jsx(Score, { children: averageRating.toFixed(1) }),
       /* @__PURE__ */ jsx(Rating, { value: averageRating, size: "sm", readonly: true }),
@@ -10988,7 +11275,7 @@ var ReviewSummary = ({
   ] });
 };
 ReviewSummary.displayName = "ReviewSummary";
-var Root58 = styled("div")(({ theme }) => ({
+var Root59 = styled("div")(({ theme }) => ({
   fontFamily: theme.typography.fontFamily
 }));
 var ReviewList = styled("div")({
@@ -11004,7 +11291,7 @@ var ReviewSection = forwardRef(
     title = "Opinie klient\xF3w",
     ratingDistribution,
     ...props
-  }, ref) => /* @__PURE__ */ jsxs(Root58, { ref, ...props, children: [
+  }, ref) => /* @__PURE__ */ jsxs(Root59, { ref, ...props, children: [
     /* @__PURE__ */ jsx(SectionHeading, { title, align: "left", style: { marginBottom: "1.5rem" } }),
     averageRating !== void 0 && /* @__PURE__ */ jsx("div", { style: { marginBottom: "2rem" }, children: /* @__PURE__ */ jsx(
       ReviewSummary,
@@ -11061,13 +11348,12 @@ var CommentSection = forwardRef(
   ({
     title = "Komentarze",
     comments,
-    maxWidth = "xl",
     onLike,
     onReply,
     ...rest
   }, ref) => {
     const total = countTotal(comments);
-    return /* @__PURE__ */ jsx(Section, { ref, ...rest, children: /* @__PURE__ */ jsxs(Container, { maxWidth, children: [
+    return /* @__PURE__ */ jsxs(Section, { ref, ...rest, children: [
       /* @__PURE__ */ jsxs(Heading, { children: [
         title,
         /* @__PURE__ */ jsxs(CommentCount, { children: [
@@ -11089,7 +11375,7 @@ var CommentSection = forwardRef(
           reply.id
         )) })
       ] }, comment.id)) })
-    ] }) });
+    ] });
   }
 );
 CommentSection.displayName = "CommentSection";
@@ -11102,12 +11388,11 @@ var FaqSection = forwardRef(
     description,
     items,
     headingAlign = "center",
-    maxWidth = "xl",
     defaultOpenIndex,
     ...rest
   }, ref) => {
     const hasHeading = Boolean(title || description);
-    return /* @__PURE__ */ jsx(Section, { ref, ...rest, children: /* @__PURE__ */ jsxs(Container, { maxWidth, children: [
+    return /* @__PURE__ */ jsxs(Section, { ref, ...rest, children: [
       hasHeading && /* @__PURE__ */ jsx(SectionHeading, { title: title ?? "", description, align: headingAlign }),
       /* @__PURE__ */ jsx(List6, { $hasHeading: hasHeading, children: items.map((item, index) => /* @__PURE__ */ jsx(
         FaqItem,
@@ -11117,7 +11402,7 @@ var FaqSection = forwardRef(
         },
         `${item.question}-${index}`
       )) })
-    ] }) });
+    ] });
   }
 );
 FaqSection.displayName = "FaqSection";
@@ -11144,11 +11429,10 @@ var FeatureGrid = forwardRef(
     columns = 3,
     cardVariant = "default",
     itemLayout = "card",
-    maxWidth = "xl",
     ...rest
   }, ref) => {
     const hasHeading = Boolean(title || description);
-    return /* @__PURE__ */ jsx(Section, { ref, ...rest, children: /* @__PURE__ */ jsxs(Container, { maxWidth, children: [
+    return /* @__PURE__ */ jsxs(Section, { ref, ...rest, children: [
       hasHeading && /* @__PURE__ */ jsx(SectionHeading, { title: title ?? "", description, align: headingAlign }),
       /* @__PURE__ */ jsx(Grid3, { $columns: columns, $hasHeading: hasHeading, $iconLeft: itemLayout === "icon-left", children: features.map((feature, index) => /* @__PURE__ */ jsx(
         FeatureItem,
@@ -11159,7 +11443,7 @@ var FeatureGrid = forwardRef(
         },
         `${feature.title}-${index}`
       )) })
-    ] }) });
+    ] });
   }
 );
 FeatureGrid.displayName = "FeatureGrid";
@@ -11189,11 +11473,10 @@ var LogoCloud = forwardRef(
     variant = "plain",
     monochrome = true,
     logoHeight = 40,
-    maxWidth = "xl",
     ...rest
   }, ref) => {
     const hasHeading = Boolean(title || description);
-    return /* @__PURE__ */ jsx(Section, { ref, ...rest, children: /* @__PURE__ */ jsxs(Container, { maxWidth, children: [
+    return /* @__PURE__ */ jsxs(Section, { ref, ...rest, children: [
       hasHeading && title && /* @__PURE__ */ jsx(SectionHeading, { title, description, align: headingAlign }),
       hasHeading && !title && description && /* @__PURE__ */ jsx(SectionHeading, { title: description, align: headingAlign, as: "h2" }),
       /* @__PURE__ */ jsx(Grid4, { $columns: columns, $hasHeading: hasHeading, children: logos.map((logo) => {
@@ -11209,7 +11492,7 @@ var LogoCloud = forwardRef(
           key
         );
       }) })
-    ] }) });
+    ] });
   }
 );
 LogoCloud.displayName = "LogoCloud";
@@ -11291,7 +11574,6 @@ var NewsletterSection = forwardRef(
     headingAlign = "center",
     layout = "centered",
     cardVariant = "default",
-    maxWidth = "xl",
     onSubmit,
     ...rest
   }, ref) => {
@@ -11322,7 +11604,7 @@ var NewsletterSection = forwardRef(
       ] }),
       privacyNote && /* @__PURE__ */ jsx(PrivacyNote, { children: privacyNote })
     ] });
-    return /* @__PURE__ */ jsx(Section, { ref, ...rest, children: /* @__PURE__ */ jsx(Container, { maxWidth, children: /* @__PURE__ */ jsx(Card, { variant: cardVariant, padding: "xl", rounded: "lg", children: isCentered ? /* @__PURE__ */ jsxs(CenteredInner, { children: [
+    return /* @__PURE__ */ jsx(Section, { ref, ...rest, children: /* @__PURE__ */ jsx(Card, { variant: cardVariant, padding: "xl", rounded: "lg", children: isCentered ? /* @__PURE__ */ jsxs(CenteredInner, { children: [
       /* @__PURE__ */ jsx(
         SectionHeading,
         {
@@ -11335,7 +11617,7 @@ var NewsletterSection = forwardRef(
     ] }) : /* @__PURE__ */ jsxs(SplitInner, { children: [
       /* @__PURE__ */ jsx(SectionHeading, { title: title ?? "", description, align: "left" }),
       formNode
-    ] }) }) }) });
+    ] }) }) });
   }
 );
 NewsletterSection.displayName = "NewsletterSection";
@@ -11450,11 +11732,10 @@ var StatsSection = forwardRef(
     columns = 3,
     cardVariant = "default",
     statAlign = "center",
-    maxWidth = "xl",
     ...rest
   }, ref) => {
     const hasHeading = Boolean(title || description);
-    return /* @__PURE__ */ jsx(Section, { ref, ...rest, children: /* @__PURE__ */ jsxs(Container, { maxWidth, children: [
+    return /* @__PURE__ */ jsxs(Section, { ref, ...rest, children: [
       hasHeading && /* @__PURE__ */ jsx(SectionHeading, { title: title ?? "", description, align: headingAlign }),
       /* @__PURE__ */ jsx(Grid6, { $columns: columns, $hasHeading: hasHeading, children: stats.map((stat, index) => /* @__PURE__ */ jsx(
         StatCard,
@@ -11465,7 +11746,7 @@ var StatsSection = forwardRef(
         },
         `${stat.label}-${index}`
       )) })
-    ] }) });
+    ] });
   }
 );
 StatsSection.displayName = "StatsSection";
@@ -11492,11 +11773,10 @@ var TeamSection = forwardRef(
     headingAlign = "center",
     columns = 3,
     cardVariant = "default",
-    maxWidth = "xl",
     ...rest
   }, ref) => {
     const hasHeading = Boolean(title || description);
-    return /* @__PURE__ */ jsx(Section, { ref, ...rest, children: /* @__PURE__ */ jsxs(Container, { maxWidth, children: [
+    return /* @__PURE__ */ jsxs(Section, { ref, ...rest, children: [
       hasHeading && title && /* @__PURE__ */ jsx(SectionHeading, { title, description, align: headingAlign }),
       hasHeading && !title && description && /* @__PURE__ */ jsx(SectionHeading, { title: description, align: headingAlign, as: "h2" }),
       /* @__PURE__ */ jsx(Grid7, { $columns: columns, $hasHeading: hasHeading, children: members.map((member) => /* @__PURE__ */ jsx(
@@ -11507,7 +11787,7 @@ var TeamSection = forwardRef(
         },
         `${member.name}-${member.role}`
       )) })
-    ] }) });
+    ] });
   }
 );
 TeamSection.displayName = "TeamSection";
@@ -11534,11 +11814,10 @@ var TestimonialsSection = forwardRef(
     headingAlign = "center",
     columns = 3,
     cardVariant = "default",
-    maxWidth = "xl",
     ...rest
   }, ref) => {
     const hasHeading = Boolean(title || description);
-    return /* @__PURE__ */ jsx(Section, { ref, ...rest, children: /* @__PURE__ */ jsxs(Container, { maxWidth, children: [
+    return /* @__PURE__ */ jsxs(Section, { ref, ...rest, children: [
       hasHeading && /* @__PURE__ */ jsx(SectionHeading, { title: title ?? "", description, align: headingAlign }),
       /* @__PURE__ */ jsx(Grid8, { $columns: columns, $hasHeading: hasHeading, children: testimonials.map((testimonial, index) => /* @__PURE__ */ jsx(
         TestimonialCard,
@@ -11548,12 +11827,12 @@ var TestimonialsSection = forwardRef(
         },
         `${testimonial.authorName}-${index}`
       )) })
-    ] }) });
+    ] });
   }
 );
 TestimonialsSection.displayName = "TestimonialsSection";
 var testimonialsSectionColumns = [1, 2, 3];
-var fadeIn4 = keyframes$1`
+var fadeIn5 = keyframes$1`
   from { opacity: 0; }
   to   { opacity: 1; }
 `;
@@ -11561,7 +11840,7 @@ var slideDown = keyframes$1`
   from { opacity: 0; transform: translateY(-8px) scale(0.98); }
   to   { opacity: 1; transform: translateY(0) scale(1); }
 `;
-var Backdrop2 = styled("div")({
+var Backdrop3 = styled("div")({
   position: "fixed",
   inset: 0,
   zIndex: 1500,
@@ -11570,7 +11849,7 @@ var Backdrop2 = styled("div")({
   alignItems: "flex-start",
   justifyContent: "center",
   padding: "8vh 1rem 1rem",
-  animation: `${fadeIn4} 150ms ease`
+  animation: `${fadeIn5} 150ms ease`
 });
 var Dialog2 = styled("div")(({ theme }) => ({
   width: "100%",
@@ -11700,7 +11979,7 @@ var EmptyState2 = styled("div")(({ theme }) => ({
   fontSize: "0.9375rem",
   color: theme.palette.text.secondary
 }));
-var Footer6 = styled("div")(({ theme }) => ({
+var Footer7 = styled("div")(({ theme }) => ({
   display: "flex",
   gap: "1.25rem",
   padding: "0.5rem 1rem",
@@ -11793,7 +12072,7 @@ function CommandPalette({
   let globalIndex = 0;
   return createPortal(
     /* @__PURE__ */ jsx(
-      Backdrop2,
+      Backdrop3,
       {
         role: "presentation",
         onClick: (e) => {
@@ -11855,7 +12134,7 @@ function CommandPalette({
                   );
                 })
               ] }, group.id)) }),
-              /* @__PURE__ */ jsxs(Footer6, { id: `${id}-hint`, "aria-hidden": "true", children: [
+              /* @__PURE__ */ jsxs(Footer7, { id: `${id}-hint`, "aria-hidden": "true", children: [
                 /* @__PURE__ */ jsxs(FooterHint, { children: [
                   /* @__PURE__ */ jsx(Kbd, { children: "\u2191" }),
                   /* @__PURE__ */ jsx(Kbd, { children: "\u2193" }),
@@ -11929,7 +12208,7 @@ var TopRow = styled("div")({
   flexWrap: "wrap"
 });
 var TextBlock2 = styled("div")({ flex: 1, minWidth: "16rem" });
-var Title12 = styled("p")(({ theme }) => ({
+var Title13 = styled("p")(({ theme }) => ({
   margin: "0 0 0.25rem",
   fontFamily: theme.typography.fontFamily,
   fontSize: "1rem",
@@ -11990,7 +12269,7 @@ var TextButton = styled(BaseButton)(({ theme }) => ({
   padding: "0.5625rem 0.5rem",
   "&:hover": { color: theme.palette.text.primary }
 }));
-var Panel4 = styled("div")(({ theme }) => ({
+var Panel5 = styled("div")(({ theme }) => ({
   borderTop: `1px solid ${theme.palette.divider}`,
   paddingTop: "1rem",
   display: "flex",
@@ -12094,7 +12373,7 @@ function CookieConsent({
     /* @__PURE__ */ jsx(Bar2, { role: "region", "aria-label": "Zgoda na pliki cookie", "aria-live": "polite", children: /* @__PURE__ */ jsxs(Inner4, { children: [
       /* @__PURE__ */ jsxs(TopRow, { children: [
         /* @__PURE__ */ jsxs(TextBlock2, { children: [
-          /* @__PURE__ */ jsx(Title12, { children: title }),
+          /* @__PURE__ */ jsx(Title13, { children: title }),
           /* @__PURE__ */ jsxs(Description9, { children: [
             description,
             privacyPolicyLabel && privacyPolicyHref && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -12118,7 +12397,7 @@ function CookieConsent({
           /* @__PURE__ */ jsx(PrimaryButton, { type: "button", onClick: handleAcceptAll, children: acceptAllLabel })
         ] })
       ] }),
-      expanded && /* @__PURE__ */ jsxs(Panel4, { id: `${id}-panel`, role: "group", "aria-label": "Kategorie plik\xF3w cookie", children: [
+      expanded && /* @__PURE__ */ jsxs(Panel5, { id: `${id}-panel`, role: "group", "aria-label": "Kategorie plik\xF3w cookie", children: [
         categories.map((cat) => /* @__PURE__ */ jsxs(CategoryRow, { children: [
           /* @__PURE__ */ jsxs(CategoryText, { children: [
             /* @__PURE__ */ jsx(CategoryLabel, { children: cat.label }),
@@ -12145,7 +12424,7 @@ function CookieConsent({
   );
 }
 var defaultCookieCategories = DEFAULT_CATEGORIES;
-var Root59 = styled("footer")(({ theme }) => ({
+var Root60 = styled("footer")(({ theme }) => ({
   width: "100%",
   backgroundColor: theme.palette.background.paper,
   borderTop: `1px solid ${theme.palette.divider}`
@@ -12273,7 +12552,7 @@ var SOCIAL_ICONS = {
     /* @__PURE__ */ jsx("polygon", { fill: "white", points: "9.75 15.02 15.5 12 9.75 8.98 9.75 15.02" })
   ] })
 };
-function Footer7({
+function Footer8({
   logo,
   description,
   columns = [],
@@ -12283,7 +12562,7 @@ function Footer7({
   style
 }) {
   const colCount = columns.length;
-  return /* @__PURE__ */ jsx(Root59, { style, children: /* @__PURE__ */ jsxs(Container, { maxWidth, style: { paddingTop: "3rem", paddingBottom: "2rem" }, children: [
+  return /* @__PURE__ */ jsx(Root60, { style, children: /* @__PURE__ */ jsxs(Container, { maxWidth, style: { paddingTop: "3rem", paddingBottom: "2rem" }, children: [
     (logo || description || colCount > 0) && /* @__PURE__ */ jsxs(TopRow2, { style: { "--col-count": colCount }, children: [
       (logo || description) && /* @__PURE__ */ jsxs(BrandBlock, { children: [
         logo,
@@ -12310,7 +12589,7 @@ function Footer7({
     ] })
   ] }) });
 }
-var Root60 = styled("header", {
+var Root61 = styled("header", {
   shouldForwardProp: (p) => p !== "$sticky" && p !== "$variant"
 })(({ theme, $sticky, $variant }) => ({
   position: $sticky ? "sticky" : "relative",
@@ -12422,7 +12701,7 @@ function Navbar({
   style
 }) {
   const [mobileOpen, setMobileOpen] = useState(false);
-  return /* @__PURE__ */ jsxs(Root60, { $sticky: sticky, $variant: variant, style, children: [
+  return /* @__PURE__ */ jsxs(Root61, { $sticky: sticky, $variant: variant, style, children: [
     /* @__PURE__ */ jsxs(
       Container,
       {
@@ -12545,7 +12824,30 @@ var MyThemeProvider = ({
     children
   ] });
 };
+function toggleLikeInTree(items, id) {
+  return items.map((comment) => {
+    if (comment.id === id) {
+      const isLiked = !comment.isLiked;
+      return {
+        ...comment,
+        isLiked,
+        likesCount: comment.likesCount !== void 0 ? comment.likesCount + (isLiked ? 1 : -1) : void 0
+      };
+    }
+    if (comment.replies?.length) {
+      return { ...comment, replies: toggleLikeInTree(comment.replies, id) };
+    }
+    return comment;
+  });
+}
+function useCommentLikes(initialComments) {
+  const [comments, setComments] = useState(initialComments);
+  const onLike = useCallback((commentId) => {
+    setComments((prev) => toggleLikeInTree(prev, commentId));
+  }, []);
+  return { comments, onLike };
+}
 
-export { Accordion, Alert, Article, AspectRatio, Avatar, BackToTop, Badge2 as Badge, BaseInput, BaseSelectInput, Box2 as Box, Breadcrumbs, Button, Card, Carousel, CartButton, CartDrawer, CartDrawerItem as CartDrawerItemComponent, CategoryCard, CategoryCardImage, CategoryCardInfo, CheckboxInput, CommandPalette, CommentActions, CommentBody, CommentCard, CommentMeta, CommentSection, CompareTool, Container, ContextMenu, CookieConsent, CountdownTimer, CountryFlag, CouponInput, DateTimePicker, DealCard, EmailInput, EmptyState, FaqItem, FaqSection, FeatureGrid, FeatureItem, FileInput, FilterSidebar, Footer7 as Footer, Image, Lightbox, List4 as List, LogoCloud, LogoTile, Main, Marquee, Modal, MultiSelectInput, MyThemeProvider, Navbar, NewsletterSection, NumberInput, OrderSummary, OrderSummaryItem as OrderSummaryItemComponent, OrderSummaryRow, PaginationBar, PaginationButton, PaginationEllipsis, Partners, PasswordInput, PaymentMethodSelector, PhoneInput, PostCard, PostCardImage, PostCardMeta, Price, PricingCard, PricingCardFeatureList, PricingCardPrice, PricingSection, ProcessSection, ProcessStep, ProductCard, ProductCardHorizontal, ProductCardImage, ProductGallery, ProfileCard, ProgressBar, ProgressCircle, PromoStrip, Prose, QuantitySelector, RangeSlider, Rating, RelatedProducts, ReviewItem, ReviewSection, ReviewSummary, SearchInput, Section, SectionHeading, SelectInput, ShippingSelector, Skeleton, SortBar, Spinner3 as Spinner, StatCard, StatsSection, StockStatus, SwitchInput, Tabs, TeamMemberAvatar, TeamMemberCard, TeamMemberInfo, TeamSection, TestimonialAuthor, TestimonialCard, TestimonialQuote, TestimonialsSection, TextInput, TextareaInput, Timeline, VariantSelector, VideoPlayer, VoucherCard, WishlistButton, accordionVariants, alertSeverities, aspectRatioPresets, avatarColors, avatarSizes, backToTopPositions, backToTopVariants, badgeVariants, cardPaddings, cardRoundeds, cardVariants, countdownTimerVariants, createMyTheme, dateTimePickerModes, defaultCookieCategories, featureGridColumns, listSizes, listVariants, logoCloudColumns, logoCloudVariants, logoTileVariants, marqueeDirections, marqueeSpeeds, modalSizes, myTheme, newsletterLayouts, postCardVariants, priceSizes, progressBarSizes, progressBarVariants, progressCircleSizes, progressCircleVariants, promoStripVariants, rangeSliderSizes, relatedProductsLayouts, sectionHeadingAligns, skeletonVariants, spinnerColors, spinnerSizes, spinnerVariants, statsSectionColumns, stockStatusValues, switchColors, tabsVariants, teamSectionColumns, testimonialsSectionColumns, themeDark, themeHighContrast, themeLight, timelineItemStatuses, timelineVariants, variantSelectorModes };
+export { Accordion, Alert, Article, AspectRatio, Avatar, BackToTop, Badge2 as Badge, BaseInput, BaseSelectInput, Box2 as Box, Breadcrumbs, Button, Card, Carousel, CartButton, CartDrawer, CartDrawerItem as CartDrawerItemComponent, CategoryCard, CategoryCardImage, CategoryCardInfo, CheckboxInput, CommandPalette, CommentActions, CommentBody, CommentCard, CommentMeta, CommentSection, CompareTool, Container, ContextMenu, CookieConsent, CountdownTimer, CountryFlag, CouponInput, DateTimePicker, DealCard, EmailInput, EmptyState, FaqItem, FaqSection, FeatureGrid, FeatureItem, FileInput, FilterSidebar, Footer8 as Footer, Image, Lightbox, List4 as List, LogoCloud, LogoTile, Main, Marquee, Modal, MultiSelectInput, MyThemeProvider, Navbar, NewsletterSection, NumberInput, OrderSummary, OrderSummaryItem as OrderSummaryItemComponent, OrderSummaryRow, PaginationBar, PaginationButton, PaginationEllipsis, Partners, PasswordInput, PaymentMethodSelector, PhoneInput, PostCard, PostCardImage, PostCardMeta, Price, PricingCard, PricingCardFeatureList, PricingCardPrice, PricingSection, ProcessSection, ProcessStep, ProductCard, ProductCardHorizontal, ProductCardImage, ProductGallery, ProfileCard, ProgressBar, ProgressCircle, PromoStrip, Prose, QuantitySelector, RadioInput, RangeSlider, Rating, RelatedProducts, ReviewItem, ReviewSection, ReviewSummary, SearchInput, Section, SectionHeading, SelectInput, Separator, Sheet, ShippingSelector, Skeleton, SortBar, Spinner3 as Spinner, StatCard, StatsSection, StockStatus, SwitchInput, Tabs, TeamMemberAvatar, TeamMemberCard, TeamMemberInfo, TeamSection, TestimonialAuthor, TestimonialCard, TestimonialQuote, TestimonialsSection, TextInput, TextareaInput, Timeline, VariantSelector, VideoPlayer, VoucherCard, WishlistButton, accordionVariants, alertSeverities, aspectRatioPresets, avatarColors, avatarSizes, backToTopPositions, backToTopVariants, badgeVariants, cardPaddings, cardRoundeds, cardVariants, countdownTimerVariants, createMyTheme, dateTimePickerModes, defaultCookieCategories, featureGridColumns, listSizes, listVariants, logoCloudColumns, logoCloudVariants, logoTileVariants, marqueeDirections, marqueeSpeeds, modalSizes, myTheme, newsletterLayouts, postCardVariants, priceSizes, progressBarSizes, progressBarVariants, progressCircleSizes, progressCircleVariants, promoStripVariants, rangeSliderSizes, relatedProductsLayouts, sectionHeadingAligns, sheetPositions, sheetSizes, skeletonVariants, spinnerColors, spinnerSizes, spinnerVariants, statsSectionColumns, stockStatusValues, switchColors, tabsVariants, teamSectionColumns, testimonialsSectionColumns, themeDark, themeHighContrast, themeLight, timelineItemStatuses, timelineVariants, useCommentLikes, variantSelectorModes };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map