@szymonpiatek/designsystem 0.0.4 → 0.0.6

package/dist/index.cjs

@@ -1,22 +1,66 @@
 'use strict';
 
-var react$1 = require('react');
+var react = require('react');
 var styles = require('@mui/material/styles');
-var react = require('@emotion/react');
+var CircularProgress = require('@mui/material/CircularProgress');
 var jsxRuntime = require('react/jsx-runtime');
+var ExpandMoreIcon = require('@mui/icons-material/ExpandMore');
+var FileUploadIcon = require('@mui/icons-material/FileUpload');
+var CloudUploadMuiIcon = require('@mui/icons-material/CloudUpload');
+var InsertDriveFileIcon = require('@mui/icons-material/InsertDriveFile');
+var DeleteOutlinedIcon = require('@mui/icons-material/DeleteOutlined');
+var CloseIcon = require('@mui/icons-material/Close');
+var CheckIcon = require('@mui/icons-material/Check');
+var VisibilityIcon = require('@mui/icons-material/Visibility');
+var VisibilityOffIcon = require('@mui/icons-material/VisibilityOff');
+var SearchMuiIcon = require('@mui/icons-material/Search');
 var libphonenumberJs = require('libphonenumber-js');
+var CalendarMonthIcon = require('@mui/icons-material/CalendarMonth');
+var AccessTimeIcon = require('@mui/icons-material/AccessTime');
+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$1 = require('@emotion/react');
+var ArticleIcon = require('@mui/icons-material/Article');
+var CheckCircleOutlinedIcon = require('@mui/icons-material/CheckCircleOutlined');
+var HighlightOffIcon = require('@mui/icons-material/HighlightOff');
 var reactDom = require('react-dom');
+var KeyboardDoubleArrowLeftIcon = require('@mui/icons-material/KeyboardDoubleArrowLeft');
+var KeyboardDoubleArrowRightIcon = require('@mui/icons-material/KeyboardDoubleArrowRight');
+var ArrowForwardIcon = require('@mui/icons-material/ArrowForward');
+var MenuIcon = require('@mui/icons-material/Menu');
 var CssBaseline = require('@mui/material/CssBaseline');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
+var CircularProgress__default = /*#__PURE__*/_interopDefault(CircularProgress);
+var ExpandMoreIcon__default = /*#__PURE__*/_interopDefault(ExpandMoreIcon);
+var FileUploadIcon__default = /*#__PURE__*/_interopDefault(FileUploadIcon);
+var CloudUploadMuiIcon__default = /*#__PURE__*/_interopDefault(CloudUploadMuiIcon);
+var InsertDriveFileIcon__default = /*#__PURE__*/_interopDefault(InsertDriveFileIcon);
+var DeleteOutlinedIcon__default = /*#__PURE__*/_interopDefault(DeleteOutlinedIcon);
+var CloseIcon__default = /*#__PURE__*/_interopDefault(CloseIcon);
+var CheckIcon__default = /*#__PURE__*/_interopDefault(CheckIcon);
+var VisibilityIcon__default = /*#__PURE__*/_interopDefault(VisibilityIcon);
+var VisibilityOffIcon__default = /*#__PURE__*/_interopDefault(VisibilityOffIcon);
+var SearchMuiIcon__default = /*#__PURE__*/_interopDefault(SearchMuiIcon);
+var CalendarMonthIcon__default = /*#__PURE__*/_interopDefault(CalendarMonthIcon);
+var AccessTimeIcon__default = /*#__PURE__*/_interopDefault(AccessTimeIcon);
+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 ArticleIcon__default = /*#__PURE__*/_interopDefault(ArticleIcon);
+var CheckCircleOutlinedIcon__default = /*#__PURE__*/_interopDefault(CheckCircleOutlinedIcon);
+var HighlightOffIcon__default = /*#__PURE__*/_interopDefault(HighlightOffIcon);
+var KeyboardDoubleArrowLeftIcon__default = /*#__PURE__*/_interopDefault(KeyboardDoubleArrowLeftIcon);
+var KeyboardDoubleArrowRightIcon__default = /*#__PURE__*/_interopDefault(KeyboardDoubleArrowRightIcon);
+var ArrowForwardIcon__default = /*#__PURE__*/_interopDefault(ArrowForwardIcon);
+var MenuIcon__default = /*#__PURE__*/_interopDefault(MenuIcon);
 var CssBaseline__default = /*#__PURE__*/_interopDefault(CssBaseline);
 
 // src/components/atoms/buttons/Button/Button.tsx
-var spin = react.keyframes`
-  from { transform: rotate(0deg); }
-  to   { transform: rotate(360deg); }
-`;
 var sizeMap = {
   sm: { padding: "0.25rem 0.75rem", fontSize: "0.75rem", gap: "0.25rem" },
   md: { padding: "0.5rem 1.25rem", fontSize: "0.875rem", gap: "0.375rem" },
@@ -85,10 +129,9 @@ var IconSlot = styles.styled("span")({
   alignItems: "center"
 });
 var Spinner = styles.styled("span")({
-  display: "inline-flex",
-  animation: `${spin} 700ms linear infinite`
+  display: "inline-flex"
 });
-var Button = react$1.forwardRef(
+var Button = react.forwardRef(
   ({
     variant = "primary",
     size = "md",
@@ -118,21 +161,7 @@ var Button = react$1.forwardRef(
       "aria-label": ariaLabel,
       "aria-current": ariaCurrent,
       children: [
-        loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, { "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "svg",
-          {
-            width: "1em",
-            height: "1em",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: "2",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", strokeOpacity: "0.25" }),
-              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2a10 10 0 0 1 10 10" })
-            ]
-          }
-        ) }) : startIcon && /* @__PURE__ */ jsxRuntime.jsx(IconSlot, { children: startIcon }),
+        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 }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { children }),
         endIcon && /* @__PURE__ */ jsxRuntime.jsx(IconSlot, { children: endIcon })
       ]
@@ -185,21 +214,7 @@ var DropdownPanel = styles.styled("div")(({ theme }) => ({
   borderRadius: theme.shape.borderRadius,
   boxShadow: theme.shadows[4]
 }));
-var Chevron = () => /* @__PURE__ */ jsxRuntime.jsx(
-  "svg",
-  {
-    viewBox: "0 0 24 24",
-    width: "1em",
-    height: "1em",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: 2,
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    "aria-hidden": true,
-    children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "6 9 12 15 18 9" })
-  }
-);
+var Chevron = () => /* @__PURE__ */ jsxRuntime.jsx(ExpandMoreIcon__default.default, { "aria-hidden": true, sx: { fontSize: "1em" } });
 var inputColors = (theme, error) => ({
   borderColor: error ? theme.palette.error.main : theme.palette.divider,
   "&:hover:not(:focus-within):not([data-disabled])": {
@@ -260,7 +275,7 @@ var Adornment = styles.styled("span")(({ theme }) => ({
   color: theme.palette.text.secondary,
   flexShrink: 0
 }));
-var BaseInput = react$1.forwardRef(
+var BaseInput = react.forwardRef(
   ({
     label,
     helperText,
@@ -273,7 +288,7 @@ var BaseInput = react$1.forwardRef(
     id,
     ...rest
   }, ref) => {
-    const autoId = react$1.useId();
+    const autoId = react.useId();
     const inputId = id ?? autoId;
     return /* @__PURE__ */ jsxRuntime.jsxs(Root, { $fullWidth: fullWidth, children: [
       label && /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: inputId, error, size, children: label }),
@@ -384,7 +399,7 @@ var Root2 = styles.styled("span")(({ $disabled }) => ({
   flexDirection: "column",
   cursor: $disabled ? "not-allowed" : "pointer"
 }));
-var CheckboxInput = react$1.forwardRef(
+var CheckboxInput = react.forwardRef(
   ({
     label,
     helperText,
@@ -395,10 +410,10 @@ var CheckboxInput = react$1.forwardRef(
     id,
     ...rest
   }, ref) => {
-    const autoId = react$1.useId();
+    const autoId = react.useId();
     const inputId = id ?? autoId;
-    const innerRef = react$1.useRef(null);
-    react$1.useEffect(() => {
+    const innerRef = react.useRef(null);
+    react.useEffect(() => {
       if (innerRef.current) {
         innerRef.current.indeterminate = indeterminate;
       }
@@ -432,99 +447,11 @@ var formatSize = (bytes) => {
   if (bytes < 1024 ** 2) return `${(bytes / 1024).toFixed(1)} KB`;
   return `${(bytes / 1024 ** 2).toFixed(1)} MB`;
 };
-var UploadArrowIcon = ({ size = 13 }) => /* @__PURE__ */ jsxRuntime.jsxs(
-  "svg",
-  {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: 2.5,
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    "aria-hidden": true,
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "17 8 12 3 7 8" }),
-      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "3", x2: "12", y2: "15" }),
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 15v4a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-4" })
-    ]
-  }
-);
-var CloudUploadIcon = ({ size }) => /* @__PURE__ */ jsxRuntime.jsxs(
-  "svg",
-  {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: 1.5,
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    "aria-hidden": true,
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "16 16 12 12 8 16" }),
-      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "12", x2: "12", y2: "21" }),
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3" })
-    ]
-  }
-);
-var FileDocIcon = ({ size }) => /* @__PURE__ */ jsxRuntime.jsxs(
-  "svg",
-  {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: 1.75,
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    "aria-hidden": true,
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
-      /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "14 2 14 8 20 8" })
-    ]
-  }
-);
-var TrashIcon = ({ size = 12 }) => /* @__PURE__ */ jsxRuntime.jsxs(
-  "svg",
-  {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: 2.5,
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    "aria-hidden": true,
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "3 6 5 6 21 6" }),
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" }),
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 11v6M14 11v6" }),
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" })
-    ]
-  }
-);
-var XIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(
-  "svg",
-  {
-    width: "11",
-    height: "11",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: 2.5,
-    strokeLinecap: "round",
-    "aria-hidden": true,
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-    ]
-  }
-);
+var UploadArrowIcon = ({ size = 13 }) => /* @__PURE__ */ jsxRuntime.jsx(FileUploadIcon__default.default, { "aria-hidden": true, style: { fontSize: size } });
+var CloudUploadIcon = ({ size }) => /* @__PURE__ */ jsxRuntime.jsx(CloudUploadMuiIcon__default.default, { "aria-hidden": true, style: { fontSize: size } });
+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 }) => ({
   display: $fullWidth ? "block" : "inline-block",
   width: $fullWidth ? "100%" : "auto"
@@ -916,7 +843,7 @@ var FileActionBtn = styles.styled("button")(({
     "&:disabled": { opacity: 0.5, cursor: "not-allowed" }
   };
 });
-var FileInput = react$1.forwardRef(
+var FileInput = react.forwardRef(
   ({
     label,
     helperText,
@@ -944,11 +871,11 @@ var FileInput = react$1.forwardRef(
     onChange,
     ...rest
   }, ref) => {
-    const autoId = react$1.useId();
+    const autoId = react.useId();
     const inputId = id ?? autoId;
-    const innerRef = react$1.useRef(null);
-    const [files, setFiles] = react$1.useState([]);
-    const [isDragging, setIsDragging] = react$1.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);
@@ -1205,7 +1132,7 @@ var filterEmailString = (value) => {
   const domain = value.slice(atIdx + 1).replace(/@/g, "").replace(/[^a-zA-Z0-9.-]/g, "");
   return `${local}@${domain}`;
 };
-var EmailInput = react$1.forwardRef(
+var EmailInput = react.forwardRef(
   ({ onKeyDown, onPaste, ...props }, ref) => {
     const handleKeyDown = (e) => {
       onKeyDown?.(e);
@@ -1347,13 +1274,13 @@ var BaseSelectInput = ({
   id
 }) => {
   const checkSelected = isSelected ?? ((option) => option.value === value);
-  const autoId = react$1.useId();
+  const autoId = react.useId();
   const inputId = id ?? autoId;
   const listboxId = `${inputId}-listbox`;
-  const [internalOpen, setInternalOpen] = react$1.useState(false);
+  const [internalOpen, setInternalOpen] = react.useState(false);
   const isOpen = controlledOpen ?? internalOpen;
-  const rootRef = react$1.useRef(null);
-  const close = react$1.useCallback(() => {
+  const rootRef = react.useRef(null);
+  const close = react.useCallback(() => {
     setInternalOpen(false);
     onOpenChange?.(false);
   }, [onOpenChange]);
@@ -1367,7 +1294,7 @@ var BaseSelectInput = ({
       onSelect?.(option, close);
     }
   };
-  react$1.useEffect(() => {
+  react.useEffect(() => {
     if (!isOpen) return;
     const handleMouseDown = (e) => {
       if (rootRef.current && !rootRef.current.contains(e.target)) {
@@ -1421,7 +1348,7 @@ var BaseSelectInput = ({
   ] });
 };
 BaseSelectInput.displayName = "BaseSelectInput";
-var NumberInput = react$1.forwardRef(
+var NumberInput = react.forwardRef(
   (props, ref) => /* @__PURE__ */ jsxRuntime.jsx(BaseInput, { ref, type: "number", ...props })
 );
 NumberInput.displayName = "NumberInput";
@@ -1462,21 +1389,7 @@ var CheckboxBox = styles.styled("span")(({ theme, $checked }) => ({
   flexShrink: 0,
   transition: "background-color 150ms ease, border-color 150ms ease"
 }));
-var CheckmarkIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
-  "svg",
-  {
-    viewBox: "0 0 24 24",
-    width: "0.65rem",
-    height: "0.65rem",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: 3,
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    "aria-hidden": true,
-    children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" })
-  }
-);
+var CheckmarkIcon = () => /* @__PURE__ */ jsxRuntime.jsx(CheckIcon__default.default, { "aria-hidden": true, style: { width: "0.65rem", height: "0.65rem" } });
 var renderTrigger = (value, options, placeholder) => {
   const MultiSelectTrigger = () => {
     if (value.length === 0) {
@@ -1537,45 +1450,11 @@ var ToggleButton = styles.styled("button")(({ theme }) => ({
     cursor: "not-allowed"
   }
 }));
-var EyeIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(
-  "svg",
-  {
-    viewBox: "0 0 24 24",
-    width: "1em",
-    height: "1em",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: 2,
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    "aria-hidden": true,
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }),
-      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "3" })
-    ]
-  }
-);
-var EyeOffIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(
-  "svg",
-  {
-    viewBox: "0 0 24 24",
-    width: "1em",
-    height: "1em",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: 2,
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    "aria-hidden": true,
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" }),
-      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "1", y1: "1", x2: "23", y2: "23" })
-    ]
-  }
-);
-var PasswordInput = react$1.forwardRef(
+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(
   ({ disabled, showPasswordLabel = "Poka\u017C has\u0142o", hidePasswordLabel = "Ukryj has\u0142o", ...props }, ref) => {
-    const [show, setShow] = react$1.useState(false);
+    const [show, setShow] = react.useState(false);
     return /* @__PURE__ */ jsxRuntime.jsx(
       BaseInput,
       {
@@ -1613,46 +1492,12 @@ var ClearButton = styles.styled("button")(({ theme }) => ({
     color: theme.palette.text.primary
   }
 }));
-var SearchIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(
-  "svg",
-  {
-    viewBox: "0 0 24 24",
-    width: "1em",
-    height: "1em",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: 2,
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    "aria-hidden": true,
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "8" }),
-      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
-    ]
-  }
-);
-var XIcon2 = () => /* @__PURE__ */ jsxRuntime.jsxs(
-  "svg",
-  {
-    viewBox: "0 0 24 24",
-    width: "1em",
-    height: "1em",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: 2,
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    "aria-hidden": true,
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-    ]
-  }
-);
-var SearchInput = react$1.forwardRef(
+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(
   ({ value, onChange, onClear, clearAriaLabel = "Wyczy\u015B\u0107", ...props }, forwardedRef) => {
-    const innerRef = react$1.useRef(null);
-    const attachRef = react$1.useCallback(
+    const innerRef = react.useRef(null);
+    const attachRef = react.useCallback(
       (el) => {
         innerRef.current = el;
         if (typeof forwardedRef === "function") forwardedRef(el);
@@ -1662,7 +1507,7 @@ var SearchInput = react$1.forwardRef(
       [forwardedRef]
     );
     const isControlled = value !== void 0;
-    const [localValue, setLocalValue] = react$1.useState("");
+    const [localValue, setLocalValue] = react.useState("");
     const hasValue = isControlled ? !!value : !!localValue;
     const handleChange = (e) => {
       if (!isControlled) setLocalValue(e.target.value);
@@ -1698,21 +1543,7 @@ var SearchInput = react$1.forwardRef(
   }
 );
 SearchInput.displayName = "SearchInput";
-var Checkmark = () => /* @__PURE__ */ jsxRuntime.jsx(
-  "svg",
-  {
-    viewBox: "0 0 24 24",
-    width: "1em",
-    height: "1em",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: 2.5,
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    "aria-hidden": true,
-    children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" })
-  }
-);
+var Checkmark = () => /* @__PURE__ */ jsxRuntime.jsx(CheckIcon__default.default, { "aria-hidden": true, sx: { fontSize: "1em" } });
 var renderOption2 = (selected) => {
   const SelectOption = (option) => /* @__PURE__ */ jsxRuntime.jsxs(
     "span",
@@ -1782,7 +1613,7 @@ var StyledTextarea = styles.styled("textarea")(({ theme, $size, $fullWidth, $err
     color: theme.palette.text.disabled
   }
 }));
-var TextareaInput = react$1.forwardRef(
+var TextareaInput = react.forwardRef(
   ({
     label,
     helperText,
@@ -1794,7 +1625,7 @@ var TextareaInput = react$1.forwardRef(
     id,
     ...rest
   }, ref) => {
-    const autoId = react$1.useId();
+    const autoId = react.useId();
     const inputId = id ?? autoId;
     return /* @__PURE__ */ jsxRuntime.jsxs(Root5, { $fullWidth: fullWidth, children: [
       label && /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: inputId, error, size, children: label }),
@@ -3572,7 +3403,7 @@ var EmptyMessage = styles.styled("p")(({ theme }) => ({
   fontSize: "0.875rem",
   color: theme.palette.text.secondary
 }));
-var PhoneInput = react$1.forwardRef(
+var PhoneInput = react.forwardRef(
   ({
     value,
     defaultValue = "",
@@ -3594,30 +3425,30 @@ var PhoneInput = react$1.forwardRef(
     countrySearchAriaLabel = "Szukaj kraju",
     digitsLabel = "cyfr"
   }, ref) => {
-    const autoId = react$1.useId();
+    const autoId = react.useId();
     const inputId = id ?? autoId;
     const listboxId = `${inputId}-listbox`;
-    const initialCountry = react$1.useMemo(
+    const initialCountry = react.useMemo(
       () => COUNTRIES.find((c) => c.flagCode === defaultCountry) ?? DEFAULT_COUNTRY,
       [defaultCountry]
     );
-    const [selectedCountry, setSelectedCountry] = react$1.useState(initialCountry);
-    const [isOpen, setIsOpen] = react$1.useState(false);
-    const [searchQuery, setSearchQuery] = react$1.useState("");
-    const [focused, setFocused] = react$1.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$1.useState(defaultValue);
+    const [internalValue, setInternalValue] = react.useState(defaultValue);
     const phoneValue = isControlled ? value : internalValue;
-    const rootRef = react$1.useRef(null);
-    const searchRef = react$1.useRef(null);
-    const filteredCountries = react$1.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$1.useCallback(() => {
+    const close = react.useCallback(() => {
       setIsOpen(false);
       setSearchQuery("");
     }, []);
@@ -3649,7 +3480,7 @@ var PhoneInput = react$1.forwardRef(
       if (e.ctrlKey || e.metaKey || e.altKey || e.key.length > 1) return;
       if (!/^\d$/.test(e.key)) e.preventDefault();
     };
-    react$1.useEffect(() => {
+    react.useEffect(() => {
       if (!isOpen) return;
       const handler = (e) => {
         if (rootRef.current && !rootRef.current.contains(e.target)) close();
@@ -3753,7 +3584,7 @@ var PhoneInput = react$1.forwardRef(
   }
 );
 PhoneInput.displayName = "PhoneInput";
-var TextInput = react$1.forwardRef(
+var TextInput = react.forwardRef(
   ({ type = "text", ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx(BaseInput, { ref, type, ...rest })
 );
 TextInput.displayName = "TextInput";
@@ -3844,7 +3675,7 @@ var LabelText2 = styles.styled("span")(
     fontFamily: theme.typography.fontFamily
   })
 );
-var SwitchInput = react$1.forwardRef(
+var SwitchInput = react.forwardRef(
   ({
     label,
     helperText,
@@ -3856,7 +3687,7 @@ var SwitchInput = react$1.forwardRef(
     id,
     ...rest
   }, ref) => {
-    const autoId = react$1.useId();
+    const autoId = react.useId();
     const inputId = id ?? autoId;
     return /* @__PURE__ */ jsxRuntime.jsxs(Root7, { $disabled: disabled, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Row2, { htmlFor: inputId, $placement: labelPlacement, children: [
@@ -3960,7 +3791,7 @@ function pct(value, min, max) {
 function clamp(v, min, max) {
   return Math.min(max, Math.max(min, v));
 }
-var RangeSlider = react$1.forwardRef(
+var RangeSlider = react.forwardRef(
   ({
     min = 0,
     max = 100,
@@ -3977,9 +3808,9 @@ var RangeSlider = react$1.forwardRef(
     id,
     ...props
   }, ref) => {
-    const autoId = react$1.useId();
+    const autoId = react.useId();
     const inputId = id ?? autoId;
-    const getInitial = react$1.useCallback(() => {
+    const getInitial = react.useCallback(() => {
       if (range) {
         const dv2 = defaultValue ?? controlledValue;
         return dv2 ?? [min, max];
@@ -3987,7 +3818,7 @@ var RangeSlider = react$1.forwardRef(
       const dv = defaultValue ?? controlledValue;
       return [dv ?? min, max];
     }, [range, defaultValue, controlledValue, min, max]);
-    const [internal, setInternal] = react$1.useState(getInitial);
+    const [internal, setInternal] = react.useState(getInitial);
     const [lo, hi] = controlledValue !== void 0 ? range ? controlledValue : [controlledValue, max] : internal;
     const emit = (next) => {
       setInternal(next);
@@ -4361,135 +4192,27 @@ var ActionBtn = styles.styled("button")(({ theme, $primary }) => ({
   "&:focus-visible": { outline: `2px solid ${theme.palette.primary.main}`, outlineOffset: "1px" }
 }));
 function IconCalendar() {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "svg",
-    {
-      width: "16",
-      height: "16",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: 1.75,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      "aria-hidden": "true",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2" }),
-        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "16", y1: "2", x2: "16", y2: "6" }),
-        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "8", y1: "2", x2: "8", y2: "6" }),
-        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "10", x2: "21", y2: "10" })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsx(CalendarMonthIcon__default.default, { "aria-hidden": "true", style: { fontSize: 16 } });
 }
 function IconClock() {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "svg",
-    {
-      width: "16",
-      height: "16",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: 1.75,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      "aria-hidden": "true",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
-        /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "12 6 12 12 16 14" })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsx(AccessTimeIcon__default.default, { "aria-hidden": "true", style: { fontSize: 16 } });
 }
 function IconChevronLeft() {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "svg",
-    {
-      width: "16",
-      height: "16",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      "aria-hidden": "true",
-      children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "15 18 9 12 15 6" })
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon__default.default, { "aria-hidden": "true", style: { fontSize: 16 } });
 }
 function IconChevronRight() {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "svg",
-    {
-      width: "16",
-      height: "16",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      "aria-hidden": "true",
-      children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "9 18 15 12 9 6" })
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon__default.default, { "aria-hidden": "true", style: { fontSize: 16 } });
 }
 function IconChevronUp() {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "svg",
-    {
-      width: "12",
-      height: "12",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: 2.5,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      "aria-hidden": "true",
-      children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "18 15 12 9 6 15" })
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsx(KeyboardArrowUpIcon__default.default, { "aria-hidden": "true", style: { fontSize: 12 } });
 }
 function IconChevronDown() {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "svg",
-    {
-      width: "12",
-      height: "12",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: 2.5,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      "aria-hidden": "true",
-      children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "6 9 12 15 18 9" })
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsx(KeyboardArrowDownIcon__default.default, { "aria-hidden": "true", style: { fontSize: 12 } });
 }
 function IconX() {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "svg",
-    {
-      width: "14",
-      height: "14",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      "aria-hidden": "true",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsx(CloseIcon__default.default, { "aria-hidden": "true", style: { fontSize: 14 } });
 }
-var DateTimePicker = react$1.forwardRef(
+var DateTimePicker = react.forwardRef(
   ({
     value,
     defaultValue,
@@ -4506,26 +4229,26 @@ var DateTimePicker = react$1.forwardRef(
     max,
     id
   }, ref) => {
-    const autoId = react$1.useId();
+    const autoId = react.useId();
     const inputId = id ?? autoId;
-    const rootRef = react$1.useRef(null);
+    const rootRef = react.useRef(null);
     const isControlled = value !== void 0;
-    const [internalDate, setInternalDate] = react$1.useState(defaultValue ?? null);
+    const [internalDate, setInternalDate] = react.useState(defaultValue ?? null);
     const selectedDate = isControlled ? value ?? null : internalDate;
-    const [open, setOpen] = react$1.useState(false);
+    const [open, setOpen] = react.useState(false);
     const today = /* @__PURE__ */ new Date();
-    const [viewYear, setViewYear] = react$1.useState(selectedDate?.getFullYear() ?? today.getFullYear());
-    const [viewMonth, setViewMonth] = react$1.useState(selectedDate?.getMonth() ?? today.getMonth());
-    const [hours, setHours] = react$1.useState(selectedDate?.getHours() ?? 12);
-    const [minutes, setMinutes] = react$1.useState(selectedDate?.getMinutes() ?? 0);
-    const [hourInput, setHourInput] = react$1.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$1.useState(
+    const [minInput, setMinInput] = react.useState(
       String(selectedDate?.getMinutes() ?? 0).padStart(2, "0")
     );
-    const [draftDate, setDraftDate] = react$1.useState(null);
-    const calendarDays = react$1.useMemo(
+    const [draftDate, setDraftDate] = react.useState(null);
+    const calendarDays = react.useMemo(
       () => buildCalendarDays(viewYear, viewMonth),
       [viewYear, viewMonth]
     );
@@ -4544,7 +4267,7 @@ var DateTimePicker = react$1.forwardRef(
       }
       setOpen(true);
     };
-    const commit = react$1.useCallback(
+    const commit = react.useCallback(
       (d) => {
         if (!isControlled) setInternalDate(d);
         onChange?.(d);
@@ -4619,7 +4342,7 @@ var DateTimePicker = react$1.forwardRef(
       setMinutes(val);
       setMinInput(String(val).padStart(2, "0"));
     };
-    react$1.useEffect(() => {
+    react.useEffect(() => {
       if (!open) return;
       const handler = (e) => {
         if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(false);
@@ -4627,7 +4350,7 @@ var DateTimePicker = react$1.forwardRef(
       document.addEventListener("mousedown", handler);
       return () => document.removeEventListener("mousedown", handler);
     }, [open]);
-    react$1.useEffect(() => {
+    react.useEffect(() => {
       if (!open) return;
       const handler = (e) => {
         if (e.key === "Escape") setOpen(false);
@@ -4956,7 +4679,7 @@ var StyledCard = styles.styled("div", {
   borderRadius: roundedMap[$rounded],
   ...getVariantStyles($variant, theme)
 }));
-var Card = react$1.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";
@@ -5145,7 +4868,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; }
 `;
@@ -5203,10 +4926,10 @@ var SIZE_MAP = {
   lg: "2rem",
   xl: "3rem"
 };
-var spin2 = 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 spin = react$1.keyframes`to { transform: rotate(360deg); }`;
+var fade = react$1.keyframes`0%,100%{opacity:.15} 50%{opacity:1}`;
+var scalePulse = react$1.keyframes`0%,100%{transform:scale(0.6);opacity:.4} 50%{transform:scale(1);opacity:1}`;
+var barAnim = react$1.keyframes`0%,100%{transform:scaleY(.4);opacity:.5} 50%{transform:scaleY(1);opacity:1}`;
 var Root10 = styles.styled("span", {
   shouldForwardProp: (p) => !["$size", "$color"].includes(p)
 })(({ theme, $size, $color }) => {
@@ -5226,7 +4949,7 @@ var Root10 = styles.styled("span", {
     flexShrink: 0
   };
 });
-var RingSvg = styles.styled("svg")({ animation: `${spin2} 700ms linear infinite` });
+var RingSvg = styles.styled("svg")({ animation: `${spin} 700ms linear infinite` });
 function Ring() {
   return /* @__PURE__ */ jsxRuntime.jsxs(RingSvg, { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
     /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "3", strokeOpacity: "0.25" }),
@@ -5307,7 +5030,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":
@@ -5465,7 +5188,7 @@ function ProgressCircle({
   children,
   ...props
 }) {
-  const gradientId = react$1.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;
@@ -5598,7 +5321,7 @@ var StyledBox = styles.styled("div")(
     return css;
   }
 );
-var Box2 = react$1.forwardRef(
+var Box2 = react.forwardRef(
   ({ direction = "row", wrap = "nowrap", gap = 0, cols, rows, children, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     StyledBox,
     {
@@ -5635,7 +5358,7 @@ var StyledContainer = styles.styled("div")(({ theme, $maxWidth }) => ({
     paddingRight: "2rem"
   }
 }));
-var Container = react$1.forwardRef(
+var Container = react.forwardRef(
   ({ maxWidth = "xl", children, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx(StyledContainer, { ref, $maxWidth: maxWidth, ...rest, children })
 );
 Container.displayName = "Container";
@@ -5647,8 +5370,11 @@ var StyledSection = styles.styled("section")(({ theme }) => ({
     paddingBottom: "3rem"
   }
 }));
-var Section = react$1.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" },
@@ -5804,16 +5530,11 @@ var getHeaderSpacingStyles = () => ({
 var spacingStyles = {
   "& > * + *": { marginTop: "1.5rem" }
 };
-var StyledMain = styles.styled("main")(({ theme }) => ({
-  ...getTypographyStyles(theme)
-}));
-var Main = react$1.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$1.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",
@@ -5823,7 +5544,7 @@ var StyledArticle = styles.styled("article")(({ theme }) => ({
   ...getHeaderSpacingStyles(),
   ...spacingStyles
 }));
-var Article = react$1.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 = {
   sm: "1rem",
@@ -5861,7 +5582,7 @@ var Meta = styles.styled("span")(({ theme }) => ({
   fontSize: "0.875rem",
   color: theme.palette.text.secondary
 }));
-var Rating = react$1.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);
@@ -5917,7 +5638,7 @@ var Root13 = styles.styled("div")({
     objectFit: "cover"
   }
 });
-var AspectRatio = react$1.forwardRef(
+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}%`;
@@ -5999,7 +5720,7 @@ function formatPrice(amount, currency, locale) {
 function calcDiscount(price, original) {
   return Math.round((1 - price / original) * 100);
 }
-var Price = react$1.forwardRef(
+var Price = react.forwardRef(
   ({
     price,
     originalPrice,
@@ -6091,7 +5812,7 @@ var Footer = styles.styled("div")({
   marginTop: "auto",
   paddingTop: "1rem"
 });
-var ProductCard = react$1.forwardRef(
+var ProductCard = react.forwardRef(
   ({
     name,
     imageUrl,
@@ -6159,28 +5880,7 @@ var Overlay = styles.styled("div")({
   background: "linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, transparent 50%)",
   pointerEvents: "none"
 });
-var FileTextIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(
-  "svg",
-  {
-    width: "32",
-    height: "32",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    "aria-hidden": "true",
-    style: { opacity: 0.3 },
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
-      /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "14 2 14 8 20 8" }),
-      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "16", y1: "13", x2: "8", y2: "13" }),
-      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "16", y1: "17", x2: "8", y2: "17" }),
-      /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "10 9 9 9 8 9" })
-    ]
-  }
-);
+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("/", " / ");
@@ -6193,7 +5893,7 @@ var PostCardImage = ({
   className,
   style
 }) => {
-  const [imgError, setImgError] = react$1.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) }),
@@ -6356,7 +6056,7 @@ var FeaturedImageWrapper = styles.styled("div")({
     aspectRatio: "auto"
   }
 });
-var PostCard = react$1.forwardRef(
+var PostCard = react.forwardRef(
   ({
     title,
     excerpt,
@@ -6501,50 +6201,13 @@ var CtaLink = styles.styled("a", {
 var CtaWrapper = styles.styled("div")({
   marginTop: "1.5rem"
 });
-function CheckIcon() {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "svg",
-    {
-      width: "16",
-      height: "16",
-      viewBox: "0 0 16 16",
-      fill: "none",
-      "aria-hidden": "true",
-      style: { flexShrink: 0 },
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "7", fill: "currentColor", fillOpacity: "0.15" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
-          {
-            d: "M5 8l2 2 4-4",
-            stroke: "currentColor",
-            strokeWidth: "1.5",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        )
-      ]
-    }
-  );
+function CheckIcon3() {
+  return /* @__PURE__ */ jsxRuntime.jsx(CheckCircleOutlinedIcon__default.default, { "aria-hidden": "true", style: { fontSize: 16, flexShrink: 0 } });
 }
 function XIcon3() {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "svg",
-    {
-      width: "16",
-      height: "16",
-      viewBox: "0 0 16 16",
-      fill: "none",
-      "aria-hidden": "true",
-      style: { flexShrink: 0 },
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "7", fill: "currentColor", fillOpacity: "0.10" }),
-        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 6l4 4M10 6l-4 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsx(HighlightOffIcon__default.default, { "aria-hidden": "true", style: { fontSize: 16, flexShrink: 0 } });
 }
-var PricingCard = react$1.forwardRef(
+var PricingCard = react.forwardRef(
   ({
     name,
     price,
@@ -6579,7 +6242,7 @@ var PricingCard = react$1.forwardRef(
         /* @__PURE__ */ jsxRuntime.jsx(FeatureList, { children: features.map((feature, i) => {
           const included = feature.included !== false;
           return /* @__PURE__ */ jsxRuntime.jsxs(FeatureItem, { $included: included, children: [
-            included ? /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(XIcon3, {}),
+            included ? /* @__PURE__ */ jsxRuntime.jsx(CheckIcon3, {}) : /* @__PURE__ */ jsxRuntime.jsx(XIcon3, {}),
             feature.text
           ] }, i);
         }) })
@@ -6618,7 +6281,7 @@ var Description3 = styles.styled("p")(({ theme }) => ({
   color: theme.palette.text.secondary,
   lineHeight: 1.5
 }));
-var StatCard = react$1.forwardRef(
+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: [
     /* @__PURE__ */ jsxRuntime.jsx(Value, { children: stat.value }),
     /* @__PURE__ */ jsxRuntime.jsx(Label3, { children: stat.label }),
@@ -6680,7 +6343,7 @@ var AuthorRole = styles.styled("p")(({ theme }) => ({
   fontSize: "0.8125rem",
   color: theme.palette.text.secondary
 }));
-var TestimonialCard = react$1.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: [
@@ -6740,7 +6403,7 @@ function getInitials(member) {
   }
   return member.name.split(" ").filter(Boolean).slice(0, 2).map((part) => part[0]).join("").toUpperCase();
 }
-var TeamMemberCard = react$1.forwardRef(
+var TeamMemberCard = react.forwardRef(
   ({ member, cardVariant = "default", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root19, { 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: [
@@ -6861,7 +6524,7 @@ var ValueCell = styles.styled("td", {
   fontWeight: $highlight ? 700 : 400,
   backgroundColor: $highlight ? theme.palette.mode === "dark" ? "rgba(99,102,241,0.08)" : "rgba(99,102,241,0.06)" : "transparent"
 }));
-var BoolIcon = ({ value }) => /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-label": value ? "Tak" : "Nie", style: { fontSize: "1.125rem" }, children: value ? "\u2713" : "\u2717" });
+var BoolIcon = ({ value }) => /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-label": value ? "Tak" : "Nie", style: { display: "inline-flex", fontSize: "1.125rem" }, children: value ? /* @__PURE__ */ jsxRuntime.jsx(CheckIcon__default.default, {}) : /* @__PURE__ */ jsxRuntime.jsx(CloseIcon__default.default, {}) });
 function formatValue(v) {
   if (typeof v === "boolean") return /* @__PURE__ */ jsxRuntime.jsx(BoolIcon, { value: v });
   return String(v);
@@ -6922,7 +6585,7 @@ function CompareTool({
     }) })
   ] }) });
 }
-var spin3 = styles.keyframes`to { transform: rotate(360deg); }`;
+var spin2 = styles.keyframes`to { transform: rotate(360deg); }`;
 var Root20 = styles.styled("div")({
   display: "flex",
   flexDirection: "column",
@@ -6996,7 +6659,7 @@ var Spinner4 = styles.styled("span")({
   border: "2px solid rgba(255,255,255,0.3)",
   borderTopColor: "#fff",
   borderRadius: "50%",
-  animation: `${spin3} 600ms linear infinite`,
+  animation: `${spin2} 600ms linear infinite`,
   verticalAlign: "middle"
 });
 var Message = styles.styled("p", {
@@ -7059,7 +6722,7 @@ function CouponInput({
   successMessage,
   className
 }) {
-  const id = react$1.useId();
+  const id = react.useId();
   const errorId = `${id}-error`;
   const successId = `${id}-success`;
   const isDisabled = disabled || loading;
@@ -7147,9 +6810,9 @@ var ThumbnailButton = styles.styled("button")(({ theme, $active }) => ({
 var ThumbnailImage = styles.styled("img")({
   objectFit: "cover"
 });
-var ProductGallery = react$1.forwardRef(
+var ProductGallery = react.forwardRef(
   ({ images, selectedIndex, onSelect, ...props }, ref) => {
-    const [internalIndex, setInternalIndex] = react$1.useState(0);
+    const [internalIndex, setInternalIndex] = react.useState(0);
     const activeIndex = selectedIndex ?? internalIndex;
     const activeImage = images[activeIndex] ?? images[0];
     const handleSelect = (index) => {
@@ -7181,7 +6844,8 @@ var Root22 = styles.styled("div")(({ theme, $variant }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
-  gap: "1rem",
+  flexWrap: "wrap",
+  gap: "0 1rem",
   width: "100%",
   padding: "0.75rem 1rem",
   fontFamily: theme.typography.fontFamily,
@@ -7195,7 +6859,7 @@ var Link = styles.styled("a")(({ theme }) => ({
   textDecoration: "underline",
   textUnderlineOffset: "0.2em"
 }));
-var PromoStrip = react$1.forwardRef(
+var PromoStrip = react.forwardRef(
   ({ message, actionLabel, href, variant = "info", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root22, { ref, $variant: variant, ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { children: message }),
     actionLabel && href && /* @__PURE__ */ jsxRuntime.jsx(Link, { href, children: actionLabel })
@@ -7235,7 +6899,7 @@ var Value2 = styles.styled("span")(({ theme }) => ({
   borderRight: `1px solid ${theme.palette.divider}`,
   fontWeight: 600
 }));
-var QuantitySelector = react$1.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);
@@ -7323,7 +6987,7 @@ var Dot2 = styles.styled("span", {
     flexShrink: 0
   };
 });
-var StockStatus = react$1.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);
@@ -7366,7 +7030,7 @@ var Trigger2 = styles.styled("button")(({ theme }) => ({
     borderRadius: "2px"
   }
 }));
-var ChevronIcon2 = styles.styled("svg", {
+var ChevronIcon2 = styles.styled(ExpandMoreIcon__default.default, {
   shouldForwardProp: (prop) => prop !== "$open"
 })(({ $open }) => ({
   width: "1.25rem",
@@ -7386,24 +7050,13 @@ var PanelInner = styles.styled("p")(({ theme }) => ({
   fontSize: "0.9375rem",
   lineHeight: 1.7
 }));
-var FaqItem = react$1.forwardRef(
+var FaqItem = react.forwardRef(
   ({ item, defaultOpen = false, ...props }, ref) => {
-    const [open, setOpen] = react$1.useState(defaultOpen);
+    const [open, setOpen] = react.useState(defaultOpen);
     return /* @__PURE__ */ jsxRuntime.jsxs(Root25, { 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,
-            viewBox: "0 0 24 24",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: 2,
-            "aria-hidden": "true",
-            children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
-          }
-        )
+        /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon2, { $open: open, "aria-hidden": "true" })
       ] }),
       open && /* @__PURE__ */ jsxRuntime.jsx(Panel, { role: "region", children: /* @__PURE__ */ jsxRuntime.jsx(PanelInner, { children: item.answer }) })
     ] });
@@ -7455,7 +7108,7 @@ var Description4 = styles.styled("p")(({ theme }) => ({
   color: theme.palette.text.secondary,
   lineHeight: 1.6
 }));
-var FeatureItem2 = react$1.forwardRef(
+var FeatureItem2 = react.forwardRef(
   ({ feature, cardVariant = "default", layout = "card", ...props }, ref) => {
     if (layout === "icon-left") {
       return /* @__PURE__ */ jsxRuntime.jsxs(IconLeftRoot, { ref, ...props, children: [
@@ -7523,7 +7176,7 @@ var Description5 = styles.styled("p")(({ theme }) => ({
   lineHeight: 1.6,
   maxWidth: "18rem"
 }));
-var ProcessStep = react$1.forwardRef(
+var ProcessStep = react.forwardRef(
   ({ step, title, description, icon, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root26, { 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 }),
@@ -7607,7 +7260,7 @@ function renderLogo(logo, monochrome, logoHeight) {
     }
   );
 }
-var LogoTile = react$1.forwardRef(
+var LogoTile = react.forwardRef(
   ({ logo, variant = "plain", monochrome = true, logoHeight = 40, ...props }, ref) => {
     const content = renderLogo(logo, monochrome, logoHeight);
     if (logo.href) {
@@ -7742,23 +7395,7 @@ var Description6 = styles.styled("div")(({ theme }) => ({
 }));
 function StatusIcon({ status }) {
   if (status === "error") {
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "svg",
-      {
-        width: "10",
-        height: "10",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        strokeWidth: 3,
-        strokeLinecap: "round",
-        "aria-hidden": "true",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-          /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-        ]
-      }
-    );
+    return /* @__PURE__ */ jsxRuntime.jsx(CloseIcon__default.default, { "aria-hidden": "true", style: { fontSize: 10 } });
   }
   return null;
 }
@@ -7780,7 +7417,7 @@ function TimelineItemComponent({
     ] })
   ] });
 }
-var Timeline = react$1.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(
@@ -7886,23 +7523,23 @@ function Carousel({
   loop = true,
   className
 }) {
-  const [index, setIndex] = react$1.useState(0);
-  const timerRef = react$1.useRef(null);
+  const [index, setIndex] = react.useState(0);
+  const timerRef = react.useRef(null);
   const count = slides.length;
-  const prev = react$1.useCallback(() => {
+  const prev = react.useCallback(() => {
     setIndex((i) => loop ? (i - 1 + count) % count : Math.max(0, i - 1));
   }, [count, loop]);
-  const next = react$1.useCallback(() => {
+  const next = react.useCallback(() => {
     setIndex((i) => loop ? (i + 1) % count : Math.min(count - 1, i + 1));
   }, [count, loop]);
-  react$1.useEffect(() => {
+  react.useEffect(() => {
     if (!autoPlay) return;
     timerRef.current = setInterval(next, autoPlayInterval);
     return () => {
       if (timerRef.current) clearInterval(timerRef.current);
     };
   }, [autoPlay, autoPlayInterval, next]);
-  react$1.useEffect(() => {
+  react.useEffect(() => {
     const handleKey = (e) => {
       if (e.key === "ArrowLeft") prev();
       if (e.key === "ArrowRight") next();
@@ -7931,20 +7568,7 @@ function Carousel({
             "aria-label": "Poprzedni slajd",
             onClick: prev,
             disabled: !loop && index === 0,
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              "svg",
-              {
-                width: "16",
-                height: "16",
-                viewBox: "0 0 24 24",
-                fill: "none",
-                stroke: "currentColor",
-                strokeWidth: 2.5,
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "15 18 9 12 15 6" })
-              }
-            )
+            children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon__default.default, { "aria-hidden": true, style: { fontSize: 16 } })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -7954,20 +7578,7 @@ function Carousel({
             "aria-label": "Nast\u0119pny slajd",
             onClick: next,
             disabled: !loop && index === count - 1,
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              "svg",
-              {
-                width: "16",
-                height: "16",
-                viewBox: "0 0 24 24",
-                fill: "none",
-                stroke: "currentColor",
-                strokeWidth: 2.5,
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "9 18 15 12 9 6" })
-              }
-            )
+            children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon__default.default, { "aria-hidden": true, style: { fontSize: 16 } })
           }
         )
       ] })
@@ -8049,8 +7660,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 }) => ({
@@ -8193,19 +7804,19 @@ var Counter = styles.styled("span")({
   pointerEvents: "none"
 });
 function Lightbox({ images, columns = 3, gap = 8, className }) {
-  const [activeIndex, setActiveIndex] = react$1.useState(null);
+  const [activeIndex, setActiveIndex] = react.useState(null);
   const isOpen = activeIndex !== null;
   const count = images.length;
-  const close = react$1.useCallback(() => setActiveIndex(null), []);
-  const prev = react$1.useCallback(
+  const close = react.useCallback(() => setActiveIndex(null), []);
+  const prev = react.useCallback(
     () => setActiveIndex((i) => i === null ? null : (i - 1 + count) % count),
     [count]
   );
-  const next = react$1.useCallback(
+  const next = react.useCallback(
     () => setActiveIndex((i) => i === null ? null : (i + 1) % count),
     [count]
   );
-  react$1.useEffect(() => {
+  react.useEffect(() => {
     if (!isOpen) return;
     const handler = (e) => {
       if (e.key === "Escape") close();
@@ -8239,22 +7850,7 @@ function Lightbox({ images, columns = 3, gap = 8, className }) {
           " / ",
           count
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { "aria-label": "Zamknij", onClick: close, children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "svg",
-          {
-            width: "18",
-            height: "18",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: 2.5,
-            strokeLinecap: "round",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-              /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-            ]
-          }
-        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { "aria-label": "Zamknij", onClick: close, children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon__default.default, { "aria-hidden": true, style: { fontSize: 18 } }) }),
         /* @__PURE__ */ jsxRuntime.jsx(
           LightboxImage,
           {
@@ -8275,20 +7871,7 @@ function Lightbox({ images, columns = 3, gap = 8, className }) {
                 e.stopPropagation();
                 prev();
               },
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                "svg",
-                {
-                  width: "20",
-                  height: "20",
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  stroke: "currentColor",
-                  strokeWidth: 2.5,
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "15 18 9 12 15 6" })
-                }
-              )
+              children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon__default.default, { "aria-hidden": true, style: { fontSize: 20 } })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -8300,20 +7883,7 @@ function Lightbox({ images, columns = 3, gap = 8, className }) {
                 e.stopPropagation();
                 next();
               },
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                "svg",
-                {
-                  width: "20",
-                  height: "20",
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  stroke: "currentColor",
-                  strokeWidth: 2.5,
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "9 18 15 12 9 6" })
-                }
-              )
+              children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon__default.default, { "aria-hidden": true, style: { fontSize: 20 } })
             }
           )
         ] })
@@ -8350,7 +7920,7 @@ var Current2 = styles.styled("span")(({ theme }) => ({
 var Separator2 = styles.styled("span")(({ theme }) => ({
   color: theme.palette.text.disabled
 }));
-var Breadcrumbs = react$1.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: [
@@ -8404,7 +7974,7 @@ var StyledButton2 = styles.styled("button")(({ theme, $isActive, $size }) => ({
     pointerEvents: "none"
   }
 }));
-var PaginationButton = react$1.forwardRef(
+var PaginationButton = react.forwardRef(
   ({ onClick, isActive = false, disabled = false, size = "md", children, "aria-label": ariaLabel }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     StyledButton2,
     {
@@ -8468,72 +8038,10 @@ function buildPageItems(currentPage, totalPages, siblingCount) {
   );
   return [1, DOTS, ...middleRange, DOTS, totalPages];
 }
-var ChevronLeft = () => /* @__PURE__ */ jsxRuntime.jsx(
-  "svg",
-  {
-    width: "1em",
-    height: "1em",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    "aria-hidden": "true",
-    children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "15 18 9 12 15 6" })
-  }
-);
-var ChevronRight = () => /* @__PURE__ */ jsxRuntime.jsx(
-  "svg",
-  {
-    width: "1em",
-    height: "1em",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    "aria-hidden": "true",
-    children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "9 18 15 12 9 6" })
-  }
-);
-var ChevronsLeft = () => /* @__PURE__ */ jsxRuntime.jsxs(
-  "svg",
-  {
-    width: "1em",
-    height: "1em",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    "aria-hidden": "true",
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "11 17 6 12 11 7" }),
-      /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "18 17 13 12 18 7" })
-    ]
-  }
-);
-var ChevronsRight = () => /* @__PURE__ */ jsxRuntime.jsxs(
-  "svg",
-  {
-    width: "1em",
-    height: "1em",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    "aria-hidden": "true",
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "13 17 18 12 13 7" }),
-      /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "6 17 11 12 6 7" })
-    ]
-  }
-);
+var ChevronLeft = () => /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon__default.default, { "aria-hidden": "true", sx: { fontSize: "1em" } });
+var ChevronRight = () => /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon__default.default, { "aria-hidden": "true", sx: { fontSize: "1em" } });
+var ChevronsLeft = () => /* @__PURE__ */ jsxRuntime.jsx(KeyboardDoubleArrowLeftIcon__default.default, { "aria-hidden": "true", sx: { fontSize: "1em" } });
+var ChevronsRight = () => /* @__PURE__ */ jsxRuntime.jsx(KeyboardDoubleArrowRightIcon__default.default, { "aria-hidden": "true", sx: { fontSize: "1em" } });
 var PaginationBar = ({
   currentPage,
   totalPages,
@@ -8664,7 +8172,7 @@ var Trigger3 = styles.styled("button", {
     outlineOffset: "-2px"
   }
 }));
-var ChevronIcon3 = styles.styled("svg", {
+var ChevronIcon3 = styles.styled(ExpandMoreIcon__default.default, {
   shouldForwardProp: (p) => p !== "$open"
 })(({ $open }) => ({
   width: "1.125rem",
@@ -8690,7 +8198,7 @@ var PanelContent = styles.styled("div")(({ theme }) => ({
   fontSize: "0.9375rem",
   lineHeight: 1.7
 }));
-var Accordion = react$1.forwardRef(
+var Accordion = react.forwardRef(
   ({
     items,
     defaultOpenKeys = [],
@@ -8700,7 +8208,7 @@ var Accordion = react$1.forwardRef(
     variant = "default",
     ...props
   }, ref) => {
-    const [internalKeys, setInternalKeys] = react$1.useState(defaultOpenKeys);
+    const [internalKeys, setInternalKeys] = react.useState(defaultOpenKeys);
     const openKeys = controlledKeys ?? internalKeys;
     const toggle = (key, disabled) => {
       if (disabled) return;
@@ -8732,18 +8240,7 @@ var Accordion = react$1.forwardRef(
             onClick: () => toggle(item.key, item.disabled),
             children: [
               item.header,
-              /* @__PURE__ */ jsxRuntime.jsx(
-                ChevronIcon3,
-                {
-                  $open: isOpen,
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  stroke: "currentColor",
-                  strokeWidth: 2,
-                  "aria-hidden": "true",
-                  children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
-                }
-              )
+              /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon3, { $open: isOpen, "aria-hidden": "true" })
             ]
           }
         ),
@@ -8754,8 +8251,8 @@ var Accordion = react$1.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 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" },
@@ -8815,9 +8312,9 @@ function BackToTop({
   label = "Wr\xF3\u0107 na g\xF3r\u0119",
   scrollTarget
 }) {
-  const [visible, setVisible] = react$1.useState(false);
-  const getTarget = react$1.useCallback(() => scrollTarget ? scrollTarget() : window, [scrollTarget]);
-  react$1.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;
@@ -8839,21 +8336,7 @@ function BackToTop({
       $visible: visible,
       $position: position,
       onClick: scrollToTop,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "svg",
-        {
-          width: "18",
-          height: "18",
-          viewBox: "0 0 24 24",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: 2.5,
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          "aria-hidden": "true",
-          children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "18 15 12 9 6 15" })
-        }
-      )
+      children: /* @__PURE__ */ jsxRuntime.jsx(KeyboardArrowUpIcon__default.default, { "aria-hidden": "true", style: { fontSize: 18 } })
     }
   );
 }
@@ -8929,12 +8412,12 @@ function clampToViewport(x, y, el) {
     y: Math.min(y, window.innerHeight - h - MENU_MARGIN)
   };
 }
-var ContextMenu = react$1.forwardRef(
+var ContextMenu = react.forwardRef(
   ({ items, children, disabled = false, ...props }, ref) => {
-    const [pos, setPos] = react$1.useState(null);
-    const menuRef = react$1.useRef(null);
-    const close = react$1.useCallback(() => setPos(null), []);
-    const handleContextMenu = react$1.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();
@@ -8942,7 +8425,7 @@ var ContextMenu = react$1.forwardRef(
       },
       [disabled]
     );
-    react$1.useEffect(() => {
+    react.useEffect(() => {
       if (!pos) return;
       if (menuRef.current) {
         const clamped = clampToViewport(pos.x, pos.y, menuRef.current);
@@ -9109,7 +8592,7 @@ var SuffixWrap = styles.styled("span")({
   display: "flex",
   alignItems: "center"
 });
-var List3 = react$1.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(
@@ -9175,7 +8658,7 @@ var ItemWrap = styles.styled("div", {
   flexShrink: 0,
   gap: $gap
 }));
-var Marquee = react$1.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: [
@@ -9188,8 +8671,8 @@ var Marquee = react$1.forwardRef(
 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",
@@ -9292,8 +8775,8 @@ function Modal({
   closeOnBackdrop = true,
   hideCloseButton = false
 }) {
-  const dialogRef = react$1.useRef(null);
-  react$1.useEffect(() => {
+  const dialogRef = react.useRef(null);
+  react.useEffect(() => {
     if (!open) return;
     const prev = document.body.style.overflow;
     document.body.style.overflow = "hidden";
@@ -9301,7 +8784,7 @@ function Modal({
       document.body.style.overflow = prev;
     };
   }, [open]);
-  react$1.useEffect(() => {
+  react.useEffect(() => {
     if (!open) return;
     const handleKey = (e) => {
       if (e.key === "Escape") onClose();
@@ -9309,7 +8792,7 @@ function Modal({
     document.addEventListener("keydown", handleKey);
     return () => document.removeEventListener("keydown", handleKey);
   }, [open, onClose]);
-  react$1.useEffect(() => {
+  react.useEffect(() => {
     if (open) dialogRef.current?.focus();
   }, [open]);
   if (!open) return null;
@@ -9327,22 +8810,7 @@ function Modal({
         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.jsxs(
-              "svg",
-              {
-                width: "16",
-                height: "16",
-                viewBox: "0 0 24 24",
-                fill: "none",
-                stroke: "currentColor",
-                strokeWidth: 2,
-                strokeLinecap: "round",
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-                ]
-              }
-            ) })
+            !hideCloseButton && /* @__PURE__ */ jsxRuntime.jsx(CloseButton2, { "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 })
@@ -9424,9 +8892,9 @@ var Panel2 = styles.styled("div")(({ theme }) => ({
   fontFamily: theme.typography.fontFamily,
   color: theme.palette.text.primary
 }));
-var Tabs = react$1.forwardRef(
+var Tabs = react.forwardRef(
   ({ tabs, defaultActiveKey, activeKey: controlledKey, onChange, variant = "underline", ...props }, ref) => {
-    const [internalKey, setInternalKey] = react$1.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);
@@ -9561,7 +9029,7 @@ var Footer4 = styles.styled("div")(({ theme }) => ({
   padding: "1rem 1.25rem",
   borderTop: `1px solid ${theme.palette.divider}`
 }));
-var CartDrawer = react$1.forwardRef(
+var CartDrawer = react.forwardRef(
   ({
     open,
     title = "Koszyk",
@@ -9686,7 +9154,7 @@ function renderOptions(options, selected, onToggle) {
     option.count !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { children: option.count })
   ] }, option.value));
 }
-var FilterSidebar = react$1.forwardRef(
+var FilterSidebar = react.forwardRef(
   ({
     categories = [],
     colors = [],
@@ -9830,7 +9298,7 @@ var TotalRow = styles.styled(Row5)(({ theme }) => ({
   fontSize: "1rem",
   fontWeight: 800
 }));
-var OrderSummary = react$1.forwardRef(
+var OrderSummary = react.forwardRef(
   ({
     title = "Podsumowanie zam\xF3wienia",
     items = [],
@@ -9899,7 +9367,7 @@ OrderSummary.displayName = "OrderSummary";
 var List4 = styles.styled("div")(({ $hasHeading }) => ({
   marginTop: $hasHeading ? "2.5rem" : 0
 }));
-var FaqSection = react$1.forwardRef(
+var FaqSection = react.forwardRef(
   ({
     title = "Najcz\u0119\u015Bciej zadawane pytania",
     description,
@@ -9938,7 +9406,7 @@ var Grid2 = styles.styled("div", {
     gridTemplateColumns: `repeat(${$columns}, minmax(0, 1fr))`
   }
 }));
-var FeatureGrid = react$1.forwardRef(
+var FeatureGrid = react.forwardRef(
   ({
     title,
     description,
@@ -9982,7 +9450,7 @@ var Grid3 = styles.styled("div", {
     gridTemplateColumns: `repeat(${$columns}, minmax(0, 1fr))`
   }
 }));
-var LogoCloud = react$1.forwardRef(
+var LogoCloud = react.forwardRef(
   ({
     title = "Zaufali nam",
     description,
@@ -10083,7 +9551,7 @@ var SuccessMessage = styles.styled("p")(({ theme }) => ({
   fontFamily: theme.typography.fontFamily,
   textAlign: "center"
 }));
-var NewsletterSection = react$1.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.",
@@ -10098,8 +9566,8 @@ var NewsletterSection = react$1.forwardRef(
     onSubmit,
     ...rest
   }, ref) => {
-    const [email, setEmail] = react$1.useState("");
-    const [submitted, setSubmitted] = react$1.useState(false);
+    const [email, setEmail] = react.useState("");
+    const [submitted, setSubmitted] = react.useState(false);
     const handleSubmit = (e) => {
       e.preventDefault();
       if (!email) return;
@@ -10211,21 +9679,12 @@ var Connector = styles.styled("div")(({ theme }) => ({
   }
 }));
 function ArrowIcon() {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(
-    "path",
-    {
-      d: "M5 12h14M13 6l6 6-6 6",
-      stroke: "currentColor",
-      strokeWidth: "1.5",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ) });
+  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: [
     (title || description) && /* @__PURE__ */ jsxRuntime.jsx(SectionHeading, { title: title ?? "", description, align: "center" }),
-    /* @__PURE__ */ jsxRuntime.jsx(StepsRow, { children: steps.map((step, i) => /* @__PURE__ */ jsxRuntime.jsxs(react$1.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,
         {
@@ -10253,7 +9712,7 @@ var Grid5 = styles.styled("div", {
     gridTemplateColumns: `repeat(${$columns}, minmax(0, 1fr))`
   }
 }));
-var StatsSection = react$1.forwardRef(
+var StatsSection = react.forwardRef(
   ({
     title,
     description,
@@ -10296,7 +9755,7 @@ var Grid6 = styles.styled("div", {
     gridTemplateColumns: `repeat(${$columns}, minmax(0, 1fr))`
   }
 }));
-var TeamSection = react$1.forwardRef(
+var TeamSection = react.forwardRef(
   ({
     title = "Nasz zesp\xF3\u0142",
     description,
@@ -10338,7 +9797,7 @@ var Grid7 = styles.styled("div", {
     gridTemplateColumns: `repeat(${$columns}, minmax(0, 1fr))`
   }
 }));
-var TestimonialsSection = react$1.forwardRef(
+var TestimonialsSection = react.forwardRef(
   ({
     title = "Co m\xF3wi\u0105 nasi klienci",
     description,
@@ -10365,11 +9824,11 @@ var TestimonialsSection = react$1.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); }
 `;
@@ -10404,7 +9863,7 @@ var SearchRow = styles.styled("div")(({ theme }) => ({
   borderBottom: `1px solid ${theme.palette.divider}`,
   flexShrink: 0
 }));
-var SearchIcon2 = styles.styled("div")(({ theme }) => ({
+var SearchIconWrap = styles.styled("div")(({ theme }) => ({
   flexShrink: 0,
   color: theme.palette.text.secondary,
   display: "flex"
@@ -10548,14 +10007,14 @@ function CommandPalette({
   emptyLabel = "Brak wynik\xF3w dla podanej frazy.",
   onSelect
 }) {
-  const id = react$1.useId();
-  const [query, setQuery] = react$1.useState("");
-  const [activeIndex, setActiveIndex] = react$1.useState(0);
-  const inputRef = react$1.useRef(null);
-  const activeItemRef = react$1.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$1.useCallback(
+  const handleSelect = react.useCallback(
     (item) => {
       item.onSelect?.();
       onSelect?.(item);
@@ -10563,20 +10022,20 @@ function CommandPalette({
     },
     [onSelect, onClose]
   );
-  react$1.useEffect(() => {
+  react.useEffect(() => {
     if (open) {
       setQuery("");
       setActiveIndex(0);
       setTimeout(() => inputRef.current?.focus(), 0);
     }
   }, [open]);
-  react$1.useEffect(() => {
+  react.useEffect(() => {
     setActiveIndex(0);
   }, [query]);
-  react$1.useEffect(() => {
+  react.useEffect(() => {
     activeItemRef.current?.scrollIntoView?.({ block: "nearest" });
   }, [activeIndex]);
-  react$1.useEffect(() => {
+  react.useEffect(() => {
     const handler = (e) => {
       if (!open) return;
       if (e.key === "Escape") {
@@ -10620,23 +10079,7 @@ function CommandPalette({
             "aria-describedby": `${id}-hint`,
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs(SearchRow, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(SearchIcon2, { "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsxs(
-                  "svg",
-                  {
-                    width: "18",
-                    height: "18",
-                    viewBox: "0 0 24 24",
-                    fill: "none",
-                    stroke: "currentColor",
-                    strokeWidth: "2",
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "8" }),
-                      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
-                    ]
-                  }
-                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx(SearchIconWrap, { "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(SearchMuiIcon__default.default, { style: { fontSize: 18 } }) }),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   SearchInput3,
                   {
@@ -10727,7 +10170,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); }
 `;
@@ -10900,9 +10343,9 @@ function CookieConsent({
   privacyPolicyLabel,
   privacyPolicyHref
 }) {
-  const id = react$1.useId();
-  const [expanded, setExpanded] = react$1.useState(false);
-  const [prefs, setPrefs] = react$1.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;
@@ -11249,69 +10692,7 @@ var MobileNavLink = styles.styled("a", {
   }
 }));
 function HamburgerIcon({ open }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: open ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "line",
-      {
-        x1: "4",
-        y1: "4",
-        x2: "20",
-        y2: "20",
-        stroke: "currentColor",
-        strokeWidth: "2",
-        strokeLinecap: "round"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "line",
-      {
-        x1: "20",
-        y1: "4",
-        x2: "4",
-        y2: "20",
-        stroke: "currentColor",
-        strokeWidth: "2",
-        strokeLinecap: "round"
-      }
-    )
-  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "line",
-      {
-        x1: "4",
-        y1: "7",
-        x2: "20",
-        y2: "7",
-        stroke: "currentColor",
-        strokeWidth: "2",
-        strokeLinecap: "round"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "line",
-      {
-        x1: "4",
-        y1: "12",
-        x2: "20",
-        y2: "12",
-        stroke: "currentColor",
-        strokeWidth: "2",
-        strokeLinecap: "round"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "line",
-      {
-        x1: "4",
-        y1: "17",
-        x2: "20",
-        y2: "17",
-        stroke: "currentColor",
-        strokeWidth: "2",
-        strokeLinecap: "round"
-      }
-    )
-  ] }) });
+  return open ? /* @__PURE__ */ jsxRuntime.jsx(CloseIcon__default.default, { "aria-hidden": "true", style: { fontSize: 24 } }) : /* @__PURE__ */ jsxRuntime.jsx(MenuIcon__default.default, { "aria-hidden": "true", style: { fontSize: 24 } });
 }
 function Navbar({
   logo,
@@ -11320,7 +10701,7 @@ function Navbar({
   sticky = false,
   variant = "filled"
 }) {
-  const [mobileOpen, setMobileOpen] = react$1.useState(false);
+  const [mobileOpen, setMobileOpen] = react.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs(Root35, { $sticky: sticky, $variant: variant, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Inner5, { children: [
       logo && /* @__PURE__ */ jsxRuntime.jsx(LogoSlot, { children: logo }),
@@ -11429,7 +10810,7 @@ var MyThemeProvider = ({
   disableCssBaseline = false,
   children
 }) => {
-  const resolvedTheme = react$1.useMemo(() => {
+  const resolvedTheme = react.useMemo(() => {
     if (theme) return theme;
     switch (mode) {
       case "dark":