@coopdigital/react 0.19.5 → 0.19.6

package/src/components/Icon/PencilIcon.tsx

@@ -1,16 +1,17 @@
+import clsx from "clsx"
 import { type SVGProps, useId } from "react"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const PencilIcon = ({ alt, className, ...props }: IconProps) => {
+export const PencilIcon = ({ 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": "pencil",
-    fill: "none",
+    fill: fill ?? "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
     ...props,
@@ -20,7 +21,7 @@ export const PencilIcon = ({ alt, className, ...props }: IconProps) => {
       {alt ? <title id={id}>{alt}</title> : null}
       <path
         d="M31.7 6.12 25.88.3a1 1 0 0 0-1.4 0L1.3 23.47a.86.86 0 0 0-.3.6L0 30.9a1.14 1.14 0 0 0 .3.8.91.91 0 0 0 .7.3h.1l6.82-1a.61.61 0 0 0 .61-.3L31.7 7.52a1 1 0 0 0 0-1.4M7.22 29l-3.57.56L5.08 28a1 1 0 0 0 0-1.42 1 1 0 0 0-1.41.05L2.39 28l.52-3.29 1.91-1.91 4.12 4.52Zm3.14-3.11-4.12-4.54L25.18 2.41l4.41 4.41Z"
-        fill="currentColor"
+        fill={fill ?? "currentColor"}
       />
     </svg>
   )

package/src/components/Icon/PhoneIcon.tsx

@@ -1,16 +1,17 @@
+import clsx from "clsx"
 import { type SVGProps, useId } from "react"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const PhoneIcon = ({ alt, className, ...props }: IconProps) => {
+export const PhoneIcon = ({ 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": "phone",
-    fill: "none",
+    fill: fill ?? "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
     ...props,
@@ -20,7 +21,7 @@ export const PhoneIcon = ({ alt, className, ...props }: IconProps) => {
       {alt ? <title id={id}>{alt}</title> : null}
       <path
         d="M28.88 21.26c-2.26-1.72-5.46-2.84-7-1.42-.51.51-1.65 1.52-5.15-1.42-5.73-5.37-5.47-7.29-4.44-8.42 1.44-1.52.41-4.66-1.34-6.89C8.78.38 6.21-.63 4.14.38a6.53 6.53 0 0 0-4 4.67c-.94 4.66 3.49 10.64 7.3 14.89.72.81 1.45 1.52 2.17 2.33l.41.41C14.45 27 20.53 32 25.58 32a4.4 4.4 0 0 0 1.14-.1 6.64 6.64 0 0 0 5-3.95c.87-2.03-.16-4.56-2.84-6.69m-13.6-1.32c2.06 1.72 5.25 3.75 7.93 1.42.42-.3 2.37 0 4.44 1.52 1.44 1.12 2.78 2.84 2.06 4.12a4.45 4.45 0 0 1-3.4 2.84c-3.3.51-8.77-2.63-14.85-8.71l-.31-.31c-.72-.71-1.44-1.41-2.16-2.23H9C4 13.15 1.57 8.49 2.19 5.45a4.69 4.69 0 0 1 2.88-3.24c1.34-.71 3.09.71 4.13 2.13 1.54 2 1.85 3.95 1.44 4.35-2.89 3 .1 6.89 3.92 10.64"
-        fill="currentColor"
+        fill={fill ?? "currentColor"}
       />
     </svg>
   )

package/src/components/Icon/QuestionIcon.tsx

@@ -1,16 +1,17 @@
+import clsx from "clsx"
 import { type SVGProps, useId } from "react"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const QuestionIcon = ({ alt, className, ...props }: IconProps) => {
+export const QuestionIcon = ({ 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": "question",
-    fill: "none",
+    fill: fill ?? "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
     ...props,
@@ -20,11 +21,11 @@ export const QuestionIcon = ({ alt, className, ...props }: IconProps) => {
       {alt ? <title id={id}>{alt}</title> : null}
       <path
         d="M16 0a16 16 0 1 0 16 16A16 16 0 0 0 16 0m0 30a14 14 0 1 1 14-14 14 14 0 0 1-14 14"
-        fill="currentColor"
+        fill={fill ?? "currentColor"}
       />
       <path
         d="M15.89 20.32a1.58 1.58 0 0 0-1.14.46 1.5 1.5 0 0 0-.47 1.1 1.3 1.3 0 0 0 .13.6 1.6 1.6 0 0 0 .35.48 1.7 1.7 0 0 0 .51.33 1.6 1.6 0 0 0 .62.12 1.55 1.55 0 0 0 1.11-.47 1.48 1.48 0 0 0 .47-1.1 1.4 1.4 0 0 0-.47-1.08 1.6 1.6 0 0 0-1.11-.44M19.11 9.71A4.3 4.3 0 0 0 17.74 9a5.2 5.2 0 0 0-1.63-.25 5.4 5.4 0 0 0-1.73.25 4.5 4.5 0 0 0-1.38.78 4.3 4.3 0 0 0-1 1.28 5 5 0 0 0-.51 1.71l2.41.23a2.7 2.7 0 0 1 .16-.78 1.9 1.9 0 0 1 .41-.67 2.1 2.1 0 0 1 .64-.46 1.9 1.9 0 0 1 .84-.17 1.78 1.78 0 0 1 1.39.53 1.84 1.84 0 0 1 .49 1.31 1.9 1.9 0 0 1-.27 1 4 4 0 0 1-.65.76l-.9.86a5.4 5.4 0 0 0-.63.68 3.05 3.05 0 0 0-.63 1.39 5.4 5.4 0 0 0-.07.86v.76h2.37v-.52a4 4 0 0 1 .06-.74 1.8 1.8 0 0 1 .21-.56 2.7 2.7 0 0 1 .4-.52c.17-.18.39-.38.65-.61s.59-.52.84-.77a5 5 0 0 0 .63-.77 3.4 3.4 0 0 0 .4-.88 4.2 4.2 0 0 0 .14-1.13 3.8 3.8 0 0 0-.38-1.64 3.6 3.6 0 0 0-.89-1.22"
-        fill="currentColor"
+        fill={fill ?? "currentColor"}
       />
     </svg>
   )

package/src/components/Icon/ScooterIcon.tsx

@@ -1,16 +1,17 @@
+import clsx from "clsx"
 import { type SVGProps, useId } from "react"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const ScooterIcon = ({ alt, className, ...props }: IconProps) => {
+export const ScooterIcon = ({ 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": "scooter",
-    fill: "none",
+    fill: fill ?? "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
     ...props,
@@ -22,15 +23,15 @@ export const ScooterIcon = ({ alt, className, ...props }: IconProps) => {
         <path d="M41.292 18.293a1 1 0 0 1 1.414 0C43.88 19.465 44.6 21.014 44.6 22.8c0 3.452-2.747 6.2-6.2 6.2-3.333 0-6.08-2.622-6.2-5.964a1 1 0 1 1 2-.072 4.19 4.19 0 0 0 4.2 4.036c2.348 0 4.2-1.852 4.2-4.2 0-1.214-.48-2.265-1.307-3.093a1 1 0 0 1 0-1.414M1.1 23a9.28 9.28 0 0 1 9.3-9.3 9.28 9.28 0 0 1 9.3 9.3 1 1 0 0 1-1 1H2.1a1 1 0 0 1-1-1m2.067-1h14.466a7.28 7.28 0 0 0-7.233-6.3A7.28 7.28 0 0 0 3.167 22" />
         <path
           d="M34.754 13.161c3.98-1.476 8.72.438 10.545 4.203a1 1 0 1 1-1.8.872c-1.374-2.834-5.032-4.32-8.052-3.199l-.006.003c-.933.339-1.796.939-2.494 1.724a1 1 0 0 1-1.495-1.328c.9-1.014 2.036-1.813 3.302-2.275M10.4 29.3a6.164 6.164 0 0 1-6.2-6.2h2c0 2.348 1.852 4.2 4.2 4.2s4.2-1.852 4.2-4.2h2c0 3.452-2.749 6.2-6.2 6.2"
-          fill="currentColor"
+          fill={fill ?? "currentColor"}
         />
         <path
           d="M21.3 1a1 1 0 0 1 1-1h5.1a1 1 0 0 1 .869.503l7.1 12.4a1 1 0 1 1-1.736.994L26.821 2h-4.52a1 1 0 0 1-1-1M8.585 9.2c3.42-.1 6.556-.012 9.806 1.829 2.713 1.52 4.878 4.116 5.858 7.055a1 1 0 0 1-1.898.632c-.82-2.46-2.654-4.663-4.94-5.943l-.004-.003c-2.745-1.555-5.404-1.67-8.778-1.57H8a1 1 0 1 1 0-2z"
-          fill="currentColor"
+          fill={fill ?? "currentColor"}
         />
         <path
           d="M45.33 17.434a1 1 0 0 1-.564 1.297l-12.2 4.8-.05.018c-.966.322-1.976.551-3.116.551H2.1a1 1 0 1 1 0-2h27.3c.851 0 1.634-.167 2.459-.44l12.174-4.79a1 1 0 0 1 1.297.564M0 5.7a1 1 0 0 1 1-1h9.9a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1M1.8 10.2a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1M3.2 1a1 1 0 0 1 1-1h7.1a1 1 0 1 1 0 2H4.2a1 1 0 0 1-1-1"
-          fill="currentColor"
+          fill={fill ?? "currentColor"}
         />
       </g>
       <defs>

package/src/components/Icon/SearchIcon.tsx

@@ -1,16 +1,17 @@
+import clsx from "clsx"
 import { type SVGProps, useId } from "react"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const SearchIcon = ({ alt, className, ...props }: IconProps) => {
+export const SearchIcon = ({ 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": "search",
-    fill: "none",
+    fill: fill ?? "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
     ...props,
@@ -20,11 +21,11 @@ export const SearchIcon = ({ alt, className, ...props }: IconProps) => {
       {alt ? <title id={id}>{alt}</title> : null}
       <path
         d="M13.25 25.49a12.25 12.25 0 1 1 12.24-12.24 12.25 12.25 0 0 1-12.24 12.24m0-22.61a10.37 10.37 0 1 0 10.36 10.37A10.38 10.38 0 0 0 13.25 2.88"
-        fill="currentColor"
+        fill={fill ?? "currentColor"}
       />
       <path
         d="M30.06 31a.94.94 0 0 1-.67-.28l-8.81-8.81a.94.94 0 1 1 1.33-1.33l8.81 8.81a.94.94 0 0 1 0 1.33.9.9 0 0 1-.66.28"
-        fill="currentColor"
+        fill={fill ?? "currentColor"}
       />
     </svg>
   )

package/src/components/Icon/SettingsIcon.tsx

@@ -1,16 +1,17 @@
+import clsx from "clsx"
 import { type SVGProps, useId } from "react"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const SettingsIcon = ({ alt, className, ...props }: IconProps) => {
+export const SettingsIcon = ({ 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": "settings",
-    fill: "none",
+    fill: fill ?? "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
     ...props,
@@ -20,7 +21,7 @@ export const SettingsIcon = ({ alt, className, ...props }: IconProps) => {
       {alt ? <title id={id}>{alt}</title> : null}
       <path
         d="M16 2a14 14 0 0 1 2.13.16v3.57l1.34.47a10.2 10.2 0 0 1 3.27 1.89l1.08.91 1.23-.71 1.86-1.08a14 14 0 0 1 2.14 3.69L27.18 12l-1.18.7.26 1.39a10.6 10.6 0 0 1 0 3.8L26 19.28l1.23.71 1.88 1.09a14.2 14.2 0 0 1-2.14 3.69l-1.86-1.08-1.28-.69-1.07.92a10.6 10.6 0 0 1-3.3 1.9l-1.33.47v3.57A14 14 0 0 1 16 30a14 14 0 0 1-2.13-.16v-3.57l-1.34-.47a10.2 10.2 0 0 1-3.27-1.9L8.18 23 7 23.69l-1.91 1.08A14.1 14.1 0 0 1 3 21.08L4.82 20l1.23-.71-.26-1.39a10.6 10.6 0 0 1 0-3.8l.26-1.39L4.82 12 3 10.92a14.5 14.5 0 0 1 2.08-3.69l1.86 1.08L8.16 9l1.08-.9a10.6 10.6 0 0 1 3.3-1.9l1.33-.47V2.16A14 14 0 0 1 16 2m0 21a7 7 0 1 0-7-7 7 7 0 0 0 7 7m0-23a16 16 0 0 0-3.53.39.76.76 0 0 0-.6.75v3.18a12.7 12.7 0 0 0-3.93 2.26L5.2 5a.75.75 0 0 0-.38-.1.77.77 0 0 0-.57.25 15.9 15.9 0 0 0-3.53 6.1.78.78 0 0 0 .35.91l2.75 1.59a12.3 12.3 0 0 0 0 4.52l-2.75 1.58a.79.79 0 0 0-.35.9 16 16 0 0 0 3.53 6.11.8.8 0 0 0 .57.25.7.7 0 0 0 .38-.11L8 25.42a12.3 12.3 0 0 0 3.92 2.26v3.18a.77.77 0 0 0 .61.75A16.2 16.2 0 0 0 16 32a16 16 0 0 0 3.53-.39.76.76 0 0 0 .6-.75v-3.18a12.5 12.5 0 0 0 3.92-2.26L26.8 27a.79.79 0 0 0 1-.15 16 16 0 0 0 3.53-6.11.8.8 0 0 0-.36-.9l-2.75-1.59a12.8 12.8 0 0 0 0-4.53l2.75-1.59a.78.78 0 0 0 .35-.9 16.1 16.1 0 0 0-3.53-6.1.76.76 0 0 0-.57-.26.73.73 0 0 0-.42.13l-2.75 1.57a12.3 12.3 0 0 0-3.92-2.26V1.14a.77.77 0 0 0-.61-.75A16.2 16.2 0 0 0 16 0m0 21a5 5 0 1 1 5-5 5 5 0 0 1-5 5"
-        fill="currentColor"
+        fill={fill ?? "currentColor"}
       />
     </svg>
   )

package/src/components/Icon/TickAltIcon.tsx

@@ -1,16 +1,17 @@
+import clsx from "clsx"
 import { type SVGProps, useId } from "react"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const TickAltIcon = ({ alt, className, ...props }: IconProps) => {
+export const TickAltIcon = ({ 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": "tick-alt",
-    fill: "none",
+    fill: fill ?? "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
     ...props,
@@ -20,11 +21,11 @@ export const TickAltIcon = ({ alt, className, ...props }: IconProps) => {
       {alt ? <title id={id}>{alt}</title> : null}
       <path
         d="M12.7 22a1 1 0 0 1-.71-.29L8.3 18a1 1 0 0 1 0-1.42 1 1 0 0 1 1.41 0l3 3 9.41-9.38a1 1 0 0 1 1.42 0 1 1 0 0 1 0 1.41L13.4 21.69a1 1 0 0 1-.7.31"
-        fill="currentColor"
+        fill={fill ?? "currentColor"}
       />
       <path
         d="M16 2A14 14 0 1 1 2 16 14 14 0 0 1 16 2m0-2a16 16 0 1 0 16 16A16 16 0 0 0 16 0"
-        fill="currentColor"
+        fill={fill ?? "currentColor"}
       />
     </svg>
   )

package/src/components/Icon/TickIcon.tsx

@@ -1,16 +1,17 @@
+import clsx from "clsx"
 import { type SVGProps, useId } from "react"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const TickIcon = ({ alt, className, ...props }: IconProps) => {
+export const TickIcon = ({ 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": "tick",
-    fill: "none",
+    fill: fill ?? "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
     ...props,
@@ -20,7 +21,7 @@ export const TickIcon = ({ alt, className, ...props }: IconProps) => {
       {alt ? <title id={id}>{alt}</title> : null}
       <path
         d="M10.41 26a1 1 0 0 1-.71-.3l-6.42-6.59a1 1 0 0 1 1.44-1.39l5.69 5.85L27.28 6.3a1 1 0 1 1 1.44 1.4l-17.59 18a1 1 0 0 1-.72.3"
-        fill="currentColor"
+        fill={fill ?? "currentColor"}
       />
     </svg>
   )

package/src/components/Icon/VanIcon.tsx

@@ -1,16 +1,17 @@
+import clsx from "clsx"
 import { type SVGProps, useId } from "react"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const VanIcon = ({ alt, className, ...props }: IconProps) => {
+export const VanIcon = ({ 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": "van",
-    fill: "none",
+    fill: fill ?? "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
     ...props,
@@ -20,7 +21,7 @@ export const VanIcon = ({ alt, className, ...props }: IconProps) => {
       {alt ? <title id={id}>{alt}</title> : null}
       <path
         d="M31.05 3H9.8a1 1 0 0 0-1 1v.2H3.06a1 1 0 0 0-1 .86L.89 12.64a1 1 0 0 0-.89 1v10a1 1 0 0 0 1 1h3a5 5 0 0 0 9.9 0H18a5 5 0 0 0 9.89 0h3.21a1 1 0 0 0 .72-.3 1 1 0 0 0 .18-.72V4a1 1 0 0 0-.95-1M3.91 6.24H8.8v6.38H2.93ZM8.92 27A3 3 0 0 1 6 24.71a2.9 2.9 0 0 1-.12-.83 3.1 3.1 0 0 1 .25-1.22 3 3 0 0 1 5.53 0 3.3 3.3 0 0 1 .24 1.22 3.3 3.3 0 0 1-.11.83A3 3 0 0 1 8.92 27M23 27a3 3 0 0 1-2.89-2.24 2.9 2.9 0 0 1-.12-.83 3.1 3.1 0 0 1 .25-1.22 3 3 0 0 1 5.53 0 3.3 3.3 0 0 1 .23 1.17 3.3 3.3 0 0 1-.11.83A3 3 0 0 1 23 27m4.87-4.29a5 5 0 0 0-9.74 0H13.8a5 5 0 0 0-9.75 0H2v-8h7.8a1 1 0 0 0 1-1V5.05H30v17.61Z"
-        fill="currentColor"
+        fill={fill ?? "currentColor"}
       />
     </svg>
   )

package/src/components/Icon/WarningIcon.tsx

@@ -1,16 +1,17 @@
+import clsx from "clsx"
 import { type SVGProps, useId } from "react"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const WarningIcon = ({ alt, className, ...props }: IconProps) => {
+export const WarningIcon = ({ 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": "warning",
-    fill: "none",
+    fill: fill ?? "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
     ...props,
@@ -20,11 +21,11 @@ export const WarningIcon = ({ alt, className, ...props }: IconProps) => {
       {alt ? <title id={id}>{alt}</title> : null}
       <path
         d="M2.35 28.08 16.06 4.46l13.71 23.62Zm29.32-.7L17.56 3.07A1.73 1.73 0 0 0 16.06 2a1.94 1.94 0 0 0-1.5 1.1L.35 27.38C-.45 28.77.15 30 1.85 30h28.32a1.6 1.6 0 0 0 1.5-2.62"
-        fill="currentColor"
+        fill={fill ?? "currentColor"}
       />
       <path
         d="M14.52 24.19A1.44 1.44 0 0 1 15 23.1a1.54 1.54 0 0 1 1.13-.46 1.63 1.63 0 0 1 1.12.44 1.39 1.39 0 0 1 .48 1.07 1.48 1.48 0 0 1-.47 1.1 1.62 1.62 0 0 1-1.74.34 1.6 1.6 0 0 1-.51-.32 1.3 1.3 0 0 1-.35-.48 1.3 1.3 0 0 1-.14-.6m2.8-3h-2.4v-9.71h2.4Z"
-        fill="currentColor"
+        fill={fill ?? "currentColor"}
       />
     </svg>
   )

package/src/components/Icon/WriteIcon.tsx

@@ -1,16 +1,17 @@
+import clsx from "clsx"
 import { type SVGProps, useId } from "react"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const WriteIcon = ({ alt, className, ...props }: IconProps) => {
+export const WriteIcon = ({ 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": "write",
-    fill: "none",
+    fill: fill ?? "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
     ...props,
@@ -20,19 +21,19 @@ export const WriteIcon = ({ alt, className, ...props }: IconProps) => {
       {alt ? <title id={id}>{alt}</title> : null}
       <path
         d="M19.67 10.13 17.9 11.9H7a1 1 0 0 1 0-2h12a1 1 0 0 1 .67.23M14.9 14.9l-2 2H7a1 1 0 0 1 0-2ZM20 15.9a1 1 0 0 1-1 1h-1.87l2-2a1 1 0 0 1 .82.59.85.85 0 0 1 .05.41M19 21.9H7a1 1 0 0 1 0-2h12a1 1 0 1 1 0 2"
-        fill="currentColor"
+        fill={fill ?? "currentColor"}
       />
       <path
         d="M24.08 10v20h-22V6h21.73l1.54-1.54a1.9 1.9 0 0 0-1-.44H2.07a2 2 0 0 0-2 2V30a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2V8Z"
-        fill="currentColor"
+        fill={fill ?? "currentColor"}
       />
       <path
         d="M30.62 3.41 28.5 1.29a1 1 0 0 0-1.42 0L22.38 6l-3.9 3.9-5 5-1.33 1.33a1 1 0 0 0-.27.48v.19l-.6 2.57a.8.8 0 0 0 0 .43 1 1 0 0 0 1.19.77l2.74-.67a.64.64 0 0 0 .29-.13.6.6 0 0 0 .19-.14l2.85-2.86 1.4-1.39L30.62 4.82a1 1 0 0 0 0-1.41M15 19.06l-2.75.63.62-2.75 6.82-6.81L23.81 6l1.54-1.54L27.79 2l2.13 2.12Z"
-        fill="currentColor"
+        fill={fill ?? "currentColor"}
       />
       <path
         d="M31.33 2.7 29.21.58a2.06 2.06 0 0 0-2.83 0L11.44 15.52a2.1 2.1 0 0 0-.54 1l-.09.41-.54 2.34a2.18 2.18 0 0 0 .54 1.87 2 2 0 0 0 1.4.58 1.8 1.8 0 0 0 .46-.05l2.75-.67a2.1 2.1 0 0 0 1-.54L31.33 5.53a2 2 0 0 0 0-2.83M15 19.06l-2.75.63.62-2.75 6.82-6.81L23.81 6l1.54-1.54L27.79 2l2.13 2.12Z"
-        fill="currentColor"
+        fill={fill ?? "currentColor"}
       />
     </svg>
   )

package/src/components/Image/Image.tsx

@@ -1,15 +1,15 @@
 import type { HTMLAttributes, JSX } from "react"
 
 export interface ImageProps extends HTMLAttributes<HTMLImageElement> {
-  /** Specifies text that can replace the Image in the page */
+  /** Specify text to describe the image. Refer to Experience Library guidelines on writing good alt text. */
   alt: string
-  /** **(Optional)** Specifies the Image crop mode */
+  /** **(Optional)** Specify the image crop mode. */
   crop?: "square" | "wide" | "none"
-  /** **(Optional)** Specifies height of the Image */
+  /** **(Optional)** Specify the height of the image. */
   height?: string
-  /** Specifies the Image URL */
+  /** Specify the Image source URL. */
   src: string
-  /** **(Optional)** Specifies width of the Image */
+  /** **(Optional)** Specify the width of the image. */
   width?: string
 }
 

package/src/components/Pill/Pill.tsx

@@ -7,22 +7,22 @@ import { bgPropToClass } from "../../../src/utils"
 import { Darks, OfferRed, Tints } from "../../types/colors"
 
 export interface PillProps extends HTMLAttributes<HTMLAnchorElement> {
-  /** **(Optional)** Specifies the custom element to override default `a` or `span`. */
+  /** **(Optional)** Specify a custom element to override default `a` or `span`. */
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string
-  /** **(Optional)** Specifies the Pill background color from the available options. */
+  /** **(Optional)** Specify the Pill background color. */
   background?: Tints
-  /** **(Optional)** Specifies what text Pill should display on the badge. */
+  /** **(Optional)** Specify text to display inside the badge. */
   badge?: string
-  /** **(Optional)** Specifies the badge background color from the available options. */
+  /** **(Optional)** Specify the badge background color. */
   badgeBackground?: Darks | OfferRed
-  /** **(Optional)** Represents the content inside the Pill 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 Pill component. */
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
   className?: string
-  /** **(Optional)** Specifies the URL that the Pill component will link to when clicked. */
+  /** **(Optional)** Specify the URL that the Pill component will link to when clicked. */
   href?: string
-  /** **(Optional)** Specifies what should be the Pill size. */
+  /** **(Optional)** Specify the Pill size. */
   size?: "sm" | "md" | "lg" | "xl"
 }
 
@@ -32,7 +32,7 @@ export const Pill = ({
   badge,
   badgeBackground = "offer-red",
   children,
-  className = "",
+  className,
   href,
   size = "md",
   ...props

package/src/components/RootSVG/RootSVG.tsx

@@ -2,7 +2,7 @@ export const RootSVG = () => {
   return (
     <svg height="0" width="0" xmlns="http://www.w3.org/2000/svg">
       <defs>
-        <clipPath clipPathUnits="objectBoundingBox" id="squircle">
+        <clipPath clipPathUnits="objectBoundingBox" id="coop-squircle">
           <path d="M0,0.5 C0,0.165,0.165,0,0.5,0 S1,0.165,1,0.5 S0.835,1,0.5,1 S0,0.835,0,0.5"></path>
         </clipPath>
       </defs>

package/src/components/SearchBox/SearchBox.tsx

@@ -1,3 +1,4 @@
+import clsx from "clsx"
 import React, { HTMLAttributes, useCallback, useId, useState } from "react"
 import { type JSX } from "react"
 
@@ -5,27 +6,27 @@ import { Button, type ButtonProps } from "../Button"
 import { SearchIcon } from "../Icon"
 
 export interface SearchBoxProps extends HTMLAttributes<HTMLInputElement> {
-  /** **(Optional)** Server endpoint to submit the form. Will be ignored if onSubmit is also set. */
+  /** **(Optional)** Specify a server endpoint to submit the form. Will be ignored if onSubmit is also set. */
   action?: string
-  /** **(Optional)** Whether or not to enable auto complete on the input field. Default: `off`. */
+  /** **(Optional)** Specify whether or not to enable autocomplete on the input field. Default: `off`. */
   autoComplete?: "off" | "on"
-  /** **(Optional)** Props to forward to the Button element. Use `label` to set Button text. */
+  /** **(Optional)** Specify props to forward to the Button element. Use `label` to set Button text. */
   button?: Pick<ButtonProps, "className" | "loadingText"> & { label?: React.ReactNode }
-  /** **(Optional)** Receives any className to be applied to SearchBox component. */
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
   className?: string
-  /** Receives the label to be applied to SearchBox component. */
+  /** Specify the label displayed above the search field. Hidden by default, but visible to screen readers. */
   label: string
-  /** **(Optional)** Receives whether label is visible to human or only screen readers. */
+  /** **(Optional)** Specify whether the label should be visible to humans or screenreaders. */
   labelVisible?: boolean
-  /** **(Optional)** Name of the input element, also used as the URL search parameter. Defaults to `query` */
+  /** **(Optional)** Specify the name of the input element, also used as the URL search parameter. Defaults to `query`. */
   name?: string
   /** **(Optional)** Callback to run when the form is submitted. If this is an async function, it will be awaited and the SearchBox will be in a pending state until the promise is resolved. */
   onSubmit?: React.FormEventHandler<HTMLElement> | undefined
-  /** **(Optional)** Receives any placeholder for SearchBox component. */
+  /** **(Optional)** Specify placeholder text for the search field. Do not in place of a form label. */
   placeholder?: string
-  /** **(Optional)** Receives any size to be applied to SearchBox component. */
+  /** **(Optional)** Specify the SearchBox size. */
   size?: string
-  /** **(Optional)** Receives the variant to be applied to SearchBox component. */
+  /** **(Optional)** Specify the SearchBox variant. */
   variant?:
     | "green"
     | "blue"
@@ -81,7 +82,7 @@ export const SearchBox = ({
 
   const formProps = {
     action: action ?? undefined,
-    className: `coop-search-box ${className ?? ""}`.trim(),
+    className: clsx("coop-search-box", className),
     "data-size": size.length && size !== "md" ? size : undefined,
     "data-variant": variant.length && variant !== "green" ? variant : undefined,
     onSubmit: onSubmit ? handleSubmit : undefined,

package/src/components/Signpost/Signpost.tsx

@@ -1,29 +1,31 @@
 import type { AnchorHTMLAttributes, ForwardRefExoticComponent, HTMLAttributes, JSX } from "react"
 
+import clsx from "clsx"
 import React from "react"
 
+import { ChevronRightIcon } from "../Icon"
 import { Image, ImageProps } from "../Image"
 
 export interface SignpostProps extends HTMLAttributes<HTMLDivElement> {
-  /** **(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
-  /** Represents the heading inside the Signpost component. It can be any valid JSX or string. */
+  /** Main content inside the component. It can be any valid JSX or string. */
   children: React.ReactNode
-  /** **(Optional)** Receives any className to be applied to Signpost component. */
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
   className?: string
-  /** **(Optional)** Specifies the heading level of the signpost's heading. */
+  /** **(Optional)** Specify the level of the Signpost heading. */
   headingLevel?: "h2" | "h3" | "h4" | "h5" | "h6"
-  /** Specifies the URL that the Signpost component will link to when clicked. */
+  /** Specify the URL that the Signpost component will link to when clicked. */
   href: string
-  /** **(Optional)** Specifies the image URL and alt text of the Signpost */
+  /** **(Optional)** Specify properties of the Signpost Image. */
   image?: ImageProps
 }
 
 export const Signpost = ({
   as,
   children,
-  className = "",
+  className,
   headingLevel = "h3",
   href,
   image,
@@ -35,7 +37,7 @@ export const Signpost = ({
   }
 
   const componentProps = {
-    className: `coop-signpost ${className}`,
+    className: clsx("coop-signpost", className),
     ...props,
   }
 
@@ -48,9 +50,7 @@ export const Signpost = ({
         <div className="coop-signpost--content">
           {React.createElement(headingLevel, { className: "coop-signpost--heading" }, children)}
           <span aria-hidden="true" className="coop-signpost--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/SkipNav/SkipNav.tsx

@@ -1,32 +1,32 @@
 import type { HTMLAttributes, JSX } from "react"
 
+import clsx from "clsx"
+
 interface SkipNavLink {
   href: string
   label: string
 }
 
 export interface SkipNavProps extends HTMLAttributes<HTMLDivElement> {
-  /** **(Optional)** Receives any className to be applied to Skip Nav component. */
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
   className?: string
-  /** **(Optional)** Specifies if the component is visible straight away or only when pressing 'Tab'. */
+  /** **(Optional)** Specify whether the SkipNav is visible immediately or only when tabbing. Useful for testing purposes only. */
   isVisible?: boolean
-  /** **(Optional)** Specifies the links that are going to be shown on the Skip Nav.
-   * It is an `array` of items and each item should have `href` and `label` information.
-   *
-   * Defaults to a single link anchored to `#main` */
+  /** **(Optional)** Specify links to show in the SkipNav.
+   * Each item needs a `href` and `label`. Defaults to a single link anchored to `#main`. */
   links?: SkipNavLink[]
 }
 
 const defaultLinks = [{ href: "#main", label: "Skip to main content" }]
 
 export const SkipNav = ({
-  className = "",
+  className,
   isVisible = false,
   links = defaultLinks,
   ...props
 }: SkipNavProps): JSX.Element => {
   const componentProps = {
-    className: `coop-skip-nav ${className}`,
+    className: clsx("coop-skip-nav", className),
     ...props,
   }
   const navLinks = links.length > 0 ? links : defaultLinks