@coopdigital/react 0.19.4 → 0.19.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "0.19.4",
+  "version": "0.19.6",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -50,7 +50,7 @@
   "description": "",
   "devDependencies": {
     "@axe-core/playwright": "^4.10.1",
-    "@coopdigital/styles": "^0.16.4",
+    "@coopdigital/styles": "^0.16.6",
     "@playwright/test": "^1.52.0",
     "@storybook/addon-a11y": "^8.6.12",
     "@storybook/addon-essentials": "^8.6.12",
@@ -75,5 +75,5 @@
   "dependencies": {
     "clsx": "^2.1.1"
   },
-  "gitHead": "7d7bc474a5da58c536c9579eec660106366f73ee"
+  "gitHead": "3f62473cc66936fb06440ba4794ae191e9d2ae6f"
 }

package/src/components/AlertBanner/AlertBanner.tsx

@@ -1,25 +1,27 @@
 import type { HTMLAttributes, JSX, ReactNode } from "react"
 
+import clsx from "clsx"
+
 export interface AlertBannerProps extends HTMLAttributes<HTMLDivElement> {
   /** **(Optional)** Main content inside the banner. It can be any valid JSX or string. */
   children?: string | ReactNode
-  /** **(Optional)** Additional CSS classes to be applied to the component. */
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
   className?: string
-  /** Main title of the banner, rendered as a `h2`. */
+  /** Specify the main title of the banner, rendered as a `h2`. */
   heading: string
-  /** **(Optional)** Specify which banner variant to use. */
+  /** **(Optional)** Specify the AlertBanner variant. */
   variant?: "black" | "default"
 }
 
 export const AlertBanner = ({
   children,
-  className = "",
+  className,
   heading,
   variant = "default",
   ...props
 }: AlertBannerProps): JSX.Element => {
   const componentProps = {
-    className: `coop-alert-banner ${className}`,
+    className: clsx("coop-alert-banner", className),
     "data-variant": variant,
     ...props,
   }

package/src/components/Author/Author.tsx

@@ -1,23 +1,25 @@
 import type { HTMLAttributes, JSX } from "react"
 
+import clsx from "clsx"
+
 import { Image, ImageProps } from "../Image"
 
 export interface AuthorProps extends HTMLAttributes<HTMLDivElement> {
-  /** **(Optional)** Specify the content author. */
+  /** **(Optional)** Specify the Author name. */
   author?: string
-  /** **(Optional)** Additional CSS classes to be applied to the component. */
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
   className?: string
-  /** **(Optional)** Specify the date. Refer to Experience Library guidance on date formats. We advise using the following format (dd mmmm yyyy) eg: 1 January 2000.   */
+  /** **(Optional)** Specify the date. Refer to Experience Library guidance on date formats. We advise using the following format (dd mmmm yyyy) eg: 1 January 2000.  */
   date?: string
   /** **(Optional)** Specify the text that will prefix the date, e.g. "Published". */
   datePrefix?: string
-  /** **(Optional)** Specify Image properties of the Author avatar. */
+  /** **(Optional)** Specify properties of the Author Image. */
   image?: ImageProps
 }
 
 export const Author = ({
   author = "Co-op team",
-  className = "",
+  className,
   date,
   datePrefix = "",
   image = {
@@ -32,7 +34,7 @@ export const Author = ({
   }
 
   const componentProps = {
-    className: `coop-author ${className}`,
+    className: clsx("coop-author", className),
     ...props,
   }
   return (

package/src/components/Button/Button.tsx

@@ -5,33 +5,34 @@ import type {
   JSX,
 } from "react"
 
+import clsx from "clsx"
 import React, { useCallback, useState } from "react"
 
 import { LoadingIcon } from "../Icon"
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  /** **(Optional)** Specifies the custom element to override default `a` or `button`. */
+  /** **(Optional)** Specify a custom element to override default `a` or `button`. */
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string
-  /** **(Optional)** Represents the content inside the Button component. It can be any valid JSX or string. */
+  /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
   children?: React.ReactNode
-  /** **(Optional)** Receives any className to be applied to Button component. */
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
   className?: string
-  /** **(Optional)** Specifies the URL that the Button component will link to when clicked. */
+  /** **(Optional)** Specify the URL that the Button component will link to when clicked. */
   href?: string
-  /** **(Optional)** Specifies whether the Button should be disabled. This will not actually disable the button, just make it look disabled. Disabled buttons can be bad UX.  */
+  /** **(Optional)** Specify whether the Button should be disabled. This will not actually disable the button, just make it look disabled. Refer to Experience Library guidance on disabled buttons and accessibility.  */
   isDisabled?: boolean
-  /** **(Optional)** Specifies whether the Button should be full width. */
+  /** **(Optional)** Specify whether the Button should be full width. Refer to Experience Library guidance on full width buttons. */
   isFullWidth?: boolean
-  /** **(Optional)** Specifies whether the Button is loading. */
+  /** **(Optional)** Force the Button into a loading state. */
   isLoading?: boolean
-  /** **(Optional)** Specifies loading text to show when the Button is in a pending state */
+  /** **(Optional)** Specify text to show when the Button is in a loading state. */
   loadingText?: string
   /** **(Optional)** Callback to run when the button is pressed. If this is an async function, it will be awaited and the button will be in a pending state until the promise is resolved. */
   onClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void
-  /** **(Optional)** Specifies the Button size. */
+  /** **(Optional)** Specify the Button size. */
   size?: "sm" | "md" | "lg" | "xl"
-  /** **(Optional)** Specifies the Button variant. */
+  /** **(Optional)** Specify the Button variant. */
   variant?:
     | "green"
     | "blue"
@@ -51,7 +52,7 @@ type OnClickHandler =
 export const Button = ({
   as,
   children,
-  className = "",
+  className,
   href,
   isDisabled = false,
   isFullWidth = false,
@@ -87,7 +88,7 @@ export const Button = ({
   const componentProps = {
     "aria-disabled": isDisabled ? true : undefined,
     "aria-live": "assertive" as keyof ButtonHTMLAttributes<HTMLButtonElement>["aria-live"],
-    className: `${variant == "text" ? "coop-link" : "coop-button"} ${className}`,
+    className: clsx(variant == "text" ? "coop-link" : "coop-button", className),
     "data-loading": isLoading || isPending ? true : undefined,
     "data-size": size.length && size !== "md" ? size : undefined,
     "data-variant": variant !== "text" ? variant : undefined,

package/src/components/Card/Card.tsx

@@ -5,40 +5,41 @@ import React from "react"
 
 import { bgPropToClass } from "../../../src/utils"
 import { Lights, Tints } from "../../types/colors"
+import { ChevronRightIcon } from "../Icon"
 import { Image, ImageProps } from "../Image"
 
 export interface CardProps extends HTMLAttributes<HTMLDivElement> {
   //export interface CardProps {
-  /** **(Optional)** Specifies the custom element to override default `a` */
+  /** **(Optional)** Specify a custom element to override default `a`. */
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string
-  /** **(Optional)** Specifies the background color of the card. */
+  /** **(Optional)** Specify the Card background color. */
   background?: Tints
-  /** **(Optional)** Represents the content inside the badge. */
+  /** **(Optional)** Specify text to display inside the badge. */
   badge?: React.ReactNode
   /** **(Optional)** Specify badge position relative to top right corner. */
   badgePosition?: "inset" | "popout"
-  /** **(Optional)** Specifies if chevron will be visible. */
+  /** **(Optional)** Specify whether chevron is visible. */
   chevron?: boolean
-  /** **(Optional)** Represents the content inside the Card component. It can be any valid JSX or string. */
+  /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
   children?: React.ReactNode
-  /** **(Optional)** Receives any className to be applied to Card component. */
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
   className?: string
-  /** Specifies the heading of the Card */
+  /** Specify the Card heading. */
   heading: string
-  /** **(Optional)** Specifies the heading level of the card's heading. */
+  /** **(Optional)** Specify the level of the Card heading. */
   headingLevel?: "h2" | "h3" | "h4" | "h5" | "h6"
-  /** **(Optional)** Specifies the URL that the Card component will link to when clicked. */
+  /** **(Optional)** Specify the URL that the Card component will link to when clicked. */
   href?: string
-  /** Specifies the image properties of the Card */
+  /** Specify properties of the Card Image. */
   image: ImageProps
-  /** **(Optional)** Specifies the position of the image in the Card */
+  /** **(Optional)** Specify the position of the image in the Card. */
   imagePosition?: "left" | "right"
-  /** **(Optional)** Specifies the label of the Card */
+  /** **(Optional)** Specify the Card label. */
   label?: string
-  /** **(Optional)** Specifies the label background of the Card */
+  /** **(Optional)** Specify the background color of the Card label. */
   labelBackground?: Lights
-  /** **(Optional)** Specifies the layout of the Card */
+  /** **(Optional)** Specify the layout of the Card. */
   layout?: "vertical" | "horizontal"
 }
 
@@ -65,7 +66,7 @@ export const Card = ({
   badgePosition = "inset",
   chevron = false,
   children,
-  className = "",
+  className,
   heading,
   headingLevel = "h3",
   href,
@@ -116,9 +117,7 @@ export const Card = ({
         </div>
         {chevron && (
           <span aria-hidden="true" className="coop-card--icon" role="presentation">
-            <svg viewBox="0 0 16 29">
-              <path d="M2 28.1a1.6 1.6 0 0 1-1.2-2.7l11-10.9-11-11A1.6 1.6 0 1 1 3 1.5l12 12a1.6 1.6 0 0 1 0 2.2l-12 12c-.3.4-.7.5-1 .5z" />
-            </svg>
+            <ChevronRightIcon />
           </span>
         )}
       </div>

package/src/components/Expandable/Expandable.tsx

@@ -4,22 +4,23 @@ import { clsx } from "clsx"
 
 import { bgPropToClass } from "../../../src/utils"
 import { None, Tints, White } from "../../types/colors"
+import { ChevronDownIcon } from "../Icon"
 
 export interface ExpandableProps extends DetailsHTMLAttributes<HTMLDetailsElement> {
-  /** **(Optional)** Specifies the Expandable background color from the available options. */
+  /** **(Optional)** Specify the Expandable background color. */
   background?: Tints | White | None
-  /** Represents the content inside the Expandable component, only visible when expanded. It can be any valid JSX or string. */
+  /** Main content inside the component, only visible when it is open. It can be any valid JSX or string. */
   children: React.ReactNode
-  /** **(Optional)** Receives any className to be applied to Expandable component. */
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
   className?: string
-  /** Specifies summary for this component. It can be any valid JSX or string. */
+  /** Specify the summary text to show when the Expandable is not open. */
   summary: React.ReactNode
 }
 
 export const Expandable = ({
   background = "tint-grey",
   children,
-  className = "",
+  className,
   summary,
   ...props
 }: ExpandableProps): JSX.Element => {
@@ -31,15 +32,12 @@ export const Expandable = ({
     <details {...componentProps} style={{ "--background-color": `var(--color-${background})` }}>
       <summary>
         {summary}
-        <svg fill="none" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
-          <path
-            d="m20.25 9.75-6.22 6.22a.75.75 0 0 1-1.06 0L6.75 9.75"
-            stroke="black"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth="1.5"
-          />
-        </svg>
+        <ChevronDownIcon
+          className="coop-expandable--icon"
+          stroke="currentColor"
+          strokeWidth={2}
+          width="12"
+        />
       </summary>
       <div className="coop-expandable--content">{children}</div>
     </details>

package/src/components/Icon/AddIcon.tsx

@@ -1,16 +1,17 @@
+import clsx from "clsx"
 import { type SVGProps, useId } from "react"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const AddIcon = ({ alt, className, ...props }: IconProps) => {
+export const AddIcon = ({ alt, className, fill, ...props }: IconProps) => {
   const id = useId()
   const componentProps = {
     "aria-labelledby": alt ? id : undefined,
-    className: `coop-icon ${className ?? ""}`.trim(),
+    className: clsx("coop-icon", className),
     "data-icon": "add",
-    fill: "none",
+    fill: fill ?? "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
     ...props,
@@ -20,11 +21,11 @@ export const AddIcon = ({ alt, className, ...props }: IconProps) => {
       {alt ? <title id={id}>{alt}</title> : null}
       <path
         d="M24.7 16.72a1 1 0 0 1-.7.28H8a1 1 0 1 1 0-2h16a1 1 0 0 1 1 1 1 1 0 0 1-.3.72"
-        fill="currentColor"
+        fill={fill ?? "currentColor"}
       />
       <path
         d="M16.72 24.7a1 1 0 0 1-.72.3 1 1 0 0 1-1-1V8a1 1 0 0 1 2 0v16a1 1 0 0 1-.28.7"
-        fill="currentColor"
+        fill={fill ?? "currentColor"}
       />
     </svg>
   )

package/src/components/Icon/ArrowDownIcon.tsx

@@ -1,16 +1,17 @@
+import clsx from "clsx"
 import { type SVGProps, useId } from "react"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const ArrowDownIcon = ({ alt, className, ...props }: IconProps) => {
+export const ArrowDownIcon = ({ alt, className, fill, ...props }: IconProps) => {
   const id = useId()
   const componentProps = {
     "aria-labelledby": alt ? id : undefined,
-    className: `coop-icon ${className ?? ""}`.trim(),
+    className: clsx("coop-icon", className),
     "data-icon": "arrow-down",
-    fill: "none",
+    fill: fill ?? "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
     ...props,
@@ -18,10 +19,10 @@ export const ArrowDownIcon = ({ alt, className, ...props }: IconProps) => {
   return (
     <svg {...componentProps}>
       {alt ? <title id={id}>{alt}</title> : null}
-      <path d="M15 28.66V3a1 1 0 0 1 2 0v25.66a1 1 0 0 1-2 0" fill="currentColor" />
+      <path d="M15 28.66V3a1 1 0 0 1 2 0v25.66a1 1 0 0 1-2 0" fill={fill ?? "currentColor"} />
       <path
         d="M3 17a1 1 0 0 1 .29-.71 1 1 0 0 1 1.42 0L16 27.58l11.29-11.29a1 1 0 0 1 1.42 0 1 1 0 0 1 0 1.41l-12 12a1 1 0 0 1-1.41 0l-12-12A1 1 0 0 1 3 17"
-        fill="currentColor"
+        fill={fill ?? "currentColor"}
       />
     </svg>
   )

package/src/components/Icon/ArrowLeftIcon.tsx

@@ -1,16 +1,17 @@
+import clsx from "clsx"
 import { type SVGProps, useId } from "react"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const ArrowLeftIcon = ({ alt, className, ...props }: IconProps) => {
+export const ArrowLeftIcon = ({ alt, className, fill, ...props }: IconProps) => {
   const id = useId()
   const componentProps = {
     "aria-labelledby": alt ? id : undefined,
-    className: `coop-icon ${className ?? ""}`.trim(),
+    className: clsx("coop-icon", className),
     "data-icon": "arrow-left",
-    fill: "none",
+    fill: fill ?? "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
     ...props,
@@ -18,10 +19,10 @@ export const ArrowLeftIcon = ({ alt, className, ...props }: IconProps) => {
   return (
     <svg {...componentProps}>
       {alt ? <title id={id}>{alt}</title> : null}
-      <path d="M3.34 17H29a1 1 0 0 0 0-2H3.34a1 1 0 0 0 0 2" fill="currentColor" />
+      <path d="M3.34 17H29a1 1 0 0 0 0-2H3.34a1 1 0 0 0 0 2" fill={fill ?? "currentColor"} />
       <path
         d="M15 29a1 1 0 0 0 .71-.29 1 1 0 0 0 0-1.42L5.12 16.71a1 1 0 0 1 0-1.42L15.71 4.71a1 1 0 0 0 0-1.42 1 1 0 0 0-1.41 0l-12 12a1 1 0 0 0 0 1.42l12 12a1 1 0 0 0 .7.29"
-        fill="currentColor"
+        fill={fill ?? "currentColor"}
       />
     </svg>
   )

package/src/components/Icon/ArrowRightIcon.tsx

@@ -1,16 +1,17 @@
+import clsx from "clsx"
 import { type SVGProps, useId } from "react"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const ArrowRightIcon = ({ alt, className, ...props }: IconProps) => {
+export const ArrowRightIcon = ({ alt, className, fill, ...props }: IconProps) => {
   const id = useId()
   const componentProps = {
     "aria-labelledby": alt ? id : undefined,
-    className: `coop-icon ${className ?? ""}`.trim(),
+    className: clsx("coop-icon", className),
     "data-icon": "arrow-right",
-    fill: "none",
+    fill: fill ?? "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
     ...props,
@@ -18,10 +19,10 @@ export const ArrowRightIcon = ({ alt, className, ...props }: IconProps) => {
   return (
     <svg {...componentProps}>
       {alt ? <title id={id}>{alt}</title> : null}
-      <path d="M28.7 15H3a1 1 0 0 0 0 2h25.7a1 1 0 0 0 0-2" fill="currentColor" />
+      <path d="M28.7 15H3a1 1 0 0 0 0 2h25.7a1 1 0 0 0 0-2" fill={fill ?? "currentColor"} />
       <path
         d="M17 3a1 1 0 0 0-.7.3 1 1 0 0 0 0 1.4l10.6 10.6a1 1 0 0 1 0 1.4L16.3 27.3a1 1 0 0 0 0 1.4 1 1 0 0 0 1.4 0l12-12a1 1 0 0 0 0-1.4l-12-12A1 1 0 0 0 17 3"
-        fill="currentColor"
+        fill={fill ?? "currentColor"}
       />
     </svg>
   )

package/src/components/Icon/ArrowUpIcon.tsx

@@ -1,16 +1,17 @@
+import clsx from "clsx"
 import { type SVGProps, useId } from "react"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const ArrowUpIcon = ({ alt, className, ...props }: IconProps) => {
+export const ArrowUpIcon = ({ alt, className, fill, ...props }: IconProps) => {
   const id = useId()
   const componentProps = {
     "aria-labelledby": alt ? id : undefined,
-    className: `coop-icon ${className ?? ""}`.trim(),
+    className: clsx("coop-icon", className),
     "data-icon": "arrow-up",
-    fill: "none",
+    fill: fill ?? "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
     ...props,
@@ -18,10 +19,10 @@ export const ArrowUpIcon = ({ alt, className, ...props }: IconProps) => {
   return (
     <svg {...componentProps}>
       {alt ? <title id={id}>{alt}</title> : null}
-      <path d="M17 3.34V29a1 1 0 0 1-2 0V3.34a1 1 0 0 1 2 0" fill="currentColor" />
+      <path d="M17 3.34V29a1 1 0 0 1-2 0V3.34a1 1 0 0 1 2 0" fill={fill ?? "currentColor"} />
       <path
         d="M29 15a1 1 0 0 1-.29.71 1 1 0 0 1-1.42 0L16 4.42 4.71 15.71a1 1 0 0 1-1.42 0 1 1 0 0 1 0-1.41l12-12a1 1 0 0 1 1.41 0l12 12a1 1 0 0 1 .3.7"
-        fill="currentColor"
+        fill={fill ?? "currentColor"}
       />
     </svg>
   )

package/src/components/Icon/AvatarAltIcon.tsx

@@ -1,16 +1,17 @@
+import clsx from "clsx"
 import { type SVGProps, useId } from "react"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const AvatarAltIcon = ({ alt, className, ...props }: IconProps) => {
+export const AvatarAltIcon = ({ alt, className, fill, ...props }: IconProps) => {
   const id = useId()
   const componentProps = {
     "aria-labelledby": alt ? id : undefined,
-    className: `coop-icon ${className ?? ""}`.trim(),
+    className: clsx("coop-icon", className),
     "data-icon": "avatar-alt",
-    fill: "none",
+    fill: fill ?? "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
     ...props,
@@ -20,15 +21,15 @@ export const AvatarAltIcon = ({ alt, className, ...props }: IconProps) => {
       {alt ? <title id={id}>{alt}</title> : null}
       <path
         d="M16 32a16 16 0 1 1 16-16 16 16 0 0 1-16 16m0-30a14 14 0 1 0 14 14A14 14 0 0 0 16 2"
-        fill="currentColor"
+        fill={fill ?? "currentColor"}
       />
       <path
         d="M16 8a5 5 0 1 1-5 5 5 5 0 0 1 5-5m0-2a7 7 0 1 0 7 7 7 7 0 0 0-7-7"
-        fill="currentColor"
+        fill={fill ?? "currentColor"}
       />
       <path
         d="M5.64 27.85a.7.7 0 0 1-.19 0 1 1 0 0 1-.79-1.17A10.7 10.7 0 0 1 15.16 18h1.68a10.7 10.7 0 0 1 10.5 8.67 1 1 0 0 1-.79 1.17 1 1 0 0 1-1.17-.84 8.72 8.72 0 0 0-8.54-7h-1.68a8.72 8.72 0 0 0-8.54 7 1 1 0 0 1-.98.85"
-        fill="currentColor"
+        fill={fill ?? "currentColor"}
       />
     </svg>
   )

package/src/components/Icon/AvatarIcon.tsx

@@ -1,16 +1,17 @@
+import clsx from "clsx"
 import { type SVGProps, useId } from "react"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const AvatarIcon = ({ alt, className, ...props }: IconProps) => {
+export const AvatarIcon = ({ alt, className, fill, ...props }: IconProps) => {
   const id = useId()
   const componentProps = {
     "aria-labelledby": alt ? id : undefined,
-    className: `coop-icon ${className ?? ""}`.trim(),
+    className: clsx("coop-icon", className),
     "data-icon": "avatar",
-    fill: "none",
+    fill: fill ?? "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
     ...props,
@@ -20,11 +21,11 @@ export const AvatarIcon = ({ alt, className, ...props }: IconProps) => {
       {alt ? <title id={id}>{alt}</title> : null}
       <path
         d="M16 31a18.24 18.24 0 0 1-12.64-5.1A1.19 1.19 0 0 1 3 24.86a12.31 12.31 0 0 1 12-10h2a12.31 12.31 0 0 1 12 10 1.19 1.19 0 0 1-.34 1.06A18.24 18.24 0 0 1 16 31M5.42 24.68a15.9 15.9 0 0 0 21.16 0A10 10 0 0 0 17 17.17h-2a10 10 0 0 0-9.58 7.51"
-        fill="currentColor"
+        fill={fill ?? "currentColor"}
       />
       <path
         d="M15.94 3.33a5.77 5.77 0 1 1-5.72 5.77 5.75 5.75 0 0 1 5.72-5.77m0-2.31a8.08 8.08 0 1 0 8 8.08 8 8 0 0 0-8-8.08"
-        fill="currentColor"
+        fill={fill ?? "currentColor"}
       />
     </svg>
   )

package/src/components/Icon/BasketIcon.tsx

@@ -1,16 +1,17 @@
+import clsx from "clsx"
 import { type SVGProps, useId } from "react"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const BasketIcon = ({ alt, className, ...props }: IconProps) => {
+export const BasketIcon = ({ alt, className, fill, ...props }: IconProps) => {
   const id = useId()
   const componentProps = {
     "aria-labelledby": alt ? id : undefined,
-    className: `coop-icon ${className ?? ""}`.trim(),
+    className: clsx("coop-icon", className),
     "data-icon": "basket",
-    fill: "none",
+    fill: fill ?? "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
     ...props,
@@ -20,11 +21,11 @@ export const BasketIcon = ({ alt, className, ...props }: IconProps) => {
       {alt ? <title id={id}>{alt}</title> : null}
       <path
         d="M16.07 26a1 1 0 0 0 1-1v-4.08a1 1 0 1 0-2 0V25a1 1 0 0 0 1 1M21.5 26h.17a1 1 0 0 0 1-.85l.68-4.07a1 1 0 0 0-.82-1.18 1 1 0 0 0-1.16.84l-.67 4.07a1 1 0 0 0 .8 1.19M10.43 26h.17a1 1 0 0 0 .82-1.18l-.68-4.07a1 1 0 0 0-1.15-.84 1 1 0 0 0-.82 1.18l.67 4.07a1 1 0 0 0 .99.84"
-        fill="currentColor"
+        fill={fill ?? "currentColor"}
       />
       <path
         d="M31 10.7h-3.11l-8.25-8.4a1 1 0 0 0-1.41 0 1 1 0 0 0 0 1.44l6.83 7H6.85l6.8-6.93a1 1 0 0 0 0-1.44 1 1 0 0 0-1.42 0l-8.14 8.25a1 1 0 0 0 0 .08H1a1 1 0 0 0-1 1v5.1a1 1 0 0 0 1 1h1.23l1.88 11.36a1 1 0 0 0 1 .84H27a1 1 0 0 0 1-.84l1.88-11.34H31a1 1 0 0 0 1-1v-5.1a1 1 0 0 0-1-1.02M26.15 28H5.94L4.28 18h23.53ZM30 15.79H2v-3.06h28Z"
-        fill="currentColor"
+        fill={fill ?? "currentColor"}
       />
     </svg>
   )

package/src/components/Icon/CalendarIcon.tsx

@@ -1,16 +1,17 @@
+import clsx from "clsx"
 import { type SVGProps, useId } from "react"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const CalendarIcon = ({ alt, className, ...props }: IconProps) => {
+export const CalendarIcon = ({ alt, className, fill, ...props }: IconProps) => {
   const id = useId()
   const componentProps = {
     "aria-labelledby": alt ? id : undefined,
-    className: `coop-icon ${className ?? ""}`.trim(),
+    className: clsx("coop-icon", className),
     "data-icon": "calendar",
-    fill: "none",
+    fill: fill ?? "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
     ...props,
@@ -20,11 +21,11 @@ export const CalendarIcon = ({ alt, className, ...props }: IconProps) => {
       {alt ? <title id={id}>{alt}</title> : null}
       <path
         d="M31 2h-4V1a1 1 0 0 0-2 0v1H7V1a1 1 0 0 0-2 0v1H1a1 1 0 0 0-1 1v28a1 1 0 0 0 1 1h30a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1m-1 28H2V10h28Zm0-22H2V4h3v1a1 1 0 0 0 2 0V4h18v1a1 1 0 0 0 2 0V4h3Z"
-        fill="currentColor"
+        fill={fill ?? "currentColor"}
       />
       <path
         d="M6 23v2a1 1 0 0 0 2 0v-1h7v1a1 1 0 0 0 2 0v-1h7v1a1 1 0 0 0 2 0V15a1 1 0 0 0-2 0v1h-7v-1a1 1 0 0 0-2 0v1H8v-1a1 1 0 0 0-2 0v8m18-1h-7v-4h7Zm-9-4v4H8v-4Z"
-        fill="currentColor"
+        fill={fill ?? "currentColor"}
       />
     </svg>
   )

package/src/components/Icon/ChevronDownIcon.tsx

@@ -1,16 +1,17 @@
+import clsx from "clsx"
 import { type SVGProps, useId } from "react"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const ChevronDownIcon = ({ alt, className, ...props }: IconProps) => {
+export const ChevronDownIcon = ({ alt, className, fill, ...props }: IconProps) => {
   const id = useId()
   const componentProps = {
     "aria-labelledby": alt ? id : undefined,
-    className: `coop-icon ${className ?? ""}`.trim(),
+    className: clsx("coop-icon", className),
     "data-icon": "chevron-down",
-    fill: "none",
+    fill: fill ?? "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
     ...props,
@@ -20,7 +21,7 @@ export const ChevronDownIcon = ({ alt, className, ...props }: IconProps) => {
       {alt ? <title id={id}>{alt}</title> : null}
       <path
         d="M31 9a1 1 0 0 0-.29-.71 1 1 0 0 0-1.42 0L16 21.59 2.71 8.3a1 1 0 0 0-1.42 0 1 1 0 0 0 0 1.41l14 14a1 1 0 0 0 1.41 0l14-14A1 1 0 0 0 31 9"
-        fill="currentColor"
+        fill={fill ?? "currentColor"}
       />
     </svg>
   )