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/CreditCardIcon.tsx CHANGED Viewed

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const CreditCardIcon = ({ 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",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const CreditCardIcon = ({ 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.204 6.01A2 2 0 0 1 30 8v16l-.01.204a2 2 0 0 1-1.786 1.785L28 26H4a2 2 0 0 1-1.99-1.796L2 24V8a2 2 0 0 1 2-2h24zM4 14v10h24V14zm7.979 8H6v-4h5.979zM4 10h24V8H4z" />
     </svg>
   )

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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const CrossIcon = ({ 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": "cross",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const CrossIcon = ({ 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="M26.293 4.293a1 1 0 1 1 1.414 1.414L17.414 16l10.293 10.293a1 1 0 1 1-1.414 1.414L16 17.414 5.707 27.707a1 1 0 1 1-1.414-1.414L14.586 16 4.293 5.707a1 1 0 1 1 1.414-1.414L16 14.586z" />
     </svg>
   )

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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const DocumentIcon = ({ 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": "document",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const DocumentIcon = ({ 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="M24.204 4.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-2h16zM8 26h16V6H8zm8-10a1 1 0 1 1 0 2h-5a1 1 0 1 1 0-2zm5-4a1 1 0 1 1 0 2H11a1 1 0 1 1 0-2zm0-4a1 1 0 1 1 0 2H11a1 1 0 1 1 0-2z" />
     </svg>
   )

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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const DownloadIcon = ({ 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": "download",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const DownloadIcon = ({ 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="M27 20a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-6a1 1 0 1 1 2 0v5h20v-5a1 1 0 0 1 1-1M16 4a1 1 0 0 1 1 1v13.586l5.293-5.293a1 1 0 1 1 1.414 1.414l-7 7a1 1 0 0 1-.415.25l-.062.015-.034.008-.031.004A1 1 0 0 1 16 22q-.085-.001-.166-.016-.015-.001-.031-.005l-.034-.007-.062-.016a1 1 0 0 1-.414-.249l-7-7a1 1 0 1 1 1.414-1.414L15 18.586V5a1 1 0 0 1 1-1" />
     </svg>
   )

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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const EnterStoreIcon = ({ 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": "enter-store",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const EnterStoreIcon = ({ 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="M24 2a2 2 0 0 1 2 2v24a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2v-1.987a1 1 0 0 1 2 0V28h16V4H8v2.004a1 1 0 0 1-2 0V4a2 2 0 0 1 2-2zM9.293 9.293a1 1 0 0 1 1.414 0l5.47 5.47a1.75 1.75 0 0 1 0 2.474l-5.47 5.47a1 1 0 1 1-1.414-1.414L13.586 17H4.989a1 1 0 0 1 0-2h8.597l-4.293-4.293a1 1 0 0 1 0-1.414" />
     </svg>
   )

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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const ExitStoreIcon = ({ 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": "exit-store",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const ExitStoreIcon = ({ 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 2a2 2 0 0 1 2 2v24a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2v-1.987a1 1 0 0 1 2 0V28h16V4H8v2.004a1 1 0 0 1-2 0V4a2 2 0 0 1 2-2zM9.975 9.293a1 1 0 1 1 1.414 1.414L7.096 15h8.902a1 1 0 1 1 0 2H7.096l4.293 4.293a1 1 0 1 1-1.414 1.414l-5.47-5.47a1.75 1.75 0 0 1 0-2.474z" />
     </svg>
   )

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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const EyeFilledIcon = ({ 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": "eye-filled",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const EyeFilledIcon = ({ 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.001 6C23.126 6 29.019 10.346 30 16c-.98 5.654-6.874 10-13.999 10S2.981 21.654 2 16c.98-5.654 6.875-10 14.001-10M16 10a6 6 0 1 0 0 12 6 6 0 0 0 0-12m0 2a4 4 0 1 1 0 8 4 4 0 0 1 0-8" />
     </svg>
   )

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

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

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

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

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

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

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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const FeedbackFilledIcon = ({ 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": "feedback-filled",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const FeedbackFilledIcon = ({ 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}
       <mask id="a">
         <path d="M28 6a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H6l-4 4V8a2 2 0 0 1 2-2zm-17 9a1 1 0 1 0 0 2 1 1 0 0 0 0-2m5 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2m5 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2" />
       </mask>

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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const FeedbackIcon = ({ 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": "feedback",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const FeedbackIcon = ({ 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="M28 6a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H6l-4 4V8a2 2 0 0 1 2-2zM4 25.172 5.172 24H28V8H4zM11 15a1 1 0 1 1 0 2 1 1 0 0 1 0-2m5 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2m5 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2" />
     </svg>
   )

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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const FilterIcon = ({ 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": "filter",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const FilterIcon = ({ 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="M12 17a4 4 0 0 1 3.874 3H27a1 1 0 1 1 0 2H15.874a4.002 4.002 0 0 1-7.748 0H5a1 1 0 1 1 0-2h3.126c.444-1.725 2.01-3 3.874-3m0 2a1.998 1.998 0 0 0-1.73 3 1.998 1.998 0 1 0 3.46-2c-.346-.597-.99-1-1.73-1m8-12a4 4 0 0 1 3.874 3H27a1 1 0 1 1 0 2h-3.126a4.002 4.002 0 0 1-7.748 0H5a1 1 0 1 1 0-2h11.126c.444-1.725 2.01-3 3.874-3m0 2a2 2 0 0 0-1.986 1.771A1.98 1.98 0 0 0 18.27 12a1.998 1.998 0 1 0 3.46-2c-.346-.597-.99-1-1.73-1" />
     </svg>
   )

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

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

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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const GiftCardIcon = ({ 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": "gift-card",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const GiftCardIcon = ({ 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="M28.204 6.01A2 2 0 0 1 30 8v16l-.01.204a2 2 0 0 1-1.786 1.785L28 26H4a2 2 0 0 1-1.99-1.796L2 24V8a2 2 0 0 1 2-2h24zM4 24h24V8H4zm13.25-13.999a1.75 1.75 0 0 1 1.58 2.5H20l.204.01A2 2 0 0 1 22 14.502v.5c0 .74-.403 1.383-1 1.729v3.749l-.008.155a1.524 1.524 0 0 1-1.36 1.36l-.155.007h-6.954c-.789 0-1.437-.6-1.515-1.367L11 20.479V16.73a2 2 0 0 1-.99-1.526l-.01-.204v-.5a2 2 0 0 1 2-2h1.15a1.8 1.8 0 0 1-.141-.535L13 11.784c0-.984.784-1.783 1.75-1.783.487 0 .928.203 1.245.53.318-.327.763-.53 1.255-.53m-4.981 10.478c0 .14.114.253.254.253H15.4v-3.731H12.27zm4.332.253h2.877c.14 0 .253-.114.253-.253V17h-3.13zM12 13.702a.8.8 0 0 0-.8.799v.5a.8.8 0 0 0 .8.8h3.4v-2.1zm4.6 2.099H20a.8.8 0 0 0 .8-.8v-.5a.8.8 0 0 0-.8-.8h-3.4zm-1.85-4.6c-.283 0-.55.24-.55.583.001.342.268.582.55.582s.549-.24.55-.582a.567.567 0 0 0-.55-.583m2.5 0a.55.55 0 1 0 0 1.1.55.55 0 0 0 0-1.1" />
     </svg>
   )

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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const GiftFilledIcon = ({ 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": "gift-filled",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const GiftFilledIcon = ({ 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="M15 28H8a2 2 0 0 1-2-2V15h9zm11-2a2 2 0 0 1-2 2h-7V15h9zM18 2a3 3 0 0 1 2.826 4H26a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2h-9V8h-2v5H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5.174A2.993 2.993 0 0 1 14 2c.77 0 1.469.292 2 .768A3 3 0 0 1 18 2m-4 2a1 1 0 1 0 0 2c.423 0 .743-.002.992-.008.006-.25.008-.569.008-.992a1 1 0 0 0-1-1m4 0a1 1 0 0 0-1 1c0 .423.001.743.007.992.25.006.57.008.993.008a1 1 0 1 0 0-2" />
     </svg>
   )

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

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

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

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

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

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

package/src/components/icons/HomeFilledIcon.tsx 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>
   )