npm - @coopdigital/react - Versions diffs - 1.2.6 → 1.4.0 - Mend

@coopdigital/react 1.2.6 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (237) hide show

package/src/components/icons/BellIcon.tsx CHANGED Viewed

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

package/src/components/icons/BroomIcon.tsx CHANGED Viewed

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

package/src/components/icons/CalendarFilledIcon.tsx CHANGED Viewed

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

package/src/components/icons/CalendarIcon.tsx CHANGED Viewed

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const CalendarIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
   const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? uid + "-title" : undefined,
+    "aria-labelledby": alt ? uid + "__title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "calendar",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const CalendarIcon = ({ alt, className, fill, id, ref, ...props }: IconPr
   }
   return (
     <svg {...componentProps} ref={ref}>
-      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      {alt ? <title id={uid + "__title"}>{alt}</title> : null}
       <path d="M23 2a1 1 0 0 1 1 1v1h2a2 2 0 0 1 2 2v20a2 2 0 0 1-1.796 1.99L26 28H6l-.204-.01a2 2 0 0 1-1.785-1.786L4 26V6a2 2 0 0 1 2-2h2V3a1 1 0 0 1 2 0v1h12V3a1 1 0 0 1 1-1M6 26h20V12H6zm5-6a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1zm6 0a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1zm6 0a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1zm-12-6a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1zm6 0a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1zm6 0a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1zM6 10h20V6h-2v1a1 1 0 1 1-2 0V6H10v1a1 1 0 0 1-2 0V6H6z" />
     </svg>
   )

package/src/components/icons/CashFilledIcon.tsx CHANGED Viewed

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

package/src/components/icons/CashIcon.tsx CHANGED Viewed

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const CashIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
   const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? uid + "-title" : undefined,
+    "aria-labelledby": alt ? uid + "__title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "cash",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const CashIcon = ({ alt, className, fill, id, ref, ...props }: IconProps)
   }
   return (
     <svg {...componentProps} ref={ref}>
-      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      {alt ? <title id={uid + "__title"}>{alt}</title> : null}
       <path d="M15.5 13q.352 0 .665.054a1 1 0 0 1-.33 1.972A2 2 0 0 0 15.5 15c-.551 0-.904.162-1.115.367-.206.2-.385.546-.385 1.133v.5h1a1 1 0 1 1 0 2h-1v2h2a1 1 0 1 1 0 2h-4.5a1 1 0 1 1 0-2h.5v-2h-.5a1 1 0 1 1 0-2h.5v-.5c0-1.013.322-1.918.99-2.567.664-.646 1.562-.933 2.51-.933" />
       <path
         clipRule="evenodd"

package/src/components/icons/ChevronDownIcon.tsx CHANGED Viewed

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const ChevronDownIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
   const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? uid + "-title" : undefined,
+    "aria-labelledby": alt ? uid + "__title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "chevron-down",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const ChevronDownIcon = ({ alt, className, fill, id, ref, ...props }: Ico
   }
   return (
     <svg {...componentProps} ref={ref}>
-      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      {alt ? <title id={uid + "__title"}>{alt}</title> : null}
       <path d="M7.707 11.293a1 1 0 1 0-1.414 1.414L14.586 21a2 2 0 0 0 2.828 0l8.293-8.293a1 1 0 1 0-1.414-1.414L16 19.586z" />
     </svg>
   )

package/src/components/icons/ChevronLeftIcon.tsx CHANGED Viewed

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const ChevronLeftIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
   const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? uid + "-title" : undefined,
+    "aria-labelledby": alt ? uid + "__title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "chevron-left",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const ChevronLeftIcon = ({ alt, className, fill, id, ref, ...props }: Ico
   }
   return (
     <svg {...componentProps} ref={ref}>
-      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      {alt ? <title id={uid + "__title"}>{alt}</title> : null}
       <path d="M20.707 7.707a1 1 0 1 0-1.414-1.414L11 14.586a2 2 0 0 0 0 2.828l8.293 8.293a1 1 0 1 0 1.414-1.414L12.414 16z" />
     </svg>
   )

package/src/components/icons/ChevronRightIcon.tsx CHANGED Viewed

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const ChevronRightIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
   const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? uid + "-title" : undefined,
+    "aria-labelledby": alt ? uid + "__title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "chevron-right",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const ChevronRightIcon = ({ alt, className, fill, id, ref, ...props }: Ic
   }
   return (
     <svg {...componentProps} ref={ref}>
-      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      {alt ? <title id={uid + "__title"}>{alt}</title> : null}
       <path d="M11.293 24.293a1 1 0 1 0 1.414 1.414L21 17.414a2 2 0 0 0 0-2.828l-8.293-8.293a1 1 0 1 0-1.414 1.414L19.586 16z" />
     </svg>
   )

package/src/components/icons/ChevronUpIcon.tsx CHANGED Viewed

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const ChevronUpIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
   const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? uid + "-title" : undefined,
+    "aria-labelledby": alt ? uid + "__title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "chevron-up",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const ChevronUpIcon = ({ alt, className, fill, id, ref, ...props }: IconP
   }
   return (
     <svg {...componentProps} ref={ref}>
-      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      {alt ? <title id={uid + "__title"}>{alt}</title> : null}
       <path d="M24.293 20.707a1 1 0 1 0 1.414-1.414L17.414 11a2 2 0 0 0-2.828 0l-8.293 8.293a1 1 0 1 0 1.414 1.414L16 12.414z" />
     </svg>
   )

package/src/components/icons/CircleBurgerFilledIcon.tsx CHANGED Viewed

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

package/src/components/icons/CircleBurgerIcon.tsx CHANGED Viewed

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

package/src/components/icons/ClipboardFilledIcon.tsx CHANGED Viewed

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

package/src/components/icons/ClipboardIcon.tsx CHANGED Viewed

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

package/src/components/icons/ClockFilledIcon.tsx CHANGED Viewed

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const ClockFilledIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
   const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? uid + "-title" : undefined,
+    "aria-labelledby": alt ? uid + "__title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "clock-filled",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const ClockFilledIcon = ({ alt, className, fill, id, ref, ...props }: Ico
   }
   return (
     <svg {...componentProps} ref={ref}>
-      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      {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 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"

package/src/components/icons/ClockIcon.tsx CHANGED Viewed

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const ClockIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
   const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? uid + "-title" : undefined,
+    "aria-labelledby": alt ? uid + "__title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "clock",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const ClockIcon = ({ alt, className, fill, id, ref, ...props }: IconProps
   }
   return (
     <svg {...componentProps} ref={ref}>
-      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      {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 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 CHANGED Viewed

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const CloseAltFilledIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
   const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? uid + "-title" : undefined,
+    "aria-labelledby": alt ? uid + "__title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "close-alt-filled",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const CloseAltFilledIcon = ({ alt, className, fill, id, ref, ...props }:
   }
   return (
     <svg {...componentProps} ref={ref}>
-      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      {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"

package/src/components/icons/CloseAltIcon.tsx CHANGED Viewed

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const CloseAltIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
   const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? uid + "-title" : undefined,
+    "aria-labelledby": alt ? uid + "__title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "close-alt",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const CloseAltIcon = ({ alt, className, fill, id, ref, ...props }: IconPr
   }
   return (
     <svg {...componentProps} ref={ref}>
-      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      {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 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 CHANGED Viewed

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const CogIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
   const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? uid + "-title" : undefined,
+    "aria-labelledby": alt ? uid + "__title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "cog",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const CogIcon = ({ alt, className, fill, id, ref, ...props }: IconProps)
   }
   return (
     <svg {...componentProps} ref={ref}>
-      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      {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 CHANGED Viewed

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const CommunityFilledIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
   const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? uid + "-title" : undefined,
+    "aria-labelledby": alt ? uid + "__title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "community-filled",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const CommunityFilledIcon = ({ alt, className, fill, id, ref, ...props }:
   }
   return (
     <svg {...componentProps} ref={ref}>
-      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      {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 CHANGED Viewed

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const CommunityIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
   const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? uid + "-title" : undefined,
+    "aria-labelledby": alt ? uid + "__title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "community",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const CommunityIcon = ({ alt, className, fill, id, ref, ...props }: IconP
   }
   return (
     <svg {...componentProps} ref={ref}>
-      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      {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 CHANGED Viewed

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const ComputerIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
   const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? uid + "-title" : undefined,
+    "aria-labelledby": alt ? uid + "__title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "computer",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const ComputerIcon = ({ alt, className, fill, id, ref, ...props }: IconPr
   }
   return (
     <svg {...componentProps} ref={ref}>
-      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      {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 CHANGED Viewed

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const ContactFilledIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
   const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? uid + "-title" : undefined,
+    "aria-labelledby": alt ? uid + "__title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "contact-filled",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const ContactFilledIcon = ({ alt, className, fill, id, ref, ...props }: I
   }
   return (
     <svg {...componentProps} ref={ref}>
-      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      {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 CHANGED Viewed

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const ContactIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
   const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? uid + "-title" : undefined,
+    "aria-labelledby": alt ? uid + "__title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "contact",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const ContactIcon = ({ alt, className, fill, id, ref, ...props }: IconPro
   }
   return (
     <svg {...componentProps} ref={ref}>
-      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      {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 CHANGED Viewed

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const ContactlessFilledIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
   const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? uid + "-title" : undefined,
+    "aria-labelledby": alt ? uid + "__title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "contactless-filled",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const ContactlessFilledIcon = ({ alt, className, fill, id, ref, ...props
   }
   return (
     <svg {...componentProps} ref={ref}>
-      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      {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 CHANGED Viewed

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const ContactlessIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
   const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? uid + "-title" : undefined,
+    "aria-labelledby": alt ? uid + "__title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "contactless",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const ContactlessIcon = ({ alt, className, fill, id, ref, ...props }: Ico
   }
   return (
     <svg {...componentProps} ref={ref}>
-      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      {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 CHANGED Viewed

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const CoopLiveIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
   const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? uid + "-title" : undefined,
+    "aria-labelledby": alt ? uid + "__title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "coop-live",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const CoopLiveIcon = ({ alt, className, fill, id, ref, ...props }: IconPr
   }
   return (
     <svg {...componentProps} ref={ref}>
-      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      {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 CHANGED Viewed

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const CoopLocationFilledIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
   const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? uid + "-title" : undefined,
+    "aria-labelledby": alt ? uid + "__title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "coop-location-filled",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const CoopLocationFilledIcon = ({ alt, className, fill, id, ref, ...props
   }
   return (
     <svg {...componentProps} ref={ref}>
-      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      {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" />

package/src/components/icons/CoopLogoIcon.tsx CHANGED Viewed

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const CoopLogoIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
   const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? uid + "-title" : undefined,
+    "aria-labelledby": alt ? uid + "__title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "coop-logo",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const CoopLogoIcon = ({ alt, className, fill, id, ref, ...props }: IconPr
   }
   return (
     <svg {...componentProps} ref={ref}>
-      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      {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 CHANGED Viewed

@@ -17,7 +17,7 @@ export const CoopMembershipCardFilledIcon = ({
 }: IconProps) => {
   const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? uid + "-title" : undefined,
+    "aria-labelledby": alt ? uid + "__title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "coop-membership-card-filled",
     fill: fill ?? "currentColor",
@@ -28,7 +28,7 @@ export const CoopMembershipCardFilledIcon = ({
   }
   return (
     <svg {...componentProps} ref={ref}>
-      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      {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"

package/src/components/icons/CreditCardFilledIcon.tsx CHANGED Viewed

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const CreditCardFilledIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
   const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? uid + "-title" : undefined,
+    "aria-labelledby": alt ? uid + "__title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "credit-card-filled",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const CreditCardFilledIcon = ({ alt, className, fill, id, ref, ...props }
   }
   return (
     <svg {...componentProps} ref={ref}>
-      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      {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" />