@szymonpiatek/designsystem 0.0.13 → 0.0.15

package/dist/index.cjs

@@ -239,14 +239,32 @@ function getVariantStyles(variant, theme) {
   }
 }
 var StyledCard = styles.styled("div", {
-  shouldForwardProp: (prop) => !["$variant", "$padding", "$rounded"].includes(prop)
-})(({ theme, $variant, $padding, $rounded }) => ({
+  shouldForwardProp: (prop) => !["$variant", "$padding", "$rounded", "$hoverEffect"].includes(prop)
+})(({ theme, $variant, $padding, $rounded, $hoverEffect }) => ({
   padding: paddingMap[$padding],
   borderRadius: roundedMap[$rounded],
-  ...getVariantStyles($variant, theme)
+  ...getVariantStyles($variant, theme),
+  ...$hoverEffect && {
+    cursor: "pointer",
+    transition: "box-shadow 150ms ease, transform 150ms ease",
+    "&:hover": {
+      boxShadow: theme.shadows[4],
+      transform: "translateY(-2px)"
+    }
+  }
 }));
 var Card = react.forwardRef(
-  ({ variant = "default", padding = "md", rounded = "lg", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(StyledCard, { ref, $variant: variant, $padding: padding, $rounded: rounded, ...props })
+  ({ variant = "default", padding = "md", rounded = "lg", hoverEffect = false, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    StyledCard,
+    {
+      ref,
+      $variant: variant,
+      $padding: padding,
+      $rounded: rounded,
+      $hoverEffect: hoverEffect,
+      ...props
+    }
+  )
 );
 Card.displayName = "Card";
 var cardVariants = [
@@ -541,14 +559,16 @@ var Accordion = react.forwardRef(
 Accordion.displayName = "Accordion";
 var accordionVariants = ["default", "bordered", "separated"];
 var iconSizeMap = {
-  sm: 18,
-  md: 20,
-  lg: 24
+  sm: 16,
+  md: 18,
+  lg: 20,
+  xl: 24
 };
 var sizeMap3 = {
-  sm: { height: "2rem", paddingInline: "0.75rem", fontSize: "0.75rem", gap: "0.25rem" },
-  md: { height: "2.5rem", paddingInline: "1.25rem", fontSize: "0.875rem", gap: "0.375rem" },
-  lg: { height: "3rem", paddingInline: "1.75rem", fontSize: "1rem", gap: "0.5rem" }
+  sm: { height: "1.625rem", paddingInline: "0.5rem", fontSize: "0.625rem", gap: "0.125rem" },
+  md: { height: "2rem", paddingInline: "0.75rem", fontSize: "0.75rem", gap: "0.25rem" },
+  lg: { height: "2.5rem", paddingInline: "1.25rem", fontSize: "0.875rem", gap: "0.375rem" },
+  xl: { height: "3rem", paddingInline: "1.75rem", fontSize: "1rem", gap: "0.5rem" }
 };
 var variantStyles = {
   primary: (theme) => ({
@@ -679,25 +699,28 @@ var Button = react.forwardRef(
   )
 );
 Button.displayName = "Button";
-var StyledButton2 = styles.styled(Button)(({ theme }) => ({
+var StyledButton2 = styles.styled(Button)(({ theme, $variant }) => ({
   border: "none",
   borderRadius: "0.375rem",
-  color: theme.palette.text.secondary,
-  "&:hover:not(:disabled)": {
-    backgroundColor: theme.palette.action.hover,
-    color: theme.palette.text.primary
-  },
-  "&:active:not(:disabled)": {
-    filter: "none",
-    backgroundColor: theme.palette.action.selected
-  }
+  ...$variant === "ghost" || $variant === "text" ? {
+    color: theme.palette.text.secondary,
+    "&:hover:not(:disabled)": {
+      backgroundColor: theme.palette.action.hover,
+      color: theme.palette.text.primary
+    },
+    "&:active:not(:disabled)": {
+      filter: "none",
+      backgroundColor: theme.palette.action.selected
+    }
+  } : {}
 }));
 var CloseButton = react.forwardRef(
-  ({ "aria-label": ariaLabel = "Zamknij", size = "sm", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  ({ "aria-label": ariaLabel = "Zamknij", size = "sm", variant = "ghost", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     StyledButton2,
     {
       ref,
-      variant: "ghost",
+      variant,
+      $variant: variant,
       shape: "square",
       size,
       startIcon: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon__default.default, { "aria-hidden": true, style: { fontSize: "inherit" } }),
@@ -1065,7 +1088,7 @@ var ContextMenu = react.forwardRef(
   }
 );
 ContextMenu.displayName = "ContextMenu";
-var sizeMap4 = { sm: "1em", md: "1.25em", lg: "1.75em" };
+var sizeMap4 = { sm: "1em", md: "1.25em", lg: "1.75em", xl: "2.25em" };
 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",
@@ -1121,12 +1144,14 @@ EmptyState.displayName = "EmptyState";
 var inputSizeMap = {
   sm: { padding: "0.25rem 0.5rem", fontSize: "0.75rem", gap: "0.25rem" },
   md: { padding: "0.375rem 0.75rem", fontSize: "0.875rem", gap: "0.375rem" },
-  lg: { padding: "0.5rem 1rem", fontSize: "1rem", gap: "0.5rem" }
+  lg: { padding: "0.5rem 1rem", fontSize: "1rem", gap: "0.5rem" },
+  xl: { padding: "0.625rem 1.25rem", fontSize: "1.125rem", gap: "0.625rem" }
 };
 var inputHeightMap = {
   sm: "26px",
   md: "32px",
-  lg: "38.5px"
+  lg: "40px",
+  xl: "48px"
 };
 var DropdownPanel = styles.styled("div")(({ theme }) => ({
   position: "absolute",
@@ -1142,7 +1167,8 @@ var Chevron = () => /* @__PURE__ */ jsxRuntime.jsx(ExpandMoreIcon__default.defau
 var labelSizeMap = {
   sm: "0.625rem",
   md: "0.75rem",
-  lg: "0.875rem"
+  lg: "0.875rem",
+  xl: "1rem"
 };
 var StyledLabel = styles.styled("label")(({ theme, $error, $size }) => ({
   display: "block",
@@ -1152,7 +1178,16 @@ var StyledLabel = styles.styled("label")(({ theme, $error, $size }) => ({
   fontFamily: theme.typography.fontFamily,
   color: $error ? theme.palette.error.main : theme.palette.text.primary
 }));
-var Label = ({ error = false, size = "md", children, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(StyledLabel, { $error: error, $size: size, ...rest, children });
+var RequiredAsterisk = styles.styled("span")(({ theme }) => ({
+  marginLeft: "0.2em",
+  color: theme.palette.error.main,
+  fontWeight: 600,
+  lineHeight: 1
+}));
+var Label = ({ error = false, size = "md", required, children, ...rest }) => /* @__PURE__ */ jsxRuntime.jsxs(StyledLabel, { $error: error, $size: size, ...rest, children: [
+  children,
+  required && /* @__PURE__ */ jsxRuntime.jsx(RequiredAsterisk, { "aria-hidden": "true", children: "*" })
+] });
 Label.displayName = "Label";
 var StyledHelperText = styles.styled("p")(({ theme, $error }) => ({
   margin: "0.25rem 0 0",
@@ -1232,13 +1267,14 @@ var BaseInput = react.forwardRef(
     startAdornment,
     endAdornment,
     disabled = false,
+    required,
     id,
     ...rest
   }, ref) => {
     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 }),
+      label && /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: inputId, error, size, required, children: label }),
       /* @__PURE__ */ jsxRuntime.jsxs(
         InputWrapper,
         {
@@ -1249,7 +1285,7 @@ var BaseInput = react.forwardRef(
           "data-disabled": disabled || void 0,
           children: [
             startAdornment && /* @__PURE__ */ jsxRuntime.jsx(Adornment, { children: startAdornment }),
-            /* @__PURE__ */ jsxRuntime.jsx(StyledInput, { ref, id: inputId, disabled, ...rest }),
+            /* @__PURE__ */ jsxRuntime.jsx(StyledInput, { ref, id: inputId, disabled, required, ...rest }),
             endAdornment && /* @__PURE__ */ jsxRuntime.jsx(Adornment, { children: endAdornment })
           ]
         }
@@ -1262,12 +1298,14 @@ BaseInput.displayName = "BaseInput";
 var checkboxSizeMap = {
   sm: "14px",
   md: "16px",
-  lg: "20px"
+  lg: "20px",
+  xl: "24px"
 };
 var labelFontSizeMap = {
   sm: "0.75rem",
   md: "0.875rem",
-  lg: "1rem"
+  lg: "1rem",
+  xl: "1.125rem"
 };
 var checkedColor = (theme, error) => error ? theme.palette.error.main : theme.palette.primary.main;
 var Box = styles.styled("span")(({ theme, $size, $error, $disabled }) => ({
@@ -1341,6 +1379,12 @@ var LabelText = styles.styled("span")(
     userSelect: "none"
   })
 );
+var RequiredAsterisk2 = styles.styled("span")(({ theme }) => ({
+  marginLeft: "0.2em",
+  color: theme.palette.error.main,
+  fontWeight: 600,
+  lineHeight: 1
+}));
 var Root6 = styles.styled("span")(({ $disabled }) => ({
   display: "inline-flex",
   flexDirection: "column",
@@ -1354,6 +1398,7 @@ var CheckboxInput = react.forwardRef(
     size = "md",
     disabled = false,
     indeterminate = false,
+    required,
     id,
     ...rest
   }, ref) => {
@@ -1379,10 +1424,14 @@ var CheckboxInput = react.forwardRef(
             id: inputId,
             type: "checkbox",
             disabled,
+            required,
             ...rest
           }
         ) }),
-        label && /* @__PURE__ */ jsxRuntime.jsx(LabelText, { $size: size, $disabled: disabled, $error: error, children: label })
+        label && /* @__PURE__ */ jsxRuntime.jsxs(LabelText, { $size: size, $disabled: disabled, $error: error, children: [
+          label,
+          required && /* @__PURE__ */ jsxRuntime.jsx(RequiredAsterisk2, { "aria-hidden": "true", children: "*" })
+        ] })
       ] }),
       helperText && /* @__PURE__ */ jsxRuntime.jsx(HelperText, { error, children: helperText })
     ] });
@@ -1392,12 +1441,14 @@ CheckboxInput.displayName = "CheckboxInput";
 var radioSizeMap = {
   sm: "14px",
   md: "16px",
-  lg: "20px"
+  lg: "20px",
+  xl: "24px"
 };
 var labelFontSizeMap2 = {
   sm: "0.75rem",
   md: "0.875rem",
-  lg: "1rem"
+  lg: "1rem",
+  xl: "1.125rem"
 };
 var checkedColor2 = (theme, error) => error ? theme.palette.error.main : theme.palette.primary.main;
 var Circle = styles.styled("span")(({ theme, $size, $error, $disabled }) => ({
@@ -1451,19 +1502,28 @@ var LabelText2 = styles.styled("span")(
     userSelect: "none"
   })
 );
+var RequiredAsterisk3 = styles.styled("span")(({ theme }) => ({
+  marginLeft: "0.2em",
+  color: theme.palette.error.main,
+  fontWeight: 600,
+  lineHeight: 1
+}));
 var Root7 = styles.styled("span")(({ $disabled }) => ({
   display: "inline-flex",
   flexDirection: "column",
   cursor: $disabled ? "not-allowed" : "pointer"
 }));
 var RadioInput = react.forwardRef(
-  ({ label, helperText, error = false, size = "md", disabled = false, id, ...rest }, ref) => {
+  ({ label, helperText, error = false, size = "md", disabled = false, required, id, ...rest }, ref) => {
     const autoId = react.useId();
     const inputId = id ?? autoId;
     return /* @__PURE__ */ jsxRuntime.jsxs(Root7, { $disabled: disabled, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Row2, { htmlFor: inputId, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Circle, { $size: size, $error: error, $disabled: disabled, children: /* @__PURE__ */ jsxRuntime.jsx(HiddenInput2, { ref, id: inputId, type: "radio", disabled, ...rest }) }),
-        label && /* @__PURE__ */ jsxRuntime.jsx(LabelText2, { $size: size, $disabled: disabled, $error: error, children: label })
+        /* @__PURE__ */ jsxRuntime.jsx(Circle, { $size: size, $error: error, $disabled: disabled, children: /* @__PURE__ */ jsxRuntime.jsx(HiddenInput2, { ref, id: inputId, type: "radio", disabled, required, ...rest }) }),
+        label && /* @__PURE__ */ jsxRuntime.jsxs(LabelText2, { $size: size, $disabled: disabled, $error: error, children: [
+          label,
+          required && /* @__PURE__ */ jsxRuntime.jsx(RequiredAsterisk3, { "aria-hidden": "true", children: "*" })
+        ] })
       ] }),
       helperText && /* @__PURE__ */ jsxRuntime.jsx(HelperText, { error, children: helperText })
     ] });
@@ -1649,6 +1709,15 @@ var dropzoneSizes = {
     fontSize: "1rem",
     subFontSize: "0.875rem",
     gap: "0.625rem"
+  },
+  xl: {
+    minHeight: "220px",
+    padding: "2.5rem",
+    iconSize: 32,
+    circleSize: "4.25rem",
+    fontSize: "1.125rem",
+    subFontSize: "1rem",
+    gap: "0.75rem"
   }
 };
 var DropzoneArea = styles.styled("div")(({ theme, $size, $fullWidth, $error, $disabled, $isDragging, $hasFile }) => {
@@ -2299,6 +2368,7 @@ var BaseSelectInput = ({
   size = "md",
   fullWidth = false,
   disabled = false,
+  required,
   id
 }) => {
   const checkSelected = isSelected ?? ((option) => option.value === value);
@@ -2335,7 +2405,7 @@ var BaseSelectInput = ({
   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(Root9, { $fullWidth: fullWidth, ref: rootRef, children: [
-    label && /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: inputId, error, size, children: label }),
+    label && /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: inputId, error, size, required, children: label }),
     /* @__PURE__ */ jsxRuntime.jsxs(
       Trigger2,
       {
@@ -2650,13 +2720,14 @@ var TextareaInput = react.forwardRef(
     fullWidth = false,
     rows = 4,
     disabled = false,
+    required,
     id,
     ...rest
   }, ref) => {
     const autoId = react.useId();
     const inputId = id ?? autoId;
     return /* @__PURE__ */ jsxRuntime.jsxs(Root10, { $fullWidth: fullWidth, children: [
-      label && /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: inputId, error, size, children: label }),
+      label && /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: inputId, error, size, required, children: label }),
       /* @__PURE__ */ jsxRuntime.jsx(
         StyledTextarea,
         {
@@ -2664,6 +2735,7 @@ var TextareaInput = react.forwardRef(
           id: inputId,
           rows,
           disabled,
+          required,
           $size: size,
           $fullWidth: fullWidth,
           $error: error,
@@ -4632,10 +4704,10 @@ var TextInput = react.forwardRef(
   ({ type = "text", ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx(BaseInput, { ref, type, ...rest })
 );
 TextInput.displayName = "TextInput";
-var TRACK_W = { sm: "1.75rem", md: "2.25rem", lg: "2.75rem" };
-var TRACK_H = { sm: "1rem", md: "1.25rem", lg: "1.5rem" };
-var THUMB_S = { sm: "0.75rem", md: "1rem", lg: "1.25rem" };
-var FONT_S = { sm: "0.75rem", md: "0.875rem", lg: "1rem" };
+var TRACK_W = { sm: "1.75rem", md: "2.25rem", lg: "2.75rem", xl: "3.25rem" };
+var TRACK_H = { sm: "1rem", md: "1.25rem", lg: "1.5rem", xl: "1.75rem" };
+var THUMB_S = { sm: "0.75rem", md: "1rem", lg: "1.25rem", xl: "1.5rem" };
+var FONT_S = { sm: "0.75rem", md: "0.875rem", lg: "1rem", xl: "1.125rem" };
 function getActiveColor(color, theme) {
   switch (color) {
     case "secondary":
@@ -6782,15 +6854,15 @@ function CookieConsent({
             Button,
             {
               variant: "text",
-              size: "sm",
+              size: "md",
               "aria-expanded": expanded,
               "aria-controls": `${id}-panel`,
               onClick: () => setExpanded((v) => !v),
               children: manageLabel
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", onClick: handleRejectAll, children: rejectLabel }),
-          /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "primary", size: "sm", onClick: handleAcceptAll, children: acceptAllLabel })
+          /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "md", onClick: handleRejectAll, children: rejectLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "primary", size: "md", onClick: handleAcceptAll, children: acceptAllLabel })
         ] })
       ] }),
       expanded && /* @__PURE__ */ jsxRuntime.jsxs(Panel3, { id: `${id}-panel`, role: "group", "aria-label": "Kategorie plik\xF3w cookie", children: [
@@ -6813,7 +6885,7 @@ function CookieConsent({
             }
           )
         ] }, cat.id)),
-        /* @__PURE__ */ jsxRuntime.jsx(SaveRow, { children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "primary", size: "sm", onClick: handleSave, children: saveLabel }) })
+        /* @__PURE__ */ jsxRuntime.jsx(SaveRow, { children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "primary", size: "md", onClick: handleSave, children: saveLabel }) })
       ] })
     ] }) }),
     document.body
@@ -6911,7 +6983,7 @@ function CommentActions({ commentId, onReply, onShare }) {
         onClick: () => onReply?.(commentId),
         variant: "text",
         startIcon: /* @__PURE__ */ jsxRuntime.jsx(ReplyIcon__default.default, { style: { fontSize: "inherit" } }),
-        size: "sm",
+        size: "md",
         children: "Odpowiedz"
       }
     ),
@@ -6923,7 +6995,7 @@ function CommentActions({ commentId, onReply, onShare }) {
         onClick: () => onShare?.(commentId),
         variant: "text",
         startIcon: /* @__PURE__ */ jsxRuntime.jsx(ReplyIcon__default.default, { style: { fontSize: "inherit" } }),
-        size: "sm",
+        size: "md",
         children: "Udost\u0119pnij"
       }
     )
@@ -7488,7 +7560,7 @@ var NewsletterSection = react.forwardRef(
             "aria-label": inputPlaceholder
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "submit", variant: "primary", size: "md", children: submitLabel })
+        /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "submit", variant: "primary", size: "lg", children: submitLabel })
       ] }),
       privacyNote && /* @__PURE__ */ jsxRuntime.jsx(PrivacyNote, { children: privacyNote })
     ] });
@@ -9615,25 +9687,12 @@ var Nav2 = styles.styled("nav")({
     display: "none"
   }
 });
-var NavLink = styles.styled("a", {
+var NavButton2 = styles.styled(Button, {
   shouldForwardProp: (p) => p !== "$active"
 })(({ theme, $active }) => ({
-  padding: "0.375rem 0.75rem",
-  borderRadius: theme.shape.borderRadius,
-  fontFamily: theme.typography.fontFamily,
   fontSize: "0.9375rem",
   fontWeight: $active ? 600 : 400,
-  color: $active ? theme.palette.primary.main : theme.palette.text.primary,
-  textDecoration: "none",
-  transition: "background-color 150ms ease, color 150ms ease",
-  "&:hover": {
-    backgroundColor: theme.palette.action.hover,
-    color: theme.palette.primary.main
-  },
-  "&:focus-visible": {
-    outline: `3px solid ${theme.palette.primary.main}`,
-    outlineOffset: "2px"
-  }
+  color: $active ? theme.palette.primary.main : theme.palette.text.primary
 }));
 var RightSlot = styles.styled("div")({
   marginLeft: "auto",
@@ -9661,20 +9720,14 @@ var MobileDrawer = styles.styled("div", {
     display: "none"
   }
 }));
-var MobileNavLink = styles.styled("a", {
+var MobileNavButton = styles.styled(Button, {
   shouldForwardProp: (p) => p !== "$active"
 })(({ theme, $active }) => ({
-  padding: "0.625rem 0.75rem",
-  borderRadius: theme.shape.borderRadius,
-  fontFamily: theme.typography.fontFamily,
   fontSize: "1rem",
   fontWeight: $active ? 600 : 400,
   color: $active ? theme.palette.primary.main : theme.palette.text.primary,
-  textDecoration: "none",
-  transition: "background-color 150ms ease",
-  "&:hover": {
-    backgroundColor: theme.palette.action.hover
-  }
+  justifyContent: "flex-start",
+  width: "100%"
 }));
 function HamburgerIcon({ open }) {
   return open ? /* @__PURE__ */ jsxRuntime.jsx(CloseIcon__default.default, { "aria-hidden": "true", style: { fontSize: "inherit" } }) : /* @__PURE__ */ jsxRuntime.jsx(MenuIcon__default.default, { "aria-hidden": "true", style: { fontSize: "inherit" } });
@@ -9697,7 +9750,17 @@ function Navbar({
         style: { height: "3.75rem", display: "flex", alignItems: "center", gap: "1.5rem" },
         children: [
           logo && /* @__PURE__ */ jsxRuntime.jsx(LogoSlot, { children: logo }),
-          /* @__PURE__ */ jsxRuntime.jsx(Nav2, { "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)) }),
+          /* @__PURE__ */ jsxRuntime.jsx(Nav2, { "aria-label": "Nawigacja g\u0142\xF3wna", children: navItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+            NavButton2,
+            {
+              variant: "text",
+              $active: !!item.active,
+              "aria-current": item.active ? "page" : void 0,
+              onClick: () => window.location.assign(item.href),
+              children: item.label
+            },
+            item.href
+          )) }),
           (actions || navItems.length > 0) && /* @__PURE__ */ jsxRuntime.jsxs(RightSlot, { children: [
             actions,
             navItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
@@ -9705,7 +9768,7 @@ function Navbar({
               {
                 variant: "primary",
                 shape: "square",
-                size: "sm",
+                size: "md",
                 "aria-label": mobileOpen ? "Zamknij menu" : "Otw\xF3rz menu",
                 "aria-expanded": mobileOpen,
                 onClick: () => setMobileOpen((v) => !v),
@@ -9716,49 +9779,99 @@ function Navbar({
         ]
       }
     ),
-    navItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(MobileDrawer, { $open: mobileOpen, "aria-label": "Menu mobilne", children: /* @__PURE__ */ jsxRuntime.jsx(Container, { maxWidth, children: navItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(MobileNavLink, { href: item.href, $active: !!item.active, children: item.label }, item.href)) }) })
+    navItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(MobileDrawer, { $open: mobileOpen, "aria-label": "Menu mobilne", children: /* @__PURE__ */ jsxRuntime.jsx(Container, { maxWidth, children: navItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+      MobileNavButton,
+      {
+        variant: "text",
+        $active: !!item.active,
+        "aria-current": item.active ? "page" : void 0,
+        onClick: () => window.location.assign(item.href),
+        children: item.label
+      },
+      item.href
+    )) }) })
   ] });
 }
 var sizeOverrides = {
   sm: { minWidth: "1.75rem", height: "1.75rem" },
   md: { minWidth: "2rem", height: "2rem" },
-  lg: { minWidth: "2.5rem", height: "2.5rem" }
+  lg: { minWidth: "2.5rem", height: "2.5rem" },
+  xl: { minWidth: "3rem", height: "3rem" }
 };
-var activeStyles = (theme) => ({
-  backgroundColor: theme.palette.primary.main,
-  color: theme.palette.primary.contrastText,
-  fontWeight: 700,
-  "&:hover:not(:disabled)": { backgroundColor: theme.palette.primary.dark },
-  "&:active:not(:disabled)": { filter: "none" }
-});
-var idleStyles = (theme) => ({
-  backgroundColor: "transparent",
-  color: theme.palette.text.primary,
-  fontWeight: 400,
-  "&:hover:not(:disabled)": { backgroundColor: styles.alpha(theme.palette.primary.main, 0.08) },
-  "&:active:not(:disabled)": { backgroundColor: styles.alpha(theme.palette.primary.main, 0.16) }
-});
-var StyledButton3 = styles.styled(Button)(
-  ({ theme, $isActive, $btnSize }) => ({
+var activeStyles = (theme, variant) => {
+  if (variant === "secondary") {
+    return {
+      backgroundColor: theme.palette.secondary.main,
+      color: theme.palette.secondary.contrastText,
+      fontWeight: 700,
+      "&:hover:not(:disabled)": { backgroundColor: theme.palette.secondary.dark },
+      "&:active:not(:disabled)": { filter: "none" }
+    };
+  }
+  if (variant === "danger") {
+    return {
+      backgroundColor: theme.palette.error.main,
+      color: theme.palette.error.contrastText,
+      fontWeight: 700,
+      "&:hover:not(:disabled)": { backgroundColor: theme.palette.error.dark },
+      "&:active:not(:disabled)": { filter: "none" }
+    };
+  }
+  if (variant === "primary") {
+    return {
+      fontWeight: 700,
+      "&:active:not(:disabled)": { filter: "none" }
+    };
+  }
+  return {
+    backgroundColor: theme.palette.primary.main,
+    color: theme.palette.primary.contrastText,
+    fontWeight: 700,
+    "&:hover:not(:disabled)": { backgroundColor: theme.palette.primary.dark },
+    "&:active:not(:disabled)": { filter: "none" }
+  };
+};
+var idleStyles = (theme, variant) => {
+  if (variant !== "ghost" && variant !== "text") {
+    return {};
+  }
+  return {
+    backgroundColor: "transparent",
+    color: theme.palette.text.primary,
     border: "none",
-    borderRadius: theme.shape.borderRadius,
-    padding: "0 0.25rem",
-    lineHeight: 1,
-    ...sizeOverrides[$btnSize],
-    ...$isActive ? activeStyles(theme) : idleStyles(theme)
-  })
-);
+    fontWeight: 400,
+    "&:hover:not(:disabled)": { backgroundColor: styles.alpha(theme.palette.primary.main, 0.08) },
+    "&:active:not(:disabled)": { backgroundColor: styles.alpha(theme.palette.primary.main, 0.16) }
+  };
+};
+var StyledButton3 = styles.styled(Button)(({ theme, $isActive, $btnSize, $variant }) => ({
+  border: "none",
+  borderRadius: theme.shape.borderRadius,
+  padding: "0 0.25rem",
+  lineHeight: 1,
+  ...sizeOverrides[$btnSize],
+  ...$isActive ? activeStyles(theme, $variant) : idleStyles(theme, $variant)
+}));
 var PaginationButton = react.forwardRef(
-  ({ onClick, isActive = false, disabled = false, size = "md", children, "aria-label": ariaLabel }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  ({
+    onClick,
+    isActive = false,
+    disabled = false,
+    size = "md",
+    variant = "ghost",
+    children,
+    "aria-label": ariaLabel
+  }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     StyledButton3,
     {
       ref,
-      variant: "ghost",
+      variant,
       size,
       disabled,
       onClick,
       $isActive: isActive,
       $btnSize: size,
+      $variant: variant,
       "aria-label": ariaLabel,
       "aria-current": isActive ? "page" : void 0,
       children
@@ -9875,7 +9988,8 @@ PaginationBar.displayName = "PaginationBar";
 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" }
+  lg: { minWidth: "2.5rem", height: "2.5rem", fontSize: "1rem" },
+  xl: { minWidth: "3rem", height: "3rem", fontSize: "1.125rem" }
 };
 var StyledEllipsis = styles.styled("span")(({ theme, $size }) => ({
   display: "inline-flex",
@@ -10236,13 +10350,24 @@ var Badge2 = styles.styled("span")(({ theme }) => ({
   lineHeight: 1
 }));
 var CartButton = react.forwardRef(
-  ({ count, size = "sm", label = "Koszyk", disabled, onClick, className, "aria-label": ariaLabel }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root36, { className, children: [
+  ({
+    count,
+    size = "sm",
+    shape,
+    variant = "ghost",
+    label = "Koszyk",
+    disabled,
+    onClick,
+    className,
+    "aria-label": ariaLabel
+  }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root36, { className, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       Button,
       {
         ref,
-        variant: "ghost",
+        variant,
         size,
+        shape,
         disabled,
         onClick,
         "aria-label": ariaLabel ?? (count ? `${label} (${count})` : label),
@@ -10295,12 +10420,14 @@ ProductCardImage.displayName = "ProductCardImage";
 var controlWidthMap = {
   sm: "26px",
   md: "32px",
-  lg: "38.5px"
+  lg: "40px",
+  xl: "48px"
 };
 var valueWidthMap = {
   sm: "2rem",
   md: "2.5rem",
-  lg: "3rem"
+  lg: "3rem",
+  xl: "3.5rem"
 };
 var Root37 = styles.styled("div", { shouldForwardProp: (p) => p !== "size" })(
   ({ theme, size }) => ({
@@ -10640,17 +10767,11 @@ var CountdownTimer = react.forwardRef(
 );
 CountdownTimer.displayName = "CountdownTimer";
 var countdownTimerVariants = ["inline", "card", "banner"];
-var Root40 = styles.styled(Card)(({ theme }) => ({
+var Root40 = styles.styled(Card)({
   display: "flex",
   flexDirection: "column",
-  overflow: "hidden",
-  cursor: "pointer",
-  transition: "box-shadow 150ms ease, transform 150ms ease",
-  "&:hover": {
-    boxShadow: theme.shadows[4],
-    transform: "translateY(-2px)"
-  }
-}));
+  overflow: "hidden"
+});
 var ImageWrap2 = styles.styled("div")({
   margin: "-1.5rem -1.5rem 1rem"
 });
@@ -10666,7 +10787,7 @@ var CategoryCard = react.forwardRef(
       /* @__PURE__ */ jsxRuntime.jsx(ImageWrap2, { children: /* @__PURE__ */ jsxRuntime.jsx(CategoryCardImage, { src: imageUrl, alt: imageAlt ?? name }) }),
       /* @__PURE__ */ jsxRuntime.jsx(CategoryCardInfo, { name, count })
     ] });
-    return /* @__PURE__ */ jsxRuntime.jsx(Root40, { ref, variant: "default", padding: "md", rounded: "lg", ...props, children: href ? /* @__PURE__ */ jsxRuntime.jsx(CardLink2, { href, children: content }) : content });
+    return /* @__PURE__ */ jsxRuntime.jsx(Root40, { ref, variant: "default", padding: "md", rounded: "lg", hoverEffect: true, ...props, children: href ? /* @__PURE__ */ jsxRuntime.jsx(CardLink2, { href, children: content }) : content });
   }
 );
 CategoryCard.displayName = "CategoryCard";
@@ -10889,100 +11010,22 @@ function CompareTool({
     }) })
   ] }) });
 }
-var spin2 = styles.keyframes`to { transform: rotate(360deg); }`;
 var Root42 = styles.styled("div")({
   display: "flex",
   flexDirection: "column",
   gap: "0.5rem"
 });
-var InputRow2 = styles.styled("div", {
-  shouldForwardProp: (p) => p !== "$hasError" && p !== "$applied"
-})(({ theme, $hasError, $applied }) => ({
+var InputRow2 = styles.styled("div")({
   display: "flex",
-  border: `1.5px solid ${$hasError ? theme.palette.error.main : $applied ? theme.palette.success.main : theme.palette.divider}`,
-  borderRadius: "0.5rem",
-  overflow: "hidden",
-  transition: "border-color 150ms ease",
-  "&:focus-within": {
-    borderColor: $hasError ? theme.palette.error.main : $applied ? theme.palette.success.main : theme.palette.primary.main,
-    boxShadow: `0 0 0 3px ${$hasError ? `${theme.palette.error.main}22` : $applied ? `${theme.palette.success.main}22` : `${theme.palette.primary.main}22`}`
-  }
-}));
-var Input = styles.styled("input")(({ theme }) => ({
-  flex: 1,
-  border: "none",
-  outline: "none",
-  padding: "0.625rem 0.875rem",
-  fontFamily: theme.typography.fontFamily,
-  fontSize: "0.9375rem",
-  color: theme.palette.text.primary,
-  backgroundColor: "transparent",
-  textTransform: "uppercase",
-  letterSpacing: "0.05em",
-  "&::placeholder": {
-    color: theme.palette.text.disabled,
-    textTransform: "none",
-    letterSpacing: "normal"
-  },
-  "&:disabled": {
-    cursor: "not-allowed",
-    color: theme.palette.text.disabled
-  }
-}));
-var ApplyButton = styles.styled("button", {
-  shouldForwardProp: (p) => p !== "$applied"
-})(({ theme, $applied }) => ({
-  appearance: "none",
-  border: "none",
-  borderLeft: `1.5px solid ${theme.palette.divider}`,
-  padding: "0 1rem",
-  cursor: "pointer",
-  fontFamily: theme.typography.fontFamily,
-  fontSize: "0.875rem",
-  fontWeight: 700,
-  whiteSpace: "nowrap",
-  backgroundColor: $applied ? theme.palette.success.main : theme.palette.primary.main,
-  color: $applied ? theme.palette.success.contrastText : theme.palette.primary.contrastText,
-  transition: "background-color 150ms ease, opacity 150ms ease",
-  "&:hover:not(:disabled)": {
-    opacity: 0.88
-  },
-  "&:disabled": {
-    opacity: 0.5,
-    cursor: "not-allowed"
-  },
-  "&:focus-visible": {
-    outline: `3px solid ${theme.palette.primary.main}`,
-    outlineOffset: "-3px"
-  }
-}));
-var Spinner4 = styles.styled("span")({
-  display: "inline-block",
-  width: "0.875rem",
-  height: "0.875rem",
-  border: "2px solid rgba(255,255,255,0.3)",
-  borderTopColor: "#fff",
-  borderRadius: "50%",
-  animation: `${spin2} 600ms linear infinite`,
-  verticalAlign: "middle"
+  alignItems: "flex-start",
+  gap: "0.5rem"
 });
-var Message = styles.styled("p", {
-  shouldForwardProp: (p) => p !== "$type"
-})(({ theme, $type }) => ({
-  margin: 0,
-  fontSize: "0.8125rem",
-  fontFamily: theme.typography.fontFamily,
-  color: $type === "error" ? theme.palette.error.main : theme.palette.success.main,
-  display: "flex",
-  alignItems: "center",
-  gap: "0.25rem"
-}));
 var AppliedRow = styles.styled("div")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
   padding: "0.5rem 0.875rem",
-  borderRadius: "0.5rem",
+  borderRadius: theme.shape.borderRadius,
   backgroundColor: `${theme.palette.success.main}14`,
   border: `1.5px solid ${theme.palette.success.main}`
 }));
@@ -10994,22 +11037,14 @@ var AppliedCode = styles.styled("span")(({ theme }) => ({
   textTransform: "uppercase",
   letterSpacing: "0.05em"
 }));
-var RemoveButton2 = styles.styled("button")(({ theme }) => ({
-  appearance: "none",
-  border: "none",
-  background: "none",
-  cursor: "pointer",
-  fontFamily: theme.typography.fontFamily,
+var SuccessMessage2 = styles.styled("p")(({ theme }) => ({
+  margin: 0,
   fontSize: "0.8125rem",
-  fontWeight: 600,
-  color: theme.palette.error.main,
-  padding: "0.25rem",
-  "&:hover": { textDecoration: "underline" },
-  "&:focus-visible": {
-    outline: `2px solid ${theme.palette.error.main}`,
-    outlineOffset: "2px",
-    borderRadius: "3px"
-  }
+  fontFamily: theme.typography.fontFamily,
+  color: theme.palette.success.main,
+  display: "flex",
+  alignItems: "center",
+  gap: "0.25rem"
 }));
 function CouponInput({
   value,
@@ -11024,12 +11059,9 @@ function CouponInput({
   disabled = false,
   error,
   successMessage,
+  size = "md",
   className
 }) {
-  const id = react.useId();
-  const errorId = `${id}-error`;
-  const successId = `${id}-success`;
-  const isDisabled = disabled || loading;
   const handleApply = () => {
     if (value.trim()) onApply(value.trim());
   };
@@ -11041,52 +11073,52 @@ function CouponInput({
       /* @__PURE__ */ jsxRuntime.jsxs(AppliedRow, { role: "status", "aria-label": `Kod rabatowy ${appliedCode} zastosowany`, children: [
         /* @__PURE__ */ jsxRuntime.jsx(AppliedCode, { children: appliedCode }),
         onRemove && /* @__PURE__ */ jsxRuntime.jsx(
-          RemoveButton2,
+          Button,
           {
-            type: "button",
-            "aria-label": `${removeLabel} kod ${appliedCode}`,
+            variant: "danger",
+            size: "md",
             onClick: onRemove,
+            "aria-label": `${removeLabel} kod ${appliedCode}`,
             children: removeLabel
           }
         )
       ] }),
-      successMessage && /* @__PURE__ */ jsxRuntime.jsxs(Message, { $type: "success", id: successId, role: "status", children: [
+      successMessage && /* @__PURE__ */ jsxRuntime.jsxs(SuccessMessage2, { role: "status", children: [
         "\u2713 ",
         successMessage
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(Root42, { className, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(InputRow2, { $hasError: Boolean(error), $applied: false, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Input,
-        {
-          id,
-          type: "text",
-          value,
-          placeholder,
-          disabled: isDisabled,
-          "aria-label": "Kod rabatowy",
-          "aria-invalid": Boolean(error),
-          "aria-describedby": error ? errorId : void 0,
-          onChange: (e) => onChange(e.target.value),
-          onKeyDown: handleKeyDown
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        ApplyButton,
-        {
-          type: "button",
-          $applied: false,
-          disabled: isDisabled || !value.trim(),
-          "aria-label": applyLabel,
-          onClick: handleApply,
-          children: loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner4, { "aria-hidden": "true" }) : applyLabel
-        }
-      )
-    ] }),
-    error && /* @__PURE__ */ jsxRuntime.jsx(Message, { $type: "error", id: errorId, role: "alert", children: error })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(Root42, { className, children: /* @__PURE__ */ jsxRuntime.jsxs(InputRow2, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      TextInput,
+      {
+        value,
+        placeholder,
+        disabled: disabled || loading,
+        "aria-label": "Kod rabatowy",
+        "aria-invalid": Boolean(error),
+        onChange: (e) => onChange(e.target.value),
+        onKeyDown: handleKeyDown,
+        size,
+        fullWidth: true,
+        error: Boolean(error),
+        helperText: error,
+        style: { textTransform: "uppercase" }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        size,
+        loading,
+        disabled: disabled || !value.trim(),
+        "aria-label": applyLabel,
+        onClick: handleApply,
+        children: applyLabel
+      }
+    )
+  ] }) });
 }
 var DEFAULT_OMNIBUS_LABEL = "Najni\u017Csza cena z ostatnich 30 dni";
 var FONT_SIZE2 = {
@@ -11390,7 +11422,7 @@ var FilterSidebar = react.forwardRef(
   }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root45, { ref, "aria-label": "Filtry produkt\xF3w", ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Header3, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(Title10, { children: "Filtry" }),
-      onClear && /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", onClick: onClear, children: "Wyczy\u015B\u0107" })
+      onClear && /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "md", onClick: onClear, children: "Wyczy\u015B\u0107" })
     ] }),
     priceRange && /* @__PURE__ */ jsxRuntime.jsxs(Group, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(Legend, { children: "Cena" }),
@@ -11684,51 +11716,63 @@ var ProductCard = react.forwardRef(
     buttonVariant = "primary",
     disabledButton = false,
     hideButton = false,
+    hoverEffect = true,
     ...props
-  }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root50, { ref, variant: "default", padding: "md", rounded: "lg", ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      AspectRatio,
-      {
-        ratio: imageRatio,
-        style: { margin: "-1.5rem -1.5rem 1rem", width: "calc(100% + 3rem)" },
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          ProductCardImage,
+  }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    Root50,
+    {
+      ref,
+      variant: "default",
+      padding: "md",
+      rounded: "lg",
+      hoverEffect,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          AspectRatio,
           {
-            src: imageUrl,
-            alt: imageAlt ?? name,
-            badge,
-            badgeVariant
+            ratio: imageRatio,
+            style: { margin: "-1.5rem -1.5rem 1rem", width: "calc(100% + 3rem)" },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              ProductCardImage,
+              {
+                src: imageUrl,
+                alt: imageAlt ?? name,
+                badge,
+                badgeVariant
+              }
+            )
           }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(Name11, { children: name }),
-    rating !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(Rating, { value: rating, count: reviewCount, size: "sm" }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Price2,
-      {
-        price,
-        originalPrice,
-        currency,
-        locale,
-        lowestPrice,
-        style: { marginTop: "0.5rem" }
-      }
-    ),
-    !hideButton && /* @__PURE__ */ jsxRuntime.jsx(Footer6, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      Button,
-      {
-        fullWidth: true,
-        variant: buttonVariant,
-        disabled: disabledButton,
-        onClick: (e) => {
-          e.stopPropagation();
-          onAddToCart?.();
-        },
-        children: ctaLabel
-      }
-    ) })
-  ] })
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(Name11, { children: name }),
+        rating !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(Rating, { value: rating, count: reviewCount, size: "sm" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Price2,
+          {
+            price,
+            originalPrice,
+            currency,
+            locale,
+            lowestPrice,
+            style: { marginTop: "0.5rem" }
+          }
+        ),
+        !hideButton && /* @__PURE__ */ jsxRuntime.jsx(Footer6, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            fullWidth: true,
+            variant: buttonVariant,
+            disabled: disabledButton,
+            onClick: (e) => {
+              e.stopPropagation();
+              onAddToCart?.();
+            },
+            children: ctaLabel
+          }
+        ) })
+      ]
+    }
+  )
 );
 ProductCard.displayName = "ProductCard";
 var COLLAPSE_AT = "480px";
@@ -12583,23 +12627,34 @@ var VoucherCard = react.forwardRef(
   ] })
 );
 VoucherCard.displayName = "VoucherCard";
-var StyledButton4 = styles.styled(Button)(({ theme, $active }) => ({
-  border: `1px solid ${$active ? theme.palette.error.main : theme.palette.divider}`,
-  background: $active ? `${theme.palette.error.main}14` : "transparent",
-  color: $active ? theme.palette.error.main : theme.palette.text.secondary,
-  "&:hover:not(:disabled)": {
-    color: theme.palette.error.main,
-    borderColor: theme.palette.error.main,
-    backgroundColor: `${theme.palette.error.main}14`
+var StyledButton4 = styles.styled(Button)(({
+  theme,
+  $active,
+  $variant
+}) => {
+  if ($variant !== "ghost" && $variant !== "text") {
+    return {};
   }
-}));
+  return {
+    border: $variant === "ghost" ? `1px solid ${$active ? theme.palette.error.main : theme.palette.divider}` : "none",
+    background: $active ? `${theme.palette.error.main}14` : "transparent",
+    color: $active ? theme.palette.error.main : theme.palette.text.secondary,
+    "&:hover:not(:disabled)": {
+      color: theme.palette.error.main,
+      borderColor: $variant === "ghost" ? theme.palette.error.main : void 0,
+      backgroundColor: `${theme.palette.error.main}14`
+    }
+  };
+});
 var WishlistButton = react.forwardRef(
-  ({ active = false, size = "md", label, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  ({ active = false, size = "md", variant = "ghost", label, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     StyledButton4,
     {
       ref,
+      variant,
       shape: "circle",
       size,
+      $variant: variant,
       startIcon: active ? /* @__PURE__ */ jsxRuntime.jsx(FavoriteIcon__default.default, { "aria-hidden": true, style: { fontSize: "inherit" } }) : /* @__PURE__ */ jsxRuntime.jsx(FavoriteBorderIcon__default.default, { "aria-hidden": true, style: { fontSize: "inherit" } }),
       "aria-label": label ?? (active ? "Usu\u0144 z listy \u017Cycze\u0144" : "Dodaj do listy \u017Cycze\u0144"),
       $active: active,