@coopdigital/react 0.45.0 → 0.47.0

package/dist/components/AlertBanner/AlertBanner.d.ts

@@ -1,4 +1,4 @@
-import type { HTMLAttributes, JSX, ReactNode } from "react";
+import type { HTMLAttributes, JSX, ReactNode, Ref } from "react";
 export interface AlertBannerProps extends HTMLAttributes<HTMLDivElement> {
     /** **(Optional)** Main content inside the banner. It can be any valid JSX or string. */
     children?: string | ReactNode;
@@ -6,8 +6,10 @@ export interface AlertBannerProps extends HTMLAttributes<HTMLDivElement> {
     className?: string;
     /** Specify the main title of the banner, rendered as a `h2`. */
     heading: string;
+    /** **(Optional)** Specify a custom React ref for this component. */
+    ref?: Ref<HTMLDivElement>;
     /** **(Optional)** Specify the AlertBanner variant. */
     variant?: "black" | "default";
 }
-export declare const AlertBanner: ({ children, className, heading, variant, ...props }: AlertBannerProps) => JSX.Element;
+export declare const AlertBanner: ({ children, className, heading, ref, variant, ...props }: AlertBannerProps) => JSX.Element;
 export default AlertBanner;

package/dist/components/AlertBanner/AlertBanner.js

@@ -1,13 +1,13 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 
-const AlertBanner = ({ children, className, heading, variant = "default", ...props }) => {
+const AlertBanner = ({ children, className, heading, ref, variant = "default", ...props }) => {
     const componentProps = {
         className: clsx("coop-alert-banner", className),
         "data-variant": variant,
         ...props,
     };
-    return (jsx("aside", { ...componentProps, children: jsxs("div", { className: "coop-alert-banner--inner", children: [jsx("h2", { id: "coop-alert-banner--headline", children: heading }), children] }) }));
+    return (jsx("aside", { ...componentProps, ref: ref, children: jsxs("div", { className: "coop-alert-banner--inner", children: [jsx("h2", { id: "coop-alert-banner--headline", children: heading }), children] }) }));
 };
 
 export { AlertBanner, AlertBanner as default };

package/dist/components/Author/Author.d.ts

@@ -1,4 +1,4 @@
-import type { HTMLAttributes, JSX } from "react";
+import type { HTMLAttributes, JSX, Ref } from "react";
 import { ImageProps } from "../Image";
 export interface AuthorProps extends HTMLAttributes<HTMLDivElement> {
     /** **(Optional)** Specify the Author name. */
@@ -11,6 +11,8 @@ export interface AuthorProps extends HTMLAttributes<HTMLDivElement> {
     datePrefix?: string;
     /** **(Optional)** Specify properties of the Author Image. */
     image?: ImageProps;
+    /** **(Optional)** Specify a custom React ref for this component. */
+    ref?: Ref<HTMLDivElement>;
 }
-export declare const Author: ({ author, className, date, datePrefix, image, ...props }: AuthorProps) => JSX.Element;
+export declare const Author: ({ author, className, date, datePrefix, image, ref, ...props }: AuthorProps) => JSX.Element;
 export default Author;

package/dist/components/Author/Author.js

@@ -5,7 +5,7 @@ import { Image } from '../Image/Image.js';
 const Author = ({ author = "Co-op team", className, date, datePrefix = "", image = {
     alt: "",
     src: "https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/coop-logo-inverted.svg",
-}, ...props }) => {
+}, ref, ...props }) => {
     const imageProps = {
         width: "56px",
         ...image,
@@ -14,7 +14,7 @@ const Author = ({ author = "Co-op team", className, date, datePrefix = "", image
         className: clsx("coop-author", className),
         ...props,
     };
-    return (jsxs("div", { ...componentProps, children: [image && jsx(Image, { ...imageProps }), jsxs("div", { className: "coop-author--content", children: [jsxs("span", { children: [datePrefix ? datePrefix + " " : "", date] }), jsxs("span", { children: ["by ", author] })] })] }));
+    return (jsxs("div", { ...componentProps, ref: ref, children: [image && jsx(Image, { ...imageProps }), jsxs("div", { className: "coop-author--content", children: [jsxs("span", { children: [datePrefix ? datePrefix + " " : "", date] }), jsxs("span", { children: ["by ", author] })] })] }));
 };
 
 export { Author, Author as default };

package/dist/components/Button/Button.d.ts

@@ -1,8 +1,8 @@
-import type { AnchorHTMLAttributes, ButtonHTMLAttributes, ForwardRefExoticComponent, JSX } from "react";
+import type { ButtonHTMLAttributes, ForwardRefExoticComponent, JSX, Ref } from "react";
 import React from "react";
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /** **(Optional)** Specify a custom element to override default `a` or `button`. */
-    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. */
@@ -18,11 +18,13 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /** **(Optional)** Specify text to show when the Button is in a loading state. */
     loadingText?: string;
     /** **(Optional)** Callback to run when the button is pressed. If this is an async function, it will be awaited and the button will be in a pending state until the promise is resolved. */
-    onClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+    onClick?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
+    /** **(Optional)** Specify a custom React ref for this component. */
+    ref?: Ref<HTMLElement>;
     /** **(Optional)** Specify the Button size. */
     size?: "sm" | "md" | "lg";
     /** **(Optional)** Specify the Button variant. */
     variant?: "green" | "blue" | "white" | "grey" | "green-ghost" | "blue-ghost" | "white-ghost" | "grey-ghost" | "text";
 }
-export declare const Button: ({ as, children, className, href, isDisabled, isFullWidth, isLoading, loadingText, onClick, size, variant, ...props }: ButtonProps) => JSX.Element;
+export declare const Button: ({ as, children, className, href, isDisabled, isFullWidth, isLoading, loadingText, onClick, ref, size, variant, ...props }: ButtonProps) => JSX.Element;
 export default Button;

package/dist/components/Button/Button.js

@@ -5,11 +5,8 @@ import clsx from 'clsx';
 import React, { useState, useCallback } from 'react';
 import { LoadingIcon } from '../Icon/LoadingIcon.js';
 
-const Button = ({ as, children, className, href, isDisabled = false, isFullWidth = false, isLoading = false, loadingText = "Loading", onClick, size = "md", variant = "green", ...props }) => {
-    let element = href ? "a" : "button";
-    if (as) {
-        element = as;
-    }
+const Button = ({ as, children, className, href, isDisabled = false, isFullWidth = false, isLoading = false, loadingText = "Loading", onClick, ref, size = "md", variant = "green", ...props }) => {
+    const element = as !== null && as !== void 0 ? as : (href ? "a" : "button");
     const [isPending, setIsPending] = useState(false);
     const handleClick = useCallback(async (event) => {
         if (isPending || !onClick)
@@ -31,11 +28,11 @@ const Button = ({ as, children, className, href, isDisabled = false, isFullWidth
         "data-variant": variant !== "text" ? variant : undefined,
         "data-width": isFullWidth ? "full" : undefined,
         href,
-        onClick: handleClick,
+        onClick: onClick ? handleClick : undefined,
         ...props,
     };
     const finalChildren = isPending || isLoading ? (jsxs(Fragment, { children: [loadingText, jsx(LoadingIcon, {})] })) : (children);
-    return React.createElement(element, { ...componentProps }, finalChildren);
+    return React.createElement(element, { ...componentProps, ref }, finalChildren);
 };
 
 export { Button, Button as default };

package/dist/components/Card/Card.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 { ImageProps } from "../Image";
 export interface CardProps extends HTMLAttributes<HTMLDivElement> {
@@ -16,6 +16,8 @@ export interface CardProps extends HTMLAttributes<HTMLDivElement> {
     imagePosition?: "left" | "right";
     /** **(Optional)** Specify the orientation of the Card. */
     orientation?: "vertical" | "horizontal";
+    /** **(Optional)** Specify a custom React ref for this component. */
+    ref?: Ref<HTMLDivElement>;
 }
 interface CardLabelProps extends HTMLAttributes<HTMLSpanElement> {
     /** **(Optional)** Content inside the Label. */
@@ -47,7 +49,7 @@ interface CardBadgeProps extends HTMLAttributes<HTMLDivElement> {
 }
 type CardImageProps = ImageProps;
 export declare const Card: {
-    ({ chevron, children, className, href, hrefAs, imagePosition, orientation, ...props }: CardProps): JSX.Element;
+    ({ chevron, children, className, href, hrefAs, imagePosition, orientation, ref, ...props }: CardProps): JSX.Element;
     Label: {
         ({ children, className }: CardLabelProps): JSX.Element;
         displayName: string;

package/dist/components/Card/Card.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import React from 'react';
-import { getSlots } from '../../utils/slots.js';
+import { useSlots } from '../../hooks/useSlots.js';
 import { ChevronRightIcon } from '../Icon/ChevronRightIcon.js';
 import { Image } from '../Image/Image.js';
 
@@ -22,9 +22,9 @@ function getCardLinkElement(as, href) {
         },
     };
 }
-const Card = ({ chevron = false, children, className, href, hrefAs, imagePosition = "left", orientation = "vertical", ...props }) => {
+const Card = ({ chevron = false, children, className, href, hrefAs, imagePosition = "left", orientation = "vertical", ref, ...props }) => {
     const { element: linkElement, props: linkProps } = getCardLinkElement(hrefAs, href);
-    const slots = getSlots(componentSlots, children);
+    const slots = { ...useSlots(componentSlots, children) };
     const innerProps = { className: "coop-card--inner" };
     const hasLinkWrapper = href && !slots.CardHeading;
     const componentProps = {
@@ -36,7 +36,7 @@ const Card = ({ chevron = false, children, className, href, hrefAs, imagePositio
     if (href && slots.CardHeading) {
         slots.CardHeading = React.createElement(linkElement, linkProps, slots.CardHeading);
     }
-    return (jsxs("article", { ...componentProps, children: [slots.CardImage, slots.CardBadge, React.createElement(hasLinkWrapper ? linkElement : "div", hasLinkWrapper ? { href, ...innerProps } : innerProps, jsxs("div", { className: "coop-card--content", children: [slots.CardLabel, slots.CardHeading, slots.CardBody, slots.Children] }), chevron && (jsx("span", { "aria-hidden": "true", className: "coop-card--icon", role: "presentation", children: jsx(ChevronRightIcon, {}) })))] }));
+    return (jsxs("article", { ...componentProps, ref: ref, children: [slots.CardImage, slots.CardBadge, React.createElement(hasLinkWrapper ? linkElement : "div", hasLinkWrapper ? { href, ...innerProps } : innerProps, jsxs("div", { className: "coop-card--content", children: [slots.CardLabel, slots.CardHeading, slots.CardBody, slots.Children] }), chevron && (jsx("span", { "aria-hidden": "true", className: "coop-card--icon", role: "presentation", children: jsx(ChevronRightIcon, {}) })))] }));
 };
 const CardHeading = ({ as = "h3", children, className }) => {
     return React.createElement(as, { className: clsx("coop-card--heading", className) }, children);

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,4 +1,4 @@
-import type { InputHTMLAttributes, JSX } from "react";
+import type { InputHTMLAttributes, JSX, Ref } from "react";
 import { StandardSizes } from "../../../src/types";
 export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
     /** **(Optional)** Specify additional CSS classes to be applied to the component. */
@@ -11,8 +11,10 @@ export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement
     id?: string;
     /** Specify the Checkbox name. */
     name: string;
+    /** **(Optional)** Specify a custom React ref for this component. */
+    ref?: Ref<HTMLInputElement>;
     /** **(Optional)** Specify the Checkbox size. */
     size?: StandardSizes;
 }
-export declare const Checkbox: ({ className, disabled, error, id, name, size, ...props }: CheckboxProps) => JSX.Element;
+export declare const Checkbox: ({ className, disabled, error, id, name, ref, size, ...props }: CheckboxProps) => JSX.Element;
 export default Checkbox;

package/dist/components/Checkbox/Checkbox.js

@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useId } from '../../hooks/useId.js';
 
-const Checkbox = ({ className, disabled, error = false, id, name, size = "md", ...props }) => {
+const Checkbox = ({ className, disabled, error = false, id, name, ref, size = "md", ...props }) => {
     const uid = useId(id);
     const componentProps = {
         className: clsx("coop-checkbox", className),
@@ -14,7 +14,7 @@ const Checkbox = ({ className, disabled, error = false, id, name, size = "md", .
         type: "checkbox",
         ...props,
     };
-    return jsx("input", { ...componentProps });
+    return jsx("input", { ...componentProps, ref: ref });
 };
 
 export { Checkbox, Checkbox as default };

package/dist/components/Expandable/Expandable.d.ts

@@ -1,9 +1,11 @@
-import type { DetailsHTMLAttributes, HTMLAttributes, JSX } from "react";
+import type { DetailsHTMLAttributes, HTMLAttributes, JSX, Ref } from "react";
 export interface ExpandableProps extends DetailsHTMLAttributes<HTMLDetailsElement> {
     /** Main content inside the component, only visible when it is open. 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<HTMLDetailsElement>;
 }
 interface ExpandableSummaryProps extends HTMLAttributes<HTMLElement> {
     /** **(Optional)** Content inside the Summary. */
@@ -12,7 +14,7 @@ interface ExpandableSummaryProps extends HTMLAttributes<HTMLElement> {
     className?: string;
 }
 export declare const Expandable: {
-    ({ children, className, ...props }: ExpandableProps): JSX.Element;
+    ({ children, className, ref, ...props }: ExpandableProps): JSX.Element;
     Summary: {
         ({ children, className, ...props }: ExpandableSummaryProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;

package/dist/components/Expandable/Expandable.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { clsx } from 'clsx';
+import { useSlots } from '../../hooks/useSlots.js';
 import { hasUserBg, bgClassToColor } from '../../utils/index.js';
-import { getSlots } from '../../utils/slots.js';
 import 'react';
 import { ChevronDownIcon } from '../Icon/ChevronDownIcon.js';
 
@@ -9,8 +9,8 @@ const componentSlots = {
     Children: null,
     ExpandableSummary: null,
 };
-const Expandable = ({ children, className, ...props }) => {
-    const slots = getSlots(componentSlots, children);
+const Expandable = ({ children, className, ref, ...props }) => {
+    const slots = useSlots(componentSlots, children);
     const componentProps = {
         className: clsx("coop-expandable", !hasUserBg(className) && "bg-tint-grey", className),
         ...props,
@@ -18,7 +18,7 @@ const Expandable = ({ children, className, ...props }) => {
     componentProps.style = {
         "--bg": `var(--color-${bgClassToColor(componentProps.className)})`,
     };
-    return (jsxs("details", { ...componentProps, children: [slots.ExpandableSummary, jsx("div", { className: "coop-expandable--content", children: slots.Children })] }));
+    return (jsxs("details", { ...componentProps, ref: ref, children: [slots.ExpandableSummary, jsx("div", { className: "coop-expandable--content", children: slots.Children })] }));
 };
 const ExpandableSummary = ({ children, className, ...props }) => {
     return (jsxs("summary", { ...props, className: className, children: [children, jsx(ChevronDownIcon, { className: "coop-expandable--icon", stroke: "currentColor", strokeWidth: 2, width: "12" })] }));

package/dist/components/Field/Field.d.ts

@@ -1,4 +1,4 @@
-import type { HTMLAttributes, JSX } from "react";
+import type { HTMLAttributes, JSX, Ref } from "react";
 import React from "react";
 import { type ErrorProps } from "../FieldMarkers/Error";
 import { type HintProps } from "../FieldMarkers/Hint";
@@ -16,6 +16,8 @@ interface FieldProps extends HTMLAttributes<HTMLDivElement> {
     error?: boolean;
     /** **(Optional)** Specify whether the Field should show the left-hand error bar if it is in an error state. */
     hideErrorBar?: boolean;
+    /** **(Optional)** Specify a custom React ref for this component. */
+    ref?: Ref<HTMLDivElement>;
 }
 interface ControlProps extends HTMLAttributes<HTMLDivElement> {
     /** **(Optional)** Elements inside the form control. */
@@ -27,7 +29,7 @@ export declare const FieldControl: {
     ({ children, className, ...props }: ControlProps): JSX.Element;
     displayName: string;
 };
-export declare const Field: (({ boxed, children, className, error, hideErrorBar, ...props }: FieldProps) => import("react/jsx-runtime").JSX.Element) & {
+export declare const Field: (({ boxed, children, className, error, hideErrorBar, ref, ...props }: FieldProps) => import("react/jsx-runtime").JSX.Element) & {
     Control: {
         ({ children, className, ...props }: ControlProps): JSX.Element;
         displayName: string;

package/dist/components/Field/Field.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import React from 'react';
 import { useId } from '../../hooks/useId.js';
-import { getSlots } from '../../utils/slots.js';
+import { useSlots } from '../../hooks/useSlots.js';
 import { Error } from '../FieldMarkers/Error.js';
 import { Hint } from '../FieldMarkers/Hint.js';
 import { Label } from '../FieldMarkers/Label.js';
@@ -14,21 +14,20 @@ const componentSlots = {
     FieldError: null,
     FieldHint: null,
     FieldLabel: null,
-    RadioButton: null,
+    Radio: null,
     Textarea: null,
     TextInput: null,
 };
 const standardFields = ["Children", "FieldError", "FieldHint", "FieldLabel"];
-const inlineFields = ["Checkbox", "RadioButton"];
-const Root = ({ boxed = false, children, className, error = false, hideErrorBar = false, ...props }) => {
+const inlineFields = ["Checkbox", "Radio"];
+const Root = ({ boxed = false, children, className, error = false, hideErrorBar = false, ref, ...props }) => {
     var _a, _b, _c, _d, _e, _f;
-    const slots = getSlots(componentSlots, children);
+    const slots = { ...useSlots(componentSlots, children) };
     const slotsArray = Object.entries(slots);
-    const uid = useId();
     const isInlineControl = slotsArray.some((s) => s[1] !== null && inlineFields.includes(s[0]));
     const hasFieldMarkers = !!((_b = (_a = slots.FieldLabel) !== null && _a !== void 0 ? _a : slots.FieldError) !== null && _b !== void 0 ? _b : slots.FieldHint);
     const [, control] = (_c = slotsArray.find((s) => (!standardFields.includes(s[0]) && s[1] !== null ? s : null))) !== null && _c !== void 0 ? _c : [];
-    let controlId = uid;
+    let controlId = useId();
     let controlDisabled = false;
     if (control) {
         if (typeof control === "object" && "props" in control) {
@@ -53,7 +52,7 @@ const Root = ({ boxed = false, children, className, error = false, hideErrorBar
         "data-error": error || undefined,
         "data-hide-error": hideErrorBar || undefined,
     };
-    return (jsxs("div", { ...componentProps, children: [!isInlineControl && hasFieldMarkers && (jsxs("div", { className: "coop-field-markers", children: [slots.FieldLabel, slots.FieldHint, slots.FieldError] })), slots.Control && (jsxs("div", { className: "coop-field-control", children: [slots.Control, isInlineControl && hasFieldMarkers && (jsxs("div", { className: "coop-field-markers", children: [slots.FieldLabel, slots.FieldHint, slots.FieldError] }))] })), slots.Children] }));
+    return (jsxs("div", { ...componentProps, ref: ref, children: [!isInlineControl && hasFieldMarkers && (jsxs("div", { className: "coop-field-markers", children: [slots.FieldLabel, slots.FieldHint, slots.FieldError] })), slots.Control && (jsxs("div", { className: "coop-field-control", children: [slots.Control, isInlineControl && hasFieldMarkers && (jsxs("div", { className: "coop-field-markers", children: [slots.FieldLabel, slots.FieldHint, slots.FieldError] }))] })), slots.Children] }));
 };
 const FieldControl = ({ children, className, ...props }) => {
     return (jsx("div", { className: clsx("coop-field-control ", className), ...props, children: children }));

package/dist/components/FieldMarkers/Error.d.ts

@@ -1,9 +1,11 @@
-import type { HTMLAttributes, JSX, ReactNode } from "react";
+import type { HTMLAttributes, JSX, ReactNode, Ref } from "react";
 export interface ErrorProps extends HTMLAttributes<HTMLSpanElement> {
     /** **(Optional)** Error text for the form element. Accepts any valid JSX or string. */
     children?: string | 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<HTMLSpanElement>;
 }
-export declare const Error: ({ children, className, ...props }: ErrorProps) => JSX.Element;
+export declare const Error: ({ children, className, ref, ...props }: ErrorProps) => JSX.Element;
 export default Error;

package/dist/components/FieldMarkers/Error.js

@@ -1,12 +1,12 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 
-const Error = ({ children, className, ...props }) => {
+const Error = ({ children, className, ref, ...props }) => {
     const componentProps = {
         className: clsx("coop-field-error ", className),
         ...props,
     };
-    return jsx("span", { ...componentProps, children: children });
+    return (jsx("span", { ...componentProps, ref: ref, children: children }));
 };
 
 export { Error, Error as default };

package/dist/components/FieldMarkers/Hint.d.ts

@@ -1,9 +1,11 @@
-import type { HTMLAttributes, JSX, ReactNode } from "react";
-export interface HintProps extends HTMLAttributes<HTMLParagraphElement> {
+import type { HTMLAttributes, JSX, ReactNode, Ref } from "react";
+export interface HintProps extends HTMLAttributes<HTMLDivElement> {
     /** **(Optional)** Hint text for the form element. Accepts any valid JSX or string. */
     children?: string | 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>;
 }
-export declare const Hint: ({ children, className, ...props }: HintProps) => JSX.Element | null;
+export declare const Hint: ({ children, className, ref, ...props }: HintProps) => JSX.Element | null;
 export default Hint;

package/dist/components/FieldMarkers/Hint.js

@@ -1,12 +1,12 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 
-const Hint = ({ children, className, ...props }) => {
+const Hint = ({ children, className, ref, ...props }) => {
     const componentProps = {
         className: clsx("coop-field-hint ", className),
         ...props,
     };
-    return children ? jsx("div", { ...componentProps, children: children }) : null;
+    return (jsx("div", { ...componentProps, ref: ref, children: children }));
 };
 
 export { Hint, Hint as default };

package/dist/components/FieldMarkers/Label.d.ts

@@ -1,4 +1,4 @@
-import { LabelHTMLAttributes } from "react";
+import { LabelHTMLAttributes, Ref } from "react";
 export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
     /** **(Optional)** Main label for the form element. Accepts any valid JSX or string. */
     children?: string | React.ReactNode;
@@ -6,6 +6,8 @@ export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
     className?: string;
     /** **(Optional)** Specify whether the label is visible for humans or only for screen readers. */
     isVisible?: boolean;
+    /** **(Optional)** Specify a custom React ref for this component. */
+    ref?: Ref<HTMLLabelElement>;
 }
-export declare const Label: ({ children, className, isVisible, ...props }: LabelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Label: ({ children, className, isVisible, ref, ...props }: LabelProps) => import("react/jsx-runtime").JSX.Element;
 export default Label;

package/dist/components/FieldMarkers/Label.js

@@ -1,8 +1,12 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 
-const Label = ({ children, className, isVisible = true, ...props }) => {
-    return (jsx("label", { ...props, className: clsx("coop-field-label", !isVisible && "sr-only", className), children: jsx("span", { children: children }) }));
+const Label = ({ children, className, isVisible = true, ref, ...props }) => {
+    const componentProps = {
+        className: clsx("coop-field-label", !isVisible && "sr-only", className),
+        ...props,
+    };
+    return (jsx("label", { ...componentProps, ref: ref, children: jsx("span", { children: children }) }));
 };
 
 export { Label, Label as default };

package/dist/components/FieldMarkers/Legend.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from "react";
+import { HTMLAttributes, Ref } from "react";
 export interface LegendProps extends HTMLAttributes<HTMLLegendElement> {
     /** **(Optional)** Main legend for the fieldset. Accepts any valid JSX or string. */
     children?: string | React.ReactNode;
@@ -6,6 +6,8 @@ export interface LegendProps extends HTMLAttributes<HTMLLegendElement> {
     className?: string;
     /** **(Optional)** Specify whether the legend should be visible to humans or screen readers. */
     isVisible?: boolean;
+    /** **(Optional)** Specify a custom React ref for this component. */
+    ref?: Ref<HTMLLegendElement>;
 }
-export declare const Legend: ({ children, className, isVisible, ...props }: LegendProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Legend: ({ children, className, isVisible, ref, ...props }: LegendProps) => import("react/jsx-runtime").JSX.Element;
 export default Legend;

package/dist/components/FieldMarkers/Legend.js

@@ -1,13 +1,13 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 
-const Legend = ({ children, className, isVisible = true, ...props }) => {
+const Legend = ({ children, className, isVisible = true, ref, ...props }) => {
     const componentProps = {
         "aria-hidden": true,
         className: clsx("coop-field-label", !isVisible && "sr-only", className),
         ...props,
     };
-    return (jsxs(Fragment, { children: [jsx("legend", { className: "sr-only", children: children }), isVisible && jsx("div", { ...componentProps, children: children })] }));
+    return (jsxs(Fragment, { children: [jsx("legend", { className: "sr-only", children: children }), isVisible && (jsx("div", { ...componentProps, ref: ref, children: children }))] }));
 };
 
 export { Legend, Legend as default };

package/dist/components/Fieldset/Fieldset.d.ts

@@ -1,4 +1,4 @@
-import { type FieldsetHTMLAttributes, type JSX } from "react";
+import { type FieldsetHTMLAttributes, type JSX, Ref } from "react";
 import { StandardSizes } from "../../../src/types";
 import { type ErrorProps } from "../FieldMarkers/Error";
 import { type HintProps } from "../FieldMarkers/Hint";
@@ -16,6 +16,8 @@ export interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElemen
     error?: boolean;
     /** **(Optional)** Specify whether the Fieldset should show the left-hand error bar if it is in an error state. */
     hideErrorBar?: boolean;
+    /** **(Optional)** Specify a custom React ref for this component. */
+    ref?: Ref<HTMLFieldSetElement>;
     /** **(Optional)** Specify the size of the Fieldset and all its descendents. */
     size?: StandardSizes;
 }
@@ -33,7 +35,7 @@ export declare const FieldsetFields: {
     ({ boxed, children, className, orientation, ...props }: FieldsetFieldsProps): JSX.Element;
     displayName: string;
 };
-export declare const Fieldset: (({ children, className, disabled, error, hideErrorBar, size, ...props }: FieldsetProps) => JSX.Element) & {
+export declare const Fieldset: (({ children, className, disabled, error, hideErrorBar, ref, size, ...props }: FieldsetProps) => JSX.Element) & {
     Error: {
         (props: ErrorProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;

package/dist/components/Fieldset/Fieldset.js

@@ -4,19 +4,17 @@ import { Error } from '../FieldMarkers/Error.js';
 import { Hint } from '../FieldMarkers/Hint.js';
 import { Legend } from '../FieldMarkers/Legend.js';
 
-const Root = ({ children, className, disabled, error = false, hideErrorBar = false, size = "md", ...props }) => {
+const Root = ({ children, className, disabled, error = false, hideErrorBar = false, ref, size = "md", ...props }) => {
     const componentProps = {
         "aria-disabled": disabled,
         className: clsx("coop-fieldset", className),
         "data-error": error || undefined,
-        //"data-variant": variant !== "default" ? variant : undefined,
         "data-hide-error": hideErrorBar || undefined,
-        // "data-orientation": orientation !== "vertical" ? orientation : undefined,
         "data-size": size.length && size !== "md" ? size : undefined,
         disabled,
         ...props,
     };
-    return jsx("fieldset", { ...componentProps, children: children });
+    return (jsx("fieldset", { ...componentProps, ref: ref, children: children }));
 };
 const FieldsetFields = ({ boxed = false, children, className, orientation = "vertical", ...props }) => {
     const componentProps = {

package/dist/components/Flourish/Flourish.d.ts

@@ -1,4 +1,4 @@
-import type { JSX, ReactNode, SVGProps } from "react";
+import type { JSX, ReactNode, Ref, SVGProps } from "react";
 import { Black, BrandBlue, Darks, Lights, OfferRed, Tints, White } from "../../types/colors";
 export interface FlourishProps extends SVGProps<SVGSVGElement> {
     /** Specify the text to be highlighted by the Flourish. */
@@ -7,6 +7,8 @@ export interface FlourishProps extends SVGProps<SVGSVGElement> {
     className?: string;
     /** **(Optional)** Specify the Flourish color. */
     fill?: Darks | Lights | Tints | OfferRed | BrandBlue | White | Black;
+    /** **(Optional)** Specify a custom React ref for this component. */
+    ref?: Ref<SVGSVGElement>;
 }
-export declare const Flourish: ({ children, className, fill, ...props }: FlourishProps) => JSX.Element;
+export declare const Flourish: ({ children, className, fill, ref, ...props }: FlourishProps) => JSX.Element;
 export default Flourish;

package/dist/components/Flourish/Flourish.js

@@ -1,13 +1,13 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 
-const Flourish = ({ children, className, fill = "brand-blue", ...props }) => {
+const Flourish = ({ children, className, fill = "brand-blue", ref, ...props }) => {
     const componentProps = {
         className: clsx("coop-flourish ", className),
         fill: `var(--color-${fill})`,
         ...props,
     };
-    return (jsxs("span", { style: { position: "relative" }, children: [children, jsx("svg", { ...componentProps, viewBox: "0 0 276 10", children: jsx("path", { d: "M275.9 8.6c.1-1.6.2-1.8-.4-2.9.3-1-.3-1.2-1.8-1.1v-.3c.6-.4.2-.2 1.4-.1-.9-2.3-5.6-1.8-8.5-2.3C259 .5 246.3.7 237.4.5L185 .4l-33-.2-26.1-.2-67.4 1.2-44.3.5C10.7 2.1 1.5.4 0 3.3l1 .2L0 4v.5C8.2 7.9 26.6 7.2 35.6 7c5 0 13.5 1.6 16.5-.6C53.4 8 59.5 8 62 7.7l45 .1 42.8.3 30.7.3 44.2.6 27.8-.5 23 .8c.1-.8-.3-.5.5-.7ZM219 2.8v-.2l.8-.2h.4l.3.4H219Zm30-.1h1.2c-.8.4-.5.3-1.2 0Zm6.2.6.2-.4h.3l-.5.4Z" }) })] }));
+    return (jsxs("span", { style: { position: "relative" }, children: [children, jsx("svg", { ...componentProps, ref: ref, viewBox: "0 0 276 10", children: jsx("path", { d: "M275.9 8.6c.1-1.6.2-1.8-.4-2.9.3-1-.3-1.2-1.8-1.1v-.3c.6-.4.2-.2 1.4-.1-.9-2.3-5.6-1.8-8.5-2.3C259 .5 246.3.7 237.4.5L185 .4l-33-.2-26.1-.2-67.4 1.2-44.3.5C10.7 2.1 1.5.4 0 3.3l1 .2L0 4v.5C8.2 7.9 26.6 7.2 35.6 7c5 0 13.5 1.6 16.5-.6C53.4 8 59.5 8 62 7.7l45 .1 42.8.3 30.7.3 44.2.6 27.8-.5 23 .8c.1-.8-.3-.5.5-.7ZM219 2.8v-.2l.8-.2h.4l.3.4H219Zm30-.1h1.2c-.8.4-.5.3-1.2 0Zm6.2.6.2-.4h.3l-.5.4Z" }) })] }));
 };
 
 export { Flourish, Flourish as default };

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

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

package/dist/components/Icon/AddIcon.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 AddIcon = ({ alt, className, fill, ...props }) => {
-    const id = useId();
+const AddIcon = ({ 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": "add",
         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.72a1 1 0 0 1-.7.28H8a1 1 0 1 1 0-2h16a1 1 0 0 1 1 1 1 1 0 0 1-.3.72", fill: fill !== null && fill !== void 0 ? fill : "currentColor" }), jsx("path", { d: "M16.72 24.7a1 1 0 0 1-.72.3 1 1 0 0 1-1-1V8a1 1 0 0 1 2 0v16a1 1 0 0 1-.28.7", 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.72a1 1 0 0 1-.7.28H8a1 1 0 1 1 0-2h16a1 1 0 0 1 1 1 1 1 0 0 1-.3.72", fill: fill !== null && fill !== void 0 ? fill : "currentColor" }), jsx("path", { d: "M16.72 24.7a1 1 0 0 1-.72.3 1 1 0 0 1-1-1V8a1 1 0 0 1 2 0v16a1 1 0 0 1-.28.7", fill: fill !== null && fill !== void 0 ? fill : "currentColor" })] }));
 };
 
 export { AddIcon };

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

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