@coopdigital/react 0.54.0 → 0.55.0

package/src/components/icons/DownloadIcon.tsx

@@ -13,7 +13,7 @@ export const DownloadIcon = ({ alt, className, fill, id, ref, ...props }: IconPr
     "aria-labelledby": alt ? uid + "-title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "download",
-    fill: fill ?? "none",
+    fill: fill ?? "currentColor",
     id: uid,
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
@@ -22,18 +22,7 @@ export const DownloadIcon = ({ alt, className, fill, id, ref, ...props }: IconPr
   return (
     <svg {...componentProps} ref={ref}>
       {alt ? <title id={uid + "-title"}>{alt}</title> : null}
-      <path
-        d="M16 22.56a1 1 0 0 1-1-1V1a1 1 0 0 1 2 0v20.56a1 1 0 0 1-1 1"
-        fill={fill ?? "currentColor"}
-      />
-      <path
-        d="M16 23a1 1 0 0 1-.7-.3l-9.76-9.77A1 1 0 0 1 7 11.52l9 9 9-9a1 1 0 0 1 1.41 0 1 1 0 0 1 0 1.42l-9.73 9.72A1 1 0 0 1 16 23"
-        fill={fill ?? "currentColor"}
-      />
-      <path
-        d="M30 32H2a2 2 0 0 1-2-2v-7.49a1 1 0 0 1 2 0V30h28v-7.49a1 1 0 0 1 2 0V30a2 2 0 0 1-2 2"
-        fill={fill ?? "currentColor"}
-      />
+      <path d="M27 20a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-6a1 1 0 1 1 2 0v5h20v-5a1 1 0 0 1 1-1M16 4a1 1 0 0 1 1 1v13.586l5.293-5.293a1 1 0 1 1 1.414 1.414l-7 7a1 1 0 0 1-.415.25l-.062.015-.034.008-.031.004A1 1 0 0 1 16 22q-.085-.001-.166-.016-.015-.001-.031-.005l-.034-.007-.062-.016a1 1 0 0 1-.414-.249l-7-7a1 1 0 1 1 1.414-1.414L15 18.586V5a1 1 0 0 1 1-1" />
     </svg>
   )
 }

package/src/components/icons/EnterStoreIcon.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 EnterStoreIcon = ({ 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": "enter-store",
+    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 2a2 2 0 0 1 2 2v24a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2v-1.987a1 1 0 0 1 2 0V28h16V4H8v2.004a1 1 0 0 1-2 0V4a2 2 0 0 1 2-2zM9.293 9.293a1 1 0 0 1 1.414 0l5.47 5.47a1.75 1.75 0 0 1 0 2.474l-5.47 5.47a1 1 0 1 1-1.414-1.414L13.586 17H4.989a1 1 0 0 1 0-2h8.597l-4.293-4.293a1 1 0 0 1 0-1.414" />
+    </svg>
+  )
+}

package/src/components/icons/ExitStoreIcon.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 ExitStoreIcon = ({ 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": "exit-store",
+    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 2a2 2 0 0 1 2 2v24a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2v-1.987a1 1 0 0 1 2 0V28h16V4H8v2.004a1 1 0 0 1-2 0V4a2 2 0 0 1 2-2zM9.975 9.293a1 1 0 1 1 1.414 1.414L7.096 15h8.902a1 1 0 1 1 0 2H7.096l4.293 4.293a1 1 0 1 1-1.414 1.414l-5.47-5.47a1.75 1.75 0 0 1 0-2.474z" />
+    </svg>
+  )
+}

package/src/components/icons/EyeFilledIcon.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 EyeFilledIcon = ({ 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": "eye-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.001 6C23.126 6 29.019 10.346 30 16c-.98 5.654-6.874 10-13.999 10S2.981 21.654 2 16c.98-5.654 6.875-10 14.001-10M16 10a6 6 0 1 0 0 12 6 6 0 0 0 0-12m0 2a4 4 0 1 1 0 8 4 4 0 0 1 0-8" />
+    </svg>
+  )
+}

package/src/components/icons/EyeIcon.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 EyeIcon = ({ 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": "eye",
+    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.001 6C23.126 6 29.019 10.346 30 16c-.98 5.654-6.874 10-13.999 10S2.981 21.654 2 16c.98-5.654 6.875-10 14.001-10m0 1.894c-6.307 0-11.115 3.73-12.07 8.106.955 4.376 5.763 8.106 12.07 8.106 6.306 0 11.112-3.73 12.067-8.106-.924-4.236-5.457-7.867-11.466-8.095zM16 10a6 6 0 1 1 0 12 6 6 0 0 1 0-12m0 2a4 4 0 1 0 0 8 4 4 0 0 0 0-8" />
+    </svg>
+  )
+}

package/src/components/icons/EyeStrikeFilledIcon.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 EyeStrikeFilledIcon = ({ 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": "eye-strike-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="M3.707 5.093a1 1 0 0 1 1.414 0l21.921 21.92a1 1 0 0 1-1.415 1.415l-3.558-3.558A16.6 16.6 0 0 1 16.001 26C8.875 26 2.981 21.654 2 16c.467-2.691 2.047-5.086 4.344-6.856L3.707 6.507a1 1 0 0 1 0-1.414M16 6c7.125 0 13.02 4.346 14 10-.466 2.685-2.041 5.073-4.33 6.843l-4.256-4.257a6 6 0 0 0-8.001-8.002L9.95 7.12A16.6 16.6 0 0 1 16 6m-5.406 7.393a6 6 0 0 0 8.01 8.012l-1.547-1.548a3.998 3.998 0 0 1-4.915-4.915zM16 12a4 4 0 0 1 3.863 5.035l-4.9-4.9Q15.462 12.003 16 12" />
+    </svg>
+  )
+}

package/src/components/icons/EyeStrikeIcon.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 EyeStrikeIcon = ({ 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": "eye-strike",
+    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="M3.707 5.093a1 1 0 0 1 1.414 0l21.921 21.92a1 1 0 0 1-1.415 1.415l-3.558-3.558A16.6 16.6 0 0 1 16.001 26C8.875 26 2.981 21.654 2 16c.467-2.691 2.047-5.086 4.344-6.856L3.707 6.507a1 1 0 0 1 0-1.414m3.991 5.405c-1.967 1.46-3.31 3.406-3.767 5.502.955 4.376 5.763 8.106 12.07 8.106 1.648 0 3.192-.257 4.593-.713l-1.99-1.988a6 6 0 0 1-8.01-8.012zM16 6c7.125 0 13.02 4.346 14 10-.466 2.685-2.041 5.073-4.33 6.843l-1.352-1.353c1.958-1.46 3.294-3.4 3.75-5.49-.955-4.376-5.761-8.106-12.068-8.106-1.64 0-3.178.253-4.573.704L9.949 7.12A16.6 16.6 0 0 1 16 6m-3.858 8.942a4 4 0 0 0 4.915 4.915zM16 10a6 6 0 0 1 5.414 8.586l-1.55-1.55q.134-.498.136-1.036a4 4 0 0 0-5.036-3.864l-1.55-1.552A6 6 0 0 1 16 10" />
+    </svg>
+  )
+}

package/src/components/icons/FeedbackFilledIcon.tsx

@@ -0,0 +1,35 @@
+import clsx from "clsx"
+import { type SVGProps } from "react"
+
+import { useId } from "../../hooks/useId"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const FeedbackFilledIcon = ({ 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": "feedback-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}
+      <mask id="a">
+        <path d="M28 6a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H6l-4 4V8a2 2 0 0 1 2-2zm-17 9a1 1 0 1 0 0 2 1 1 0 0 0 0-2m5 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2m5 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2" />
+      </mask>
+      <path d="M28 6a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H6l-4 4V8a2 2 0 0 1 2-2zm-17 9a1 1 0 1 0 0 2 1 1 0 0 0 0-2m5 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2m5 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2" />
+      <path
+        d="M28 6V4zm2 2h2zm0 16h2zm-2 2v2zM6 26v-2h-.828l-.586.586zm-4 4H0v4.828l3.414-3.414zM2 8H0zm2-2V4zm24 0v2h4a4 4 0 0 0-4-4zm2 2h-2v16h4V8zm0 16h-2v4a4 4 0 0 0 4-4zm-2 2v-2H6v4h22zM6 26l-1.414-1.414-4 4L2 30l1.414 1.414 4-4zm-4 4h2V8H0v22zM2 8h2V4a4 4 0 0 0-4 4zm2-2v2h24V4H4zm7 9v-2a3 3 0 0 0-3 3h4a1 1 0 0 1-1 1zm-1 1H8a3 3 0 0 0 3 3v-4a1 1 0 0 1 1 1zm1 1v2a3 3 0 0 0 3-3h-4a1 1 0 0 1 1-1zm1-1h2a3 3 0 0 0-3-3v4a1 1 0 0 1-1-1zm4-1v-2a3 3 0 0 0-3 3h4a1 1 0 0 1-1 1zm-1 1h-2a3 3 0 0 0 3 3v-4a1 1 0 0 1 1 1zm1 1v2a3 3 0 0 0 3-3h-4a1 1 0 0 1 1-1zm1-1h2a3 3 0 0 0-3-3v4a1 1 0 0 1-1-1zm4-1v-2a3 3 0 0 0-3 3h4a1 1 0 0 1-1 1zm-1 1h-2a3 3 0 0 0 3 3v-4a1 1 0 0 1 1 1zm1 1v2a3 3 0 0 0 3-3h-4a1 1 0 0 1 1-1zm1-1h2a3 3 0 0 0-3-3v4a1 1 0 0 1-1-1z"
+        mask="url(#a)"
+      />
+    </svg>
+  )
+}

package/src/components/icons/FeedbackIcon.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 FeedbackIcon = ({ 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": "feedback",
+    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 2H6l-4 4V8a2 2 0 0 1 2-2zM4 25.172 5.172 24H28V8H4zM11 15a1 1 0 1 1 0 2 1 1 0 0 1 0-2m5 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2m5 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2" />
+    </svg>
+  )
+}

package/src/components/icons/FilterIcon.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 FilterIcon = ({ 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": "filter",
+    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="M12 17a4 4 0 0 1 3.874 3H27a1 1 0 1 1 0 2H15.874a4.002 4.002 0 0 1-7.748 0H5a1 1 0 1 1 0-2h3.126c.444-1.725 2.01-3 3.874-3m0 2a1.998 1.998 0 0 0-1.73 3 1.998 1.998 0 1 0 3.46-2c-.346-.597-.99-1-1.73-1m8-12a4 4 0 0 1 3.874 3H27a1 1 0 1 1 0 2h-3.126a4.002 4.002 0 0 1-7.748 0H5a1 1 0 1 1 0-2h11.126c.444-1.725 2.01-3 3.874-3m0 2a2 2 0 0 0-1.986 1.771A1.98 1.98 0 0 0 18.27 12a1.998 1.998 0 1 0 3.46-2c-.346-.597-.99-1-1.73-1" />
+    </svg>
+  )
+}

package/src/components/icons/GiftCardFilledIcon.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 GiftCardFilledIcon = ({ 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": "gift-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="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-10.75 4.001c-.492 0-.937.203-1.255.53a1.73 1.73 0 0 0-1.245-.53c-.966 0-1.75.799-1.75 1.783l.009.182q.03.284.14.535H12a2 2 0 0 0-2 2v.5l.01.204A2 2 0 0 0 11 16.73v3.749l.008.155A1.524 1.524 0 0 0 12.523 22h6.954l.156-.008a1.524 1.524 0 0 0 1.36-1.36L21 20.48v-3.75c.597-.345 1-.989 1-1.728v-.5a2 2 0 0 0-1.796-1.99l-.204-.01h-1.17a1.75 1.75 0 0 0-1.58-2.5m-1.85 7v3.731h-2.877a.255.255 0 0 1-.254-.253V17zm4.331 0v3.477c0 .14-.114.254-.254.254h-2.876v-3.731zm-4.33-3.3v2.1H12a.8.8 0 0 1-.8-.8v-.5a.8.8 0 0 1 .8-.8zm4.599 0a.8.8 0 0 1 .8.8v.5a.8.8 0 0 1-.8.8h-3.4v-2.1zm-5.25-2.5c.283 0 .55.24.55.583a.567.567 0 0 1-.55.582.567.567 0 0 1-.55-.582c0-.343.267-.583.55-.583m2.5 0a.55.55 0 1 1 0 1.1.55.55 0 0 1 0-1.1" />
+    </svg>
+  )
+}

package/src/components/icons/GiftCardIcon.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 GiftCardIcon = ({ 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": "gift-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 24h24V8H4zm13.25-13.999a1.75 1.75 0 0 1 1.58 2.5H20l.204.01A2 2 0 0 1 22 14.502v.5c0 .74-.403 1.383-1 1.729v3.749l-.008.155a1.524 1.524 0 0 1-1.36 1.36l-.155.007h-6.954c-.789 0-1.437-.6-1.515-1.367L11 20.479V16.73a2 2 0 0 1-.99-1.526l-.01-.204v-.5a2 2 0 0 1 2-2h1.15a1.8 1.8 0 0 1-.141-.535L13 11.784c0-.984.784-1.783 1.75-1.783.487 0 .928.203 1.245.53.318-.327.763-.53 1.255-.53m-4.981 10.478c0 .14.114.253.254.253H15.4v-3.731H12.27zm4.332.253h2.877c.14 0 .253-.114.253-.253V17h-3.13zM12 13.702a.8.8 0 0 0-.8.799v.5a.8.8 0 0 0 .8.8h3.4v-2.1zm4.6 2.099H20a.8.8 0 0 0 .8-.8v-.5a.8.8 0 0 0-.8-.8h-3.4zm-1.85-4.6c-.283 0-.55.24-.55.583.001.342.268.582.55.582s.549-.24.55-.582a.567.567 0 0 0-.55-.583m2.5 0a.55.55 0 1 0 0 1.1.55.55 0 0 0 0-1.1" />
+    </svg>
+  )
+}

package/src/components/icons/GiftFilledIcon.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 GiftFilledIcon = ({ 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": "gift-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="M15 28H8a2 2 0 0 1-2-2V15h9zm11-2a2 2 0 0 1-2 2h-7V15h9zM18 2a3 3 0 0 1 2.826 4H26a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2h-9V8h-2v5H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5.174A2.993 2.993 0 0 1 14 2c.77 0 1.469.292 2 .768A3 3 0 0 1 18 2m-4 2a1 1 0 1 0 0 2c.423 0 .743-.002.992-.008.006-.25.008-.569.008-.992a1 1 0 0 0-1-1m4 0a1 1 0 0 0-1 1c0 .423.001.743.007.992.25.006.57.008.993.008a1 1 0 1 0 0-2" />
+    </svg>
+  )
+}

package/src/components/icons/GiftIcon.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 GiftIcon = ({ 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": "gift",
+    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 2a3 3 0 0 1 2.826 4H26l.204.01A2 2 0 0 1 28 8v3a2 2 0 0 1-2 2v13a2 2 0 0 1-1.796 1.99L24 28H8a2 2 0 0 1-1.99-1.796L6 26V13a2 2 0 0 1-2-2V8l.01-.204A2 2 0 0 1 5.797 6.01L6 6h5.174A2.993 2.993 0 0 1 14 2c.77 0 1.469.292 2 .768A3 3 0 0 1 18 2M8 26h7V13H8zm9 0h7V13h-7zM6 11h9V8H6zm11 0h9V8h-9zm1-7a1 1 0 0 0-1 1c0 .423.001.743.007.992.25.006.57.008.993.008a1 1 0 1 0 0-2m-4 0a1 1 0 1 0 0 2c.423 0 .743-.002.992-.008.006-.25.008-.569.008-.992a1 1 0 0 0-1-1" />
+    </svg>
+  )
+}

package/src/components/icons/HelpFilledIcon.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 HelpFilledIcon = ({ 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": "help-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 2c7.732 0 14 6.268 14 14s-6.268 14-14 14S2 23.732 2 16 8.268 2 16 2m.014 17.72q-.555 0-.96.386a1.26 1.26 0 0 0-.386.925q0 .27.1.505.119.235.303.403a1.5 1.5 0 0 0 .421.27q.252.1.522.1.555 0 .941-.386.404-.387.403-.925 0-.539-.403-.908a1.35 1.35 0 0 0-.941-.37m.184-9.72q-.774 0-1.446.235a3.5 3.5 0 0 0-1.194.657q-.522.437-.858 1.076-.319.621-.42 1.428l2.069.186q.016-.336.134-.656a1.64 1.64 0 0 1 .874-.942q.32-.15.707-.151.756 0 1.16.454.42.438.42 1.093 0 .504-.235.857-.219.354-.538.64l-.757.723a6 6 0 0 0-.538.572 3.2 3.2 0 0 0-.337.555 3.5 3.5 0 0 0-.184.605q-.051.32-.051.723v.64h1.984v-.438q0-.37.051-.622t.168-.47q.135-.22.337-.438a10 10 0 0 1 .555-.505q.386-.336.69-.639a4 4 0 0 0 .537-.656q.219-.335.336-.74a3.4 3.4 0 0 0 .118-.942q0-.79-.286-1.395a2.8 2.8 0 0 0-.79-1.01 3.1 3.1 0 0 0-1.143-.621A4.2 4.2 0 0 0 16.198 10" />
+    </svg>
+  )
+}

package/src/components/icons/HelpIcon.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 HelpIcon = ({ 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": "help",
+    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 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 4m.013 15.72q.538 0 .942.37t.403.908q0 .538-.403.925a1.28 1.28 0 0 1-.942.387q-.27 0-.522-.101a1.5 1.5 0 0 1-.42-.27 1.4 1.4 0 0 1-.302-.403 1.3 1.3 0 0 1-.101-.505q0-.538.387-.925.403-.386.958-.386m.185-9.72q.723 0 1.362.219.656.201 1.143.622.504.403.791 1.009.285.604.285 1.395 0 .538-.117.943-.117.402-.336.739a4 4 0 0 1-.538.656q-.303.303-.69.639-.337.286-.555.505a3 3 0 0 0-.336.437 1.7 1.7 0 0 0-.168.47q-.05.253-.05.623v.437h-1.985v-.64q0-.403.05-.722a3.5 3.5 0 0 1 .185-.605q.135-.287.337-.555.219-.27.538-.572l.756-.723q.32-.285.54-.64.234-.353.235-.857 0-.655-.421-1.093-.404-.454-1.16-.454-.387 0-.707.151a1.65 1.65 0 0 0-.875.942 2.2 2.2 0 0 0-.133.656l-2.069-.186a4.3 4.3 0 0 1 .42-1.428q.336-.64.858-1.076.52-.437 1.194-.657.672-.235 1.446-.235" />
+    </svg>
+  )
+}

package/src/components/icons/HomeFilledIcon.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 HomeFilledIcon = ({ 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": "home-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="M13.9 5.139a3 3 0 0 1 4.242 0l10.171 10.17a1 1 0 0 1-1.414 1.415l-.9-.9V26a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V15.866l-.857.858a1 1 0 0 1-1.414-1.414zM14 18a1 1 0 0 0-1 1v7h6v-7a1 1 0 0 0-1-1z" />
+    </svg>
+  )
+}

package/src/components/icons/HomeIcon.tsx

@@ -13,7 +13,7 @@ export const HomeIcon = ({ alt, className, fill, id, ref, ...props }: IconProps)
     "aria-labelledby": alt ? uid + "-title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "home",
-    fill: fill ?? "none",
+    fill: fill ?? "currentColor",
     id: uid,
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
@@ -22,18 +22,7 @@ export const HomeIcon = ({ alt, className, fill, id, ref, ...props }: IconProps)
   return (
     <svg {...componentProps} ref={ref}>
       {alt ? <title id={uid + "-title"}>{alt}</title> : null}
-      <path
-        d="M29 31H3a1 1 0 0 1-1-1V15a1 1 0 0 1 2 0v14h24V15a1 1 0 0 1 2 0v15a1 1 0 0 1-1 1"
-        fill={fill ?? "currentColor"}
-      />
-      <path
-        d="M31 17a1 1 0 0 1-.68-.27L15.92 3.37 1.68 16.73a1 1 0 0 1-1.41-.05 1 1 0 0 1 0-1.41l14.91-14a1 1 0 0 1 1.36 0l15.09 14a1 1 0 0 1 .05 1.42A1 1 0 0 1 31 17"
-        fill={fill ?? "currentColor"}
-      />
-      <path
-        d="M22.86 31h-8a1 1 0 0 1-1-1V18a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1m-7-2h6V19h-6Z"
-        fill={fill ?? "currentColor"}
-      />
+      <path d="M13.904 5.139a3 3 0 0 1 4.243 0l10.171 10.17a1 1 0 0 1 0 1.415l-.076.068a1 1 0 0 1-1.338-.068l-.9-.9V26l-.01.204a2 2 0 0 1-1.785 1.785l-.204.011h-16l-.206-.01a2 2 0 0 1-1.785-1.786L6.004 26V15.867l-.857.857a1 1 0 0 1-1.338.068l-.076-.068-.068-.076a1 1 0 0 1 .068-1.338zm2.83 1.414a1 1 0 0 0-1.416 0l-7.313 7.314V26h4v-6a2 2 0 0 1 2-2h4l.204.011a2 2 0 0 1 1.796 1.99v6h4V13.824zM14.003 26h4v-6h-4z" />
     </svg>
   )
 }

package/src/components/icons/HowDoIAssistantIcon.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 HowDoIAssistantIcon = ({ 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": "how-do-I-assistant",
+    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.621 2.565A1 1 0 0 1 26 3.49V6h2a2 2 0 0 1 2.001 2v16c0 1.105-.897 2-2.001 2H5.994L2 29.995V16.66h.001V8a2 2 0 0 1 2-2h12.222l-.602.245zM4.001 18.66H4v6.505L5.166 24H15V8H4.001zM26 20.829l-.012.15a1 1 0 0 1-.61.775L19.889 24h8.113V8H26zM17 7.842v15.179l7-2.863V4.978zM9.49 18.317q.357 0 .626.24.27.241.27.59 0 .35-.27.602A.87.87 0 0 1 9.49 20a.95.95 0 0 1-.628-.24.9.9 0 0 1-.202-.263.8.8 0 0 1-.067-.328.8.8 0 0 1 .258-.6.9.9 0 0 1 .64-.252M9.611 12q.483 0 .909.142.436.13.761.404.336.263.528.657.19.393.19.906 0 .35-.078.612a1.8 1.8 0 0 1-.225.482 2.7 2.7 0 0 1-.358.425q-.202.197-.46.415-.225.186-.37.329-.134.142-.224.284-.079.141-.112.305-.034.165-.034.405v.284H8.816v-.415q0-.263.034-.47.044-.208.123-.393.09-.186.224-.36.146-.176.359-.373l.505-.47q.211-.185.358-.415a.96.96 0 0 0 .157-.557.97.97 0 0 0-.28-.71q-.27-.296-.774-.296a1.1 1.1 0 0 0-.47.098 1.1 1.1 0 0 0-.36.252 1.1 1.1 0 0 0-.223.36q-.08.209-.09.427L7 14.208q.067-.525.28-.93a2.3 2.3 0 0 1 1.368-1.125Q9.097 12 9.612 12" />
+    </svg>
+  )
+}

package/src/components/icons/InfoIcon.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 InfoIcon = ({ 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": "info",
+    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 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 10.5a1.5 1.5 0 0 1 1.5 1.5v6a1.5 1.5 0 0 1-3 0v-6a1.5 1.5 0 0 1 1.5-1.5M16 9a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3" />
+    </svg>
+  )
+}

package/src/components/icons/KebabIcon.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 KebabIcon = ({ 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": "kebab",
+    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 22a2 2 0 1 1 0 4 2 2 0 0 1 0-4m0-8a2 2 0 1 1 0 4 2 2 0 0 1 0-4m0-8a2 2 0 1 1 0 4 2 2 0 0 1 0-4" />
+    </svg>
+  )
+}

package/src/components/icons/LoadingIcon.tsx

@@ -13,19 +13,16 @@ export const LoadingIcon = ({ alt, className, fill, id, ref, ...props }: IconPro
     "aria-labelledby": alt ? uid + "-title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "loading",
-    fill: fill ?? "none",
+    fill: fill ?? "currentColor",
     id: uid,
     role: alt ? "img" : undefined,
-    viewBox: "0 0 24 24",
+    viewBox: "0 0 28 28",
     ...props,
   }
   return (
     <svg {...componentProps} ref={ref}>
       {alt ? <title id={uid + "-title"}>{alt}</title> : null}
-      <path
-        d="M10.72 19.9a8 8 0 0 1-6.5-9.79 7.77 7.77 0 0 1 6.18-5.95 8 8 0 0 1 9.49 6.52A1.54 1.54 0 0 0 21.38 12h.13a1.37 1.37 0 0 0 1.38-1.54 11 11 0 1 0-12.7 12.39A1.54 1.54 0 0 0 12 21.34a1.47 1.47 0 0 0-1.28-1.44"
-        fill={fill ?? "currentColor"}
-      />
+      <path d="M13.001.002c.551-.039 1 .414 1 .966l-.005.102c-.052.504-.479.897-.995.94A12 12 0 0 0 2.915 9.375l-.162.414a11.998 11.998 0 0 0 15.425 15.425l.414-.162a12 12 0 0 0 5.131-4.055l.254-.364a12 12 0 0 0 1.98-5.667c.046-.55.49-.999 1.043-.999s1.004.448.964 1a14 14 0 0 1-2.323 6.778l-.296.425a14 14 0 0 1-5.987 4.732l-.483.19a14 14 0 0 1-14.401-2.866l-.373-.36a14 14 0 0 1-3.72-6.662l-.112-.506a14 14 0 0 1 .607-7.606l.19-.482a14 14 0 0 1 4.73-5.988l.426-.295a14 14 0 0 1 6.78-2.325" />
     </svg>
   )
 }