npm - @coopdigital/react - Versions diffs - 1.3.0 → 1.4.1 - Mend

@coopdigital/react 1.3.0 → 1.4.1

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 (218) hide show

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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const HomeFilledIcon = ({ 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": "home-filled",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const HomeFilledIcon = ({ 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="M13.9 5.139a3 3 0 0 1 4.242 0l10.171 10.17a1 1 0 0 1-1.414 1.415l-.9-.9V26a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V15.866l-.857.858a1 1 0 0 1-1.414-1.414zM14 18a1 1 0 0 0-1 1v7h6v-7a1 1 0 0 0-1-1z" />
     </svg>
   )

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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const HomeIcon = ({ 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": "home",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const HomeIcon = ({ 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="M13.904 5.139a3 3 0 0 1 4.243 0l10.171 10.17a1 1 0 0 1 0 1.415l-.076.068a1 1 0 0 1-1.338-.068l-.9-.9V26l-.01.204a2 2 0 0 1-1.785 1.785l-.204.011h-16l-.206-.01a2 2 0 0 1-1.785-1.786L6.004 26V15.867l-.857.857a1 1 0 0 1-1.338.068l-.076-.068-.068-.076a1 1 0 0 1 .068-1.338zm2.83 1.414a1 1 0 0 0-1.416 0l-7.313 7.314V26h4v-6a2 2 0 0 1 2-2h4l.204.011a2 2 0 0 1 1.796 1.99v6h4V13.824zM14.003 26h4v-6h-4z" />
     </svg>
   )

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

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

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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const InfoIcon = ({ 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": "info",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const InfoIcon = ({ 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 10.5a1.5 1.5 0 0 1 1.5 1.5v6a1.5 1.5 0 0 1-3 0v-6a1.5 1.5 0 0 1 1.5-1.5M16 9a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3" />
     </svg>
   )

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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const KebabIcon = ({ 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": "kebab",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const KebabIcon = ({ 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 22a2 2 0 1 1 0 4 2 2 0 0 1 0-4m0-8a2 2 0 1 1 0 4 2 2 0 0 1 0-4m0-8a2 2 0 1 1 0 4 2 2 0 0 1 0-4" />
     </svg>
   )

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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const LoadingIcon = ({ 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": "loading",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const LoadingIcon = ({ 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="M13.001.002c.551-.039 1 .414 1 .966l-.005.102c-.052.504-.479.897-.995.94A12 12 0 0 0 2.915 9.375l-.162.414a11.998 11.998 0 0 0 15.425 15.425l.414-.162a12 12 0 0 0 5.131-4.055l.254-.364a12 12 0 0 0 1.98-5.667c.046-.55.49-.999 1.043-.999s1.004.448.964 1a14 14 0 0 1-2.323 6.778l-.296.425a14 14 0 0 1-5.987 4.732l-.483.19a14 14 0 0 1-14.401-2.866l-.373-.36a14 14 0 0 1-3.72-6.662l-.112-.506a14 14 0 0 1 .607-7.606l.19-.482a14 14 0 0 1 4.73-5.988l.426-.295a14 14 0 0 1 6.78-2.325" />
     </svg>
   )

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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const LocationFilledIcon = ({ 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": "location-filled",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const LocationFilledIcon = ({ 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 2c6.627 0 12 1 12 11S16 30 16 30 4 23 4 13 9.373 2 16 2m0 6a5 5 0 1 0 0 10 5 5 0 0 0 0-10" />
     </svg>
   )

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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const LocationIcon = ({ 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": "location",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const LocationIcon = ({ 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 2c6.627 0 12 1 12 11S16 30 16 30 4 23 4 13 9.373 2 16 2m0 2c-3.345 0-5.747.289-7.349 1.396C7.241 6.37 6 8.333 6 13c0 4.202 2.544 7.966 5.414 10.836A32.3 32.3 0 0 0 16 27.622q.316-.213.704-.493a32.3 32.3 0 0 0 3.882-3.293C23.456 20.966 26 17.202 26 13c0-4.667-1.241-6.63-2.651-7.604C21.747 4.289 19.345 4 16 4m0 3a6 6 0 1 1 0 12 6 6 0 0 1 0-12m0 2a4 4 0 1 0 0 8 4 4 0 0 0 0-8" />
     </svg>
   )

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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const LogoutIcon = ({ 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": "logout",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const LogoutIcon = ({ alt, className, fill, id, ref, ...props }: IconProp
   }
   return (
     <svg {...componentProps} ref={ref}>
-      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      {alt ? <title id={uid + "__title"}>{alt}</title> : null}
       <path d="M16.001 4a1 1 0 1 1 0 2h-10v20h10a1 1 0 1 1 0 2h-10a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zm3.93 5.325a1 1 0 0 1 1.412-.064l6.168 5.63a1.5 1.5 0 0 1 0 2.215l-6.168 5.631a1 1 0 0 1-1.348-1.476l4.668-4.262H13.001a1 1 0 0 1 0-2h11.662l-4.668-4.262a1 1 0 0 1-.064-1.412" />
     </svg>
   )

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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const MailIcon = ({ 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": "mail",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const MailIcon = ({ 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="M28.204 6.01A2 2 0 0 1 30 8v16l-.01.204a2 2 0 0 1-1.786 1.785L28 26H4a2 2 0 0 1-1.99-1.796L2 24V8a2 2 0 0 1 2-2h24zM17.11 16.463a2 2 0 0 1-2.218 0L4 9.202V24h24V9.201zM16 14.798 26.197 8H5.803z" />
     </svg>
   )

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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const MenuIcon = ({ 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": "menu",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const MenuIcon = ({ 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="M27 26a1 1 0 1 1 0 2H5a1 1 0 1 1 0-2zm0-11a1 1 0 1 1 0 2H5a1 1 0 1 1 0-2zm0-11a1 1 0 1 1 0 2H5a1 1 0 0 1 0-2z" />
     </svg>
   )

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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const MessageIcon = ({ 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": "message",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const MessageIcon = ({ 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="M30 31a1 1 0 0 1-.75-.34l-7.64-8.6H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h28a1 1 0 0 1 .71.29A1 1 0 0 1 31 2v28a1 1 0 0 1-.65.93.8.8 0 0 1-.35.07M3 20.06h19.06a1 1 0 0 1 .75.33l6.19 7V3H3Z" />
     </svg>
   )

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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const MinusIcon = ({ 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": "minus",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const MinusIcon = ({ 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="M27 15a1 1 0 1 1 0 2H5a1 1 0 1 1 0-2z" />
     </svg>
   )

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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const NotesFilledIcon = ({ 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": "notes-filled",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const NotesFilledIcon = ({ 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="M13.514 12.776a2 2 0 0 0-.555 1.023l-.736 3.625a2 2 0 0 0 2.354 2.359l3.591-.723a2 2 0 0 0 1.017-.544L28 9.73V26a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h16.397zM24.63 3.199a1 1 0 0 1 1.41.004l2.832 2.832.068.075a1 1 0 0 1-.07 1.34L18.48 17.806l-.112.097a1 1 0 0 1-.397.176l-3.591.723-.13.018a1 1 0 0 1-1.065-1.067l.018-.13.737-3.625q.03-.15.104-.284l.014-.024.061-.093a1 1 0 0 1 .098-.111zm-8.791 11.495-.376 1.848 1.817-.365L26.75 6.74l-1.42-1.42z" />
     </svg>
   )

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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const NotesIcon = ({ 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": "notes",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const NotesIcon = ({ 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.948 6H6v20h20V13.135l2-1.993v14.859a2 2 0 0 1-2 2H6l-.204-.011a2 2 0 0 1-1.785-1.785L4 26V6a2 2 0 0 1 2-2h14.973zM24.63 3.2a1 1 0 0 1 1.41.004l2.832 2.832.068.075a1 1 0 0 1-.07 1.34L18.48 17.806l-.112.097a1 1 0 0 1-.397.176l-3.591.723-.13.018a1 1 0 0 1-1.065-1.067l.018-.13.737-3.625a1 1 0 0 1 .277-.512zm-8.791 11.495-.376 1.848 1.817-.365L26.75 6.74l-1.42-1.42z" />
     </svg>
   )

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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const OpenNewIcon = ({ 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": "open-new",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const OpenNewIcon = ({ 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="M14.16 18.84a1 1 0 0 1-.71-.29 1 1 0 0 1 0-1.42L30 .59a1 1 0 0 1 1.41 0 1 1 0 0 1 0 1.42L14.87 18.55a1 1 0 0 1-.71.29" />
       <path d="M31 14a1 1 0 0 1-1-1V2H19a1 1 0 0 1 0-2h12a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1M24 32H2a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h11.21a1 1 0 0 1 0 2H2v22h22V18.7a1 1 0 0 1 2 0V30a2 2 0 0 1-2 2" />
     </svg>

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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const OwnBagIcon = ({ 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": "own-bag",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const OwnBagIcon = ({ alt, className, fill, id, ref, ...props }: IconProp
   }
   return (
     <svg {...componentProps} ref={ref}>
-      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      {alt ? <title id={uid + "__title"}>{alt}</title> : null}
       <path d="M20.204 2.01A2 2 0 0 1 22 4v4h6a2 2 0 0 1 2 2v15.244a2 2 0 0 1-.698 1.519l-3.215 2.756-.14.109a2 2 0 0 1-1.162.372H7.198l-.178-.008a2 2 0 0 1-.983-.364l-.14-.11-3.199-2.742A2 2 0 0 1 2 25.258V10a2 2 0 0 1 2-2h6V4a2 2 0 0 1 2-2h8zM4 25.259 7.198 28h17.587L28 25.244V10H4zM12 8h8V4h-8z" />
     </svg>
   )

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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const PadlockIcon = ({ 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": "padlock",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const PadlockIcon = ({ 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="M16 4a8 8 0 0 1 8 8v1h2a2 2 0 0 1 2 2v11a2 2 0 0 1-1.796 1.99L26 28H6l-.204-.01a2 2 0 0 1-1.785-1.786L4 26V15a2 2 0 0 1 2-2h2v-1a8 8 0 0 1 8-8M6 26h20V15H6zm4.5-7a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3m5.5 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3m5.5 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3M16 6a6 6 0 0 0-6 6v1h12v-1a6 6 0 0 0-6-6" />
     </svg>
   )

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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const PencilIcon = ({ 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": "pencil",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const PencilIcon = ({ alt, className, fill, id, ref, ...props }: IconProp
   }
   return (
     <svg {...componentProps} ref={ref}>
-      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      {alt ? <title id={uid + "__title"}>{alt}</title> : null}
       <path d="M31.7 6.12 25.88.3a1 1 0 0 0-1.4 0L1.3 23.47a.86.86 0 0 0-.3.6L0 30.9a1.14 1.14 0 0 0 .3.8.91.91 0 0 0 .7.3h.1l6.82-1a.61.61 0 0 0 .61-.3L31.7 7.52a1 1 0 0 0 0-1.4M7.22 29l-3.57.56L5.08 28a1 1 0 0 0 0-1.42 1 1 0 0 0-1.41.05L2.39 28l.52-3.29 1.91-1.91 4.12 4.52Zm3.14-3.11-4.12-4.54L25.18 2.41l4.41 4.41Z" />
     </svg>
   )

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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const PhoneIcon = ({ 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": "phone",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const PhoneIcon = ({ 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="m25.61 23.552 1.413 1.414-2.318 2.319-1.415-1.415zm0-1.968-2.4-2.4a1.393 1.393 0 0 0-1.862-.095l-.106.096c-1.202 1.202-3.212 1.567-4.78.439a18 18 0 0 1-1.93-1.608l-.276-.27a18 18 0 0 1-1.88-2.21l-.101-.148c-1-1.543-.623-3.464.541-4.628l.096-.106a1.39 1.39 0 0 0 0-1.756l-.096-.106-2.399-2.399a1.39 1.39 0 0 0-1.862-.096l-.106.096-2.318 2.319a.37.37 0 0 0-.109.282c.004.08.021.198.07.41.031.139.129.529.183.799.128.638.35 1.526.735 2.57.722 1.957 2.017 4.476 4.323 6.93l.475.491c2.606 2.606 5.332 4.028 7.421 4.797 1.044.385 1.931.608 2.57.736l.8.183c.212.049.33.065.41.069a.37.37 0 0 0 .281-.109l1.415 1.415c-.43.43-.985.66-1.548.69l-.24.002c-.51-.024-1.01-.19-1.51-.29a19 19 0 0 1-2.87-.819c-2.308-.85-5.297-2.413-8.143-5.26s-4.41-5.835-5.26-8.144a19 19 0 0 1-.82-2.869c-.088-.437-.225-.87-.274-1.313l-.015-.19c-.032-.646.199-1.301.691-1.794l2.32-2.32a3.39 3.39 0 0 1 4.796 0l2.399 2.4a3.39 3.39 0 0 1 0 4.796c-.592.592-.719 1.516-.23 2.196a16 16 0 0 0 1.67 1.962A16 16 0 0 0 17.63 18c.68.49 1.604.363 2.197-.23a3.39 3.39 0 0 1 4.797 0l2.398 2.4a3.39 3.39 0 0 1 0 4.796L25.61 23.55c.51-.51.542-1.316.095-1.862z" />
     </svg>
   )

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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const PowerIcon = ({ 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": "power",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const PowerIcon = ({ 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="M25.158 6.843c.41-.41 1.078-.412 1.456.027a14 14 0 0 1 2.321 14.487l-.207.476a14 14 0 0 1-4.95 5.808l-.436.28A14 14 0 0 1 16 30l-.518-.01a14 14 0 0 1-6.823-2.07l-.437-.28A14 14 0 0 1 5.387 6.87c.378-.44 1.046-.437 1.456-.027s.406 1.072.034 1.516l-.235.29a11.9 11.9 0 0 0-2.313 5.03l-.078.433a11.9 11.9 0 0 0 11.309 13.78l.44.008c2.207 0 4.367-.613 6.24-1.767l.372-.238a11.9 11.9 0 0 0 5.137-11.783l-.078-.433a11.9 11.9 0 0 0-2.548-5.32c-.372-.444-.375-1.106.035-1.516M16 2a1 1 0 0 1 1 1v13a1 1 0 0 1-1.995.102L15 16V3a1 1 0 0 1 1-1" />
     </svg>
   )

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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const SaveFilledIcon = ({ 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": "save-filled",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const SaveFilledIcon = ({ 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="M21.499 4a2 2 0 0 1 1.4.572l4.502 4.42A2 2 0 0 1 28 10.417V26a2 2 0 0 1-2 2h-4v-9a2 2 0 0 0-1.796-1.99L20 17h-8a2 2 0 0 0-1.99 1.796L10 19v9H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2v4a2 2 0 0 0 1.796 1.99L10 10h6l.204-.01A2 2 0 0 0 18 8V4zM20 19v9h-8v-9zM16 4v4h-6V4z" />
     </svg>
   )

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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const SaveIcon = ({ 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": "save",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const SaveIcon = ({ 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="M21.694 4.01a2 2 0 0 1 1.205.562l4.502 4.42A2 2 0 0 1 28 10.417V26a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h15.499zM6 26h4v-7l.01-.204A2 2 0 0 1 12 17h8l.204.01a2 2 0 0 1 1.785 1.786L22 19v7h4V10.418L21.499 6H18v2a2 2 0 0 1-1.796 1.99L16 10h-6l-.204-.01A2 2 0 0 1 8.01 8.203L8 8V6H6zm6 0h8v-7h-8zM10 8h6V6h-6z" />
     </svg>
   )

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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const ScooterIcon = ({ 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": "scooter",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const ScooterIcon = ({ 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="m19.017 5.5 4.916 8.517q.248-.017.5-.017c2.061 0 3.925.85 5.278 2.217.2.203.295.47.287.734a1 1 0 0 1-.483.906l-.81.485a4.5 4.5 0 1 1-7.593 4.158h-8.225a4.5 4.5 0 0 1-8.774 0H3a1 1 0 0 1-1-1V21c0-3.401 3.002-6 6.5-6 3.325 0 6.2 2.347 6.477 5.5h6.246l6.095-3.658A5.36 5.36 0 0 0 24.434 16c-1.06 0-2.05.308-2.89.844a1 1 0 0 1-1.074-1.688c.44-.28.912-.516 1.408-.7L17.573 7H15a1 1 0 1 1 0-2h3.727zM6.21 22.5a2.5 2.5 0 0 0 4.58 0zm16.803-.742A2.5 2.5 0 0 0 28 21.5c0-.863-.439-1.623-1.105-2.072zM8.5 17c-2.372 0-4.189 1.592-4.463 3.5h8.926c-.274-1.908-2.09-3.5-4.463-3.5m0-6c4.54 0 8.442 2.75 9.897 6.65a1 1 0 0 1-1.874.7C15.369 15.258 12.233 13 8.5 13H7a1 1 0 1 1 0-2zM4 11a1 1 0 1 1 0 2H3a1 1 0 1 1 0-2zm5-3a1 1 0 0 1 0 2H3a1 1 0 0 1 0-2zm0-3a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2z" />
     </svg>
   )

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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const SearchFilledIcon = ({ 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": "search-filled",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const SearchFilledIcon = ({ 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 6c5.523 0 10 4.477 10 10a9.96 9.96 0 0 1-2.258 6.328l5.965 5.965a1 1 0 1 1-1.414 1.414l-5.965-5.965A9.96 9.96 0 0 1 16 26c-5.523 0-10-4.477-10-10S10.477 6 16 6" />
     </svg>
   )

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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const SearchIcon = ({ 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": "search",
     fill: fill ?? "currentColor",
@@ -21,15 +21,8 @@ export const SearchIcon = ({ alt, className, fill, id, ref, ...props }: IconProp
   }
   return (
     <svg {...componentProps} ref={ref}>
-      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
-      <g clipPath="url(#a)">
-        <path d="M14 4c5.523 0 10 4.477 10 10a9.96 9.96 0 0 1-2.258 6.328l5.965 5.965a1 1 0 1 1-1.414 1.414l-5.965-5.965A9.96 9.96 0 0 1 14 24C8.477 24 4 19.523 4 14S8.477 4 14 4m0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16" />
-      </g>
-      <defs>
-        <clipPath id="a">
-          <path d="M0 0h32v32H0z" />
-        </clipPath>
-      </defs>
+      {alt ? <title id={uid + "__title"}>{alt}</title> : null}
+      <path d="M14 4c5.523 0 10 4.477 10 10a9.96 9.96 0 0 1-2.258 6.328l5.965 5.965a1 1 0 1 1-1.414 1.414l-5.965-5.965A9.96 9.96 0 0 1 14 24C8.477 24 4 19.523 4 14S8.477 4 14 4m0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16" />
     </svg>
   )
 }

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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const SendIcon = ({ 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": "send",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const SendIcon = ({ 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="M3.73 6.235c-.278-.848.592-1.618 1.4-1.241l22.655 10.57c.784.367.785 1.482.001 1.849L5.132 27.994l-.153.058c-.76.223-1.508-.503-1.249-1.298l3.246-9.943a1 1 0 0 0 .038-.476l-.038-.156zm5.172 11.253L6.4 25.15l16.405-7.662zm-.005-2h13.9L6.398 7.836z" />
     </svg>
   )

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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const SpannerIcon = ({ 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": "spanner",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const SpannerIcon = ({ 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="M13 7.5a5.5 5.5 0 0 0-6.025-5.475l2.482 2.482c.78.78.963 1.79.858 2.603a3.6 3.6 0 0 1-1.054 2.108l-.019.017-.02.02a3.6 3.6 0 0 1-2.108 1.06c-.815.106-1.825-.076-2.607-.858L2.025 6.975A5.5 5.5 0 0 0 7.5 13v2A7.5 7.5 0 0 1 .653 4.435c.26-.577 1.008-.653 1.455-.206l3.813 3.814c.47.47 1.265.347 1.77-.09l.097-.09.04-.042.036-.036c.476-.464.657-1.256.265-1.766l-.086-.098-3.814-3.813c-.447-.447-.371-1.196.206-1.455A7.5 7.5 0 0 1 14.916 8.61c-.051.34.046.689.288.931l7.624 7.624a4 4 0 0 1-5.657 5.657l-7.62-7.619a1.08 1.08 0 0 0-.93-.287A7.4 7.4 0 0 1 7.5 15v-2q.416-.001.82-.062l.167-.021a3.07 3.07 0 0 1 2.479.871l7.619 7.62a2 2 0 0 0 2.83-2.83l-7.626-7.624c-.745-.745-.985-1.755-.85-2.643A5.4 5.4 0 0 0 13 7.5" />
     </svg>
   )

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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const StarFilledIcon = ({ 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": "star-filled",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const StarFilledIcon = ({ 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="M19.183 10.63a1 1 0 0 0 .951.695h7.323c.968 0 1.371 1.238.589 1.808l-5.952 4.333a1 1 0 0 0-.364 1.113l2.202 6.881c.295.92-.756 1.681-1.538 1.115l-5.811-4.204a1 1 0 0 0-1.167-.004L9.558 26.55c-.786.561-1.832-.207-1.532-1.125l2.239-6.844a1 1 0 0 0-.361-1.119l-5.93-4.33c-.781-.57-.378-1.807.59-1.807h7.302a1 1 0 0 0 .951-.694l2.23-6.932c.298-.925 1.607-.925 1.904 0z"
         strokeWidth="2"

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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const StarIcon = ({ 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": "star",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const StarIcon = ({ 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="M14.097 3.392c.595-1.85 3.212-1.85 3.807 0l2.23 6.933h7.323c1.936 0 2.742 2.477 1.177 3.616l-5.951 4.333 2.202 6.881c.588 1.839-1.513 3.362-3.077 2.23l-5.81-4.205-5.858 4.184c-1.572 1.122-3.664-.414-3.064-2.249l2.24-6.845-5.93-4.33c-1.563-1.14-.756-3.615 1.178-3.615h7.302zm-.326 7.545a2 2 0 0 1-1.905 1.388H4.564l5.93 4.33a2 2 0 0 1 .722 2.236l-2.238 6.845 5.856-4.183a2 2 0 0 1 2.335.007l5.81 4.205-2.202-6.881a2 2 0 0 1 .729-2.227l5.951-4.332h-7.322a2 2 0 0 1-1.905-1.388l-2.229-6.931z" />
     </svg>
   )

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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const TickAltFilledIcon = ({ 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": "tick-alt-filled",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const TickAltFilledIcon = ({ 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
         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.707-17.707a1 1 0 0 0-1.414 0L14 18.586l-2.293-2.293a1 1 0 1 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l7-7a1 1 0 0 0 0-1.414"

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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const TickAltIcon = ({ 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": "tick-alt",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const TickAltIcon = ({ 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="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 8.293a1 1 0 1 1 1.414 1.414l-7 7a1 1 0 0 1-1.414 0l-3-3a1 1 0 1 1 1.414-1.414L14 18.586z" />
     </svg>
   )