npm - @szymonpiatek/designsystem - Versions diffs - 0.0.5 → 0.0.7 - Mend

@szymonpiatek/designsystem 0.0.5 → 0.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/dist/index.cjs +1607 -466
package/dist/index.cjs.map +1 -1
package/dist/index.d.cts +206 -12
package/dist/index.d.ts +206 -12
package/dist/index.js +1404 -274
package/dist/index.js.map +1 -1
package/package.json +5 -18
package/dist/ssr/EmotionRegistry.cjs +0 -71
package/dist/ssr/EmotionRegistry.cjs.map +0 -1
package/dist/ssr/EmotionRegistry.js +0 -46
package/dist/ssr/EmotionRegistry.js.map +0 -1

package/dist/index.cjs CHANGED Viewed

@@ -1,9 +1,12 @@
 'use strict';
-var React = require('react');
+var react = require('react');
 var styles = require('@mui/material/styles');
-var CircularProgress = require('@mui/material/CircularProgress');
+var material = require('@mui/material');
 var jsxRuntime = require('react/jsx-runtime');
+var ShoppingCartIcon = require('@mui/icons-material/ShoppingCart');
+var FavoriteIcon = require('@mui/icons-material/Favorite');
+var FavoriteBorderIcon = require('@mui/icons-material/FavoriteBorder');
 var ExpandMoreIcon = require('@mui/icons-material/ExpandMore');
 var FileUploadIcon = require('@mui/icons-material/FileUpload');
 var CloudUploadMuiIcon = require('@mui/icons-material/CloudUpload');
@@ -21,41 +24,32 @@ var ChevronLeftIcon = require('@mui/icons-material/ChevronLeft');
 var ChevronRightIcon = require('@mui/icons-material/ChevronRight');
 var KeyboardArrowUpIcon = require('@mui/icons-material/KeyboardArrowUp');
 var KeyboardArrowDownIcon = require('@mui/icons-material/KeyboardArrowDown');
-var react = require('@emotion/react');
+var react$1 = require('@emotion/react');
+var ImageIcon = require('@mui/icons-material/Image');
 var ArticleIcon = require('@mui/icons-material/Article');
 var CheckCircleOutlinedIcon = require('@mui/icons-material/CheckCircleOutlined');
 var HighlightOffIcon = require('@mui/icons-material/HighlightOff');
+var CreditCardOutlinedIcon = require('@mui/icons-material/CreditCardOutlined');
+var LocalShippingOutlinedIcon = require('@mui/icons-material/LocalShippingOutlined');
+var GridViewIcon = require('@mui/icons-material/GridView');
+var ViewListIcon = require('@mui/icons-material/ViewList');
 var reactDom = require('react-dom');
 var KeyboardDoubleArrowLeftIcon = require('@mui/icons-material/KeyboardDoubleArrowLeft');
 var KeyboardDoubleArrowRightIcon = require('@mui/icons-material/KeyboardDoubleArrowRight');
+var InfoOutlinedIcon = require('@mui/icons-material/InfoOutlined');
+var WarningAmberOutlinedIcon = require('@mui/icons-material/WarningAmberOutlined');
+var ErrorOutlineOutlinedIcon = require('@mui/icons-material/ErrorOutlineOutlined');
+var InboxOutlinedIcon = require('@mui/icons-material/InboxOutlined');
+var VerifiedIcon = require('@mui/icons-material/Verified');
+var ThumbUpOutlinedIcon = require('@mui/icons-material/ThumbUpOutlined');
 var ArrowForwardIcon = require('@mui/icons-material/ArrowForward');
 var MenuIcon = require('@mui/icons-material/Menu');
-var CssBaseline = require('@mui/material/CssBaseline');
-var navigation = require('next/navigation');
-var createCache = require('@emotion/cache');
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var CircularProgress__default = /*#__PURE__*/_interopDefault(CircularProgress);
+var ShoppingCartIcon__default = /*#__PURE__*/_interopDefault(ShoppingCartIcon);
+var FavoriteIcon__default = /*#__PURE__*/_interopDefault(FavoriteIcon);
+var FavoriteBorderIcon__default = /*#__PURE__*/_interopDefault(FavoriteBorderIcon);
 var ExpandMoreIcon__default = /*#__PURE__*/_interopDefault(ExpandMoreIcon);
 var FileUploadIcon__default = /*#__PURE__*/_interopDefault(FileUploadIcon);
 var CloudUploadMuiIcon__default = /*#__PURE__*/_interopDefault(CloudUploadMuiIcon);
@@ -72,15 +66,24 @@ var ChevronLeftIcon__default = /*#__PURE__*/_interopDefault(ChevronLeftIcon);
 var ChevronRightIcon__default = /*#__PURE__*/_interopDefault(ChevronRightIcon);
 var KeyboardArrowUpIcon__default = /*#__PURE__*/_interopDefault(KeyboardArrowUpIcon);
 var KeyboardArrowDownIcon__default = /*#__PURE__*/_interopDefault(KeyboardArrowDownIcon);
+var ImageIcon__default = /*#__PURE__*/_interopDefault(ImageIcon);
 var ArticleIcon__default = /*#__PURE__*/_interopDefault(ArticleIcon);
 var CheckCircleOutlinedIcon__default = /*#__PURE__*/_interopDefault(CheckCircleOutlinedIcon);
 var HighlightOffIcon__default = /*#__PURE__*/_interopDefault(HighlightOffIcon);
+var CreditCardOutlinedIcon__default = /*#__PURE__*/_interopDefault(CreditCardOutlinedIcon);
+var LocalShippingOutlinedIcon__default = /*#__PURE__*/_interopDefault(LocalShippingOutlinedIcon);
+var GridViewIcon__default = /*#__PURE__*/_interopDefault(GridViewIcon);
+var ViewListIcon__default = /*#__PURE__*/_interopDefault(ViewListIcon);
 var KeyboardDoubleArrowLeftIcon__default = /*#__PURE__*/_interopDefault(KeyboardDoubleArrowLeftIcon);
 var KeyboardDoubleArrowRightIcon__default = /*#__PURE__*/_interopDefault(KeyboardDoubleArrowRightIcon);
+var InfoOutlinedIcon__default = /*#__PURE__*/_interopDefault(InfoOutlinedIcon);
+var WarningAmberOutlinedIcon__default = /*#__PURE__*/_interopDefault(WarningAmberOutlinedIcon);
+var ErrorOutlineOutlinedIcon__default = /*#__PURE__*/_interopDefault(ErrorOutlineOutlinedIcon);
+var InboxOutlinedIcon__default = /*#__PURE__*/_interopDefault(InboxOutlinedIcon);
+var VerifiedIcon__default = /*#__PURE__*/_interopDefault(VerifiedIcon);
+var ThumbUpOutlinedIcon__default = /*#__PURE__*/_interopDefault(ThumbUpOutlinedIcon);
 var ArrowForwardIcon__default = /*#__PURE__*/_interopDefault(ArrowForwardIcon);
 var MenuIcon__default = /*#__PURE__*/_interopDefault(MenuIcon);
-var CssBaseline__default = /*#__PURE__*/_interopDefault(CssBaseline);
-var createCache__default = /*#__PURE__*/_interopDefault(createCache);
 // src/components/atoms/buttons/Button/Button.tsx
 var sizeMap = {
@@ -153,7 +156,7 @@ var IconSlot = styles.styled("span")({
 var Spinner = styles.styled("span")({
   display: "inline-flex"
 });
-var Button = React.forwardRef(
+var Button = react.forwardRef(
   ({
     variant = "primary",
     size = "md",
@@ -183,7 +186,7 @@ var Button = React.forwardRef(
       "aria-label": ariaLabel,
       "aria-current": ariaCurrent,
       children: [
-        loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, { "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(CircularProgress__default.default, { size: "1em", color: "inherit", thickness: 5 }) }) : startIcon && /* @__PURE__ */ jsxRuntime.jsx(IconSlot, { children: startIcon }),
+        loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, { "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: "1em", color: "inherit", thickness: 5 }) }) : startIcon && /* @__PURE__ */ jsxRuntime.jsx(IconSlot, { children: startIcon }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { children }),
         endIcon && /* @__PURE__ */ jsxRuntime.jsx(IconSlot, { children: endIcon })
       ]
@@ -191,6 +194,102 @@ var Button = React.forwardRef(
   )
 );
 Button.displayName = "Button";
+var iconSizeMap = {
+  sm: 18,
+  md: 20,
+  lg: 24
+};
+var Root = styles.styled("span")({
+  position: "relative",
+  display: "inline-flex"
+});
+var Badge = styles.styled("span")(({ theme }) => ({
+  position: "absolute",
+  top: "-4px",
+  right: "-4px",
+  backgroundColor: theme.palette.primary.main,
+  color: "#fff",
+  borderRadius: "9999px",
+  fontSize: "0.625rem",
+  fontWeight: 700,
+  minWidth: "16px",
+  height: "16px",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: "0 3px",
+  pointerEvents: "none",
+  fontFamily: theme.typography.fontFamily,
+  lineHeight: 1
+}));
+var CartButton = react.forwardRef(
+  ({ count, size = "sm", label = "Koszyk", disabled, onClick, className, "aria-label": ariaLabel }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root, { className, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        ref,
+        variant: "ghost",
+        size,
+        disabled,
+        onClick,
+        "aria-label": ariaLabel ?? (count ? `${label} (${count})` : label),
+        children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "flex" }, children: /* @__PURE__ */ jsxRuntime.jsx(ShoppingCartIcon__default.default, { "aria-hidden": true, style: { fontSize: iconSizeMap[size] } }) })
+      }
+    ),
+    count != null && count > 0 && /* @__PURE__ */ jsxRuntime.jsx(Badge, { "aria-hidden": true, children: count > 99 ? "99+" : count })
+  ] })
+);
+CartButton.displayName = "CartButton";
+var sizeMap2 = {
+  sm: { iconSize: 16, padding: "0.375rem" },
+  md: { iconSize: 20, padding: "0.5rem" },
+  lg: { iconSize: 24, padding: "0.625rem" }
+};
+var Root2 = styles.styled("button")(
+  ({ theme, $active, $size }) => ({
+    appearance: "none",
+    border: `1px solid ${$active ? theme.palette.error.main : theme.palette.divider}`,
+    background: $active ? `${theme.palette.error.main}14` : "transparent",
+    cursor: "pointer",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "50%",
+    padding: sizeMap2[$size].padding,
+    color: $active ? theme.palette.error.main : theme.palette.text.secondary,
+    transition: "color 150ms ease, background-color 150ms ease, border-color 150ms ease",
+    "&:hover:not(:disabled)": {
+      color: theme.palette.error.main,
+      borderColor: theme.palette.error.main,
+      backgroundColor: `${theme.palette.error.main}14`
+    },
+    "&:focus-visible": {
+      outline: `3px solid ${theme.palette.primary.main}`,
+      outlineOffset: "2px"
+    },
+    "&:disabled": {
+      opacity: 0.4,
+      cursor: "not-allowed"
+    }
+  })
+);
+var WishlistButton = react.forwardRef(
+  ({ active = false, loading = false, size = "md", label, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    Root2,
+    {
+      ref,
+      type: "button",
+      $active: active,
+      $size: size,
+      disabled: loading || props.disabled,
+      "aria-label": label ?? (active ? "Usu\u0144 z listy \u017Cycze\u0144" : "Dodaj do listy \u017Cycze\u0144"),
+      "aria-pressed": active,
+      ...props,
+      children: loading ? /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: sizeMap2[size].iconSize, color: "inherit", thickness: 5 }) : active ? /* @__PURE__ */ jsxRuntime.jsx(FavoriteIcon__default.default, { "aria-hidden": true, style: { fontSize: sizeMap2[size].iconSize } }) : /* @__PURE__ */ jsxRuntime.jsx(FavoriteBorderIcon__default.default, { "aria-hidden": true, style: { fontSize: sizeMap2[size].iconSize } })
+    }
+  )
+);
+WishlistButton.displayName = "WishlistButton";
 var StyledHelperText = styles.styled("p")(({ theme, $error }) => ({
   margin: "0.25rem 0 0",
   fontSize: "0.75rem",
@@ -247,7 +346,7 @@ var inputColors = (theme, error) => ({
     boxShadow: `0 0 0 3px ${error ? theme.palette.error.main : theme.palette.primary.main}33`
   }
 });
-var Root = styles.styled("div")(({ $fullWidth }) => ({
+var Root3 = styles.styled("div")(({ $fullWidth }) => ({
   display: $fullWidth ? "block" : "inline-block",
   width: $fullWidth ? "100%" : "auto"
 }));
@@ -297,7 +396,7 @@ var Adornment = styles.styled("span")(({ theme }) => ({
   color: theme.palette.text.secondary,
   flexShrink: 0
 }));
-var BaseInput = React.forwardRef(
+var BaseInput = react.forwardRef(
   ({
     label,
     helperText,
@@ -310,9 +409,9 @@ var BaseInput = React.forwardRef(
     id,
     ...rest
   }, ref) => {
-    const autoId = React.useId();
+    const autoId = react.useId();
     const inputId = id ?? autoId;
-    return /* @__PURE__ */ jsxRuntime.jsxs(Root, { $fullWidth: fullWidth, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root3, { $fullWidth: fullWidth, children: [
       label && /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: inputId, error, size, children: label }),
       /* @__PURE__ */ jsxRuntime.jsxs(
         InputWrapper,
@@ -416,12 +515,12 @@ var LabelText = styles.styled("span")(
     userSelect: "none"
   })
 );
-var Root2 = styles.styled("span")(({ $disabled }) => ({
+var Root4 = styles.styled("span")(({ $disabled }) => ({
   display: "inline-flex",
   flexDirection: "column",
   cursor: $disabled ? "not-allowed" : "pointer"
 }));
-var CheckboxInput = React.forwardRef(
+var CheckboxInput = react.forwardRef(
   ({
     label,
     helperText,
@@ -432,15 +531,15 @@ var CheckboxInput = React.forwardRef(
     id,
     ...rest
   }, ref) => {
-    const autoId = React.useId();
+    const autoId = react.useId();
     const inputId = id ?? autoId;
-    const innerRef = React.useRef(null);
-    React.useEffect(() => {
+    const innerRef = react.useRef(null);
+    react.useEffect(() => {
       if (innerRef.current) {
         innerRef.current.indeterminate = indeterminate;
       }
     }, [indeterminate]);
-    return /* @__PURE__ */ jsxRuntime.jsxs(Root2, { $disabled: disabled, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root4, { $disabled: disabled, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Row, { htmlFor: inputId, children: [
         /* @__PURE__ */ jsxRuntime.jsx(Box, { $size: size, $error: error, $disabled: disabled, children: /* @__PURE__ */ jsxRuntime.jsx(
           HiddenInput,
@@ -474,7 +573,7 @@ var CloudUploadIcon = ({ size }) => /* @__PURE__ */ jsxRuntime.jsx(CloudUploadMu
 var FileDocIcon = ({ size }) => /* @__PURE__ */ jsxRuntime.jsx(InsertDriveFileIcon__default.default, { "aria-hidden": true, style: { fontSize: size } });
 var TrashIcon = ({ size = 12 }) => /* @__PURE__ */ jsxRuntime.jsx(DeleteOutlinedIcon__default.default, { "aria-hidden": true, style: { fontSize: size } });
 var XIcon = () => /* @__PURE__ */ jsxRuntime.jsx(CloseIcon__default.default, { "aria-hidden": true, style: { fontSize: 11 } });
-var Root3 = styles.styled("div")(({ $fullWidth }) => ({
+var Root5 = styles.styled("div")(({ $fullWidth }) => ({
   display: $fullWidth ? "block" : "inline-block",
   width: $fullWidth ? "100%" : "auto"
 }));
@@ -865,7 +964,7 @@ var FileActionBtn = styles.styled("button")(({
     "&:disabled": { opacity: 0.5, cursor: "not-allowed" }
   };
 });
-var FileInput = React.forwardRef(
+var FileInput = react.forwardRef(
   ({
     label,
     helperText,
@@ -893,11 +992,11 @@ var FileInput = React.forwardRef(
     onChange,
     ...rest
   }, ref) => {
-    const autoId = React.useId();
+    const autoId = react.useId();
     const inputId = id ?? autoId;
-    const innerRef = React.useRef(null);
-    const [files, setFiles] = React.useState([]);
-    const [isDragging, setIsDragging] = React.useState(false);
+    const innerRef = react.useRef(null);
+    const [files, setFiles] = react.useState([]);
+    const [isDragging, setIsDragging] = react.useState(false);
     const assignRef = (node) => {
       innerRef.current = node;
       if (typeof ref === "function") ref(node);
@@ -964,7 +1063,7 @@ var FileInput = React.forwardRef(
       }
     );
     if (variant === "dropzone") {
-      return /* @__PURE__ */ jsxRuntime.jsxs(Root3, { $fullWidth: fullWidth, children: [
+      return /* @__PURE__ */ jsxRuntime.jsxs(Root5, { $fullWidth: fullWidth, children: [
         label && /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: inputId, error, size, children: label }),
         /* @__PURE__ */ jsxRuntime.jsxs(
           DropzoneArea,
@@ -1092,7 +1191,7 @@ var FileInput = React.forwardRef(
         helperText && /* @__PURE__ */ jsxRuntime.jsx(HelperText, { error, children: helperText })
       ] });
     }
-    return /* @__PURE__ */ jsxRuntime.jsxs(Root3, { $fullWidth: fullWidth, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root5, { $fullWidth: fullWidth, children: [
       label && /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: inputId, error, size, children: label }),
       /* @__PURE__ */ jsxRuntime.jsxs(
         CompactWrapper,
@@ -1154,7 +1253,7 @@ var filterEmailString = (value) => {
   const domain = value.slice(atIdx + 1).replace(/@/g, "").replace(/[^a-zA-Z0-9.-]/g, "");
   return `${local}@${domain}`;
 };
-var EmailInput = React.forwardRef(
+var EmailInput = react.forwardRef(
   ({ onKeyDown, onPaste, ...props }, ref) => {
     const handleKeyDown = (e) => {
       onKeyDown?.(e);
@@ -1211,7 +1310,7 @@ var triggerColors = (theme, error, open) => ({
     borderColor: error ? theme.palette.error.dark : theme.palette.text.secondary
   }
 });
-var Root4 = styles.styled("div")(({ $fullWidth }) => ({
+var Root6 = styles.styled("div")(({ $fullWidth }) => ({
   display: $fullWidth ? "block" : "inline-block",
   width: $fullWidth ? "100%" : "auto",
   position: "relative"
@@ -1296,13 +1395,13 @@ var BaseSelectInput = ({
   id
 }) => {
   const checkSelected = isSelected ?? ((option) => option.value === value);
-  const autoId = React.useId();
+  const autoId = react.useId();
   const inputId = id ?? autoId;
   const listboxId = `${inputId}-listbox`;
-  const [internalOpen, setInternalOpen] = React.useState(false);
+  const [internalOpen, setInternalOpen] = react.useState(false);
   const isOpen = controlledOpen ?? internalOpen;
-  const rootRef = React.useRef(null);
-  const close = React.useCallback(() => {
+  const rootRef = react.useRef(null);
+  const close = react.useCallback(() => {
     setInternalOpen(false);
     onOpenChange?.(false);
   }, [onOpenChange]);
@@ -1316,7 +1415,7 @@ var BaseSelectInput = ({
       onSelect?.(option, close);
     }
   };
-  React.useEffect(() => {
+  react.useEffect(() => {
     if (!isOpen) return;
     const handleMouseDown = (e) => {
       if (rootRef.current && !rootRef.current.contains(e.target)) {
@@ -1328,7 +1427,7 @@ var BaseSelectInput = ({
   }, [isOpen, close]);
   const selectedLabel = options.find((o) => o.value === value)?.label;
   const defaultTriggerContent = /* @__PURE__ */ jsxRuntime.jsx("span", { style: { opacity: selectedLabel ? 1 : 0.5 }, children: selectedLabel ?? placeholder });
-  return /* @__PURE__ */ jsxRuntime.jsxs(Root4, { $fullWidth: fullWidth, ref: rootRef, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Root6, { $fullWidth: fullWidth, ref: rootRef, children: [
     label && /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: inputId, error, size, children: label }),
     /* @__PURE__ */ jsxRuntime.jsxs(
       Trigger,
@@ -1370,7 +1469,7 @@ var BaseSelectInput = ({
   ] });
 };
 BaseSelectInput.displayName = "BaseSelectInput";
-var NumberInput = React.forwardRef(
+var NumberInput = react.forwardRef(
   (props, ref) => /* @__PURE__ */ jsxRuntime.jsx(BaseInput, { ref, type: "number", ...props })
 );
 NumberInput.displayName = "NumberInput";
@@ -1474,9 +1573,9 @@ var ToggleButton = styles.styled("button")(({ theme }) => ({
 }));
 var EyeIcon = () => /* @__PURE__ */ jsxRuntime.jsx(VisibilityIcon__default.default, { "aria-hidden": true, sx: { fontSize: "1em" } });
 var EyeOffIcon = () => /* @__PURE__ */ jsxRuntime.jsx(VisibilityOffIcon__default.default, { "aria-hidden": true, sx: { fontSize: "1em" } });
-var PasswordInput = React.forwardRef(
+var PasswordInput = react.forwardRef(
   ({ disabled, showPasswordLabel = "Poka\u017C has\u0142o", hidePasswordLabel = "Ukryj has\u0142o", ...props }, ref) => {
-    const [show, setShow] = React.useState(false);
+    const [show, setShow] = react.useState(false);
     return /* @__PURE__ */ jsxRuntime.jsx(
       BaseInput,
       {
@@ -1516,10 +1615,10 @@ var ClearButton = styles.styled("button")(({ theme }) => ({
 }));
 var SearchIcon = () => /* @__PURE__ */ jsxRuntime.jsx(SearchMuiIcon__default.default, { "aria-hidden": true, sx: { fontSize: "1em" } });
 var XIcon2 = () => /* @__PURE__ */ jsxRuntime.jsx(CloseIcon__default.default, { "aria-hidden": true, sx: { fontSize: "1em" } });
-var SearchInput = React.forwardRef(
+var SearchInput = react.forwardRef(
   ({ value, onChange, onClear, clearAriaLabel = "Wyczy\u015B\u0107", ...props }, forwardedRef) => {
-    const innerRef = React.useRef(null);
-    const attachRef = React.useCallback(
+    const innerRef = react.useRef(null);
+    const attachRef = react.useCallback(
       (el) => {
         innerRef.current = el;
         if (typeof forwardedRef === "function") forwardedRef(el);
@@ -1529,7 +1628,7 @@ var SearchInput = React.forwardRef(
       [forwardedRef]
     );
     const isControlled = value !== void 0;
-    const [localValue, setLocalValue] = React.useState("");
+    const [localValue, setLocalValue] = react.useState("");
     const hasValue = isControlled ? !!value : !!localValue;
     const handleChange = (e) => {
       if (!isControlled) setLocalValue(e.target.value);
@@ -1608,7 +1707,7 @@ var borderColors = (theme, error) => ({
     boxShadow: `0 0 0 3px ${error ? theme.palette.error.main : theme.palette.primary.main}33`
   }
 });
-var Root5 = styles.styled("div")(({ $fullWidth }) => ({
+var Root7 = styles.styled("div")(({ $fullWidth }) => ({
   display: $fullWidth ? "block" : "inline-block",
   width: $fullWidth ? "100%" : "auto"
 }));
@@ -1635,7 +1734,7 @@ var StyledTextarea = styles.styled("textarea")(({ theme, $size, $fullWidth, $err
     color: theme.palette.text.disabled
   }
 }));
-var TextareaInput = React.forwardRef(
+var TextareaInput = react.forwardRef(
   ({
     label,
     helperText,
@@ -1647,9 +1746,9 @@ var TextareaInput = React.forwardRef(
     id,
     ...rest
   }, ref) => {
-    const autoId = React.useId();
+    const autoId = react.useId();
     const inputId = id ?? autoId;
-    return /* @__PURE__ */ jsxRuntime.jsxs(Root5, { $fullWidth: fullWidth, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root7, { $fullWidth: fullWidth, children: [
       label && /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: inputId, error, size, children: label }),
       /* @__PURE__ */ jsxRuntime.jsx(
         StyledTextarea,
@@ -1671,14 +1770,14 @@ var TextareaInput = React.forwardRef(
   }
 );
 TextareaInput.displayName = "TextareaInput";
-var sizeMap2 = { sm: "1em", md: "1.25em", lg: "1.75em" };
+var sizeMap3 = { sm: "1em", md: "1.25em", lg: "1.75em" };
 var toFlagEmoji = (code) => code.toUpperCase().replace(/[A-Z]/g, (char) => String.fromCodePoint(127462 + char.charCodeAt(0) - 65));
 var CountryFlag = ({ countryCode, size = "md", style, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
   "span",
   {
     role: "img",
     "aria-label": `Flag: ${countryCode}`,
-    style: { fontSize: sizeMap2[size], lineHeight: 1, display: "inline-flex", ...style },
+    style: { fontSize: sizeMap3[size], lineHeight: 1, display: "inline-flex", ...style },
     ...rest,
     children: toFlagEmoji(countryCode)
   }
@@ -3274,7 +3373,7 @@ var wrapperColors = (theme, error, focused) => ({
     borderColor: !focused ? error ? theme.palette.error.dark : theme.palette.text.secondary : void 0
   }
 });
-var Root6 = styles.styled("div")(({ $fullWidth }) => ({
+var Root8 = styles.styled("div")(({ $fullWidth }) => ({
   display: $fullWidth ? "block" : "inline-block",
   width: $fullWidth ? "100%" : "auto"
 }));
@@ -3425,7 +3524,7 @@ var EmptyMessage = styles.styled("p")(({ theme }) => ({
   fontSize: "0.875rem",
   color: theme.palette.text.secondary
 }));
-var PhoneInput = React.forwardRef(
+var PhoneInput = react.forwardRef(
   ({
     value,
     defaultValue = "",
@@ -3447,30 +3546,30 @@ var PhoneInput = React.forwardRef(
     countrySearchAriaLabel = "Szukaj kraju",
     digitsLabel = "cyfr"
   }, ref) => {
-    const autoId = React.useId();
+    const autoId = react.useId();
     const inputId = id ?? autoId;
     const listboxId = `${inputId}-listbox`;
-    const initialCountry = React.useMemo(
+    const initialCountry = react.useMemo(
       () => COUNTRIES.find((c) => c.flagCode === defaultCountry) ?? DEFAULT_COUNTRY,
       [defaultCountry]
     );
-    const [selectedCountry, setSelectedCountry] = React.useState(initialCountry);
-    const [isOpen, setIsOpen] = React.useState(false);
-    const [searchQuery, setSearchQuery] = React.useState("");
-    const [focused, setFocused] = React.useState(false);
+    const [selectedCountry, setSelectedCountry] = react.useState(initialCountry);
+    const [isOpen, setIsOpen] = react.useState(false);
+    const [searchQuery, setSearchQuery] = react.useState("");
+    const [focused, setFocused] = react.useState(false);
     const isControlled = value !== void 0;
-    const [internalValue, setInternalValue] = React.useState(defaultValue);
+    const [internalValue, setInternalValue] = react.useState(defaultValue);
     const phoneValue = isControlled ? value : internalValue;
-    const rootRef = React.useRef(null);
-    const searchRef = React.useRef(null);
-    const filteredCountries = React.useMemo(() => {
+    const rootRef = react.useRef(null);
+    const searchRef = react.useRef(null);
+    const filteredCountries = react.useMemo(() => {
       const q = searchQuery.toLowerCase().trim();
       if (!q) return COUNTRIES;
       return COUNTRIES.filter(
         (c) => c.country.toLowerCase().includes(q) || c.flagCode.toLowerCase().includes(q) || c.dialCode.includes(q)
       );
     }, [searchQuery]);
-    const close = React.useCallback(() => {
+    const close = react.useCallback(() => {
       setIsOpen(false);
       setSearchQuery("");
     }, []);
@@ -3502,7 +3601,7 @@ var PhoneInput = React.forwardRef(
       if (e.ctrlKey || e.metaKey || e.altKey || e.key.length > 1) return;
       if (!/^\d$/.test(e.key)) e.preventDefault();
     };
-    React.useEffect(() => {
+    react.useEffect(() => {
       if (!isOpen) return;
       const handler = (e) => {
         if (rootRef.current && !rootRef.current.contains(e.target)) close();
@@ -3511,7 +3610,7 @@ var PhoneInput = React.forwardRef(
       return () => document.removeEventListener("mousedown", handler);
     }, [isOpen, close]);
     const derivedPlaceholder = placeholder ?? (selectedCountry.minLength === selectedCountry.maxLength ? `${selectedCountry.maxLength} ${digitsLabel}` : `${selectedCountry.minLength}\u2013${selectedCountry.maxLength} ${digitsLabel}`);
-    return /* @__PURE__ */ jsxRuntime.jsxs(Root6, { $fullWidth: fullWidth, ref: rootRef, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root8, { $fullWidth: fullWidth, ref: rootRef, children: [
       label && /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: inputId, error, size, children: label }),
       /* @__PURE__ */ jsxRuntime.jsxs(
         InputWrapper2,
@@ -3606,7 +3705,7 @@ var PhoneInput = React.forwardRef(
   }
 );
 PhoneInput.displayName = "PhoneInput";
-var TextInput = React.forwardRef(
+var TextInput = react.forwardRef(
   ({ type = "text", ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx(BaseInput, { ref, type, ...rest })
 );
 TextInput.displayName = "TextInput";
@@ -3626,7 +3725,7 @@ function getActiveColor(color, theme) {
       return theme.palette.primary.main;
   }
 }
-var Root7 = styles.styled("span")(({ $disabled }) => ({
+var Root9 = styles.styled("span")(({ $disabled }) => ({
   display: "inline-flex",
   flexDirection: "column",
   cursor: $disabled ? "not-allowed" : "pointer"
@@ -3697,7 +3796,7 @@ var LabelText2 = styles.styled("span")(
     fontFamily: theme.typography.fontFamily
   })
 );
-var SwitchInput = React.forwardRef(
+var SwitchInput = react.forwardRef(
   ({
     label,
     helperText,
@@ -3709,9 +3808,9 @@ var SwitchInput = React.forwardRef(
     id,
     ...rest
   }, ref) => {
-    const autoId = React.useId();
+    const autoId = react.useId();
     const inputId = id ?? autoId;
-    return /* @__PURE__ */ jsxRuntime.jsxs(Root7, { $disabled: disabled, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root9, { $disabled: disabled, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Row2, { htmlFor: inputId, $placement: labelPlacement, children: [
         /* @__PURE__ */ jsxRuntime.jsxs(Track, { $size: size, $color: color, $error: error, $disabled: disabled, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -3737,7 +3836,7 @@ SwitchInput.displayName = "SwitchInput";
 var switchColors = ["primary", "secondary", "success", "danger"];
 var TRACK_H2 = { sm: "0.25rem", md: "0.375rem", lg: "0.5rem" };
 var THUMB_S2 = { sm: "0.875rem", md: "1.125rem", lg: "1.375rem" };
-var Root8 = styles.styled("div")({
+var Root10 = styles.styled("div")({
   display: "flex",
   flexDirection: "column",
   gap: "0.5rem",
@@ -3813,7 +3912,7 @@ function pct(value, min, max) {
 function clamp(v, min, max) {
   return Math.min(max, Math.max(min, v));
 }
-var RangeSlider = React.forwardRef(
+var RangeSlider = react.forwardRef(
   ({
     min = 0,
     max = 100,
@@ -3830,9 +3929,9 @@ var RangeSlider = React.forwardRef(
     id,
     ...props
   }, ref) => {
-    const autoId = React.useId();
+    const autoId = react.useId();
     const inputId = id ?? autoId;
-    const getInitial = React.useCallback(() => {
+    const getInitial = react.useCallback(() => {
       if (range) {
         const dv2 = defaultValue ?? controlledValue;
         return dv2 ?? [min, max];
@@ -3840,7 +3939,7 @@ var RangeSlider = React.forwardRef(
       const dv = defaultValue ?? controlledValue;
       return [dv ?? min, max];
     }, [range, defaultValue, controlledValue, min, max]);
-    const [internal, setInternal] = React.useState(getInitial);
+    const [internal, setInternal] = react.useState(getInitial);
     const [lo, hi] = controlledValue !== void 0 ? range ? controlledValue : [controlledValue, max] : internal;
     const emit = (next) => {
       setInternal(next);
@@ -3860,7 +3959,7 @@ var RangeSlider = React.forwardRef(
     const loP = pct(lo, min, max);
     const hiP = pct(hi, min, max);
     const valueLabel = range ? `${formatValue2(lo)} \u2013 ${formatValue2(hi)}` : formatValue2(lo);
-    return /* @__PURE__ */ jsxRuntime.jsxs(Root8, { ref, ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root10, { ref, ...props, children: [
       (label || showValue) && /* @__PURE__ */ jsxRuntime.jsxs(LabelRow, { children: [
         label && /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
         showValue && /* @__PURE__ */ jsxRuntime.jsx("span", { children: valueLabel })
@@ -3990,7 +4089,7 @@ var inputColors2 = (theme, error) => ({
     boxShadow: `0 0 0 3px ${error ? theme.palette.error.main : theme.palette.primary.main}33`
   }
 });
-var Root9 = styles.styled("div")(({ $fullWidth }) => ({
+var Root11 = styles.styled("div")(({ $fullWidth }) => ({
   display: $fullWidth ? "block" : "inline-block",
   width: $fullWidth ? "100%" : "auto",
   position: "relative"
@@ -4234,7 +4333,7 @@ function IconChevronDown() {
 function IconX() {
   return /* @__PURE__ */ jsxRuntime.jsx(CloseIcon__default.default, { "aria-hidden": "true", style: { fontSize: 14 } });
 }
-var DateTimePicker = React.forwardRef(
+var DateTimePicker = react.forwardRef(
   ({
     value,
     defaultValue,
@@ -4251,26 +4350,26 @@ var DateTimePicker = React.forwardRef(
     max,
     id
   }, ref) => {
-    const autoId = React.useId();
+    const autoId = react.useId();
     const inputId = id ?? autoId;
-    const rootRef = React.useRef(null);
+    const rootRef = react.useRef(null);
     const isControlled = value !== void 0;
-    const [internalDate, setInternalDate] = React.useState(defaultValue ?? null);
+    const [internalDate, setInternalDate] = react.useState(defaultValue ?? null);
     const selectedDate = isControlled ? value ?? null : internalDate;
-    const [open, setOpen] = React.useState(false);
+    const [open, setOpen] = react.useState(false);
     const today = /* @__PURE__ */ new Date();
-    const [viewYear, setViewYear] = React.useState(selectedDate?.getFullYear() ?? today.getFullYear());
-    const [viewMonth, setViewMonth] = React.useState(selectedDate?.getMonth() ?? today.getMonth());
-    const [hours, setHours] = React.useState(selectedDate?.getHours() ?? 12);
-    const [minutes, setMinutes] = React.useState(selectedDate?.getMinutes() ?? 0);
-    const [hourInput, setHourInput] = React.useState(
+    const [viewYear, setViewYear] = react.useState(selectedDate?.getFullYear() ?? today.getFullYear());
+    const [viewMonth, setViewMonth] = react.useState(selectedDate?.getMonth() ?? today.getMonth());
+    const [hours, setHours] = react.useState(selectedDate?.getHours() ?? 12);
+    const [minutes, setMinutes] = react.useState(selectedDate?.getMinutes() ?? 0);
+    const [hourInput, setHourInput] = react.useState(
       String(selectedDate?.getHours() ?? 12).padStart(2, "0")
     );
-    const [minInput, setMinInput] = React.useState(
+    const [minInput, setMinInput] = react.useState(
       String(selectedDate?.getMinutes() ?? 0).padStart(2, "0")
     );
-    const [draftDate, setDraftDate] = React.useState(null);
-    const calendarDays = React.useMemo(
+    const [draftDate, setDraftDate] = react.useState(null);
+    const calendarDays = react.useMemo(
       () => buildCalendarDays(viewYear, viewMonth),
       [viewYear, viewMonth]
     );
@@ -4289,7 +4388,7 @@ var DateTimePicker = React.forwardRef(
       }
       setOpen(true);
     };
-    const commit = React.useCallback(
+    const commit = react.useCallback(
       (d) => {
         if (!isControlled) setInternalDate(d);
         onChange?.(d);
@@ -4364,7 +4463,7 @@ var DateTimePicker = React.forwardRef(
       setMinutes(val);
       setMinInput(String(val).padStart(2, "0"));
     };
-    React.useEffect(() => {
+    react.useEffect(() => {
       if (!open) return;
       const handler = (e) => {
         if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(false);
@@ -4372,7 +4471,7 @@ var DateTimePicker = React.forwardRef(
       document.addEventListener("mousedown", handler);
       return () => document.removeEventListener("mousedown", handler);
     }, [open]);
-    React.useEffect(() => {
+    react.useEffect(() => {
       if (!open) return;
       const handler = (e) => {
         if (e.key === "Escape") setOpen(false);
@@ -4385,7 +4484,7 @@ var DateTimePicker = React.forwardRef(
     const showCalendar = mode !== "time";
     const showTime = mode !== "date";
     const needsConfirm = mode !== "date";
-    return /* @__PURE__ */ jsxRuntime.jsxs(Root9, { ref: rootRef, $fullWidth: fullWidth, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root11, { ref: rootRef, $fullWidth: fullWidth, children: [
       label && /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: inputId, error, size, children: label }),
       /* @__PURE__ */ jsxRuntime.jsxs(
         InputWrapper3,
@@ -4701,7 +4800,7 @@ var StyledCard = styles.styled("div", {
   borderRadius: roundedMap[$rounded],
   ...getVariantStyles($variant, theme)
 }));
-var Card = React.forwardRef(
+var Card = react.forwardRef(
   ({ variant = "default", padding = "md", rounded = "lg", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(StyledCard, { ref, $variant: variant, $padding: padding, $rounded: rounded, ...props })
 );
 Card.displayName = "Card";
@@ -4792,7 +4891,7 @@ var StyledBadge = styles.styled("span", {
   fontFamily: theme.typography.fontFamily,
   ...getVariantStyles2($variant, theme)
 }));
-function Badge({ variant = "default", ...props }) {
+function Badge2({ variant = "default", ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(StyledBadge, { $variant: variant, ...props });
 }
 var badgeVariants = [
@@ -4804,7 +4903,41 @@ var badgeVariants = [
   "ghost",
   "promo"
 ];
-var sizeMap3 = {
+function getBgColor(variant) {
+  switch (variant) {
+    case "flash":
+      return "#f59e0b";
+    case "new":
+      return "#3b82f6";
+    case "hot":
+      return "#ef4444";
+    default:
+      return "#16a34a";
+  }
+}
+var Root12 = styles.styled("span", {
+  shouldForwardProp: (prop) => prop !== "$variant"
+})(({ theme, $variant }) => ({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "0.25rem",
+  borderRadius: "0.375rem",
+  padding: "0.25rem 0.625rem",
+  fontSize: "0.75rem",
+  fontWeight: 700,
+  lineHeight: 1,
+  letterSpacing: "0.02em",
+  fontFamily: theme.typography.fontFamily,
+  backgroundColor: getBgColor($variant),
+  color: "#ffffff",
+  textTransform: "uppercase"
+}));
+function SaleBadge({ discount, label, variant = "default", ...props }) {
+  const text = label ?? (discount !== void 0 ? `-${discount}%` : "SALE");
+  return /* @__PURE__ */ jsxRuntime.jsx(Root12, { $variant: variant, ...props, children: text });
+}
+var saleBadgeVariants = ["default", "flash", "new", "hot"];
+var sizeMap4 = {
   sm: { width: "2rem", height: "2rem", fontSize: "0.75rem" },
   md: { width: "2.5rem", height: "2.5rem", fontSize: "0.875rem" },
   lg: { width: "3rem", height: "3rem", fontSize: "1rem" },
@@ -4840,7 +4973,7 @@ var StyledAvatar = styles.styled("div", {
   fontWeight: 600,
   fontFamily: theme.typography.fontFamily,
   userSelect: "none",
-  ...sizeMap3[$size],
+  ...sizeMap4[$size],
   ...getColorStyles($color, theme)
 }));
 function Avatar({ initials, size = "md", color = "primary", ...props }) {
@@ -4890,7 +5023,7 @@ function SectionHeading({
   ] });
 }
 var sectionHeadingAligns = ["center", "left", "right"];
-var shimmer = react.keyframes`
+var shimmer = react$1.keyframes`
   0%   { background-position: -200% 0; }
   100% { background-position:  200% 0; }
 `;
@@ -4948,11 +5081,11 @@ var SIZE_MAP = {
   lg: "2rem",
   xl: "3rem"
 };
-var spin = react.keyframes`to { transform: rotate(360deg); }`;
-var fade = react.keyframes`0%,100%{opacity:.15} 50%{opacity:1}`;
-var scalePulse = react.keyframes`0%,100%{transform:scale(0.6);opacity:.4} 50%{transform:scale(1);opacity:1}`;
-var barAnim = react.keyframes`0%,100%{transform:scaleY(.4);opacity:.5} 50%{transform:scaleY(1);opacity:1}`;
-var Root10 = styles.styled("span", {
+var spin = react$1.keyframes`to { transform: rotate(360deg); }`;
+var fade = react$1.keyframes`0%,100%{opacity:.15} 50%{opacity:1}`;
+var scalePulse = react$1.keyframes`0%,100%{transform:scale(0.6);opacity:.4} 50%{transform:scale(1);opacity:1}`;
+var barAnim = react$1.keyframes`0%,100%{transform:scaleY(.4);opacity:.5} 50%{transform:scaleY(1);opacity:1}`;
+var Root13 = styles.styled("span", {
   shouldForwardProp: (p) => !["$size", "$color"].includes(p)
 })(({ theme, $size, $color }) => {
   const colorMap = {
@@ -5040,8 +5173,8 @@ function Spinner3({
   label = "\u0141adowanie\u2026",
   ...props
 }) {
-  const Inner6 = VARIANTS[variant];
-  return /* @__PURE__ */ jsxRuntime.jsx(Root10, { $size: size, $color: color, role: "status", "aria-label": label, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Inner6, {}) });
+  const Inner7 = VARIANTS[variant];
+  return /* @__PURE__ */ jsxRuntime.jsx(Root13, { $size: size, $color: color, role: "status", "aria-label": label, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Inner7, {}) });
 }
 var spinnerVariants = ["ring", "dots", "pulse", "bars"];
 var spinnerSizes = ["xs", "sm", "md", "lg", "xl"];
@@ -5052,7 +5185,7 @@ var HEIGHT_MAP = {
   md: "0.75rem",
   lg: "1.25rem"
 };
-var stripeAnim = react.keyframes`from{background-position:1rem 0}to{background-position:0 0}`;
+var stripeAnim = react$1.keyframes`from{background-position:1rem 0}to{background-position:0 0}`;
 function getFillColor(variant, theme) {
   switch (variant) {
     case "success":
@@ -5167,7 +5300,7 @@ var FONT_MAP = {
   lg: "1.125rem",
   xl: "1.5rem"
 };
-var Root11 = styles.styled("div")({ position: "relative", display: "inline-flex", flexShrink: 0 });
+var Root14 = styles.styled("div")({ position: "relative", display: "inline-flex", flexShrink: 0 });
 var Label2 = styles.styled("div", {
   shouldForwardProp: (p) => p !== "$size"
 })(({ theme, $size }) => ({
@@ -5210,7 +5343,7 @@ function ProgressCircle({
   children,
   ...props
 }) {
-  const gradientId = React.useId().replace(/:/g, "");
+  const gradientId = react.useId().replace(/:/g, "");
   const px = PX_MAP[size];
   const stroke = thickness ?? Math.max(3, px * 0.09);
   const r = (px - stroke) / 2;
@@ -5221,7 +5354,7 @@ function ProgressCircle({
   const { color, gradient } = useStrokeColor(variant, gradientId);
   const trackColor = theme.palette.mode === "dark" ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.08)";
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    Root11,
+    Root14,
     {
       role: "progressbar",
       "aria-valuenow": value,
@@ -5343,7 +5476,7 @@ var StyledBox = styles.styled("div")(
     return css;
   }
 );
-var Box2 = React.forwardRef(
+var Box2 = react.forwardRef(
   ({ direction = "row", wrap = "nowrap", gap = 0, cols, rows, children, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     StyledBox,
     {
@@ -5380,7 +5513,7 @@ var StyledContainer = styles.styled("div")(({ theme, $maxWidth }) => ({
     paddingRight: "2rem"
   }
 }));
-var Container = React.forwardRef(
+var Container = react.forwardRef(
   ({ maxWidth = "xl", children, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx(StyledContainer, { ref, $maxWidth: maxWidth, ...rest, children })
 );
 Container.displayName = "Container";
@@ -5392,8 +5525,11 @@ var StyledSection = styles.styled("section")(({ theme }) => ({
     paddingBottom: "3rem"
   }
 }));
-var Section = React.forwardRef(({ children, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx(StyledSection, { ref, ...rest, children }));
+var Section = react.forwardRef(({ children, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx(StyledSection, { ref, ...rest, children }));
 Section.displayName = "Section";
+var StyledMain = styles.styled("main")({});
+var Main = react.forwardRef(({ children, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx(StyledMain, { ref, ...rest, children }));
+Main.displayName = "Main";
 var getTypographyStyles = (theme) => ({
   fontFamily: theme.typography.fontFamily,
   "& h1": { fontSize: "2.25rem", fontWeight: 500, letterSpacing: "-0.025em" },
@@ -5549,16 +5685,11 @@ var getHeaderSpacingStyles = () => ({
 var spacingStyles = {
   "& > * + *": { marginTop: "1.5rem" }
 };
-var StyledMain = styles.styled("main")(({ theme }) => ({
-  ...getTypographyStyles(theme)
-}));
-var Main = React.forwardRef(({ children, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx(StyledMain, { ref, ...rest, children }));
-Main.displayName = "Main";
 var StyledProse = styles.styled("div")(({ theme }) => ({
   ...getTypographyStyles(theme),
   ...spacingStyles
 }));
-var Prose = React.forwardRef(({ children, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx(StyledProse, { ref, ...rest, children }));
+var Prose = react.forwardRef(({ children, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx(StyledProse, { ref, ...rest, children }));
 Prose.displayName = "Prose";
 var StyledArticle = styles.styled("article")(({ theme }) => ({
   maxWidth: "56rem",
@@ -5568,14 +5699,112 @@ var StyledArticle = styles.styled("article")(({ theme }) => ({
   ...getHeaderSpacingStyles(),
   ...spacingStyles
 }));
-var Article = React.forwardRef(({ children, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx(StyledArticle, { ref, ...rest, children }));
+var Article = react.forwardRef(({ children, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx(StyledArticle, { ref, ...rest, children }));
 Article.displayName = "Article";
-var sizeMap4 = {
+var PRESET_MAP = {
+  "1/1": 1,
+  "4/3": 4 / 3,
+  "3/2": 3 / 2,
+  "16/9": 16 / 9,
+  "21/9": 21 / 9,
+  "9/16": 9 / 16,
+  "3/4": 3 / 4,
+  "2/3": 2 / 3
+};
+var Root15 = styles.styled("div")({
+  position: "relative",
+  width: "100%",
+  "& > *": {
+    position: "absolute",
+    inset: 0,
+    width: "100%",
+    height: "100%",
+    objectFit: "cover"
+  }
+});
+var AspectRatio = react.forwardRef(
+  ({ ratio = "16/9", children, style, ...props }, ref) => {
+    const numericRatio = typeof ratio === "string" ? PRESET_MAP[ratio] ?? 16 / 9 : ratio;
+    const paddingBottom = `${1 / numericRatio * 100}%`;
+    return /* @__PURE__ */ jsxRuntime.jsx(Root15, { ref, style: { paddingBottom, ...style }, ...props, children });
+  }
+);
+AspectRatio.displayName = "AspectRatio";
+var aspectRatioPresets = Object.keys(PRESET_MAP);
+var Root16 = styles.styled(Card)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  overflow: "hidden",
+  cursor: "pointer",
+  transition: "box-shadow 150ms ease, transform 150ms ease",
+  "&:hover": {
+    boxShadow: theme.shadows[4],
+    transform: "translateY(-2px)"
+  }
+}));
+var ImageWrap = styles.styled("div")({
+  margin: "-1.5rem -1.5rem 1rem"
+});
+var Image = styles.styled("img")({
+  objectFit: "cover",
+  width: "100%",
+  height: "100%"
+});
+var ImagePlaceholder = styles.styled("div")(({ theme }) => ({
+  width: "100%",
+  height: "100%",
+  backgroundColor: theme.palette.action.hover,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: theme.palette.text.disabled
+}));
+var Content = styles.styled("div")({
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.25rem"
+});
+var Name = styles.styled("h3")(({ theme }) => ({
+  margin: 0,
+  color: theme.palette.text.primary,
+  fontFamily: theme.typography.fontFamily,
+  fontSize: "1rem",
+  fontWeight: 700,
+  lineHeight: 1.4
+}));
+var Count = styles.styled("span")(({ theme }) => ({
+  color: theme.palette.text.secondary,
+  fontFamily: theme.typography.fontFamily,
+  fontSize: "0.875rem"
+}));
+var CardLink = styles.styled("a")({
+  display: "block",
+  textDecoration: "none",
+  color: "inherit",
+  outline: "none"
+});
+var CategoryCard = react.forwardRef(
+  ({ name, imageUrl, imageAlt, count, href, ...props }, ref) => {
+    const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ImageWrap, { children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: "4/3", children: imageUrl ? /* @__PURE__ */ jsxRuntime.jsx(Image, { src: imageUrl, alt: imageAlt ?? name }) : /* @__PURE__ */ jsxRuntime.jsx(ImagePlaceholder, { "aria-label": imageAlt ?? name, children: /* @__PURE__ */ jsxRuntime.jsx(ImageIcon__default.default, { style: { fontSize: 48 } }) }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Content, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Name, { children: name }),
+        count !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs(Count, { children: [
+          count,
+          " produkt\xF3w"
+        ] })
+      ] })
+    ] });
+    return /* @__PURE__ */ jsxRuntime.jsx(Root16, { ref, variant: "default", padding: "md", rounded: "lg", ...props, children: href ? /* @__PURE__ */ jsxRuntime.jsx(CardLink, { href, children: content }) : content });
+  }
+);
+CategoryCard.displayName = "CategoryCard";
+var sizeMap5 = {
   sm: "1rem",
   md: "1.25rem",
   lg: "1.5rem"
 };
-var Root12 = styles.styled("div")(({ theme }) => ({
+var Root17 = styles.styled("div")(({ theme }) => ({
   display: "inline-flex",
   alignItems: "center",
   gap: "0.5rem",
@@ -5595,7 +5824,7 @@ var StarButton = styles.styled("button")(
     padding: 0,
     color: $active ? "#f59e0b" : theme.palette.action.disabled,
     cursor: "pointer",
-    fontSize: sizeMap4[$size],
+    fontSize: sizeMap5[$size],
     lineHeight: 1,
     "&:disabled": {
       cursor: "default"
@@ -5606,11 +5835,11 @@ var Meta = styles.styled("span")(({ theme }) => ({
   fontSize: "0.875rem",
   color: theme.palette.text.secondary
 }));
-var Rating = React.forwardRef(
+var Rating = react.forwardRef(
   ({ value, max = 5, readonly = true, size = "md", label, count, onChange, ...props }, ref) => {
     const roundedValue = Math.round(value);
     const meta = label ?? (count !== void 0 ? `(${count})` : void 0);
-    return /* @__PURE__ */ jsxRuntime.jsxs(Root12, { ref, "aria-label": `Ocena ${value} z ${max}`, ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root17, { ref, "aria-label": `Ocena ${value} z ${max}`, ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         Stars,
         {
@@ -5641,36 +5870,6 @@ var Rating = React.forwardRef(
   }
 );
 Rating.displayName = "Rating";
-var PRESET_MAP = {
-  "1/1": 1,
-  "4/3": 4 / 3,
-  "3/2": 3 / 2,
-  "16/9": 16 / 9,
-  "21/9": 21 / 9,
-  "9/16": 9 / 16,
-  "3/4": 3 / 4,
-  "2/3": 2 / 3
-};
-var Root13 = styles.styled("div")({
-  position: "relative",
-  width: "100%",
-  "& > *": {
-    position: "absolute",
-    inset: 0,
-    width: "100%",
-    height: "100%",
-    objectFit: "cover"
-  }
-});
-var AspectRatio = React.forwardRef(
-  ({ ratio = "16/9", children, style, ...props }, ref) => {
-    const numericRatio = typeof ratio === "string" ? PRESET_MAP[ratio] ?? 16 / 9 : ratio;
-    const paddingBottom = `${1 / numericRatio * 100}%`;
-    return /* @__PURE__ */ jsxRuntime.jsx(Root13, { ref, style: { paddingBottom, ...style }, ...props, children });
-  }
-);
-AspectRatio.displayName = "AspectRatio";
-var aspectRatioPresets = Object.keys(PRESET_MAP);
 var DEFAULT_OMNIBUS_LABEL = "Najni\u017Csza cena z ostatnich 30 dni";
 var FONT_SIZE = {
   sm: "0.875rem",
@@ -5678,7 +5877,7 @@ var FONT_SIZE = {
   lg: "1.5rem",
   xl: "2rem"
 };
-var Root14 = styles.styled("div")({
+var Root18 = styles.styled("div")({
   display: "inline-flex",
   flexDirection: "column",
   gap: "0.25rem"
@@ -5744,7 +5943,7 @@ function formatPrice(amount, currency, locale) {
 function calcDiscount(price, original) {
   return Math.round((1 - price / original) * 100);
 }
-var Price = React.forwardRef(
+var Price = react.forwardRef(
   ({
     price,
     originalPrice,
@@ -5759,7 +5958,7 @@ var Price = React.forwardRef(
     const onSale = originalPrice !== void 0 && originalPrice > price;
     const discount = onSale ? calcDiscount(price, originalPrice) : 0;
     const showOmnibus = lowestPrice !== void 0;
-    return /* @__PURE__ */ jsxRuntime.jsxs(Root14, { ref, ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root18, { ref, ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(PriceRow, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           Current,
@@ -5803,26 +6002,35 @@ var Price = React.forwardRef(
 );
 Price.displayName = "Price";
 var priceSizes = ["sm", "md", "lg", "xl"];
-var Root15 = styles.styled(Card)({
+var Root19 = styles.styled(Card)({
   display: "flex",
   flexDirection: "column",
   height: "100%",
   overflow: "hidden"
 });
-var ImageWrap = styles.styled("div")({
+var ImageWrap2 = styles.styled("div")({
   position: "relative",
   margin: "-1.5rem -1.5rem 1rem"
 });
-var Image = styles.styled("img")(({ theme }) => ({
+var Image2 = styles.styled("img")(({ theme }) => ({
   objectFit: "cover",
   backgroundColor: theme.palette.action.hover
 }));
+var ImagePlaceholder2 = styles.styled("div")(({ theme }) => ({
+  width: "100%",
+  height: "100%",
+  backgroundColor: theme.palette.action.hover,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: theme.palette.text.disabled
+}));
 var BadgeSlot = styles.styled("div")({
   position: "absolute",
   left: "0.75rem",
   top: "0.75rem"
 });
-var Name = styles.styled("h3")(({ theme }) => ({
+var Name2 = styles.styled("h3")(({ theme }) => ({
   margin: 0,
   color: theme.palette.text.primary,
   fontFamily: theme.typography.fontFamily,
@@ -5836,7 +6044,7 @@ var Footer = styles.styled("div")({
   marginTop: "auto",
   paddingTop: "1rem"
 });
-var ProductCard = React.forwardRef(
+var ProductCard = react.forwardRef(
   ({
     name,
     imageUrl,
@@ -5853,12 +6061,12 @@ var ProductCard = React.forwardRef(
     ctaLabel = "Dodaj do koszyka",
     onAddToCart,
     ...props
-  }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root15, { ref, variant: "default", padding: "md", rounded: "lg", ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ImageWrap, { children: /* @__PURE__ */ jsxRuntime.jsxs(AspectRatio, { ratio: "4/3", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Image, { src: imageUrl, alt: imageAlt ?? name }),
-      badge && /* @__PURE__ */ jsxRuntime.jsx(BadgeSlot, { children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: badgeVariant, children: badge }) })
+  }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root19, { ref, variant: "default", padding: "md", rounded: "lg", ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ImageWrap2, { children: /* @__PURE__ */ jsxRuntime.jsxs(AspectRatio, { ratio: "4/3", children: [
+      imageUrl ? /* @__PURE__ */ jsxRuntime.jsx(Image2, { src: imageUrl, alt: imageAlt ?? name }) : /* @__PURE__ */ jsxRuntime.jsx(ImagePlaceholder2, { "aria-label": imageAlt ?? name, children: /* @__PURE__ */ jsxRuntime.jsx(ImageIcon__default.default, { style: { fontSize: 48 } }) }),
+      badge && /* @__PURE__ */ jsxRuntime.jsx(BadgeSlot, { children: /* @__PURE__ */ jsxRuntime.jsx(Badge2, { variant: badgeVariant, children: badge }) })
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(Name, { children: name }),
+    /* @__PURE__ */ jsxRuntime.jsx(Name2, { children: name }),
     rating !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(Rating, { value: rating, count: reviewCount, size: "sm" }),
     /* @__PURE__ */ jsxRuntime.jsx(
       Price,
@@ -5871,53 +6079,179 @@ var ProductCard = React.forwardRef(
         style: { marginTop: "0.5rem" }
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(Footer, { children: /* @__PURE__ */ jsxRuntime.jsx(Button, { fullWidth: true, onClick: onAddToCart, children: ctaLabel }) })
+    /* @__PURE__ */ jsxRuntime.jsx(Footer, { children: /* @__PURE__ */ jsxRuntime.jsx(Button, { fullWidth: true, onClick: (e) => {
+      e.stopPropagation();
+      onAddToCart?.();
+    }, children: ctaLabel }) })
   ] })
 );
 ProductCard.displayName = "ProductCard";
-var ImageWrapper = styles.styled("div", {
-  shouldForwardProp: (prop) => prop !== "$ar"
-})(({ $ar }) => ({
-  position: "relative",
+var COLLAPSE_AT = "480px";
+var ContainerRoot = styles.styled("div")({
+  containerType: "inline-size",
   width: "100%",
-  aspectRatio: $ar,
-  overflow: "hidden",
-  flexShrink: 0
-}));
-var Img = styles.styled("img")({
+  height: "100%"
+});
+var Inner = styles.styled("div")({
+  display: "flex",
+  flexDirection: "row",
+  height: "100%",
+  [`@container (max-width: ${COLLAPSE_AT})`]: {
+    flexDirection: "column"
+  }
+});
+var ImageWrap3 = styles.styled("div")({
+  position: "relative",
+  flexShrink: 0,
+  width: "clamp(120px, 33%, 200px)",
+  alignSelf: "stretch",
+  margin: "-1.5rem 1rem -1.5rem -1.5rem",
+  [`@container (max-width: ${COLLAPSE_AT})`]: {
+    width: "auto",
+    alignSelf: "auto",
+    margin: "-1.5rem -1.5rem 1rem",
+    aspectRatio: "4 / 3"
+  }
+});
+var Image3 = styles.styled("img")(({ theme }) => ({
+  position: "absolute",
+  inset: 0,
   width: "100%",
   height: "100%",
   objectFit: "cover",
-  display: "block"
-});
-var Placeholder2 = styles.styled("div")(({ theme }) => ({
+  backgroundColor: theme.palette.action.hover
+}));
+var ImagePlaceholder3 = styles.styled("div")(({ theme }) => ({
+  position: "absolute",
+  inset: 0,
   width: "100%",
   height: "100%",
+  backgroundColor: theme.palette.action.hover,
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
-  backgroundColor: theme.palette.action.hover
+  color: theme.palette.text.disabled
 }));
-var Overlay = styles.styled("div")({
+var BadgeSlot2 = styles.styled("div")({
   position: "absolute",
-  inset: 0,
-  background: "linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, transparent 50%)",
-  pointerEvents: "none"
+  left: "0.75rem",
+  top: "0.75rem",
+  zIndex: 1
 });
-var FileTextIcon = () => /* @__PURE__ */ jsxRuntime.jsx(ArticleIcon__default.default, { "aria-hidden": "true", style: { fontSize: 32, opacity: 0.3 } });
-function toAspectRatioCss(ratio) {
-  if (typeof ratio === "number") return String(ratio);
-  return ratio.replace("/", " / ");
-}
-var PostCardImage = ({
-  src,
-  alt = "",
-  aspectRatio = "4/3",
-  overlay = false,
-  className,
+var Content2 = styles.styled("div")({
+  display: "flex",
+  flexDirection: "column",
+  flex: 1,
+  minWidth: 0
+});
+var Name3 = styles.styled("h3")(({ theme }) => ({
+  margin: 0,
+  color: theme.palette.text.primary,
+  fontFamily: theme.typography.fontFamily,
+  fontSize: "1rem",
+  fontWeight: 700,
+  lineHeight: 1.4
+}));
+var Footer2 = styles.styled("div")({
+  display: "grid",
+  gap: "1rem",
+  marginTop: "auto",
+  paddingTop: "1rem"
+});
+var ProductCardHorizontal = react.forwardRef(
+  ({
+    name,
+    imageUrl,
+    imageAlt,
+    price,
+    originalPrice,
+    currency,
+    locale,
+    lowestPrice,
+    badge,
+    badgeVariant = "success",
+    rating,
+    reviewCount,
+    ctaLabel = "Dodaj do koszyka",
+    onAddToCart,
+    ...props
+  }, ref) => /* @__PURE__ */ jsxRuntime.jsx(Card, { ref, variant: "default", padding: "md", rounded: "lg", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(ContainerRoot, { children: /* @__PURE__ */ jsxRuntime.jsxs(Inner, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(ImageWrap3, { children: [
+      imageUrl ? /* @__PURE__ */ jsxRuntime.jsx(Image3, { src: imageUrl, alt: imageAlt ?? name }) : /* @__PURE__ */ jsxRuntime.jsx(ImagePlaceholder3, { "aria-label": imageAlt ?? name, children: /* @__PURE__ */ jsxRuntime.jsx(ImageIcon__default.default, { style: { fontSize: 48 } }) }),
+      badge && /* @__PURE__ */ jsxRuntime.jsx(BadgeSlot2, { children: /* @__PURE__ */ jsxRuntime.jsx(Badge2, { variant: badgeVariant, children: badge }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Content2, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Name3, { children: name }),
+      rating !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(Rating, { value: rating, count: reviewCount, size: "sm" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Price,
+        {
+          price,
+          originalPrice,
+          currency,
+          locale,
+          lowestPrice,
+          style: { marginTop: "0.5rem" }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(Footer2, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          fullWidth: true,
+          onClick: (e) => {
+            e.stopPropagation();
+            onAddToCart?.();
+          },
+          children: ctaLabel
+        }
+      ) })
+    ] })
+  ] }) }) })
+);
+ProductCardHorizontal.displayName = "ProductCardHorizontal";
+var ImageWrapper = styles.styled("div", {
+  shouldForwardProp: (prop) => prop !== "$ar"
+})(({ $ar }) => ({
+  position: "relative",
+  width: "100%",
+  aspectRatio: $ar,
+  overflow: "hidden",
+  flexShrink: 0
+}));
+var Img = styles.styled("img")({
+  width: "100%",
+  height: "100%",
+  objectFit: "cover",
+  display: "block"
+});
+var Placeholder2 = styles.styled("div")(({ theme }) => ({
+  width: "100%",
+  height: "100%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  backgroundColor: theme.palette.action.hover
+}));
+var Overlay = styles.styled("div")({
+  position: "absolute",
+  inset: 0,
+  background: "linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, transparent 50%)",
+  pointerEvents: "none"
+});
+var FileTextIcon = () => /* @__PURE__ */ jsxRuntime.jsx(ArticleIcon__default.default, { "aria-hidden": "true", style: { fontSize: 32, opacity: 0.3 } });
+function toAspectRatioCss(ratio) {
+  if (typeof ratio === "number") return String(ratio);
+  return ratio.replace("/", " / ");
+}
+var PostCardImage = ({
+  src,
+  alt = "",
+  aspectRatio = "4/3",
+  overlay = false,
+  className,
   style
 }) => {
-  const [imgError, setImgError] = React.useState(false);
+  const [imgError, setImgError] = react.useState(false);
   const showPlaceholder = !src || imgError;
   return /* @__PURE__ */ jsxRuntime.jsxs(ImageWrapper, { $ar: toAspectRatioCss(aspectRatio), className, style, children: [
     showPlaceholder ? /* @__PURE__ */ jsxRuntime.jsx(Placeholder2, { children: /* @__PURE__ */ jsxRuntime.jsx(FileTextIcon, {}) }) : /* @__PURE__ */ jsxRuntime.jsx(Img, { src, alt, onError: () => setImgError(true) }),
@@ -5995,7 +6329,7 @@ var StyledInner = styles.styled("div", {
   height: "100%",
   ...getLayoutStyles($variant)
 }));
-var CardLink = styles.styled("a")(({ theme }) => ({
+var CardLink2 = styles.styled("a")(({ theme }) => ({
   display: "block",
   textDecoration: "none",
   color: "inherit",
@@ -6080,7 +6414,7 @@ var FeaturedImageWrapper = styles.styled("div")({
     aspectRatio: "auto"
   }
 });
-var PostCard = React.forwardRef(
+var PostCard = react.forwardRef(
   ({
     title,
     excerpt,
@@ -6101,13 +6435,13 @@ var PostCard = React.forwardRef(
       isFeatured && showImage && /* @__PURE__ */ jsxRuntime.jsx(FeaturedImageWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(PostCardImage, { src: imageUrl, alt: imageAlt, aspectRatio: "16/9", overlay: true }) }),
       !isFeatured && showImage && (isHorizontal ? /* @__PURE__ */ jsxRuntime.jsx(HorizontalImageWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(PostCardImage, { src: imageUrl, alt: imageAlt, aspectRatio: "4/3" }) }) : /* @__PURE__ */ jsxRuntime.jsx(PostCardImage, { src: imageUrl, alt: imageAlt, aspectRatio: "16/9" })),
       /* @__PURE__ */ jsxRuntime.jsxs(StyledContent, { $variant: variant, children: [
-        category && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: isFeatured ? "ghost" : "default", children: category }) }),
+        category && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Badge2, { variant: isFeatured ? "ghost" : "default", children: category }) }),
         /* @__PURE__ */ jsxRuntime.jsx(StyledTitle, { className: "post-card-title", $featured: isFeatured, children: title }),
         excerpt && variant !== "compact" && !isFeatured && /* @__PURE__ */ jsxRuntime.jsx(StyledExcerpt, { children: excerpt }),
         (date || author) && /* @__PURE__ */ jsxRuntime.jsx(PostCardMeta, { date, author, inverted: isFeatured })
       ] })
     ] });
-    return /* @__PURE__ */ jsxRuntime.jsx(Card, { ref, variant: cardVariant, padding: "none", rounded: "lg", ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(StyledRoot, { children: href ? /* @__PURE__ */ jsxRuntime.jsx(CardLink, { href, "aria-label": title, children: inner }) : inner }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(Card, { ref, variant: cardVariant, padding: "none", rounded: "lg", ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(StyledRoot, { children: href ? /* @__PURE__ */ jsxRuntime.jsx(CardLink2, { href, "aria-label": title, children: inner }) : inner }) });
   }
 );
 PostCard.displayName = "PostCard";
@@ -6119,7 +6453,7 @@ var postCardVariants = [
   "featured",
   "compact"
 ];
-var Root16 = styles.styled(Card)({
+var Root20 = styles.styled(Card)({
   display: "flex",
   flexDirection: "column",
   height: "100%"
@@ -6130,7 +6464,7 @@ var NameRow = styles.styled("div")({
   justifyContent: "space-between",
   marginBottom: "0.75rem"
 });
-var Name2 = styles.styled("p")(({ theme }) => ({
+var Name4 = styles.styled("p")(({ theme }) => ({
   margin: 0,
   fontFamily: theme.typography.fontFamily,
   fontWeight: 600,
@@ -6231,7 +6565,7 @@ function CheckIcon3() {
 function XIcon3() {
   return /* @__PURE__ */ jsxRuntime.jsx(HighlightOffIcon__default.default, { "aria-hidden": "true", style: { fontSize: 16, flexShrink: 0 } });
 }
-var PricingCard = React.forwardRef(
+var PricingCard = react.forwardRef(
   ({
     name,
     price,
@@ -6250,10 +6584,10 @@ var PricingCard = React.forwardRef(
   }, ref) => {
     const resolvedCardVariant = cardVariant ?? (popular ? "gradient-primary" : "default");
     const resolvedCtaVariant = ctaVariant ?? (popular ? "primary" : "ghost");
-    return /* @__PURE__ */ jsxRuntime.jsxs(Root16, { ref, variant: resolvedCardVariant, padding: "lg", rounded: "lg", ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root20, { ref, variant: resolvedCardVariant, padding: "lg", rounded: "lg", ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(NameRow, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Name2, { children: name }),
-        popular && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "default", children: popularLabel })
+        /* @__PURE__ */ jsxRuntime.jsx(Name4, { children: name }),
+        popular && /* @__PURE__ */ jsxRuntime.jsx(Badge2, { variant: "default", children: popularLabel })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(PriceRow2, { children: [
         currency && /* @__PURE__ */ jsxRuntime.jsx(Currency, { children: currency }),
@@ -6276,7 +6610,7 @@ var PricingCard = React.forwardRef(
   }
 );
 PricingCard.displayName = "PricingCard";
-var Root17 = styles.styled(Card, {
+var Root21 = styles.styled(Card, {
   shouldForwardProp: (prop) => prop !== "$align"
 })(({ $align }) => ({
   textAlign: $align,
@@ -6305,15 +6639,15 @@ var Description3 = styles.styled("p")(({ theme }) => ({
   color: theme.palette.text.secondary,
   lineHeight: 1.5
 }));
-var StatCard = React.forwardRef(
-  ({ stat, cardVariant = "default", align = "center", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root17, { ref, variant: cardVariant, padding: "lg", rounded: "lg", $align: align, ...props, children: [
+var StatCard = react.forwardRef(
+  ({ stat, cardVariant = "default", align = "center", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root21, { ref, variant: cardVariant, padding: "lg", rounded: "lg", $align: align, ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx(Value, { children: stat.value }),
     /* @__PURE__ */ jsxRuntime.jsx(Label3, { children: stat.label }),
     stat.description && /* @__PURE__ */ jsxRuntime.jsx(Description3, { children: stat.description })
   ] })
 );
 StatCard.displayName = "StatCard";
-var Root18 = styles.styled(Card)({
+var Root22 = styles.styled(Card)({
   display: "flex",
   flexDirection: "column",
   gap: "1.25rem",
@@ -6339,7 +6673,7 @@ var Quote = styles.styled("blockquote")(({ theme }) => ({
     marginLeft: "0.125rem"
   }
 }));
-var Footer2 = styles.styled("div")({
+var Footer3 = styles.styled("div")({
   display: "flex",
   alignItems: "center",
   gap: "0.75rem"
@@ -6367,13 +6701,13 @@ var AuthorRole = styles.styled("p")(({ theme }) => ({
   fontSize: "0.8125rem",
   color: theme.palette.text.secondary
 }));
-var TestimonialCard = React.forwardRef(
+var TestimonialCard = react.forwardRef(
   ({ testimonial, cardVariant = "default", ...props }, ref) => {
     const initials = testimonial.authorInitials ?? testimonial.authorName.split(" ").filter(Boolean).slice(0, 2).map((p) => p[0]).join("").toUpperCase();
-    return /* @__PURE__ */ jsxRuntime.jsxs(Root18, { ref, variant: cardVariant, padding: "lg", rounded: "lg", ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root22, { ref, variant: cardVariant, padding: "lg", rounded: "lg", ...props, children: [
       testimonial.rating && /* @__PURE__ */ jsxRuntime.jsx(Rating, { value: testimonial.rating, readonly: true, size: "sm" }),
       /* @__PURE__ */ jsxRuntime.jsx(Quote, { children: testimonial.quote }),
-      /* @__PURE__ */ jsxRuntime.jsxs(Footer2, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Footer3, { children: [
         testimonial.authorAvatarUrl ? /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: testimonial.authorAvatarUrl, alt: testimonial.authorName }) : /* @__PURE__ */ jsxRuntime.jsx(Avatar, { initials, size: "md", color: "primary" }),
         /* @__PURE__ */ jsxRuntime.jsxs(AuthorInfo, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(AuthorName, { children: testimonial.authorName }),
@@ -6384,7 +6718,7 @@ var TestimonialCard = React.forwardRef(
   }
 );
 TestimonialCard.displayName = "TestimonialCard";
-var Root19 = styles.styled(Card)(({ theme }) => ({
+var Root23 = styles.styled(Card)(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   gap: "1rem",
@@ -6403,10 +6737,10 @@ var AvatarImage2 = styles.styled("img")({
   borderRadius: "50%",
   objectFit: "cover"
 });
-var Content = styles.styled("div")({
+var Content3 = styles.styled("div")({
   minWidth: 0
 });
-var Name3 = styles.styled("h3")(({ theme }) => ({
+var Name5 = styles.styled("h3")(({ theme }) => ({
   margin: 0,
   color: theme.palette.text.primary,
   fontFamily: theme.typography.fontFamily,
@@ -6427,11 +6761,11 @@ function getInitials(member) {
   }
   return member.name.split(" ").filter(Boolean).slice(0, 2).map((part) => part[0]).join("").toUpperCase();
 }
-var TeamMemberCard = React.forwardRef(
-  ({ member, cardVariant = "default", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root19, { ref, variant: cardVariant, padding: "lg", rounded: "lg", ...props, children: [
+var TeamMemberCard = react.forwardRef(
+  ({ member, cardVariant = "default", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root23, { ref, variant: cardVariant, padding: "lg", rounded: "lg", ...props, children: [
     member.avatarUrl ? /* @__PURE__ */ jsxRuntime.jsx(AvatarImage2, { src: member.avatarUrl, alt: member.avatarAlt ?? member.name }) : /* @__PURE__ */ jsxRuntime.jsx(Avatar, { initials: getInitials(member), size: "xl", color: member.avatarColor ?? "primary" }),
-    /* @__PURE__ */ jsxRuntime.jsxs(Content, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Name3, { children: member.name }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Content3, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Name5, { children: member.name }),
       /* @__PURE__ */ jsxRuntime.jsx(Role, { children: member.role })
     ] })
   ] })
@@ -6609,8 +6943,143 @@ function CompareTool({
     }) })
   ] }) });
 }
+function calcTimeLeft(target) {
+  const diff = new Date(target).getTime() - Date.now();
+  if (diff <= 0) return null;
+  return {
+    days: Math.floor(diff / 864e5),
+    hours: Math.floor(diff % 864e5 / 36e5),
+    minutes: Math.floor(diff % 36e5 / 6e4),
+    seconds: Math.floor(diff % 6e4 / 1e3)
+  };
+}
+function pad(n) {
+  return String(n).padStart(2, "0");
+}
+var Root24 = styles.styled("div", {
+  shouldForwardProp: (prop) => prop !== "$variant"
+})(({ theme, $variant }) => ({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  flexWrap: "wrap",
+  gap: "0.5rem",
+  fontFamily: theme.typography.fontFamily,
+  ...$variant === "card" && {
+    backgroundColor: theme.palette.background.paper,
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: theme.shape.borderRadius,
+    padding: "1rem 1.5rem"
+  },
+  ...$variant === "banner" && {
+    backgroundColor: theme.palette.error.main,
+    color: "#fff",
+    borderRadius: theme.shape.borderRadius,
+    padding: "0.75rem 1.25rem"
+  }
+}));
+var TimerLabel = styles.styled("span", {
+  shouldForwardProp: (prop) => prop !== "$variant"
+})(({ theme, $variant }) => ({
+  fontSize: "0.875rem",
+  fontWeight: 600,
+  color: $variant === "banner" ? "rgba(255,255,255,0.85)" : theme.palette.text.secondary,
+  marginRight: "0.25rem"
+}));
+var Segments = styles.styled("div")({
+  display: "flex",
+  alignItems: "center",
+  gap: "0.25rem"
+});
+var Segment = styles.styled("div", {
+  shouldForwardProp: (prop) => prop !== "$variant"
+})(({ theme, $variant }) => ({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  minWidth: "2.5rem",
+  ...$variant === "card" && {
+    backgroundColor: theme.palette.action.hover,
+    borderRadius: "0.375rem",
+    padding: "0.375rem 0.5rem"
+  }
+}));
+var Value2 = styles.styled("span", {
+  shouldForwardProp: (prop) => prop !== "$variant"
+})(({ $variant }) => ({
+  fontSize: $variant === "inline" ? "1rem" : "1.5rem",
+  fontWeight: 700,
+  lineHeight: 1,
+  color: $variant === "banner" ? "#fff" : "inherit"
+}));
+var Unit = styles.styled("span", {
+  shouldForwardProp: (prop) => prop !== "$variant"
+})(({ theme, $variant }) => ({
+  fontSize: "0.6875rem",
+  color: $variant === "banner" ? "rgba(255,255,255,0.7)" : theme.palette.text.secondary,
+  marginTop: "0.125rem"
+}));
+var Colon = styles.styled("span", {
+  shouldForwardProp: (prop) => prop !== "$variant"
+})(({ theme, $variant }) => ({
+  fontSize: $variant === "inline" ? "1rem" : "1.5rem",
+  fontWeight: 700,
+  color: $variant === "banner" ? "rgba(255,255,255,0.6)" : theme.palette.text.disabled,
+  alignSelf: $variant === "card" ? "flex-start" : "center",
+  marginTop: $variant === "card" ? "0.375rem" : 0
+}));
+var UNITS = ["dni", "godz", "min", "sek"];
+var CountdownTimer = react.forwardRef(
+  ({
+    targetDate,
+    variant = "inline",
+    label,
+    expiredLabel = "Promocja zako\u0144czona",
+    onExpire,
+    ...props
+  }, ref) => {
+    const [timeLeft, setTimeLeft] = react.useState(() => calcTimeLeft(targetDate));
+    react.useEffect(() => {
+      const id = setInterval(() => {
+        const tl = calcTimeLeft(targetDate);
+        setTimeLeft(tl);
+        if (!tl) {
+          clearInterval(id);
+          onExpire?.();
+        }
+      }, 1e3);
+      return () => clearInterval(id);
+    }, [targetDate, onExpire]);
+    if (!timeLeft) {
+      return /* @__PURE__ */ jsxRuntime.jsx(Root24, { ref, $variant: variant, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(TimerLabel, { $variant: variant, children: expiredLabel }) });
+    }
+    const parts = [timeLeft.days, timeLeft.hours, timeLeft.minutes, timeLeft.seconds];
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      Root24,
+      {
+        ref,
+        $variant: variant,
+        "aria-live": "polite",
+        "aria-label": `Czas do ko\u0144ca promocji`,
+        ...props,
+        children: [
+          label && /* @__PURE__ */ jsxRuntime.jsx(TimerLabel, { $variant: variant, children: label }),
+          /* @__PURE__ */ jsxRuntime.jsx(Segments, { children: parts.map((val, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "contents" }, children: [
+            i > 0 && /* @__PURE__ */ jsxRuntime.jsx(Colon, { $variant: variant, children: ":" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(Segment, { $variant: variant, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Value2, { $variant: variant, children: pad(val) }),
+              variant !== "inline" && /* @__PURE__ */ jsxRuntime.jsx(Unit, { $variant: variant, children: UNITS[i] })
+            ] })
+          ] }, UNITS[i])) })
+        ]
+      }
+    );
+  }
+);
+CountdownTimer.displayName = "CountdownTimer";
+var countdownTimerVariants = ["inline", "card", "banner"];
 var spin2 = styles.keyframes`to { transform: rotate(360deg); }`;
-var Root20 = styles.styled("div")({
+var Root25 = styles.styled("div")({
   display: "flex",
   flexDirection: "column",
   gap: "0.5rem"
@@ -6746,7 +7215,7 @@ function CouponInput({
   successMessage,
   className
 }) {
-  const id = React.useId();
+  const id = react.useId();
   const errorId = `${id}-error`;
   const successId = `${id}-success`;
   const isDisabled = disabled || loading;
@@ -6757,7 +7226,7 @@ function CouponInput({
     if (e.key === "Enter") handleApply();
   };
   if (appliedCode) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(Root20, { className, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root25, { className, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(AppliedRow, { role: "status", "aria-label": `Kod rabatowy ${appliedCode} zastosowany`, children: [
         /* @__PURE__ */ jsxRuntime.jsx(AppliedCode, { children: appliedCode }),
         onRemove && /* @__PURE__ */ jsxRuntime.jsx(
@@ -6776,7 +7245,7 @@ function CouponInput({
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(Root20, { className, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Root25, { className, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(InputRow, { $hasError: Boolean(error), $applied: false, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         Input,
@@ -6808,7 +7277,82 @@ function CouponInput({
     error && /* @__PURE__ */ jsxRuntime.jsx(Message, { $type: "error", id: errorId, role: "alert", children: error })
   ] });
 }
-var Root21 = styles.styled("div")({
+var Root26 = styles.styled("div")({
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.5rem"
+});
+var GroupLabel = styles.styled("span")(({ theme }) => ({
+  fontSize: "0.875rem",
+  fontWeight: 600,
+  color: theme.palette.text.primary,
+  fontFamily: theme.typography.fontFamily
+}));
+var MethodLabel = styles.styled("label", {
+  shouldForwardProp: (prop) => prop !== "$selected"
+})(({ theme, $selected }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: "0.875rem",
+  padding: "0.875rem 1rem",
+  border: `${$selected ? 2 : 1}px solid ${$selected ? theme.palette.primary.main : theme.palette.divider}`,
+  borderRadius: theme.shape.borderRadius,
+  cursor: "pointer",
+  backgroundColor: $selected ? `${theme.palette.primary.main}08` : theme.palette.background.paper,
+  transition: "border-color 150ms ease, background-color 150ms ease",
+  fontFamily: theme.typography.fontFamily,
+  "&:hover": { borderColor: theme.palette.primary.main }
+}));
+var Radio = styles.styled("input")({
+  width: "1rem",
+  height: "1rem",
+  flexShrink: 0,
+  cursor: "pointer"
+});
+var IconWrap = styles.styled("span")(({ theme }) => ({
+  color: theme.palette.text.secondary,
+  display: "flex"
+}));
+var Info = styles.styled("div")({ flex: 1 });
+var Name6 = styles.styled("div")(({ theme }) => ({
+  fontSize: "0.9375rem",
+  fontWeight: 600,
+  color: theme.palette.text.primary
+}));
+var Desc = styles.styled("div")(({ theme }) => ({
+  fontSize: "0.8125rem",
+  color: theme.palette.text.secondary,
+  marginTop: "0.125rem"
+}));
+var PaymentMethodSelector = react.forwardRef(
+  ({ methods, value, onChange, label = "Metoda p\u0142atno\u015Bci", disabled, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root26, { ref, ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(GroupLabel, { children: label }),
+    methods.map((method) => {
+      const selected = value === method.id;
+      return /* @__PURE__ */ jsxRuntime.jsxs(MethodLabel, { $selected: selected, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Radio,
+          {
+            type: "radio",
+            name: "payment",
+            value: method.id,
+            checked: selected,
+            disabled,
+            onChange: () => onChange?.(method.id),
+            "aria-label": method.label
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(IconWrap, { children: method.icon ?? /* @__PURE__ */ jsxRuntime.jsx(CreditCardOutlinedIcon__default.default, { "aria-hidden": true }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Info, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Name6, { children: method.label }),
+          method.description && /* @__PURE__ */ jsxRuntime.jsx(Desc, { children: method.description })
+        ] })
+      ] }, method.id);
+    })
+  ] })
+);
+PaymentMethodSelector.displayName = "PaymentMethodSelector";
+var Root27 = styles.styled("div")({
   display: "grid",
   gap: "0.75rem"
 });
@@ -6834,9 +7378,9 @@ var ThumbnailButton = styles.styled("button")(({ theme, $active }) => ({
 var ThumbnailImage = styles.styled("img")({
   objectFit: "cover"
 });
-var ProductGallery = React.forwardRef(
+var ProductGallery = react.forwardRef(
   ({ images, selectedIndex, onSelect, ...props }, ref) => {
-    const [internalIndex, setInternalIndex] = React.useState(0);
+    const [internalIndex, setInternalIndex] = react.useState(0);
     const activeIndex = selectedIndex ?? internalIndex;
     const activeImage = images[activeIndex] ?? images[0];
     const handleSelect = (index) => {
@@ -6846,7 +7390,7 @@ var ProductGallery = React.forwardRef(
     if (!activeImage) {
       return null;
     }
-    return /* @__PURE__ */ jsxRuntime.jsxs(Root21, { ref, ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root27, { ref, ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: "4/3", children: /* @__PURE__ */ jsxRuntime.jsx(MainImage, { src: activeImage.src, alt: activeImage.alt }) }),
       images.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(Thumbnails, { children: images.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(
         ThumbnailButton,
@@ -6864,7 +7408,7 @@ var ProductGallery = React.forwardRef(
   }
 );
 ProductGallery.displayName = "ProductGallery";
-var Root22 = styles.styled("div")(({ theme, $variant }) => ({
+var Root28 = styles.styled("div")(({ theme, $variant }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
@@ -6883,15 +7427,15 @@ var Link = styles.styled("a")(({ theme }) => ({
   textDecoration: "underline",
   textUnderlineOffset: "0.2em"
 }));
-var PromoStrip = React.forwardRef(
-  ({ message, actionLabel, href, variant = "info", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root22, { ref, $variant: variant, ...props, children: [
+var PromoStrip = react.forwardRef(
+  ({ message, actionLabel, href, variant = "info", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root28, { ref, $variant: variant, ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { children: message }),
     actionLabel && href && /* @__PURE__ */ jsxRuntime.jsx(Link, { href, children: actionLabel })
   ] })
 );
 PromoStrip.displayName = "PromoStrip";
 var promoStripVariants = ["info", "success", "warning"];
-var Root23 = styles.styled("div")(({ theme }) => ({
+var Root29 = styles.styled("div")(({ theme }) => ({
   display: "inline-grid",
   gridTemplateColumns: "2.25rem 3rem 2.25rem",
   alignItems: "center",
@@ -6913,7 +7457,7 @@ var Control = styles.styled("button")(({ theme }) => ({
     cursor: "not-allowed"
   }
 }));
-var Value2 = styles.styled("span")(({ theme }) => ({
+var Value3 = styles.styled("span")(({ theme }) => ({
   display: "inline-flex",
   alignItems: "center",
   justifyContent: "center",
@@ -6923,11 +7467,11 @@ var Value2 = styles.styled("span")(({ theme }) => ({
   borderRight: `1px solid ${theme.palette.divider}`,
   fontWeight: 600
 }));
-var QuantitySelector = React.forwardRef(
+var QuantitySelector = react.forwardRef(
   ({ value, min = 1, max = 99, step = 1, disabled = false, onChange, ...props }, ref) => {
     const decrease = Math.max(min, value - step);
     const increase = Math.min(max, value + step);
-    return /* @__PURE__ */ jsxRuntime.jsxs(Root23, { ref, "aria-label": "Wybierz ilo\u015B\u0107", ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root29, { ref, "aria-label": "Wybierz ilo\u015B\u0107", ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         Control,
         {
@@ -6938,7 +7482,7 @@ var QuantitySelector = React.forwardRef(
           children: "\u2212"
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(Value2, { "aria-live": "polite", children: value }),
+      /* @__PURE__ */ jsxRuntime.jsx(Value3, { "aria-live": "polite", children: value }),
       /* @__PURE__ */ jsxRuntime.jsx(
         Control,
         {
@@ -6953,6 +7497,207 @@ var QuantitySelector = React.forwardRef(
   }
 );
 QuantitySelector.displayName = "QuantitySelector";
+var Root30 = styles.styled("div")({
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.5rem"
+});
+var GroupLabel2 = styles.styled("span")(({ theme }) => ({
+  fontSize: "0.875rem",
+  fontWeight: 600,
+  color: theme.palette.text.primary,
+  fontFamily: theme.typography.fontFamily
+}));
+var OptionLabel = styles.styled("label", {
+  shouldForwardProp: (prop) => prop !== "$selected"
+})(({ theme, $selected }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: "0.875rem",
+  padding: "0.875rem 1rem",
+  border: `${$selected ? 2 : 1}px solid ${$selected ? theme.palette.primary.main : theme.palette.divider}`,
+  borderRadius: theme.shape.borderRadius,
+  cursor: "pointer",
+  backgroundColor: $selected ? `${theme.palette.primary.main}08` : theme.palette.background.paper,
+  transition: "border-color 150ms ease, background-color 150ms ease",
+  fontFamily: theme.typography.fontFamily,
+  "&:hover": {
+    borderColor: theme.palette.primary.main
+  }
+}));
+var Radio2 = styles.styled("input")({
+  width: "1rem",
+  height: "1rem",
+  flexShrink: 0,
+  cursor: "pointer"
+});
+var IconWrap2 = styles.styled("span")(({ theme }) => ({
+  color: theme.palette.text.secondary,
+  display: "flex"
+}));
+var Info2 = styles.styled("div")({ flex: 1 });
+var Name7 = styles.styled("div")(({ theme }) => ({
+  fontSize: "0.9375rem",
+  fontWeight: 600,
+  color: theme.palette.text.primary
+}));
+var Desc2 = styles.styled("div")(({ theme }) => ({
+  fontSize: "0.8125rem",
+  color: theme.palette.text.secondary,
+  marginTop: "0.125rem"
+}));
+var Price3 = styles.styled("div", {
+  shouldForwardProp: (prop) => prop !== "$selected"
+})(({ theme, $selected }) => ({
+  fontSize: "0.9375rem",
+  fontWeight: 700,
+  color: $selected ? theme.palette.primary.main : theme.palette.text.primary,
+  whiteSpace: "nowrap"
+}));
+var ShippingSelector = react.forwardRef(
+  ({ options, value, onChange, label = "Metoda dostawy", disabled, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root30, { ref, ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(GroupLabel2, { children: label }),
+    options.map((opt) => {
+      const selected = value === opt.id;
+      return /* @__PURE__ */ jsxRuntime.jsxs(OptionLabel, { $selected: selected, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Radio2,
+          {
+            type: "radio",
+            name: "shipping",
+            value: opt.id,
+            checked: selected,
+            disabled,
+            onChange: () => onChange?.(opt.id),
+            "aria-label": opt.label
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(IconWrap2, { children: opt.icon ?? /* @__PURE__ */ jsxRuntime.jsx(LocalShippingOutlinedIcon__default.default, { "aria-hidden": true }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Info2, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Name7, { children: opt.label }),
+          (opt.description || opt.estimatedDays) && /* @__PURE__ */ jsxRuntime.jsxs(Desc2, { children: [
+            opt.description,
+            opt.estimatedDays && ` \xB7 ${opt.estimatedDays}`
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(Price3, { $selected: selected, children: opt.price })
+      ] }, opt.id);
+    })
+  ] })
+);
+ShippingSelector.displayName = "ShippingSelector";
+var DEFAULT_SORT_OPTIONS = [
+  { value: "popular", label: "Najpopularniejsze" },
+  { value: "newest", label: "Najnowsze" },
+  { value: "price-asc", label: "Cena rosn\u0105co" },
+  { value: "price-desc", label: "Cena malej\u0105co" }
+];
+var Root31 = styles.styled("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  flexWrap: "wrap",
+  gap: "0.75rem",
+  padding: "0.75rem 0",
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  fontFamily: theme.typography.fontFamily
+}));
+var TotalLabel = styles.styled("span")(({ theme }) => ({
+  fontSize: "0.875rem",
+  color: theme.palette.text.secondary
+}));
+var Controls = styles.styled("div")({
+  display: "flex",
+  alignItems: "center",
+  gap: "0.75rem"
+});
+var SortLabel = styles.styled("label")(({ theme }) => ({
+  fontSize: "0.875rem",
+  color: theme.palette.text.secondary
+}));
+var Select = styles.styled("select")(({ theme }) => ({
+  padding: "0.375rem 2rem 0.375rem 0.625rem",
+  border: `1px solid ${theme.palette.divider}`,
+  borderRadius: theme.shape.borderRadius,
+  backgroundColor: theme.palette.background.paper,
+  color: theme.palette.text.primary,
+  fontFamily: theme.typography.fontFamily,
+  fontSize: "0.875rem",
+  cursor: "pointer",
+  appearance: "none",
+  backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E")`,
+  backgroundRepeat: "no-repeat",
+  backgroundPosition: "right 0.5rem center",
+  "&:focus": { outline: `3px solid ${theme.palette.primary.main}`, outlineOffset: "2px" }
+}));
+var ViewToggle = styles.styled("div")(({ theme }) => ({
+  display: "flex",
+  border: `1px solid ${theme.palette.divider}`,
+  borderRadius: theme.shape.borderRadius,
+  overflow: "hidden"
+}));
+var ViewButton = styles.styled("button", {
+  shouldForwardProp: (prop) => prop !== "$active"
+})(({ theme, $active }) => ({
+  appearance: "none",
+  border: "none",
+  cursor: "pointer",
+  display: "flex",
+  alignItems: "center",
+  padding: "0.375rem 0.5rem",
+  backgroundColor: $active ? theme.palette.primary.main : "transparent",
+  color: $active ? theme.palette.primary.contrastText : theme.palette.text.secondary,
+  transition: "background-color 150ms ease, color 150ms ease",
+  "&:hover:not(:disabled)": {
+    backgroundColor: $active ? theme.palette.primary.dark : theme.palette.action.hover
+  },
+  "&:focus-visible": { outline: `3px solid ${theme.palette.primary.main}`, outlineOffset: "-1px" }
+}));
+var SortBar = react.forwardRef(
+  ({
+    total,
+    totalLabel,
+    sortOptions = DEFAULT_SORT_OPTIONS,
+    sortValue,
+    onSortChange,
+    viewMode = "grid",
+    onViewModeChange,
+    showViewToggle = true,
+    ...props
+  }, ref) => {
+    const resolvedLabel = totalLabel ?? (total !== void 0 ? `Znaleziono ${total} produkt\xF3w` : void 0);
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root31, { ref, ...props, children: [
+      resolvedLabel && /* @__PURE__ */ jsxRuntime.jsx(TotalLabel, { children: resolvedLabel }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Controls, { children: [
+        sortOptions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SortLabel, { htmlFor: "sort-select", children: "Sortuj:" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Select,
+            {
+              id: "sort-select",
+              value: sortValue ?? "",
+              onChange: (e) => onSortChange?.(e.target.value),
+              children: sortOptions.map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt.value, children: opt.label }, opt.value))
+            }
+          )
+        ] }),
+        showViewToggle && /* @__PURE__ */ jsxRuntime.jsx(ViewToggle, { "aria-label": "Tryb widoku", children: ["grid", "list"].map((mode) => /* @__PURE__ */ jsxRuntime.jsx(
+          ViewButton,
+          {
+            type: "button",
+            $active: viewMode === mode,
+            "aria-label": mode === "grid" ? "Widok siatki" : "Widok listy",
+            "aria-pressed": viewMode === mode,
+            onClick: () => onViewModeChange?.(mode),
+            children: mode === "grid" ? /* @__PURE__ */ jsxRuntime.jsx(GridViewIcon__default.default, { "aria-hidden": true, style: { fontSize: 16 } }) : /* @__PURE__ */ jsxRuntime.jsx(ViewListIcon__default.default, { "aria-hidden": true, style: { fontSize: 16 } })
+          },
+          mode
+        )) })
+      ] })
+    ] });
+  }
+);
+SortBar.displayName = "SortBar";
 var COLOR_MAP = {
   "in-stock": "success",
   "low-stock": "warning",
@@ -6974,7 +7719,7 @@ function getDefaultLabel(status, count) {
       return "Dost\u0119pny na zam\xF3wienie";
   }
 }
-var Root24 = styles.styled("div", {
+var Root32 = styles.styled("div", {
   shouldForwardProp: (p) => p !== "$color" && p !== "$size"
 })(({ theme, $color, $size }) => {
   const colorMap = {
@@ -7011,25 +7756,128 @@ var Dot2 = styles.styled("span", {
     flexShrink: 0
   };
 });
-var StockStatus = React.forwardRef(
+var StockStatus = react.forwardRef(
   ({ status, count, label, showIcon = true, size = "md", ...props }, ref) => {
     const color = COLOR_MAP[status];
     const text = label ?? getDefaultLabel(status, count);
-    return /* @__PURE__ */ jsxRuntime.jsxs(Root24, { ref, $color: color, $size: size, role: "status", "aria-label": text, ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root32, { ref, $color: color, $size: size, role: "status", "aria-label": text, ...props, children: [
       showIcon && /* @__PURE__ */ jsxRuntime.jsx(Dot2, { $color: color, "aria-hidden": "true" }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { children: text })
     ] });
   }
 );
-StockStatus.displayName = "StockStatus";
-var stockStatusValues = [
-  "in-stock",
-  "low-stock",
-  "out-of-stock",
-  "preorder",
-  "backorder"
-];
-var Root25 = styles.styled("div")(({ theme }) => ({
+StockStatus.displayName = "StockStatus";
+var stockStatusValues = [
+  "in-stock",
+  "low-stock",
+  "out-of-stock",
+  "preorder",
+  "backorder"
+];
+var Root33 = styles.styled("div")({
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.5rem"
+});
+var Label4 = styles.styled("span")(({ theme }) => ({
+  fontSize: "0.875rem",
+  fontWeight: 600,
+  color: theme.palette.text.primary,
+  fontFamily: theme.typography.fontFamily
+}));
+var OptionsRow = styles.styled("div")({
+  display: "flex",
+  flexWrap: "wrap",
+  gap: "0.5rem"
+});
+var OptionButton = styles.styled("button", {
+  shouldForwardProp: (prop) => prop !== "$active" && prop !== "$mode"
+})(({ theme, $active, $mode }) => ({
+  appearance: "none",
+  cursor: "pointer",
+  fontFamily: theme.typography.fontFamily,
+  fontSize: "0.875rem",
+  fontWeight: 500,
+  transition: "border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease",
+  "&:disabled": {
+    opacity: 0.4,
+    cursor: "not-allowed",
+    textDecoration: $mode === "button" ? "line-through" : "none"
+  },
+  "&:focus-visible": {
+    outline: `3px solid ${theme.palette.primary.main}`,
+    outlineOffset: "2px"
+  },
+  ...$mode === "swatch" ? {
+    width: "2rem",
+    height: "2rem",
+    borderRadius: "50%",
+    border: $active ? `3px solid ${theme.palette.primary.main}` : `2px solid ${theme.palette.divider}`,
+    boxShadow: $active ? `0 0 0 2px ${theme.palette.background.paper}, 0 0 0 4px ${theme.palette.primary.main}` : "none",
+    padding: 0,
+    background: "currentColor"
+  } : {
+    padding: "0.375rem 0.875rem",
+    border: $active ? `2px solid ${theme.palette.primary.main}` : `1px solid ${theme.palette.divider}`,
+    borderRadius: theme.shape.borderRadius,
+    backgroundColor: $active ? `${theme.palette.primary.main}14` : "transparent",
+    color: $active ? theme.palette.primary.main : theme.palette.text.primary
+  }
+}));
+var Select2 = styles.styled("select")(({ theme }) => ({
+  padding: "0.5rem 2rem 0.5rem 0.75rem",
+  border: `1px solid ${theme.palette.divider}`,
+  borderRadius: theme.shape.borderRadius,
+  backgroundColor: theme.palette.background.paper,
+  color: theme.palette.text.primary,
+  fontFamily: theme.typography.fontFamily,
+  fontSize: "0.875rem",
+  cursor: "pointer",
+  appearance: "none",
+  backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E")`,
+  backgroundRepeat: "no-repeat",
+  backgroundPosition: "right 0.75rem center",
+  "&:focus": {
+    outline: `3px solid ${theme.palette.primary.main}`,
+    outlineOffset: "2px"
+  }
+}));
+var VariantSelector = react.forwardRef(
+  ({ label, options, value, onChange, mode = "button", disabled, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root33, { ref, ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Label4, { children: [
+      label,
+      value && mode !== "swatch" && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 400, marginLeft: "0.375rem" }, children: options.find((o) => o.value === value)?.label })
+    ] }),
+    mode === "dropdown" ? /* @__PURE__ */ jsxRuntime.jsx(
+      Select2,
+      {
+        value: value ?? "",
+        onChange: (e) => onChange?.(e.target.value),
+        disabled,
+        "aria-label": label,
+        children: options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(OptionsRow, { role: "radiogroup", "aria-label": label, children: options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(
+      OptionButton,
+      {
+        type: "button",
+        $active: value === opt.value,
+        $mode: mode,
+        disabled: opt.disabled || disabled,
+        style: mode === "swatch" ? { color: opt.color ?? "#ccc" } : void 0,
+        title: opt.label,
+        "aria-label": opt.label,
+        "aria-pressed": value === opt.value,
+        onClick: () => onChange?.(opt.value),
+        children: mode === "button" && opt.label
+      },
+      opt.value
+    )) })
+  ] })
+);
+VariantSelector.displayName = "VariantSelector";
+var variantSelectorModes = ["button", "swatch", "dropdown"];
+var Root34 = styles.styled("div")(({ theme }) => ({
   borderBottom: `1px solid ${theme.palette.divider}`
 }));
 var Trigger2 = styles.styled("button")(({ theme }) => ({
@@ -7074,10 +7922,10 @@ var PanelInner = styles.styled("p")(({ theme }) => ({
   fontSize: "0.9375rem",
   lineHeight: 1.7
 }));
-var FaqItem = React.forwardRef(
+var FaqItem = react.forwardRef(
   ({ item, defaultOpen = false, ...props }, ref) => {
-    const [open, setOpen] = React.useState(defaultOpen);
-    return /* @__PURE__ */ jsxRuntime.jsxs(Root25, { ref, ...props, children: [
+    const [open, setOpen] = react.useState(defaultOpen);
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root34, { ref, ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Trigger2, { type: "button", "aria-expanded": open, onClick: () => setOpen((prev) => !prev), children: [
         item.question,
         /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon2, { $open: open, "aria-hidden": "true" })
@@ -7132,7 +7980,7 @@ var Description4 = styles.styled("p")(({ theme }) => ({
   color: theme.palette.text.secondary,
   lineHeight: 1.6
 }));
-var FeatureItem2 = React.forwardRef(
+var FeatureItem2 = react.forwardRef(
   ({ feature, cardVariant = "default", layout = "card", ...props }, ref) => {
     if (layout === "icon-left") {
       return /* @__PURE__ */ jsxRuntime.jsxs(IconLeftRoot, { ref, ...props, children: [
@@ -7153,7 +8001,7 @@ var FeatureItem2 = React.forwardRef(
   }
 );
 FeatureItem2.displayName = "FeatureItem";
-var Root26 = styles.styled("div")({
+var Root35 = styles.styled("div")({
   display: "flex",
   flexDirection: "column",
   alignItems: "center",
@@ -7200,8 +8048,8 @@ var Description5 = styles.styled("p")(({ theme }) => ({
   lineHeight: 1.6,
   maxWidth: "18rem"
 }));
-var ProcessStep = React.forwardRef(
-  ({ step, title, description, icon, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root26, { ref, ...props, children: [
+var ProcessStep = react.forwardRef(
+  ({ step, title, description, icon, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root35, { ref, ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx(StepBadge, { "aria-hidden": "true", children: icon ? /* @__PURE__ */ jsxRuntime.jsx(IconWrapper2, { children: icon }) : /* @__PURE__ */ jsxRuntime.jsx(StepNumber, { children: step }) }),
     /* @__PURE__ */ jsxRuntime.jsx(Title3, { children: title }),
     description && /* @__PURE__ */ jsxRuntime.jsx(Description5, { children: description })
@@ -7284,7 +8132,7 @@ function renderLogo(logo, monochrome, logoHeight) {
     }
   );
 }
-var LogoTile = React.forwardRef(
+var LogoTile = react.forwardRef(
   ({ logo, variant = "plain", monochrome = true, logoHeight = 40, ...props }, ref) => {
     const content = renderLogo(logo, monochrome, logoHeight);
     if (logo.href) {
@@ -7387,7 +8235,7 @@ var Dot3 = styles.styled("span", {
     }
   }
 }));
-var Content2 = styles.styled("div")({ flex: 1, minWidth: 0, paddingTop: "0.0625rem" });
+var Content4 = styles.styled("div")({ flex: 1, minWidth: 0, paddingTop: "0.0625rem" });
 var TitleRow = styles.styled("div")({
   display: "flex",
   alignItems: "baseline",
@@ -7432,7 +8280,7 @@ function TimelineItemComponent({
   const hasIcon = Boolean(item.icon);
   return /* @__PURE__ */ jsxRuntime.jsxs(ItemRow, { $compact: compact, $last: last, children: [
     /* @__PURE__ */ jsxRuntime.jsx(DotCol, { $last: last, children: /* @__PURE__ */ jsxRuntime.jsx(Dot3, { $status: status, $hasIcon: hasIcon, children: item.icon ?? /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { status }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(Content2, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Content4, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(TitleRow, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(Title4, { $compact: compact, children: item.title }),
         item.date && /* @__PURE__ */ jsxRuntime.jsx(Date2, { dateTime: item.date, children: item.date })
@@ -7441,7 +8289,7 @@ function TimelineItemComponent({
     ] })
   ] });
 }
-var Timeline = React.forwardRef(
+var Timeline = react.forwardRef(
   ({ items, variant = "default", align: _align = "left", ...props }, ref) => {
     const compact = variant === "compact";
     return /* @__PURE__ */ jsxRuntime.jsx(List, { ref, "aria-label": "O\u015B czasu", ...props, children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -7463,7 +8311,7 @@ var timelineItemStatuses = [
   "pending",
   "error"
 ];
-var Root27 = styles.styled("div")({
+var Root36 = styles.styled("div")({
   position: "relative",
   width: "100%",
   overflow: "hidden",
@@ -7547,23 +8395,23 @@ function Carousel({
   loop = true,
   className
 }) {
-  const [index, setIndex] = React.useState(0);
-  const timerRef = React.useRef(null);
+  const [index, setIndex] = react.useState(0);
+  const timerRef = react.useRef(null);
   const count = slides.length;
-  const prev = React.useCallback(() => {
+  const prev = react.useCallback(() => {
     setIndex((i) => loop ? (i - 1 + count) % count : Math.max(0, i - 1));
   }, [count, loop]);
-  const next = React.useCallback(() => {
+  const next = react.useCallback(() => {
     setIndex((i) => loop ? (i + 1) % count : Math.min(count - 1, i + 1));
   }, [count, loop]);
-  React.useEffect(() => {
+  react.useEffect(() => {
     if (!autoPlay) return;
     timerRef.current = setInterval(next, autoPlayInterval);
     return () => {
       if (timerRef.current) clearInterval(timerRef.current);
     };
   }, [autoPlay, autoPlayInterval, next]);
-  React.useEffect(() => {
+  react.useEffect(() => {
     const handleKey = (e) => {
       if (e.key === "ArrowLeft") prev();
       if (e.key === "ArrowRight") next();
@@ -7573,7 +8421,7 @@ function Carousel({
   }, [prev, next]);
   if (!count) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Root27, { "aria-roledescription": "carousel", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Root36, { "aria-roledescription": "carousel", children: [
       /* @__PURE__ */ jsxRuntime.jsx(Track4, { $index: index, "aria-live": "polite", children: slides.map((slide, i) => /* @__PURE__ */ jsxRuntime.jsx(
         Slide,
         {
@@ -7684,8 +8532,8 @@ function VideoPlayer({
     }
   ) }) });
 }
-var fadeIn = react.keyframes`from { opacity: 0; } to { opacity: 1; }`;
-var zoomIn = react.keyframes`from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); }`;
+var fadeIn = react$1.keyframes`from { opacity: 0; } to { opacity: 1; }`;
+var zoomIn = react$1.keyframes`from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); }`;
 var Grid = styles.styled("div", {
   shouldForwardProp: (prop) => !["$columns", "$gap"].includes(prop)
 })(({ $columns, $gap }) => ({
@@ -7828,19 +8676,19 @@ var Counter = styles.styled("span")({
   pointerEvents: "none"
 });
 function Lightbox({ images, columns = 3, gap = 8, className }) {
-  const [activeIndex, setActiveIndex] = React.useState(null);
+  const [activeIndex, setActiveIndex] = react.useState(null);
   const isOpen = activeIndex !== null;
   const count = images.length;
-  const close = React.useCallback(() => setActiveIndex(null), []);
-  const prev = React.useCallback(
+  const close = react.useCallback(() => setActiveIndex(null), []);
+  const prev = react.useCallback(
     () => setActiveIndex((i) => i === null ? null : (i - 1 + count) % count),
     [count]
   );
-  const next = React.useCallback(
+  const next = react.useCallback(
     () => setActiveIndex((i) => i === null ? null : (i + 1) % count),
     [count]
   );
-  React.useEffect(() => {
+  react.useEffect(() => {
     if (!isOpen) return;
     const handler = (e) => {
       if (e.key === "Escape") close();
@@ -7944,7 +8792,7 @@ var Current2 = styles.styled("span")(({ theme }) => ({
 var Separator2 = styles.styled("span")(({ theme }) => ({
   color: theme.palette.text.disabled
 }));
-var Breadcrumbs = React.forwardRef(
+var Breadcrumbs = react.forwardRef(
   ({ items, separator = "/", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(Nav, { ref, "aria-label": "\u015Acie\u017Cka nawigacji", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(List2, { children: items.map((item, index) => {
     const isLast = index === items.length - 1;
     return /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
@@ -7957,7 +8805,7 @@ var Breadcrumbs = React.forwardRef(
   }) }) })
 );
 Breadcrumbs.displayName = "Breadcrumbs";
-var sizeMap5 = {
+var sizeMap6 = {
   sm: { minWidth: "1.75rem", height: "1.75rem", fontSize: "0.75rem" },
   md: { minWidth: "2rem", height: "2rem", fontSize: "0.875rem" },
   lg: { minWidth: "2.5rem", height: "2.5rem", fontSize: "1rem" }
@@ -7986,7 +8834,7 @@ var StyledButton2 = styles.styled("button")(({ theme, $isActive, $size }) => ({
   lineHeight: 1,
   padding: "0 0.25rem",
   transition: "background-color 150ms ease",
-  ...sizeMap5[$size],
+  ...sizeMap6[$size],
   ...$isActive ? activeStyles(theme) : idleStyles(theme),
   "&:focus-visible": {
     outline: `3px solid ${theme.palette.primary.main}`,
@@ -7998,7 +8846,7 @@ var StyledButton2 = styles.styled("button")(({ theme, $isActive, $size }) => ({
     pointerEvents: "none"
   }
 }));
-var PaginationButton = React.forwardRef(
+var PaginationButton = react.forwardRef(
   ({ onClick, isActive = false, disabled = false, size = "md", children, "aria-label": ariaLabel }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     StyledButton2,
     {
@@ -8015,7 +8863,7 @@ var PaginationButton = React.forwardRef(
   )
 );
 PaginationButton.displayName = "PaginationButton";
-var sizeMap6 = {
+var sizeMap7 = {
   sm: { minWidth: "1.75rem", height: "1.75rem", fontSize: "0.75rem" },
   md: { minWidth: "2rem", height: "2rem", fontSize: "0.875rem" },
   lg: { minWidth: "2.5rem", height: "2.5rem", fontSize: "1rem" }
@@ -8026,7 +8874,7 @@ var StyledEllipsis = styles.styled("span")(({ theme, $size }) => ({
   justifyContent: "center",
   color: theme.palette.text.secondary,
   userSelect: "none",
-  ...sizeMap6[$size]
+  ...sizeMap7[$size]
 }));
 var PaginationEllipsis = ({ size = "md" }) => /* @__PURE__ */ jsxRuntime.jsx(StyledEllipsis, { $size: size, "aria-hidden": "true", children: "\u2026" });
 PaginationEllipsis.displayName = "PaginationEllipsis";
@@ -8136,7 +8984,7 @@ var PaginationBar = ({
   ] });
 };
 PaginationBar.displayName = "PaginationBar";
-var Root28 = styles.styled("div", {
+var Root37 = styles.styled("div", {
   shouldForwardProp: (p) => p !== "$variant"
 })(({ theme, $variant }) => ({
   width: "100%",
@@ -8222,7 +9070,7 @@ var PanelContent = styles.styled("div")(({ theme }) => ({
   fontSize: "0.9375rem",
   lineHeight: 1.7
 }));
-var Accordion = React.forwardRef(
+var Accordion = react.forwardRef(
   ({
     items,
     defaultOpenKeys = [],
@@ -8232,7 +9080,7 @@ var Accordion = React.forwardRef(
     variant = "default",
     ...props
   }, ref) => {
-    const [internalKeys, setInternalKeys] = React.useState(defaultOpenKeys);
+    const [internalKeys, setInternalKeys] = react.useState(defaultOpenKeys);
     const openKeys = controlledKeys ?? internalKeys;
     const toggle = (key, disabled) => {
       if (disabled) return;
@@ -8246,7 +9094,7 @@ var Accordion = React.forwardRef(
       if (controlledKeys === void 0) setInternalKeys(next);
       onChange?.(next);
     };
-    return /* @__PURE__ */ jsxRuntime.jsx(Root28, { ref, $variant: variant, ...props, children: items.map((item) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(Root37, { ref, $variant: variant, ...props, children: items.map((item) => {
       const isOpen = openKeys.includes(item.key);
       const panelId = `accordion-panel-${item.key}`;
       const triggerId = `accordion-trigger-${item.key}`;
@@ -8275,8 +9123,76 @@ var Accordion = React.forwardRef(
 );
 Accordion.displayName = "Accordion";
 var accordionVariants = ["default", "bordered", "separated"];
-var fadeIn2 = react.keyframes`from{opacity:0;transform:translateY(0.5rem)}to{opacity:1;transform:translateY(0)}`;
-var fadeOut = react.keyframes`from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(0.5rem)}`;
+var SEVERITY_COLORS = {
+  info: { bg: "rgba(25,118,210,0.08)", color: "#1565c0", border: "rgba(25,118,210,0.3)" },
+  success: { bg: "rgba(34,197,94,0.1)", color: "#15803d", border: "rgba(34,197,94,0.35)" },
+  warning: { bg: "rgba(245,158,11,0.1)", color: "#b45309", border: "rgba(245,158,11,0.35)" },
+  error: { bg: "rgba(211,47,47,0.08)", color: "#c62828", border: "rgba(211,47,47,0.3)" }
+};
+var ICONS = {
+  info: /* @__PURE__ */ jsxRuntime.jsx(InfoOutlinedIcon__default.default, { "aria-hidden": true, style: { fontSize: 20 } }),
+  success: /* @__PURE__ */ jsxRuntime.jsx(CheckCircleOutlinedIcon__default.default, { "aria-hidden": true, style: { fontSize: 20 } }),
+  warning: /* @__PURE__ */ jsxRuntime.jsx(WarningAmberOutlinedIcon__default.default, { "aria-hidden": true, style: { fontSize: 20 } }),
+  error: /* @__PURE__ */ jsxRuntime.jsx(ErrorOutlineOutlinedIcon__default.default, { "aria-hidden": true, style: { fontSize: 20 } })
+};
+var Root38 = styles.styled("div", {
+  shouldForwardProp: (prop) => prop !== "$severity"
+})(({ theme, $severity }) => {
+  const c = SEVERITY_COLORS[$severity];
+  return {
+    display: "flex",
+    gap: "0.75rem",
+    padding: "0.875rem 1rem",
+    borderRadius: theme.shape.borderRadius,
+    border: `1px solid ${c.border}`,
+    backgroundColor: c.bg,
+    color: c.color,
+    fontFamily: theme.typography.fontFamily,
+    fontSize: "0.9375rem"
+  };
+});
+var IconSlot2 = styles.styled("span")({
+  flexShrink: 0,
+  display: "flex",
+  paddingTop: "0.0625rem"
+});
+var Body = styles.styled("div")({ flex: 1 });
+var Title5 = styles.styled("div")({
+  fontWeight: 700,
+  marginBottom: "0.25rem"
+});
+var CloseButton2 = styles.styled("button")(({ theme }) => ({
+  appearance: "none",
+  border: "none",
+  background: "transparent",
+  cursor: "pointer",
+  display: "flex",
+  alignItems: "center",
+  padding: "0.125rem",
+  color: "inherit",
+  opacity: 0.6,
+  borderRadius: "0.25rem",
+  flexShrink: 0,
+  "&:hover": { opacity: 1 },
+  "&:focus-visible": {
+    outline: `3px solid ${theme.palette.primary.main}`,
+    outlineOffset: "2px"
+  }
+}));
+var Alert = react.forwardRef(
+  ({ severity = "info", title, children, onClose, icon, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root38, { ref, role: "alert", $severity: severity, ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(IconSlot2, { children: icon ?? ICONS[severity] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Body, { children: [
+      title && /* @__PURE__ */ jsxRuntime.jsx(Title5, { children: title }),
+      children
+    ] }),
+    onClose && /* @__PURE__ */ jsxRuntime.jsx(CloseButton2, { type: "button", onClick: onClose, "aria-label": "Zamknij", children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon__default.default, { "aria-hidden": true, style: { fontSize: 16 } }) })
+  ] })
+);
+Alert.displayName = "Alert";
+var alertSeverities = ["info", "success", "warning", "error"];
+var fadeIn2 = react$1.keyframes`from{opacity:0;transform:translateY(0.5rem)}to{opacity:1;transform:translateY(0)}`;
+var fadeOut = react$1.keyframes`from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(0.5rem)}`;
 var POSITION_MAP = {
   "bottom-right": { right: "1.5rem", bottom: "1.5rem" },
   "bottom-left": { left: "1.5rem", bottom: "1.5rem" },
@@ -8336,9 +9252,9 @@ function BackToTop({
   label = "Wr\xF3\u0107 na g\xF3r\u0119",
   scrollTarget
 }) {
-  const [visible, setVisible] = React.useState(false);
-  const getTarget = React.useCallback(() => scrollTarget ? scrollTarget() : window, [scrollTarget]);
-  React.useEffect(() => {
+  const [visible, setVisible] = react.useState(false);
+  const getTarget = react.useCallback(() => scrollTarget ? scrollTarget() : window, [scrollTarget]);
+  react.useEffect(() => {
     const target = getTarget();
     const onScroll = () => {
       const scrollY = target instanceof Window ? target.scrollY : target.scrollTop;
@@ -8436,12 +9352,12 @@ function clampToViewport(x, y, el) {
     y: Math.min(y, window.innerHeight - h - MENU_MARGIN)
   };
 }
-var ContextMenu = React.forwardRef(
+var ContextMenu = react.forwardRef(
   ({ items, children, disabled = false, ...props }, ref) => {
-    const [pos, setPos] = React.useState(null);
-    const menuRef = React.useRef(null);
-    const close = React.useCallback(() => setPos(null), []);
-    const handleContextMenu = React.useCallback(
+    const [pos, setPos] = react.useState(null);
+    const menuRef = react.useRef(null);
+    const close = react.useCallback(() => setPos(null), []);
+    const handleContextMenu = react.useCallback(
       (e) => {
         if (disabled) return;
         e.preventDefault();
@@ -8449,7 +9365,7 @@ var ContextMenu = React.forwardRef(
       },
       [disabled]
     );
-    React.useEffect(() => {
+    react.useEffect(() => {
       if (!pos) return;
       if (menuRef.current) {
         const clamped = clampToViewport(pos.x, pos.y, menuRef.current);
@@ -8514,6 +9430,44 @@ var ContextMenu = React.forwardRef(
   }
 );
 ContextMenu.displayName = "ContextMenu";
+var Root39 = styles.styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "1rem",
+  padding: "3rem 1.5rem",
+  textAlign: "center",
+  fontFamily: theme.typography.fontFamily
+}));
+var IconWrap3 = styles.styled("div")(({ theme }) => ({
+  color: theme.palette.text.disabled,
+  display: "flex",
+  "& svg": { fontSize: "3.5rem" }
+}));
+var Title6 = styles.styled("h3")(({ theme }) => ({
+  margin: 0,
+  fontSize: "1.125rem",
+  fontWeight: 700,
+  color: theme.palette.text.primary
+}));
+var Description7 = styles.styled("p")(({ theme }) => ({
+  margin: 0,
+  fontSize: "0.9375rem",
+  color: theme.palette.text.secondary,
+  maxWidth: "28rem"
+}));
+var EmptyState = react.forwardRef(
+  ({ icon, title, description, action, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root39, { ref, ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(IconWrap3, { "aria-hidden": true, children: icon ?? /* @__PURE__ */ jsxRuntime.jsx(InboxOutlinedIcon__default.default, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Title6, { children: title }),
+      description && /* @__PURE__ */ jsxRuntime.jsx(Description7, { style: { marginTop: "0.5rem" }, children: description })
+    ] }),
+    action && /* @__PURE__ */ jsxRuntime.jsx("div", { children: action })
+  ] })
+);
+EmptyState.displayName = "EmptyState";
 var PADDING = {
   sm: "0.5rem 0.75rem",
   md: "0.75rem 1rem",
@@ -8524,7 +9478,7 @@ var FONT_SIZE2 = {
   md: "0.9375rem",
   lg: "1rem"
 };
-var Root29 = styles.styled("ul", {
+var Root40 = styles.styled("ul", {
   shouldForwardProp: (p) => p !== "$variant"
 })(({ theme, $variant }) => ({
   listStyle: "none",
@@ -8616,10 +9570,10 @@ var SuffixWrap = styles.styled("span")({
   display: "flex",
   alignItems: "center"
 });
-var List3 = React.forwardRef(
+var List3 = react.forwardRef(
   ({ items, size = "md", variant = "default", dividers = true, ...props }, ref) => {
     const effectiveVariant = !dividers && variant === "default" ? "default" : variant;
-    return /* @__PURE__ */ jsxRuntime.jsx(Root29, { ref, $variant: effectiveVariant, role: "list", ...props, children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ jsxRuntime.jsx(Root40, { ref, $variant: effectiveVariant, role: "list", ...props, children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
       Item2,
       {
         role: "listitem",
@@ -8658,7 +9612,7 @@ var speedDuration = {
   normal: "20s",
   fast: "10s"
 };
-var Root30 = styles.styled("div")({
+var Root41 = styles.styled("div")({
   overflow: "hidden",
   width: "100%",
   userSelect: "none"
@@ -8682,21 +9636,21 @@ var ItemWrap = styles.styled("div", {
   flexShrink: 0,
   gap: $gap
 }));
-var Marquee = React.forwardRef(
+var Marquee = react.forwardRef(
   ({ children, direction = "left", speed = "normal", pauseOnHover = true, gap = "2rem", ...props }, ref) => {
     const gapValue = typeof gap === "number" ? `${gap}px` : gap;
     const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(ItemWrap, { $gap: gapValue, "aria-hidden": "false", children }),
       /* @__PURE__ */ jsxRuntime.jsx(ItemWrap, { $gap: gapValue, "aria-hidden": "true", children })
     ] });
-    return /* @__PURE__ */ jsxRuntime.jsx(Root30, { ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Track5, { $direction: direction, $speed: speed, $pauseOnHover: pauseOnHover, $gap: gapValue, children: content }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(Root41, { ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Track5, { $direction: direction, $speed: speed, $pauseOnHover: pauseOnHover, $gap: gapValue, children: content }) });
   }
 );
 Marquee.displayName = "Marquee";
 var marqueeDirections = ["left", "right"];
 var marqueeSpeeds = ["slow", "normal", "fast"];
-var fadeIn3 = react.keyframes`from { opacity: 0; } to { opacity: 1; }`;
-var slideUp = react.keyframes`from { opacity: 0; transform: translateY(1rem) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); }`;
+var fadeIn3 = react$1.keyframes`from { opacity: 0; } to { opacity: 1; }`;
+var slideUp = react$1.keyframes`from { opacity: 0; transform: translateY(1rem) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); }`;
 var SIZE_MAP2 = {
   sm: "24rem",
   md: "32rem",
@@ -8743,7 +9697,7 @@ var Header = styles.styled("div")(({ theme }) => ({
   borderBottom: `1px solid ${theme.palette.divider}`,
   flexShrink: 0
 }));
-var Title5 = styles.styled("h2")(({ theme }) => ({
+var Title7 = styles.styled("h2")(({ theme }) => ({
   margin: 0,
   fontFamily: theme.typography.fontFamily,
   fontSize: "1.125rem",
@@ -8751,7 +9705,7 @@ var Title5 = styles.styled("h2")(({ theme }) => ({
   color: theme.palette.text.primary,
   lineHeight: 1.4
 }));
-var CloseButton2 = styles.styled("button")(({ theme }) => ({
+var CloseButton3 = styles.styled("button")(({ theme }) => ({
   appearance: "none",
   border: "none",
   background: "none",
@@ -8774,14 +9728,14 @@ var CloseButton2 = styles.styled("button")(({ theme }) => ({
     outlineOffset: "2px"
   }
 }));
-var Body = styles.styled("div")(({ theme }) => ({
+var Body2 = styles.styled("div")(({ theme }) => ({
   padding: "1.5rem",
   overflowY: "auto",
   flex: 1,
   fontFamily: theme.typography.fontFamily,
   color: theme.palette.text.primary
 }));
-var Footer3 = styles.styled("div")(({ theme }) => ({
+var Footer4 = styles.styled("div")(({ theme }) => ({
   padding: "1rem 1.5rem",
   borderTop: `1px solid ${theme.palette.divider}`,
   display: "flex",
@@ -8799,8 +9753,8 @@ function Modal({
   closeOnBackdrop = true,
   hideCloseButton = false
 }) {
-  const dialogRef = React.useRef(null);
-  React.useEffect(() => {
+  const dialogRef = react.useRef(null);
+  react.useEffect(() => {
     if (!open) return;
     const prev = document.body.style.overflow;
     document.body.style.overflow = "hidden";
@@ -8808,7 +9762,7 @@ function Modal({
       document.body.style.overflow = prev;
     };
   }, [open]);
-  React.useEffect(() => {
+  react.useEffect(() => {
     if (!open) return;
     const handleKey = (e) => {
       if (e.key === "Escape") onClose();
@@ -8816,7 +9770,7 @@ function Modal({
     document.addEventListener("keydown", handleKey);
     return () => document.removeEventListener("keydown", handleKey);
   }, [open, onClose]);
-  React.useEffect(() => {
+  react.useEffect(() => {
     if (open) dialogRef.current?.focus();
   }, [open]);
   if (!open) return null;
@@ -8833,11 +9787,11 @@ function Modal({
         onClick: (e) => e.stopPropagation(),
         children: [
           (title || !hideCloseButton) && /* @__PURE__ */ jsxRuntime.jsxs(Header, { children: [
-            title ? /* @__PURE__ */ jsxRuntime.jsx(Title5, { id: "modal-title", children: title }) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
-            !hideCloseButton && /* @__PURE__ */ jsxRuntime.jsx(CloseButton2, { "aria-label": "Zamknij", onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon__default.default, { "aria-hidden": true, style: { fontSize: 16 } }) })
+            title ? /* @__PURE__ */ jsxRuntime.jsx(Title7, { id: "modal-title", children: title }) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
+            !hideCloseButton && /* @__PURE__ */ jsxRuntime.jsx(CloseButton3, { "aria-label": "Zamknij", onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon__default.default, { "aria-hidden": true, style: { fontSize: 16 } }) })
           ] }),
-          children && /* @__PURE__ */ jsxRuntime.jsx(Body, { children }),
-          footer && /* @__PURE__ */ jsxRuntime.jsx(Footer3, { children: footer })
+          children && /* @__PURE__ */ jsxRuntime.jsx(Body2, { children }),
+          footer && /* @__PURE__ */ jsxRuntime.jsx(Footer4, { children: footer })
         ]
       }
     ) }),
@@ -8845,7 +9799,7 @@ function Modal({
   );
 }
 var modalSizes = ["sm", "md", "lg", "xl", "full"];
-var Root31 = styles.styled("div")({ width: "100%" });
+var Root42 = styles.styled("div")({ width: "100%" });
 var TabList = styles.styled("div", {
   shouldForwardProp: (prop) => prop !== "$variant"
 })(({ theme, $variant }) => ({
@@ -8916,16 +9870,16 @@ var Panel2 = styles.styled("div")(({ theme }) => ({
   fontFamily: theme.typography.fontFamily,
   color: theme.palette.text.primary
 }));
-var Tabs = React.forwardRef(
+var Tabs = react.forwardRef(
   ({ tabs, defaultActiveKey, activeKey: controlledKey, onChange, variant = "underline", ...props }, ref) => {
-    const [internalKey, setInternalKey] = React.useState(defaultActiveKey ?? tabs[0]?.key ?? "");
+    const [internalKey, setInternalKey] = react.useState(defaultActiveKey ?? tabs[0]?.key ?? "");
     const activeKey = controlledKey ?? internalKey;
     const handleSelect = (key) => {
       if (controlledKey === void 0) setInternalKey(key);
       onChange?.(key);
     };
     const activeTab = tabs.find((t) => t.key === activeKey);
-    return /* @__PURE__ */ jsxRuntime.jsxs(Root31, { ref, ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root42, { ref, ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsx(TabList, { role: "tablist", $variant: variant, children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
         TabButton,
         {
@@ -8983,7 +9937,7 @@ var Header2 = styles.styled("div")(({ theme }) => ({
   padding: "1rem 1.25rem",
   borderBottom: `1px solid ${theme.palette.divider}`
 }));
-var Title6 = styles.styled("h2")(({ theme }) => ({
+var Title8 = styles.styled("h2")(({ theme }) => ({
   margin: 0,
   fontSize: "1.125rem",
   color: theme.palette.text.primary
@@ -9046,14 +10000,14 @@ var RemoveButton2 = styles.styled("button")(({ theme }) => ({
   padding: 0,
   fontSize: "0.875rem"
 }));
-var Footer4 = styles.styled("div")(({ theme }) => ({
+var Footer5 = styles.styled("div")(({ theme }) => ({
   display: "grid",
   gap: "1rem",
   marginTop: "auto",
   padding: "1rem 1.25rem",
   borderTop: `1px solid ${theme.palette.divider}`
 }));
-var CartDrawer = React.forwardRef(
+var CartDrawer = react.forwardRef(
   ({
     open,
     title = "Koszyk",
@@ -9068,7 +10022,7 @@ var CartDrawer = React.forwardRef(
     ...props
   }, ref) => /* @__PURE__ */ jsxRuntime.jsx(Overlay3, { $open: open, children: /* @__PURE__ */ jsxRuntime.jsxs(Panel3, { ref, "aria-hidden": !open, "aria-label": title, ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Header2, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Title6, { children: title }),
+      /* @__PURE__ */ jsxRuntime.jsx(Title8, { children: title }),
       /* @__PURE__ */ jsxRuntime.jsx(IconButton, { type: "button", "aria-label": closeLabel, onClick: onClose, children: "\xD7" })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(Items, { children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(Item3, { children: [
@@ -9091,7 +10045,7 @@ var CartDrawer = React.forwardRef(
         ] })
       ] })
     ] }, item.id)) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(Footer4, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Footer5, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Row4, { children: [
         /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Suma" }),
         /* @__PURE__ */ jsxRuntime.jsx("strong", { children: subtotal })
@@ -9101,7 +10055,7 @@ var CartDrawer = React.forwardRef(
   ] }) })
 );
 CartDrawer.displayName = "CartDrawer";
-var Root32 = styles.styled("aside")(({ theme }) => ({
+var Root43 = styles.styled("aside")(({ theme }) => ({
   display: "grid",
   gap: "1.5rem",
   width: "100%",
@@ -9118,7 +10072,7 @@ var Header3 = styles.styled("div")({
   justifyContent: "space-between",
   gap: "1rem"
 });
-var Title7 = styles.styled("h2")(({ theme }) => ({
+var Title9 = styles.styled("h2")(({ theme }) => ({
   margin: 0,
   color: theme.palette.text.primary,
   fontSize: "1.125rem"
@@ -9136,7 +10090,7 @@ var Legend = styles.styled("legend")({
   marginBottom: "0.75rem",
   fontWeight: 800
 });
-var OptionLabel = styles.styled("label")(({ theme }) => ({
+var OptionLabel2 = styles.styled("label")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
@@ -9163,7 +10117,7 @@ var NumberInput2 = styles.styled("input")(({ theme }) => ({
   fontFamily: theme.typography.fontFamily
 }));
 function renderOptions(options, selected, onToggle) {
-  return options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(OptionLabel, { children: [
+  return options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(OptionLabel2, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(OptionText, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
@@ -9178,7 +10132,7 @@ function renderOptions(options, selected, onToggle) {
     option.count !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { children: option.count })
   ] }, option.value));
 }
-var FilterSidebar = React.forwardRef(
+var FilterSidebar = react.forwardRef(
   ({
     categories = [],
     colors = [],
@@ -9193,9 +10147,9 @@ var FilterSidebar = React.forwardRef(
     onPriceRangeChange,
     onClear,
     ...props
-  }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root32, { ref, "aria-label": "Filtry produkt\xF3w", ...props, children: [
+  }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root43, { ref, "aria-label": "Filtry produkt\xF3w", ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Header3, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Title7, { children: "Filtry" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Title9, { children: "Filtry" }),
       onClear && /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", onClick: onClear, children: "Wyczy\u015B\u0107" })
     ] }),
     priceRange && /* @__PURE__ */ jsxRuntime.jsxs(Group, { children: [
@@ -9236,8 +10190,8 @@ var FilterSidebar = React.forwardRef(
   ] })
 );
 FilterSidebar.displayName = "FilterSidebar";
-var Root33 = styles.styled(Card)({ display: "grid", gap: "1rem" });
-var Title8 = styles.styled("h2")(({ theme }) => ({
+var Root44 = styles.styled(Card)({ display: "grid", gap: "1rem" });
+var Title10 = styles.styled("h2")(({ theme }) => ({
   margin: 0,
   fontFamily: theme.typography.fontFamily,
   fontSize: "1.125rem",
@@ -9322,7 +10276,7 @@ var TotalRow = styles.styled(Row5)(({ theme }) => ({
   fontSize: "1rem",
   fontWeight: 800
 }));
-var OrderSummary = React.forwardRef(
+var OrderSummary = react.forwardRef(
   ({
     title = "Podsumowanie zam\xF3wienia",
     items = [],
@@ -9336,8 +10290,8 @@ var OrderSummary = React.forwardRef(
     ctaLabel = "Przejd\u017A do kasy",
     onCheckout,
     ...props
-  }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root33, { ref, variant: "default", padding: "lg", rounded: "lg", ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Title8, { children: title }),
+  }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root44, { ref, variant: "default", padding: "lg", rounded: "lg", ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Title10, { children: title }),
     items.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(SectionTitle, { children: itemsTitle }),
       /* @__PURE__ */ jsxRuntime.jsx(ItemList, { children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(Item4, { children: [
@@ -9388,10 +10342,211 @@ var OrderSummary = React.forwardRef(
   ] })
 );
 OrderSummary.displayName = "OrderSummary";
+var Root45 = styles.styled("div")(({ theme }) => ({
+  fontFamily: theme.typography.fontFamily
+}));
+var Grid2 = styles.styled("div", {
+  shouldForwardProp: (prop) => prop !== "$columns"
+})(({ theme, $columns }) => ({
+  display: "grid",
+  gridTemplateColumns: `repeat(1, 1fr)`,
+  gap: "1.25rem",
+  [theme.breakpoints.up("sm")]: {
+    gridTemplateColumns: `repeat(${Math.min($columns, 2)}, 1fr)`
+  },
+  [theme.breakpoints.up("md")]: {
+    gridTemplateColumns: `repeat(${Math.min($columns, 3)}, 1fr)`
+  },
+  [theme.breakpoints.up("lg")]: {
+    gridTemplateColumns: `repeat(${Math.min($columns, 4)}, 1fr)`
+  }
+}));
+var ScrollTrack = styles.styled("div")({
+  display: "flex",
+  gap: "1.25rem",
+  overflowX: "auto",
+  paddingBottom: "0.5rem",
+  scrollSnapType: "x mandatory",
+  "&::-webkit-scrollbar": { height: "4px" },
+  "&::-webkit-scrollbar-track": { background: "transparent" },
+  "&::-webkit-scrollbar-thumb": { borderRadius: "9999px", background: "rgba(0,0,0,0.2)" },
+  "& > *": {
+    flexShrink: 0,
+    scrollSnapAlign: "start",
+    width: "clamp(220px, 28vw, 280px)"
+  }
+});
+var RelatedProducts = react.forwardRef(
+  ({ products, title = "Podobne produkty", layout = "grid", columns = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root45, { ref, ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(SectionHeading, { title, align: "left", style: { marginBottom: "1.5rem" } }),
+    layout === "scroll" ? /* @__PURE__ */ jsxRuntime.jsx(ScrollTrack, { children: products.map((product, i) => /* @__PURE__ */ jsxRuntime.jsx(ProductCard, { ...product }, product.name + i)) }) : /* @__PURE__ */ jsxRuntime.jsx(Grid2, { $columns: columns, children: products.map((product, i) => /* @__PURE__ */ jsxRuntime.jsx(ProductCard, { ...product }, product.name + i)) })
+  ] })
+);
+RelatedProducts.displayName = "RelatedProducts";
+var relatedProductsLayouts = ["grid", "scroll"];
+var Root46 = styles.styled("div")(({ theme }) => ({
+  fontFamily: theme.typography.fontFamily
+}));
+var Summary = styles.styled("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: "2rem",
+  flexWrap: "wrap",
+  padding: "1.5rem",
+  backgroundColor: theme.palette.action.hover,
+  borderRadius: theme.shape.borderRadius,
+  marginBottom: "2rem"
+}));
+var AverageBlock = styles.styled("div")({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  gap: "0.25rem"
+});
+var AverageScore = styles.styled("span")(({ theme }) => ({
+  fontSize: "3rem",
+  fontWeight: 800,
+  lineHeight: 1,
+  color: theme.palette.text.primary
+}));
+var Distribution = styles.styled("div")({ flex: 1, display: "flex", flexDirection: "column", gap: "0.375rem" });
+var DistRow = styles.styled("div")({ display: "flex", alignItems: "center", gap: "0.75rem" });
+var DistLabel = styles.styled("span")(({ theme }) => ({
+  fontSize: "0.8125rem",
+  color: theme.palette.text.secondary,
+  width: "1.5rem",
+  textAlign: "right"
+}));
+var DistBar = styles.styled("div")(({ theme }) => ({
+  flex: 1,
+  height: "0.5rem",
+  borderRadius: "9999px",
+  backgroundColor: theme.palette.divider,
+  overflow: "hidden"
+}));
+var DistFill = styles.styled("div", {
+  shouldForwardProp: (prop) => prop !== "$pct"
+})(({ $pct }) => ({
+  height: "100%",
+  width: `${$pct}%`,
+  backgroundColor: "#f59e0b",
+  borderRadius: "9999px",
+  transition: "width 400ms ease"
+}));
+var ReviewList = styles.styled("div")({
+  display: "flex",
+  flexDirection: "column",
+  gap: "1.5rem"
+});
+var ReviewCard = styles.styled("div")(({ theme }) => ({
+  padding: "1.25rem",
+  border: `1px solid ${theme.palette.divider}`,
+  borderRadius: theme.shape.borderRadius,
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.75rem"
+}));
+var ReviewHeader = styles.styled("div")({
+  display: "flex",
+  alignItems: "flex-start",
+  gap: "0.875rem"
+});
+var AuthorInfo2 = styles.styled("div")({ flex: 1 });
+var AuthorName2 = styles.styled("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: "0.375rem",
+  fontSize: "0.9375rem",
+  fontWeight: 700,
+  color: theme.palette.text.primary
+}));
+var ReviewDate = styles.styled("div")(({ theme }) => ({
+  fontSize: "0.8125rem",
+  color: theme.palette.text.secondary,
+  marginTop: "0.125rem"
+}));
+var ReviewTitle = styles.styled("div")(({ theme }) => ({
+  fontSize: "0.9375rem",
+  fontWeight: 700,
+  color: theme.palette.text.primary
+}));
+var ReviewContent = styles.styled("p")(({ theme }) => ({
+  margin: 0,
+  fontSize: "0.9375rem",
+  color: theme.palette.text.secondary,
+  lineHeight: 1.6
+}));
+var HelpfulRow = styles.styled("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: "0.375rem",
+  fontSize: "0.8125rem",
+  color: theme.palette.text.secondary
+}));
+function ReviewItem({ review }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(ReviewCard, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(ReviewHeader, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Avatar,
+        {
+          initials: review.author.slice(0, 2).toUpperCase(),
+          size: "sm"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(AuthorInfo2, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(AuthorName2, { children: [
+          review.author,
+          review.verified && /* @__PURE__ */ jsxRuntime.jsx(VerifiedIcon__default.default, { "aria-label": "Zweryfikowany zakup", style: { fontSize: 14, color: "#16a34a" } })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(ReviewDate, { children: review.date })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(Rating, { value: review.rating, size: "sm", readonly: true })
+    ] }),
+    review.title && /* @__PURE__ */ jsxRuntime.jsx(ReviewTitle, { children: review.title }),
+    /* @__PURE__ */ jsxRuntime.jsx(ReviewContent, { children: review.content }),
+    review.helpfulCount !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs(HelpfulRow, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ThumbUpOutlinedIcon__default.default, { "aria-hidden": true, style: { fontSize: 14 } }),
+      review.helpfulCount,
+      " os\xF3b uzna\u0142o t\u0119 recenzj\u0119 za pomocn\u0105"
+    ] })
+  ] });
+}
+var ReviewSection = react.forwardRef(
+  ({ reviews, averageRating, totalReviews, title = "Opinie klient\xF3w", ratingDistribution, ...props }, ref) => {
+    const totalDist = ratingDistribution ? Object.values(ratingDistribution).reduce((a, b) => a + b, 0) : 0;
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root46, { ref, ...props, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SectionHeading, { title, align: "left", style: { marginBottom: "1.5rem" } }),
+      (averageRating !== void 0 || ratingDistribution) && /* @__PURE__ */ jsxRuntime.jsxs(Summary, { children: [
+        averageRating !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs(AverageBlock, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(AverageScore, { children: averageRating.toFixed(1) }),
+          /* @__PURE__ */ jsxRuntime.jsx(Rating, { value: averageRating, size: "sm", readonly: true }),
+          totalReviews !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "0.8125rem", marginTop: "0.25rem" }, children: [
+            totalReviews,
+            " opinii"
+          ] })
+        ] }),
+        ratingDistribution && /* @__PURE__ */ jsxRuntime.jsx(Distribution, { children: [5, 4, 3, 2, 1].map((star) => {
+          const count = ratingDistribution[star] ?? 0;
+          const pct2 = totalDist > 0 ? count / totalDist * 100 : 0;
+          return /* @__PURE__ */ jsxRuntime.jsxs(DistRow, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(DistLabel, { children: [
+              star,
+              "\u2605"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(DistBar, { children: /* @__PURE__ */ jsxRuntime.jsx(DistFill, { $pct: pct2 }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(DistLabel, { style: { textAlign: "left" }, children: count })
+          ] }, star);
+        }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(ReviewList, { children: reviews.map((review) => /* @__PURE__ */ jsxRuntime.jsx(ReviewItem, { review }, review.id)) })
+    ] });
+  }
+);
+ReviewSection.displayName = "ReviewSection";
 var List4 = styles.styled("div")(({ $hasHeading }) => ({
   marginTop: $hasHeading ? "2.5rem" : 0
 }));
-var FaqSection = React.forwardRef(
+var FaqSection = react.forwardRef(
   ({
     title = "Najcz\u0119\u015Bciej zadawane pytania",
     description,
@@ -9416,7 +10571,7 @@ var FaqSection = React.forwardRef(
   }
 );
 FaqSection.displayName = "FaqSection";
-var Grid2 = styles.styled("div", {
+var Grid3 = styles.styled("div", {
   shouldForwardProp: (prop) => !["$columns", "$hasHeading", "$iconLeft"].includes(prop)
 })(({ theme, $columns, $hasHeading, $iconLeft }) => ({
   display: "grid",
@@ -9430,7 +10585,7 @@ var Grid2 = styles.styled("div", {
     gridTemplateColumns: `repeat(${$columns}, minmax(0, 1fr))`
   }
 }));
-var FeatureGrid = React.forwardRef(
+var FeatureGrid = react.forwardRef(
   ({
     title,
     description,
@@ -9445,7 +10600,7 @@ var FeatureGrid = React.forwardRef(
     const hasHeading = Boolean(title || description);
     return /* @__PURE__ */ jsxRuntime.jsx(Section, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { maxWidth, children: [
       hasHeading && /* @__PURE__ */ jsxRuntime.jsx(SectionHeading, { title: title ?? "", description, align: headingAlign }),
-      /* @__PURE__ */ jsxRuntime.jsx(Grid2, { $columns: columns, $hasHeading: hasHeading, $iconLeft: itemLayout === "icon-left", children: features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx(Grid3, { $columns: columns, $hasHeading: hasHeading, $iconLeft: itemLayout === "icon-left", children: features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsx(
         FeatureItem2,
         {
           feature,
@@ -9459,7 +10614,7 @@ var FeatureGrid = React.forwardRef(
 );
 FeatureGrid.displayName = "FeatureGrid";
 var featureGridColumns = [2, 3, 4];
-var Grid3 = styles.styled("div", {
+var Grid4 = styles.styled("div", {
   shouldForwardProp: (prop) => !["$columns", "$hasHeading"].includes(prop)
 })(({ theme, $columns, $hasHeading }) => ({
   display: "grid",
@@ -9474,7 +10629,7 @@ var Grid3 = styles.styled("div", {
     gridTemplateColumns: `repeat(${$columns}, minmax(0, 1fr))`
   }
 }));
-var LogoCloud = React.forwardRef(
+var LogoCloud = react.forwardRef(
   ({
     title = "Zaufali nam",
     description,
@@ -9491,7 +10646,7 @@ var LogoCloud = React.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsx(Section, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { maxWidth, children: [
       hasHeading && title && /* @__PURE__ */ jsxRuntime.jsx(SectionHeading, { title, description, align: headingAlign }),
       hasHeading && !title && description && /* @__PURE__ */ jsxRuntime.jsx(SectionHeading, { title: description, align: headingAlign, as: "h2" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Grid3, { $columns: columns, $hasHeading: hasHeading, children: logos.map((logo) => {
+      /* @__PURE__ */ jsxRuntime.jsx(Grid4, { $columns: columns, $hasHeading: hasHeading, children: logos.map((logo) => {
         const key = `${logo.name}-${logo.href ?? logo.logoUrl ?? "text"}`;
         return /* @__PURE__ */ jsxRuntime.jsx(
           LogoTile,
@@ -9575,7 +10730,7 @@ var SuccessMessage = styles.styled("p")(({ theme }) => ({
   fontFamily: theme.typography.fontFamily,
   textAlign: "center"
 }));
-var NewsletterSection = React.forwardRef(
+var NewsletterSection = react.forwardRef(
   ({
     title = "B\u0105d\u017A na bie\u017C\u0105co",
     description = "Zapisz si\u0119 do newslettera i otrzymuj najnowsze informacje prosto na swoj\u0105 skrzynk\u0119.",
@@ -9590,8 +10745,8 @@ var NewsletterSection = React.forwardRef(
     onSubmit,
     ...rest
   }, ref) => {
-    const [email, setEmail] = React.useState("");
-    const [submitted, setSubmitted] = React.useState(false);
+    const [email, setEmail] = react.useState("");
+    const [submitted, setSubmitted] = react.useState(false);
     const handleSubmit = (e) => {
       e.preventDefault();
       if (!email) return;
@@ -9641,12 +10796,12 @@ var Section2 = styles.styled("section")(({ theme }) => ({
   padding: "5rem 1rem",
   backgroundColor: theme.palette.background.default
 }));
-var Inner = styles.styled("div")({
+var Inner2 = styles.styled("div")({
   maxWidth: "80rem",
   marginLeft: "auto",
   marginRight: "auto"
 });
-var Grid4 = styles.styled("div")(({ theme }) => ({
+var Grid5 = styles.styled("div")(({ theme }) => ({
   marginTop: "3rem",
   display: "grid",
   gridTemplateColumns: "1fr",
@@ -9659,16 +10814,16 @@ var Grid4 = styles.styled("div")(({ theme }) => ({
   }
 }));
 function PricingSection({ title, description, plans, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Section2, { ...props, children: /* @__PURE__ */ jsxRuntime.jsxs(Inner, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Section2, { ...props, children: /* @__PURE__ */ jsxRuntime.jsxs(Inner2, { children: [
     (title || description) && /* @__PURE__ */ jsxRuntime.jsx(SectionHeading, { title: title ?? "", description, align: "center" }),
-    /* @__PURE__ */ jsxRuntime.jsx(Grid4, { children: plans.map((plan, i) => /* @__PURE__ */ jsxRuntime.jsx(PricingCard, { ...plan }, i)) })
+    /* @__PURE__ */ jsxRuntime.jsx(Grid5, { children: plans.map((plan, i) => /* @__PURE__ */ jsxRuntime.jsx(PricingCard, { ...plan }, i)) })
   ] }) });
 }
 var Section3 = styles.styled("section")(({ theme }) => ({
   padding: "5rem 1rem",
   backgroundColor: theme.palette.background.default
 }));
-var Inner2 = styles.styled("div")({
+var Inner3 = styles.styled("div")({
   maxWidth: "80rem",
   marginLeft: "auto",
   marginRight: "auto"
@@ -9706,9 +10861,9 @@ function ArrowIcon() {
   return /* @__PURE__ */ jsxRuntime.jsx(ArrowForwardIcon__default.default, { "aria-hidden": "true", style: { fontSize: 24 } });
 }
 function ProcessSection({ title, description, steps, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Section3, { ...props, children: /* @__PURE__ */ jsxRuntime.jsxs(Inner2, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Section3, { ...props, children: /* @__PURE__ */ jsxRuntime.jsxs(Inner3, { children: [
     (title || description) && /* @__PURE__ */ jsxRuntime.jsx(SectionHeading, { title: title ?? "", description, align: "center" }),
-    /* @__PURE__ */ jsxRuntime.jsx(StepsRow, { children: steps.map((step, i) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(StepsRow, { children: steps.map((step, i) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(StepWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
         ProcessStep,
         {
@@ -9722,7 +10877,7 @@ function ProcessSection({ title, description, steps, ...props }) {
     ] }, i)) })
   ] }) });
 }
-var Grid5 = styles.styled("div", {
+var Grid6 = styles.styled("div", {
   shouldForwardProp: (prop) => !["$columns", "$hasHeading"].includes(prop)
 })(({ theme, $columns, $hasHeading }) => ({
   display: "grid",
@@ -9736,7 +10891,7 @@ var Grid5 = styles.styled("div", {
     gridTemplateColumns: `repeat(${$columns}, minmax(0, 1fr))`
   }
 }));
-var StatsSection = React.forwardRef(
+var StatsSection = react.forwardRef(
   ({
     title,
     description,
@@ -9751,7 +10906,7 @@ var StatsSection = React.forwardRef(
     const hasHeading = Boolean(title || description);
     return /* @__PURE__ */ jsxRuntime.jsx(Section, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { maxWidth, children: [
       hasHeading && /* @__PURE__ */ jsxRuntime.jsx(SectionHeading, { title: title ?? "", description, align: headingAlign }),
-      /* @__PURE__ */ jsxRuntime.jsx(Grid5, { $columns: columns, $hasHeading: hasHeading, children: stats.map((stat, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx(Grid6, { $columns: columns, $hasHeading: hasHeading, children: stats.map((stat, index) => /* @__PURE__ */ jsxRuntime.jsx(
         StatCard,
         {
           stat,
@@ -9765,7 +10920,7 @@ var StatsSection = React.forwardRef(
 );
 StatsSection.displayName = "StatsSection";
 var statsSectionColumns = [2, 3, 4];
-var Grid6 = styles.styled("div", {
+var Grid7 = styles.styled("div", {
   shouldForwardProp: (prop) => !["$columns", "$hasHeading"].includes(prop)
 })(({ theme, $columns, $hasHeading }) => ({
   display: "grid",
@@ -9779,7 +10934,7 @@ var Grid6 = styles.styled("div", {
     gridTemplateColumns: `repeat(${$columns}, minmax(0, 1fr))`
   }
 }));
-var TeamSection = React.forwardRef(
+var TeamSection = react.forwardRef(
   ({
     title = "Nasz zesp\xF3\u0142",
     description,
@@ -9794,7 +10949,7 @@ var TeamSection = React.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsx(Section, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { maxWidth, children: [
       hasHeading && title && /* @__PURE__ */ jsxRuntime.jsx(SectionHeading, { title, description, align: headingAlign }),
       hasHeading && !title && description && /* @__PURE__ */ jsxRuntime.jsx(SectionHeading, { title: description, align: headingAlign, as: "h2" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Grid6, { $columns: columns, $hasHeading: hasHeading, children: members.map((member) => /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx(Grid7, { $columns: columns, $hasHeading: hasHeading, children: members.map((member) => /* @__PURE__ */ jsxRuntime.jsx(
         TeamMemberCard,
         {
           member,
@@ -9807,7 +10962,7 @@ var TeamSection = React.forwardRef(
 );
 TeamSection.displayName = "TeamSection";
 var teamSectionColumns = [2, 3, 4];
-var Grid7 = styles.styled("div", {
+var Grid8 = styles.styled("div", {
   shouldForwardProp: (prop) => !["$columns", "$hasHeading"].includes(prop)
 })(({ theme, $columns, $hasHeading }) => ({
   display: "grid",
@@ -9821,7 +10976,7 @@ var Grid7 = styles.styled("div", {
     gridTemplateColumns: `repeat(${$columns}, minmax(0, 1fr))`
   }
 }));
-var TestimonialsSection = React.forwardRef(
+var TestimonialsSection = react.forwardRef(
   ({
     title = "Co m\xF3wi\u0105 nasi klienci",
     description,
@@ -9835,7 +10990,7 @@ var TestimonialsSection = React.forwardRef(
     const hasHeading = Boolean(title || description);
     return /* @__PURE__ */ jsxRuntime.jsx(Section, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { maxWidth, children: [
       hasHeading && /* @__PURE__ */ jsxRuntime.jsx(SectionHeading, { title: title ?? "", description, align: headingAlign }),
-      /* @__PURE__ */ jsxRuntime.jsx(Grid7, { $columns: columns, $hasHeading: hasHeading, children: testimonials.map((testimonial, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx(Grid8, { $columns: columns, $hasHeading: hasHeading, children: testimonials.map((testimonial, index) => /* @__PURE__ */ jsxRuntime.jsx(
         TestimonialCard,
         {
           testimonial,
@@ -9848,11 +11003,11 @@ var TestimonialsSection = React.forwardRef(
 );
 TestimonialsSection.displayName = "TestimonialsSection";
 var testimonialsSectionColumns = [1, 2, 3];
-var fadeIn4 = react.keyframes`
+var fadeIn4 = react$1.keyframes`
   from { opacity: 0; }
   to   { opacity: 1; }
 `;
-var slideDown = react.keyframes`
+var slideDown = react$1.keyframes`
   from { opacity: 0; transform: translateY(-8px) scale(0.98); }
   to   { opacity: 1; transform: translateY(0) scale(1); }
 `;
@@ -9920,7 +11075,7 @@ var ResultsScroll = styles.styled("div")({
   flex: 1,
   padding: "0.375rem 0"
 });
-var GroupLabel = styles.styled("div")(({ theme }) => ({
+var GroupLabel3 = styles.styled("div")(({ theme }) => ({
   padding: "0.5rem 1rem 0.25rem",
   fontFamily: theme.typography.fontFamily,
   fontSize: "0.75rem",
@@ -9988,14 +11143,14 @@ var Kbd = styles.styled("kbd")(({ theme }) => ({
   backgroundColor: theme.palette.action.hover,
   lineHeight: 1.6
 }));
-var EmptyState = styles.styled("div")(({ theme }) => ({
+var EmptyState2 = styles.styled("div")(({ theme }) => ({
   padding: "2.5rem 1rem",
   textAlign: "center",
   fontFamily: theme.typography.fontFamily,
   fontSize: "0.9375rem",
   color: theme.palette.text.secondary
 }));
-var Footer5 = styles.styled("div")(({ theme }) => ({
+var Footer6 = styles.styled("div")(({ theme }) => ({
   display: "flex",
   gap: "1.25rem",
   padding: "0.5rem 1rem",
@@ -10031,14 +11186,14 @@ function CommandPalette({
   emptyLabel = "Brak wynik\xF3w dla podanej frazy.",
   onSelect
 }) {
-  const id = React.useId();
-  const [query, setQuery] = React.useState("");
-  const [activeIndex, setActiveIndex] = React.useState(0);
-  const inputRef = React.useRef(null);
-  const activeItemRef = React.useRef(null);
+  const id = react.useId();
+  const [query, setQuery] = react.useState("");
+  const [activeIndex, setActiveIndex] = react.useState(0);
+  const inputRef = react.useRef(null);
+  const activeItemRef = react.useRef(null);
   const filtered = filterGroups(groups, query);
   const flat = flatItems(filtered);
-  const handleSelect = React.useCallback(
+  const handleSelect = react.useCallback(
     (item) => {
       item.onSelect?.();
       onSelect?.(item);
@@ -10046,20 +11201,20 @@ function CommandPalette({
     },
     [onSelect, onClose]
   );
-  React.useEffect(() => {
+  react.useEffect(() => {
     if (open) {
       setQuery("");
       setActiveIndex(0);
       setTimeout(() => inputRef.current?.focus(), 0);
     }
   }, [open]);
-  React.useEffect(() => {
+  react.useEffect(() => {
     setActiveIndex(0);
   }, [query]);
-  React.useEffect(() => {
+  react.useEffect(() => {
     activeItemRef.current?.scrollIntoView?.({ block: "nearest" });
   }, [activeIndex]);
-  React.useEffect(() => {
+  react.useEffect(() => {
     const handler = (e) => {
       if (!open) return;
       if (e.key === "Escape") {
@@ -10122,8 +11277,8 @@ function CommandPalette({
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(KbdHint, { children: "esc" })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(ResultsScroll, { id: `${id}-listbox`, role: "listbox", "aria-label": "Wyniki", children: flat.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(EmptyState, { children: emptyLabel }) : filtered.map((group) => /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "group", "aria-labelledby": `${id}-group-${group.id}`, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(GroupLabel, { id: `${id}-group-${group.id}`, children: group.label }),
+              /* @__PURE__ */ jsxRuntime.jsx(ResultsScroll, { id: `${id}-listbox`, role: "listbox", "aria-label": "Wyniki", children: flat.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(EmptyState2, { children: emptyLabel }) : filtered.map((group) => /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "group", "aria-labelledby": `${id}-group-${group.id}`, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(GroupLabel3, { id: `${id}-group-${group.id}`, children: group.label }),
                 group.items.map((item) => {
                   const idx = globalIndex++;
                   const isActive = idx === activeIndex;
@@ -10150,7 +11305,7 @@ function CommandPalette({
                   );
                 })
               ] }, group.id)) }),
-              /* @__PURE__ */ jsxRuntime.jsxs(Footer5, { id: `${id}-hint`, "aria-hidden": "true", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(Footer6, { id: `${id}-hint`, "aria-hidden": "true", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs(FooterHint, { children: [
                   /* @__PURE__ */ jsxRuntime.jsx(Kbd, { children: "\u2191" }),
                   /* @__PURE__ */ jsxRuntime.jsx(Kbd, { children: "\u2193" }),
@@ -10194,7 +11349,7 @@ var DEFAULT_CATEGORIES = [
     defaultEnabled: false
   }
 ];
-var slideUp2 = react.keyframes`
+var slideUp2 = react$1.keyframes`
   from { opacity: 0; transform: translateY(100%); }
   to   { opacity: 1; transform: translateY(0); }
 `;
@@ -10209,7 +11364,7 @@ var Bar2 = styles.styled("div")(({ theme }) => ({
   boxShadow: "0 -4px 24px rgba(0,0,0,0.12)",
   animation: `${slideUp2} 300ms cubic-bezier(0.16, 1, 0.3, 1)`
 }));
-var Inner3 = styles.styled("div")({
+var Inner4 = styles.styled("div")({
   maxWidth: "72rem",
   margin: "0 auto",
   padding: "1.25rem 1.5rem",
@@ -10224,7 +11379,7 @@ var TopRow = styles.styled("div")({
   flexWrap: "wrap"
 });
 var TextBlock = styles.styled("div")({ flex: 1, minWidth: "16rem" });
-var Title9 = styles.styled("p")(({ theme }) => ({
+var Title11 = styles.styled("p")(({ theme }) => ({
   margin: "0 0 0.25rem",
   fontFamily: theme.typography.fontFamily,
   fontSize: "1rem",
@@ -10232,7 +11387,7 @@ var Title9 = styles.styled("p")(({ theme }) => ({
   color: theme.palette.text.primary,
   lineHeight: 1.4
 }));
-var Description7 = styles.styled("p")(({ theme }) => ({
+var Description8 = styles.styled("p")(({ theme }) => ({
   margin: 0,
   fontFamily: theme.typography.fontFamily,
   fontSize: "0.875rem",
@@ -10367,9 +11522,9 @@ function CookieConsent({
   privacyPolicyLabel,
   privacyPolicyHref
 }) {
-  const id = React.useId();
-  const [expanded, setExpanded] = React.useState(false);
-  const [prefs, setPrefs] = React.useState(
+  const id = react.useId();
+  const [expanded, setExpanded] = react.useState(false);
+  const [prefs, setPrefs] = react.useState(
     () => Object.fromEntries(categories.map((c) => [c.id, c.defaultEnabled ?? false]))
   );
   if (!open) return null;
@@ -10386,11 +11541,11 @@ function CookieConsent({
     onSave?.(prefs);
   };
   return reactDom.createPortal(
-    /* @__PURE__ */ jsxRuntime.jsx(Bar2, { role: "region", "aria-label": "Zgoda na pliki cookie", "aria-live": "polite", children: /* @__PURE__ */ jsxRuntime.jsxs(Inner3, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Bar2, { role: "region", "aria-label": "Zgoda na pliki cookie", "aria-live": "polite", children: /* @__PURE__ */ jsxRuntime.jsxs(Inner4, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(TopRow, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs(TextBlock, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Title9, { children: title }),
-          /* @__PURE__ */ jsxRuntime.jsxs(Description7, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Title11, { children: title }),
+          /* @__PURE__ */ jsxRuntime.jsxs(Description8, { children: [
             description,
             privacyPolicyLabel && privacyPolicyHref && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
               " ",
@@ -10440,12 +11595,12 @@ function CookieConsent({
   );
 }
 var defaultCookieCategories = DEFAULT_CATEGORIES;
-var Root34 = styles.styled("footer")(({ theme }) => ({
+var Root47 = styles.styled("footer")(({ theme }) => ({
   width: "100%",
   backgroundColor: theme.palette.background.paper,
   borderTop: `1px solid ${theme.palette.divider}`
 }));
-var Inner4 = styles.styled("div")({
+var Inner5 = styles.styled("div")({
   maxWidth: "72rem",
   margin: "0 auto",
   padding: "3rem 1.5rem 2rem"
@@ -10467,7 +11622,7 @@ var BrandBlock = styles.styled("div")({
   flexDirection: "column",
   gap: "0.75rem"
 });
-var Description8 = styles.styled("p")(({ theme }) => ({
+var Description9 = styles.styled("p")(({ theme }) => ({
   margin: 0,
   fontFamily: theme.typography.fontFamily,
   fontSize: "0.875rem",
@@ -10573,7 +11728,7 @@ var SOCIAL_ICONS = {
     /* @__PURE__ */ jsxRuntime.jsx("polygon", { fill: "white", points: "9.75 15.02 15.5 12 9.75 8.98 9.75 15.02" })
   ] })
 };
-function Footer6({
+function Footer7({
   logo,
   description,
   columns = [],
@@ -10581,11 +11736,11 @@ function Footer6({
   copyright
 }) {
   const colCount = columns.length;
-  return /* @__PURE__ */ jsxRuntime.jsx(Root34, { children: /* @__PURE__ */ jsxRuntime.jsxs(Inner4, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Root47, { children: /* @__PURE__ */ jsxRuntime.jsxs(Inner5, { children: [
     (logo || description || colCount > 0) && /* @__PURE__ */ jsxRuntime.jsxs(TopRow2, { style: { "--col-count": colCount }, children: [
       (logo || description) && /* @__PURE__ */ jsxRuntime.jsxs(BrandBlock, { children: [
         logo,
-        description && /* @__PURE__ */ jsxRuntime.jsx(Description8, { children: description })
+        description && /* @__PURE__ */ jsxRuntime.jsx(Description9, { children: description })
       ] }),
       columns.map((col) => /* @__PURE__ */ jsxRuntime.jsxs(Column, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(ColumnTitle, { children: col.title }),
@@ -10608,7 +11763,7 @@ function Footer6({
     ] })
   ] }) });
 }
-var Root35 = styles.styled("header", {
+var Root48 = styles.styled("header", {
   shouldForwardProp: (p) => p !== "$sticky" && p !== "$variant"
 })(({ theme, $sticky, $variant }) => ({
   position: $sticky ? "sticky" : "relative",
@@ -10619,15 +11774,17 @@ var Root35 = styles.styled("header", {
   borderBottom: $variant === "transparent" ? "none" : `1px solid ${theme.palette.divider}`,
   boxShadow: $variant === "transparent" ? "none" : "0 1px 4px rgba(0,0,0,0.08)"
 }));
-var Inner5 = styles.styled("div")({
-  maxWidth: "72rem",
+var Inner6 = styles.styled("div", {
+  shouldForwardProp: (p) => p !== "$maxWidth"
+})(({ $maxWidth }) => ({
+  maxWidth: typeof $maxWidth === "number" ? `${$maxWidth}px` : $maxWidth,
   margin: "0 auto",
   padding: "0 1.5rem",
   height: "3.75rem",
   display: "flex",
   alignItems: "center",
   gap: "1.5rem"
-});
+}));
 var LogoSlot = styles.styled("div")({
   flexShrink: 0,
   display: "flex",
@@ -10723,11 +11880,12 @@ function Navbar({
   navItems = [],
   actions,
   sticky = false,
-  variant = "filled"
+  variant = "filled",
+  maxWidth = "72rem"
 }) {
-  const [mobileOpen, setMobileOpen] = React.useState(false);
-  return /* @__PURE__ */ jsxRuntime.jsxs(Root35, { $sticky: sticky, $variant: variant, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Inner5, { children: [
+  const [mobileOpen, setMobileOpen] = react.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(Root48, { $sticky: sticky, $variant: variant, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Inner6, { $maxWidth: maxWidth, children: [
       logo && /* @__PURE__ */ jsxRuntime.jsx(LogoSlot, { children: logo }),
       /* @__PURE__ */ jsxRuntime.jsx(Nav3, { "aria-label": "Nawigacja g\u0142\xF3wna", children: navItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(NavLink, { href: item.href, $active: !!item.active, children: item.label }, item.href)) }),
       (actions || navItems.length > 0) && /* @__PURE__ */ jsxRuntime.jsxs(RightSlot, { children: [
@@ -10834,7 +11992,7 @@ var MyThemeProvider = ({
   disableCssBaseline = false,
   children
 }) => {
-  const resolvedTheme = React.useMemo(() => {
+  const resolvedTheme = react.useMemo(() => {
     if (theme) return theme;
     switch (mode) {
       case "dark":
@@ -10847,52 +12005,18 @@ var MyThemeProvider = ({
     }
   }, [theme, mode]);
   return /* @__PURE__ */ jsxRuntime.jsxs(styles.ThemeProvider, { theme: resolvedTheme, children: [
-    !disableCssBaseline && /* @__PURE__ */ jsxRuntime.jsx(CssBaseline__default.default, {}),
+    !disableCssBaseline && /* @__PURE__ */ jsxRuntime.jsx(material.CssBaseline, {}),
     children
   ] });
 };
-function EmotionRegistry({ children }) {
-  const [{ cache, flush }] = React__namespace.useState(() => {
-    const c = createCache__default.default({ key: "css", prepend: true });
-    c.compat = true;
-    const prevInsert = c.insert.bind(c);
-    let inserted = [];
-    c.insert = (...args) => {
-      const serialized = args[1];
-      if (c.inserted[serialized.name] === void 0) {
-        inserted.push(serialized.name);
-      }
-      return prevInsert(...args);
-    };
-    return {
-      cache: c,
-      flush: () => {
-        const s = inserted;
-        inserted = [];
-        return s;
-      }
-    };
-  });
-  navigation.useServerInsertedHTML(() => {
-    const names = flush();
-    if (!names.length) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "style",
-      {
-        "data-emotion": `${cache.key} ${names.join(" ")}`,
-        dangerouslySetInnerHTML: { __html: names.map((n) => cache.inserted[n]).join("") }
-      }
-    );
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(react.CacheProvider, { value: cache, children });
-}
 exports.Accordion = Accordion;
+exports.Alert = Alert;
 exports.Article = Article;
 exports.AspectRatio = AspectRatio;
 exports.Avatar = Avatar;
 exports.BackToTop = BackToTop;
-exports.Badge = Badge;
+exports.Badge = Badge2;
 exports.BaseInput = BaseInput;
 exports.BaseSelectInput = BaseSelectInput;
 exports.Box = Box2;
@@ -10900,25 +12024,28 @@ exports.Breadcrumbs = Breadcrumbs;
 exports.Button = Button;
 exports.Card = Card;
 exports.Carousel = Carousel;
+exports.CartButton = CartButton;
 exports.CartDrawer = CartDrawer;
+exports.CategoryCard = CategoryCard;
 exports.CheckboxInput = CheckboxInput;
 exports.CommandPalette = CommandPalette;
 exports.CompareTool = CompareTool;
 exports.Container = Container;
 exports.ContextMenu = ContextMenu;
 exports.CookieConsent = CookieConsent;
+exports.CountdownTimer = CountdownTimer;
 exports.CountryFlag = CountryFlag;
 exports.CouponInput = CouponInput;
 exports.DateTimePicker = DateTimePicker;
 exports.EmailInput = EmailInput;
-exports.EmotionRegistry = EmotionRegistry;
+exports.EmptyState = EmptyState;
 exports.FaqItem = FaqItem;
 exports.FaqSection = FaqSection;
 exports.FeatureGrid = FeatureGrid;
 exports.FeatureItem = FeatureItem2;
 exports.FileInput = FileInput;
 exports.FilterSidebar = FilterSidebar;
-exports.Footer = Footer6;
+exports.Footer = Footer7;
 exports.Lightbox = Lightbox;
 exports.List = List3;
 exports.LogoCloud = LogoCloud;
@@ -10937,6 +12064,7 @@ exports.PaginationButton = PaginationButton;
 exports.PaginationEllipsis = PaginationEllipsis;
 exports.Partners = Partners;
 exports.PasswordInput = PasswordInput;
+exports.PaymentMethodSelector = PaymentMethodSelector;
 exports.PhoneInput = PhoneInput;
 exports.PostCard = PostCard;
 exports.PostCardImage = PostCardImage;
@@ -10947,6 +12075,7 @@ exports.PricingSection = PricingSection;
 exports.ProcessSection = ProcessSection;
 exports.ProcessStep = ProcessStep;
 exports.ProductCard = ProductCard;
+exports.ProductCardHorizontal = ProductCardHorizontal;
 exports.ProductGallery = ProductGallery;
 exports.ProgressBar = ProgressBar;
 exports.ProgressCircle = ProgressCircle;
@@ -10955,11 +12084,16 @@ exports.Prose = Prose;
 exports.QuantitySelector = QuantitySelector;
 exports.RangeSlider = RangeSlider;
 exports.Rating = Rating;
+exports.RelatedProducts = RelatedProducts;
+exports.ReviewSection = ReviewSection;
+exports.SaleBadge = SaleBadge;
 exports.SearchInput = SearchInput;
 exports.Section = Section;
 exports.SectionHeading = SectionHeading;
 exports.SelectInput = SelectInput;
+exports.ShippingSelector = ShippingSelector;
 exports.Skeleton = Skeleton;
+exports.SortBar = SortBar;
 exports.Spinner = Spinner3;
 exports.StatCard = StatCard;
 exports.StatsSection = StatsSection;
@@ -10973,8 +12107,11 @@ exports.TestimonialsSection = TestimonialsSection;
 exports.TextInput = TextInput;
 exports.TextareaInput = TextareaInput;
 exports.Timeline = Timeline;
+exports.VariantSelector = VariantSelector;
 exports.VideoPlayer = VideoPlayer;
+exports.WishlistButton = WishlistButton;
 exports.accordionVariants = accordionVariants;
+exports.alertSeverities = alertSeverities;
 exports.aspectRatioPresets = aspectRatioPresets;
 exports.avatarColors = avatarColors;
 exports.avatarSizes = avatarSizes;
@@ -10984,6 +12121,7 @@ exports.badgeVariants = badgeVariants;
 exports.cardPaddings = cardPaddings;
 exports.cardRoundeds = cardRoundeds;
 exports.cardVariants = cardVariants;
+exports.countdownTimerVariants = countdownTimerVariants;
 exports.createMyTheme = createMyTheme;
 exports.dateTimePickerModes = dateTimePickerModes;
 exports.defaultCookieCategories = defaultCookieCategories;
@@ -11006,6 +12144,8 @@ exports.progressCircleSizes = progressCircleSizes;
 exports.progressCircleVariants = progressCircleVariants;
 exports.promoStripVariants = promoStripVariants;
 exports.rangeSliderSizes = rangeSliderSizes;
+exports.relatedProductsLayouts = relatedProductsLayouts;
+exports.saleBadgeVariants = saleBadgeVariants;
 exports.sectionHeadingAligns = sectionHeadingAligns;
 exports.skeletonVariants = skeletonVariants;
 exports.spinnerColors = spinnerColors;
@@ -11022,5 +12162,6 @@ exports.themeHighContrast = themeHighContrast;
 exports.themeLight = themeLight;
 exports.timelineItemStatuses = timelineItemStatuses;
 exports.timelineVariants = timelineVariants;
+exports.variantSelectorModes = variantSelectorModes;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map