@coopdigital/react 0.45.0 → 0.47.0

package/src/components/FieldMarkers/Legend.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx"
-import { HTMLAttributes } from "react"
+import { HTMLAttributes, Ref } from "react"
 
 export interface LegendProps extends HTMLAttributes<HTMLLegendElement> {
   /** **(Optional)** Main legend for the fieldset. Accepts any valid JSX or string. */
@@ -8,9 +8,11 @@ export interface LegendProps extends HTMLAttributes<HTMLLegendElement> {
   className?: string
   /** **(Optional)** Specify whether the legend should be visible to humans or screen readers. */
   isVisible?: boolean
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLLegendElement>
 }
 
-export const Legend = ({ children, className, isVisible = true, ...props }: LegendProps) => {
+export const Legend = ({ children, className, isVisible = true, ref, ...props }: LegendProps) => {
   const componentProps = {
     "aria-hidden": true,
     className: clsx("coop-field-label", !isVisible && "sr-only", className),
@@ -20,7 +22,11 @@ export const Legend = ({ children, className, isVisible = true, ...props }: Lege
   return (
     <>
       <legend className="sr-only">{children}</legend>
-      {isVisible && <div {...componentProps}>{children}</div>}
+      {isVisible && (
+        <div {...componentProps} ref={ref}>
+          {children}
+        </div>
+      )}
     </>
   )
 }

package/src/components/Fieldset/Fieldset.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx"
-import { type FieldsetHTMLAttributes, type JSX } from "react"
+import { type FieldsetHTMLAttributes, type JSX, Ref } from "react"
 
 import { StandardSizes } from "../../../src/types"
 import { Error as BaseError, type ErrorProps } from "../FieldMarkers/Error"
@@ -19,6 +19,8 @@ export interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElemen
   error?: boolean
   /** **(Optional)** Specify whether the Fieldset should show the left-hand error bar if it is in an error state. */
   hideErrorBar?: boolean
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLFieldSetElement>
   /** **(Optional)** Specify the size of the Fieldset and all its descendents. */
   size?: StandardSizes
 }
@@ -28,6 +30,7 @@ const Root = ({
   disabled,
   error = false,
   hideErrorBar = false,
+  ref,
   size = "md",
   ...props
 }: FieldsetProps): JSX.Element => {
@@ -35,15 +38,17 @@ const Root = ({
     "aria-disabled": disabled,
     className: clsx("coop-fieldset", className),
     "data-error": error || undefined,
-    //"data-variant": variant !== "default" ? variant : undefined,
     "data-hide-error": hideErrorBar || undefined,
-    // "data-orientation": orientation !== "vertical" ? orientation : undefined,
     "data-size": size.length && size !== "md" ? size : undefined,
     disabled,
     ...props,
   }
 
-  return <fieldset {...componentProps}>{children}</fieldset>
+  return (
+    <fieldset {...componentProps} ref={ref}>
+      {children}
+    </fieldset>
+  )
 }
 
 interface FieldsetFieldsProps {

package/src/components/Flourish/Flourish.tsx

@@ -1,4 +1,4 @@
-import type { JSX, ReactNode, SVGProps } from "react"
+import type { JSX, ReactNode, Ref, SVGProps } from "react"
 
 import clsx from "clsx"
 
@@ -11,12 +11,15 @@ export interface FlourishProps extends SVGProps<SVGSVGElement> {
   className?: string
   /** **(Optional)** Specify the Flourish color. */
   fill?: Darks | Lights | Tints | OfferRed | BrandBlue | White | Black
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<SVGSVGElement>
 }
 
 export const Flourish = ({
   children,
   className,
   fill = "brand-blue",
+  ref,
   ...props
 }: FlourishProps): JSX.Element => {
   const componentProps = {
@@ -28,7 +31,7 @@ export const Flourish = ({
   return (
     <span style={{ position: "relative" }}>
       {children}
-      <svg {...componentProps} viewBox="0 0 276 10">
+      <svg {...componentProps} ref={ref} viewBox="0 0 276 10">
         <path d="M275.9 8.6c.1-1.6.2-1.8-.4-2.9.3-1-.3-1.2-1.8-1.1v-.3c.6-.4.2-.2 1.4-.1-.9-2.3-5.6-1.8-8.5-2.3C259 .5 246.3.7 237.4.5L185 .4l-33-.2-26.1-.2-67.4 1.2-44.3.5C10.7 2.1 1.5.4 0 3.3l1 .2L0 4v.5C8.2 7.9 26.6 7.2 35.6 7c5 0 13.5 1.6 16.5-.6C53.4 8 59.5 8 62 7.7l45 .1 42.8.3 30.7.3 44.2.6 27.8-.5 23 .8c.1-.8-.3-.5.5-.7ZM219 2.8v-.2l.8-.2h.4l.3.4H219Zm30-.1h1.2c-.8.4-.5.3-1.2 0Zm6.2.6.2-.4h.3l-.5.4Z" />
       </svg>
     </span>

package/src/components/Icon/AddIcon.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 AddIcon = ({ alt, className, fill, ...props }: IconProps) => {
-  const id = useId()
+export const AddIcon = ({ 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": "add",
     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="M24.7 16.72a1 1 0 0 1-.7.28H8a1 1 0 1 1 0-2h16a1 1 0 0 1 1 1 1 1 0 0 1-.3.72"
         fill={fill ?? "currentColor"}

package/src/components/Icon/ArrowDownIcon.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 ArrowDownIcon = ({ alt, className, fill, ...props }: IconProps) => {
-  const id = useId()
+export const ArrowDownIcon = ({ 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-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="M15 28.66V3a1 1 0 0 1 2 0v25.66a1 1 0 0 1-2 0" fill={fill ?? "currentColor"} />
       <path
         d="M3 17a1 1 0 0 1 .29-.71 1 1 0 0 1 1.42 0L16 27.58l11.29-11.29a1 1 0 0 1 1.42 0 1 1 0 0 1 0 1.41l-12 12a1 1 0 0 1-1.41 0l-12-12A1 1 0 0 1 3 17"

package/src/components/Icon/ArrowLeftIcon.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 ArrowLeftIcon = ({ alt, className, fill, ...props }: IconProps) => {
-  const id = useId()
+export const ArrowLeftIcon = ({ 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-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="M3.34 17H29a1 1 0 0 0 0-2H3.34a1 1 0 0 0 0 2" fill={fill ?? "currentColor"} />
       <path
         d="M15 29a1 1 0 0 0 .71-.29 1 1 0 0 0 0-1.42L5.12 16.71a1 1 0 0 1 0-1.42L15.71 4.71a1 1 0 0 0 0-1.42 1 1 0 0 0-1.41 0l-12 12a1 1 0 0 0 0 1.42l12 12a1 1 0 0 0 .7.29"

package/src/components/Icon/ArrowRightIcon.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 ArrowRightIcon = ({ alt, className, fill, ...props }: IconProps) => {
-  const id = useId()
+export const ArrowRightIcon = ({ 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-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="M28.7 15H3a1 1 0 0 0 0 2h25.7a1 1 0 0 0 0-2" fill={fill ?? "currentColor"} />
       <path
         d="M17 3a1 1 0 0 0-.7.3 1 1 0 0 0 0 1.4l10.6 10.6a1 1 0 0 1 0 1.4L16.3 27.3a1 1 0 0 0 0 1.4 1 1 0 0 0 1.4 0l12-12a1 1 0 0 0 0-1.4l-12-12A1 1 0 0 0 17 3"

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"}