@coopdigital/react 1.19.0 → 1.20.0

package/dist/components/AlertBanner/AlertBanner.js

@@ -2,10 +2,13 @@ import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/AlertBanner/AlertBanner.tsx
 const AlertBanner = ({ children, className, ref, variant = "default", ...props }) => {
-	return /* @__PURE__ */ jsx("aside", {
+	const componentProps = {
 		className: clsx("coop-alert-banner", className),
 		"data-variant": variant,
-		...props,
+		...props
+	};
+	return /* @__PURE__ */ jsx("aside", {
+		...componentProps,
 		ref,
 		children
 	});

package/dist/components/Author/Author.js

@@ -10,10 +10,13 @@ const Author = ({ author = "Co-op team", className, date, datePrefix = "", image
 		width: "56px",
 		...image
 	};
-	return /* @__PURE__ */ jsxs("div", {
+	const componentProps = {
 		className: clsx("coop-author", className),
 		"data-size": size?.length ? size : void 0,
-		...props,
+		...props
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		...componentProps,
 		ref,
 		children: [image && /* @__PURE__ */ jsx(Image, { ...imageProps }), /* @__PURE__ */ jsxs("div", {
 			className: "coop-author--content",

package/dist/components/Button/Button.js

@@ -1,6 +1,6 @@
 "use client";
-import { hasUserBg } from "../../utils/index.js";
 import { LoadingSpinner } from "../LoadingSpinner/LoadingSpinner.js";
+import { hasUserBg } from "../../utils/index.js";
 import clsx from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React, { useCallback, useState } from "react";

package/dist/components/Card/Card.d.ts

@@ -1,76 +1,99 @@
 import { ImageProps } from "../Image/Image.js";
 import "../Image/index.js";
-import React, { ForwardRefExoticComponent, HTMLAttributes, JSX, Ref } from "react";
+import { PictureProps } from "../Picture/Picture.js";
+import "../Picture/index.js";
+import { StandardSizes } from "../../types/index.js";
+import React, { AnchorHTMLAttributes, ForwardRefExoticComponent, HTMLAttributes, JSX, Ref } from "react";
 //#region src/components/Card/Card.d.ts
 interface CardProps extends HTMLAttributes<HTMLDivElement> {
-  /**  **(Optional)** Specify how the card behaves across screen sizes.
+  /**  **(Optional)** Specify how the Card behaves across screen sizes.
    *
-   * When this is true, horizontal cards will switch to vertical on small screens, and vertical cards will switch to horizontal on small screens.
+   * For finer control, use utility classes or custom CSS to control flex-direction. */
+  adaptive?: "sm" | "md";
+  /** **(Optional)** Specify an element to use for the container.
    *
-   * Default: false
+   * Default: `article`
    */
-  adaptive?: boolean;
-  /** **(Optional)** Specify whether chevron is visible. */
-  chevron?: boolean;
-  /** **(Optional)** Content inside the component. Children that are not assigned to a slot will be grouped together and rendered under the main Card content. */
+  as?: "article" | "section" | "figure" | "div";
+  /** **(Optional)** Content inside the component. */
   children?: React.ReactNode;
-  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  /** **(Optional)** Specify additional CSS classes. */
   className?: string;
-  /** **(Optional)** Specify the URL that the Card will link to. */
-  href?: string;
-  /** **(Optional)** Specify a custom element to use instead of `a`. */
-  hrefAs?: React.FC<any> | ForwardRefExoticComponent<any> | string;
-  /** **(Optional)** Specify the orientation of the Card.
-   *
-   * Default: vertical
-   */
+  /** **(Optional)** Specify the Card orientation. */
   orientation?: "vertical" | "horizontal";
+  /** **(Optional)** Specify the Card padding. */
+  padding?: StandardSizes;
+  /** **(Optional)** Specify the Card border radius. */
+  radius?: StandardSizes;
   /** **(Optional)** Specify a custom React ref for this component. */
   ref?: Ref<HTMLDivElement>;
   /** **(Optional)** Enable additional styles to use the Card as a signpost.
    *
-   * Text is vertically aligned centrally and the chevron is enlarged. */
+   * Text is vertically aligned centrally and the Icon is enlarged. */
   signpost?: boolean;
 }
-interface CardLabelProps extends HTMLAttributes<HTMLSpanElement> {
-  /** **(Optional)** Content inside the Label. */
+interface CardHeadingProps extends HTMLAttributes<HTMLDivElement> {
+  /** **(Optional)** Specify an element to use for the heading.
+   *
+   * Default: `h3`
+   */
+  as?: "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "strong" | "figcaption";
+  /** **(Optional)** Content inside the component. */
   children?: React.ReactNode;
-  /** **(Optional)** Specify additional CSS classes to be applied to the Label. */
+  /** **(Optional)** Specify additional CSS classes. */
   className?: string;
 }
-interface CardHeadingProps extends HTMLAttributes<HTMLDivElement> {
-  /** **(Optional)** Specify a custom element to use instead of `h3`. */
-  as?: "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div";
-  /** **(Optional)** Content inside the Heading. */
+interface CardIconProps extends HTMLAttributes<HTMLDivElement> {
+  /** **(Optional)** Content inside the component. */
   children?: React.ReactNode;
-  /** **(Optional)** Specify additional CSS classes to be applied to the Heading. */
+  /** **(Optional)** Specify additional CSS classes. */
   className?: string;
 }
-interface CardBodyProps extends HTMLAttributes<HTMLDivElement> {
-  /** **(Optional)** Content inside the Body. */
+interface CardContentProps extends HTMLAttributes<HTMLDivElement> {
+  /** **(Optional)** Content inside the component. */
   children?: React.ReactNode;
+  /** **(Optional)** Specify additional CSS classes. */
+  className?: string;
+}
+interface CardLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  /** **(Optional)** Specify an element to use instead of native `a`. */
+  as?: React.FC<any> | ForwardRefExoticComponent<any> | string;
+  /** **(Optional)** Content inside the component. */
+  children?: React.ReactNode;
+  /** **(Optional)** Specify additional CSS classes. */
+  className?: string;
 }
 interface CardBadgeProps extends HTMLAttributes<HTMLDivElement> {
-  /** **(Optional)** Specify on which side the Badge should appear. */
+  /** **(Optional)** Specify alignment relative to container.
+   *
+   * Default: `right`
+   */
   align?: "left" | "right";
-  /** **(Optional)** Content inside the Badge. */
+  /** **(Optional)** Content inside the component. */
   children?: React.ReactNode;
-  /** **(Optional)** Specify additional CSS classes to be applied to the Badge. */
+  /** **(Optional)** Specify additional CSS classes. */
   className?: string;
-  /** **(Optional)** Specify badge position relative to top right corner. */
+  /** **(Optional)** Specify position relative to top corner.
+   *
+   * Default: `popout`
+   */
   position?: "inset" | "popout";
 }
-type CardImageProps = ImageProps & {
-  /** **(Optional)** Specify on which side the Image should appear. */
+interface CardPictureProps extends PictureProps {
+  /** **(Optional)** Specify on which side the Picture should appear. */
   align?: "left" | "right";
-};
+  /** **(Optional)** Content inside the component. */
+  children?: React.ReactNode;
+  /** **(Optional)** Specify additional CSS classes. */
+  className?: string;
+}
 declare const Card: {
-  ({ adaptive, chevron, children, className, href, hrefAs, orientation, ref, signpost, ...props }: CardProps): JSX.Element;
+  ({ adaptive, as, children, className, orientation, padding, radius, ref, signpost, ...props }: CardProps): JSX.Element;
   slot: {
     name: string;
   };
-  Label: {
-    ({ children, className, ...props }: CardLabelProps): JSX.Element;
+  Link: {
+    ({ as, children, className, href, ...props }: CardLinkProps): JSX.Element;
     slot: {
       name: string;
     };
@@ -82,19 +105,31 @@ declare const Card: {
     };
   };
   Badge: {
-    ({ align, children, position, ...props }: CardBadgeProps): JSX.Element;
+    ({ align, children, className, position, ...props }: CardBadgeProps): JSX.Element;
+    slot: {
+      name: string;
+    };
+  };
+  Content: {
+    ({ children, className, ...props }: CardContentProps): JSX.Element;
     slot: {
       name: string;
     };
   };
-  Body: {
-    ({ children }: CardBodyProps): JSX.Element;
+  Icon: {
+    ({ children, className, ...props }: CardIconProps): JSX.Element;
     slot: {
       name: string;
     };
   };
   Image: {
-    ({ align, crop, ...props }: CardImageProps): JSX.Element;
+    (props: ImageProps): JSX.Element;
+    slot: {
+      name: string;
+    };
+  };
+  Picture: {
+    ({ align, children, className, crop, ...props }: CardPictureProps): JSX.Element;
     slot: {
       name: string;
     };
@@ -106,29 +141,41 @@ declare const CardHeading: {
     name: string;
   };
 };
-declare const CardLabel: {
-  ({ children, className, ...props }: CardLabelProps): JSX.Element;
+declare const CardIcon: {
+  ({ children, className, ...props }: CardIconProps): JSX.Element;
   slot: {
     name: string;
   };
 };
 declare const CardBadge: {
-  ({ align, children, position, ...props }: CardBadgeProps): JSX.Element;
+  ({ align, children, className, position, ...props }: CardBadgeProps): JSX.Element;
   slot: {
     name: string;
   };
 };
-declare const CardBody: {
-  ({ children }: CardBodyProps): JSX.Element;
+declare const CardPicture: {
+  ({ align, children, className, crop, ...props }: CardPictureProps): JSX.Element;
   slot: {
     name: string;
   };
 };
 declare const CardImage: {
-  ({ align, crop, ...props }: CardImageProps): JSX.Element;
+  (props: ImageProps): JSX.Element;
+  slot: {
+    name: string;
+  };
+};
+declare const CardContent: {
+  ({ children, className, ...props }: CardContentProps): JSX.Element;
+  slot: {
+    name: string;
+  };
+};
+declare const CardLink: {
+  ({ as, children, className, href, ...props }: CardLinkProps): JSX.Element;
   slot: {
     name: string;
   };
 };
 //#endregion
-export { Card, Card as default, CardBadge, CardBody, CardHeading, CardImage, CardLabel, CardProps };
+export { Card, Card as default, CardBadge, CardContent, CardHeading, CardIcon, CardImage, CardLink, CardPicture, CardProps };

package/dist/components/Card/Card.js

@@ -1,63 +1,34 @@
 import { Image } from "../Image/Image.js";
 import { hasUserBg } from "../../utils/index.js";
-import { ChevronRightIcon } from "../icons/ChevronRightIcon.js";
+import Picture_default from "../Picture/index.js";
 import { useSlots } from "../../hooks/useSlots.js";
 import clsx from "clsx";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
 //#region src/components/Card/Card.tsx
 const componentSlots = {
 	CardBadge: null,
-	CardBody: null,
-	CardHeading: null,
-	CardImage: null,
-	CardLabel: null,
 	Children: null
 };
-function getCardLinkElement(as, href) {
-	return {
-		element: as ?? "a",
-		props: {
-			className: "coop-card--link",
-			href
-		}
-	};
-}
-const Card = ({ adaptive, chevron = false, children, className, href, hrefAs, orientation, ref, signpost, ...props }) => {
-	const { element: linkElement, props: linkProps } = getCardLinkElement(hrefAs, href);
+const Card = ({ adaptive, as = "article", children, className, orientation, padding, radius, ref, signpost, ...props }) => {
 	const slots = { ...useSlots(componentSlots, children) };
-	const hasLinkWrapper = href && !slots.CardHeading;
 	const componentProps = {
 		className: clsx("coop-card", !hasUserBg(className) && "bg-white", className),
 		"data-adaptive": adaptive ?? void 0,
 		"data-orientation": orientation ?? void 0,
+		"data-padding": padding ?? void 0,
+		"data-radius": radius ?? void 0,
 		"data-signpost": signpost ?? void 0,
 		...props
 	};
-	if (href && slots.CardHeading) slots.CardHeading = React.createElement(linkElement, linkProps, slots.CardHeading);
-	return /* @__PURE__ */ jsxs("article", {
+	const cardContent = React.createElement(as, {
 		ref,
-		...componentProps,
-		children: [
-			slots.CardImage,
-			slots.CardBadge,
-			React.createElement(hasLinkWrapper ? linkElement : "div", hasLinkWrapper ? {
-				className: "coop-card--content",
-				href
-			} : { className: "coop-card--content" }, /* @__PURE__ */ jsxs(Fragment, { children: [
-				slots.CardLabel,
-				slots.CardHeading,
-				slots.CardBody,
-				slots.Children
-			] })),
-			(chevron || signpost) && /* @__PURE__ */ jsx("span", {
-				"aria-hidden": "true",
-				className: "coop-card--icon",
-				role: "presentation",
-				children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
-			})
-		]
-	});
+		...componentProps
+	}, slots.Children);
+	return slots.CardBadge ? /* @__PURE__ */ jsxs("div", {
+		className: "coop-card-wrapper",
+		children: [cardContent, slots.CardBadge]
+	}) : cardContent;
 };
 const CardHeading = ({ as = "h3", children, className, ...props }) => {
 	return React.createElement(as, {
@@ -65,42 +36,72 @@ const CardHeading = ({ as = "h3", children, className, ...props }) => {
 		...props
 	}, children);
 };
-const CardLabel = ({ children, className, ...props }) => {
+const CardIcon = ({ children, className, ...props }) => {
+	const componentProps = {
+		className: clsx("coop-card--icon", className),
+		...props
+	};
 	return /* @__PURE__ */ jsx("span", {
-		className: clsx("coop-card--label", className),
-		...props,
+		...componentProps,
 		children
 	});
 };
-const CardBadge = ({ align = "right", children, position = "popout", ...props }) => {
-	return /* @__PURE__ */ jsx("div", {
-		className: "coop-card--badge",
+const CardBadge = ({ align = "right", children, className, position = "popout", ...props }) => {
+	const componentProps = {
+		className: clsx("coop-card--badge", className),
 		"data-align": align,
 		"data-position": position,
-		...props,
+		...props
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...componentProps,
 		children
 	});
 };
-const CardBody = ({ children }) => {
-	return /* @__PURE__ */ jsx(Fragment, { children });
+const CardPicture = ({ align, children, className, crop, ...props }) => {
+	const componentProps = {
+		className: clsx("coop-card--picture", className),
+		"data-align": align ?? void 0,
+		"data-crop": crop ?? "wide",
+		...props
+	};
+	return /* @__PURE__ */ jsx(Picture_default, {
+		...componentProps,
+		children
+	});
 };
-const CardImage = ({ align, crop, ...props }) => {
-	return /* @__PURE__ */ jsx(Image, {
-		...props,
-		crop: crop ?? "wide",
-		"data-align": align ?? void 0
+const CardImage = (props) => /* @__PURE__ */ jsx(Image, { ...props });
+const CardContent = ({ children, className, ...props }) => {
+	const componentProps = {
+		className: clsx("coop-card--content", className),
+		...props
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...componentProps,
+		children
 	});
 };
+const CardLink = ({ as = "a", children, className, href, ...props }) => {
+	return React.createElement(as, {
+		className: clsx("coop-card--link", className),
+		href,
+		...props
+	}, children);
+};
 Card.slot = { name: "Card" };
-CardLabel.slot = { name: "CardLabel" };
 CardHeading.slot = { name: "CardHeading" };
 CardBadge.slot = { name: "CardBadge" };
-CardBody.slot = { name: "CardBody" };
+CardIcon.slot = { name: "CardIcon" };
+CardContent.slot = { name: "CardContent" };
 CardImage.slot = { name: "CardImage" };
-Card.Label = CardLabel;
+CardLink.slot = { name: "CardLink" };
+CardPicture.slot = { name: "CardPicture" };
+Card.Link = CardLink;
 Card.Heading = CardHeading;
 Card.Badge = CardBadge;
-Card.Body = CardBody;
+Card.Content = CardContent;
+Card.Icon = CardIcon;
 Card.Image = CardImage;
+Card.Picture = CardPicture;
 //#endregion
-export { Card, Card as default, CardBadge, CardBody, CardHeading, CardImage, CardLabel };
+export { Card, Card as default, CardBadge, CardContent, CardHeading, CardIcon, CardImage, CardLink, CardPicture };

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

@@ -1,2 +1,2 @@
-import { Card, CardBadge, CardBody, CardHeading, CardImage, CardLabel, CardProps } from "./Card.js";
-export { Card, Card as default, CardBadge, CardBody, CardHeading, CardImage, CardLabel, CardProps };
+import { Card, CardBadge, CardContent, CardHeading, CardIcon, CardImage, CardLink, CardPicture, CardProps } from "./Card.js";
+export { Card, Card as default, CardBadge, CardContent, CardHeading, CardIcon, CardImage, CardLink, CardPicture, CardProps };

package/dist/components/Card/index.js

@@ -1,5 +1,5 @@
-import { Card, CardBadge, CardBody, CardHeading, CardImage, CardLabel } from "./Card.js";
+import { Card, CardBadge, CardContent, CardHeading, CardIcon, CardImage, CardLink, CardPicture } from "./Card.js";
 //#region src/components/Card/index.ts
 var Card_default = Card;
 //#endregion
-export { Card, CardBadge, CardBody, CardHeading, CardImage, CardLabel, Card_default as default };
+export { Card, CardBadge, CardContent, CardHeading, CardIcon, CardImage, CardLink, CardPicture, Card_default as default };

package/dist/components/Checkbox/Checkbox.js

@@ -5,7 +5,7 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/Checkbox/Checkbox.tsx
 const Checkbox = ({ className, disabled, error = false, id, name, ref, size, ...props }) => {
 	const field = useField();
-	return /* @__PURE__ */ jsx("input", {
+	const componentProps = {
 		className: clsx("coop-checkbox", className),
 		"data-error": error || void 0,
 		"data-size": size ?? void 0,
@@ -13,7 +13,10 @@ const Checkbox = ({ className, disabled, error = false, id, name, ref, size, ...
 		id: id ?? field?.id,
 		name,
 		type: "checkbox",
-		...props,
+		...props
+	};
+	return /* @__PURE__ */ jsx("input", {
+		...componentProps,
 		ref
 	});
 };

package/dist/components/DatePicker/DatePicker.js

@@ -28,15 +28,16 @@ const initialState = {
 };
 const defaultFormatters = { formatWeekdayName: (d) => d.toLocaleDateString("default", { weekday: "short" }).slice(0, 2) };
 const Calendar = ({ captionLayout = "label", className, disabled, endMonth, formatters, showOutsideDays = true, startMonth, ...props }) => {
+	const combinedFormatters = useMemo(() => ({
+		...defaultFormatters,
+		...formatters
+	}), [formatters]);
 	return /* @__PURE__ */ jsx(DayPicker, {
 		captionLayout,
 		className,
 		disabled,
 		endMonth,
-		formatters: useMemo(() => ({
-			...defaultFormatters,
-			...formatters
-		}), [formatters]),
+		formatters: combinedFormatters,
 		navLayout: "around",
 		showOutsideDays,
 		startMonth,

package/dist/components/DatePicker/datepicker-utils.js

@@ -136,17 +136,18 @@ function getRangeDate(date, df, now) {
 	};
 	const formatted = {};
 	let input = "";
-	if (typeof date === "string") if (date.includes("-")) {
-		const { from, to } = getRangeFromString(date);
-		if (from && to) {
-			parsed.from = parse(from, df, now);
-			parsed.to = parse(to, df, now);
-			formatted.from = from;
-			formatted.to = to;
-		}
-		input = `${from} - ${to}`;
-	} else input = date;
-	else if (date?.from && date?.to && isValid(date.from) && isValid(date.to)) {
+	if (typeof date === "string") {
+		if (date.includes("-")) {
+			const { from, to } = getRangeFromString(date);
+			if (from && to) {
+				parsed.from = parse(from, df, now);
+				parsed.to = parse(to, df, now);
+				formatted.from = from;
+				formatted.to = to;
+			}
+			input = `${from} - ${to}`;
+		} else input = date;
+	} else if (date?.from && date?.to && isValid(date.from) && isValid(date.to)) {
 		parsed.from = date.from;
 		parsed.to = date.to;
 		formatted.from = format(parsed.from, df);

package/dist/components/Dialog/Dialog.js

@@ -1,6 +1,6 @@
 "use client";
-import { hasUserBg } from "../../utils/index.js";
 import { CrossIcon } from "../icons/CrossIcon.js";
+import { hasUserBg } from "../../utils/index.js";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useEffect, useRef } from "react";
@@ -98,9 +98,12 @@ const DialogHeader = ({ children, className, closeButton = true, ...props }) =>
 	});
 };
 const DialogBody = ({ children, className, ...props }) => {
-	return /* @__PURE__ */ jsx("div", {
+	const componentProps = {
 		className: clsx("coop-dialog--body", className),
-		...props,
+		...props
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...componentProps,
 		children
 	});
 };

package/dist/components/Expandable/Expandable.js

@@ -1,5 +1,5 @@
-import { hasUserBg } from "../../utils/index.js";
 import { ChevronDownIcon } from "../icons/ChevronDownIcon.js";
+import { hasUserBg } from "../../utils/index.js";
 import { useSlots } from "../../hooks/useSlots.js";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -10,9 +10,12 @@ const componentSlots = {
 };
 const Expandable = ({ children, className, ref, ...props }) => {
 	const slots = useSlots(componentSlots, children);
-	return /* @__PURE__ */ jsxs("details", {
+	const componentProps = {
 		className: clsx("coop-expandable", !hasUserBg(className) && "bg-tint-grey", className),
-		...props,
+		...props
+	};
+	return /* @__PURE__ */ jsxs("details", {
+		...componentProps,
 		ref,
 		children: [slots.ExpandableSummary, slots.ExpandableContent]
 	});

package/dist/components/Field/Field.js

@@ -1,6 +1,6 @@
 "use client";
-import { getSlotProp } from "../../utils/index.js";
 import { useId as useId$1 } from "../../hooks/useId.js";
+import { getSlotProp } from "../../utils/index.js";
 import { FieldContext } from "./Field.context.js";
 import { Error } from "../FieldMarkers/Error.js";
 import { Hint } from "../FieldMarkers/Hint.js";

package/dist/components/FieldMarkers/Error.js

@@ -2,9 +2,12 @@ import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/FieldMarkers/Error.tsx
 const Error = ({ children, className, ref, ...props }) => {
-	return /* @__PURE__ */ jsx("span", {
+	const componentProps = {
 		className: clsx("coop-field-error ", className),
-		...props,
+		...props
+	};
+	return /* @__PURE__ */ jsx("span", {
+		...componentProps,
 		ref,
 		children
 	});

package/dist/components/FieldMarkers/Hint.js

@@ -2,9 +2,12 @@ import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/FieldMarkers/Hint.tsx
 const Hint = ({ children, className, ref, ...props }) => {
-	return /* @__PURE__ */ jsx("div", {
+	const componentProps = {
 		className: clsx("coop-field-hint ", className),
-		...props,
+		...props
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...componentProps,
 		ref,
 		children
 	});

package/dist/components/FieldMarkers/Label.js

@@ -4,10 +4,13 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/FieldMarkers/Label.tsx
 const Label = ({ children, className, isVisible = true, ref, ...props }) => {
 	const field = useField();
-	return /* @__PURE__ */ jsx("label", {
+	const componentProps = {
 		className: clsx("coop-field-label", !isVisible && "sr-only", className),
 		htmlFor: props.htmlFor ?? (field?.id ? field.id + (field?.suffix ?? "") : void 0),
-		...props,
+		...props
+	};
+	return /* @__PURE__ */ jsx("label", {
+		...componentProps,
 		ref,
 		children: /* @__PURE__ */ jsx("span", { children })
 	});