@coopdigital/react 0.54.0 → 0.56.0

package/src/components/icons/{InformationIcon.tsx → ClockFilledIcon.tsx}

@@ -7,13 +7,13 @@ interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const InformationIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+export const ClockFilledIcon = ({ 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": "information",
-    fill: fill ?? "none",
+    "data-icon": "clock-filled",
+    fill: fill ?? "currentColor",
     id: uid,
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
@@ -23,12 +23,9 @@ export const InformationIcon = ({ alt, className, fill, id, ref, ...props }: Ico
     <svg {...componentProps} ref={ref}>
       {alt ? <title id={uid + "-title"}>{alt}</title> : null}
       <path
-        d="M14.46 10.19a1.4 1.4 0 0 1 .43-1A1.5 1.5 0 0 1 16 8.75a1.6 1.6 0 0 1 1.11.41 1.35 1.35 0 0 1 .45 1 1.32 1.32 0 0 1-.45 1 1.56 1.56 0 0 1-1.11.41 1.47 1.47 0 0 1-1.09-.43 1.35 1.35 0 0 1-.45-.95m.34 3.26h2.4v9.6h-2.4Z"
-        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={fill ?? "currentColor"}
+        clipRule="evenodd"
+        d="M16 30c7.732 0 14-6.268 14-14S23.732 2 16 2 2 8.268 2 16s6.268 14 14 14m0-21a1 1 0 0 0-1 1v6a1 1 0 0 0 .293.707l4 4a1 1 0 1 0 1.414-1.414L17 15.586V10a1 1 0 0 0-1-1"
+        fillRule="evenodd"
       />
     </svg>
   )

package/src/components/icons/ClockIcon.tsx

@@ -13,7 +13,7 @@ export const ClockIcon = ({ alt, className, fill, id, ref, ...props }: IconProps
     "aria-labelledby": alt ? uid + "-title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "clock",
-    fill: fill ?? "none",
+    fill: fill ?? "currentColor",
     id: uid,
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
@@ -22,14 +22,7 @@ export const ClockIcon = ({ alt, className, fill, id, ref, ...props }: IconProps
   return (
     <svg {...componentProps} ref={ref}>
       {alt ? <title id={uid + "-title"}>{alt}</title> : null}
-      <path
-        d="M23 21.05a.93.93 0 0 1-.5-.14L15 16.58v-9.5a1 1 0 0 1 1-1 1 1 0 0 1 1 1v8.35l6.47 3.77a1 1 0 0 1 .36 1.36 1 1 0 0 1-.83.49"
-        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={fill ?? "currentColor"}
-      />
+      <path d="M16 2c7.732 0 14 6.268 14 14s-6.268 14-14 14S2 23.732 2 16 8.268 2 16 2m0 2C9.373 4 4 9.373 4 16s5.373 12 12 12 12-5.373 12-12S22.627 4 16 4m0 5a1 1 0 0 1 1 1v5.586l3.707 3.707a1 1 0 1 1-1.414 1.414l-4-4A1 1 0 0 1 15 16v-6a1 1 0 0 1 1-1" />
     </svg>
   )
 }

package/src/components/icons/CloseAltFilledIcon.tsx

@@ -0,0 +1,32 @@
+import clsx from "clsx"
+import { type SVGProps } from "react"
+
+import { useId } from "../../hooks/useId"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const CloseAltFilledIcon = ({ 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": "close-alt-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
+        clipRule="evenodd"
+        d="M16 30c7.732 0 14-6.268 14-14S23.732 2 16 2 2 8.268 2 16s6.268 14 14 14m5.407-19.407a1 1 0 0 0-1.414 0L16 14.586l-3.993-3.993a1 1 0 0 0-1.414 1.414L14.586 16l-3.993 3.993a1 1 0 0 0 1.414 1.414L16 17.414l3.991 3.991a1 1 0 1 0 1.414-1.414l-3.99-3.99 3.992-3.994a1 1 0 0 0 0-1.414"
+        fillRule="evenodd"
+      />
+    </svg>
+  )
+}

package/src/components/icons/CloseAltIcon.tsx

@@ -13,7 +13,7 @@ export const CloseAltIcon = ({ alt, className, fill, id, ref, ...props }: IconPr
     "aria-labelledby": alt ? uid + "-title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "close-alt",
-    fill: fill ?? "none",
+    fill: fill ?? "currentColor",
     id: uid,
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
@@ -22,18 +22,7 @@ export const CloseAltIcon = ({ alt, className, fill, id, ref, ...props }: IconPr
   return (
     <svg {...componentProps} ref={ref}>
       {alt ? <title id={uid + "-title"}>{alt}</title> : null}
-      <path
-        d="M21.55 22.51a1 1 0 0 1-.7-.3l-11-11a1 1 0 0 1 1.41-1.41l11 11a1 1 0 0 1 0 1.41 1 1 0 0 1-.71.3"
-        fill={fill ?? "currentColor"}
-      />
-      <path
-        d="M10.55 22.51a1 1 0 0 1-.7-.3 1 1 0 0 1 0-1.41l11-11a1 1 0 0 1 1.41 1.41l-11 11a1 1 0 0 1-.71.3"
-        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={fill ?? "currentColor"}
-      />
+      <path d="M16 2c7.732 0 14 6.268 14 14s-6.268 14-14 14S2 23.732 2 16 8.268 2 16 2m0 2C9.373 4 4 9.373 4 16s5.373 12 12 12 12-5.373 12-12S22.627 4 16 4m4.293 6.293a1 1 0 1 1 1.414 1.414L17.414 16l4.293 4.293a1 1 0 1 1-1.414 1.414L16 17.414l-4.293 4.293a1 1 0 1 1-1.414-1.414L14.586 16l-4.293-4.293a1 1 0 1 1 1.414-1.414L16 14.586z" />
     </svg>
   )
 }

package/src/components/icons/CogIcon.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 CogIcon = ({ 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": "cog",
+    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="M18 28v-1.801l.032-1.33 1.24-.486a9 9 0 0 0 2.348-1.357l1.039-.832 1.148.625.029.015.072.041 1.483.856.001.001 2-3.464-1.488-.86-.066-.04-1.14-.692.2-1.318a9.1 9.1 0 0 0 0-2.718l-.2-1.319 1.13-.684.005-.002.026-.017.047-.028 1.486-.858-2-3.464v-.001l-1.484.857v.001l-.083.045-1.168.634-1.037-.831a9 9 0 0 0-2.347-1.357l-1.24-.485L18 5.8v-.006L18 5.713V4h-4v1.714l-.003.104-.003.05v.004-.01l-.03 1.27-1.239.484a9 9 0 0 0-2.345 1.357l-1.039.832-1.159-.631-.006-.003-.084-.047-1.485-.856-1.999 3.463 1.483.857h.002l.078.049.036.023.003.002-.005-.004 1.095.665-.199 1.317q-.1.66-.1 1.36t.1 1.36l.2 1.318-1.1.665-.016.01q-.031.021-.089.055l-.004.002-1.486.857h.002l2 3.464 1.483-.856.057-.031.016-.009.008-.004 1.168-.638 1.039.833a9 9 0 0 0 2.03 1.227l.316.13 1.24.485.03 1.295.002.015.003.107V30l-.205-.01a2 2 0 0 1-1.786-1.786L12 28v-1.715l-.001-.039a11 11 0 0 1-2.87-1.66q-.018.012-.037.021l-1.483.857-.183.094a2 2 0 0 1-2.438-.654l-.111-.172-2-3.464a2 2 0 0 1 .731-2.733l1.486-.857.03-.02q-.091-.608-.115-1.237L5.001 16q0-.846.123-1.66l-.033-.02-1.483-.856a2 2 0 0 1-.732-2.732l2-3.464a2 2 0 0 1 2.731-.733l1.484.857.039.02c.86-.689 1.825-1.25 2.868-1.658l.002-.04V4a2 2 0 0 1 1.795-1.99L14 2h4a2 2 0 0 1 2 2v1.753c.914.357 1.766.832 2.542 1.407l.328.252.038-.02 1.484-.857a2 2 0 0 1 2.733.733l2 3.464a2 2 0 0 1-.733 2.732l-1.486.858-.03.019q.123.812.125 1.659l-.008.42a11 11 0 0 1-.117 1.237l.028.019 1.488.86a2 2 0 0 1 .733 2.732l-2 3.464-.112.172a2 2 0 0 1-2.44.654l-.18-.094-1.485-.858-.037-.02c-.86.69-1.827 1.252-2.87 1.66l-.001.04V28l-.011.204a2 2 0 0 1-1.785 1.785L18 30h-4v-2zm-4.005-1.852v-.013l-.001-.007zM20 16a4 4 0 0 0-3.794-3.995L16 12a4 4 0 0 0-4 4l.005.206a4 4 0 0 0 3.789 3.79L16 20a4 4 0 0 0 3.994-3.794zm2 0a6 6 0 1 1-12 0 6 6 0 0 1 12 0" />
+    </svg>
+  )
+}

package/src/components/icons/CommunityFilledIcon.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 CommunityFilledIcon = ({ 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": "community-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 2a7 7 0 0 1 4.055 12.703 12.03 12.03 0 0 1 7.565 8.304l.04.157q.054.216.099.436-.117.18-.24.357a14.05 14.05 0 0 1-6.308 5.04l.02.009c-.85.338-1.74.596-2.663.764l-.008-.005A14 14 0 0 1 16 30c-4.93 0-9.266-2.55-11.76-6.401q.045-.22.098-.436l.04-.157q.041-.165.089-.328.032-.11.066-.22a12 12 0 0 1 .206-.607 12.03 12.03 0 0 1 7.205-7.148A7 7 0 0 1 16 2M7.796 2a5.74 5.74 0 0 1 3.056.877A7.98 7.98 0 0 0 8 9c0 1.956.702 3.748 1.868 5.138a8 8 0 0 0-1.977-.25 7.87 7.87 0 0 0-5.88 2.632Q2 16.261 2 16q.002-1.176.188-2.3a10 10 0 0 1 2.298-1.21A5.768 5.768 0 0 1 7.796 2m16.496 0a5.77 5.77 0 0 1 5.768 5.769 5.76 5.76 0 0 1-2.397 4.677 10 10 0 0 1 2.179 1.084c.143.802.219 1.627.219 2.47q-.001.149-.005.296a7.86 7.86 0 0 0-5.67-2.407c-.816 0-1.604.123-2.345.353A7.97 7.97 0 0 0 24 9a7.98 7.98 0 0 0-2.816-6.09A5.74 5.74 0 0 1 24.292 2" />
+    </svg>
+  )
+}

package/src/components/icons/CommunityIcon.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 CommunityIcon = ({ 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": "community",
+    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 2a7 7 0 0 1 4.055 12.703 12.03 12.03 0 0 1 7.565 8.304l.04.157q.054.216.099.435-.108.166-.22.329l-.075.105-.155.218-.097.13a14 14 0 0 1-.493.623l-.088.101a14.04 14.04 0 0 1-5.421 3.891l.02.01c-.849.338-1.74.596-2.662.764l-.008-.005.012-.003C17.738 29.917 16.88 30 16 30a13.97 13.97 0 0 1-10.565-4.817l-.156-.18q-.085-.103-.169-.207l-.069-.085a13 13 0 0 1-.255-.331l-.097-.13-.155-.218-.074-.105a14 14 0 0 1-.22-.328q.045-.22.098-.436l.04-.157q.041-.165.089-.328.038-.128.078-.254l.066-.21a12 12 0 0 1 .128-.363 12.03 12.03 0 0 1 7.205-7.148A7 7 0 0 1 16 2m0 14c-4.55 0-8.387 3.04-9.598 7.2A11.98 11.98 0 0 0 16 28c3.926 0 7.407-1.887 9.596-4.802C24.385 19.04 20.55 16 16 16M8.094 2.008a5.73 5.73 0 0 1 2.758.869c-.524.442-.991.95-1.388 1.512a3.769 3.769 0 1 0-1.068 7.099c.32.98.824 1.877 1.472 2.65a8 8 0 0 0-1.977-.25 7.87 7.87 0 0 0-5.88 2.632Q2 16.261 2 16q.002-1.176.188-2.3a9.9 9.9 0 0 1 2.297-1.209 5.76 5.76 0 0 1-2.449-4.426l-.008-.296A5.77 5.77 0 0 1 7.797 2zm16.495 0a5.77 5.77 0 0 1 5.47 5.76l-.006.297a5.76 5.76 0 0 1-2.388 4.381 10 10 0 0 1 2.177 1.084c.143.802.219 1.627.219 2.47q-.001.149-.005.296a7.86 7.86 0 0 0-5.67-2.407c-.816 0-1.604.123-2.345.353a8 8 0 0 0 1.567-2.77q.333.063.684.064a3.768 3.768 0 1 0-1.733-7.114 8 8 0 0 0-1.374-1.513A5.74 5.74 0 0 1 24.292 2zM16 4a5 5 0 1 0 0 10 5 5 0 0 0 0-10" />
+    </svg>
+  )
+}

package/src/components/icons/ComputerIcon.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 ComputerIcon = ({ 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": "computer",
+    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 28H3a1 1 0 1 1 0-2h13zM28.204 8.01A2 2 0 0 1 30 10v16l-.01.204a2 2 0 0 1-1.786 1.785L28 28h-8a2 2 0 0 1-1.99-1.796L18 26V10a2 2 0 0 1 2-2h8zM20 26h8V10h-8zm6-22a2 2 0 0 1 2 2H6v16h10.077v2H6l-.204-.01a2 2 0 0 1-1.785-1.786L4 22V6a2 2 0 0 1 2-2zm-2 9a1 1 0 1 1 0 2 1 1 0 0 1 0-2" />
+    </svg>
+  )
+}

package/src/components/icons/ContactFilledIcon.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 ContactFilledIcon = ({ 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": "contact-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.5 12.004a1.5 1.5 0 0 1 1.5 1.5V30l-4-4H10.5A1.5 1.5 0 0 1 9 24.5v-3.498h13a2 2 0 0 0 2-2v-6.998zM21.5 6A1.5 1.5 0 0 1 23 7.5v10.996a1.5 1.5 0 0 1-1.5 1.5H6l-4 4V7.5A1.5 1.5 0 0 1 3.5 6z" />
+    </svg>
+  )
+}

package/src/components/icons/ContactIcon.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 ContactIcon = ({ 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": "contact",
+    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 12.004a2 2 0 0 1 2 2V30l-4-4H11a2 2 0 0 1-2-2v-2.998h2V24h15.828L28 25.172V14.004h-4v-2zM21 6a2 2 0 0 1 2 2v9.996a2 2 0 0 1-2 2H6l-4 4V8a2 2 0 0 1 2-2zM4 19.168l1.172-1.172H21V8H4z" />
+    </svg>
+  )
+}

package/src/components/icons/ContactlessFilledIcon.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 ContactlessFilledIcon = ({ 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": "contactless-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 2v16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2zm-4.964 3.294a1.001 1.001 0 0 0-1.418 1.41 7.5 7.5 0 0 1 2.186 5.302c0 2.068-.834 3.94-2.186 5.302a1 1 0 0 0 1.418 1.409 9.5 9.5 0 0 0 2.768-6.711 9.5 9.5 0 0 0-2.768-6.712M7.001 20a1.001 1.001 0 0 0 0 2h2a1.001 1.001 0 0 0 0-2zm13.996-8.727a1.001 1.001 0 0 0-1.412 1.415 4.67 4.67 0 0 1 1.378 3.318 4.67 4.67 0 0 1-1.378 3.317 1 1 0 0 0 1.412 1.417 6.67 6.67 0 0 0 1.966-4.734c0-1.85-.753-3.525-1.966-4.733m-1.984 2.034a1.002 1.002 0 0 0-1.424 1.406c.33.333.53.789.531 1.293 0 .504-.202.96-.531 1.294a1 1 0 0 0 1.424 1.405 3.83 3.83 0 0 0 1.107-2.7 3.83 3.83 0 0 0-1.107-2.698" />
+    </svg>
+  )
+}

package/src/components/icons/ContactlessIcon.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 ContactlessIcon = ({ 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": "contactless",
+    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.204 6.011A2 2 0 0 1 30 8.001v16l-.01.203a2 2 0 0 1-1.786 1.785L28 26H4a2 2 0 0 1-1.99-1.796L2 24V8a2 2 0 0 1 2-2h24zM4 24.001h24V8H4zM21.622 9.29a1 1 0 0 1 1.414.003 9.5 9.5 0 0 1 2.768 6.712 9.5 9.5 0 0 1-2.768 6.711 1 1 0 1 1-1.418-1.41 7.5 7.5 0 0 0 2.186-5.3c0-2.07-.834-3.942-2.186-5.303a1 1 0 0 1 .004-1.414M9 20a1 1 0 1 1 0 2H7a1 1 0 0 1 0-2zm10.582-8.726a1 1 0 0 1 1.414-.002 6.67 6.67 0 0 1 1.966 4.733c0 1.85-.753 3.526-1.966 4.735a1 1 0 0 1-1.412-1.418 4.67 4.67 0 0 0 1.378-3.317 4.67 4.67 0 0 0-1.378-3.317 1 1 0 0 1-.002-1.414m-1.984 2.023a1 1 0 0 1 1.415.009 3.83 3.83 0 0 1 1.107 2.7 3.83 3.83 0 0 1-1.107 2.698 1.001 1.001 0 0 1-1.424-1.405c.33-.333.531-.79.531-1.294s-.202-.96-.531-1.293a1 1 0 0 1 .009-1.415" />
+    </svg>
+  )
+}

package/src/components/icons/CoopLiveIcon.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 CoopLiveIcon = ({ 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": "coop-live",
+    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.169 3.039a9.4 9.4 0 0 0-2.166-.888 4.8 4.8 0 0 0-2.583.054 9 9 0 0 0-1.748.765c-.517.3-.96.642-1.316 1.015-.434.466-.465 1.011-.085 1.497.39.465.91.886 1.54 1.25.63.365 1.36.664 2.166.89a4.83 4.83 0 0 0 2.91-.165l-1.014-1.599q-.205.087-.43.155c-.43.13-.95.112-1.355-.045a4 4 0 0 1-.527-.252 3 3 0 0 1-.435-.304c-.275-.234-.306-.535-.083-.785a2.6 2.6 0 0 1 .632-.5q.386-.223.86-.367c.43-.13.95-.113 1.356.045q.282.109.527.251.247.143.436.305c.273.234.304.535.082.785a2.6 2.6 0 0 1-.62.492l2.003 1.157c.516-.3.954-.64 1.305-1.007.432-.467.463-1.014.085-1.497-.391-.467-.91-.888-1.54-1.252m.3 8.05a9.3 9.3 0 0 0-2.165-.886 4.8 4.8 0 0 0-2.584.053 9 9 0 0 0-1.748.766L8.485 13.63l2.003 1.156 4.487-2.608q.385-.223.861-.367c.43-.13.95-.112 1.356.045q.28.109.527.251t.435.305c.273.234.305.535.083.785a2.6 2.6 0 0 1-.632.5 4 4 0 0 1-.86.367c-.43.13-.95.112-1.356-.045a4 4 0 0 1-.527-.251 3 3 0 0 1-.435-.304.8.8 0 0 1-.132-.143l-1.174 1.47c.63.361 1.355.659 2.158.883a4.8 4.8 0 0 0 2.584-.054 9 9 0 0 0 1.746-.767 6 6 0 0 0 1.316-1.013c.433-.468.464-1.014.085-1.497-.391-.467-.91-.888-1.542-1.253m-7.1-4.099a9.3 9.3 0 0 0-2.166-.887 4.8 4.8 0 0 0-2.583.054 9 9 0 0 0-1.748.764c-.517.301-.96.642-1.315 1.015-.435.466-.466 1.012-.086 1.497.39.465.909.886 1.54 1.251.63.364 1.36.664 2.166.889a4.83 4.83 0 0 0 2.584-.055 9 9 0 0 0 1.747-.766c.52-.302.963-.643 1.316-1.013.432-.468.464-1.014.085-1.497-.39-.466-.91-.887-1.54-1.252M7.761 9.667a3 3 0 0 1-.436-.304c-.273-.235-.305-.535-.082-.785.163-.183.377-.351.632-.5q.384-.223.86-.367c.43-.13.95-.112 1.356.045q.28.109.527.251t.435.305c.273.234.305.535.083.785a2.6 2.6 0 0 1-.631.5 4 4 0 0 1-.861.367c-.43.13-.95.112-1.356-.045a4 4 0 0 1-.527-.252m13.9.149a3 3 0 0 1-.436-.305c-.273-.234-.305-.535-.082-.785q.247-.276.631-.5c.256-.148.546-.272.861-.367.43-.13.95-.112 1.356.045q.28.109.527.251t.435.304c.273.235.304.536.083.786a2.6 2.6 0 0 1-.633.499 4 4 0 0 1-.86.368c-.43.13-.95.112-1.355-.046a4 4 0 0 1-.528-.25m4.607-2.678a9.3 9.3 0 0 0-2.165-.887 4.8 4.8 0 0 0-2.584.054 9 9 0 0 0-1.747.765c-.518.3-.96.642-1.317 1.015-.434.466-.464 1.012-.085 1.497.39.465.909.886 1.54 1.25.631.365 1.36.664 2.166.89a4.8 4.8 0 0 0 2.584-.054 9 9 0 0 0 1.747-.766c.52-.303.963-.644 1.316-1.014.432-.467.464-1.014.085-1.497-.39-.467-.909-.888-1.54-1.253" />
+      <path d="m4.824 20.713 2.451 1.415-.007 2.74-4.92-2.845.014-11.386 2.48 1.432zM7.99 25.28l2.472 1.427.026-11.38-2.472-1.427zm21.661-3.067-.003-2.276-4.662 2.687-.006-2.254 4.483-2.587-.004-2.276-4.483 2.584-.006-2.282 4.67-2.697-.003-2.275-4.672 2.693v-.006l-2.755 1.59.015 6.847.01 4.533zm-13.486 4.235-1.751-8.854-3.156-1.823 2.611 12.902L16.165 30l2.296-1.326 2.61-12.901-3.155 1.822z" />
+    </svg>
+  )
+}

package/src/components/icons/CoopLocationFilledIcon.tsx

@@ -0,0 +1,30 @@
+import clsx from "clsx"
+import { type SVGProps } from "react"
+
+import { useId } from "../../hooks/useId"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const CoopLocationFilledIcon = ({ 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": "coop-location-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="M20.48 6.51a2.4 2.4 0 0 0-.54 0 2.3 2.3 0 0 0-.53 0 1 1 0 0 0-.8.71 2.75 2.75 0 0 0 0 1.67 1.07 1.07 0 0 0 .8.71 3 3 0 0 0 .53.05 3.3 3.3 0 0 0 .54-.05 1.07 1.07 0 0 0 .8-.71 3 3 0 0 0 0-1.67 1 1 0 0 0-.8-.71" />
+      <path d="M16 0C13 0 3-.25 3 11c0 13.71 12 21 13 21s13-7.29 13-21C29-.25 19 0 16 0m-.5 17.36a2.25 2.25 0 0 1-1.39 1.49 6.2 6.2 0 0 1-4.11 0 2.27 2.27 0 0 1-1.39-1.49 6.2 6.2 0 0 1 0-3.42A2.27 2.27 0 0 1 10 12.45a6.2 6.2 0 0 1 2.06-.35 6.3 6.3 0 0 1 2.06.35 2.26 2.26 0 0 1 1.38 1.49 6.2 6.2 0 0 1 0 3.42M13.52 8a3.2 3.2 0 0 0-.13-.82 1 1 0 0 0-.8-.71 2.3 2.3 0 0 0-.53 0 2.5 2.5 0 0 0-.54 0 1.05 1.05 0 0 0-.8.71 3 3 0 0 0 0 1.67 1.09 1.09 0 0 0 .8.71 3.3 3.3 0 0 0 .54.05 3 3 0 0 0 .53-.05 1.07 1.07 0 0 0 .8-.71 3 3 0 0 0 .09-.39l2.1 1c0 .09-.05.19-.08.28a2.26 2.26 0 0 1-1.38 1.49 6.1 6.1 0 0 1-2.06.35 6 6 0 0 1-2.06-.33 2.27 2.27 0 0 1-1.39-1.49 6.2 6.2 0 0 1 0-3.42A2.29 2.29 0 0 1 10 4.85a6.2 6.2 0 0 1 2.06-.35 6.3 6.3 0 0 1 2.06.35 2.28 2.28 0 0 1 1.38 1.49A6 6 0 0 1 15.74 8Zm9.87 9.32A2.27 2.27 0 0 1 22 18.85a6.2 6.2 0 0 1-2 .35l-.75-2.07.21.07a3 3 0 0 0 .53.05 3.3 3.3 0 0 0 .54-.05 1.09 1.09 0 0 0 .8-.71 3 3 0 0 0 0-1.67 1 1 0 0 0-.8-.71 2.4 2.4 0 0 0-.54-.06 2.3 2.3 0 0 0-.53.06 1 1 0 0 0-.8.71 2.9 2.9 0 0 0-.13.83v5h-2.27v-5a6.2 6.2 0 0 1 .24-1.71 2.25 2.25 0 0 1 1.39-1.49 6.2 6.2 0 0 1 4.11 0 2.27 2.27 0 0 1 1.39 1.49 6.2 6.2 0 0 1 0 3.42Zm0-7.6A2.26 2.26 0 0 1 22 11.25a6.1 6.1 0 0 1-2 .35 6 6 0 0 1-2.06-.35 2.25 2.25 0 0 1-1.44-1.49 6.2 6.2 0 0 1 0-3.42 2.27 2.27 0 0 1 1.39-1.49 6.2 6.2 0 0 1 4.11 0 2.29 2.29 0 0 1 1.39 1.49 6.2 6.2 0 0 1 0 3.42Z" />
+      <path d="M12.59 14.11a2.3 2.3 0 0 0-.53 0 2.5 2.5 0 0 0-.54 0 1.05 1.05 0 0 0-.8.71 3 3 0 0 0 0 1.67 1.07 1.07 0 0 0 .8.71 3.3 3.3 0 0 0 .54.05 3 3 0 0 0 .53-.05 1.07 1.07 0 0 0 .8-.71 2.75 2.75 0 0 0 0-1.67 1 1 0 0 0-.8-.71" />
+    </svg>
+  )
+}

package/src/components/icons/CoopLogoIcon.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 CoopLogoIcon = ({ 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": "coop-logo",
+    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.1 22.247a4.2 4.2 0 0 1 .192-1.337c.1-.293.275-.556.509-.763.24-.203.526-.346.835-.414a5 5 0 0 1 1.758 0c.311.059.6.2.837.407s.412.473.507.77c.278.89.278 1.84 0 2.73-.1.289-.271.548-.5.754a1.8 1.8 0 0 1-.806.414 5 5 0 0 1-1.767 0l-.201-.028h-.144l1.267 3.38a11.3 11.3 0 0 0 3.409-.555 3.6 3.6 0 0 0 1.44-.942c.402-.418.695-.925.854-1.478a10.07 10.07 0 0 0 0-5.593 3.75 3.75 0 0 0-.864-1.46 3.76 3.76 0 0 0-1.43-.942 10.47 10.47 0 0 0-6.827 0c-.565.163-1.08.46-1.498.867-.42.404-.727.906-.893 1.46-.256.92-.382 1.87-.374 2.824v8.089H20.1zM4.574 26.475c.398.416.887.738 1.43.942 2.21.762 4.618.762 6.827 0a3.64 3.64 0 0 0 1.44-.942c.401-.42.691-.932.845-1.488a10.07 10.07 0 0 0 0-5.593 3.7 3.7 0 0 0-.864-1.46 3.84 3.84 0 0 0-1.421-.941 10.47 10.47 0 0 0-6.827 0c-.55.196-1.043.52-1.44.941-.398.421-.691.927-.855 1.479a10.07 10.07 0 0 0 0 5.593c.175.546.47 1.047.865 1.47m2.592-5.65c.098-.289.27-.548.5-.753.239-.204.526-.346.835-.415a5.5 5.5 0 0 1 1.757 0c.314.057.606.197.845.405.23.212.403.477.499.773.137.449.208.915.211 1.384-.003.456-.074.91-.211 1.346a1.9 1.9 0 0 1-.509.763 1.77 1.77 0 0 1-.854.452 4.6 4.6 0 0 1-1.758 0 1.6 1.6 0 0 1-.835-.395 1.6 1.6 0 0 1-.5-.773 4.4 4.4 0 0 1 .02-2.75zM4.583 14.102c.4.41.884.731 1.42.941 1.097.37 2.25.555 3.41.547a11.7 11.7 0 0 0 3.418-.546 4 4 0 0 0 1.44-.942c.392-.424.681-.93.845-1.479 0-.16.086-.32.134-.47l-3.485-1.582q-.044.316-.135.621a1.9 1.9 0 0 1-.509.763c-.239.203-.526.346-.835.414a5 5 0 0 1-1.757 0 1.76 1.76 0 0 1-.845-.405 1.75 1.75 0 0 1-.5-.772 4.57 4.57 0 0 1 0-2.73c.1-.294.276-.556.51-.763a1.77 1.77 0 0 1 .835-.405 5 5 0 0 1 1.757 0 1.673 1.673 0 0 1 1.344 1.168c.113.44.175.892.183 1.346h3.696a10.4 10.4 0 0 0-.374-2.769 3.75 3.75 0 0 0-.864-1.46 3.76 3.76 0 0 0-1.43-.94 10.47 10.47 0 0 0-6.828 0 3.85 3.85 0 0 0-1.44.94 3.65 3.65 0 0 0-.845 1.48 10.07 10.07 0 0 0 0 5.593c.17.54.463 1.036.855 1.45M17.72 14.102c.395.41.877.731 1.411.941a9.6 9.6 0 0 0 3.418.547 11.7 11.7 0 0 0 3.418-.546 4 4 0 0 0 1.44-.942c.393-.424.682-.93.846-1.479.255-.92.384-1.87.384-2.825a11 11 0 0 0-.365-2.824 3.8 3.8 0 0 0-.874-1.46 3.7 3.7 0 0 0-1.421-.942 10.5 10.5 0 0 0-6.836 0 3.6 3.6 0 0 0-1.431.942c-.4.416-.693.92-.855 1.469a10.07 10.07 0 0 0 0 5.593c.166.567.462 1.089.865 1.526m2.573-5.65c.101-.29.276-.549.509-.753.24-.2.527-.34.835-.405a5 5 0 0 1 1.757 0 1.71 1.71 0 0 1 1.344 1.167 4.54 4.54 0 0 1 .02 2.731c-.1.295-.276.558-.512.765a1.8 1.8 0 0 1-.833.412 5 5 0 0 1-1.757 0 1.76 1.76 0 0 1-.845-.405 1.75 1.75 0 0 1-.499-.772 4.57 4.57 0 0 1-.02-2.73z" />
+    </svg>
+  )
+}

package/src/components/icons/CoopMembershipCardFilledIcon.tsx

@@ -0,0 +1,40 @@
+import clsx from "clsx"
+import { type SVGProps } from "react"
+
+import { useId } from "../../hooks/useId"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const CoopMembershipCardFilledIcon = ({
+  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": "coop-membership-card-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="M11.862 13.64a3 3 0 0 1 .97 0 1 1 0 0 1 .466.223 1 1 0 0 1 .275.426q.114.374.117.764-.003.38-.117.743c-.057.16-.153.305-.28.42a1 1 0 0 1-.472.25c-.32.062-.65.062-.97 0a.9.9 0 0 1-.46-.218.9.9 0 0 1-.276-.427 2.44 2.44 0 0 1 .011-1.516v-.022a1 1 0 0 1 .275-.415c.132-.112.29-.19.461-.228M19.11 6.817c.32-.057.65-.057.97 0a.95.95 0 0 1 .741.645 2.5 2.5 0 0 1 .011 1.507 1 1 0 0 1-.282.422c-.13.113-.288.192-.46.227-.32.057-.648.057-.969 0a.97.97 0 0 1-.466-.223.97.97 0 0 1-.276-.426 2.5 2.5 0 0 1-.01-1.507v-.006a1 1 0 0 1 .28-.415c.133-.11.291-.187.461-.224" />
+      <path
+        clipRule="evenodd"
+        d="M24 2a2 2 0 0 1 2 2v24a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm-2.484 10.278a5.8 5.8 0 0 0-3.768 0c-.311.09-.595.254-.826.478-.232.223-.4.5-.492.806a5.6 5.6 0 0 0-.207 1.558v4.463h2.04v-4.515c-.005-.25.03-.499.105-.738a1 1 0 0 1 .281-.42c.132-.113.291-.192.461-.23.32-.056.649-.056.97 0a1 1 0 0 1 .462.225c.13.115.227.261.28.425a2.5 2.5 0 0 1 0 1.507.981.981 0 0 1-.72.645 2.8 2.8 0 0 1-.976 0l-.111-.016h-.08l.7 1.865a6.2 6.2 0 0 0 1.88-.307c.305-.107.577-.285.795-.52.222-.23.384-.51.471-.815a5.56 5.56 0 0 0 0-3.087 2.1 2.1 0 0 0-.476-.804 2.1 2.1 0 0 0-.79-.52m-7.264-.11a5.8 5.8 0 0 0-3.768 0 2 2 0 0 0-.794.52c-.22.232-.381.512-.471.816a5.56 5.56 0 0 0 0 3.087c.096.3.259.578.476.81.22.23.49.408.79.52 1.218.42 2.548.42 3.767 0a2.01 2.01 0 0 0 1.26-1.34 5.56 5.56 0 0 0 0-3.087 2 2 0 0 0-.477-.806 2.1 2.1 0 0 0-.783-.52m.005-6.815a5.78 5.78 0 0 0-3.767 0 2.011 2.011 0 0 0-1.262 1.335 5.56 5.56 0 0 0 0 3.085c.094.299.256.573.472.801.22.226.488.404.784.52a5.8 5.8 0 0 0 1.881.3 6.5 6.5 0 0 0 1.886-.3c.3-.114.572-.291.795-.52.216-.233.376-.513.466-.816 0-.088.047-.177.074-.26l-1.923-.873q-.024.174-.074.344c-.057.16-.153.305-.28.42-.132.113-.29.191-.461.23-.32.056-.65.056-.97 0a1 1 0 0 1-.467-.224.97.97 0 0 1-.275-.426 2.52 2.52 0 0 1 0-1.507.977.977 0 0 1 .742-.645c.32-.057.65-.057.97 0a.925.925 0 0 1 .741.645q.094.366.1.743h2.04c0-.516-.07-1.03-.206-1.528a2.1 2.1 0 0 0-.477-.805 2.1 2.1 0 0 0-.79-.52m7.248-.038a5.8 5.8 0 0 0-3.772 0 2 2 0 0 0-.79.52c-.22.23-.382.507-.471.81a5.56 5.56 0 0 0 0 3.087c.091.313.255.601.477.842.218.226.484.404.778.52a5.3 5.3 0 0 0 1.886.3 6.5 6.5 0 0 0 1.887-.3c.3-.114.572-.291.795-.52.216-.233.375-.513.466-.816.14-.508.212-1.032.212-1.559s-.067-1.05-.201-1.558a2.1 2.1 0 0 0-.483-.806 2.06 2.06 0 0 0-.784-.52"
+        fillRule="evenodd"
+      />
+    </svg>
+  )
+}

package/src/components/icons/CreditCardFilledIcon.tsx

@@ -0,0 +1,42 @@
+import clsx from "clsx"
+import { type SVGProps } from "react"
+
+import { useId } from "../../hooks/useId"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const CreditCardFilledIcon = ({ 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": "credit-card-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}
+      <g clipPath="url(#a)">
+        <mask id="b">
+          <path d="M28 6a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2zM6 18v4h5.979v-4zm-2-8v4h24v-4z" />
+        </mask>
+        <path d="M28 6a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2zM6 18v4h5.979v-4zm-2-8v4h24v-4z" />
+        <path
+          d="M28 6V4zm2 2h2zm0 16h2zm-2 2v2zM4 26v2zm-2-2H0zM2 8H0zm2-2V4zm2 12v-2H4v2zm0 4H4v2h2zm5.979 0v2h2v-2zm0-4h2v-2h-2zM4 10V8H2v2zm0 4H2v2h2zm24 0v2h2v-2zm0-4h2V8h-2zm0-4v2h4a4 4 0 0 0-4-4zm2 2h-2v16h4V8zm0 16h-2v4a4 4 0 0 0 4-4zm-2 2v-2H4v4h24zM4 26v-2H0a4 4 0 0 0 4 4zm-2-2h2V8H0v16zM2 8h2V4a4 4 0 0 0-4 4zm2-2v2h24V4H4zm2 12H4v4h4v-4zm0 4v2h5.979v-4H6zm5.979 0h2v-4h-4v4zm0-4v-2H6v4h5.979zM4 10H2v4h4v-4zm0 4v2h24v-4H4zm24 0h2v-4h-4v4zm0-4V8H4v4h24z"
+          mask="url(#b)"
+        />
+      </g>
+      <defs>
+        <clipPath id="a">
+          <path d="M0 0h32v32H0z" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}

package/src/components/icons/CreditCardIcon.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 CreditCardIcon = ({ 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": "credit-card",
+    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.204 6.01A2 2 0 0 1 30 8v16l-.01.204a2 2 0 0 1-1.786 1.785L28 26H4a2 2 0 0 1-1.99-1.796L2 24V8a2 2 0 0 1 2-2h24zM4 14v10h24V14zm7.979 8H6v-4h5.979zM4 10h24V8H4z" />
+    </svg>
+  )
+}

package/src/components/icons/{CloseIcon.tsx → CrossIcon.tsx}

@@ -7,13 +7,13 @@ interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const CloseIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+export const CrossIcon = ({ 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": "close",
-    fill: fill ?? "none",
+    "data-icon": "cross",
+    fill: fill ?? "currentColor",
     id: uid,
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
@@ -22,14 +22,7 @@ export const CloseIcon = ({ alt, className, fill, id, ref, ...props }: IconProps
   return (
     <svg {...componentProps} ref={ref}>
       {alt ? <title id={uid + "-title"}>{alt}</title> : null}
-      <path
-        d="M27 28a1 1 0 0 1-.71-.29l-22-22a1 1 0 0 1 1.42-1.42l22 22a1 1 0 0 1 0 1.42A1 1 0 0 1 27 28"
-        fill={fill ?? "currentColor"}
-      />
-      <path
-        d="M5 28a1 1 0 0 1-.71-.29 1 1 0 0 1 0-1.42l22-22a1 1 0 1 1 1.42 1.42l-22 22A1 1 0 0 1 5 28"
-        fill={fill ?? "currentColor"}
-      />
+      <path d="M26.293 4.293a1 1 0 1 1 1.414 1.414L17.414 16l10.293 10.293a1 1 0 1 1-1.414 1.414L16 17.414 5.707 27.707a1 1 0 1 1-1.414-1.414L14.586 16 4.293 5.707a1 1 0 1 1 1.414-1.414L16 14.586z" />
     </svg>
   )
 }

package/src/components/icons/DocumentIcon.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 DocumentIcon = ({ 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": "document",
+    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="M24.204 4.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-2h16zM8 26h16V6H8zm8-10a1 1 0 1 1 0 2h-5a1 1 0 1 1 0-2zm5-4a1 1 0 1 1 0 2H11a1 1 0 1 1 0-2zm0-4a1 1 0 1 1 0 2H11a1 1 0 1 1 0-2z" />
+    </svg>
+  )
+}