npm - @coopdigital/react - Versions diffs - 0.54.0 → 0.56.0 - Mend

@coopdigital/react 0.54.0 → 0.56.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 (595) hide show

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

@@ -0,0 +1,28 @@
+import clsx from "clsx"
+import { type SVGProps } from "react"
+import { useId } from "../../hooks/useId"
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+export const LocationFilledIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
+  const componentProps = {
+    "aria-labelledby": alt ? uid + "-title" : undefined,
+    className: clsx("coop-icon", className),
+    "data-icon": "location-filled",
+    fill: fill ?? "currentColor",
+    id: uid,
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
+  return (
+    <svg {...componentProps} ref={ref}>
+      {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

@@ -13,7 +13,7 @@ export const LocationIcon = ({ alt, className, fill, id, ref, ...props }: IconPr
     "aria-labelledby": alt ? uid + "-title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "location",
-    fill: fill ?? "none",
+    fill: fill ?? "currentColor",
     id: uid,
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
@@ -22,14 +22,7 @@ export const LocationIcon = ({ alt, className, fill, id, ref, ...props }: IconPr
   return (
     <svg {...componentProps} ref={ref}>
       {alt ? <title id={uid + "-title"}>{alt}</title> : null}
-      <path
-        d="M28 6.3a8 8 0 0 0-4.92-5.1 22.68 22.68 0 0 0-14.56 0A7.39 7.39 0 0 0 3.9 6.3a17.8 17.8 0 0 0-.9 5.9c0 4.1 1.51 12.2 11.74 19.3l.41.3a1.45 1.45 0 0 0 .7.2 1.9 1.9 0 0 0 .7-.2h.1l.5-.3C27.39 24.4 29 16.3 29 12.2a21.5 21.5 0 0 0-1-5.9m-5.53-3.1a6.16 6.16 0 0 1 3.72 3.7 20 20 0 0 1 .8 5.3c0 4.6-2 9.1-5.82 13.2a31 31 0 0 1-4.72 4.1l-.1.1c-.1 0-.1.1-.2.1l-.2.2h-.1c-.1 0-.1-.1-.2-.1a.1.1 0 0 1-.1-.1 37.5 37.5 0 0 1-4.72-4.1C6.91 21.5 4.91 17 4.91 12.3a20.7 20.7 0 0 1 .8-5.3 5.72 5.72 0 0 1 3.61-3.8 21.1 21.1 0 0 1 13.15 0"
-        fill={fill ?? "currentColor"}
-      />
-      <path
-        d="M16 18.9a7.11 7.11 0 0 0 7-7 7 7 0 1 0-7 7m0-12a5 5 0 0 1 5 5 5.09 5.09 0 0 1-5 5 5 5 0 1 1 0-10"
-        fill={fill ?? "currentColor"}
-      />
+      <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 ADDED Viewed

@@ -0,0 +1,28 @@
+import clsx from "clsx"
+import { type SVGProps } from "react"
+import { useId } from "../../hooks/useId"
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+export const LogoutIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
+  const componentProps = {
+    "aria-labelledby": alt ? uid + "-title" : undefined,
+    className: clsx("coop-icon", className),
+    "data-icon": "logout",
+    fill: fill ?? "currentColor",
+    id: uid,
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
+  return (
+    <svg {...componentProps} ref={ref}>
+      {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

@@ -13,7 +13,7 @@ export const MailIcon = ({ alt, className, fill, id, ref, ...props }: IconProps)
     "aria-labelledby": alt ? uid + "-title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "mail",
-    fill: fill ?? "none",
+    fill: fill ?? "currentColor",
     id: uid,
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
@@ -22,10 +22,7 @@ export const MailIcon = ({ alt, className, fill, id, ref, ...props }: IconProps)
   return (
     <svg {...componentProps} ref={ref}>
       {alt ? <title id={uid + "-title"}>{alt}</title> : null}
-      <path
-        d="M32 25.61V6.39a1.4 1.4 0 0 0 0-.2.6.6 0 0 0-.15-.19s0-.08-.05-.11 0 0-.05 0a1 1 0 0 0-.15-.14 1 1 0 0 0-.16-.11l-.17-.05H.73l-.17.07a.5.5 0 0 0-.16.1 1 1 0 0 0-.15.14s-.08.1-.1.1l-.09.18a1.4 1.4 0 0 0 0 .2V25.6a1.4 1.4 0 0 0 0 .2c0 .07.06.12.09.18a1 1 0 0 0 .05.11 1 1 0 0 0 .24.2.5.5 0 0 0 .09.06 1 1 0 0 0 .42.1H31a1 1 0 0 0 .42-.1.5.5 0 0 0 .09-.06 1 1 0 0 0 .24-.2h.05s0-.07.05-.1a.7.7 0 0 0 .09-.19 1 1 0 0 0 .06-.19M2 8.49 12.06 16 2 23.51Zm14 8L4 7.5h24Zm-2.26.81 1.66 1.24.11.06.1.05a1.1 1.1 0 0 0 .39.09 1.1 1.1 0 0 0 .39-.09l.1-.05.11-.06 1.66-1.24L28 24.5H4Zm6.19-1.3L30 8.49v15Z"
-        fill={fill ?? "currentColor"}
-      />
+      <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

@@ -13,7 +13,7 @@ export const MenuIcon = ({ alt, className, fill, id, ref, ...props }: IconProps)
     "aria-labelledby": alt ? uid + "-title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "menu",
-    fill: fill ?? "none",
+    fill: fill ?? "currentColor",
     id: uid,
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
@@ -22,10 +22,7 @@ export const MenuIcon = ({ alt, className, fill, id, ref, ...props }: IconProps)
   return (
     <svg {...componentProps} ref={ref}>
       {alt ? <title id={uid + "-title"}>{alt}</title> : null}
-      <path
-        d="M28 5H4a1 1 0 0 1 0-2h24a1 1 0 0 1 0 2M28 17H4a1 1 0 0 1 0-2h24a1 1 0 0 1 0 2M28 29H4a1 1 0 0 1 0-2h24a1 1 0 0 1 0 2"
-        fill={fill ?? "currentColor"}
-      />
+      <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

@@ -13,7 +13,7 @@ export const MessageIcon = ({ alt, className, fill, id, ref, ...props }: IconPro
     "aria-labelledby": alt ? uid + "-title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "message",
-    fill: fill ?? "none",
+    fill: fill ?? "currentColor",
     id: uid,
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
@@ -22,10 +22,7 @@ export const MessageIcon = ({ alt, className, fill, id, ref, ...props }: IconPro
   return (
     <svg {...componentProps} ref={ref}>
       {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"
-        fill={fill ?? "currentColor"}
-      />
+      <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

@@ -13,7 +13,7 @@ export const MinusIcon = ({ alt, className, fill, id, ref, ...props }: IconProps
     "aria-labelledby": alt ? uid + "-title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "minus",
-    fill: fill ?? "none",
+    fill: fill ?? "currentColor",
     id: uid,
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
@@ -22,10 +22,7 @@ export const MinusIcon = ({ alt, className, fill, id, ref, ...props }: IconProps
   return (
     <svg {...componentProps} ref={ref}>
       {alt ? <title id={uid + "-title"}>{alt}</title> : null}
-      <path
-        d="M24.7 16.71a1 1 0 0 1-.7.29H8a1 1 0 1 1 0-2h16a1 1 0 0 1 1 1 1 1 0 0 1-.3.71"
-        fill={fill ?? "currentColor"}
-      />
+      <path d="M27 15a1 1 0 1 1 0 2H5a1 1 0 1 1 0-2z" />
     </svg>
   )
 }

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

@@ -0,0 +1,28 @@
+import clsx from "clsx"
+import { type SVGProps } from "react"
+import { useId } from "../../hooks/useId"
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+export const NotesFilledIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
+  const componentProps = {
+    "aria-labelledby": alt ? uid + "-title" : undefined,
+    className: clsx("coop-icon", className),
+    "data-icon": "notes-filled",
+    fill: fill ?? "currentColor",
+    id: uid,
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
+  return (
+    <svg {...componentProps} ref={ref}>
+      {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 ADDED Viewed

@@ -0,0 +1,28 @@
+import clsx from "clsx"
+import { type SVGProps } from "react"
+import { useId } from "../../hooks/useId"
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+export const NotesIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
+  const componentProps = {
+    "aria-labelledby": alt ? uid + "-title" : undefined,
+    className: clsx("coop-icon", className),
+    "data-icon": "notes",
+    fill: fill ?? "currentColor",
+    id: uid,
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
+  return (
+    <svg {...componentProps} ref={ref}>
+      {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

@@ -13,7 +13,7 @@ export const OpenNewIcon = ({ alt, className, fill, id, ref, ...props }: IconPro
     "aria-labelledby": alt ? uid + "-title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "open-new",
-    fill: fill ?? "none",
+    fill: fill ?? "currentColor",
     id: uid,
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
@@ -22,14 +22,8 @@ export const OpenNewIcon = ({ alt, className, fill, id, ref, ...props }: IconPro
   return (
     <svg {...componentProps} ref={ref}>
       {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"
-        fill={fill ?? "currentColor"}
-      />
-      <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"
-        fill={fill ?? "currentColor"}
-      />
+      <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 ADDED Viewed

@@ -0,0 +1,28 @@
+import clsx from "clsx"
+import { type SVGProps } from "react"
+import { useId } from "../../hooks/useId"
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+export const OwnBagIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
+  const componentProps = {
+    "aria-labelledby": alt ? uid + "-title" : undefined,
+    className: clsx("coop-icon", className),
+    "data-icon": "own-bag",
+    fill: fill ?? "currentColor",
+    id: uid,
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
+  return (
+    <svg {...componentProps} ref={ref}>
+      {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 ADDED Viewed

@@ -0,0 +1,28 @@
+import clsx from "clsx"
+import { type SVGProps } from "react"
+import { useId } from "../../hooks/useId"
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+export const PadlockIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
+  const componentProps = {
+    "aria-labelledby": alt ? uid + "-title" : undefined,
+    className: clsx("coop-icon", className),
+    "data-icon": "padlock",
+    fill: fill ?? "currentColor",
+    id: uid,
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
+  return (
+    <svg {...componentProps} ref={ref}>
+      {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

@@ -13,7 +13,7 @@ export const PencilIcon = ({ alt, className, fill, id, ref, ...props }: IconProp
     "aria-labelledby": alt ? uid + "-title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "pencil",
-    fill: fill ?? "none",
+    fill: fill ?? "currentColor",
     id: uid,
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
@@ -22,10 +22,7 @@ export const PencilIcon = ({ alt, className, fill, id, ref, ...props }: IconProp
   return (
     <svg {...componentProps} ref={ref}>
       {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"
-        fill={fill ?? "currentColor"}
-      />
+      <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

@@ -13,7 +13,7 @@ export const PhoneIcon = ({ alt, className, fill, id, ref, ...props }: IconProps
     "aria-labelledby": alt ? uid + "-title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "phone",
-    fill: fill ?? "none",
+    fill: fill ?? "currentColor",
     id: uid,
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
@@ -22,10 +22,7 @@ export const PhoneIcon = ({ alt, className, fill, id, ref, ...props }: IconProps
   return (
     <svg {...componentProps} ref={ref}>
       {alt ? <title id={uid + "-title"}>{alt}</title> : null}
-      <path
-        d="M28.88 21.26c-2.26-1.72-5.46-2.84-7-1.42-.51.51-1.65 1.52-5.15-1.42-5.73-5.37-5.47-7.29-4.44-8.42 1.44-1.52.41-4.66-1.34-6.89C8.78.38 6.21-.63 4.14.38a6.53 6.53 0 0 0-4 4.67c-.94 4.66 3.49 10.64 7.3 14.89.72.81 1.45 1.52 2.17 2.33l.41.41C14.45 27 20.53 32 25.58 32a4.4 4.4 0 0 0 1.14-.1 6.64 6.64 0 0 0 5-3.95c.87-2.03-.16-4.56-2.84-6.69m-13.6-1.32c2.06 1.72 5.25 3.75 7.93 1.42.42-.3 2.37 0 4.44 1.52 1.44 1.12 2.78 2.84 2.06 4.12a4.45 4.45 0 0 1-3.4 2.84c-3.3.51-8.77-2.63-14.85-8.71l-.31-.31c-.72-.71-1.44-1.41-2.16-2.23H9C4 13.15 1.57 8.49 2.19 5.45a4.69 4.69 0 0 1 2.88-3.24c1.34-.71 3.09.71 4.13 2.13 1.54 2 1.85 3.95 1.44 4.35-2.89 3 .1 6.89 3.92 10.64"
-        fill={fill ?? "currentColor"}
-      />
+      <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 ADDED Viewed

@@ -0,0 +1,28 @@
+import clsx from "clsx"
+import { type SVGProps } from "react"
+import { useId } from "../../hooks/useId"
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+export const PowerIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
+  const componentProps = {
+    "aria-labelledby": alt ? uid + "-title" : undefined,
+    className: clsx("coop-icon", className),
+    "data-icon": "power",
+    fill: fill ?? "currentColor",
+    id: uid,
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
+  return (
+    <svg {...componentProps} ref={ref}>
+      {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 ADDED Viewed

@@ -0,0 +1,28 @@
+import clsx from "clsx"
+import { type SVGProps } from "react"
+import { useId } from "../../hooks/useId"
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+export const SaveFilledIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
+  const componentProps = {
+    "aria-labelledby": alt ? uid + "-title" : undefined,
+    className: clsx("coop-icon", className),
+    "data-icon": "save-filled",
+    fill: fill ?? "currentColor",
+    id: uid,
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
+  return (
+    <svg {...componentProps} ref={ref}>
+      {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 ADDED Viewed

@@ -0,0 +1,28 @@
+import clsx from "clsx"
+import { type SVGProps } from "react"
+import { useId } from "../../hooks/useId"
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+export const SaveIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
+  const componentProps = {
+    "aria-labelledby": alt ? uid + "-title" : undefined,
+    className: clsx("coop-icon", className),
+    "data-icon": "save",
+    fill: fill ?? "currentColor",
+    id: uid,
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
+  return (
+    <svg {...componentProps} ref={ref}>
+      {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

@@ -13,35 +13,16 @@ export const ScooterIcon = ({ alt, className, fill, id, ref, ...props }: IconPro
     "aria-labelledby": alt ? uid + "-title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "scooter",
-    fill: fill ?? "none",
+    fill: fill ?? "currentColor",
     id: uid,
     role: alt ? "img" : undefined,
-    viewBox: "0 0 46 30",
+    viewBox: "0 0 32 32",
     ...props,
   }
   return (
     <svg {...componentProps} ref={ref}>
       {alt ? <title id={uid + "-title"}>{alt}</title> : null}
-      <g clipPath="url(#a)" clipRule="evenodd" fill="currentColor" fillRule="evenodd">
-        <path d="M41.292 18.293a1 1 0 0 1 1.414 0C43.88 19.465 44.6 21.014 44.6 22.8c0 3.452-2.747 6.2-6.2 6.2-3.333 0-6.08-2.622-6.2-5.964a1 1 0 1 1 2-.072 4.19 4.19 0 0 0 4.2 4.036c2.348 0 4.2-1.852 4.2-4.2 0-1.214-.48-2.265-1.307-3.093a1 1 0 0 1 0-1.414M1.1 23a9.28 9.28 0 0 1 9.3-9.3 9.28 9.28 0 0 1 9.3 9.3 1 1 0 0 1-1 1H2.1a1 1 0 0 1-1-1m2.067-1h14.466a7.28 7.28 0 0 0-7.233-6.3A7.28 7.28 0 0 0 3.167 22" />
-        <path
-          d="M34.754 13.161c3.98-1.476 8.72.438 10.545 4.203a1 1 0 1 1-1.8.872c-1.374-2.834-5.032-4.32-8.052-3.199l-.006.003c-.933.339-1.796.939-2.494 1.724a1 1 0 0 1-1.495-1.328c.9-1.014 2.036-1.813 3.302-2.275M10.4 29.3a6.164 6.164 0 0 1-6.2-6.2h2c0 2.348 1.852 4.2 4.2 4.2s4.2-1.852 4.2-4.2h2c0 3.452-2.749 6.2-6.2 6.2"
-          fill={fill ?? "currentColor"}
-        />
-        <path
-          d="M21.3 1a1 1 0 0 1 1-1h5.1a1 1 0 0 1 .869.503l7.1 12.4a1 1 0 1 1-1.736.994L26.821 2h-4.52a1 1 0 0 1-1-1M8.585 9.2c3.42-.1 6.556-.012 9.806 1.829 2.713 1.52 4.878 4.116 5.858 7.055a1 1 0 0 1-1.898.632c-.82-2.46-2.654-4.663-4.94-5.943l-.004-.003c-2.745-1.555-5.404-1.67-8.778-1.57H8a1 1 0 1 1 0-2z"
-          fill={fill ?? "currentColor"}
-        />
-        <path
-          d="M45.33 17.434a1 1 0 0 1-.564 1.297l-12.2 4.8-.05.018c-.966.322-1.976.551-3.116.551H2.1a1 1 0 1 1 0-2h27.3c.851 0 1.634-.167 2.459-.44l12.174-4.79a1 1 0 0 1 1.297.564M0 5.7a1 1 0 0 1 1-1h9.9a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1M1.8 10.2a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1M3.2 1a1 1 0 0 1 1-1h7.1a1 1 0 1 1 0 2H4.2a1 1 0 0 1-1-1"
-          fill={fill ?? "currentColor"}
-        />
-      </g>
-      <defs>
-        <clipPath id="a">
-          <path d="M0 0h45.4v29.3H0z" fill="currentColor" />
-        </clipPath>
-      </defs>
+      <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 ADDED Viewed

@@ -0,0 +1,28 @@
+import clsx from "clsx"
+import { type SVGProps } from "react"
+import { useId } from "../../hooks/useId"
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+export const SearchFilledIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
+  const componentProps = {
+    "aria-labelledby": alt ? uid + "-title" : undefined,
+    className: clsx("coop-icon", className),
+    "data-icon": "search-filled",
+    fill: fill ?? "currentColor",
+    id: uid,
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
+  return (
+    <svg {...componentProps} ref={ref}>
+      {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

@@ -13,7 +13,7 @@ export const SearchIcon = ({ alt, className, fill, id, ref, ...props }: IconProp
     "aria-labelledby": alt ? uid + "-title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "search",
-    fill: fill ?? "none",
+    fill: fill ?? "currentColor",
     id: uid,
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
@@ -22,14 +22,14 @@ export const SearchIcon = ({ alt, className, fill, id, ref, ...props }: IconProp
   return (
     <svg {...componentProps} ref={ref}>
       {alt ? <title id={uid + "-title"}>{alt}</title> : null}
-      <path
-        d="M13.25 25.49a12.25 12.25 0 1 1 12.24-12.24 12.25 12.25 0 0 1-12.24 12.24m0-22.61a10.37 10.37 0 1 0 10.36 10.37A10.38 10.38 0 0 0 13.25 2.88"
-        fill={fill ?? "currentColor"}
-      />
-      <path
-        d="M30.06 31a.94.94 0 0 1-.67-.28l-8.81-8.81a.94.94 0 1 1 1.33-1.33l8.81 8.81a.94.94 0 0 1 0 1.33.9.9 0 0 1-.66.28"
-        fill={fill ?? "currentColor"}
-      />
+      <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>
     </svg>
   )
 }

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

@@ -0,0 +1,28 @@
+import clsx from "clsx"
+import { type SVGProps } from "react"
+import { useId } from "../../hooks/useId"
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+export const SendIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
+  const componentProps = {
+    "aria-labelledby": alt ? uid + "-title" : undefined,
+    className: clsx("coop-icon", className),
+    "data-icon": "send",
+    fill: fill ?? "currentColor",
+    id: uid,
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
+  return (
+    <svg {...componentProps} ref={ref}>
+      {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 ADDED Viewed

@@ -0,0 +1,28 @@
+import clsx from "clsx"
+import { type SVGProps } from "react"
+import { useId } from "../../hooks/useId"
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+export const SpannerIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
+  const componentProps = {
+    "aria-labelledby": alt ? uid + "-title" : undefined,
+    className: clsx("coop-icon", className),
+    "data-icon": "spanner",
+    fill: fill ?? "currentColor",
+    id: uid,
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 24 24",
+    ...props,
+  }
+  return (
+    <svg {...componentProps} ref={ref}>
+      {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 ADDED Viewed

@@ -0,0 +1,31 @@
+import clsx from "clsx"
+import { type SVGProps } from "react"
+import { useId } from "../../hooks/useId"
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+export const StarFilledIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
+  const componentProps = {
+    "aria-labelledby": alt ? uid + "-title" : undefined,
+    className: clsx("coop-icon", className),
+    "data-icon": "star-filled",
+    fill: fill ?? "currentColor",
+    id: uid,
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
+  return (
+    <svg {...componentProps} ref={ref}>
+      {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"
+      />
+    </svg>
+  )
+}