@coopdigital/react 0.45.0 → 0.47.0

package/dist/components/Icon/CoopIcon.js

@@ -1,19 +1,20 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { useId } from 'react';
+import { useId } from '../../hooks/useId.js';
 
-const CoopIcon = ({ alt, className, fill, ...props }) => {
-    const id = useId();
+const CoopIcon = ({ alt, className, fill, id, ref, ...props }) => {
+    const uid = useId(id);
     const componentProps = {
-        "aria-labelledby": alt ? id : undefined,
+        "aria-labelledby": alt ? uid + "-title" : undefined,
         className: clsx("coop-icon", className),
         "data-icon": "coop",
         fill: fill !== null && fill !== void 0 ? fill : "none",
+        id: uid,
         role: alt ? "img" : undefined,
         viewBox: "0 0 32 32",
         ...props,
     };
-    return (jsxs("svg", { ...componentProps, children: [alt ? jsx("title", { id: id, children: alt }) : null, jsx("path", { d: "M28.77 5.17a11.33 11.33 0 0 1 0 5.93 4 4 0 0 1-.88 1.57 4.1 4.1 0 0 1-1.5 1 12 12 0 0 1-3.56.58 9.8 9.8 0 0 1-3.56-.58 4.2 4.2 0 0 1-1.47-1 4.1 4.1 0 0 1-.9-1.55 10.9 10.9 0 0 1 0-5.94 3.8 3.8 0 0 1 .89-1.56 3.8 3.8 0 0 1 1.49-1 10.73 10.73 0 0 1 7.12 0 3.9 3.9 0 0 1 1.48 1 3.9 3.9 0 0 1 .89 1.55m-3.67 4.4a4.9 4.9 0 0 0 .21-1.43 4.9 4.9 0 0 0-.23-1.47 1.8 1.8 0 0 0-.53-.82 1.77 1.77 0 0 0-.87-.42 5.1 5.1 0 0 0-1.83 0 2 2 0 0 0-.87.43 1.9 1.9 0 0 0-.53.81 4.94 4.94 0 0 0 0 2.9 1.86 1.86 0 0 0 .52.82 1.8 1.8 0 0 0 .88.43 5.1 5.1 0 0 0 1.83 0 1.88 1.88 0 0 0 1.4-1.25Zm-10 8.73a10.9 10.9 0 0 1 0 5.94 3.75 3.75 0 0 1-.88 1.58 3.8 3.8 0 0 1-1.5 1 10.7 10.7 0 0 1-7.11 0 4 4 0 0 1-1.49-1 4.1 4.1 0 0 1-.9-1.56 10.9 10.9 0 0 1 0-5.94 3.9 3.9 0 0 1 .89-1.57 3.8 3.8 0 0 1 1.5-1 10.7 10.7 0 0 1 7.11 0 4 4 0 0 1 1.48 1 3.9 3.9 0 0 1 .88 1.55Zm-3.66 4.44a5 5 0 0 0 .22-1.43 5.2 5.2 0 0 0-.22-1.47 1.9 1.9 0 0 0-.54-.84 1.8 1.8 0 0 0-.88-.43 5.6 5.6 0 0 0-1.83 0 2 2 0 0 0-.87.44 1.9 1.9 0 0 0-.52.81 4.8 4.8 0 0 0 0 2.9 1.7 1.7 0 0 0 .52.82 1.65 1.65 0 0 0 .87.42A4.7 4.7 0 0 0 10 24a1.83 1.83 0 0 0 .87-.43 2 2 0 0 0 .55-.83Zm4.05-14.63h-3.85a6.3 6.3 0 0 0-.19-1.43 1.8 1.8 0 0 0-.52-.82 1.8 1.8 0 0 0-.88-.42 5.1 5.1 0 0 0-1.83 0 1.93 1.93 0 0 0-.87.43 1.9 1.9 0 0 0-.53.81 4.94 4.94 0 0 0 0 2.9 1.86 1.86 0 0 0 .52.82 1.8 1.8 0 0 0 .88.43 5.1 5.1 0 0 0 1.83 0 2 2 0 0 0 .87-.44 2 2 0 0 0 .53-.81 4.5 4.5 0 0 0 .14-.66l3.63 1.69c-.05.16-.1.33-.14.5a4 4 0 0 1-.88 1.57 4.1 4.1 0 0 1-1.5 1 12 12 0 0 1-3.56.58 10.7 10.7 0 0 1-3.55-.58 4.2 4.2 0 0 1-1.48-1 4 4 0 0 1-.89-1.55 10.9 10.9 0 0 1 0-5.94A3.9 3.9 0 0 1 4.1 3.6a4 4 0 0 1 1.5-1 10.7 10.7 0 0 1 7.11 0 3.9 3.9 0 0 1 1.49 1 4 4 0 0 1 .9 1.55 11.3 11.3 0 0 1 .39 2.96m.93 13.19a11 11 0 0 1 .39-3 3.6 3.6 0 0 1 .93-1.55 3.7 3.7 0 0 1 1.56-.92 10.7 10.7 0 0 1 7.11 0 3.9 3.9 0 0 1 1.49 1 4 4 0 0 1 .9 1.55 10.93 10.93 0 0 1 0 5.95 3.8 3.8 0 0 1-.89 1.56 3.74 3.74 0 0 1-1.5 1 11.5 11.5 0 0 1-3.55.59l-1.32-3.59h.15l.21.06a5.2 5.2 0 0 0 1.84 0 1.84 1.84 0 0 0 .84-.44 1.9 1.9 0 0 0 .52-.8 4.94 4.94 0 0 0 0-2.9 1.83 1.83 0 0 0-1.4-1.25 5.1 5.1 0 0 0-1.83 0A2 2 0 0 0 21 19a1.9 1.9 0 0 0-.53.81 4.6 4.6 0 0 0-.2 1.42V30h-3.85Z", fill: fill !== null && fill !== void 0 ? fill : "currentColor", fillRule: "evenodd" })] }));
+    return (jsxs("svg", { ...componentProps, ref: ref, children: [alt ? jsx("title", { id: uid + "-title", children: alt }) : null, jsx("path", { d: "M28.77 5.17a11.33 11.33 0 0 1 0 5.93 4 4 0 0 1-.88 1.57 4.1 4.1 0 0 1-1.5 1 12 12 0 0 1-3.56.58 9.8 9.8 0 0 1-3.56-.58 4.2 4.2 0 0 1-1.47-1 4.1 4.1 0 0 1-.9-1.55 10.9 10.9 0 0 1 0-5.94 3.8 3.8 0 0 1 .89-1.56 3.8 3.8 0 0 1 1.49-1 10.73 10.73 0 0 1 7.12 0 3.9 3.9 0 0 1 1.48 1 3.9 3.9 0 0 1 .89 1.55m-3.67 4.4a4.9 4.9 0 0 0 .21-1.43 4.9 4.9 0 0 0-.23-1.47 1.8 1.8 0 0 0-.53-.82 1.77 1.77 0 0 0-.87-.42 5.1 5.1 0 0 0-1.83 0 2 2 0 0 0-.87.43 1.9 1.9 0 0 0-.53.81 4.94 4.94 0 0 0 0 2.9 1.86 1.86 0 0 0 .52.82 1.8 1.8 0 0 0 .88.43 5.1 5.1 0 0 0 1.83 0 1.88 1.88 0 0 0 1.4-1.25Zm-10 8.73a10.9 10.9 0 0 1 0 5.94 3.75 3.75 0 0 1-.88 1.58 3.8 3.8 0 0 1-1.5 1 10.7 10.7 0 0 1-7.11 0 4 4 0 0 1-1.49-1 4.1 4.1 0 0 1-.9-1.56 10.9 10.9 0 0 1 0-5.94 3.9 3.9 0 0 1 .89-1.57 3.8 3.8 0 0 1 1.5-1 10.7 10.7 0 0 1 7.11 0 4 4 0 0 1 1.48 1 3.9 3.9 0 0 1 .88 1.55Zm-3.66 4.44a5 5 0 0 0 .22-1.43 5.2 5.2 0 0 0-.22-1.47 1.9 1.9 0 0 0-.54-.84 1.8 1.8 0 0 0-.88-.43 5.6 5.6 0 0 0-1.83 0 2 2 0 0 0-.87.44 1.9 1.9 0 0 0-.52.81 4.8 4.8 0 0 0 0 2.9 1.7 1.7 0 0 0 .52.82 1.65 1.65 0 0 0 .87.42A4.7 4.7 0 0 0 10 24a1.83 1.83 0 0 0 .87-.43 2 2 0 0 0 .55-.83Zm4.05-14.63h-3.85a6.3 6.3 0 0 0-.19-1.43 1.8 1.8 0 0 0-.52-.82 1.8 1.8 0 0 0-.88-.42 5.1 5.1 0 0 0-1.83 0 1.93 1.93 0 0 0-.87.43 1.9 1.9 0 0 0-.53.81 4.94 4.94 0 0 0 0 2.9 1.86 1.86 0 0 0 .52.82 1.8 1.8 0 0 0 .88.43 5.1 5.1 0 0 0 1.83 0 2 2 0 0 0 .87-.44 2 2 0 0 0 .53-.81 4.5 4.5 0 0 0 .14-.66l3.63 1.69c-.05.16-.1.33-.14.5a4 4 0 0 1-.88 1.57 4.1 4.1 0 0 1-1.5 1 12 12 0 0 1-3.56.58 10.7 10.7 0 0 1-3.55-.58 4.2 4.2 0 0 1-1.48-1 4 4 0 0 1-.89-1.55 10.9 10.9 0 0 1 0-5.94A3.9 3.9 0 0 1 4.1 3.6a4 4 0 0 1 1.5-1 10.7 10.7 0 0 1 7.11 0 3.9 3.9 0 0 1 1.49 1 4 4 0 0 1 .9 1.55 11.3 11.3 0 0 1 .39 2.96m.93 13.19a11 11 0 0 1 .39-3 3.6 3.6 0 0 1 .93-1.55 3.7 3.7 0 0 1 1.56-.92 10.7 10.7 0 0 1 7.11 0 3.9 3.9 0 0 1 1.49 1 4 4 0 0 1 .9 1.55 10.93 10.93 0 0 1 0 5.95 3.8 3.8 0 0 1-.89 1.56 3.74 3.74 0 0 1-1.5 1 11.5 11.5 0 0 1-3.55.59l-1.32-3.59h.15l.21.06a5.2 5.2 0 0 0 1.84 0 1.84 1.84 0 0 0 .84-.44 1.9 1.9 0 0 0 .52-.8 4.94 4.94 0 0 0 0-2.9 1.83 1.83 0 0 0-1.4-1.25 5.1 5.1 0 0 0-1.83 0A2 2 0 0 0 21 19a1.9 1.9 0 0 0-.53.81 4.6 4.6 0 0 0-.2 1.42V30h-3.85Z", fill: fill !== null && fill !== void 0 ? fill : "currentColor", fillRule: "evenodd" })] }));
 };
 
 export { CoopIcon };

package/dist/components/Icon/CoopLocationIcon.d.ts

@@ -2,5 +2,5 @@ import { type SVGProps } from "react";
 interface IconProps extends SVGProps<SVGSVGElement> {
     alt?: string;
 }
-export declare const CoopLocationIcon: ({ alt, className, fill, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CoopLocationIcon: ({ alt, className, fill, id, ref, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Icon/CoopLocationIcon.js

@@ -1,19 +1,20 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { useId } from 'react';
+import { useId } from '../../hooks/useId.js';
 
-const CoopLocationIcon = ({ alt, className, fill, ...props }) => {
-    const id = useId();
+const CoopLocationIcon = ({ alt, className, fill, id, ref, ...props }) => {
+    const uid = useId(id);
     const componentProps = {
-        "aria-labelledby": alt ? id : undefined,
+        "aria-labelledby": alt ? uid + "-title" : undefined,
         className: clsx("coop-icon", className),
         "data-icon": "coop-location",
         fill: fill !== null && fill !== void 0 ? fill : "none",
+        id: uid,
         role: alt ? "img" : undefined,
         viewBox: "0 0 32 32",
         ...props,
     };
-    return (jsxs("svg", { ...componentProps, children: [alt ? jsx("title", { id: id, children: alt }) : null, jsx("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", fill: fill !== null && fill !== void 0 ? fill : "currentColor" }), jsx("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", fill: fill !== null && fill !== void 0 ? fill : "currentColor" }), jsx("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", fill: fill !== null && fill !== void 0 ? fill : "currentColor" })] }));
+    return (jsxs("svg", { ...componentProps, ref: ref, children: [alt ? jsx("title", { id: uid + "-title", children: alt }) : null, jsx("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", fill: fill !== null && fill !== void 0 ? fill : "currentColor" }), jsx("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", fill: fill !== null && fill !== void 0 ? fill : "currentColor" }), jsx("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", fill: fill !== null && fill !== void 0 ? fill : "currentColor" })] }));
 };
 
 export { CoopLocationIcon };

package/dist/components/Icon/DownloadIcon.d.ts

@@ -2,5 +2,5 @@ import { type SVGProps } from "react";
 interface IconProps extends SVGProps<SVGSVGElement> {
     alt?: string;
 }
-export declare const DownloadIcon: ({ alt, className, fill, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DownloadIcon: ({ alt, className, fill, id, ref, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Icon/DownloadIcon.js

@@ -1,19 +1,20 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { useId } from 'react';
+import { useId } from '../../hooks/useId.js';
 
-const DownloadIcon = ({ alt, className, fill, ...props }) => {
-    const id = useId();
+const DownloadIcon = ({ alt, className, fill, id, ref, ...props }) => {
+    const uid = useId(id);
     const componentProps = {
-        "aria-labelledby": alt ? id : undefined,
+        "aria-labelledby": alt ? uid + "-title" : undefined,
         className: clsx("coop-icon", className),
         "data-icon": "download",
         fill: fill !== null && fill !== void 0 ? fill : "none",
+        id: uid,
         role: alt ? "img" : undefined,
         viewBox: "0 0 32 32",
         ...props,
     };
-    return (jsxs("svg", { ...componentProps, children: [alt ? jsx("title", { id: id, children: alt }) : null, jsx("path", { d: "M16 22.56a1 1 0 0 1-1-1V1a1 1 0 0 1 2 0v20.56a1 1 0 0 1-1 1", fill: fill !== null && fill !== void 0 ? fill : "currentColor" }), jsx("path", { d: "M16 23a1 1 0 0 1-.7-.3l-9.76-9.77A1 1 0 0 1 7 11.52l9 9 9-9a1 1 0 0 1 1.41 0 1 1 0 0 1 0 1.42l-9.73 9.72A1 1 0 0 1 16 23", fill: fill !== null && fill !== void 0 ? fill : "currentColor" }), jsx("path", { d: "M30 32H2a2 2 0 0 1-2-2v-7.49a1 1 0 0 1 2 0V30h28v-7.49a1 1 0 0 1 2 0V30a2 2 0 0 1-2 2", fill: fill !== null && fill !== void 0 ? fill : "currentColor" })] }));
+    return (jsxs("svg", { ...componentProps, ref: ref, children: [alt ? jsx("title", { id: uid + "-title", children: alt }) : null, jsx("path", { d: "M16 22.56a1 1 0 0 1-1-1V1a1 1 0 0 1 2 0v20.56a1 1 0 0 1-1 1", fill: fill !== null && fill !== void 0 ? fill : "currentColor" }), jsx("path", { d: "M16 23a1 1 0 0 1-.7-.3l-9.76-9.77A1 1 0 0 1 7 11.52l9 9 9-9a1 1 0 0 1 1.41 0 1 1 0 0 1 0 1.42l-9.73 9.72A1 1 0 0 1 16 23", fill: fill !== null && fill !== void 0 ? fill : "currentColor" }), jsx("path", { d: "M30 32H2a2 2 0 0 1-2-2v-7.49a1 1 0 0 1 2 0V30h28v-7.49a1 1 0 0 1 2 0V30a2 2 0 0 1-2 2", fill: fill !== null && fill !== void 0 ? fill : "currentColor" })] }));
 };
 
 export { DownloadIcon };

package/dist/components/Icon/HomeIcon.d.ts

@@ -2,5 +2,5 @@ import { type SVGProps } from "react";
 interface IconProps extends SVGProps<SVGSVGElement> {
     alt?: string;
 }
-export declare const HomeIcon: ({ alt, className, fill, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const HomeIcon: ({ alt, className, fill, id, ref, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Icon/HomeIcon.js

@@ -1,19 +1,20 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { useId } from 'react';
+import { useId } from '../../hooks/useId.js';
 
-const HomeIcon = ({ alt, className, fill, ...props }) => {
-    const id = useId();
+const HomeIcon = ({ alt, className, fill, id, ref, ...props }) => {
+    const uid = useId(id);
     const componentProps = {
-        "aria-labelledby": alt ? id : undefined,
+        "aria-labelledby": alt ? uid + "-title" : undefined,
         className: clsx("coop-icon", className),
         "data-icon": "home",
         fill: fill !== null && fill !== void 0 ? fill : "none",
+        id: uid,
         role: alt ? "img" : undefined,
         viewBox: "0 0 32 32",
         ...props,
     };
-    return (jsxs("svg", { ...componentProps, children: [alt ? jsx("title", { id: id, children: alt }) : null, jsx("path", { d: "M29 31H3a1 1 0 0 1-1-1V15a1 1 0 0 1 2 0v14h24V15a1 1 0 0 1 2 0v15a1 1 0 0 1-1 1", fill: fill !== null && fill !== void 0 ? fill : "currentColor" }), jsx("path", { d: "M31 17a1 1 0 0 1-.68-.27L15.92 3.37 1.68 16.73a1 1 0 0 1-1.41-.05 1 1 0 0 1 0-1.41l14.91-14a1 1 0 0 1 1.36 0l15.09 14a1 1 0 0 1 .05 1.42A1 1 0 0 1 31 17", fill: fill !== null && fill !== void 0 ? fill : "currentColor" }), jsx("path", { d: "M22.86 31h-8a1 1 0 0 1-1-1V18a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1m-7-2h6V19h-6Z", fill: fill !== null && fill !== void 0 ? fill : "currentColor" })] }));
+    return (jsxs("svg", { ...componentProps, ref: ref, children: [alt ? jsx("title", { id: uid + "-title", children: alt }) : null, jsx("path", { d: "M29 31H3a1 1 0 0 1-1-1V15a1 1 0 0 1 2 0v14h24V15a1 1 0 0 1 2 0v15a1 1 0 0 1-1 1", fill: fill !== null && fill !== void 0 ? fill : "currentColor" }), jsx("path", { d: "M31 17a1 1 0 0 1-.68-.27L15.92 3.37 1.68 16.73a1 1 0 0 1-1.41-.05 1 1 0 0 1 0-1.41l14.91-14a1 1 0 0 1 1.36 0l15.09 14a1 1 0 0 1 .05 1.42A1 1 0 0 1 31 17", fill: fill !== null && fill !== void 0 ? fill : "currentColor" }), jsx("path", { d: "M22.86 31h-8a1 1 0 0 1-1-1V18a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1m-7-2h6V19h-6Z", fill: fill !== null && fill !== void 0 ? fill : "currentColor" })] }));
 };
 
 export { HomeIcon };

package/dist/components/Icon/InformationIcon.d.ts

@@ -2,5 +2,5 @@ import { type SVGProps } from "react";
 interface IconProps extends SVGProps<SVGSVGElement> {
     alt?: string;
 }
-export declare const InformationIcon: ({ alt, className, fill, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InformationIcon: ({ alt, className, fill, id, ref, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Icon/InformationIcon.js

@@ -1,19 +1,20 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { useId } from 'react';
+import { useId } from '../../hooks/useId.js';
 
-const InformationIcon = ({ alt, className, fill, ...props }) => {
-    const id = useId();
+const InformationIcon = ({ alt, className, fill, id, ref, ...props }) => {
+    const uid = useId(id);
     const componentProps = {
-        "aria-labelledby": alt ? id : undefined,
+        "aria-labelledby": alt ? uid + "-title" : undefined,
         className: clsx("coop-icon", className),
         "data-icon": "information",
         fill: fill !== null && fill !== void 0 ? fill : "none",
+        id: uid,
         role: alt ? "img" : undefined,
         viewBox: "0 0 32 32",
         ...props,
     };
-    return (jsxs("svg", { ...componentProps, children: [alt ? jsx("title", { id: id, children: alt }) : null, jsx("path", { d: "M14.46 10.19a1.4 1.4 0 0 1 .43-1A1.5 1.5 0 0 1 16 8.75a1.6 1.6 0 0 1 1.11.41 1.35 1.35 0 0 1 .45 1 1.32 1.32 0 0 1-.45 1 1.56 1.56 0 0 1-1.11.41 1.47 1.47 0 0 1-1.09-.43 1.35 1.35 0 0 1-.45-.95m.34 3.26h2.4v9.6h-2.4Z", fill: fill !== null && fill !== void 0 ? fill : "currentColor" }), jsx("path", { d: "M16 2A14 14 0 1 1 2 16 14 14 0 0 1 16 2m0-2a16 16 0 1 0 16 16A16 16 0 0 0 16 0", fill: fill !== null && fill !== void 0 ? fill : "currentColor" })] }));
+    return (jsxs("svg", { ...componentProps, ref: ref, children: [alt ? jsx("title", { id: uid + "-title", children: alt }) : null, jsx("path", { d: "M14.46 10.19a1.4 1.4 0 0 1 .43-1A1.5 1.5 0 0 1 16 8.75a1.6 1.6 0 0 1 1.11.41 1.35 1.35 0 0 1 .45 1 1.32 1.32 0 0 1-.45 1 1.56 1.56 0 0 1-1.11.41 1.47 1.47 0 0 1-1.09-.43 1.35 1.35 0 0 1-.45-.95m.34 3.26h2.4v9.6h-2.4Z", fill: fill !== null && fill !== void 0 ? fill : "currentColor" }), jsx("path", { d: "M16 2A14 14 0 1 1 2 16 14 14 0 0 1 16 2m0-2a16 16 0 1 0 16 16A16 16 0 0 0 16 0", fill: fill !== null && fill !== void 0 ? fill : "currentColor" })] }));
 };
 
 export { InformationIcon };

package/dist/components/Icon/LoadingIcon.d.ts

@@ -2,5 +2,5 @@ import { type SVGProps } from "react";
 interface IconProps extends SVGProps<SVGSVGElement> {
     alt?: string;
 }
-export declare const LoadingIcon: ({ alt, className, fill, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LoadingIcon: ({ alt, className, fill, id, ref, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Icon/LoadingIcon.js

@@ -1,19 +1,20 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { useId } from 'react';
+import { useId } from '../../hooks/useId.js';
 
-const LoadingIcon = ({ alt, className, fill, ...props }) => {
-    const id = useId();
+const LoadingIcon = ({ alt, className, fill, id, ref, ...props }) => {
+    const uid = useId(id);
     const componentProps = {
-        "aria-labelledby": alt ? id : undefined,
+        "aria-labelledby": alt ? uid + "-title" : undefined,
         className: clsx("coop-icon", className),
         "data-icon": "loading",
         fill: fill !== null && fill !== void 0 ? fill : "none",
+        id: uid,
         role: alt ? "img" : undefined,
         viewBox: "0 0 24 24",
         ...props,
     };
-    return (jsxs("svg", { ...componentProps, children: [alt ? jsx("title", { id: id, children: alt }) : null, jsx("path", { d: "M10.72 19.9a8 8 0 0 1-6.5-9.79 7.77 7.77 0 0 1 6.18-5.95 8 8 0 0 1 9.49 6.52A1.54 1.54 0 0 0 21.38 12h.13a1.37 1.37 0 0 0 1.38-1.54 11 11 0 1 0-12.7 12.39A1.54 1.54 0 0 0 12 21.34a1.47 1.47 0 0 0-1.28-1.44", fill: fill !== null && fill !== void 0 ? fill : "currentColor" })] }));
+    return (jsxs("svg", { ...componentProps, ref: ref, children: [alt ? jsx("title", { id: uid + "-title", children: alt }) : null, jsx("path", { d: "M10.72 19.9a8 8 0 0 1-6.5-9.79 7.77 7.77 0 0 1 6.18-5.95 8 8 0 0 1 9.49 6.52A1.54 1.54 0 0 0 21.38 12h.13a1.37 1.37 0 0 0 1.38-1.54 11 11 0 1 0-12.7 12.39A1.54 1.54 0 0 0 12 21.34a1.47 1.47 0 0 0-1.28-1.44", fill: fill !== null && fill !== void 0 ? fill : "currentColor" })] }));
 };
 
 export { LoadingIcon };

package/dist/components/Icon/LocationIcon.d.ts

@@ -2,5 +2,5 @@ import { type SVGProps } from "react";
 interface IconProps extends SVGProps<SVGSVGElement> {
     alt?: string;
 }
-export declare const LocationIcon: ({ alt, className, fill, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LocationIcon: ({ alt, className, fill, id, ref, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Icon/LocationIcon.js

@@ -1,19 +1,20 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { useId } from 'react';
+import { useId } from '../../hooks/useId.js';
 
-const LocationIcon = ({ alt, className, fill, ...props }) => {
-    const id = useId();
+const LocationIcon = ({ alt, className, fill, id, ref, ...props }) => {
+    const uid = useId(id);
     const componentProps = {
-        "aria-labelledby": alt ? id : undefined,
+        "aria-labelledby": alt ? uid + "-title" : undefined,
         className: clsx("coop-icon", className),
         "data-icon": "location",
         fill: fill !== null && fill !== void 0 ? fill : "none",
+        id: uid,
         role: alt ? "img" : undefined,
         viewBox: "0 0 32 32",
         ...props,
     };
-    return (jsxs("svg", { ...componentProps, children: [alt ? jsx("title", { id: id, children: alt }) : null, jsx("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 !== null && fill !== void 0 ? fill : "currentColor" }), jsx("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 !== null && fill !== void 0 ? fill : "currentColor" })] }));
+    return (jsxs("svg", { ...componentProps, ref: ref, children: [alt ? jsx("title", { id: uid + "-title", children: alt }) : null, jsx("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 !== null && fill !== void 0 ? fill : "currentColor" }), jsx("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 !== null && fill !== void 0 ? fill : "currentColor" })] }));
 };
 
 export { LocationIcon };

package/dist/components/Icon/MailIcon.d.ts

@@ -2,5 +2,5 @@ import { type SVGProps } from "react";
 interface IconProps extends SVGProps<SVGSVGElement> {
     alt?: string;
 }
-export declare const MailIcon: ({ alt, className, fill, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MailIcon: ({ alt, className, fill, id, ref, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Icon/MailIcon.js

@@ -1,19 +1,20 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { useId } from 'react';
+import { useId } from '../../hooks/useId.js';
 
-const MailIcon = ({ alt, className, fill, ...props }) => {
-    const id = useId();
+const MailIcon = ({ alt, className, fill, id, ref, ...props }) => {
+    const uid = useId(id);
     const componentProps = {
-        "aria-labelledby": alt ? id : undefined,
+        "aria-labelledby": alt ? uid + "-title" : undefined,
         className: clsx("coop-icon", className),
         "data-icon": "mail",
         fill: fill !== null && fill !== void 0 ? fill : "none",
+        id: uid,
         role: alt ? "img" : undefined,
         viewBox: "0 0 32 32",
         ...props,
     };
-    return (jsxs("svg", { ...componentProps, children: [alt ? jsx("title", { id: id, children: alt }) : null, jsx("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 !== null && fill !== void 0 ? fill : "currentColor" })] }));
+    return (jsxs("svg", { ...componentProps, ref: ref, children: [alt ? jsx("title", { id: uid + "-title", children: alt }) : null, jsx("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 !== null && fill !== void 0 ? fill : "currentColor" })] }));
 };
 
 export { MailIcon };

package/dist/components/Icon/MenuIcon.d.ts

@@ -2,5 +2,5 @@ import { type SVGProps } from "react";
 interface IconProps extends SVGProps<SVGSVGElement> {
     alt?: string;
 }
-export declare const MenuIcon: ({ alt, className, fill, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuIcon: ({ alt, className, fill, id, ref, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Icon/MenuIcon.js

@@ -1,19 +1,20 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { useId } from 'react';
+import { useId } from '../../hooks/useId.js';
 
-const MenuIcon = ({ alt, className, fill, ...props }) => {
-    const id = useId();
+const MenuIcon = ({ alt, className, fill, id, ref, ...props }) => {
+    const uid = useId(id);
     const componentProps = {
-        "aria-labelledby": alt ? id : undefined,
+        "aria-labelledby": alt ? uid + "-title" : undefined,
         className: clsx("coop-icon", className),
         "data-icon": "menu",
         fill: fill !== null && fill !== void 0 ? fill : "none",
+        id: uid,
         role: alt ? "img" : undefined,
         viewBox: "0 0 32 32",
         ...props,
     };
-    return (jsxs("svg", { ...componentProps, children: [alt ? jsx("title", { id: id, children: alt }) : null, jsx("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 !== null && fill !== void 0 ? fill : "currentColor" })] }));
+    return (jsxs("svg", { ...componentProps, ref: ref, children: [alt ? jsx("title", { id: uid + "-title", children: alt }) : null, jsx("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 !== null && fill !== void 0 ? fill : "currentColor" })] }));
 };
 
 export { MenuIcon };

package/dist/components/Icon/MessageIcon.d.ts

@@ -2,5 +2,5 @@ import { type SVGProps } from "react";
 interface IconProps extends SVGProps<SVGSVGElement> {
     alt?: string;
 }
-export declare const MessageIcon: ({ alt, className, fill, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MessageIcon: ({ alt, className, fill, id, ref, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Icon/MessageIcon.js

@@ -1,19 +1,20 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { useId } from 'react';
+import { useId } from '../../hooks/useId.js';
 
-const MessageIcon = ({ alt, className, fill, ...props }) => {
-    const id = useId();
+const MessageIcon = ({ alt, className, fill, id, ref, ...props }) => {
+    const uid = useId(id);
     const componentProps = {
-        "aria-labelledby": alt ? id : undefined,
+        "aria-labelledby": alt ? uid + "-title" : undefined,
         className: clsx("coop-icon", className),
         "data-icon": "message",
         fill: fill !== null && fill !== void 0 ? fill : "none",
+        id: uid,
         role: alt ? "img" : undefined,
         viewBox: "0 0 32 32",
         ...props,
     };
-    return (jsxs("svg", { ...componentProps, children: [alt ? jsx("title", { id: id, children: alt }) : null, jsx("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 !== null && fill !== void 0 ? fill : "currentColor" })] }));
+    return (jsxs("svg", { ...componentProps, ref: ref, children: [alt ? jsx("title", { id: uid + "-title", children: alt }) : null, jsx("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 !== null && fill !== void 0 ? fill : "currentColor" })] }));
 };
 
 export { MessageIcon };

package/dist/components/Icon/MinusIcon.d.ts

@@ -2,5 +2,5 @@ import { type SVGProps } from "react";
 interface IconProps extends SVGProps<SVGSVGElement> {
     alt?: string;
 }
-export declare const MinusIcon: ({ alt, className, fill, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MinusIcon: ({ alt, className, fill, id, ref, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Icon/MinusIcon.js

@@ -1,19 +1,20 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { useId } from 'react';
+import { useId } from '../../hooks/useId.js';
 
-const MinusIcon = ({ alt, className, fill, ...props }) => {
-    const id = useId();
+const MinusIcon = ({ alt, className, fill, id, ref, ...props }) => {
+    const uid = useId(id);
     const componentProps = {
-        "aria-labelledby": alt ? id : undefined,
+        "aria-labelledby": alt ? uid + "-title" : undefined,
         className: clsx("coop-icon", className),
         "data-icon": "minus",
         fill: fill !== null && fill !== void 0 ? fill : "none",
+        id: uid,
         role: alt ? "img" : undefined,
         viewBox: "0 0 32 32",
         ...props,
     };
-    return (jsxs("svg", { ...componentProps, children: [alt ? jsx("title", { id: id, children: alt }) : null, jsx("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 !== null && fill !== void 0 ? fill : "currentColor" })] }));
+    return (jsxs("svg", { ...componentProps, ref: ref, children: [alt ? jsx("title", { id: uid + "-title", children: alt }) : null, jsx("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 !== null && fill !== void 0 ? fill : "currentColor" })] }));
 };
 
 export { MinusIcon };

package/dist/components/Icon/OpenNewIcon.d.ts

@@ -2,5 +2,5 @@ import { type SVGProps } from "react";
 interface IconProps extends SVGProps<SVGSVGElement> {
     alt?: string;
 }
-export declare const OpenNewIcon: ({ alt, className, fill, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const OpenNewIcon: ({ alt, className, fill, id, ref, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Icon/OpenNewIcon.js

@@ -1,19 +1,20 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { useId } from 'react';
+import { useId } from '../../hooks/useId.js';
 
-const OpenNewIcon = ({ alt, className, fill, ...props }) => {
-    const id = useId();
+const OpenNewIcon = ({ alt, className, fill, id, ref, ...props }) => {
+    const uid = useId(id);
     const componentProps = {
-        "aria-labelledby": alt ? id : undefined,
+        "aria-labelledby": alt ? uid + "-title" : undefined,
         className: clsx("coop-icon", className),
         "data-icon": "open-new",
         fill: fill !== null && fill !== void 0 ? fill : "none",
+        id: uid,
         role: alt ? "img" : undefined,
         viewBox: "0 0 32 32",
         ...props,
     };
-    return (jsxs("svg", { ...componentProps, children: [alt ? jsx("title", { id: id, children: alt }) : null, jsx("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 !== null && fill !== void 0 ? fill : "currentColor" }), jsx("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 !== null && fill !== void 0 ? fill : "currentColor" })] }));
+    return (jsxs("svg", { ...componentProps, ref: ref, children: [alt ? jsx("title", { id: uid + "-title", children: alt }) : null, jsx("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 !== null && fill !== void 0 ? fill : "currentColor" }), jsx("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 !== null && fill !== void 0 ? fill : "currentColor" })] }));
 };
 
 export { OpenNewIcon };

package/dist/components/Icon/PencilIcon.d.ts

@@ -2,5 +2,5 @@ import { type SVGProps } from "react";
 interface IconProps extends SVGProps<SVGSVGElement> {
     alt?: string;
 }
-export declare const PencilIcon: ({ alt, className, fill, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PencilIcon: ({ alt, className, fill, id, ref, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Icon/PencilIcon.js

@@ -1,19 +1,20 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { useId } from 'react';
+import { useId } from '../../hooks/useId.js';
 
-const PencilIcon = ({ alt, className, fill, ...props }) => {
-    const id = useId();
+const PencilIcon = ({ alt, className, fill, id, ref, ...props }) => {
+    const uid = useId(id);
     const componentProps = {
-        "aria-labelledby": alt ? id : undefined,
+        "aria-labelledby": alt ? uid + "-title" : undefined,
         className: clsx("coop-icon", className),
         "data-icon": "pencil",
         fill: fill !== null && fill !== void 0 ? fill : "none",
+        id: uid,
         role: alt ? "img" : undefined,
         viewBox: "0 0 32 32",
         ...props,
     };
-    return (jsxs("svg", { ...componentProps, children: [alt ? jsx("title", { id: id, children: alt }) : null, jsx("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 !== null && fill !== void 0 ? fill : "currentColor" })] }));
+    return (jsxs("svg", { ...componentProps, ref: ref, children: [alt ? jsx("title", { id: uid + "-title", children: alt }) : null, jsx("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 !== null && fill !== void 0 ? fill : "currentColor" })] }));
 };
 
 export { PencilIcon };

package/dist/components/Icon/PhoneIcon.d.ts

@@ -2,5 +2,5 @@ import { type SVGProps } from "react";
 interface IconProps extends SVGProps<SVGSVGElement> {
     alt?: string;
 }
-export declare const PhoneIcon: ({ alt, className, fill, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PhoneIcon: ({ alt, className, fill, id, ref, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Icon/PhoneIcon.js

@@ -1,19 +1,20 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { useId } from 'react';
+import { useId } from '../../hooks/useId.js';
 
-const PhoneIcon = ({ alt, className, fill, ...props }) => {
-    const id = useId();
+const PhoneIcon = ({ alt, className, fill, id, ref, ...props }) => {
+    const uid = useId(id);
     const componentProps = {
-        "aria-labelledby": alt ? id : undefined,
+        "aria-labelledby": alt ? uid + "-title" : undefined,
         className: clsx("coop-icon", className),
         "data-icon": "phone",
         fill: fill !== null && fill !== void 0 ? fill : "none",
+        id: uid,
         role: alt ? "img" : undefined,
         viewBox: "0 0 32 32",
         ...props,
     };
-    return (jsxs("svg", { ...componentProps, children: [alt ? jsx("title", { id: id, children: alt }) : null, jsx("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 !== null && fill !== void 0 ? fill : "currentColor" })] }));
+    return (jsxs("svg", { ...componentProps, ref: ref, children: [alt ? jsx("title", { id: uid + "-title", children: alt }) : null, jsx("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 !== null && fill !== void 0 ? fill : "currentColor" })] }));
 };
 
 export { PhoneIcon };

package/dist/components/Icon/QuestionIcon.d.ts

@@ -2,5 +2,5 @@ import { type SVGProps } from "react";
 interface IconProps extends SVGProps<SVGSVGElement> {
     alt?: string;
 }
-export declare const QuestionIcon: ({ alt, className, fill, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const QuestionIcon: ({ alt, className, fill, id, ref, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Icon/QuestionIcon.js

@@ -1,19 +1,20 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { useId } from 'react';
+import { useId } from '../../hooks/useId.js';
 
-const QuestionIcon = ({ alt, className, fill, ...props }) => {
-    const id = useId();
+const QuestionIcon = ({ alt, className, fill, id, ref, ...props }) => {
+    const uid = useId(id);
     const componentProps = {
-        "aria-labelledby": alt ? id : undefined,
+        "aria-labelledby": alt ? uid + "-title" : undefined,
         className: clsx("coop-icon", className),
         "data-icon": "question",
         fill: fill !== null && fill !== void 0 ? fill : "none",
+        id: uid,
         role: alt ? "img" : undefined,
         viewBox: "0 0 32 32",
         ...props,
     };
-    return (jsxs("svg", { ...componentProps, children: [alt ? jsx("title", { id: id, children: alt }) : null, jsx("path", { d: "M16 0a16 16 0 1 0 16 16A16 16 0 0 0 16 0m0 30a14 14 0 1 1 14-14 14 14 0 0 1-14 14", fill: fill !== null && fill !== void 0 ? fill : "currentColor" }), jsx("path", { d: "M15.89 20.32a1.58 1.58 0 0 0-1.14.46 1.5 1.5 0 0 0-.47 1.1 1.3 1.3 0 0 0 .13.6 1.6 1.6 0 0 0 .35.48 1.7 1.7 0 0 0 .51.33 1.6 1.6 0 0 0 .62.12 1.55 1.55 0 0 0 1.11-.47 1.48 1.48 0 0 0 .47-1.1 1.4 1.4 0 0 0-.47-1.08 1.6 1.6 0 0 0-1.11-.44M19.11 9.71A4.3 4.3 0 0 0 17.74 9a5.2 5.2 0 0 0-1.63-.25 5.4 5.4 0 0 0-1.73.25 4.5 4.5 0 0 0-1.38.78 4.3 4.3 0 0 0-1 1.28 5 5 0 0 0-.51 1.71l2.41.23a2.7 2.7 0 0 1 .16-.78 1.9 1.9 0 0 1 .41-.67 2.1 2.1 0 0 1 .64-.46 1.9 1.9 0 0 1 .84-.17 1.78 1.78 0 0 1 1.39.53 1.84 1.84 0 0 1 .49 1.31 1.9 1.9 0 0 1-.27 1 4 4 0 0 1-.65.76l-.9.86a5.4 5.4 0 0 0-.63.68 3.05 3.05 0 0 0-.63 1.39 5.4 5.4 0 0 0-.07.86v.76h2.37v-.52a4 4 0 0 1 .06-.74 1.8 1.8 0 0 1 .21-.56 2.7 2.7 0 0 1 .4-.52c.17-.18.39-.38.65-.61s.59-.52.84-.77a5 5 0 0 0 .63-.77 3.4 3.4 0 0 0 .4-.88 4.2 4.2 0 0 0 .14-1.13 3.8 3.8 0 0 0-.38-1.64 3.6 3.6 0 0 0-.89-1.22", fill: fill !== null && fill !== void 0 ? fill : "currentColor" })] }));
+    return (jsxs("svg", { ...componentProps, ref: ref, children: [alt ? jsx("title", { id: uid + "-title", children: alt }) : null, jsx("path", { d: "M16 0a16 16 0 1 0 16 16A16 16 0 0 0 16 0m0 30a14 14 0 1 1 14-14 14 14 0 0 1-14 14", fill: fill !== null && fill !== void 0 ? fill : "currentColor" }), jsx("path", { d: "M15.89 20.32a1.58 1.58 0 0 0-1.14.46 1.5 1.5 0 0 0-.47 1.1 1.3 1.3 0 0 0 .13.6 1.6 1.6 0 0 0 .35.48 1.7 1.7 0 0 0 .51.33 1.6 1.6 0 0 0 .62.12 1.55 1.55 0 0 0 1.11-.47 1.48 1.48 0 0 0 .47-1.1 1.4 1.4 0 0 0-.47-1.08 1.6 1.6 0 0 0-1.11-.44M19.11 9.71A4.3 4.3 0 0 0 17.74 9a5.2 5.2 0 0 0-1.63-.25 5.4 5.4 0 0 0-1.73.25 4.5 4.5 0 0 0-1.38.78 4.3 4.3 0 0 0-1 1.28 5 5 0 0 0-.51 1.71l2.41.23a2.7 2.7 0 0 1 .16-.78 1.9 1.9 0 0 1 .41-.67 2.1 2.1 0 0 1 .64-.46 1.9 1.9 0 0 1 .84-.17 1.78 1.78 0 0 1 1.39.53 1.84 1.84 0 0 1 .49 1.31 1.9 1.9 0 0 1-.27 1 4 4 0 0 1-.65.76l-.9.86a5.4 5.4 0 0 0-.63.68 3.05 3.05 0 0 0-.63 1.39 5.4 5.4 0 0 0-.07.86v.76h2.37v-.52a4 4 0 0 1 .06-.74 1.8 1.8 0 0 1 .21-.56 2.7 2.7 0 0 1 .4-.52c.17-.18.39-.38.65-.61s.59-.52.84-.77a5 5 0 0 0 .63-.77 3.4 3.4 0 0 0 .4-.88 4.2 4.2 0 0 0 .14-1.13 3.8 3.8 0 0 0-.38-1.64 3.6 3.6 0 0 0-.89-1.22", fill: fill !== null && fill !== void 0 ? fill : "currentColor" })] }));
 };
 
 export { QuestionIcon };

package/dist/components/Icon/ScooterIcon.d.ts

@@ -2,5 +2,5 @@ import { type SVGProps } from "react";
 interface IconProps extends SVGProps<SVGSVGElement> {
     alt?: string;
 }
-export declare const ScooterIcon: ({ alt, className, fill, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ScooterIcon: ({ alt, className, fill, id, ref, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Icon/ScooterIcon.js

@@ -1,19 +1,20 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { useId } from 'react';
+import { useId } from '../../hooks/useId.js';
 
-const ScooterIcon = ({ alt, className, fill, ...props }) => {
-    const id = useId();
+const ScooterIcon = ({ alt, className, fill, id, ref, ...props }) => {
+    const uid = useId(id);
     const componentProps = {
-        "aria-labelledby": alt ? id : undefined,
+        "aria-labelledby": alt ? uid + "-title" : undefined,
         className: clsx("coop-icon", className),
         "data-icon": "scooter",
         fill: fill !== null && fill !== void 0 ? fill : "none",
+        id: uid,
         role: alt ? "img" : undefined,
         viewBox: "0 0 46 30",
         ...props,
     };
-    return (jsxs("svg", { ...componentProps, children: [alt ? jsx("title", { id: id, children: alt }) : null, jsxs("g", { clipPath: "url(#a)", clipRule: "evenodd", fill: "currentColor", fillRule: "evenodd", children: [jsx("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" }), jsx("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 !== null && fill !== void 0 ? fill : "currentColor" }), jsx("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 !== null && fill !== void 0 ? fill : "currentColor" }), jsx("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 !== null && fill !== void 0 ? fill : "currentColor" })] }), jsx("defs", { children: jsx("clipPath", { id: "a", children: jsx("path", { d: "M0 0h45.4v29.3H0z", fill: "currentColor" }) }) })] }));
+    return (jsxs("svg", { ...componentProps, ref: ref, children: [alt ? jsx("title", { id: uid + "-title", children: alt }) : null, jsxs("g", { clipPath: "url(#a)", clipRule: "evenodd", fill: "currentColor", fillRule: "evenodd", children: [jsx("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" }), jsx("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 !== null && fill !== void 0 ? fill : "currentColor" }), jsx("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 !== null && fill !== void 0 ? fill : "currentColor" }), jsx("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 !== null && fill !== void 0 ? fill : "currentColor" })] }), jsx("defs", { children: jsx("clipPath", { id: "a", children: jsx("path", { d: "M0 0h45.4v29.3H0z", fill: "currentColor" }) }) })] }));
 };
 
 export { ScooterIcon };