@coopdigital/react 0.46.0 → 0.48.0

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

@@ -8,19 +8,18 @@ const componentSlots = {
     Children: null,
     PillBadge: null,
 };
-const Pill = ({ as, children, className, href, size = "md", ...props }) => {
-    let element = href ? "a" : "span";
+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);
-    if (as) {
-        element = as;
-    }
     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

@@ -1,5 +1,5 @@
-import { type InputHTMLAttributes, type JSX } from "react";
-import { StandardSizes } from "src/types";
+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;
@@ -11,8 +11,10 @@ export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     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, size, ...props }: RadioProps) => JSX.Element;
+export declare const Radio: ({ className, disabled, error, id, name, ref, size, ...props }: RadioProps) => JSX.Element;
 export default Radio;

package/dist/components/Radio/Radio.js

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

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

@@ -1,4 +1,4 @@
-import type { InputHTMLAttributes, JSX } from "react";
+import type { InputHTMLAttributes, JSX, Ref } from "react";
 import React from "react";
 import { StandardSizes } from "../../types";
 import { type ButtonProps } from "../Button";
@@ -23,10 +23,12 @@ export interface SearchboxProps extends Omit<InputHTMLAttributes<HTMLInputElemen
     onSubmit?: React.FormEventHandler<HTMLElement> | undefined;
     /** **(Optional)** Specify the TextInput placeholder text Do not use in place of a form label. */
     placeholder?: string;
+    /** **(Optional)** Specify a custom React ref for this component. */
+    ref?: Ref<HTMLFormElement>;
     /** **(Optional)** Specify the Searchbox size. */
     size?: StandardSizes;
     /** **(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 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

@@ -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)
@@ -34,27 +34,32 @@ const Searchbox = ({ action, "aria-placeholder": ariaPlaceholder, autoCapitalize
         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-searchbox--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 };

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,46 @@
+import type { JSX, OptgroupHTMLAttributes, OptionHTMLAttributes, ReactNode, Ref, SelectHTMLAttributes } from "react";
+import { StandardSizes } from "../../../src/types";
+export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "size"> {
+    /** **(Optional)** Options inside the Select. This should be a set of `Select.Option` or `Select.OptionGroup` components.  */
+    children?: ReactNode;
+    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+    className?: string;
+    /** **(Optional)** Specify whether the Select should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility. */
+    disabled?: boolean;
+    /** **(Optional)** Specify the Select error state. */
+    error?: boolean;
+    /** **(Optional)** Specify the Select id. Will be auto-generated if not set. */
+    id?: string;
+    /** Specify the Select name. */
+    name: string;
+    /** **(Optional)** Specify a custom React ref for this component. */
+    ref?: Ref<HTMLSelectElement>;
+    /** **(Optional)** Specify the Select size. */
+    size?: StandardSizes;
+}
+interface SelectOptionGroupProps extends OptgroupHTMLAttributes<HTMLOptGroupElement> {
+    /** **(Optional)** Main content inside the Select option. It can be any valid JSX or string. */
+    children?: ReactNode;
+    /** Specify the Select option group label. */
+    label: string;
+}
+interface SelectOptionProps extends OptionHTMLAttributes<HTMLOptionElement> {
+    /** **(Optional)** Main content inside the Select option. It can be any valid JSX or string. */
+    children?: ReactNode;
+    /** **(Optional)** Specify additional CSS classes to be applied to the Select option. */
+    className?: string;
+    /** Value of Select option. */
+    value: string;
+}
+export declare const Select: {
+    ({ children, className, disabled, error, id, name, ref, size, ...props }: SelectProps): JSX.Element;
+    OptionGroup: {
+        ({ children, ...props }: SelectOptionGroupProps): JSX.Element;
+        displayName: string;
+    };
+    Option: {
+        ({ children, className, ...props }: SelectOptionProps): JSX.Element;
+        displayName: string;
+    };
+};
+export default Select;

package/dist/components/Select/Select.js

@@ -0,0 +1,29 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { useId } from '../../hooks/useId.js';
+
+const Select = ({ children, className, disabled, error, id, name, ref, size = "md", ...props }) => {
+    const uid = useId(id);
+    const componentProps = {
+        className: clsx("coop-select", "coop-field-element", className),
+        "data-error": error !== null && error !== void 0 ? error : undefined,
+        "data-size": size.length && size !== "md" ? size : undefined,
+        disabled,
+        id: uid,
+        name,
+        ...props,
+    };
+    return (jsx("select", { ...componentProps, ref: ref, children: children }));
+};
+const SelectOptionGroup = ({ children, ...props }) => {
+    return jsx("optgroup", { ...props, children: children });
+};
+const SelectOption = ({ children, className, ...props }) => {
+    return (jsx("option", { className: clsx("coop-select--option", className), ...props, children: children }));
+};
+SelectOptionGroup.displayName = "Select.OptionGroup";
+SelectOption.displayName = "Select.Option";
+Select.OptionGroup = SelectOptionGroup;
+Select.Option = SelectOption;
+
+export { Select, Select as default };

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

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

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;

package/dist/components/Squircle/Squircle.js

@@ -2,13 +2,13 @@ import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { hasUserBg } from '../../utils/index.js';
 
-const Squircle = ({ children, className, size = "lg", ...props }) => {
+const Squircle = ({ children, className, ref, size = "lg", ...props }) => {
     const componentProps = {
         className: clsx("coop-squircle", !hasUserBg(className) && "bg-offer-red", className),
         "data-size": size.length && size !== "lg" ? size : undefined,
         ...props,
     };
-    return (jsx("figure", { ...componentProps, children: jsx("figcaption", { children: children }) }));
+    return (jsx("figure", { ...componentProps, ref: ref, children: jsx("figcaption", { children: children }) }));
 };
 
 export { Squircle, Squircle as default };

package/dist/components/Tag/Tag.d.ts

@@ -1,16 +1,18 @@
-import type { AnchorHTMLAttributes, ForwardRefExoticComponent, HTMLAttributes, JSX } from "react";
+import type { ForwardRefExoticComponent, HTMLAttributes, JSX, Ref } from "react";
 import React from "react";
 export interface TagProps extends HTMLAttributes<HTMLAnchorElement> {
     /** **(Optional)** Specify a custom element to override default `a` or `span`. */
-    as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string;
+    as?: React.FC<any> | ForwardRefExoticComponent<any> | string;
     /** **(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 the URL that the Tag component will link to when clicked. */
     href?: string;
+    /** **(Optional)** Specify a custom React ref for this component. */
+    ref?: Ref<HTMLElement>;
     /** **(Optional)** Specify the Tag size. */
     size?: "sm" | "md";
 }
-export declare const Tag: ({ as, children, className, href, size, ...props }: TagProps) => JSX.Element;
+export declare const Tag: ({ as, children, className, href, ref, size, ...props }: TagProps) => JSX.Element;
 export default Tag;