@szymonpiatek/designsystem 0.0.9 → 0.0.11

package/dist/index.cjs

@@ -35,6 +35,7 @@ var CreditCardOutlinedIcon = require('@mui/icons-material/CreditCardOutlined');
 var LocalShippingOutlinedIcon = require('@mui/icons-material/LocalShippingOutlined');
 var GridViewIcon = require('@mui/icons-material/GridView');
 var ViewListIcon = require('@mui/icons-material/ViewList');
+var ThumbUpIcon = require('@mui/icons-material/ThumbUp');
 var ThumbUpOutlinedIcon = require('@mui/icons-material/ThumbUpOutlined');
 var ReplyIcon = require('@mui/icons-material/Reply');
 var reactDom = require('react-dom');
@@ -79,6 +80,7 @@ var CreditCardOutlinedIcon__default = /*#__PURE__*/_interopDefault(CreditCardOut
 var LocalShippingOutlinedIcon__default = /*#__PURE__*/_interopDefault(LocalShippingOutlinedIcon);
 var GridViewIcon__default = /*#__PURE__*/_interopDefault(GridViewIcon);
 var ViewListIcon__default = /*#__PURE__*/_interopDefault(ViewListIcon);
+var ThumbUpIcon__default = /*#__PURE__*/_interopDefault(ThumbUpIcon);
 var ThumbUpOutlinedIcon__default = /*#__PURE__*/_interopDefault(ThumbUpOutlinedIcon);
 var ReplyIcon__default = /*#__PURE__*/_interopDefault(ReplyIcon);
 var KeyboardDoubleArrowLeftIcon__default = /*#__PURE__*/_interopDefault(KeyboardDoubleArrowLeftIcon);
@@ -569,6 +571,87 @@ var CheckboxInput = react.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 = styles.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 = styles.styled("input")({
+  position: "absolute",
+  width: 1,
+  height: 1,
+  margin: -1,
+  overflow: "hidden",
+  clip: "rect(0 0 0 0)",
+  whiteSpace: "nowrap",
+  borderWidth: 0
+});
+var Row2 = styles.styled("label")(({ theme }) => ({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "0.5rem",
+  cursor: "inherit",
+  fontFamily: theme.typography.fontFamily
+}));
+var LabelText2 = styles.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 = styles.styled("span")(({ $disabled }) => ({
+  display: "inline-flex",
+  flexDirection: "column",
+  cursor: $disabled ? "not-allowed" : "pointer"
+}));
+var RadioInput = react.forwardRef(
+  ({ label, helperText, error = false, size = "md", disabled = false, id, ...rest }, ref) => {
+    const autoId = react.useId();
+    const inputId = id ?? autoId;
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root5, { $disabled: disabled, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Row2, { htmlFor: inputId, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Circle, { $size: size, $error: error, $disabled: disabled, children: /* @__PURE__ */ jsxRuntime.jsx(HiddenInput2, { ref, id: inputId, type: "radio", disabled, ...rest }) }),
+        label && /* @__PURE__ */ jsxRuntime.jsx(LabelText2, { $size: size, $disabled: disabled, $error: error, children: label })
+      ] }),
+      helperText && /* @__PURE__ */ jsxRuntime.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`;
@@ -579,11 +662,11 @@ var CloudUploadIcon = ({ size }) => /* @__PURE__ */ jsxRuntime.jsx(CloudUploadMu
 var FileDocIcon = ({ size }) => /* @__PURE__ */ jsxRuntime.jsx(InsertDriveFileIcon__default.default, { "aria-hidden": true, style: { fontSize: size } });
 var TrashIcon = ({ size = 12 }) => /* @__PURE__ */ jsxRuntime.jsx(DeleteOutlinedIcon__default.default, { "aria-hidden": true, style: { fontSize: size } });
 var XIcon = () => /* @__PURE__ */ jsxRuntime.jsx(CloseIcon__default.default, { "aria-hidden": true, style: { fontSize: 11 } });
-var Root5 = styles.styled("div")(({ $fullWidth }) => ({
+var Root6 = styles.styled("div")(({ $fullWidth }) => ({
   display: $fullWidth ? "block" : "inline-block",
   width: $fullWidth ? "100%" : "auto"
 }));
-var HiddenInput2 = styles.styled("input")({
+var HiddenInput3 = styles.styled("input")({
   position: "absolute",
   width: 1,
   height: 1,
@@ -1057,7 +1140,7 @@ var FileInput = react.forwardRef(
     const ds = dropzoneSizes[size];
     const compactLabel = hasFiles ? files.length === 1 ? files[0].name : filesSelectedLabel(files.length) : noFileLabel;
     const hiddenInput = /* @__PURE__ */ jsxRuntime.jsx(
-      HiddenInput2,
+      HiddenInput3,
       {
         ref: assignRef,
         id: inputId,
@@ -1069,7 +1152,7 @@ var FileInput = react.forwardRef(
       }
     );
     if (variant === "dropzone") {
-      return /* @__PURE__ */ jsxRuntime.jsxs(Root5, { $fullWidth: fullWidth, children: [
+      return /* @__PURE__ */ jsxRuntime.jsxs(Root6, { $fullWidth: fullWidth, children: [
         label && /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: inputId, error, size, children: label }),
         /* @__PURE__ */ jsxRuntime.jsxs(
           DropzoneArea,
@@ -1197,7 +1280,7 @@ var FileInput = react.forwardRef(
         helperText && /* @__PURE__ */ jsxRuntime.jsx(HelperText, { error, children: helperText })
       ] });
     }
-    return /* @__PURE__ */ jsxRuntime.jsxs(Root5, { $fullWidth: fullWidth, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root6, { $fullWidth: fullWidth, children: [
       label && /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: inputId, error, size, children: label }),
       /* @__PURE__ */ jsxRuntime.jsxs(
         CompactWrapper,
@@ -1316,7 +1399,7 @@ var triggerColors = (theme, error, open) => ({
     borderColor: error ? theme.palette.error.dark : theme.palette.text.secondary
   }
 });
-var Root6 = styles.styled("div")(({ $fullWidth }) => ({
+var Root7 = styles.styled("div")(({ $fullWidth }) => ({
   display: $fullWidth ? "block" : "inline-block",
   width: $fullWidth ? "100%" : "auto",
   position: "relative"
@@ -1433,7 +1516,7 @@ var BaseSelectInput = ({
   }, [isOpen, close]);
   const selectedLabel = options.find((o) => o.value === value)?.label;
   const defaultTriggerContent = /* @__PURE__ */ jsxRuntime.jsx("span", { style: { opacity: selectedLabel ? 1 : 0.5 }, children: selectedLabel ?? placeholder });
-  return /* @__PURE__ */ jsxRuntime.jsxs(Root6, { $fullWidth: fullWidth, ref: rootRef, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Root7, { $fullWidth: fullWidth, ref: rootRef, children: [
     label && /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: inputId, error, size, children: label }),
     /* @__PURE__ */ jsxRuntime.jsxs(
       Trigger,
@@ -1713,7 +1796,7 @@ var borderColors = (theme, error) => ({
     boxShadow: `0 0 0 3px ${error ? theme.palette.error.main : theme.palette.primary.main}33`
   }
 });
-var Root7 = styles.styled("div")(({ $fullWidth }) => ({
+var Root8 = styles.styled("div")(({ $fullWidth }) => ({
   display: $fullWidth ? "block" : "inline-block",
   width: $fullWidth ? "100%" : "auto"
 }));
@@ -1754,7 +1837,7 @@ var TextareaInput = react.forwardRef(
   }, ref) => {
     const autoId = react.useId();
     const inputId = id ?? autoId;
-    return /* @__PURE__ */ jsxRuntime.jsxs(Root7, { $fullWidth: fullWidth, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root8, { $fullWidth: fullWidth, children: [
       label && /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: inputId, error, size, children: label }),
       /* @__PURE__ */ jsxRuntime.jsx(
         StyledTextarea,
@@ -3392,7 +3475,7 @@ var wrapperColors = (theme, error, focused) => ({
     borderColor: !focused ? error ? theme.palette.error.dark : theme.palette.text.secondary : void 0
   }
 });
-var Root8 = styles.styled("div")(({ $fullWidth }) => ({
+var Root9 = styles.styled("div")(({ $fullWidth }) => ({
   display: $fullWidth ? "block" : "inline-block",
   width: $fullWidth ? "100%" : "auto"
 }));
@@ -3648,7 +3731,7 @@ var PhoneInput = react.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__ */ jsxRuntime.jsxs(Root8, { $fullWidth: fullWidth, ref: rootRef, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root9, { $fullWidth: fullWidth, ref: rootRef, children: [
       label && /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: inputId, error, size, children: label }),
       /* @__PURE__ */ jsxRuntime.jsxs(
         InputWrapper2,
@@ -3760,19 +3843,19 @@ function getActiveColor(color, theme) {
       return theme.palette.primary.main;
   }
 }
-var Root9 = styles.styled("span")(({ $disabled }) => ({
+var Root10 = styles.styled("span")(({ $disabled }) => ({
   display: "inline-flex",
   flexDirection: "column",
   cursor: $disabled ? "not-allowed" : "pointer"
 }));
-var Row2 = styles.styled("label")(({ $placement }) => ({
+var Row3 = styles.styled("label")(({ $placement }) => ({
   display: "inline-flex",
   alignItems: "center",
   flexDirection: $placement === "start" ? "row-reverse" : "row",
   gap: "0.5rem",
   cursor: "inherit"
 }));
-var HiddenInput3 = styles.styled("input")({
+var HiddenInput4 = styles.styled("input")({
   position: "absolute",
   width: 1,
   height: 1,
@@ -3823,7 +3906,7 @@ var Thumb = styles.styled("span", {
     transform: "scale(1.1)"
   }
 }));
-var LabelText2 = styles.styled("span")(
+var LabelText3 = styles.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,
@@ -3845,11 +3928,11 @@ var SwitchInput = react.forwardRef(
   }, ref) => {
     const autoId = react.useId();
     const inputId = id ?? autoId;
-    return /* @__PURE__ */ jsxRuntime.jsxs(Root9, { $disabled: disabled, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(Row2, { htmlFor: inputId, $placement: labelPlacement, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root10, { $disabled: disabled, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Row3, { htmlFor: inputId, $placement: labelPlacement, children: [
         /* @__PURE__ */ jsxRuntime.jsxs(Track, { $size: size, $color: color, $error: error, $disabled: disabled, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            HiddenInput3,
+            HiddenInput4,
             {
               ref,
               id: inputId,
@@ -3861,7 +3944,7 @@ var SwitchInput = react.forwardRef(
           ),
           /* @__PURE__ */ jsxRuntime.jsx(Thumb, { $size: size })
         ] }),
-        label && /* @__PURE__ */ jsxRuntime.jsx(LabelText2, { $size: size, $disabled: disabled, $error: error, children: label })
+        label && /* @__PURE__ */ jsxRuntime.jsx(LabelText3, { $size: size, $disabled: disabled, $error: error, children: label })
       ] }),
       helperText && /* @__PURE__ */ jsxRuntime.jsx(HelperText, { error, children: helperText })
     ] });
@@ -3871,7 +3954,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 = styles.styled("div")({
+var Root11 = styles.styled("div")({
   display: "flex",
   flexDirection: "column",
   gap: "0.5rem",
@@ -3904,7 +3987,7 @@ var Fill = styles.styled("div")(({ theme, $left, $width }) => ({
   width: `${$width}%`,
   pointerEvents: "none"
 }));
-var HiddenInput4 = styles.styled("input", {
+var HiddenInput5 = styles.styled("input", {
   shouldForwardProp: (p) => !["$size", "$disabled"].includes(p)
 })(({ theme, $disabled }) => ({
   position: "absolute",
@@ -3994,7 +4077,7 @@ var RangeSlider = react.forwardRef(
     const loP = pct(lo, min, max);
     const hiP = pct(hi, min, max);
     const valueLabel = range ? `${formatValue2(lo)} \u2013 ${formatValue2(hi)}` : formatValue2(lo);
-    return /* @__PURE__ */ jsxRuntime.jsxs(Root10, { ref, ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root11, { ref, ...props, children: [
       (label || showValue) && /* @__PURE__ */ jsxRuntime.jsxs(LabelRow, { children: [
         label && /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
         showValue && /* @__PURE__ */ jsxRuntime.jsx("span", { children: valueLabel })
@@ -4003,7 +4086,7 @@ var RangeSlider = react.forwardRef(
         /* @__PURE__ */ jsxRuntime.jsx(Fill, { $left: range ? loP : 0, $width: range ? hiP - loP : loP }),
         range ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            HiddenInput4,
+            HiddenInput5,
             {
               id: `${inputId}-lo`,
               type: "range",
@@ -4022,7 +4105,7 @@ var RangeSlider = react.forwardRef(
           ),
           /* @__PURE__ */ jsxRuntime.jsx(ThumbVisual, { $size: size, $pct: loP, $disabled: disabled }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            HiddenInput4,
+            HiddenInput5,
             {
               id: `${inputId}-hi`,
               type: "range",
@@ -4042,7 +4125,7 @@ var RangeSlider = react.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsx(ThumbVisual, { $size: size, $pct: hiP, $disabled: disabled })
         ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            HiddenInput4,
+            HiddenInput5,
             {
               id: inputId,
               type: "range",
@@ -4124,7 +4207,7 @@ var inputColors2 = (theme, error) => ({
     boxShadow: `0 0 0 3px ${error ? theme.palette.error.main : theme.palette.primary.main}33`
   }
 });
-var Root11 = styles.styled("div")(({ $fullWidth }) => ({
+var Root12 = styles.styled("div")(({ $fullWidth }) => ({
   display: $fullWidth ? "block" : "inline-block",
   width: $fullWidth ? "100%" : "auto",
   position: "relative"
@@ -4519,7 +4602,7 @@ var DateTimePicker = react.forwardRef(
     const showCalendar = mode !== "time";
     const showTime = mode !== "date";
     const needsConfirm = mode !== "date";
-    return /* @__PURE__ */ jsxRuntime.jsxs(Root11, { ref: rootRef, $fullWidth: fullWidth, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root12, { ref: rootRef, $fullWidth: fullWidth, children: [
       label && /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: inputId, error, size, children: label }),
       /* @__PURE__ */ jsxRuntime.jsxs(
         InputWrapper3,
@@ -5011,6 +5094,34 @@ function SectionHeading({
   ] });
 }
 var sectionHeadingAligns = ["center", "left", "right"];
+var StyledSeparator = styles.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__ */ jsxRuntime.jsx(
+    StyledSeparator,
+    {
+      $orientation: orientation,
+      role: "separator",
+      "aria-orientation": orientation,
+      ...rest
+    }
+  );
+}
 var shimmer = react$1.keyframes`
   0%   { background-position: -200% 0; }
   100% { background-position:  200% 0; }
@@ -5073,7 +5184,7 @@ var spin = react$1.keyframes`to { transform: rotate(360deg); }`;
 var fade = react$1.keyframes`0%,100%{opacity:.15} 50%{opacity:1}`;
 var scalePulse = react$1.keyframes`0%,100%{transform:scale(0.6);opacity:.4} 50%{transform:scale(1);opacity:1}`;
 var barAnim = react$1.keyframes`0%,100%{transform:scaleY(.4);opacity:.5} 50%{transform:scaleY(1);opacity:1}`;
-var Root12 = styles.styled("span", {
+var Root13 = styles.styled("span", {
   shouldForwardProp: (p) => !["$size", "$color"].includes(p)
 })(({ theme, $size, $color }) => {
   const colorMap = {
@@ -5162,7 +5273,7 @@ function Spinner3({
   ...props
 }) {
   const Inner5 = VARIANTS[variant];
-  return /* @__PURE__ */ jsxRuntime.jsx(Root12, { $size: size, $color: color, role: "status", "aria-label": label, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Inner5, {}) });
+  return /* @__PURE__ */ jsxRuntime.jsx(Root13, { $size: size, $color: color, role: "status", "aria-label": label, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Inner5, {}) });
 }
 var spinnerVariants = ["ring", "dots", "pulse", "bars"];
 var spinnerSizes = ["xs", "sm", "md", "lg", "xl"];
@@ -5288,7 +5399,7 @@ var FONT_MAP = {
   lg: "1.125rem",
   xl: "1.5rem"
 };
-var Root13 = styles.styled("div")({ position: "relative", display: "inline-flex", flexShrink: 0 });
+var Root14 = styles.styled("div")({ position: "relative", display: "inline-flex", flexShrink: 0 });
 var Label2 = styles.styled("div", {
   shouldForwardProp: (p) => p !== "$size"
 })(({ theme, $size }) => ({
@@ -5342,7 +5453,7 @@ function ProgressCircle({
   const { color, gradient } = useStrokeColor(variant, gradientId);
   const trackColor = theme.palette.mode === "dark" ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.08)";
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    Root13,
+    Root14,
     {
       role: "progressbar",
       "aria-valuenow": value,
@@ -5699,7 +5810,7 @@ var PRESET_MAP = {
   "3/4": 3 / 4,
   "2/3": 2 / 3
 };
-var Root14 = styles.styled("div")({
+var Root15 = styles.styled("div")({
   position: "relative",
   width: "100%",
   aspectRatio: "var(--ar)",
@@ -5715,7 +5826,7 @@ var AspectRatio = react.forwardRef(
   ({ ratio = "16/9", children, style, ...props }, ref) => {
     const numericRatio = typeof ratio === "string" ? PRESET_MAP[ratio] ?? 16 / 9 : ratio;
     return /* @__PURE__ */ jsxRuntime.jsx(
-      Root14,
+      Root15,
       {
         ref,
         style: { "--ar": String(numericRatio), ...style },
@@ -5743,7 +5854,7 @@ var Placeholder2 = styles.styled("div")(({ theme }) => ({
 }));
 var CategoryCardImage = ({ src, alt }) => /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: "4/3", children: src ? /* @__PURE__ */ jsxRuntime.jsx(Img, { src, alt }) : /* @__PURE__ */ jsxRuntime.jsx(Placeholder2, { "aria-label": alt, children: /* @__PURE__ */ jsxRuntime.jsx(ImageIcon__default.default, { style: { fontSize: 48 } }) }) });
 CategoryCardImage.displayName = "CategoryCardImage";
-var Root15 = styles.styled("div")({
+var Root16 = styles.styled("div")({
   display: "flex",
   flexDirection: "column",
   gap: "0.25rem"
@@ -5765,7 +5876,7 @@ var CategoryCardInfo = ({
   name,
   count,
   countLabel = "produkt\xF3w"
-}) => /* @__PURE__ */ jsxRuntime.jsxs(Root15, { children: [
+}) => /* @__PURE__ */ jsxRuntime.jsxs(Root16, { children: [
   /* @__PURE__ */ jsxRuntime.jsx(Name, { children: name }),
   count !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs(Count, { children: [
     count,
@@ -5774,7 +5885,7 @@ var CategoryCardInfo = ({
   ] })
 ] });
 CategoryCardInfo.displayName = "CategoryCardInfo";
-var Root16 = styles.styled(Card)(({ theme }) => ({
+var Root17 = styles.styled(Card)(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
   overflow: "hidden",
@@ -5800,14 +5911,14 @@ var CategoryCard = react.forwardRef(
       /* @__PURE__ */ jsxRuntime.jsx(ImageWrap, { children: /* @__PURE__ */ jsxRuntime.jsx(CategoryCardImage, { src: imageUrl, alt: imageAlt ?? name }) }),
       /* @__PURE__ */ jsxRuntime.jsx(CategoryCardInfo, { name, count })
     ] });
-    return /* @__PURE__ */ jsxRuntime.jsx(Root16, { ref, variant: "default", padding: "md", rounded: "lg", ...props, children: href ? /* @__PURE__ */ jsxRuntime.jsx(CardLink, { href, children: content }) : content });
+    return /* @__PURE__ */ jsxRuntime.jsx(Root17, { ref, variant: "default", padding: "md", rounded: "lg", ...props, children: href ? /* @__PURE__ */ jsxRuntime.jsx(CardLink, { href, children: content }) : content });
   }
 );
 CategoryCard.displayName = "CategoryCard";
 function deriveInitials(name) {
   return name.split(/\s+/).filter(Boolean).slice(0, 2).map((p) => p[0]?.toUpperCase() ?? "").join("");
 }
-var Root17 = styles.styled(Card)({
+var Root18 = styles.styled(Card)({
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
@@ -5873,7 +5984,7 @@ var ProfileCard = react.forwardRef(
   }, ref) => {
     const resolvedInitials = initials ?? deriveInitials(name);
     const imgSize = sizeMap5[avatarSize] ?? "4rem";
-    return /* @__PURE__ */ jsxRuntime.jsxs(Root17, { ref, variant: cardVariant, padding: "lg", rounded: "lg", ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root18, { ref, variant: cardVariant, padding: "lg", rounded: "lg", ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Identity, { children: [
         avatarUrl ? /* @__PURE__ */ jsxRuntime.jsx(AvatarImg, { src: avatarUrl, alt: name, style: { width: imgSize, height: imgSize } }) : /* @__PURE__ */ jsxRuntime.jsx(Avatar, { initials: resolvedInitials, size: avatarSize, color: avatarColor }),
         /* @__PURE__ */ jsxRuntime.jsxs(TextBlock, { children: [
@@ -5893,7 +6004,7 @@ var FONT_SIZE = {
   lg: "1.5rem",
   xl: "2rem"
 };
-var Root18 = styles.styled("div")({
+var Root19 = styles.styled("div")({
   display: "inline-flex",
   flexDirection: "column",
   gap: "0.25rem"
@@ -5974,7 +6085,7 @@ var Price = react.forwardRef(
     const onSale = originalPrice !== void 0 && originalPrice > price;
     const discount = onSale ? calcDiscount(price, originalPrice) : 0;
     const showOmnibus = lowestPrice !== void 0;
-    return /* @__PURE__ */ jsxRuntime.jsxs(Root18, { ref, ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root19, { ref, ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(PriceRow, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           Current,
@@ -6031,7 +6142,7 @@ function calcTimeLeft(target) {
 function pad(n) {
   return String(n).padStart(2, "0");
 }
-var Root19 = styles.styled("div", {
+var Root20 = styles.styled("div", {
   shouldForwardProp: (prop) => prop !== "$variant"
 })(({ theme, $variant }) => ({
   display: "inline-flex",
@@ -6126,11 +6237,11 @@ var CountdownTimer = react.forwardRef(
       return () => clearInterval(id);
     }, [targetDate, onExpire]);
     if (!timeLeft) {
-      return /* @__PURE__ */ jsxRuntime.jsx(Root19, { ref, $variant: variant, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(TimerLabel, { $variant: variant, children: expiredLabel }) });
+      return /* @__PURE__ */ jsxRuntime.jsx(Root20, { ref, $variant: variant, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(TimerLabel, { $variant: variant, children: expiredLabel }) });
     }
     const parts = [timeLeft.days, timeLeft.hours, timeLeft.minutes, timeLeft.seconds];
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      Root19,
+      Root20,
       {
         ref,
         $variant: variant,
@@ -6153,7 +6264,7 @@ var CountdownTimer = react.forwardRef(
 );
 CountdownTimer.displayName = "CountdownTimer";
 var countdownTimerVariants = ["inline", "card", "banner"];
-var Root20 = styles.styled(Card)({
+var Root21 = styles.styled(Card)({
   display: "flex",
   flexDirection: "column",
   height: "100%",
@@ -6191,7 +6302,7 @@ var DealCard = react.forwardRef(
     onAddToCart,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(Root20, { ref, variant: "default", padding: "md", rounded: "lg", ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root21, { ref, variant: "default", padding: "md", rounded: "lg", ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsx(ImageWrap2, { children: /* @__PURE__ */ jsxRuntime.jsx(ProductCardImage, { src: imageUrl, alt: imageAlt ?? name }) }),
       /* @__PURE__ */ jsxRuntime.jsx(Name3, { children: name }),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -6296,7 +6407,7 @@ var MetaRow = styles.styled("div", {
   color: $inverted ? "rgba(255,255,255,0.75)" : theme.palette.text.secondary,
   fontFamily: theme.typography.fontFamily
 }));
-var Separator = styles.styled("span")({
+var Separator2 = styles.styled("span")({
   userSelect: "none"
 });
 var PostCardMeta = ({
@@ -6308,7 +6419,7 @@ var PostCardMeta = ({
   if (!date && !author) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs(MetaRow, { $inverted: inverted, children: [
     date && /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatDate(date, locale) }),
-    date && author && /* @__PURE__ */ jsxRuntime.jsx(Separator, { children: "\xB7" }),
+    date && author && /* @__PURE__ */ jsxRuntime.jsx(Separator2, { children: "\xB7" }),
     author && /* @__PURE__ */ jsxRuntime.jsx("span", { children: author })
   ] });
 };
@@ -6473,7 +6584,7 @@ var postCardVariants = [
   "featured",
   "compact"
 ];
-var Row3 = styles.styled("div")({
+var Row4 = styles.styled("div")({
   display: "flex",
   alignItems: "baseline",
   gap: "0.25rem"
@@ -6498,7 +6609,7 @@ var Period = styles.styled("span")(({ theme }) => ({
   fontSize: "0.875rem",
   color: theme.palette.text.secondary
 }));
-var PricingCardPrice = ({ price, currency, period }) => /* @__PURE__ */ jsxRuntime.jsxs(Row3, { children: [
+var PricingCardPrice = ({ price, currency, period }) => /* @__PURE__ */ jsxRuntime.jsxs(Row4, { children: [
   currency && /* @__PURE__ */ jsxRuntime.jsx(Currency, { children: currency }),
   /* @__PURE__ */ jsxRuntime.jsx(Amount, { children: price }),
   period && /* @__PURE__ */ jsxRuntime.jsx(Period, { children: period })
@@ -6536,7 +6647,7 @@ var PricingCardFeatureList = ({ features }) => /* @__PURE__ */ jsxRuntime.jsx(Li
   ] }, i);
 }) });
 PricingCardFeatureList.displayName = "PricingCardFeatureList";
-var Root21 = styles.styled(Card)({
+var Root22 = styles.styled(Card)({
   display: "flex",
   flexDirection: "column",
   height: "100%"
@@ -6618,7 +6729,7 @@ var PricingCard = react.forwardRef(
   }, ref) => {
     const resolvedCardVariant = cardVariant ?? (popular ? "gradient-primary" : "default");
     const resolvedCtaVariant = ctaVariant ?? (popular ? "primary" : "ghost");
-    return /* @__PURE__ */ jsxRuntime.jsxs(Root21, { ref, variant: resolvedCardVariant, padding: "lg", rounded: "lg", ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root22, { ref, variant: resolvedCardVariant, padding: "lg", rounded: "lg", ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(NameRow, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(Name4, { children: name }),
         popular && /* @__PURE__ */ jsxRuntime.jsx(Badge2, { variant: popularBadgeVariant, children: popularLabel })
@@ -6639,7 +6750,7 @@ var sizeMap6 = {
   md: "1.25rem",
   lg: "1.5rem"
 };
-var Root22 = styles.styled("div")(({ theme }) => ({
+var Root23 = styles.styled("div")(({ theme }) => ({
   display: "inline-flex",
   alignItems: "center",
   gap: "0.5rem",
@@ -6674,7 +6785,7 @@ var Rating = react.forwardRef(
   ({ value, max = 5, readonly = true, size = "md", label, count, onChange, ...props }, ref) => {
     const roundedValue = Math.round(value);
     const meta = label ?? (count !== void 0 ? `(${count})` : void 0);
-    return /* @__PURE__ */ jsxRuntime.jsxs(Root22, { ref, "aria-label": `Ocena ${value} z ${max}`, ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root23, { ref, "aria-label": `Ocena ${value} z ${max}`, ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         Stars,
         {
@@ -6744,7 +6855,7 @@ var ProductCardImage = ({
   badge && /* @__PURE__ */ jsxRuntime.jsx(BadgeSlot, { children: /* @__PURE__ */ jsxRuntime.jsx(Badge2, { variant: badgeVariant, children: badge }) })
 ] });
 ProductCardImage.displayName = "ProductCardImage";
-var Root23 = styles.styled(Card)({
+var Root24 = styles.styled(Card)({
   display: "flex",
   flexDirection: "column",
   height: "100%",
@@ -6785,7 +6896,7 @@ var ProductCard = react.forwardRef(
     disabledButton = false,
     hideButton = false,
     ...props
-  }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root23, { ref, variant: "default", padding: "md", rounded: "lg", ...props, children: [
+  }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root24, { ref, variant: "default", padding: "md", rounded: "lg", ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: imageRatio, style: { margin: "-1.5rem -1.5rem 1rem", width: "calc(100% + 3rem)" }, children: /* @__PURE__ */ jsxRuntime.jsx(
       ProductCardImage,
       {
@@ -6919,7 +7030,7 @@ var ProductCardHorizontal = react.forwardRef(
   ] }) }) })
 );
 ProductCardHorizontal.displayName = "ProductCardHorizontal";
-var Root24 = styles.styled(Card, {
+var Root25 = styles.styled(Card, {
   shouldForwardProp: (prop) => prop !== "$align"
 })(({ $align }) => ({
   textAlign: $align,
@@ -6949,7 +7060,7 @@ var Description3 = styles.styled("p")(({ theme }) => ({
   lineHeight: 1.5
 }));
 var StatCard = react.forwardRef(
-  ({ stat, cardVariant = "default", align = "center", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root24, { ref, variant: cardVariant, padding: "lg", rounded: "lg", $align: align, ...props, children: [
+  ({ stat, cardVariant = "default", align = "center", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root25, { ref, variant: cardVariant, padding: "lg", rounded: "lg", $align: align, ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx(Value2, { children: stat.value }),
     /* @__PURE__ */ jsxRuntime.jsx(Label3, { children: stat.label }),
     stat.description && /* @__PURE__ */ jsxRuntime.jsx(Description3, { children: stat.description })
@@ -6979,7 +7090,7 @@ var TeamMemberAvatar = ({
   return /* @__PURE__ */ jsxRuntime.jsx(Avatar, { initials: initials ?? deriveInitials2(name), size: "xl", color: avatarColor });
 };
 TeamMemberAvatar.displayName = "TeamMemberAvatar";
-var Root25 = styles.styled("div")({ minWidth: 0 });
+var Root26 = styles.styled("div")({ minWidth: 0 });
 var Name7 = styles.styled("h3")(({ theme }) => ({
   margin: 0,
   color: theme.palette.text.primary,
@@ -6995,12 +7106,12 @@ var Role = styles.styled("p")(({ theme }) => ({
   fontSize: "0.875rem",
   lineHeight: 1.5
 }));
-var TeamMemberInfo = ({ name, role }) => /* @__PURE__ */ jsxRuntime.jsxs(Root25, { children: [
+var TeamMemberInfo = ({ name, role }) => /* @__PURE__ */ jsxRuntime.jsxs(Root26, { children: [
   /* @__PURE__ */ jsxRuntime.jsx(Name7, { children: name }),
   role && /* @__PURE__ */ jsxRuntime.jsx(Role, { children: role })
 ] });
 TeamMemberInfo.displayName = "TeamMemberInfo";
-var Root26 = styles.styled(Card)(({ theme }) => ({
+var Root27 = styles.styled(Card)(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   gap: "1rem",
@@ -7013,7 +7124,7 @@ var Root26 = styles.styled(Card)(({ theme }) => ({
   }
 }));
 var TeamMemberCard = react.forwardRef(
-  ({ member, cardVariant = "default", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root26, { ref, variant: cardVariant, padding: "lg", rounded: "lg", ...props, children: [
+  ({ member, cardVariant = "default", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root27, { ref, variant: cardVariant, padding: "lg", rounded: "lg", ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       TeamMemberAvatar,
       {
@@ -7050,7 +7161,7 @@ var Quote = styles.styled("blockquote")(({ theme }) => ({
 }));
 var TestimonialQuote = ({ quote }) => /* @__PURE__ */ jsxRuntime.jsx(Quote, { children: quote });
 TestimonialQuote.displayName = "TestimonialQuote";
-var Root27 = styles.styled("div")({
+var Root28 = styles.styled("div")({
   display: "flex",
   alignItems: "center",
   gap: "0.75rem"
@@ -7084,7 +7195,7 @@ var TestimonialAuthor = ({
   authorRole,
   authorAvatarUrl,
   authorInitials
-}) => /* @__PURE__ */ jsxRuntime.jsxs(Root27, { children: [
+}) => /* @__PURE__ */ jsxRuntime.jsxs(Root28, { children: [
   authorAvatarUrl ? /* @__PURE__ */ jsxRuntime.jsx(AvatarImg2, { src: authorAvatarUrl, alt: authorName }) : /* @__PURE__ */ jsxRuntime.jsx(Avatar, { initials: authorInitials ?? deriveInitials3(authorName), size: "md", color: "primary" }),
   /* @__PURE__ */ jsxRuntime.jsxs(Info, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(Name8, { children: authorName }),
@@ -7092,14 +7203,14 @@ var TestimonialAuthor = ({
   ] })
 ] });
 TestimonialAuthor.displayName = "TestimonialAuthor";
-var Root28 = styles.styled(Card)({
+var Root29 = styles.styled(Card)({
   display: "flex",
   flexDirection: "column",
   gap: "1.25rem",
   height: "100%"
 });
 var TestimonialCard = react.forwardRef(
-  ({ testimonial, cardVariant = "default", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root28, { ref, variant: cardVariant, padding: "lg", rounded: "lg", ...props, children: [
+  ({ testimonial, cardVariant = "default", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root29, { ref, variant: cardVariant, padding: "lg", rounded: "lg", ...props, children: [
     testimonial.rating && /* @__PURE__ */ jsxRuntime.jsx(Rating, { value: testimonial.rating, readonly: true, size: "sm" }),
     /* @__PURE__ */ jsxRuntime.jsx(TestimonialQuote, { quote: testimonial.quote }),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -7114,7 +7225,7 @@ var TestimonialCard = react.forwardRef(
   ] })
 );
 TestimonialCard.displayName = "TestimonialCard";
-var Root29 = styles.styled("div")(({ theme }) => ({
+var Root30 = styles.styled("div")(({ theme }) => ({
   position: "relative",
   padding: "1.5rem",
   borderRadius: "1rem",
@@ -7179,7 +7290,7 @@ var Expiry = styles.styled("p")(({ theme }) => ({
   color: theme.palette.text.disabled
 }));
 var VoucherCard = react.forwardRef(
-  ({ code, discount, description, expiresAt, copied = false, onCopy, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root29, { ref, ...props, children: [
+  ({ code, discount, description, expiresAt, copied = false, onCopy, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root30, { ref, ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Header, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(LocalOfferIcon__default.default, { style: { fontSize: 20 }, color: "primary" }),
       /* @__PURE__ */ jsxRuntime.jsx(Discount, { children: discount })
@@ -7288,7 +7399,7 @@ var RemoveBtn = styles.styled("button")(({ theme }) => ({
   }
 }));
 var Tbody = styles.styled("tbody")({});
-var Row4 = styles.styled("tr", {
+var Row5 = styles.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",
@@ -7365,7 +7476,7 @@ function CompareTool({
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsx(Tbody, { children: specKeys.map((key) => {
       const diff = highlightDifferences && isDiff(key, products);
-      return /* @__PURE__ */ jsxRuntime.jsxs(Row4, { $diff: diff, children: [
+      return /* @__PURE__ */ jsxRuntime.jsxs(Row5, { $diff: diff, children: [
         /* @__PURE__ */ jsxRuntime.jsx(LabelCell, { as: "th", scope: "row", children: specLabels[key] ?? key }),
         products.map((p) => {
           const val = p.specs[key];
@@ -7377,7 +7488,7 @@ function CompareTool({
   ] }) });
 }
 var spin2 = styles.keyframes`to { transform: rotate(360deg); }`;
-var Root30 = styles.styled("div")({
+var Root31 = styles.styled("div")({
   display: "flex",
   flexDirection: "column",
   gap: "0.5rem"
@@ -7524,7 +7635,7 @@ function CouponInput({
     if (e.key === "Enter") handleApply();
   };
   if (appliedCode) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(Root30, { className, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root31, { className, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(AppliedRow, { role: "status", "aria-label": `Kod rabatowy ${appliedCode} zastosowany`, children: [
         /* @__PURE__ */ jsxRuntime.jsx(AppliedCode, { children: appliedCode }),
         onRemove && /* @__PURE__ */ jsxRuntime.jsx(
@@ -7543,7 +7654,7 @@ function CouponInput({
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(Root30, { className, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Root31, { className, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(InputRow, { $hasError: Boolean(error), $applied: false, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         Input,
@@ -7575,7 +7686,7 @@ function CouponInput({
     error && /* @__PURE__ */ jsxRuntime.jsx(Message, { $type: "error", id: errorId, role: "alert", children: error })
   ] });
 }
-var Root31 = styles.styled("div")({
+var Root32 = styles.styled("div")({
   display: "flex",
   flexDirection: "column",
   gap: "0.5rem"
@@ -7623,7 +7734,7 @@ var Desc = styles.styled("div")(({ theme }) => ({
   marginTop: "0.125rem"
 }));
 var PaymentMethodSelector = react.forwardRef(
-  ({ methods, value, onChange, label = "Metoda p\u0142atno\u015Bci", disabled, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root31, { ref, ...props, children: [
+  ({ methods, value, onChange, label = "Metoda p\u0142atno\u015Bci", disabled, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root32, { ref, ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx(GroupLabel, { children: label }),
     methods.map((method) => {
       const selected = value === method.id;
@@ -7650,7 +7761,7 @@ var PaymentMethodSelector = react.forwardRef(
   ] })
 );
 PaymentMethodSelector.displayName = "PaymentMethodSelector";
-var Root32 = styles.styled("div")({
+var Root33 = styles.styled("div")({
   display: "grid",
   gap: "0.75rem"
 });
@@ -7688,7 +7799,7 @@ var ProductGallery = react.forwardRef(
     if (!activeImage) {
       return null;
     }
-    return /* @__PURE__ */ jsxRuntime.jsxs(Root32, { ref, ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root33, { ref, ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: imageRatio, children: /* @__PURE__ */ jsxRuntime.jsx(MainImage, { src: activeImage.src, alt: activeImage.alt }) }),
       images.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(Thumbnails, { children: images.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(
         ThumbnailButton,
@@ -7706,7 +7817,7 @@ var ProductGallery = react.forwardRef(
   }
 );
 ProductGallery.displayName = "ProductGallery";
-var Root33 = styles.styled("div")(({ theme, $variant }) => ({
+var Root34 = styles.styled("div")(({ theme, $variant }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
@@ -7726,14 +7837,14 @@ var Link = styles.styled("a")(({ theme }) => ({
   textUnderlineOffset: "0.2em"
 }));
 var PromoStrip = react.forwardRef(
-  ({ message, actionLabel, href, variant = "info", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root33, { ref, $variant: variant, ...props, children: [
+  ({ message, actionLabel, href, variant = "info", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root34, { ref, $variant: variant, ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { children: message }),
     actionLabel && href && /* @__PURE__ */ jsxRuntime.jsx(Link, { href, children: actionLabel })
   ] })
 );
 PromoStrip.displayName = "PromoStrip";
 var promoStripVariants = ["info", "success", "warning"];
-var Root34 = styles.styled("div")(({ theme }) => ({
+var Root35 = styles.styled("div")(({ theme }) => ({
   display: "inline-grid",
   gridTemplateColumns: "2.25rem 3rem 2.25rem",
   alignItems: "center",
@@ -7769,7 +7880,7 @@ var QuantitySelector = react.forwardRef(
   ({ value, min = 1, max = 99, step = 1, disabled = false, onChange, ...props }, ref) => {
     const decrease = Math.max(min, value - step);
     const increase = Math.min(max, value + step);
-    return /* @__PURE__ */ jsxRuntime.jsxs(Root34, { ref, "aria-label": "Wybierz ilo\u015B\u0107", ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root35, { ref, "aria-label": "Wybierz ilo\u015B\u0107", ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         Control,
         {
@@ -7795,7 +7906,7 @@ var QuantitySelector = react.forwardRef(
   }
 );
 QuantitySelector.displayName = "QuantitySelector";
-var Root35 = styles.styled("div")({
+var Root36 = styles.styled("div")({
   display: "flex",
   flexDirection: "column",
   gap: "0.5rem"
@@ -7853,7 +7964,7 @@ var Price2 = styles.styled("div", {
   whiteSpace: "nowrap"
 }));
 var ShippingSelector = react.forwardRef(
-  ({ options, value, onChange, label = "Metoda dostawy", disabled, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root35, { ref, ...props, children: [
+  ({ options, value, onChange, label = "Metoda dostawy", disabled, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root36, { ref, ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx(GroupLabel2, { children: label }),
     options.map((opt) => {
       const selected = value === opt.id;
@@ -7890,7 +8001,7 @@ var DEFAULT_SORT_OPTIONS = [
   { value: "price-asc", label: "Cena rosn\u0105co" },
   { value: "price-desc", label: "Cena malej\u0105co" }
 ];
-var Root36 = styles.styled("div")(({ theme }) => ({
+var Root37 = styles.styled("div")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
@@ -7964,7 +8075,7 @@ var SortBar = react.forwardRef(
     ...props
   }, ref) => {
     const resolvedLabel = totalLabel ?? (total !== void 0 ? `Znaleziono ${total} produkt\xF3w` : void 0);
-    return /* @__PURE__ */ jsxRuntime.jsxs(Root36, { ref, ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root37, { ref, ...props, children: [
       resolvedLabel && /* @__PURE__ */ jsxRuntime.jsx(TotalLabel, { children: resolvedLabel }),
       /* @__PURE__ */ jsxRuntime.jsxs(Controls, { children: [
         sortOptions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -8017,7 +8128,7 @@ function getDefaultLabel(status, count) {
       return "Dost\u0119pny na zam\xF3wienie";
   }
 }
-var Root37 = styles.styled("div", {
+var Root38 = styles.styled("div", {
   shouldForwardProp: (p) => p !== "$color" && p !== "$size"
 })(({ theme, $color, $size }) => {
   const colorMap = {
@@ -8058,7 +8169,7 @@ var StockStatus = react.forwardRef(
   ({ status, count, label, showIcon = true, size = "md", ...props }, ref) => {
     const color = COLOR_MAP[status];
     const text = label ?? getDefaultLabel(status, count);
-    return /* @__PURE__ */ jsxRuntime.jsxs(Root37, { ref, $color: color, $size: size, role: "status", "aria-label": text, ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root38, { ref, $color: color, $size: size, role: "status", "aria-label": text, ...props, children: [
       showIcon && /* @__PURE__ */ jsxRuntime.jsx(Dot2, { $color: color, "aria-hidden": "true" }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { children: text })
     ] });
@@ -8072,7 +8183,7 @@ var stockStatusValues = [
   "preorder",
   "backorder"
 ];
-var Root38 = styles.styled("div")({
+var Root39 = styles.styled("div")({
   display: "flex",
   flexDirection: "column",
   gap: "0.5rem"
@@ -8141,7 +8252,7 @@ var Select2 = styles.styled("select")(({ theme }) => ({
   }
 }));
 var VariantSelector = react.forwardRef(
-  ({ label, options, value, onChange, mode = "button", disabled, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root38, { ref, ...props, children: [
+  ({ label, options, value, onChange, mode = "button", disabled, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root39, { ref, ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Label4, { children: [
       label,
       value && mode !== "swatch" && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 400, marginLeft: "0.375rem" }, children: options.find((o) => o.value === value)?.label })
@@ -8178,7 +8289,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 = styles.styled("div")({
+var Root40 = styles.styled("div")({
   display: "flex",
   alignItems: "center",
   gap: "0.75rem"
@@ -8224,7 +8335,7 @@ var DateText = styles.styled("time")(({ theme }) => ({
   color: theme.palette.text.secondary
 }));
 function CommentMeta({ author, date }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Root39, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Root40, { children: [
     author.avatarUrl ? /* @__PURE__ */ jsxRuntime.jsx(AvatarImg3, { src: author.avatarUrl, alt: author.name }) : /* @__PURE__ */ jsxRuntime.jsx(Avatar, { initials: deriveInitials4(author.name), size: "md", color: "primary" }),
     /* @__PURE__ */ jsxRuntime.jsxs(Info4, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(NameRow2, { children: [
@@ -8247,12 +8358,12 @@ function CommentBody({ content }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Text, { children: content });
 }
 CommentBody.displayName = "CommentBody";
-var Root40 = styles.styled("div")({
+var Root41 = styles.styled("div")({
   display: "flex",
   alignItems: "center",
   gap: "0.25rem"
 });
-var ActionButton = styles.styled("button")(({ theme }) => ({
+var ActionButton = styles.styled("button")(({ theme, $isLiked }) => ({
   display: "inline-flex",
   alignItems: "center",
   gap: "0.375rem",
@@ -8261,10 +8372,10 @@ var ActionButton = styles.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": {
@@ -8276,13 +8387,29 @@ var ActionButton = styles.styled("button")(({ theme }) => ({
     outlineOffset: "2px"
   }
 }));
-function CommentActions({ commentId, likesCount, onLike, onReply }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Root40, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(ActionButton, { type: "button", "aria-label": "Lubi\u0119 to", onClick: () => onLike?.(commentId), children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ThumbUpOutlinedIcon__default.default, { style: { fontSize: "0.9375rem" }, "aria-hidden": "true" }),
-      typeof likesCount === "number" && /* @__PURE__ */ jsxRuntime.jsx("span", { children: likesCount }),
-      "Lubi\u0119 to"
-    ] }),
+function CommentActions({
+  commentId,
+  likesCount,
+  isLiked,
+  onLike,
+  onReply
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Root41, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      ActionButton,
+      {
+        type: "button",
+        "aria-label": "Lubi\u0119 to",
+        "aria-pressed": !!isLiked,
+        $isLiked: isLiked,
+        onClick: () => onLike?.(commentId),
+        children: [
+          isLiked ? /* @__PURE__ */ jsxRuntime.jsx(ThumbUpIcon__default.default, { style: { fontSize: "0.9375rem" }, "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(ThumbUpOutlinedIcon__default.default, { style: { fontSize: "0.9375rem" }, "aria-hidden": "true" }),
+          typeof likesCount === "number" && /* @__PURE__ */ jsxRuntime.jsx("span", { children: likesCount }),
+          "Lubi\u0119 to"
+        ]
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsxs(ActionButton, { type: "button", "aria-label": "Odpowiedz", onClick: () => onReply?.(commentId), children: [
       /* @__PURE__ */ jsxRuntime.jsx(ReplyIcon__default.default, { style: { fontSize: "0.9375rem" }, "aria-hidden": "true" }),
       "Odpowiedz"
@@ -8290,7 +8417,7 @@ function CommentActions({ commentId, likesCount, onLike, onReply }) {
   ] });
 }
 CommentActions.displayName = "CommentActions";
-var Root41 = styles.styled("div", {
+var Root42 = styles.styled("div", {
   shouldForwardProp: (p) => p !== "$depth"
 })(({ theme, $depth }) => ({
   display: "flex",
@@ -8303,7 +8430,7 @@ var Root41 = styles.styled("div", {
   }
 }));
 var CommentCard = react.forwardRef(
-  ({ comment, depth = 0, onLike, onReply, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root41, { ref, $depth: depth, ...props, children: [
+  ({ comment, depth = 0, onLike, onReply, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root42, { ref, $depth: depth, ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx(CommentMeta, { author: comment.author, date: comment.date }),
     /* @__PURE__ */ jsxRuntime.jsx(CommentBody, { content: comment.content }),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -8311,6 +8438,7 @@ var CommentCard = react.forwardRef(
       {
         commentId: comment.id,
         likesCount: comment.likesCount,
+        isLiked: comment.isLiked,
         onLike,
         onReply
       }
@@ -8318,7 +8446,7 @@ var CommentCard = react.forwardRef(
   ] })
 );
 CommentCard.displayName = "CommentCard";
-var Root42 = styles.styled("div")(({ theme }) => ({
+var Root43 = styles.styled("div")(({ theme }) => ({
   borderBottom: `1px solid ${theme.palette.divider}`
 }));
 var Trigger2 = styles.styled("button")(({ theme }) => ({
@@ -8366,7 +8494,7 @@ var PanelInner = styles.styled("p")(({ theme }) => ({
 var FaqItem = react.forwardRef(
   ({ item, defaultOpen = false, ...props }, ref) => {
     const [open, setOpen] = react.useState(defaultOpen);
-    return /* @__PURE__ */ jsxRuntime.jsxs(Root42, { ref, ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root43, { ref, ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Trigger2, { type: "button", "aria-expanded": open, onClick: () => setOpen((prev) => !prev), children: [
         item.question,
         /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon2, { $open: open, "aria-hidden": "true" })
@@ -8442,7 +8570,7 @@ var FeatureItem = react.forwardRef(
   }
 );
 FeatureItem.displayName = "FeatureItem";
-var Root43 = styles.styled("div")({
+var Root44 = styles.styled("div")({
   display: "flex",
   flexDirection: "column",
   alignItems: "center",
@@ -8490,7 +8618,7 @@ var Description6 = styles.styled("p")(({ theme }) => ({
   maxWidth: "18rem"
 }));
 var ProcessStep = react.forwardRef(
-  ({ step, title, description, icon, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root43, { ref, ...props, children: [
+  ({ step, title, description, icon, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root44, { ref, ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx(StepBadge, { "aria-hidden": "true", children: icon ? /* @__PURE__ */ jsxRuntime.jsx(IconWrapper2, { children: icon }) : /* @__PURE__ */ jsxRuntime.jsx(StepNumber, { children: step }) }),
     /* @__PURE__ */ jsxRuntime.jsx(Title3, { children: title }),
     description && /* @__PURE__ */ jsxRuntime.jsx(Description6, { children: description })
@@ -8752,7 +8880,7 @@ var timelineItemStatuses = [
   "pending",
   "error"
 ];
-var Root44 = styles.styled("div")({
+var Root45 = styles.styled("div")({
   position: "relative",
   width: "100%",
   overflow: "hidden",
@@ -8862,7 +8990,7 @@ function Carousel({
   }, [prev, next]);
   if (!count) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Root44, { "aria-roledescription": "carousel", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Root45, { "aria-roledescription": "carousel", children: [
       /* @__PURE__ */ jsxRuntime.jsx(Track4, { $index: index, "aria-live": "polite", children: slides.map((slide, i) => /* @__PURE__ */ jsxRuntime.jsx(
         Slide,
         {
@@ -9270,7 +9398,7 @@ var Current2 = styles.styled("span")(({ theme }) => ({
   color: theme.palette.text.primary,
   fontWeight: 600
 }));
-var Separator2 = styles.styled("span")(({ theme }) => ({
+var Separator3 = styles.styled("span")(({ theme }) => ({
   color: theme.palette.text.disabled
 }));
 var Breadcrumbs = react.forwardRef(
@@ -9278,7 +9406,7 @@ var Breadcrumbs = react.forwardRef(
     const isLast = index === items.length - 1;
     return /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
       item.href && !isLast ? /* @__PURE__ */ jsxRuntime.jsx(Link2, { href: item.href, children: item.label }) : /* @__PURE__ */ jsxRuntime.jsx(Current2, { "aria-current": isLast ? "page" : void 0, children: item.label }),
-      !isLast && /* @__PURE__ */ jsxRuntime.jsxs(Separator2, { "aria-hidden": "true", children: [
+      !isLast && /* @__PURE__ */ jsxRuntime.jsxs(Separator3, { "aria-hidden": "true", children: [
         " ",
         separator
       ] })
@@ -9465,7 +9593,7 @@ var PaginationBar = ({
   ] });
 };
 PaginationBar.displayName = "PaginationBar";
-var Root45 = styles.styled("div", {
+var Root46 = styles.styled("div", {
   shouldForwardProp: (p) => p !== "$variant"
 })(({ theme, $variant }) => ({
   width: "100%",
@@ -9575,7 +9703,7 @@ var Accordion = react.forwardRef(
       if (controlledKeys === void 0) setInternalKeys(next);
       onChange?.(next);
     };
-    return /* @__PURE__ */ jsxRuntime.jsx(Root45, { ref, $variant: variant, ...props, children: items.map((item) => {
+    return /* @__PURE__ */ jsxRuntime.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}`;
@@ -9610,7 +9738,7 @@ var ICONS = {
   warning: /* @__PURE__ */ jsxRuntime.jsx(WarningAmberOutlinedIcon__default.default, { "aria-hidden": true, style: { fontSize: 20 } }),
   error: /* @__PURE__ */ jsxRuntime.jsx(ErrorOutlineOutlinedIcon__default.default, { "aria-hidden": true, style: { fontSize: 20 } })
 };
-var Root46 = styles.styled("div", {
+var Root47 = styles.styled("div", {
   shouldForwardProp: (prop) => prop !== "$severity"
 })(({ theme, $severity }) => {
   const palette = {
@@ -9660,7 +9788,7 @@ var CloseButton2 = styles.styled("button")(({ theme }) => ({
   }
 }));
 var Alert = react.forwardRef(
-  ({ severity = "info", title, children, onClose, icon, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root46, { ref, role: "alert", $severity: severity, ...props, children: [
+  ({ severity = "info", title, children, onClose, icon, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root47, { ref, role: "alert", $severity: severity, ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx(IconSlot2, { children: icon ?? ICONS[severity] }),
     /* @__PURE__ */ jsxRuntime.jsxs(Body, { children: [
       title && /* @__PURE__ */ jsxRuntime.jsx(Title5, { children: title }),
@@ -9818,7 +9946,7 @@ var MenuItemIcon = styles.styled("span")({
   width: "1rem",
   height: "1rem"
 });
-var Separator3 = styles.styled("hr")(({ theme }) => ({
+var Separator4 = styles.styled("hr")(({ theme }) => ({
   margin: "0.25rem 0",
   border: "none",
   borderTop: `1px solid ${theme.palette.divider}`
@@ -9888,7 +10016,7 @@ var ContextMenu = react.forwardRef(
           $x: pos.x,
           $y: pos.y,
           children: items.map(
-            (item) => item.separator ? /* @__PURE__ */ jsxRuntime.jsx(Separator3, { role: "separator" }, item.key) : /* @__PURE__ */ jsxRuntime.jsxs(
+            (item) => item.separator ? /* @__PURE__ */ jsxRuntime.jsx(Separator4, { role: "separator" }, item.key) : /* @__PURE__ */ jsxRuntime.jsxs(
               MenuItem,
               {
                 role: "menuitem",
@@ -9910,7 +10038,7 @@ var ContextMenu = react.forwardRef(
   }
 );
 ContextMenu.displayName = "ContextMenu";
-var Root47 = styles.styled("div")(({ theme }) => ({
+var Root48 = styles.styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
   alignItems: "center",
@@ -9938,7 +10066,7 @@ var Description8 = styles.styled("p")(({ theme }) => ({
   maxWidth: "28rem"
 }));
 var EmptyState = react.forwardRef(
-  ({ icon, title, description, action, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root47, { ref, ...props, children: [
+  ({ icon, title, description, action, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root48, { ref, ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx(IconWrap3, { "aria-hidden": true, children: icon ?? /* @__PURE__ */ jsxRuntime.jsx(InboxOutlinedIcon__default.default, {}) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
       /* @__PURE__ */ jsxRuntime.jsx(Title6, { children: title }),
@@ -9958,7 +10086,7 @@ var FONT_SIZE2 = {
   md: "0.9375rem",
   lg: "1rem"
 };
-var Root48 = styles.styled("ul", {
+var Root49 = styles.styled("ul", {
   shouldForwardProp: (p) => p !== "$variant"
 })(({ theme, $variant }) => ({
   listStyle: "none",
@@ -10053,7 +10181,7 @@ var SuffixWrap = styles.styled("span")({
 var List4 = react.forwardRef(
   ({ items, size = "md", variant = "default", dividers = true, ...props }, ref) => {
     const effectiveVariant = !dividers && variant === "default" ? "default" : variant;
-    return /* @__PURE__ */ jsxRuntime.jsx(Root48, { ref, $variant: effectiveVariant, role: "list", ...props, children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ jsxRuntime.jsx(Root49, { ref, $variant: effectiveVariant, role: "list", ...props, children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
       Item3,
       {
         role: "listitem",
@@ -10092,7 +10220,7 @@ var speedDuration = {
   normal: "20s",
   fast: "10s"
 };
-var Root49 = styles.styled("div")({
+var Root50 = styles.styled("div")({
   overflow: "hidden",
   width: "100%",
   userSelect: "none"
@@ -10123,7 +10251,7 @@ var Marquee = react.forwardRef(
       /* @__PURE__ */ jsxRuntime.jsx(ItemWrap, { $gap: gapValue, "aria-hidden": "false", children }),
       /* @__PURE__ */ jsxRuntime.jsx(ItemWrap, { $gap: gapValue, "aria-hidden": "true", children })
     ] });
-    return /* @__PURE__ */ jsxRuntime.jsx(Root49, { ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Track5, { $direction: direction, $speed: speed, $pauseOnHover: pauseOnHover, $gap: gapValue, children: content }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(Root50, { ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Track5, { $direction: direction, $speed: speed, $pauseOnHover: pauseOnHover, $gap: gapValue, children: content }) });
   }
 );
 Marquee.displayName = "Marquee";
@@ -10279,7 +10407,167 @@ function Modal({
   );
 }
 var modalSizes = ["sm", "md", "lg", "xl", "full"];
-var Root50 = styles.styled("div")({ width: "100%" });
+var fadeIn4 = react$1.keyframes`from { opacity: 0; } to { opacity: 1; }`;
+var slideInLeft = react$1.keyframes`from { transform: translateX(-100%); } to { transform: translateX(0); }`;
+var slideInRight = react$1.keyframes`from { transform: translateX(100%); } to { transform: translateX(0); }`;
+var slideInTop = react$1.keyframes`from { transform: translateY(-100%); } to { transform: translateY(0); }`;
+var slideInBottom = react$1.keyframes`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 = styles.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 = styles.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 = styles.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 = styles.styled("h2")(({ theme }) => ({
+  margin: 0,
+  fontFamily: theme.typography.fontFamily,
+  fontSize: "1.125rem",
+  fontWeight: 700,
+  color: theme.palette.text.primary,
+  lineHeight: 1.4
+}));
+var CloseButton4 = styles.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 = styles.styled("div")(({ theme }) => ({
+  padding: "1.5rem",
+  overflowY: "auto",
+  flex: 1,
+  fontFamily: theme.typography.fontFamily,
+  color: theme.palette.text.primary
+}));
+var Footer5 = styles.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
+}) {
+  react.useEffect(() => {
+    if (!open) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [open]);
+  react.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 reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx(Backdrop2, { "aria-hidden": "false", onClick: closeOnBackdrop ? onClose : void 0, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(Header3, { children: [
+            title ? /* @__PURE__ */ jsxRuntime.jsx(Title8, { id: "sheet-title", children: title }) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
+            !hideCloseButton && /* @__PURE__ */ jsxRuntime.jsx(CloseButton4, { "aria-label": "Zamknij", onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon__default.default, { "aria-hidden": true, style: { fontSize: 16 } }) })
+          ] }),
+          children && /* @__PURE__ */ jsxRuntime.jsx(Body3, { children }),
+          footer && /* @__PURE__ */ jsxRuntime.jsx(Footer5, { children: footer })
+        ]
+      }
+    ) }),
+    document.body
+  );
+}
+var sheetPositions = ["left", "right", "top", "bottom"];
+var sheetSizes = ["sm", "md", "lg", "full"];
+var Root51 = styles.styled("div")({ width: "100%" });
 var TabList = styles.styled("div", {
   shouldForwardProp: (prop) => prop !== "$variant"
 })(({ theme, $variant }) => ({
@@ -10345,7 +10633,7 @@ var TabButton = styles.styled("button", {
     }
   }
 }));
-var Panel2 = styles.styled("div")(({ theme }) => ({
+var Panel3 = styles.styled("div")(({ theme }) => ({
   paddingTop: "1.25rem",
   fontFamily: theme.typography.fontFamily,
   color: theme.palette.text.primary
@@ -10359,7 +10647,7 @@ var Tabs = react.forwardRef(
       onChange?.(key);
     };
     const activeTab = tabs.find((t) => t.key === activeKey);
-    return /* @__PURE__ */ jsxRuntime.jsxs(Root50, { ref, ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root51, { ref, ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsx(TabList, { role: "tablist", $variant: variant, children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
         TabButton,
         {
@@ -10378,7 +10666,7 @@ var Tabs = react.forwardRef(
         tab.key
       )) }),
       activeTab && /* @__PURE__ */ jsxRuntime.jsx(
-        Panel2,
+        Panel3,
         {
           role: "tabpanel",
           id: `tabpanel-${activeTab.key}`,
@@ -10391,7 +10679,7 @@ var Tabs = react.forwardRef(
 );
 Tabs.displayName = "Tabs";
 var tabsVariants = ["underline", "pills", "bordered"];
-var Root51 = styles.styled("div")(({ theme }) => ({
+var Root52 = styles.styled("div")(({ theme }) => ({
   display: "grid",
   gridTemplateColumns: "4.5rem 1fr",
   gap: "0.875rem",
@@ -10407,7 +10695,7 @@ var ImageWrap4 = styles.styled("div")(({ theme }) => ({
   flexShrink: 0
 }));
 var Info5 = styles.styled("div")({ display: "grid", gap: "0.5rem" });
-var Row5 = styles.styled("div")({
+var Row6 = styles.styled("div")({
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
@@ -10443,14 +10731,14 @@ var CartDrawerItem = ({
   imageAlt,
   onQuantityChange,
   onRemove
-}) => /* @__PURE__ */ jsxRuntime.jsxs(Root51, { children: [
+}) => /* @__PURE__ */ jsxRuntime.jsxs(Root52, { children: [
   /* @__PURE__ */ jsxRuntime.jsx(ImageWrap4, { children: /* @__PURE__ */ jsxRuntime.jsx(ProductCardImage, { src: imageUrl, alt: imageAlt ?? name }) }),
   /* @__PURE__ */ jsxRuntime.jsxs(Info5, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Row5, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Row6, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(Name12, { children: name }),
       /* @__PURE__ */ jsxRuntime.jsx(Price3, { children: price })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(Row5, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Row6, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         QuantitySelector,
         {
@@ -10471,7 +10759,7 @@ var Overlay3 = styles.styled("div")(({ $open }) => ({
   backgroundColor: "rgba(0,0,0,0.36)",
   zIndex: 1200
 }));
-var Panel3 = styles.styled("aside")(({ theme }) => ({
+var Panel4 = styles.styled("aside")(({ theme }) => ({
   position: "absolute",
   top: 0,
   right: 0,
@@ -10483,14 +10771,14 @@ var Panel3 = styles.styled("aside")(({ theme }) => ({
   boxShadow: theme.shadows[5],
   fontFamily: theme.typography.fontFamily
 }));
-var Header3 = styles.styled("div")(({ theme }) => ({
+var Header4 = styles.styled("div")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
   padding: "1rem 1.25rem",
   borderBottom: `1px solid ${theme.palette.divider}`
 }));
-var Title8 = styles.styled("h2")(({ theme }) => ({
+var Title9 = styles.styled("h2")(({ theme }) => ({
   margin: 0,
   fontSize: "1.125rem",
   color: theme.palette.text.primary
@@ -10508,13 +10796,13 @@ var Items = styles.styled("div")({
   padding: "1rem 1.25rem",
   overflow: "auto"
 });
-var Row6 = styles.styled("div")({
+var Row7 = styles.styled("div")({
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
   gap: "0.75rem"
 });
-var Footer5 = styles.styled("div")(({ theme }) => ({
+var Footer6 = styles.styled("div")(({ theme }) => ({
   display: "grid",
   gap: "1rem",
   marginTop: "auto",
@@ -10534,9 +10822,9 @@ var CartDrawer = react.forwardRef(
     onQuantityChange,
     onRemove,
     ...props
-  }, ref) => /* @__PURE__ */ jsxRuntime.jsx(Overlay3, { $open: open, children: /* @__PURE__ */ jsxRuntime.jsxs(Panel3, { ref, "aria-hidden": !open, "aria-label": title, ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Header3, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Title8, { children: title }),
+  }, ref) => /* @__PURE__ */ jsxRuntime.jsx(Overlay3, { $open: open, children: /* @__PURE__ */ jsxRuntime.jsxs(Panel4, { ref, "aria-hidden": !open, "aria-label": title, ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Header4, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Title9, { children: title }),
       /* @__PURE__ */ jsxRuntime.jsx(IconButton, { type: "button", "aria-label": closeLabel, onClick: onClose, children: "\xD7" })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(Items, { children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -10548,8 +10836,8 @@ var CartDrawer = react.forwardRef(
       },
       item.id
     )) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(Footer5, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(Row6, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Footer6, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Row7, { children: [
         /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Suma" }),
         /* @__PURE__ */ jsxRuntime.jsx("strong", { children: subtotal })
       ] }),
@@ -10558,7 +10846,7 @@ var CartDrawer = react.forwardRef(
   ] }) })
 );
 CartDrawer.displayName = "CartDrawer";
-var Root52 = styles.styled("aside")(({ theme }) => ({
+var Root53 = styles.styled("aside")(({ theme }) => ({
   display: "grid",
   gap: "1.5rem",
   width: "100%",
@@ -10569,13 +10857,13 @@ var Root52 = styles.styled("aside")(({ theme }) => ({
   backgroundColor: theme.palette.background.paper,
   fontFamily: theme.typography.fontFamily
 }));
-var Header4 = styles.styled("div")({
+var Header5 = styles.styled("div")({
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
   gap: "1rem"
 });
-var Title9 = styles.styled("h2")(({ theme }) => ({
+var Title10 = styles.styled("h2")(({ theme }) => ({
   margin: 0,
   color: theme.palette.text.primary,
   fontSize: "1.125rem"
@@ -10650,9 +10938,9 @@ var FilterSidebar = react.forwardRef(
     onPriceRangeChange,
     onClear,
     ...props
-  }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root52, { ref, "aria-label": "Filtry produkt\xF3w", ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Header4, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Title9, { children: "Filtry" }),
+  }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root53, { ref, "aria-label": "Filtry produkt\xF3w", ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Header5, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Title10, { children: "Filtry" }),
       onClear && /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", onClick: onClear, children: "Wyczy\u015B\u0107" })
     ] }),
     priceRange && /* @__PURE__ */ jsxRuntime.jsxs(Group, { children: [
@@ -10693,7 +10981,7 @@ var FilterSidebar = react.forwardRef(
   ] })
 );
 FilterSidebar.displayName = "FilterSidebar";
-var Root53 = styles.styled("li")({
+var Root54 = styles.styled("li")({
   display: "grid",
   gridTemplateColumns: "3.5rem 1fr auto",
   alignItems: "center",
@@ -10737,7 +11025,7 @@ var OrderSummaryItem = ({
   imageAlt,
   quantity,
   meta
-}) => /* @__PURE__ */ jsxRuntime.jsxs(Root53, { children: [
+}) => /* @__PURE__ */ jsxRuntime.jsxs(Root54, { children: [
   /* @__PURE__ */ jsxRuntime.jsx(ImageWrap5, { children: /* @__PURE__ */ jsxRuntime.jsx(ProductCardImage, { src: imageUrl, alt: imageAlt ?? String(name) }) }),
   /* @__PURE__ */ jsxRuntime.jsxs(Info6, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(Name13, { children: name }),
@@ -10753,7 +11041,7 @@ var OrderSummaryItem = ({
   /* @__PURE__ */ jsxRuntime.jsx(Price4, { children: price })
 ] });
 OrderSummaryItem.displayName = "OrderSummaryItem";
-var Root54 = styles.styled("div", {
+var Root55 = styles.styled("div", {
   shouldForwardProp: (prop) => prop !== "$total"
 })(({ theme, $total }) => ({
   display: "flex",
@@ -10765,13 +11053,13 @@ var Root54 = styles.styled("div", {
   fontWeight: $total ? 800 : 400,
   "& dt, & dd": { margin: 0 }
 }));
-var OrderSummaryRow = ({ label, value, total = false }) => /* @__PURE__ */ jsxRuntime.jsxs(Root54, { as: "div", $total: total, children: [
+var OrderSummaryRow = ({ label, value, total = false }) => /* @__PURE__ */ jsxRuntime.jsxs(Root55, { as: "div", $total: total, children: [
   /* @__PURE__ */ jsxRuntime.jsx("dt", { children: label }),
   /* @__PURE__ */ jsxRuntime.jsx("dd", { children: value })
 ] });
 OrderSummaryRow.displayName = "OrderSummaryRow";
-var Root55 = styles.styled(Card)({ display: "grid", gap: "1rem" });
-var Title10 = styles.styled("h2")(({ theme }) => ({
+var Root56 = styles.styled(Card)({ display: "grid", gap: "1rem" });
+var Title11 = styles.styled("h2")(({ theme }) => ({
   margin: 0,
   fontFamily: theme.typography.fontFamily,
   fontSize: "1.125rem",
@@ -10812,8 +11100,8 @@ var OrderSummary = react.forwardRef(
     ctaLabel = "Przejd\u017A do kasy",
     onCheckout,
     ...props
-  }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root55, { ref, variant: "default", padding: "lg", rounded: "lg", ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Title10, { children: title }),
+  }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root56, { ref, variant: "default", padding: "lg", rounded: "lg", ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Title11, { children: title }),
     items.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(SectionTitle, { children: itemsTitle }),
       /* @__PURE__ */ jsxRuntime.jsx(ItemList, { children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(OrderSummaryItem, { ...item }, item.id)) }),
@@ -10832,7 +11120,7 @@ var OrderSummary = react.forwardRef(
   ] })
 );
 OrderSummary.displayName = "OrderSummary";
-var Root56 = styles.styled("div")(({ theme }) => ({
+var Root57 = styles.styled("div")(({ theme }) => ({
   fontFamily: theme.typography.fontFamily
 }));
 var Grid2 = styles.styled("div", {
@@ -10867,7 +11155,7 @@ var ScrollTrack = styles.styled("div")({
   }
 });
 var RelatedProducts = react.forwardRef(
-  ({ products, title = "Podobne produkty", layout = "grid", columns = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root56, { ref, ...props, children: [
+  ({ products, title = "Podobne produkty", layout = "grid", columns = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root57, { ref, ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx(SectionHeading, { title, align: "left", style: { marginBottom: "1.5rem" } }),
     layout === "scroll" ? /* @__PURE__ */ jsxRuntime.jsx(ScrollTrack, { children: products.map((product, i) => /* @__PURE__ */ jsxRuntime.jsx(ProductCard, { ...product }, product.name + i)) }) : /* @__PURE__ */ jsxRuntime.jsx(Grid2, { $columns: columns, children: products.map((product, i) => /* @__PURE__ */ jsxRuntime.jsx(ProductCard, { ...product }, product.name + i)) })
   ] })
@@ -10883,7 +11171,7 @@ var Card2 = styles.styled("div")(({ theme }) => ({
   gap: "0.75rem",
   fontFamily: theme.typography.fontFamily
 }));
-var Header5 = styles.styled("div")({
+var Header6 = styles.styled("div")({
   display: "flex",
   alignItems: "flex-start",
   gap: "0.875rem"
@@ -10902,7 +11190,7 @@ var ReviewDate = styles.styled("div")(({ theme }) => ({
   color: theme.palette.text.secondary,
   marginTop: "0.125rem"
 }));
-var Title11 = styles.styled("div")(({ theme }) => ({
+var Title12 = styles.styled("div")(({ theme }) => ({
   fontSize: "0.9375rem",
   fontWeight: 700,
   color: theme.palette.text.primary
@@ -10921,7 +11209,7 @@ var HelpfulRow = styles.styled("div")(({ theme }) => ({
   color: theme.palette.text.secondary
 }));
 var ReviewItem = ({ review }) => /* @__PURE__ */ jsxRuntime.jsxs(Card2, { children: [
-  /* @__PURE__ */ jsxRuntime.jsxs(Header5, { children: [
+  /* @__PURE__ */ jsxRuntime.jsxs(Header6, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(Avatar, { initials: review.author.slice(0, 2).toUpperCase(), size: "sm" }),
     /* @__PURE__ */ jsxRuntime.jsxs(AuthorInfo, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(AuthorName, { children: [
@@ -10938,7 +11226,7 @@ var ReviewItem = ({ review }) => /* @__PURE__ */ jsxRuntime.jsxs(Card2, { childr
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(Rating, { value: review.rating, size: "sm", readonly: true })
   ] }),
-  review.title && /* @__PURE__ */ jsxRuntime.jsx(Title11, { children: review.title }),
+  review.title && /* @__PURE__ */ jsxRuntime.jsx(Title12, { children: review.title }),
   /* @__PURE__ */ jsxRuntime.jsx(Content3, { children: review.content }),
   review.helpfulCount !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs(HelpfulRow, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(ThumbUpOutlinedIcon__default.default, { "aria-hidden": true, style: { fontSize: 14 } }),
@@ -10947,7 +11235,7 @@ var ReviewItem = ({ review }) => /* @__PURE__ */ jsxRuntime.jsxs(Card2, { childr
   ] })
 ] });
 ReviewItem.displayName = "ReviewItem";
-var Root57 = styles.styled("div")(({ theme }) => ({
+var Root58 = styles.styled("div")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   gap: "2rem",
@@ -11009,7 +11297,7 @@ var ReviewSummary = ({
   ratingDistribution
 }) => {
   const totalDist = ratingDistribution ? Object.values(ratingDistribution).reduce((a, b) => a + b, 0) : 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs(Root57, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Root58, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(AverageBlock, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(Score, { children: averageRating.toFixed(1) }),
       /* @__PURE__ */ jsxRuntime.jsx(Rating, { value: averageRating, size: "sm", readonly: true }),
@@ -11033,7 +11321,7 @@ var ReviewSummary = ({
   ] });
 };
 ReviewSummary.displayName = "ReviewSummary";
-var Root58 = styles.styled("div")(({ theme }) => ({
+var Root59 = styles.styled("div")(({ theme }) => ({
   fontFamily: theme.typography.fontFamily
 }));
 var ReviewList = styles.styled("div")({
@@ -11049,7 +11337,7 @@ var ReviewSection = react.forwardRef(
     title = "Opinie klient\xF3w",
     ratingDistribution,
     ...props
-  }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root58, { ref, ...props, children: [
+  }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root59, { ref, ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx(SectionHeading, { title, align: "left", style: { marginBottom: "1.5rem" } }),
     averageRating !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: "2rem" }, children: /* @__PURE__ */ jsxRuntime.jsx(
       ReviewSummary,
@@ -11106,13 +11394,12 @@ var CommentSection = react.forwardRef(
   ({
     title = "Komentarze",
     comments,
-    maxWidth = "xl",
     onLike,
     onReply,
     ...rest
   }, ref) => {
     const total = countTotal(comments);
-    return /* @__PURE__ */ jsxRuntime.jsx(Section, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { maxWidth, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Section, { ref, ...rest, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Heading, { children: [
         title,
         /* @__PURE__ */ jsxRuntime.jsxs(CommentCount, { children: [
@@ -11134,7 +11421,7 @@ var CommentSection = react.forwardRef(
           reply.id
         )) })
       ] }, comment.id)) })
-    ] }) });
+    ] });
   }
 );
 CommentSection.displayName = "CommentSection";
@@ -11147,12 +11434,11 @@ var FaqSection = react.forwardRef(
     description,
     items,
     headingAlign = "center",
-    maxWidth = "xl",
     defaultOpenIndex,
     ...rest
   }, ref) => {
     const hasHeading = Boolean(title || description);
-    return /* @__PURE__ */ jsxRuntime.jsx(Section, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { maxWidth, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Section, { ref, ...rest, children: [
       hasHeading && /* @__PURE__ */ jsxRuntime.jsx(SectionHeading, { title: title ?? "", description, align: headingAlign }),
       /* @__PURE__ */ jsxRuntime.jsx(List6, { $hasHeading: hasHeading, children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
         FaqItem,
@@ -11162,7 +11448,7 @@ var FaqSection = react.forwardRef(
         },
         `${item.question}-${index}`
       )) })
-    ] }) });
+    ] });
   }
 );
 FaqSection.displayName = "FaqSection";
@@ -11189,11 +11475,10 @@ var FeatureGrid = react.forwardRef(
     columns = 3,
     cardVariant = "default",
     itemLayout = "card",
-    maxWidth = "xl",
     ...rest
   }, ref) => {
     const hasHeading = Boolean(title || description);
-    return /* @__PURE__ */ jsxRuntime.jsx(Section, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { maxWidth, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Section, { ref, ...rest, children: [
       hasHeading && /* @__PURE__ */ jsxRuntime.jsx(SectionHeading, { title: title ?? "", description, align: headingAlign }),
       /* @__PURE__ */ jsxRuntime.jsx(Grid3, { $columns: columns, $hasHeading: hasHeading, $iconLeft: itemLayout === "icon-left", children: features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsx(
         FeatureItem,
@@ -11204,7 +11489,7 @@ var FeatureGrid = react.forwardRef(
         },
         `${feature.title}-${index}`
       )) })
-    ] }) });
+    ] });
   }
 );
 FeatureGrid.displayName = "FeatureGrid";
@@ -11234,11 +11519,10 @@ var LogoCloud = react.forwardRef(
     variant = "plain",
     monochrome = true,
     logoHeight = 40,
-    maxWidth = "xl",
     ...rest
   }, ref) => {
     const hasHeading = Boolean(title || description);
-    return /* @__PURE__ */ jsxRuntime.jsx(Section, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { maxWidth, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Section, { ref, ...rest, children: [
       hasHeading && title && /* @__PURE__ */ jsxRuntime.jsx(SectionHeading, { title, description, align: headingAlign }),
       hasHeading && !title && description && /* @__PURE__ */ jsxRuntime.jsx(SectionHeading, { title: description, align: headingAlign, as: "h2" }),
       /* @__PURE__ */ jsxRuntime.jsx(Grid4, { $columns: columns, $hasHeading: hasHeading, children: logos.map((logo) => {
@@ -11254,7 +11538,7 @@ var LogoCloud = react.forwardRef(
           key
         );
       }) })
-    ] }) });
+    ] });
   }
 );
 LogoCloud.displayName = "LogoCloud";
@@ -11336,7 +11620,6 @@ var NewsletterSection = react.forwardRef(
     headingAlign = "center",
     layout = "centered",
     cardVariant = "default",
-    maxWidth = "xl",
     onSubmit,
     ...rest
   }, ref) => {
@@ -11367,7 +11650,7 @@ var NewsletterSection = react.forwardRef(
       ] }),
       privacyNote && /* @__PURE__ */ jsxRuntime.jsx(PrivacyNote, { children: privacyNote })
     ] });
-    return /* @__PURE__ */ jsxRuntime.jsx(Section, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(Container, { maxWidth, children: /* @__PURE__ */ jsxRuntime.jsx(Card, { variant: cardVariant, padding: "xl", rounded: "lg", children: isCentered ? /* @__PURE__ */ jsxRuntime.jsxs(CenteredInner, { children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(Section, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(Card, { variant: cardVariant, padding: "xl", rounded: "lg", children: isCentered ? /* @__PURE__ */ jsxRuntime.jsxs(CenteredInner, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         SectionHeading,
         {
@@ -11380,7 +11663,7 @@ var NewsletterSection = react.forwardRef(
     ] }) : /* @__PURE__ */ jsxRuntime.jsxs(SplitInner, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(SectionHeading, { title: title ?? "", description, align: "left" }),
       formNode
-    ] }) }) }) });
+    ] }) }) });
   }
 );
 NewsletterSection.displayName = "NewsletterSection";
@@ -11495,11 +11778,10 @@ var StatsSection = react.forwardRef(
     columns = 3,
     cardVariant = "default",
     statAlign = "center",
-    maxWidth = "xl",
     ...rest
   }, ref) => {
     const hasHeading = Boolean(title || description);
-    return /* @__PURE__ */ jsxRuntime.jsx(Section, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { maxWidth, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Section, { ref, ...rest, children: [
       hasHeading && /* @__PURE__ */ jsxRuntime.jsx(SectionHeading, { title: title ?? "", description, align: headingAlign }),
       /* @__PURE__ */ jsxRuntime.jsx(Grid6, { $columns: columns, $hasHeading: hasHeading, children: stats.map((stat, index) => /* @__PURE__ */ jsxRuntime.jsx(
         StatCard,
@@ -11510,7 +11792,7 @@ var StatsSection = react.forwardRef(
         },
         `${stat.label}-${index}`
       )) })
-    ] }) });
+    ] });
   }
 );
 StatsSection.displayName = "StatsSection";
@@ -11537,11 +11819,10 @@ var TeamSection = react.forwardRef(
     headingAlign = "center",
     columns = 3,
     cardVariant = "default",
-    maxWidth = "xl",
     ...rest
   }, ref) => {
     const hasHeading = Boolean(title || description);
-    return /* @__PURE__ */ jsxRuntime.jsx(Section, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { maxWidth, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Section, { ref, ...rest, children: [
       hasHeading && title && /* @__PURE__ */ jsxRuntime.jsx(SectionHeading, { title, description, align: headingAlign }),
       hasHeading && !title && description && /* @__PURE__ */ jsxRuntime.jsx(SectionHeading, { title: description, align: headingAlign, as: "h2" }),
       /* @__PURE__ */ jsxRuntime.jsx(Grid7, { $columns: columns, $hasHeading: hasHeading, children: members.map((member) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -11552,7 +11833,7 @@ var TeamSection = react.forwardRef(
         },
         `${member.name}-${member.role}`
       )) })
-    ] }) });
+    ] });
   }
 );
 TeamSection.displayName = "TeamSection";
@@ -11579,11 +11860,10 @@ var TestimonialsSection = react.forwardRef(
     headingAlign = "center",
     columns = 3,
     cardVariant = "default",
-    maxWidth = "xl",
     ...rest
   }, ref) => {
     const hasHeading = Boolean(title || description);
-    return /* @__PURE__ */ jsxRuntime.jsx(Section, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { maxWidth, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Section, { ref, ...rest, children: [
       hasHeading && /* @__PURE__ */ jsxRuntime.jsx(SectionHeading, { title: title ?? "", description, align: headingAlign }),
       /* @__PURE__ */ jsxRuntime.jsx(Grid8, { $columns: columns, $hasHeading: hasHeading, children: testimonials.map((testimonial, index) => /* @__PURE__ */ jsxRuntime.jsx(
         TestimonialCard,
@@ -11593,12 +11873,12 @@ var TestimonialsSection = react.forwardRef(
         },
         `${testimonial.authorName}-${index}`
       )) })
-    ] }) });
+    ] });
   }
 );
 TestimonialsSection.displayName = "TestimonialsSection";
 var testimonialsSectionColumns = [1, 2, 3];
-var fadeIn4 = react$1.keyframes`
+var fadeIn5 = react$1.keyframes`
   from { opacity: 0; }
   to   { opacity: 1; }
 `;
@@ -11606,7 +11886,7 @@ var slideDown = react$1.keyframes`
   from { opacity: 0; transform: translateY(-8px) scale(0.98); }
   to   { opacity: 1; transform: translateY(0) scale(1); }
 `;
-var Backdrop2 = styles.styled("div")({
+var Backdrop3 = styles.styled("div")({
   position: "fixed",
   inset: 0,
   zIndex: 1500,
@@ -11615,7 +11895,7 @@ var Backdrop2 = styles.styled("div")({
   alignItems: "flex-start",
   justifyContent: "center",
   padding: "8vh 1rem 1rem",
-  animation: `${fadeIn4} 150ms ease`
+  animation: `${fadeIn5} 150ms ease`
 });
 var Dialog2 = styles.styled("div")(({ theme }) => ({
   width: "100%",
@@ -11745,7 +12025,7 @@ var EmptyState2 = styles.styled("div")(({ theme }) => ({
   fontSize: "0.9375rem",
   color: theme.palette.text.secondary
 }));
-var Footer6 = styles.styled("div")(({ theme }) => ({
+var Footer7 = styles.styled("div")(({ theme }) => ({
   display: "flex",
   gap: "1.25rem",
   padding: "0.5rem 1rem",
@@ -11838,7 +12118,7 @@ function CommandPalette({
   let globalIndex = 0;
   return reactDom.createPortal(
     /* @__PURE__ */ jsxRuntime.jsx(
-      Backdrop2,
+      Backdrop3,
       {
         role: "presentation",
         onClick: (e) => {
@@ -11900,7 +12180,7 @@ function CommandPalette({
                   );
                 })
               ] }, group.id)) }),
-              /* @__PURE__ */ jsxRuntime.jsxs(Footer6, { id: `${id}-hint`, "aria-hidden": "true", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(Footer7, { id: `${id}-hint`, "aria-hidden": "true", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs(FooterHint, { children: [
                   /* @__PURE__ */ jsxRuntime.jsx(Kbd, { children: "\u2191" }),
                   /* @__PURE__ */ jsxRuntime.jsx(Kbd, { children: "\u2193" }),
@@ -11974,7 +12254,7 @@ var TopRow = styles.styled("div")({
   flexWrap: "wrap"
 });
 var TextBlock2 = styles.styled("div")({ flex: 1, minWidth: "16rem" });
-var Title12 = styles.styled("p")(({ theme }) => ({
+var Title13 = styles.styled("p")(({ theme }) => ({
   margin: "0 0 0.25rem",
   fontFamily: theme.typography.fontFamily,
   fontSize: "1rem",
@@ -12035,7 +12315,7 @@ var TextButton = styles.styled(BaseButton)(({ theme }) => ({
   padding: "0.5625rem 0.5rem",
   "&:hover": { color: theme.palette.text.primary }
 }));
-var Panel4 = styles.styled("div")(({ theme }) => ({
+var Panel5 = styles.styled("div")(({ theme }) => ({
   borderTop: `1px solid ${theme.palette.divider}`,
   paddingTop: "1rem",
   display: "flex",
@@ -12139,7 +12419,7 @@ function CookieConsent({
     /* @__PURE__ */ jsxRuntime.jsx(Bar2, { role: "region", "aria-label": "Zgoda na pliki cookie", "aria-live": "polite", children: /* @__PURE__ */ jsxRuntime.jsxs(Inner4, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(TopRow, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs(TextBlock2, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Title12, { children: title }),
+          /* @__PURE__ */ jsxRuntime.jsx(Title13, { children: title }),
           /* @__PURE__ */ jsxRuntime.jsxs(Description9, { children: [
             description,
             privacyPolicyLabel && privacyPolicyHref && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -12163,7 +12443,7 @@ function CookieConsent({
           /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { type: "button", onClick: handleAcceptAll, children: acceptAllLabel })
         ] })
       ] }),
-      expanded && /* @__PURE__ */ jsxRuntime.jsxs(Panel4, { id: `${id}-panel`, role: "group", "aria-label": "Kategorie plik\xF3w cookie", children: [
+      expanded && /* @__PURE__ */ jsxRuntime.jsxs(Panel5, { id: `${id}-panel`, role: "group", "aria-label": "Kategorie plik\xF3w cookie", children: [
         categories.map((cat) => /* @__PURE__ */ jsxRuntime.jsxs(CategoryRow, { children: [
           /* @__PURE__ */ jsxRuntime.jsxs(CategoryText, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(CategoryLabel, { children: cat.label }),
@@ -12190,7 +12470,7 @@ function CookieConsent({
   );
 }
 var defaultCookieCategories = DEFAULT_CATEGORIES;
-var Root59 = styles.styled("footer")(({ theme }) => ({
+var Root60 = styles.styled("footer")(({ theme }) => ({
   width: "100%",
   backgroundColor: theme.palette.background.paper,
   borderTop: `1px solid ${theme.palette.divider}`
@@ -12318,7 +12598,7 @@ var SOCIAL_ICONS = {
     /* @__PURE__ */ jsxRuntime.jsx("polygon", { fill: "white", points: "9.75 15.02 15.5 12 9.75 8.98 9.75 15.02" })
   ] })
 };
-function Footer7({
+function Footer8({
   logo,
   description,
   columns = [],
@@ -12328,7 +12608,7 @@ function Footer7({
   style
 }) {
   const colCount = columns.length;
-  return /* @__PURE__ */ jsxRuntime.jsx(Root59, { style, children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { maxWidth, style: { paddingTop: "3rem", paddingBottom: "2rem" }, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Root60, { style, children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { maxWidth, style: { paddingTop: "3rem", paddingBottom: "2rem" }, children: [
     (logo || description || colCount > 0) && /* @__PURE__ */ jsxRuntime.jsxs(TopRow2, { style: { "--col-count": colCount }, children: [
       (logo || description) && /* @__PURE__ */ jsxRuntime.jsxs(BrandBlock, { children: [
         logo,
@@ -12355,7 +12635,7 @@ function Footer7({
     ] })
   ] }) });
 }
-var Root60 = styles.styled("header", {
+var Root61 = styles.styled("header", {
   shouldForwardProp: (p) => p !== "$sticky" && p !== "$variant"
 })(({ theme, $sticky, $variant }) => ({
   position: $sticky ? "sticky" : "relative",
@@ -12467,7 +12747,7 @@ function Navbar({
   style
 }) {
   const [mobileOpen, setMobileOpen] = react.useState(false);
-  return /* @__PURE__ */ jsxRuntime.jsxs(Root60, { $sticky: sticky, $variant: variant, style, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Root61, { $sticky: sticky, $variant: variant, style, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       Container,
       {
@@ -12514,8 +12794,10 @@ var themeBase = {
     info: { main: "#1976d2", dark: "#1565c0", light: "#42a5f5", contrastText: "#ffffff" }
   }
 };
-var themeLight = styles.createTheme(themeBase, {
+var themeLight = styles.createTheme({
+  ...themeBase,
   palette: {
+    ...themeBase.palette,
     mode: "light",
     primary: { main: "#1976d2", dark: "#1565c0", light: "#42a5f5", contrastText: "#ffffff" },
     secondary: { main: "#6b7280", dark: "#4b5563", light: "#9ca3af", contrastText: "#ffffff" },
@@ -12523,8 +12805,10 @@ var themeLight = styles.createTheme(themeBase, {
     background: { default: "#ffffff", paper: "#f5f5f5" }
   }
 });
-var themeDark = styles.createTheme(themeBase, {
+var themeDark = styles.createTheme({
+  ...themeBase,
   palette: {
+    ...themeBase.palette,
     mode: "dark",
     primary: { main: "#90caf9", dark: "#42a5f5", light: "#bbdefb", contrastText: "#0d1b2a" },
     secondary: { main: "#9ca3af", dark: "#6b7280", light: "#d1d5db", contrastText: "#111827" },
@@ -12532,8 +12816,10 @@ var themeDark = styles.createTheme(themeBase, {
     background: { default: "#121212", paper: "#1e1e1e" }
   }
 });
-var themeHighContrast = styles.createTheme(themeBase, {
+var themeHighContrast = styles.createTheme({
+  ...themeBase,
   palette: {
+    ...themeBase.palette,
     mode: "dark",
     primary: { main: "#ffffff", dark: "#e0e0e0", light: "#ffffff", contrastText: "#000000" },
     secondary: { main: "#ffff00", dark: "#cccc00", light: "#ffff66", contrastText: "#000000" },
@@ -12584,6 +12870,29 @@ 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] = react.useState(initialComments);
+  const onLike = react.useCallback((commentId) => {
+    setComments((prev) => toggleLikeInTree(prev, commentId));
+  }, []);
+  return { comments, onLike };
+}
 
 exports.Accordion = Accordion;
 exports.Alert = Alert;
@@ -12629,7 +12938,7 @@ exports.FeatureGrid = FeatureGrid;
 exports.FeatureItem = FeatureItem;
 exports.FileInput = FileInput;
 exports.FilterSidebar = FilterSidebar;
-exports.Footer = Footer7;
+exports.Footer = Footer8;
 exports.Image = Image;
 exports.Lightbox = Lightbox;
 exports.List = List4;
@@ -12673,6 +12982,7 @@ exports.ProgressCircle = ProgressCircle;
 exports.PromoStrip = PromoStrip;
 exports.Prose = Prose;
 exports.QuantitySelector = QuantitySelector;
+exports.RadioInput = RadioInput;
 exports.RangeSlider = RangeSlider;
 exports.Rating = Rating;
 exports.RelatedProducts = RelatedProducts;
@@ -12683,6 +12993,8 @@ exports.SearchInput = SearchInput;
 exports.Section = Section;
 exports.SectionHeading = SectionHeading;
 exports.SelectInput = SelectInput;
+exports.Separator = Separator;
+exports.Sheet = Sheet;
 exports.ShippingSelector = ShippingSelector;
 exports.Skeleton = Skeleton;
 exports.SortBar = SortBar;
@@ -12743,6 +13055,8 @@ exports.promoStripVariants = promoStripVariants;
 exports.rangeSliderSizes = rangeSliderSizes;
 exports.relatedProductsLayouts = relatedProductsLayouts;
 exports.sectionHeadingAligns = sectionHeadingAligns;
+exports.sheetPositions = sheetPositions;
+exports.sheetSizes = sheetSizes;
 exports.skeletonVariants = skeletonVariants;
 exports.spinnerColors = spinnerColors;
 exports.spinnerSizes = spinnerSizes;
@@ -12758,6 +13072,7 @@ exports.themeHighContrast = themeHighContrast;
 exports.themeLight = themeLight;
 exports.timelineItemStatuses = timelineItemStatuses;
 exports.timelineVariants = timelineVariants;
+exports.useCommentLikes = useCommentLikes;
 exports.variantSelectorModes = variantSelectorModes;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map