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

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>
   )