@coopdigital/react 0.54.0 → 0.56.0

package/src/components/icons/AppsIcon.tsx

@@ -0,0 +1,28 @@
+import clsx from "clsx"
+import { type SVGProps } from "react"
+
+import { useId } from "../../hooks/useId"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const AppsIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
+  const componentProps = {
+    "aria-labelledby": alt ? uid + "-title" : undefined,
+    className: clsx("coop-icon", className),
+    "data-icon": "apps",
+    fill: fill ?? "currentColor",
+    id: uid,
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
+  return (
+    <svg {...componentProps} ref={ref}>
+      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      <path d="M13.204 17.01A2 2 0 0 1 15 19v7l-.01.204a2 2 0 0 1-1.786 1.785L13 28H6a2 2 0 0 1-1.99-1.796L4 26v-7a2 2 0 0 1 2-2h7zM26 17a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-7a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2zM6 26h7v-7H6zm7.204-21.99A2 2 0 0 1 15 6v7l-.01.204a2 2 0 0 1-1.786 1.785L13 15H6a2 2 0 0 1-1.99-1.796L4 13V6a2 2 0 0 1 2-2h7zm13 0A2 2 0 0 1 28 6v7l-.01.204a2 2 0 0 1-1.786 1.785L26 15h-7a2 2 0 0 1-1.99-1.796L17 13V6a2 2 0 0 1 2-2h7zM6 13h7V6H6zm13 0h7V6h-7z" />
+    </svg>
+  )
+}

package/src/components/icons/ArrowDownIcon.tsx

@@ -13,7 +13,7 @@ export const ArrowDownIcon = ({ alt, className, fill, id, ref, ...props }: IconP
     "aria-labelledby": alt ? uid + "-title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "arrow-down",
-    fill: fill ?? "none",
+    fill: fill ?? "currentColor",
     id: uid,
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
@@ -22,11 +22,7 @@ export const ArrowDownIcon = ({ alt, className, fill, id, ref, ...props }: IconP
   return (
     <svg {...componentProps} ref={ref}>
       {alt ? <title id={uid + "-title"}>{alt}</title> : null}
-      <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={fill ?? "currentColor"}
-      />
+      <path d="M16 2a1 1 0 0 1 1 1v23.586l10.293-10.293a1 1 0 1 1 1.414 1.414L17.414 29a2 2 0 0 1-2.828 0L3.293 17.707a1 1 0 1 1 1.414-1.414L15 26.586V3a1 1 0 0 1 1-1" />
     </svg>
   )
 }

package/src/components/icons/ArrowLeftIcon.tsx

@@ -13,7 +13,7 @@ export const ArrowLeftIcon = ({ alt, className, fill, id, ref, ...props }: IconP
     "aria-labelledby": alt ? uid + "-title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "arrow-left",
-    fill: fill ?? "none",
+    fill: fill ?? "currentColor",
     id: uid,
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
@@ -22,11 +22,7 @@ export const ArrowLeftIcon = ({ alt, className, fill, id, ref, ...props }: IconP
   return (
     <svg {...componentProps} ref={ref}>
       {alt ? <title id={uid + "-title"}>{alt}</title> : null}
-      <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={fill ?? "currentColor"}
-      />
+      <path d="M15.707 28.707a1 1 0 0 1-1.414 0L3 17.414a2 2 0 0 1 0-2.828L14.293 3.293a1 1 0 1 1 1.414 1.414L5.414 15H29a1 1 0 1 1 0 2H5.414l10.293 10.293a1 1 0 0 1 0 1.414" />
     </svg>
   )
 }

package/src/components/icons/ArrowRightIcon.tsx

@@ -13,7 +13,7 @@ export const ArrowRightIcon = ({ alt, className, fill, id, ref, ...props }: Icon
     "aria-labelledby": alt ? uid + "-title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "arrow-right",
-    fill: fill ?? "none",
+    fill: fill ?? "currentColor",
     id: uid,
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
@@ -22,11 +22,7 @@ export const ArrowRightIcon = ({ alt, className, fill, id, ref, ...props }: Icon
   return (
     <svg {...componentProps} ref={ref}>
       {alt ? <title id={uid + "-title"}>{alt}</title> : null}
-      <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={fill ?? "currentColor"}
-      />
+      <path d="M16.293 3.293a1 1 0 0 1 1.414 0L29 14.586a2 2 0 0 1 0 2.828L17.707 28.707a1 1 0 1 1-1.414-1.414L26.586 17H3a1 1 0 1 1 0-2h23.586L16.293 4.707a1 1 0 0 1 0-1.414" />
     </svg>
   )
 }

package/src/components/icons/ArrowUpIcon.tsx

@@ -13,7 +13,7 @@ export const ArrowUpIcon = ({ alt, className, fill, id, ref, ...props }: IconPro
     "aria-labelledby": alt ? uid + "-title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "arrow-up",
-    fill: fill ?? "none",
+    fill: fill ?? "currentColor",
     id: uid,
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
@@ -22,11 +22,7 @@ export const ArrowUpIcon = ({ alt, className, fill, id, ref, ...props }: IconPro
   return (
     <svg {...componentProps} ref={ref}>
       {alt ? <title id={uid + "-title"}>{alt}</title> : null}
-      <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={fill ?? "currentColor"}
-      />
+      <path d="M14.586 3a2 2 0 0 1 2.829 0l11.308 11.309a1 1 0 0 1-1.415 1.414L17 5.413V29a1 1 0 0 1-2 0V5.414L4.692 15.723a1 1 0 0 1-1.414-1.415z" />
     </svg>
   )
 }

package/src/components/icons/BackspaceFilledIcon.tsx

@@ -0,0 +1,28 @@
+import clsx from "clsx"
+import { type SVGProps } from "react"
+
+import { useId } from "../../hooks/useId"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const BackspaceFilledIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
+  const componentProps = {
+    "aria-labelledby": alt ? uid + "-title" : undefined,
+    className: clsx("coop-icon", className),
+    "data-icon": "backspace-filled",
+    fill: fill ?? "currentColor",
+    id: uid,
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
+  return (
+    <svg {...componentProps} ref={ref}>
+      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      <path d="M27.992 6a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H11.945a2 2 0 0 1-1.415-.586l-7.999-8a2 2 0 0 1 0-2.828l8-8A2 2 0 0 1 11.944 6zm-4.285 5.293a1 1 0 0 0-1.414 0L19 14.586l-3.293-3.293a1 1 0 1 0-1.414 1.414L17.586 16l-3.293 3.293a1 1 0 1 0 1.414 1.414L19 17.414l3.293 3.293a1 1 0 0 0 1.414-1.414L20.414 16l3.293-3.293a1 1 0 0 0 0-1.414" />
+    </svg>
+  )
+}

package/src/components/icons/BackspaceIcon.tsx

@@ -0,0 +1,28 @@
+import clsx from "clsx"
+import { type SVGProps } from "react"
+
+import { useId } from "../../hooks/useId"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const BackspaceIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
+  const componentProps = {
+    "aria-labelledby": alt ? uid + "-title" : undefined,
+    className: clsx("coop-icon", className),
+    "data-icon": "backspace",
+    fill: fill ?? "currentColor",
+    id: uid,
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
+  return (
+    <svg {...componentProps} ref={ref}>
+      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      <path d="M27.991 6a2 2 0 0 1 2 2v16l-.01.204A2 2 0 0 1 27.991 26H11.944l-.198-.01a2 2 0 0 1-1.217-.576l-7.998-8a2 2 0 0 1-.137-2.677l.137-.151 7.998-8c.328-.328.76-.53 1.217-.576l.198-.01zM3.945 16l8 8H27.99V8H11.944zm18.348-4.707a1 1 0 0 1 1.414 1.414L20.414 16l3.293 3.293a1 1 0 1 1-1.414 1.414L19 17.414l-3.293 3.293a1 1 0 0 1-1.414-1.414L17.586 16l-3.293-3.293a1 1 0 1 1 1.414-1.414L19 14.586z" />
+    </svg>
+  )
+}

package/src/components/icons/BasketFilledIcon.tsx

@@ -0,0 +1,28 @@
+import clsx from "clsx"
+import { type SVGProps } from "react"
+
+import { useId } from "../../hooks/useId"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const BasketFilledIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
+  const componentProps = {
+    "aria-labelledby": alt ? uid + "-title" : undefined,
+    className: clsx("coop-icon", className),
+    "data-icon": "basket-filled",
+    fill: fill ?? "currentColor",
+    id: uid,
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
+  return (
+    <svg {...componentProps} ref={ref}>
+      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      <path d="M19.293 5.293a1 1 0 0 1 1.414 0L26.414 11H28a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2h-.308l-1.431 9.304A2 2 0 0 1 24.284 28H7.716a2 2 0 0 1-1.977-1.696L4.308 17H4a2 2 0 0 1-2-2v-2a2 2 0 0 1 2-2h1.586l5.707-5.707a1 1 0 1 1 1.414 1.414L8.414 11h15.172l-4.293-4.293a1 1 0 0 1 0-1.414M16 19a1 1 0 0 0-1 1v3a1 1 0 0 0 2 0v-3a1 1 0 0 0-1-1m-4.514.836a1 1 0 0 0-1.972.328l.5 3a1 1 0 0 0 1.972-.328zm10.178-.822a1 1 0 0 0-1.15.822l-.5 3a1 1 0 0 0 1.972.328l.5-3a1 1 0 0 0-.822-1.15" />
+    </svg>
+  )
+}

package/src/components/icons/BasketIcon.tsx

@@ -13,7 +13,7 @@ export const BasketIcon = ({ alt, className, fill, id, ref, ...props }: IconProp
     "aria-labelledby": alt ? uid + "-title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "basket",
-    fill: fill ?? "none",
+    fill: fill ?? "currentColor",
     id: uid,
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
@@ -22,14 +22,7 @@ export const BasketIcon = ({ alt, className, fill, id, ref, ...props }: IconProp
   return (
     <svg {...componentProps} ref={ref}>
       {alt ? <title id={uid + "-title"}>{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={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={fill ?? "currentColor"}
-      />
+      <path d="M19.293 5.293a1 1 0 0 1 1.414 0L26.414 11H28a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2h-.308l-1.431 9.304a2 2 0 0 1-1.793 1.687l-.184.009H7.716a2 2 0 0 1-1.94-1.516l-.037-.18L4.308 17H4a2 2 0 0 1-2-2v-2a2 2 0 0 1 2-2h1.586l5.707-5.707a1 1 0 1 1 1.414 1.414L8.414 11h15.172l-4.293-4.293a1 1 0 0 1 0-1.414M7.716 26h16.568l1.385-9H6.33zM16 19a1 1 0 0 1 1 1v3a1 1 0 0 1-2 0v-3a1 1 0 0 1 1-1m-5.664.014a1 1 0 0 1 1.15.822l.5 3a1 1 0 0 1-1.972.328l-.5-3a1 1 0 0 1 .822-1.15m10.178.822a1 1 0 0 1 1.972.328l-.5 3a1 1 0 0 1-1.972-.328zM4 15h24v-2H4z" />
     </svg>
   )
 }

package/src/components/icons/BellFilledIcon.tsx

@@ -0,0 +1,29 @@
+import clsx from "clsx"
+import { type SVGProps } from "react"
+
+import { useId } from "../../hooks/useId"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const BellFilledIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
+  const componentProps = {
+    "aria-labelledby": alt ? uid + "-title" : undefined,
+    className: clsx("coop-icon", className),
+    "data-icon": "bell-filled",
+    fill: fill ?? "currentColor",
+    id: uid,
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
+  return (
+    <svg {...componentProps} ref={ref}>
+      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      <path d="M27 26a1 1 0 0 0 0-2H5a1 1 0 1 0 0 2zM19 27a3 3 0 1 1-6 0zM13 5a3 3 0 1 1 6 0z" />
+      <path d="M16 5a9 9 0 0 1 9 9v11H7V14l.012-.463A9 9 0 0 1 16 5Z" strokeWidth="2" />
+    </svg>
+  )
+}

package/src/components/icons/BellIcon.tsx

@@ -0,0 +1,28 @@
+import clsx from "clsx"
+import { type SVGProps } from "react"
+
+import { useId } from "../../hooks/useId"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const BellIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
+  const componentProps = {
+    "aria-labelledby": alt ? uid + "-title" : undefined,
+    className: clsx("coop-icon", className),
+    "data-icon": "bell",
+    fill: fill ?? "currentColor",
+    id: uid,
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
+  return (
+    <svg {...componentProps} ref={ref}>
+      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      <path d="M19 26.999a3 3 0 0 1-6 0zM16 2a3 3 0 0 1 2.946 2.441C23.031 5.7 26 9.503 26 14v10h1a1 1 0 1 1 0 2H5a1 1 0 0 1 0-2h1V14c0-4.497 2.968-8.3 7.052-9.559A3 3 0 0 1 16 2m0 4a8 8 0 0 0-8 8v10h16V14a8 8 0 0 0-8-8" />
+    </svg>
+  )
+}

package/src/components/icons/BroomIcon.tsx

@@ -0,0 +1,28 @@
+import clsx from "clsx"
+import { type SVGProps } from "react"
+
+import { useId } from "../../hooks/useId"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const BroomIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
+  const componentProps = {
+    "aria-labelledby": alt ? uid + "-title" : undefined,
+    className: clsx("coop-icon", className),
+    "data-icon": "broom",
+    fill: fill ?? "currentColor",
+    id: uid,
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
+  return (
+    <svg {...componentProps} ref={ref}>
+      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      <path d="M16 2a4 4 0 0 1 4 4v11h6a2 2 0 0 1 2 2v2h.015l1.449 6.57a2 2 0 0 1-1.718 2.416l-.235.014H4.544l-.24-.014a2 2 0 0 1-1.746-2.222l.043-.236L4 21.76V19a2 2 0 0 1 2-2h6V6a4 4 0 0 1 4-4M4.544 28H9v-2a1 1 0 1 1 2 0v2h4v-2a1 1 0 0 1 2 0v2h4v-2a1 1 0 0 1 2 0v2h4.51l-1.102-5H5.757zM6 21h20v-2H6zM16 4a2 2 0 0 0-2 2v11h4V6a2 2 0 0 0-2-2" />
+    </svg>
+  )
+}

package/src/components/icons/CalendarFilledIcon.tsx

@@ -0,0 +1,28 @@
+import clsx from "clsx"
+import { type SVGProps } from "react"
+
+import { useId } from "../../hooks/useId"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const CalendarFilledIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
+  const componentProps = {
+    "aria-labelledby": alt ? uid + "-title" : undefined,
+    className: clsx("coop-icon", className),
+    "data-icon": "calendar-filled",
+    fill: fill ?? "currentColor",
+    id: uid,
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
+  return (
+    <svg {...componentProps} ref={ref}>
+      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      <path d="M23 2a1 1 0 0 1 1 1v1h2a2 2 0 0 1 2 2v20a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2V3a1 1 0 0 1 2 0v1h12V3a1 1 0 0 1 1-1M9 20a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1zm6 0a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1zm6 0a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1zM9 14a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1zm6 0a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1zm6 0a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1zM6 10h20V6h-2v1a1 1 0 1 1-2 0V6H10v1a1 1 0 0 1-2 0V6H6z" />
+    </svg>
+  )
+}

package/src/components/icons/CalendarIcon.tsx

@@ -13,7 +13,7 @@ export const CalendarIcon = ({ alt, className, fill, id, ref, ...props }: IconPr
     "aria-labelledby": alt ? uid + "-title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "calendar",
-    fill: fill ?? "none",
+    fill: fill ?? "currentColor",
     id: uid,
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
@@ -22,14 +22,7 @@ export const CalendarIcon = ({ alt, className, fill, id, ref, ...props }: IconPr
   return (
     <svg {...componentProps} ref={ref}>
       {alt ? <title id={uid + "-title"}>{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={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={fill ?? "currentColor"}
-      />
+      <path d="M23 2a1 1 0 0 1 1 1v1h2a2 2 0 0 1 2 2v20a2 2 0 0 1-1.796 1.99L26 28H6l-.204-.01a2 2 0 0 1-1.785-1.786L4 26V6a2 2 0 0 1 2-2h2V3a1 1 0 0 1 2 0v1h12V3a1 1 0 0 1 1-1M6 26h20V12H6zm5-6a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1zm6 0a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1zm6 0a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1zm-12-6a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1zm6 0a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1zm6 0a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1zM6 10h20V6h-2v1a1 1 0 1 1-2 0V6H10v1a1 1 0 0 1-2 0V6H6z" />
     </svg>
   )
 }

package/src/components/icons/CashFilledIcon.tsx

@@ -0,0 +1,28 @@
+import clsx from "clsx"
+import { type SVGProps } from "react"
+
+import { useId } from "../../hooks/useId"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const CashFilledIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
+  const componentProps = {
+    "aria-labelledby": alt ? uid + "-title" : undefined,
+    className: clsx("coop-icon", className),
+    "data-icon": "cash-filled",
+    fill: fill ?? "currentColor",
+    id: uid,
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
+  return (
+    <svg {...componentProps} ref={ref}>
+      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      <path d="M28 6a2 2 0 0 1 2 2v12a2 2 0 0 1-1.796 1.99L28 22h-2v2a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V12a2 2 0 0 1 2-2h2V8a2 2 0 0 1 2-2zm-12.5 7c-.948 0-1.846.287-2.51.933-.668.65-.99 1.554-.99 2.567v.5h-.5a1 1 0 1 0 0 2h.5v2h-.5a1 1 0 1 0 0 2H16a1 1 0 1 0 0-2h-2v-2h1a1 1 0 1 0 0-2h-1v-.5c0-.587.179-.933.385-1.133.21-.205.564-.367 1.115-.367q.19.001.335.026a1 1 0 0 0 .33-1.972A4 4 0 0 0 15.5 13m8.5-3a2 2 0 0 1 2 2v8h2V8H8v2z" />
+    </svg>
+  )
+}

package/src/components/icons/CashIcon.tsx

@@ -0,0 +1,33 @@
+import clsx from "clsx"
+import { type SVGProps } from "react"
+
+import { useId } from "../../hooks/useId"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const CashIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
+  const componentProps = {
+    "aria-labelledby": alt ? uid + "-title" : undefined,
+    className: clsx("coop-icon", className),
+    "data-icon": "cash",
+    fill: fill ?? "currentColor",
+    id: uid,
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
+  return (
+    <svg {...componentProps} ref={ref}>
+      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      <path d="M15.5 13q.352 0 .665.054a1 1 0 0 1-.33 1.972A2 2 0 0 0 15.5 15c-.551 0-.904.162-1.115.367-.206.2-.385.546-.385 1.133v.5h1a1 1 0 1 1 0 2h-1v2h2a1 1 0 1 1 0 2h-4.5a1 1 0 1 1 0-2h.5v-2h-.5a1 1 0 1 1 0-2h.5v-.5c0-1.013.322-1.918.99-2.567.664-.646 1.562-.933 2.51-.933" />
+      <path
+        clipRule="evenodd"
+        d="M28 6a2 2 0 0 1 2 2v12a2 2 0 0 1-1.796 1.99L28 22h-2v2a2 2 0 0 1-1.796 1.99L24 26H4l-.204-.01A2 2 0 0 1 2 24V12a2 2 0 0 1 2-2h2V8a2 2 0 0 1 2-2zM4 24h20V12H4zm4-14h16a2 2 0 0 1 2 2v8h2V8H8z"
+        fillRule="evenodd"
+      />
+    </svg>
+  )
+}

package/src/components/icons/ChevronDownIcon.tsx

@@ -13,7 +13,7 @@ export const ChevronDownIcon = ({ alt, className, fill, id, ref, ...props }: Ico
     "aria-labelledby": alt ? uid + "-title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "chevron-down",
-    fill: fill ?? "none",
+    fill: fill ?? "currentColor",
     id: uid,
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
@@ -22,10 +22,7 @@ export const ChevronDownIcon = ({ alt, className, fill, id, ref, ...props }: Ico
   return (
     <svg {...componentProps} ref={ref}>
       {alt ? <title id={uid + "-title"}>{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={fill ?? "currentColor"}
-      />
+      <path d="M7.707 11.293a1 1 0 1 0-1.414 1.414L14.586 21a2 2 0 0 0 2.828 0l8.293-8.293a1 1 0 1 0-1.414-1.414L16 19.586z" />
     </svg>
   )
 }

package/src/components/icons/ChevronLeftIcon.tsx

@@ -13,7 +13,7 @@ export const ChevronLeftIcon = ({ alt, className, fill, id, ref, ...props }: Ico
     "aria-labelledby": alt ? uid + "-title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "chevron-left",
-    fill: fill ?? "none",
+    fill: fill ?? "currentColor",
     id: uid,
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
@@ -22,10 +22,7 @@ export const ChevronLeftIcon = ({ alt, className, fill, id, ref, ...props }: Ico
   return (
     <svg {...componentProps} ref={ref}>
       {alt ? <title id={uid + "-title"}>{alt}</title> : null}
-      <path
-        d="M22.5 30a1 1 0 0 0 .71-.29 1 1 0 0 0 0-1.42L10.91 16 23.2 3.71a1 1 0 0 0 0-1.41 1 1 0 0 0-1.41 0l-13 13a1 1 0 0 0 0 1.41l13 13a1 1 0 0 0 .71.29"
-        fill={fill ?? "currentColor"}
-      />
+      <path d="M20.707 7.707a1 1 0 1 0-1.414-1.414L11 14.586a2 2 0 0 0 0 2.828l8.293 8.293a1 1 0 1 0 1.414-1.414L12.414 16z" />
     </svg>
   )
 }

package/src/components/icons/ChevronRightIcon.tsx

@@ -13,7 +13,7 @@ export const ChevronRightIcon = ({ alt, className, fill, id, ref, ...props }: Ic
     "aria-labelledby": alt ? uid + "-title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "chevron-right",
-    fill: fill ?? "none",
+    fill: fill ?? "currentColor",
     id: uid,
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
@@ -22,10 +22,7 @@ export const ChevronRightIcon = ({ alt, className, fill, id, ref, ...props }: Ic
   return (
     <svg {...componentProps} ref={ref}>
       {alt ? <title id={uid + "-title"}>{alt}</title> : null}
-      <path
-        d="M9.49 2a1 1 0 0 0-.71 1.71L21.07 16 8.79 28.3a1 1 0 1 0 1.41 1.41l13-13a1 1 0 0 0 0-1.42l-13-13A1 1 0 0 0 9.49 2"
-        fill={fill ?? "currentColor"}
-      />
+      <path d="M11.293 24.293a1 1 0 1 0 1.414 1.414L21 17.414a2 2 0 0 0 0-2.828l-8.293-8.293a1 1 0 1 0-1.414 1.414L19.586 16z" />
     </svg>
   )
 }

package/src/components/icons/ChevronUpIcon.tsx

@@ -13,7 +13,7 @@ export const ChevronUpIcon = ({ alt, className, fill, id, ref, ...props }: IconP
     "aria-labelledby": alt ? uid + "-title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "chevron-up",
-    fill: fill ?? "none",
+    fill: fill ?? "currentColor",
     id: uid,
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
@@ -22,10 +22,7 @@ export const ChevronUpIcon = ({ alt, className, fill, id, ref, ...props }: IconP
   return (
     <svg {...componentProps} ref={ref}>
       {alt ? <title id={uid + "-title"}>{alt}</title> : null}
-      <path
-        d="M1 23a1 1 0 0 0 .29.71 1 1 0 0 0 1.42 0L16 10.41 29.29 23.7a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.41l-14-14a1 1 0 0 0-1.41 0l-14 14A1 1 0 0 0 1 23"
-        fill={fill ?? "currentColor"}
-      />
+      <path d="M24.293 20.707a1 1 0 1 0 1.414-1.414L17.414 11a2 2 0 0 0-2.828 0l-8.293 8.293a1 1 0 1 0 1.414 1.414L16 12.414z" />
     </svg>
   )
 }

package/src/components/icons/CircleBurgerFilledIcon.tsx

@@ -0,0 +1,28 @@
+import clsx from "clsx"
+import { type SVGProps } from "react"
+
+import { useId } from "../../hooks/useId"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const CircleBurgerFilledIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
+  const componentProps = {
+    "aria-labelledby": alt ? uid + "-title" : undefined,
+    className: clsx("coop-icon", className),
+    "data-icon": "circle-burger-filled",
+    fill: fill ?? "currentColor",
+    id: uid,
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
+  return (
+    <svg {...componentProps} ref={ref}>
+      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      <path d="M16 2.001c7.732 0 14 6.268 14 14s-6.268 14-14 14-14-6.268-14-14 6.268-14 14-14M11.003 20a1 1 0 1 0 0 2H21a1 1 0 1 0 0-2zm0-4.982a1 1 0 0 0 0 2H21a1 1 0 1 0 0-2zm0-5.018a1 1 0 1 0 0 2H21a1 1 0 1 0 0-2z" />
+    </svg>
+  )
+}

package/src/components/icons/CircleBurgerIcon.tsx

@@ -0,0 +1,28 @@
+import clsx from "clsx"
+import { type SVGProps } from "react"
+
+import { useId } from "../../hooks/useId"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const CircleBurgerIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
+  const componentProps = {
+    "aria-labelledby": alt ? uid + "-title" : undefined,
+    className: clsx("coop-icon", className),
+    "data-icon": "circle-burger",
+    fill: fill ?? "currentColor",
+    id: uid,
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
+  return (
+    <svg {...componentProps} ref={ref}>
+      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      <path d="M16 2.001c7.732 0 14 6.268 14 14s-6.268 14-14 14-14-6.268-14-14 6.268-14 14-14m0 2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12M21 20a1 1 0 1 1 0 2h-9.997a1 1 0 1 1 0-2zm0-4.982a1 1 0 0 1 0 2h-9.997a1 1 0 1 1 0-2zM21 10a1 1 0 1 1 0 2h-9.997a1 1 0 1 1 0-2z" />
+    </svg>
+  )
+}

package/src/components/icons/ClipboardFilledIcon.tsx

@@ -0,0 +1,28 @@
+import clsx from "clsx"
+import { type SVGProps } from "react"
+
+import { useId } from "../../hooks/useId"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const ClipboardFilledIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
+  const componentProps = {
+    "aria-labelledby": alt ? uid + "-title" : undefined,
+    className: clsx("coop-icon", className),
+    "data-icon": "clipboard-filled",
+    fill: fill ?? "currentColor",
+    id: uid,
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
+  return (
+    <svg {...componentProps} ref={ref}>
+      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      <path d="M10 6a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4h2a2 2 0 0 1 2 2v20a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2zm1 12.5a1 1 0 1 0 0 2 1 1 0 0 0 0-2m3 0a1 1 0 1 0 0 2h7a1 1 0 1 0 0-2zM11 15a1 1 0 1 0 0 2 1 1 0 0 0 0-2m3 0a1 1 0 1 0 0 2h7a1 1 0 1 0 0-2zm-3-3.5a1 1 0 1 0 0 2 1 1 0 0 0 0-2m3 0a1 1 0 1 0 0 2h7a1 1 0 1 0 0-2zM20 3a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-8a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z" />
+    </svg>
+  )
+}

package/src/components/icons/ClipboardIcon.tsx

@@ -0,0 +1,28 @@
+import clsx from "clsx"
+import { type SVGProps } from "react"
+
+import { useId } from "../../hooks/useId"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const ClipboardIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
+  const componentProps = {
+    "aria-labelledby": alt ? uid + "-title" : undefined,
+    className: clsx("coop-icon", className),
+    "data-icon": "clipboard",
+    fill: fill ?? "currentColor",
+    id: uid,
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
+  return (
+    <svg {...componentProps} ref={ref}>
+      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      <path d="M20 3a1 1 0 0 1 1 1h3l.204.01A2 2 0 0 1 26 6v20a2 2 0 0 1-1.796 1.99L24 28H8a2 2 0 0 1-1.99-1.796L6 26V6a2 2 0 0 1 2-2h3a1 1 0 0 1 1-1zM8 26h16V6h-3l-.005.103A1 1 0 0 1 20 7h-8a1 1 0 0 1-1-1H8zm3-7.5a1 1 0 1 1 0 2 1 1 0 0 1 0-2m10 0a1 1 0 1 1 0 2h-7a1 1 0 1 1 0-2zM11 15a1 1 0 1 1 0 2 1 1 0 0 1 0-2m10 0a1 1 0 1 1 0 2h-7a1 1 0 1 1 0-2zm-10-3.5a1 1 0 1 1 0 2 1 1 0 0 1 0-2m10 0a1 1 0 1 1 0 2h-7a1 1 0 1 1 0-2z" />
+    </svg>
+  )
+}