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

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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const TickIcon = ({ 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",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const TickIcon = ({ 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.293 6.293a1 1 0 0 1 1.414 1.414l-18 18a1 1 0 0 1-1.414 0l-8-8a1 1 0 1 1 1.414-1.414L11 23.586z" />
     </svg>
   )

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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const TruckIcon = ({ 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": "truck",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const TruckIcon = ({ 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="M20 6a2 2 0 0 1 2 2h4.29l.19.009a2 2 0 0 1 1.8 1.792l.5 5q.017.181.002.358A2 2 0 0 1 30 17v7a2 2 0 0 1-2 2h-1.258a4.5 4.5 0 0 1-8.484 0h-4.516a4.5 4.5 0 0 1-8.484 0H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2zM9.5 22a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5m13 0a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5m-4.483 2.89q0 .022.003.043a5 5 0 0 1-.014-.202zM4 24h1.028a4.5 4.5 0 0 1 8.944 0h4.056a4.5 4.5 0 0 1 8.944 0H28v-7h-6a2 2 0 0 1-.39-.04q-.038-.008-.077-.018-.05-.011-.1-.025-.042-.013-.083-.027a2 2 0 0 1-.266-.114l-.066-.035-.094-.057-.063-.04q-.038-.028-.075-.057a2 2 0 0 1-.374-.374q-.022-.028-.043-.056l-.027-.039q-.014-.022-.027-.043-.03-.045-.057-.094l-.035-.066a2 2 0 0 1-.114-.266q-.015-.04-.027-.083-.015-.054-.027-.109l-.017-.067a2 2 0 0 1-.027-.186L20 15V8H4zm18-9h4.79l-.5-5H22zm-8.021 9.933" />
     </svg>
   )

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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const UserWipeIcon = ({ 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": "user-wipe",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const UserWipeIcon = ({ 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="M3.707 5.093a1 1 0 0 1 1.26-.126l22.2 22.2a1 1 0 0 1-1.54 1.26L24.398 27.2a14 14 0 0 1-4.497 2.248l-.03.01q-.447.127-.904.227l-.038.007q-.126.027-.251.051l-.099.02a14 14 0 0 1-.558.091l-.09.013a13 13 0 0 1-.559.067l-.203.017-.115.01q-.153.011-.306.02l-.033.001a14 14 0 0 1-1.43 0q-.018 0-.034-.002l-.306-.019-.115-.01q-.102-.007-.203-.017l-.225-.025-.087-.01-.245-.03-.093-.014-.236-.037-.1-.016a15 15 0 0 1-.57-.109l-.039-.008a14 14 0 0 1-.903-.227l-.032-.01C6.264 27.757 2 22.377 2 16c0-3.152 1.042-6.06 2.8-8.4L3.707 6.507a1 1 0 0 1 0-1.414M16.001 20a9.99 9.99 0 0 0-8.397 4.57A11.95 11.95 0 0 0 16 28c2.599 0 5-.83 6.964-2.235L17.28 20.08a10 10 0 0 0-1.28-.081M16 2c7.732 0 14 6.268 14 14 0 3.145-1.04 6.045-2.791 8.38l-1.434-1.433c.435-.61.817-1.26 1.132-1.947A11.95 11.95 0 0 0 28 16c0-6.627-5.373-12-12-12-2.592 0-4.99.823-6.952 2.22L7.615 4.787A13.94 13.94 0 0 1 16 2M6.232 9.032A11.94 11.94 0 0 0 4 16a11.95 11.95 0 0 0 2.256 6.997 12.03 12.03 0 0 1 5.92-4.374 5.99 5.99 0 0 1-2.074-5.72zm5.872 5.871a4 4 0 0 0 2.99 2.992zM16 8a6 6 0 0 1 4.636 9.808l-1.424-1.424a4 4 0 0 0-5.597-5.597l-1.424-1.424A5.98 5.98 0 0 1 16 8" />
     </svg>
   )

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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const VoucherFilledIcon = ({ 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": "voucher-filled",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const VoucherFilledIcon = ({ 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 6a2 2 0 0 1 2 2v3.05c0 .88-.62 1.619-1.291 2.188A3.61 3.61 0 0 0 27.429 16c0 1.106.497 2.096 1.28 2.76.67.57 1.291 1.308 1.291 2.188V24a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2zM7 17a1 1 0 1 0 0 2h10a1 1 0 1 0 0-2zm0-4a1 1 0 1 0 0 2h6a1 1 0 1 0 0-2z" />
     </svg>
   )

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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const VoucherIcon = ({ 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": "voucher",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const VoucherIcon = ({ 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.204 6.01A2 2 0 0 1 30 8v3.05c0 .88-.62 1.619-1.291 2.188l-.144.128A3.61 3.61 0 0 0 27.43 16c0 1.106.496 2.096 1.279 2.76.67.57 1.291 1.308 1.291 2.188V24l-.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 24h24v-3.038a.6.6 0 0 0-.068-.13 2.8 2.8 0 0 0-.517-.546A5.61 5.61 0 0 1 25.43 16c0-1.719.774-3.258 1.984-4.286.255-.217.423-.402.518-.547.088-.135.068-.165.068-.116V8H4zm13-7a1 1 0 1 1 0 2H7a1 1 0 1 1 0-2zm-4-4a1 1 0 1 1 0 2H7a1 1 0 1 1 0-2z" />
     </svg>
   )

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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const WarningFilledIcon = ({ 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": "warning-filled",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const WarningFilledIcon = ({ 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="M14.239 5.27c.755-1.402 2.767-1.402 3.522 0l10.652 19.782C29.13 26.384 28.165 28 26.652 28H5.348c-1.513 0-2.478-1.616-1.76-2.948zM16 21a1 1 0 1 0 0 2 1 1 0 0 0 0-2M16 13a1 1 0 0 0-1 1v5a1 1 0 0 0 2 0v-5c0-.552-.448-1-1-1" />
     </svg>
   )

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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const WarningIcon = ({ 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": "warning",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const WarningIcon = ({ 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.239 5.27c.755-1.402 2.766-1.402 3.521 0l10.652 19.782c.717 1.332-.248 2.948-1.76 2.948H5.347l-.14-.005a2 2 0 0 1-1.683-2.817l.063-.126zM5.349 26H26.65L16 6.219zm10.65-5a1 1 0 1 1 0 2 1 1 0 0 1 0-2m0-8a1 1 0 0 1 1 1v5a1 1 0 0 1-2 0v-5a1 1 0 0 1 1-1" />
     </svg>
   )

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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const WifiIcon = ({ 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": "wifi",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const WifiIcon = ({ 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-4m-7.987-4.836c4.419-4.418 11.583-4.418 16.001 0a1.5 1.5 0 0 1-2.12 2.121 8.316 8.316 0 0 0-11.76 0 1.5 1.5 0 1 1-2.12-2.12m-5.552-5.55c7.485-7.485 19.621-7.485 27.106 0a1.5 1.5 0 0 1-2.122 2.12c-6.314-6.313-16.55-6.313-22.863 0a1.5 1.5 0 0 1-2.121-2.12" />
     </svg>
   )

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

@@ -10,7 +10,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 export const WriteIcon = ({ 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": "write",
     fill: fill ?? "currentColor",
@@ -21,7 +21,7 @@ export const WriteIcon = ({ alt, className, fill, id, ref, ...props }: IconProps
   }
   return (
     <svg {...componentProps} ref={ref}>
-      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
+      {alt ? <title id={uid + "__title"}>{alt}</title> : null}
       <path d="M19.67 10.13 17.9 11.9H7a1 1 0 0 1 0-2h12a1 1 0 0 1 .67.23M14.9 14.9l-2 2H7a1 1 0 0 1 0-2ZM20 15.9a1 1 0 0 1-1 1h-1.87l2-2a1 1 0 0 1 .82.59.85.85 0 0 1 .05.41M19 21.9H7a1 1 0 0 1 0-2h12a1 1 0 1 1 0 2" />
       <path d="M24.08 10v20h-22V6h21.73l1.54-1.54a1.9 1.9 0 0 0-1-.44H2.07a2 2 0 0 0-2 2V30a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2V8Z" />
       <path d="M30.62 3.41 28.5 1.29a1 1 0 0 0-1.42 0L22.38 6l-3.9 3.9-5 5-1.33 1.33a1 1 0 0 0-.27.48v.19l-.6 2.57a.8.8 0 0 0 0 .43 1 1 0 0 0 1.19.77l2.74-.67a.64.64 0 0 0 .29-.13.6.6 0 0 0 .19-.14l2.85-2.86 1.4-1.39L30.62 4.82a1 1 0 0 0 0-1.41M15 19.06l-2.75.63.62-2.75 6.82-6.81L23.81 6l1.54-1.54L27.79 2l2.13 2.12Z" />