@coopdigital/react 0.45.0 → 0.47.0

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

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

package/dist/components/Icon/SearchIcon.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 SearchIcon = ({ alt, className, fill, ...props }) => {
-    const id = useId();
+const SearchIcon = ({ 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": "search",
         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: "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 !== null && fill !== void 0 ? fill : "currentColor" }), jsx("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 !== 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: "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 !== null && fill !== void 0 ? fill : "currentColor" }), jsx("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 !== null && fill !== void 0 ? fill : "currentColor" })] }));
 };
 
 export { SearchIcon };

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

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

package/dist/components/Icon/SettingsIcon.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 SettingsIcon = ({ alt, className, fill, ...props }) => {
-    const id = useId();
+const SettingsIcon = ({ 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": "settings",
         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 2a14 14 0 0 1 2.13.16v3.57l1.34.47a10.2 10.2 0 0 1 3.27 1.89l1.08.91 1.23-.71 1.86-1.08a14 14 0 0 1 2.14 3.69L27.18 12l-1.18.7.26 1.39a10.6 10.6 0 0 1 0 3.8L26 19.28l1.23.71 1.88 1.09a14.2 14.2 0 0 1-2.14 3.69l-1.86-1.08-1.28-.69-1.07.92a10.6 10.6 0 0 1-3.3 1.9l-1.33.47v3.57A14 14 0 0 1 16 30a14 14 0 0 1-2.13-.16v-3.57l-1.34-.47a10.2 10.2 0 0 1-3.27-1.9L8.18 23 7 23.69l-1.91 1.08A14.1 14.1 0 0 1 3 21.08L4.82 20l1.23-.71-.26-1.39a10.6 10.6 0 0 1 0-3.8l.26-1.39L4.82 12 3 10.92a14.5 14.5 0 0 1 2.08-3.69l1.86 1.08L8.16 9l1.08-.9a10.6 10.6 0 0 1 3.3-1.9l1.33-.47V2.16A14 14 0 0 1 16 2m0 21a7 7 0 1 0-7-7 7 7 0 0 0 7 7m0-23a16 16 0 0 0-3.53.39.76.76 0 0 0-.6.75v3.18a12.7 12.7 0 0 0-3.93 2.26L5.2 5a.75.75 0 0 0-.38-.1.77.77 0 0 0-.57.25 15.9 15.9 0 0 0-3.53 6.1.78.78 0 0 0 .35.91l2.75 1.59a12.3 12.3 0 0 0 0 4.52l-2.75 1.58a.79.79 0 0 0-.35.9 16 16 0 0 0 3.53 6.11.8.8 0 0 0 .57.25.7.7 0 0 0 .38-.11L8 25.42a12.3 12.3 0 0 0 3.92 2.26v3.18a.77.77 0 0 0 .61.75A16.2 16.2 0 0 0 16 32a16 16 0 0 0 3.53-.39.76.76 0 0 0 .6-.75v-3.18a12.5 12.5 0 0 0 3.92-2.26L26.8 27a.79.79 0 0 0 1-.15 16 16 0 0 0 3.53-6.11.8.8 0 0 0-.36-.9l-2.75-1.59a12.8 12.8 0 0 0 0-4.53l2.75-1.59a.78.78 0 0 0 .35-.9 16.1 16.1 0 0 0-3.53-6.1.76.76 0 0 0-.57-.26.73.73 0 0 0-.42.13l-2.75 1.57a12.3 12.3 0 0 0-3.92-2.26V1.14a.77.77 0 0 0-.61-.75A16.2 16.2 0 0 0 16 0m0 21a5 5 0 1 1 5-5 5 5 0 0 1-5 5", 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 2a14 14 0 0 1 2.13.16v3.57l1.34.47a10.2 10.2 0 0 1 3.27 1.89l1.08.91 1.23-.71 1.86-1.08a14 14 0 0 1 2.14 3.69L27.18 12l-1.18.7.26 1.39a10.6 10.6 0 0 1 0 3.8L26 19.28l1.23.71 1.88 1.09a14.2 14.2 0 0 1-2.14 3.69l-1.86-1.08-1.28-.69-1.07.92a10.6 10.6 0 0 1-3.3 1.9l-1.33.47v3.57A14 14 0 0 1 16 30a14 14 0 0 1-2.13-.16v-3.57l-1.34-.47a10.2 10.2 0 0 1-3.27-1.9L8.18 23 7 23.69l-1.91 1.08A14.1 14.1 0 0 1 3 21.08L4.82 20l1.23-.71-.26-1.39a10.6 10.6 0 0 1 0-3.8l.26-1.39L4.82 12 3 10.92a14.5 14.5 0 0 1 2.08-3.69l1.86 1.08L8.16 9l1.08-.9a10.6 10.6 0 0 1 3.3-1.9l1.33-.47V2.16A14 14 0 0 1 16 2m0 21a7 7 0 1 0-7-7 7 7 0 0 0 7 7m0-23a16 16 0 0 0-3.53.39.76.76 0 0 0-.6.75v3.18a12.7 12.7 0 0 0-3.93 2.26L5.2 5a.75.75 0 0 0-.38-.1.77.77 0 0 0-.57.25 15.9 15.9 0 0 0-3.53 6.1.78.78 0 0 0 .35.91l2.75 1.59a12.3 12.3 0 0 0 0 4.52l-2.75 1.58a.79.79 0 0 0-.35.9 16 16 0 0 0 3.53 6.11.8.8 0 0 0 .57.25.7.7 0 0 0 .38-.11L8 25.42a12.3 12.3 0 0 0 3.92 2.26v3.18a.77.77 0 0 0 .61.75A16.2 16.2 0 0 0 16 32a16 16 0 0 0 3.53-.39.76.76 0 0 0 .6-.75v-3.18a12.5 12.5 0 0 0 3.92-2.26L26.8 27a.79.79 0 0 0 1-.15 16 16 0 0 0 3.53-6.11.8.8 0 0 0-.36-.9l-2.75-1.59a12.8 12.8 0 0 0 0-4.53l2.75-1.59a.78.78 0 0 0 .35-.9 16.1 16.1 0 0 0-3.53-6.1.76.76 0 0 0-.57-.26.73.73 0 0 0-.42.13l-2.75 1.57a12.3 12.3 0 0 0-3.92-2.26V1.14a.77.77 0 0 0-.61-.75A16.2 16.2 0 0 0 16 0m0 21a5 5 0 1 1 5-5 5 5 0 0 1-5 5", fill: fill !== null && fill !== void 0 ? fill : "currentColor" })] }));
 };
 
 export { SettingsIcon };

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

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

package/dist/components/Icon/TickAltIcon.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 TickAltIcon = ({ alt, className, fill, ...props }) => {
-    const id = useId();
+const TickAltIcon = ({ 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": "tick-alt",
         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: "M12.7 22a1 1 0 0 1-.71-.29L8.3 18a1 1 0 0 1 0-1.42 1 1 0 0 1 1.41 0l3 3 9.41-9.38a1 1 0 0 1 1.42 0 1 1 0 0 1 0 1.41L13.4 21.69a1 1 0 0 1-.7.31", 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: "M12.7 22a1 1 0 0 1-.71-.29L8.3 18a1 1 0 0 1 0-1.42 1 1 0 0 1 1.41 0l3 3 9.41-9.38a1 1 0 0 1 1.42 0 1 1 0 0 1 0 1.41L13.4 21.69a1 1 0 0 1-.7.31", 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 { TickAltIcon };

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

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

package/dist/components/Icon/TickIcon.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 TickIcon = ({ alt, className, fill, ...props }) => {
-    const id = useId();
+const TickIcon = ({ 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": "tick",
         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: "M10.41 26a1 1 0 0 1-.71-.3l-6.42-6.59a1 1 0 0 1 1.44-1.39l5.69 5.85L27.28 6.3a1 1 0 1 1 1.44 1.4l-17.59 18a1 1 0 0 1-.72.3", 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.41 26a1 1 0 0 1-.71-.3l-6.42-6.59a1 1 0 0 1 1.44-1.39l5.69 5.85L27.28 6.3a1 1 0 1 1 1.44 1.4l-17.59 18a1 1 0 0 1-.72.3", fill: fill !== null && fill !== void 0 ? fill : "currentColor" })] }));
 };
 
 export { TickIcon };

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

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

package/dist/components/Icon/VanIcon.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 VanIcon = ({ alt, className, fill, ...props }) => {
-    const id = useId();
+const VanIcon = ({ 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": "van",
         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.05 3H9.8a1 1 0 0 0-1 1v.2H3.06a1 1 0 0 0-1 .86L.89 12.64a1 1 0 0 0-.89 1v10a1 1 0 0 0 1 1h3a5 5 0 0 0 9.9 0H18a5 5 0 0 0 9.89 0h3.21a1 1 0 0 0 .72-.3 1 1 0 0 0 .18-.72V4a1 1 0 0 0-.95-1M3.91 6.24H8.8v6.38H2.93ZM8.92 27A3 3 0 0 1 6 24.71a2.9 2.9 0 0 1-.12-.83 3.1 3.1 0 0 1 .25-1.22 3 3 0 0 1 5.53 0 3.3 3.3 0 0 1 .24 1.22 3.3 3.3 0 0 1-.11.83A3 3 0 0 1 8.92 27M23 27a3 3 0 0 1-2.89-2.24 2.9 2.9 0 0 1-.12-.83 3.1 3.1 0 0 1 .25-1.22 3 3 0 0 1 5.53 0 3.3 3.3 0 0 1 .23 1.17 3.3 3.3 0 0 1-.11.83A3 3 0 0 1 23 27m4.87-4.29a5 5 0 0 0-9.74 0H13.8a5 5 0 0 0-9.75 0H2v-8h7.8a1 1 0 0 0 1-1V5.05H30v17.61Z", 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.05 3H9.8a1 1 0 0 0-1 1v.2H3.06a1 1 0 0 0-1 .86L.89 12.64a1 1 0 0 0-.89 1v10a1 1 0 0 0 1 1h3a5 5 0 0 0 9.9 0H18a5 5 0 0 0 9.89 0h3.21a1 1 0 0 0 .72-.3 1 1 0 0 0 .18-.72V4a1 1 0 0 0-.95-1M3.91 6.24H8.8v6.38H2.93ZM8.92 27A3 3 0 0 1 6 24.71a2.9 2.9 0 0 1-.12-.83 3.1 3.1 0 0 1 .25-1.22 3 3 0 0 1 5.53 0 3.3 3.3 0 0 1 .24 1.22 3.3 3.3 0 0 1-.11.83A3 3 0 0 1 8.92 27M23 27a3 3 0 0 1-2.89-2.24 2.9 2.9 0 0 1-.12-.83 3.1 3.1 0 0 1 .25-1.22 3 3 0 0 1 5.53 0 3.3 3.3 0 0 1 .23 1.17 3.3 3.3 0 0 1-.11.83A3 3 0 0 1 23 27m4.87-4.29a5 5 0 0 0-9.74 0H13.8a5 5 0 0 0-9.75 0H2v-8h7.8a1 1 0 0 0 1-1V5.05H30v17.61Z", fill: fill !== null && fill !== void 0 ? fill : "currentColor" })] }));
 };
 
 export { VanIcon };

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

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

package/dist/components/Icon/WarningIcon.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 WarningIcon = ({ alt, className, fill, ...props }) => {
-    const id = useId();
+const WarningIcon = ({ 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": "warning",
         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: "M2.35 28.08 16.06 4.46l13.71 23.62Zm29.32-.7L17.56 3.07A1.73 1.73 0 0 0 16.06 2a1.94 1.94 0 0 0-1.5 1.1L.35 27.38C-.45 28.77.15 30 1.85 30h28.32a1.6 1.6 0 0 0 1.5-2.62", fill: fill !== null && fill !== void 0 ? fill : "currentColor" }), jsx("path", { d: "M14.52 24.19A1.44 1.44 0 0 1 15 23.1a1.54 1.54 0 0 1 1.13-.46 1.63 1.63 0 0 1 1.12.44 1.39 1.39 0 0 1 .48 1.07 1.48 1.48 0 0 1-.47 1.1 1.62 1.62 0 0 1-1.74.34 1.6 1.6 0 0 1-.51-.32 1.3 1.3 0 0 1-.35-.48 1.3 1.3 0 0 1-.14-.6m2.8-3h-2.4v-9.71h2.4Z", 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: "M2.35 28.08 16.06 4.46l13.71 23.62Zm29.32-.7L17.56 3.07A1.73 1.73 0 0 0 16.06 2a1.94 1.94 0 0 0-1.5 1.1L.35 27.38C-.45 28.77.15 30 1.85 30h28.32a1.6 1.6 0 0 0 1.5-2.62", fill: fill !== null && fill !== void 0 ? fill : "currentColor" }), jsx("path", { d: "M14.52 24.19A1.44 1.44 0 0 1 15 23.1a1.54 1.54 0 0 1 1.13-.46 1.63 1.63 0 0 1 1.12.44 1.39 1.39 0 0 1 .48 1.07 1.48 1.48 0 0 1-.47 1.1 1.62 1.62 0 0 1-1.74.34 1.6 1.6 0 0 1-.51-.32 1.3 1.3 0 0 1-.35-.48 1.3 1.3 0 0 1-.14-.6m2.8-3h-2.4v-9.71h2.4Z", fill: fill !== null && fill !== void 0 ? fill : "currentColor" })] }));
 };
 
 export { WarningIcon };

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

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

package/dist/components/Icon/WriteIcon.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 WriteIcon = ({ alt, className, fill, ...props }) => {
-    const id = useId();
+const WriteIcon = ({ 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": "write",
         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: "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", fill: fill !== null && fill !== void 0 ? fill : "currentColor" }), jsx("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", fill: fill !== null && fill !== void 0 ? fill : "currentColor" }), jsx("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", fill: fill !== null && fill !== void 0 ? fill : "currentColor" }), jsx("path", { d: "M31.33 2.7 29.21.58a2.06 2.06 0 0 0-2.83 0L11.44 15.52a2.1 2.1 0 0 0-.54 1l-.09.41-.54 2.34a2.18 2.18 0 0 0 .54 1.87 2 2 0 0 0 1.4.58 1.8 1.8 0 0 0 .46-.05l2.75-.67a2.1 2.1 0 0 0 1-.54L31.33 5.53a2 2 0 0 0 0-2.83M15 19.06l-2.75.63.62-2.75 6.82-6.81L23.81 6l1.54-1.54L27.79 2l2.13 2.12Z", 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: "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", fill: fill !== null && fill !== void 0 ? fill : "currentColor" }), jsx("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", fill: fill !== null && fill !== void 0 ? fill : "currentColor" }), jsx("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", fill: fill !== null && fill !== void 0 ? fill : "currentColor" }), jsx("path", { d: "M31.33 2.7 29.21.58a2.06 2.06 0 0 0-2.83 0L11.44 15.52a2.1 2.1 0 0 0-.54 1l-.09.41-.54 2.34a2.18 2.18 0 0 0 .54 1.87 2 2 0 0 0 1.4.58 1.8 1.8 0 0 0 .46-.05l2.75-.67a2.1 2.1 0 0 0 1-.54L31.33 5.53a2 2 0 0 0 0-2.83M15 19.06l-2.75.63.62-2.75 6.82-6.81L23.81 6l1.54-1.54L27.79 2l2.13 2.12Z", fill: fill !== null && fill !== void 0 ? fill : "currentColor" })] }));
 };
 
 export { WriteIcon };

package/dist/components/Image/Image.d.ts

@@ -1,4 +1,4 @@
-import type { HTMLAttributes, JSX } from "react";
+import type { HTMLAttributes, JSX, Ref } from "react";
 export interface ImageProps extends HTMLAttributes<HTMLImageElement> {
     /** Specify text to describe the image. Refer to Experience Library guidelines on writing good alt text. */
     alt: string;
@@ -6,10 +6,12 @@ export interface ImageProps extends HTMLAttributes<HTMLImageElement> {
     crop?: "square" | "wide" | "none";
     /** **(Optional)** Specify the height of the image. */
     height?: string;
+    /** **(Optional)** Specify a custom React ref for this component. */
+    ref?: Ref<HTMLImageElement>;
     /** Specify the Image source URL. */
     src: string;
     /** **(Optional)** Specify the width of the image. */
     width?: string;
 }
-export declare const Image: ({ alt, crop, height, src, width, ...props }: ImageProps) => JSX.Element;
+export declare const Image: ({ alt, crop, height, ref, src, width, ...props }: ImageProps) => JSX.Element;
 export default Image;

package/dist/components/Image/Image.js

@@ -20,7 +20,7 @@ const getContentfulParams = (src, width, height) => {
         width: (_b = url.searchParams.get("w")) !== null && _b !== void 0 ? _b : width,
     };
 };
-const Image = ({ alt, crop, height, src, width = "640", ...props }) => {
+const Image = ({ alt, crop, height, ref, src, width = "640", ...props }) => {
     let params = { height, src, width };
     if (src.includes("images.ctfassets.net")) {
         params = getContentfulParams(src, width, height);
@@ -30,7 +30,7 @@ const Image = ({ alt, crop, height, src, width = "640", ...props }) => {
         height: params.height,
         width: params.width,
     };
-    return (jsx("picture", { children: jsx("img", { alt: alt, loading: "lazy", src: params.src, ...dimensions, ...props }) }));
+    return (jsx("picture", { children: jsx("img", { alt: alt, loading: "lazy", src: params.src, ...dimensions, ...props, ref: ref }) }));
 };
 
 export { Image, Image as default };

package/dist/components/Pill/Pill.d.ts

@@ -1,4 +1,4 @@
-import type { ForwardRefExoticComponent, HTMLAttributes, JSX } from "react";
+import type { ForwardRefExoticComponent, HTMLAttributes, JSX, Ref } from "react";
 import React from "react";
 import { StandardSizes } from "src/types";
 export interface PillProps extends HTMLAttributes<HTMLAnchorElement> {
@@ -10,6 +10,8 @@ export interface PillProps extends HTMLAttributes<HTMLAnchorElement> {
     className?: string;
     /** **(Optional)** Specify the URL that the Pill component will link to when clicked. */
     href?: string;
+    /** **(Optional)** Specify a custom React ref for this component. */
+    ref?: Ref<HTMLElement>;
     /** **(Optional)** Specify the Pill size. */
     size?: StandardSizes;
 }
@@ -20,7 +22,7 @@ interface PillBadgeProps extends HTMLAttributes<HTMLSpanElement> {
     className?: string;
 }
 export declare const Pill: {
-    ({ as, children, className, href, size, ...props }: PillProps): JSX.Element;
+    ({ as, children, className, href, ref, size, ...props }: PillProps): JSX.Element;
     Badge: {
         ({ children, className }: PillBadgeProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;

package/dist/components/Pill/Pill.js

@@ -1,26 +1,25 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import React from 'react';
+import { useSlots } from '../../hooks/useSlots.js';
 import { hasUserBg } from '../../utils/index.js';
-import { getSlots } from '../../utils/slots.js';
 
 const componentSlots = {
     Children: null,
     PillBadge: null,
 };
-const Pill = ({ as, children, className, href, size = "md", ...props }) => {
-    let element = href ? "a" : "span";
-    const slots = getSlots(componentSlots, children);
-    if (as) {
-        element = as;
-    }
+const Pill = ({ as, children, className, href, ref, size = "md", ...props }) => {
+    const element = as !== null && as !== void 0 ? as : (href ? "a" : "span");
+    const slots = useSlots(componentSlots, children);
     const componentProps = {
         className: clsx("coop-pill", !hasUserBg(className) && "bg-tint-grey", className),
         "data-size": size.length && size !== "md" ? size : undefined,
         href,
         ...props,
     };
-    return React.createElement(element, { ...componentProps }, slots.PillBadge, slots.Children);
+    // https://github.com/facebook/react/issues/34775
+    // eslint-disable-next-line react-hooks/refs
+    return React.createElement(element, { ...componentProps, ref }, slots.PillBadge, slots.Children);
 };
 const PillBadge = ({ children, className }) => {
     return (jsx("span", { className: clsx("coop-pill--badge", !hasUserBg(className) && "bg-offer-red", className), children: children }));

package/dist/components/Radio/Radio.d.ts

@@ -0,0 +1,20 @@
+import { type InputHTMLAttributes, type JSX, Ref } from "react";
+import { StandardSizes } from "../../types";
+export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+    className?: string;
+    /** **(Optional)** Specify whether the Radio should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility.  */
+    disabled?: boolean;
+    /** **(Optional)** Specify the Radio error state. */
+    error?: boolean;
+    /** **(Optional)** Specify the Radio id. Will be auto-generated if not set. */
+    id?: string;
+    /** Specify the Radio name. */
+    name: string;
+    /** **(Optional)** Specify a custom React ref for this component. */
+    ref?: Ref<HTMLInputElement>;
+    /** **(Optional)** Specify the Radio size. */
+    size?: StandardSizes;
+}
+export declare const Radio: ({ className, disabled, error, id, name, ref, size, ...props }: RadioProps) => JSX.Element;
+export default Radio;

package/dist/components/Radio/Radio.js

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { useId } from '../../hooks/useId.js';
+
+const Radio = ({ className, disabled, error = false, id, name, ref, size = "md", ...props }) => {
+    const uid = useId(id);
+    const componentProps = {
+        className: clsx("coop-radio", className),
+        "data-error": error || undefined,
+        "data-size": size.length && size !== "md" ? size : undefined,
+        disabled,
+        id: uid,
+        name,
+        type: "radio",
+        ...props,
+    };
+    //const formItemProps = { "aria-disabled": disabled ? true : undefined }
+    return jsx("input", { ...componentProps, ref: ref });
+};
+
+export { Radio, Radio as default };

package/dist/components/Radio/index.d.ts

@@ -0,0 +1,4 @@
+import Radio from "./Radio";
+export default Radio;
+export { Radio };
+export * from "./Radio";

package/dist/components/{SearchBox/SearchBox.d.ts → Searchbox/Searchbox.d.ts}

@@ -1,8 +1,8 @@
-import type { InputHTMLAttributes, JSX } from "react";
+import type { InputHTMLAttributes, JSX, Ref } from "react";
 import React from "react";
-import { StandardSizes } from "../../../src/types";
+import { StandardSizes } from "../../types";
 import { type ButtonProps } from "../Button";
-export interface SearchBoxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+export interface SearchboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
     /** **(Optional)** Specify a server endpoint to submit the form. Will be ignored if onSubmit is also set. */
     action?: string;
     /** **(Optional)** Specify props to forward to the Button element. Use `label` to set Button text. */
@@ -19,14 +19,16 @@ export interface SearchBoxProps extends Omit<InputHTMLAttributes<HTMLInputElemen
     labelVisible?: boolean;
     /** **(Optional)** Specify the TextInput name, also used as the URL search parameter. Defaults to `query`. */
     name?: string;
-    /** **(Optional)** Callback to run when the form is submitted. If this is an async function, it will be awaited and the SearchBox will be in a pending state until the promise is resolved. */
+    /** **(Optional)** Callback to run when the form is submitted. If this is an async function, it will be awaited and the Searchbox will be in a pending state until the promise is resolved. */
     onSubmit?: React.FormEventHandler<HTMLElement> | undefined;
     /** **(Optional)** Specify the TextInput placeholder text Do not use in place of a form label. */
     placeholder?: string;
-    /** **(Optional)** Specify the SearchBox size. */
+    /** **(Optional)** Specify a custom React ref for this component. */
+    ref?: Ref<HTMLFormElement>;
+    /** **(Optional)** Specify the Searchbox size. */
     size?: StandardSizes;
-    /** **(Optional)** Specify the SearchBox variant. */
+    /** **(Optional)** Specify the Searchbox variant. */
     variant?: "green" | "blue" | "white" | "grey" | "green-ghost" | "blue-ghost" | "white-ghost" | "grey-ghost";
 }
-export declare const SearchBox: ({ action, "aria-placeholder": ariaPlaceholder, autoCapitalize, autoComplete, button, className, id, label, labelVisible, name, onSubmit, placeholder, size, variant, ...props }: SearchBoxProps) => JSX.Element;
-export default SearchBox;
+export declare const Searchbox: ({ action, "aria-placeholder": ariaPlaceholder, autoCapitalize, autoComplete, button, className, id, label, labelVisible, name, onSubmit, placeholder, ref, size, variant, ...props }: SearchboxProps) => JSX.Element;
+export default Searchbox;

package/dist/components/{SearchBox/SearchBox.js → Searchbox/Searchbox.js}

@@ -2,7 +2,8 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import React, { useState, useId, useCallback } from 'react';
+import React, { useState, useCallback } from 'react';
+import { useId } from '../../hooks/useId.js';
 import { Button } from '../Button/Button.js';
 import { Label } from '../FieldMarkers/Label.js';
 import { SearchIcon } from '../Icon/SearchIcon.js';
@@ -12,11 +13,10 @@ const defaultButtonProps = {
     label: React.createElement(SearchIcon, { alt: "Search", stroke: "currentColor", strokeWidth: 2 }),
     loadingText: "",
 };
-const SearchBox = ({ action, "aria-placeholder": ariaPlaceholder, autoCapitalize = "off", autoComplete = "off", button = defaultButtonProps, className, id, label, labelVisible = false, name = "query", onSubmit, placeholder, size = "md", variant = "green", ...props }) => {
+const Searchbox = ({ action, "aria-placeholder": ariaPlaceholder, autoCapitalize = "off", autoComplete = "off", button = defaultButtonProps, className, id, label, labelVisible = false, name = "query", onSubmit, placeholder, ref, size = "md", variant = "green", ...props }) => {
     var _a, _b;
     const [isPending, setIsPending] = useState(false);
-    const internalId = useId();
-    id = id !== null && id !== void 0 ? id : internalId;
+    const uid = useId(id);
     const handleSubmit = useCallback(async (event) => {
         event.preventDefault();
         if (isPending || !onSubmit)
@@ -31,30 +31,35 @@ const SearchBox = ({ action, "aria-placeholder": ariaPlaceholder, autoCapitalize
     }, [onSubmit, isPending]);
     const formProps = {
         action: action !== null && action !== void 0 ? action : undefined,
-        className: clsx("coop-search-box", className),
+        className: clsx("coop-searchbox", className),
         "data-size": size && size !== "md" ? size : undefined,
         "data-variant": variant.length && variant !== "green" ? variant : undefined,
+        id: uid,
         onSubmit: onSubmit ? handleSubmit : undefined,
     };
     const buttonProps = {
         className: button === null || button === void 0 ? void 0 : button.className,
         isLoading: isPending,
         loadingText: (_a = button === null || button === void 0 ? void 0 : button.loadingText) !== null && _a !== void 0 ? _a : "",
-        size: size,
-        variant: variant,
+        size,
+        variant,
     };
     const inputProps = {
         "aria-placeholder": (_b = placeholder !== null && placeholder !== void 0 ? placeholder : ariaPlaceholder) !== null && _b !== void 0 ? _b : undefined,
         autoCapitalize,
         autoComplete,
-        id,
+        id: uid + "--input",
         name,
         placeholder,
-        size: size,
+        size,
         type: "search",
         ...props,
     };
-    return (jsxs("form", { ...formProps, children: [label && (jsx(Label, { htmlFor: id, isVisible: labelVisible, children: label })), jsxs("div", { className: "coop-search-box--inner", children: [jsx(TextInput, { ...inputProps }), jsx(Button, { ...buttonProps, children: button.label })] })] }));
+    const labelProps = {
+        htmlFor: uid + "--input",
+        isVisible: labelVisible,
+    };
+    return (jsxs("form", { ...formProps, ref: ref, children: [label && jsx(Label, { ...labelProps, children: label }), jsxs("div", { className: "coop-searchbox--inner", children: [jsx(TextInput, { ...inputProps }), jsx(Button, { ...buttonProps, children: button.label })] })] }));
 };
 
-export { SearchBox, SearchBox as default };
+export { Searchbox, Searchbox as default };

package/dist/components/Searchbox/index.d.ts

@@ -0,0 +1,4 @@
+import Searchbox from "./Searchbox";
+export default Searchbox;
+export { Searchbox };
+export * from "./Searchbox";

package/dist/components/Signpost/Signpost.d.ts

@@ -1,9 +1,9 @@
-import type { AnchorHTMLAttributes, ForwardRefExoticComponent, HTMLAttributes, JSX } from "react";
+import type { ForwardRefExoticComponent, HTMLAttributes, JSX, Ref } from "react";
 import React from "react";
 import { ImageProps } from "../Image";
 export interface SignpostProps extends HTMLAttributes<HTMLDivElement> {
     /** **(Optional)** Specify a custom element to override default `a`. */
-    as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string;
+    as?: React.FC<any> | ForwardRefExoticComponent<any> | string;
     /** Main content inside the component. It can be any valid JSX or string. */
     children: React.ReactNode;
     /** **(Optional)** Specify additional CSS classes to be applied to the component. */
@@ -11,9 +11,11 @@ export interface SignpostProps extends HTMLAttributes<HTMLDivElement> {
     /** **(Optional)** Specify the level of the Signpost heading. */
     headingLevel?: "h2" | "h3" | "h4" | "h5" | "h6";
     /** Specify the URL that the Signpost component will link to when clicked. */
-    href: string;
+    href?: string;
     /** **(Optional)** Specify properties of the Signpost Image. */
     image?: ImageProps;
+    /** **(Optional)** Specify a custom React ref for this component. */
+    ref?: Ref<HTMLDivElement>;
 }
-export declare const Signpost: ({ as, children, className, headingLevel, href, image, ...props }: SignpostProps) => JSX.Element;
+export declare const Signpost: ({ as, children, className, headingLevel, href, image, ref, ...props }: SignpostProps) => JSX.Element;
 export default Signpost;

package/dist/components/Signpost/Signpost.js

@@ -4,16 +4,13 @@ import React from 'react';
 import { ChevronRightIcon } from '../Icon/ChevronRightIcon.js';
 import { Image } from '../Image/Image.js';
 
-const Signpost = ({ as, children, className, headingLevel = "h3", href, image, ...props }) => {
-    let element = "a";
-    if (as) {
-        element = as;
-    }
+const Signpost = ({ as, children, className, headingLevel = "h3", href, image, ref, ...props }) => {
+    const element = as !== null && as !== void 0 ? as : "a";
     const componentProps = {
         className: clsx("coop-signpost", className),
         ...props,
     };
-    return (jsxs("div", { ...componentProps, children: [image && jsx(Image, { crop: "wide", ...image }), React.createElement(element, { href }, jsxs("div", { className: "coop-signpost--content", children: [React.createElement(headingLevel, { className: "coop-signpost--heading" }, children), jsx("span", { "aria-hidden": "true", className: "coop-signpost--icon", role: "presentation", children: jsx(ChevronRightIcon, {}) })] }))] }));
+    return (jsxs("div", { ...componentProps, ref: ref, children: [image && jsx(Image, { crop: "wide", ...image }), React.createElement(element, { href }, jsxs("div", { className: "coop-signpost--content", children: [React.createElement(headingLevel, { className: "coop-signpost--heading" }, children), jsx("span", { "aria-hidden": "true", className: "coop-signpost--icon", role: "presentation", children: jsx(ChevronRightIcon, {}) })] }))] }));
 };
 
 export { Signpost, Signpost as default };

package/dist/components/SkipNav/SkipNav.d.ts

@@ -1,4 +1,4 @@
-import type { HTMLAttributes, JSX } from "react";
+import type { HTMLAttributes, JSX, Ref } from "react";
 interface SkipNavLink {
     href: string;
     label: string;
@@ -11,6 +11,8 @@ export interface SkipNavProps extends HTMLAttributes<HTMLDivElement> {
     /** **(Optional)** Specify links to show in the SkipNav.
      * Each item needs a `href` and `label`. Defaults to a single link anchored to `#main`. */
     links?: SkipNavLink[];
+    /** **(Optional)** Specify a custom React ref for this component. */
+    ref?: Ref<HTMLDivElement>;
 }
-export declare const SkipNav: ({ className, isVisible, links, ...props }: SkipNavProps) => JSX.Element;
+export declare const SkipNav: ({ className, isVisible, links, ref, ...props }: SkipNavProps) => JSX.Element;
 export default SkipNav;

package/dist/components/SkipNav/SkipNav.js

@@ -2,13 +2,13 @@ import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 
 const defaultLinks = [{ href: "#main", label: "Skip to main content" }];
-const SkipNav = ({ className, isVisible = false, links = defaultLinks, ...props }) => {
+const SkipNav = ({ className, isVisible = false, links = defaultLinks, ref, ...props }) => {
     const componentProps = {
         className: clsx("coop-skip-nav", className),
         ...props,
     };
     const navLinks = links.length > 0 ? links : defaultLinks;
-    return (jsx("nav", { ...componentProps, children: jsx("ul", { children: navLinks.map((link) => {
+    return (jsx("nav", { ...componentProps, ref: ref, children: jsx("ul", { children: navLinks.map((link) => {
                 const linkProps = {
                     "data-visible": isVisible,
                     href: link.href,

package/dist/components/Squircle/Squircle.d.ts

@@ -1,11 +1,13 @@
-import type { HTMLAttributes, JSX } from "react";
+import type { HTMLAttributes, JSX, Ref } from "react";
 export interface SquircleProps extends HTMLAttributes<HTMLDivElement> {
     /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
     children?: React.ReactNode;
     /** **(Optional)** Specify additional CSS classes to be applied to the component. */
     className?: string;
+    /** **(Optional)** Specify a custom React ref for this component. */
+    ref?: Ref<HTMLDivElement>;
     /** **(Optional)** Specify the Squircle size. */
     size?: "sm" | "md" | "lg";
 }
-export declare const Squircle: ({ children, className, size, ...props }: SquircleProps) => JSX.Element;
+export declare const Squircle: ({ children, className, ref, size, ...props }: SquircleProps) => JSX.Element;
 export default Squircle;