@coopdigital/react 0.46.0 → 0.47.0

package/src/components/Icon/ArrowUpIcon.tsx

@@ -1,24 +1,27 @@
 import clsx from "clsx"
-import { type SVGProps, useId } from "react"
+import { type SVGProps } from "react"
+
+import { useId } from "../../hooks/useId"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const ArrowUpIcon = ({ alt, className, fill, ...props }: IconProps) => {
-  const id = useId()
+export const ArrowUpIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? id : undefined,
+    "aria-labelledby": alt ? uid + "-title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "arrow-up",
     fill: fill ?? "none",
+    id: uid,
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
     ...props,
   }
   return (
-    <svg {...componentProps}>
-      {alt ? <title id={id}>{alt}</title> : null}
+    <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"

package/src/components/Icon/AvatarAltIcon.tsx

@@ -1,24 +1,27 @@
 import clsx from "clsx"
-import { type SVGProps, useId } from "react"
+import { type SVGProps } from "react"
+
+import { useId } from "../../hooks/useId"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const AvatarAltIcon = ({ alt, className, fill, ...props }: IconProps) => {
-  const id = useId()
+export const AvatarAltIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? id : undefined,
+    "aria-labelledby": alt ? uid + "-title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "avatar-alt",
     fill: fill ?? "none",
+    id: uid,
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
     ...props,
   }
   return (
-    <svg {...componentProps}>
-      {alt ? <title id={id}>{alt}</title> : null}
+    <svg {...componentProps} ref={ref}>
+      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
       <path
         d="M16 32a16 16 0 1 1 16-16 16 16 0 0 1-16 16m0-30a14 14 0 1 0 14 14A14 14 0 0 0 16 2"
         fill={fill ?? "currentColor"}

package/src/components/Icon/AvatarIcon.tsx

@@ -1,24 +1,27 @@
 import clsx from "clsx"
-import { type SVGProps, useId } from "react"
+import { type SVGProps } from "react"
+
+import { useId } from "../../hooks/useId"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const AvatarIcon = ({ alt, className, fill, ...props }: IconProps) => {
-  const id = useId()
+export const AvatarIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? id : undefined,
+    "aria-labelledby": alt ? uid + "-title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "avatar",
     fill: fill ?? "none",
+    id: uid,
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
     ...props,
   }
   return (
-    <svg {...componentProps}>
-      {alt ? <title id={id}>{alt}</title> : null}
+    <svg {...componentProps} ref={ref}>
+      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
       <path
         d="M16 31a18.24 18.24 0 0 1-12.64-5.1A1.19 1.19 0 0 1 3 24.86a12.31 12.31 0 0 1 12-10h2a12.31 12.31 0 0 1 12 10 1.19 1.19 0 0 1-.34 1.06A18.24 18.24 0 0 1 16 31M5.42 24.68a15.9 15.9 0 0 0 21.16 0A10 10 0 0 0 17 17.17h-2a10 10 0 0 0-9.58 7.51"
         fill={fill ?? "currentColor"}

package/src/components/Icon/BasketIcon.tsx

@@ -1,24 +1,27 @@
 import clsx from "clsx"
-import { type SVGProps, useId } from "react"
+import { type SVGProps } from "react"
+
+import { useId } from "../../hooks/useId"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const BasketIcon = ({ alt, className, fill, ...props }: IconProps) => {
-  const id = useId()
+export const BasketIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? id : undefined,
+    "aria-labelledby": alt ? uid + "-title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "basket",
     fill: fill ?? "none",
+    id: uid,
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
     ...props,
   }
   return (
-    <svg {...componentProps}>
-      {alt ? <title id={id}>{alt}</title> : null}
+    <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"}

package/src/components/Icon/CalendarIcon.tsx

@@ -1,24 +1,27 @@
 import clsx from "clsx"
-import { type SVGProps, useId } from "react"
+import { type SVGProps } from "react"
+
+import { useId } from "../../hooks/useId"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const CalendarIcon = ({ alt, className, fill, ...props }: IconProps) => {
-  const id = useId()
+export const CalendarIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? id : undefined,
+    "aria-labelledby": alt ? uid + "-title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "calendar",
     fill: fill ?? "none",
+    id: uid,
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
     ...props,
   }
   return (
-    <svg {...componentProps}>
-      {alt ? <title id={id}>{alt}</title> : null}
+    <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"}

package/src/components/Icon/ChevronDownIcon.tsx

@@ -1,24 +1,27 @@
 import clsx from "clsx"
-import { type SVGProps, useId } from "react"
+import { type SVGProps } from "react"
+
+import { useId } from "../../hooks/useId"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const ChevronDownIcon = ({ alt, className, fill, ...props }: IconProps) => {
-  const id = useId()
+export const ChevronDownIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? id : undefined,
+    "aria-labelledby": alt ? uid + "-title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "chevron-down",
     fill: fill ?? "none",
+    id: uid,
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
     ...props,
   }
   return (
-    <svg {...componentProps}>
-      {alt ? <title id={id}>{alt}</title> : null}
+    <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"}

package/src/components/Icon/ChevronLeftIcon.tsx

@@ -1,24 +1,27 @@
 import clsx from "clsx"
-import { type SVGProps, useId } from "react"
+import { type SVGProps } from "react"
+
+import { useId } from "../../hooks/useId"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const ChevronLeftIcon = ({ alt, className, fill, ...props }: IconProps) => {
-  const id = useId()
+export const ChevronLeftIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? id : undefined,
+    "aria-labelledby": alt ? uid + "-title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "chevron-left",
     fill: fill ?? "none",
+    id: uid,
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
     ...props,
   }
   return (
-    <svg {...componentProps}>
-      {alt ? <title id={id}>{alt}</title> : null}
+    <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"}

package/src/components/Icon/ChevronRightIcon.tsx

@@ -1,24 +1,27 @@
 import clsx from "clsx"
-import { type SVGProps, useId } from "react"
+import { type SVGProps } from "react"
+
+import { useId } from "../../hooks/useId"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const ChevronRightIcon = ({ alt, className, fill, ...props }: IconProps) => {
-  const id = useId()
+export const ChevronRightIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? id : undefined,
+    "aria-labelledby": alt ? uid + "-title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "chevron-right",
     fill: fill ?? "none",
+    id: uid,
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
     ...props,
   }
   return (
-    <svg {...componentProps}>
-      {alt ? <title id={id}>{alt}</title> : null}
+    <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"}

package/src/components/Icon/ChevronUpIcon.tsx

@@ -1,24 +1,27 @@
 import clsx from "clsx"
-import { type SVGProps, useId } from "react"
+import { type SVGProps } from "react"
+
+import { useId } from "../../hooks/useId"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const ChevronUpIcon = ({ alt, className, fill, ...props }: IconProps) => {
-  const id = useId()
+export const ChevronUpIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? id : undefined,
+    "aria-labelledby": alt ? uid + "-title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "chevron-up",
     fill: fill ?? "none",
+    id: uid,
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
     ...props,
   }
   return (
-    <svg {...componentProps}>
-      {alt ? <title id={id}>{alt}</title> : null}
+    <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"}

package/src/components/Icon/ClockIcon.tsx

@@ -1,24 +1,27 @@
 import clsx from "clsx"
-import { type SVGProps, useId } from "react"
+import { type SVGProps } from "react"
+
+import { useId } from "../../hooks/useId"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const ClockIcon = ({ alt, className, fill, ...props }: IconProps) => {
-  const id = useId()
+export const ClockIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? id : undefined,
+    "aria-labelledby": alt ? uid + "-title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "clock",
     fill: fill ?? "none",
+    id: uid,
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
     ...props,
   }
   return (
-    <svg {...componentProps}>
-      {alt ? <title id={id}>{alt}</title> : null}
+    <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"}

package/src/components/Icon/CloseAltIcon.tsx

@@ -1,24 +1,27 @@
 import clsx from "clsx"
-import { type SVGProps, useId } from "react"
+import { type SVGProps } from "react"
+
+import { useId } from "../../hooks/useId"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const CloseAltIcon = ({ alt, className, fill, ...props }: IconProps) => {
-  const id = useId()
+export const CloseAltIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? id : undefined,
+    "aria-labelledby": alt ? uid + "-title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "close-alt",
     fill: fill ?? "none",
+    id: uid,
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
     ...props,
   }
   return (
-    <svg {...componentProps}>
-      {alt ? <title id={id}>{alt}</title> : null}
+    <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"}

package/src/components/Icon/CloseIcon.tsx

@@ -1,24 +1,27 @@
 import clsx from "clsx"
-import { type SVGProps, useId } from "react"
+import { type SVGProps } from "react"
+
+import { useId } from "../../hooks/useId"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const CloseIcon = ({ alt, className, fill, ...props }: IconProps) => {
-  const id = useId()
+export const CloseIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? id : undefined,
+    "aria-labelledby": alt ? uid + "-title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "close",
     fill: fill ?? "none",
+    id: uid,
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
     ...props,
   }
   return (
-    <svg {...componentProps}>
-      {alt ? <title id={id}>{alt}</title> : null}
+    <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"}

package/src/components/Icon/CoopCardIcon.tsx

@@ -1,24 +1,27 @@
 import clsx from "clsx"
-import { type SVGProps, useId } from "react"
+import { type SVGProps } from "react"
+
+import { useId } from "../../hooks/useId"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const CoopCardIcon = ({ alt, className, fill, ...props }: IconProps) => {
-  const id = useId()
+export const CoopCardIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? id : undefined,
+    "aria-labelledby": alt ? uid + "-title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "coop-card",
     fill: fill ?? "none",
+    id: uid,
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
     ...props,
   }
   return (
-    <svg {...componentProps}>
-      {alt ? <title id={id}>{alt}</title> : null}
+    <svg {...componentProps} ref={ref}>
+      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
       <path
         d="M6.67 0a1.34 1.34 0 0 0-1.34 1.33v29.34A1.34 1.34 0 0 0 6.67 32h18.66a1.34 1.34 0 0 0 1.34-1.33V1.33A1.34 1.34 0 0 0 25.33 0ZM23 4.77a6.4 6.4 0 0 1 .21 1.62A6.8 6.8 0 0 1 22.94 8a2.1 2.1 0 0 1-.48.85 2.3 2.3 0 0 1-.82.55 6.3 6.3 0 0 1-1.93.31 5.3 5.3 0 0 1-1.94-.31 2.2 2.2 0 0 1-.8-.55 2.3 2.3 0 0 1-.49-.85 5.94 5.94 0 0 1 0-3.24 2.2 2.2 0 0 1 .52-.84 2.1 2.1 0 0 1 .82-.54 5.84 5.84 0 0 1 3.87 0 2.24 2.24 0 0 1 .81.55 2.3 2.3 0 0 1 .5.84m-2 2.4a2.5 2.5 0 0 0 .12-.78 2.4 2.4 0 0 0-.13-.8 1 1 0 0 0-.28-.45 1.15 1.15 0 0 0-.47-.23 2.8 2.8 0 0 0-1 0 1 1 0 0 0-.47.24.9.9 0 0 0-.29.44 2.66 2.66 0 0 0 0 1.58 1 1 0 0 0 .28.45 1.1 1.1 0 0 0 .48.23 2.8 2.8 0 0 0 1 0 1.1 1.1 0 0 0 .47-.24 1 1 0 0 0 .23-.44Zm-5.5 4.75a5.9 5.9 0 0 1 0 3.23 2.07 2.07 0 0 1-1.3 1.4 5.84 5.84 0 0 1-3.87 0 2.16 2.16 0 0 1-.81-.55 2.1 2.1 0 0 1-.52-.85 5.9 5.9 0 0 1 0-3.23 2.1 2.1 0 0 1 .48-.85 2.16 2.16 0 0 1 .82-.55 5.84 5.84 0 0 1 3.87 0 2.19 2.19 0 0 1 1.3 1.4Zm-2 2.41a2.5 2.5 0 0 0 .12-.77 2.7 2.7 0 0 0-.12-.8 1 1 0 0 0-.28-.45 1 1 0 0 0-.48-.23 2.8 2.8 0 0 0-1 0 1 1 0 0 0-.47.24 1 1 0 0 0-.28.44 2.63 2.63 0 0 0 0 1.57.9.9 0 0 0 .28.45 1 1 0 0 0 .47.23 2.8 2.8 0 0 0 1 0 1 1 0 0 0 .47-.23 1 1 0 0 0 .29-.45m2.22-8h-2.1a3.3 3.3 0 0 0-.1-.78 1 1 0 0 0-.29-.45 1.1 1.1 0 0 0-.47-.23 2.8 2.8 0 0 0-1 0 1.05 1.05 0 0 0-.47.24 1.1 1.1 0 0 0-.29.44 2.66 2.66 0 0 0 0 1.58 1 1 0 0 0 .28.45 1.1 1.1 0 0 0 .48.23 2.8 2.8 0 0 0 1 0 1.1 1.1 0 0 0 .47-.24 1.1 1.1 0 0 0 .29-.44 2.3 2.3 0 0 0 .07-.36l2 .92a3 3 0 0 0-.09.31 2.1 2.1 0 0 1-.49.85 2.16 2.16 0 0 1-.81.55 6.4 6.4 0 0 1-1.94.31 5.7 5.7 0 0 1-1.93-.31 2.1 2.1 0 0 1-.8-.55A2.16 2.16 0 0 1 9 8a5.94 5.94 0 0 1 0-3.23 2.06 2.06 0 0 1 .48-.85 2 2 0 0 1 .82-.54 5.84 5.84 0 0 1 3.87 0 2.2 2.2 0 0 1 .8.55 2 2 0 0 1 .49.84 6.7 6.7 0 0 1 .26 1.6Zm.5 7.18a6.2 6.2 0 0 1 .21-1.61 2.06 2.06 0 0 1 .51-.85 2 2 0 0 1 .85-.5 5.84 5.84 0 0 1 3.87 0 2.16 2.16 0 0 1 .81.55 2.1 2.1 0 0 1 .53.9 5.9 5.9 0 0 1 0 3.23 2.1 2.1 0 0 1-.48.85 2.16 2.16 0 0 1-.82.55 6.7 6.7 0 0 1-1.93.32L19 15h.2a2.8 2.8 0 0 0 1 0 1 1 0 0 0 .46-.24 1.05 1.05 0 0 0 .27-.44 2.66 2.66 0 0 0 0-1.58 1 1 0 0 0-.28-.44 1 1 0 0 0-.47-.23 2.4 2.4 0 0 0-1 0 .9.9 0 0 0-.47.23.9.9 0 0 0-.29.44 2.3 2.3 0 0 0-.11.78v4.73h-2.1Z"
         fill={fill ?? "currentColor"}

package/src/components/Icon/CoopIcon.tsx

@@ -1,24 +1,27 @@
 import clsx from "clsx"
-import { type SVGProps, useId } from "react"
+import { type SVGProps } from "react"
+
+import { useId } from "../../hooks/useId"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const CoopIcon = ({ alt, className, fill, ...props }: IconProps) => {
-  const id = useId()
+export const CoopIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? id : undefined,
+    "aria-labelledby": alt ? uid + "-title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "coop",
     fill: fill ?? "none",
+    id: uid,
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
     ...props,
   }
   return (
-    <svg {...componentProps}>
-      {alt ? <title id={id}>{alt}</title> : null}
+    <svg {...componentProps} ref={ref}>
+      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
       <path
         d="M28.77 5.17a11.33 11.33 0 0 1 0 5.93 4 4 0 0 1-.88 1.57 4.1 4.1 0 0 1-1.5 1 12 12 0 0 1-3.56.58 9.8 9.8 0 0 1-3.56-.58 4.2 4.2 0 0 1-1.47-1 4.1 4.1 0 0 1-.9-1.55 10.9 10.9 0 0 1 0-5.94 3.8 3.8 0 0 1 .89-1.56 3.8 3.8 0 0 1 1.49-1 10.73 10.73 0 0 1 7.12 0 3.9 3.9 0 0 1 1.48 1 3.9 3.9 0 0 1 .89 1.55m-3.67 4.4a4.9 4.9 0 0 0 .21-1.43 4.9 4.9 0 0 0-.23-1.47 1.8 1.8 0 0 0-.53-.82 1.77 1.77 0 0 0-.87-.42 5.1 5.1 0 0 0-1.83 0 2 2 0 0 0-.87.43 1.9 1.9 0 0 0-.53.81 4.94 4.94 0 0 0 0 2.9 1.86 1.86 0 0 0 .52.82 1.8 1.8 0 0 0 .88.43 5.1 5.1 0 0 0 1.83 0 1.88 1.88 0 0 0 1.4-1.25Zm-10 8.73a10.9 10.9 0 0 1 0 5.94 3.75 3.75 0 0 1-.88 1.58 3.8 3.8 0 0 1-1.5 1 10.7 10.7 0 0 1-7.11 0 4 4 0 0 1-1.49-1 4.1 4.1 0 0 1-.9-1.56 10.9 10.9 0 0 1 0-5.94 3.9 3.9 0 0 1 .89-1.57 3.8 3.8 0 0 1 1.5-1 10.7 10.7 0 0 1 7.11 0 4 4 0 0 1 1.48 1 3.9 3.9 0 0 1 .88 1.55Zm-3.66 4.44a5 5 0 0 0 .22-1.43 5.2 5.2 0 0 0-.22-1.47 1.9 1.9 0 0 0-.54-.84 1.8 1.8 0 0 0-.88-.43 5.6 5.6 0 0 0-1.83 0 2 2 0 0 0-.87.44 1.9 1.9 0 0 0-.52.81 4.8 4.8 0 0 0 0 2.9 1.7 1.7 0 0 0 .52.82 1.65 1.65 0 0 0 .87.42A4.7 4.7 0 0 0 10 24a1.83 1.83 0 0 0 .87-.43 2 2 0 0 0 .55-.83Zm4.05-14.63h-3.85a6.3 6.3 0 0 0-.19-1.43 1.8 1.8 0 0 0-.52-.82 1.8 1.8 0 0 0-.88-.42 5.1 5.1 0 0 0-1.83 0 1.93 1.93 0 0 0-.87.43 1.9 1.9 0 0 0-.53.81 4.94 4.94 0 0 0 0 2.9 1.86 1.86 0 0 0 .52.82 1.8 1.8 0 0 0 .88.43 5.1 5.1 0 0 0 1.83 0 2 2 0 0 0 .87-.44 2 2 0 0 0 .53-.81 4.5 4.5 0 0 0 .14-.66l3.63 1.69c-.05.16-.1.33-.14.5a4 4 0 0 1-.88 1.57 4.1 4.1 0 0 1-1.5 1 12 12 0 0 1-3.56.58 10.7 10.7 0 0 1-3.55-.58 4.2 4.2 0 0 1-1.48-1 4 4 0 0 1-.89-1.55 10.9 10.9 0 0 1 0-5.94A3.9 3.9 0 0 1 4.1 3.6a4 4 0 0 1 1.5-1 10.7 10.7 0 0 1 7.11 0 3.9 3.9 0 0 1 1.49 1 4 4 0 0 1 .9 1.55 11.3 11.3 0 0 1 .39 2.96m.93 13.19a11 11 0 0 1 .39-3 3.6 3.6 0 0 1 .93-1.55 3.7 3.7 0 0 1 1.56-.92 10.7 10.7 0 0 1 7.11 0 3.9 3.9 0 0 1 1.49 1 4 4 0 0 1 .9 1.55 10.93 10.93 0 0 1 0 5.95 3.8 3.8 0 0 1-.89 1.56 3.74 3.74 0 0 1-1.5 1 11.5 11.5 0 0 1-3.55.59l-1.32-3.59h.15l.21.06a5.2 5.2 0 0 0 1.84 0 1.84 1.84 0 0 0 .84-.44 1.9 1.9 0 0 0 .52-.8 4.94 4.94 0 0 0 0-2.9 1.83 1.83 0 0 0-1.4-1.25 5.1 5.1 0 0 0-1.83 0A2 2 0 0 0 21 19a1.9 1.9 0 0 0-.53.81 4.6 4.6 0 0 0-.2 1.42V30h-3.85Z"
         fill={fill ?? "currentColor"}

package/src/components/Icon/CoopLocationIcon.tsx

@@ -1,24 +1,27 @@
 import clsx from "clsx"
-import { type SVGProps, useId } from "react"
+import { type SVGProps } from "react"
+
+import { useId } from "../../hooks/useId"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const CoopLocationIcon = ({ alt, className, fill, ...props }: IconProps) => {
-  const id = useId()
+export const CoopLocationIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? id : undefined,
+    "aria-labelledby": alt ? uid + "-title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "coop-location",
     fill: fill ?? "none",
+    id: uid,
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
     ...props,
   }
   return (
-    <svg {...componentProps}>
-      {alt ? <title id={id}>{alt}</title> : null}
+    <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"
         fill={fill ?? "currentColor"}

package/src/components/Icon/DownloadIcon.tsx

@@ -1,24 +1,27 @@
 import clsx from "clsx"
-import { type SVGProps, useId } from "react"
+import { type SVGProps } from "react"
+
+import { useId } from "../../hooks/useId"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const DownloadIcon = ({ alt, className, fill, ...props }: IconProps) => {
-  const id = useId()
+export const DownloadIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? id : undefined,
+    "aria-labelledby": alt ? uid + "-title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "download",
     fill: fill ?? "none",
+    id: uid,
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
     ...props,
   }
   return (
-    <svg {...componentProps}>
-      {alt ? <title id={id}>{alt}</title> : null}
+    <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"}

package/src/components/Icon/HomeIcon.tsx

@@ -1,24 +1,27 @@
 import clsx from "clsx"
-import { type SVGProps, useId } from "react"
+import { type SVGProps } from "react"
+
+import { useId } from "../../hooks/useId"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const HomeIcon = ({ alt, className, fill, ...props }: IconProps) => {
-  const id = useId()
+export const HomeIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? id : undefined,
+    "aria-labelledby": alt ? uid + "-title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "home",
     fill: fill ?? "none",
+    id: uid,
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
     ...props,
   }
   return (
-    <svg {...componentProps}>
-      {alt ? <title id={id}>{alt}</title> : null}
+    <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"}

package/src/components/Icon/InformationIcon.tsx

@@ -1,24 +1,27 @@
 import clsx from "clsx"
-import { type SVGProps, useId } from "react"
+import { type SVGProps } from "react"
+
+import { useId } from "../../hooks/useId"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const InformationIcon = ({ alt, className, fill, ...props }: IconProps) => {
-  const id = useId()
+export const InformationIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? id : undefined,
+    "aria-labelledby": alt ? uid + "-title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "information",
     fill: fill ?? "none",
+    id: uid,
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
     ...props,
   }
   return (
-    <svg {...componentProps}>
-      {alt ? <title id={id}>{alt}</title> : null}
+    <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"}