@szymonpiatek/designsystem 0.0.13 → 0.0.14

package/dist/index.js

@@ -194,14 +194,32 @@ function getVariantStyles(variant, theme) {
   }
 }
 var StyledCard = 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 = forwardRef(
-  ({ variant = "default", padding = "md", rounded = "lg", ...props }, ref) => /* @__PURE__ */ jsx(StyledCard, { ref, $variant: variant, $padding: padding, $rounded: rounded, ...props })
+  ({ variant = "default", padding = "md", rounded = "lg", hoverEffect = false, ...props }, ref) => /* @__PURE__ */ jsx(
+    StyledCard,
+    {
+      ref,
+      $variant: variant,
+      $padding: padding,
+      $rounded: rounded,
+      $hoverEffect: hoverEffect,
+      ...props
+    }
+  )
 );
 Card.displayName = "Card";
 var cardVariants = [
@@ -496,14 +514,16 @@ var Accordion = 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) => ({
@@ -1020,7 +1040,7 @@ var ContextMenu = 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__ */ jsx(
   "span",
@@ -1076,12 +1096,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 = styled("div")(({ theme }) => ({
   position: "absolute",
@@ -1097,7 +1119,8 @@ var Chevron = () => /* @__PURE__ */ jsx(ExpandMoreIcon, { "aria-hidden": true, s
 var labelSizeMap = {
   sm: "0.625rem",
   md: "0.75rem",
-  lg: "0.875rem"
+  lg: "0.875rem",
+  xl: "1rem"
 };
 var StyledLabel = styled("label")(({ theme, $error, $size }) => ({
   display: "block",
@@ -1107,7 +1130,16 @@ var StyledLabel = 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__ */ jsx(StyledLabel, { $error: error, $size: size, ...rest, children });
+var RequiredAsterisk = 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__ */ jsxs(StyledLabel, { $error: error, $size: size, ...rest, children: [
+  children,
+  required && /* @__PURE__ */ jsx(RequiredAsterisk, { "aria-hidden": "true", children: "*" })
+] });
 Label.displayName = "Label";
 var StyledHelperText = styled("p")(({ theme, $error }) => ({
   margin: "0.25rem 0 0",
@@ -1187,13 +1219,14 @@ var BaseInput = forwardRef(
     startAdornment,
     endAdornment,
     disabled = false,
+    required,
     id,
     ...rest
   }, ref) => {
     const autoId = useId();
     const inputId = id ?? autoId;
     return /* @__PURE__ */ jsxs(Root5, { $fullWidth: fullWidth, children: [
-      label && /* @__PURE__ */ jsx(Label, { htmlFor: inputId, error, size, children: label }),
+      label && /* @__PURE__ */ jsx(Label, { htmlFor: inputId, error, size, required, children: label }),
       /* @__PURE__ */ jsxs(
         InputWrapper,
         {
@@ -1204,7 +1237,7 @@ var BaseInput = forwardRef(
           "data-disabled": disabled || void 0,
           children: [
             startAdornment && /* @__PURE__ */ jsx(Adornment, { children: startAdornment }),
-            /* @__PURE__ */ jsx(StyledInput, { ref, id: inputId, disabled, ...rest }),
+            /* @__PURE__ */ jsx(StyledInput, { ref, id: inputId, disabled, required, ...rest }),
             endAdornment && /* @__PURE__ */ jsx(Adornment, { children: endAdornment })
           ]
         }
@@ -1217,12 +1250,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 = styled("span")(({ theme, $size, $error, $disabled }) => ({
@@ -1296,6 +1331,12 @@ var LabelText = styled("span")(
     userSelect: "none"
   })
 );
+var RequiredAsterisk2 = styled("span")(({ theme }) => ({
+  marginLeft: "0.2em",
+  color: theme.palette.error.main,
+  fontWeight: 600,
+  lineHeight: 1
+}));
 var Root6 = styled("span")(({ $disabled }) => ({
   display: "inline-flex",
   flexDirection: "column",
@@ -1309,6 +1350,7 @@ var CheckboxInput = forwardRef(
     size = "md",
     disabled = false,
     indeterminate = false,
+    required,
     id,
     ...rest
   }, ref) => {
@@ -1334,10 +1376,14 @@ var CheckboxInput = forwardRef(
             id: inputId,
             type: "checkbox",
             disabled,
+            required,
             ...rest
           }
         ) }),
-        label && /* @__PURE__ */ jsx(LabelText, { $size: size, $disabled: disabled, $error: error, children: label })
+        label && /* @__PURE__ */ jsxs(LabelText, { $size: size, $disabled: disabled, $error: error, children: [
+          label,
+          required && /* @__PURE__ */ jsx(RequiredAsterisk2, { "aria-hidden": "true", children: "*" })
+        ] })
       ] }),
       helperText && /* @__PURE__ */ jsx(HelperText, { error, children: helperText })
     ] });
@@ -1347,12 +1393,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 = styled("span")(({ theme, $size, $error, $disabled }) => ({
@@ -1406,19 +1454,28 @@ var LabelText2 = styled("span")(
     userSelect: "none"
   })
 );
+var RequiredAsterisk3 = styled("span")(({ theme }) => ({
+  marginLeft: "0.2em",
+  color: theme.palette.error.main,
+  fontWeight: 600,
+  lineHeight: 1
+}));
 var Root7 = styled("span")(({ $disabled }) => ({
   display: "inline-flex",
   flexDirection: "column",
   cursor: $disabled ? "not-allowed" : "pointer"
 }));
 var RadioInput = forwardRef(
-  ({ label, helperText, error = false, size = "md", disabled = false, id, ...rest }, ref) => {
+  ({ label, helperText, error = false, size = "md", disabled = false, required, id, ...rest }, ref) => {
     const autoId = useId();
     const inputId = id ?? autoId;
     return /* @__PURE__ */ jsxs(Root7, { $disabled: disabled, children: [
       /* @__PURE__ */ jsxs(Row2, { htmlFor: inputId, children: [
-        /* @__PURE__ */ jsx(Circle, { $size: size, $error: error, $disabled: disabled, children: /* @__PURE__ */ jsx(HiddenInput2, { ref, id: inputId, type: "radio", disabled, ...rest }) }),
-        label && /* @__PURE__ */ jsx(LabelText2, { $size: size, $disabled: disabled, $error: error, children: label })
+        /* @__PURE__ */ jsx(Circle, { $size: size, $error: error, $disabled: disabled, children: /* @__PURE__ */ jsx(HiddenInput2, { ref, id: inputId, type: "radio", disabled, required, ...rest }) }),
+        label && /* @__PURE__ */ jsxs(LabelText2, { $size: size, $disabled: disabled, $error: error, children: [
+          label,
+          required && /* @__PURE__ */ jsx(RequiredAsterisk3, { "aria-hidden": "true", children: "*" })
+        ] })
       ] }),
       helperText && /* @__PURE__ */ jsx(HelperText, { error, children: helperText })
     ] });
@@ -1604,6 +1661,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 = styled("div")(({ theme, $size, $fullWidth, $error, $disabled, $isDragging, $hasFile }) => {
@@ -2254,6 +2320,7 @@ var BaseSelectInput = ({
   size = "md",
   fullWidth = false,
   disabled = false,
+  required,
   id
 }) => {
   const checkSelected = isSelected ?? ((option) => option.value === value);
@@ -2290,7 +2357,7 @@ var BaseSelectInput = ({
   const selectedLabel = options.find((o) => o.value === value)?.label;
   const defaultTriggerContent = /* @__PURE__ */ jsx("span", { style: { opacity: selectedLabel ? 1 : 0.5 }, children: selectedLabel ?? placeholder });
   return /* @__PURE__ */ jsxs(Root9, { $fullWidth: fullWidth, ref: rootRef, children: [
-    label && /* @__PURE__ */ jsx(Label, { htmlFor: inputId, error, size, children: label }),
+    label && /* @__PURE__ */ jsx(Label, { htmlFor: inputId, error, size, required, children: label }),
     /* @__PURE__ */ jsxs(
       Trigger2,
       {
@@ -2605,13 +2672,14 @@ var TextareaInput = forwardRef(
     fullWidth = false,
     rows = 4,
     disabled = false,
+    required,
     id,
     ...rest
   }, ref) => {
     const autoId = useId();
     const inputId = id ?? autoId;
     return /* @__PURE__ */ jsxs(Root10, { $fullWidth: fullWidth, children: [
-      label && /* @__PURE__ */ jsx(Label, { htmlFor: inputId, error, size, children: label }),
+      label && /* @__PURE__ */ jsx(Label, { htmlFor: inputId, error, size, required, children: label }),
       /* @__PURE__ */ jsx(
         StyledTextarea,
         {
@@ -2619,6 +2687,7 @@ var TextareaInput = forwardRef(
           id: inputId,
           rows,
           disabled,
+          required,
           $size: size,
           $fullWidth: fullWidth,
           $error: error,
@@ -4587,10 +4656,10 @@ var TextInput = forwardRef(
   ({ type = "text", ...rest }, ref) => /* @__PURE__ */ 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":
@@ -6737,15 +6806,15 @@ function CookieConsent({
             Button,
             {
               variant: "text",
-              size: "sm",
+              size: "md",
               "aria-expanded": expanded,
               "aria-controls": `${id}-panel`,
               onClick: () => setExpanded((v) => !v),
               children: manageLabel
             }
           ),
-          /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: handleRejectAll, children: rejectLabel }),
-          /* @__PURE__ */ jsx(Button, { variant: "primary", size: "sm", onClick: handleAcceptAll, children: acceptAllLabel })
+          /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "md", onClick: handleRejectAll, children: rejectLabel }),
+          /* @__PURE__ */ jsx(Button, { variant: "primary", size: "md", onClick: handleAcceptAll, children: acceptAllLabel })
         ] })
       ] }),
       expanded && /* @__PURE__ */ jsxs(Panel3, { id: `${id}-panel`, role: "group", "aria-label": "Kategorie plik\xF3w cookie", children: [
@@ -6768,7 +6837,7 @@ function CookieConsent({
             }
           )
         ] }, cat.id)),
-        /* @__PURE__ */ jsx(SaveRow, { children: /* @__PURE__ */ jsx(Button, { variant: "primary", size: "sm", onClick: handleSave, children: saveLabel }) })
+        /* @__PURE__ */ jsx(SaveRow, { children: /* @__PURE__ */ jsx(Button, { variant: "primary", size: "md", onClick: handleSave, children: saveLabel }) })
       ] })
     ] }) }),
     document.body
@@ -6866,7 +6935,7 @@ function CommentActions({ commentId, onReply, onShare }) {
         onClick: () => onReply?.(commentId),
         variant: "text",
         startIcon: /* @__PURE__ */ jsx(ReplyIcon, { style: { fontSize: "inherit" } }),
-        size: "sm",
+        size: "md",
         children: "Odpowiedz"
       }
     ),
@@ -6878,7 +6947,7 @@ function CommentActions({ commentId, onReply, onShare }) {
         onClick: () => onShare?.(commentId),
         variant: "text",
         startIcon: /* @__PURE__ */ jsx(ReplyIcon, { style: { fontSize: "inherit" } }),
-        size: "sm",
+        size: "md",
         children: "Udost\u0119pnij"
       }
     )
@@ -7443,7 +7512,7 @@ var NewsletterSection = forwardRef(
             "aria-label": inputPlaceholder
           }
         ),
-        /* @__PURE__ */ jsx(Button, { type: "submit", variant: "primary", size: "md", children: submitLabel })
+        /* @__PURE__ */ jsx(Button, { type: "submit", variant: "primary", size: "lg", children: submitLabel })
       ] }),
       privacyNote && /* @__PURE__ */ jsx(PrivacyNote, { children: privacyNote })
     ] });
@@ -9570,25 +9639,12 @@ var Nav2 = styled("nav")({
     display: "none"
   }
 });
-var NavLink = styled("a", {
+var NavButton2 = 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 = styled("div")({
   marginLeft: "auto",
@@ -9616,20 +9672,14 @@ var MobileDrawer = styled("div", {
     display: "none"
   }
 }));
-var MobileNavLink = styled("a", {
+var MobileNavButton = 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__ */ jsx(CloseIcon, { "aria-hidden": "true", style: { fontSize: "inherit" } }) : /* @__PURE__ */ jsx(MenuIcon, { "aria-hidden": "true", style: { fontSize: "inherit" } });
@@ -9652,7 +9702,17 @@ function Navbar({
         style: { height: "3.75rem", display: "flex", alignItems: "center", gap: "1.5rem" },
         children: [
           logo && /* @__PURE__ */ jsx(LogoSlot, { children: logo }),
-          /* @__PURE__ */ jsx(Nav2, { "aria-label": "Nawigacja g\u0142\xF3wna", children: navItems.map((item) => /* @__PURE__ */ jsx(NavLink, { href: item.href, $active: !!item.active, children: item.label }, item.href)) }),
+          /* @__PURE__ */ jsx(Nav2, { "aria-label": "Nawigacja g\u0142\xF3wna", children: navItems.map((item) => /* @__PURE__ */ 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__ */ jsxs(RightSlot, { children: [
             actions,
             navItems.length > 0 && /* @__PURE__ */ jsx(
@@ -9660,7 +9720,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),
@@ -9671,13 +9731,24 @@ function Navbar({
         ]
       }
     ),
-    navItems.length > 0 && /* @__PURE__ */ jsx(MobileDrawer, { $open: mobileOpen, "aria-label": "Menu mobilne", children: /* @__PURE__ */ jsx(Container, { maxWidth, children: navItems.map((item) => /* @__PURE__ */ jsx(MobileNavLink, { href: item.href, $active: !!item.active, children: item.label }, item.href)) }) })
+    navItems.length > 0 && /* @__PURE__ */ jsx(MobileDrawer, { $open: mobileOpen, "aria-label": "Menu mobilne", children: /* @__PURE__ */ jsx(Container, { maxWidth, children: navItems.map((item) => /* @__PURE__ */ 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,
@@ -9830,7 +9901,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 = styled("span")(({ theme, $size }) => ({
   display: "inline-flex",
@@ -10191,13 +10263,14 @@ var Badge2 = styled("span")(({ theme }) => ({
   lineHeight: 1
 }));
 var CartButton = forwardRef(
-  ({ count, size = "sm", label = "Koszyk", disabled, onClick, className, "aria-label": ariaLabel }, ref) => /* @__PURE__ */ jsxs(Root36, { className, children: [
+  ({ count, size = "sm", shape, label = "Koszyk", disabled, onClick, className, "aria-label": ariaLabel }, ref) => /* @__PURE__ */ jsxs(Root36, { className, children: [
     /* @__PURE__ */ jsx(
       Button,
       {
         ref,
         variant: "ghost",
         size,
+        shape,
         disabled,
         onClick,
         "aria-label": ariaLabel ?? (count ? `${label} (${count})` : label),
@@ -10250,12 +10323,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 = styled("div", { shouldForwardProp: (p) => p !== "size" })(
   ({ theme, size }) => ({
@@ -10595,17 +10670,11 @@ var CountdownTimer = forwardRef(
 );
 CountdownTimer.displayName = "CountdownTimer";
 var countdownTimerVariants = ["inline", "card", "banner"];
-var Root40 = styled(Card)(({ theme }) => ({
+var Root40 = 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 = styled("div")({
   margin: "-1.5rem -1.5rem 1rem"
 });
@@ -10621,7 +10690,7 @@ var CategoryCard = forwardRef(
       /* @__PURE__ */ jsx(ImageWrap2, { children: /* @__PURE__ */ jsx(CategoryCardImage, { src: imageUrl, alt: imageAlt ?? name }) }),
       /* @__PURE__ */ jsx(CategoryCardInfo, { name, count })
     ] });
-    return /* @__PURE__ */ jsx(Root40, { ref, variant: "default", padding: "md", rounded: "lg", ...props, children: href ? /* @__PURE__ */ jsx(CardLink2, { href, children: content }) : content });
+    return /* @__PURE__ */ jsx(Root40, { ref, variant: "default", padding: "md", rounded: "lg", hoverEffect: true, ...props, children: href ? /* @__PURE__ */ jsx(CardLink2, { href, children: content }) : content });
   }
 );
 CategoryCard.displayName = "CategoryCard";
@@ -10844,100 +10913,22 @@ function CompareTool({
     }) })
   ] }) });
 }
-var spin2 = keyframes$1`to { transform: rotate(360deg); }`;
 var Root42 = styled("div")({
   display: "flex",
   flexDirection: "column",
   gap: "0.5rem"
 });
-var InputRow2 = styled("div", {
-  shouldForwardProp: (p) => p !== "$hasError" && p !== "$applied"
-})(({ theme, $hasError, $applied }) => ({
+var InputRow2 = 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 = 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 = 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 = 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 = 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 = 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}`
 }));
@@ -10949,22 +10940,14 @@ var AppliedCode = styled("span")(({ theme }) => ({
   textTransform: "uppercase",
   letterSpacing: "0.05em"
 }));
-var RemoveButton2 = styled("button")(({ theme }) => ({
-  appearance: "none",
-  border: "none",
-  background: "none",
-  cursor: "pointer",
-  fontFamily: theme.typography.fontFamily,
+var SuccessMessage2 = 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,
@@ -10979,12 +10962,9 @@ function CouponInput({
   disabled = false,
   error,
   successMessage,
+  size = "md",
   className
 }) {
-  const id = useId();
-  const errorId = `${id}-error`;
-  const successId = `${id}-success`;
-  const isDisabled = disabled || loading;
   const handleApply = () => {
     if (value.trim()) onApply(value.trim());
   };
@@ -10996,52 +10976,52 @@ function CouponInput({
       /* @__PURE__ */ jsxs(AppliedRow, { role: "status", "aria-label": `Kod rabatowy ${appliedCode} zastosowany`, children: [
         /* @__PURE__ */ jsx(AppliedCode, { children: appliedCode }),
         onRemove && /* @__PURE__ */ 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__ */ jsxs(Message, { $type: "success", id: successId, role: "status", children: [
+      successMessage && /* @__PURE__ */ jsxs(SuccessMessage2, { role: "status", children: [
         "\u2713 ",
         successMessage
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs(Root42, { className, children: [
-    /* @__PURE__ */ jsxs(InputRow2, { $hasError: Boolean(error), $applied: false, children: [
-      /* @__PURE__ */ 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__ */ jsx(
-        ApplyButton,
-        {
-          type: "button",
-          $applied: false,
-          disabled: isDisabled || !value.trim(),
-          "aria-label": applyLabel,
-          onClick: handleApply,
-          children: loading ? /* @__PURE__ */ jsx(Spinner4, { "aria-hidden": "true" }) : applyLabel
-        }
-      )
-    ] }),
-    error && /* @__PURE__ */ jsx(Message, { $type: "error", id: errorId, role: "alert", children: error })
-  ] });
+  return /* @__PURE__ */ jsx(Root42, { className, children: /* @__PURE__ */ jsxs(InputRow2, { children: [
+    /* @__PURE__ */ 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__ */ 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 = {
@@ -11345,7 +11325,7 @@ var FilterSidebar = forwardRef(
   }, ref) => /* @__PURE__ */ jsxs(Root45, { ref, "aria-label": "Filtry produkt\xF3w", ...props, children: [
     /* @__PURE__ */ jsxs(Header3, { children: [
       /* @__PURE__ */ jsx(Title10, { children: "Filtry" }),
-      onClear && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: onClear, children: "Wyczy\u015B\u0107" })
+      onClear && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "md", onClick: onClear, children: "Wyczy\u015B\u0107" })
     ] }),
     priceRange && /* @__PURE__ */ jsxs(Group, { children: [
       /* @__PURE__ */ jsx(Legend, { children: "Cena" }),
@@ -11639,51 +11619,63 @@ var ProductCard = forwardRef(
     buttonVariant = "primary",
     disabledButton = false,
     hideButton = false,
+    hoverEffect = true,
     ...props
-  }, ref) => /* @__PURE__ */ jsxs(Root50, { ref, variant: "default", padding: "md", rounded: "lg", ...props, children: [
-    /* @__PURE__ */ jsx(
-      AspectRatio,
-      {
-        ratio: imageRatio,
-        style: { margin: "-1.5rem -1.5rem 1rem", width: "calc(100% + 3rem)" },
-        children: /* @__PURE__ */ jsx(
-          ProductCardImage,
+  }, ref) => /* @__PURE__ */ jsxs(
+    Root50,
+    {
+      ref,
+      variant: "default",
+      padding: "md",
+      rounded: "lg",
+      hoverEffect,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          AspectRatio,
           {
-            src: imageUrl,
-            alt: imageAlt ?? name,
-            badge,
-            badgeVariant
+            ratio: imageRatio,
+            style: { margin: "-1.5rem -1.5rem 1rem", width: "calc(100% + 3rem)" },
+            children: /* @__PURE__ */ jsx(
+              ProductCardImage,
+              {
+                src: imageUrl,
+                alt: imageAlt ?? name,
+                badge,
+                badgeVariant
+              }
+            )
           }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsx(Name11, { children: name }),
-    rating !== void 0 && /* @__PURE__ */ jsx(Rating, { value: rating, count: reviewCount, size: "sm" }),
-    /* @__PURE__ */ jsx(
-      Price2,
-      {
-        price,
-        originalPrice,
-        currency,
-        locale,
-        lowestPrice,
-        style: { marginTop: "0.5rem" }
-      }
-    ),
-    !hideButton && /* @__PURE__ */ jsx(Footer6, { children: /* @__PURE__ */ jsx(
-      Button,
-      {
-        fullWidth: true,
-        variant: buttonVariant,
-        disabled: disabledButton,
-        onClick: (e) => {
-          e.stopPropagation();
-          onAddToCart?.();
-        },
-        children: ctaLabel
-      }
-    ) })
-  ] })
+        ),
+        /* @__PURE__ */ jsx(Name11, { children: name }),
+        rating !== void 0 && /* @__PURE__ */ jsx(Rating, { value: rating, count: reviewCount, size: "sm" }),
+        /* @__PURE__ */ jsx(
+          Price2,
+          {
+            price,
+            originalPrice,
+            currency,
+            locale,
+            lowestPrice,
+            style: { marginTop: "0.5rem" }
+          }
+        ),
+        !hideButton && /* @__PURE__ */ jsx(Footer6, { children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            fullWidth: true,
+            variant: buttonVariant,
+            disabled: disabledButton,
+            onClick: (e) => {
+              e.stopPropagation();
+              onAddToCart?.();
+            },
+            children: ctaLabel
+          }
+        ) })
+      ]
+    }
+  )
 );
 ProductCard.displayName = "ProductCard";
 var COLLAPSE_AT = "480px";