@coopdigital/react 1.19.0 → 1.20.0

package/dist/components/Fieldset/Fieldset.js

@@ -5,24 +5,30 @@ import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Fieldset/Fieldset.tsx
 const Fieldset = ({ children, className, disabled, error = false, hideErrorBar = false, ref, size, ...props }) => {
-	return /* @__PURE__ */ jsx("fieldset", {
+	const componentProps = {
 		"aria-disabled": disabled,
 		className: clsx("coop-fieldset", className),
 		"data-error": error || void 0,
 		"data-hide-error": hideErrorBar || void 0,
 		"data-size": size ?? void 0,
 		disabled,
-		...props,
+		...props
+	};
+	return /* @__PURE__ */ jsx("fieldset", {
+		...componentProps,
 		ref,
 		children
 	});
 };
 const FieldsetFields = ({ boxed = false, children, className, orientation = "vertical", ...props }) => {
-	return /* @__PURE__ */ jsx("div", {
+	const componentProps = {
 		className: clsx("coop-fieldset-fields", className),
 		"data-boxed": boxed || void 0,
 		"data-orientation": orientation !== "vertical" ? orientation : void 0,
-		...props,
+		...props
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...componentProps,
 		children
 	});
 };

package/dist/components/Flourish/Flourish.js

@@ -2,12 +2,15 @@ import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Flourish/Flourish.tsx
 const Flourish = ({ children, className, fill = "brand-blue", ref, ...props }) => {
+	const componentProps = {
+		className: clsx("coop-flourish ", className),
+		fill: `var(--color-${fill})`,
+		...props
+	};
 	return /* @__PURE__ */ jsxs("span", {
 		style: { position: "relative" },
 		children: [children, /* @__PURE__ */ jsx("svg", {
-			className: clsx("coop-flourish ", className),
-			fill: `var(--color-${fill})`,
-			...props,
+			...componentProps,
 			ref,
 			viewBox: "0 0 276 10",
 			children: /* @__PURE__ */ 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" })

package/dist/components/Form/Form.js

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

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

@@ -1,10 +1,8 @@
-import { HTMLAttributes, JSX, Ref } from "react";
+import { ImgHTMLAttributes, JSX, Ref } from "react";
 //#region src/components/Image/Image.d.ts
-interface ImageProps extends HTMLAttributes<HTMLImageElement> {
+interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
   /** Specify text to describe the image. Refer to Experience Library guidelines on writing good alt text. */
   alt: string;
-  /** **(Optional)** Specify the image crop mode. */
-  crop?: "square" | "wide" | "none";
   /** **(Optional)** Specify the height of the image. */
   height?: string;
   /** **(Optional)** Specify a custom React ref for this component. */
@@ -15,7 +13,7 @@ interface ImageProps extends HTMLAttributes<HTMLImageElement> {
   width?: string;
 }
 declare const Image: {
-  ({ alt, crop, height, ref, src, width, ...props }: ImageProps): JSX.Element;
+  ({ alt, height, ref, src, width, ...props }: ImageProps): JSX.Element;
   slot: {
     name: string;
   };

package/dist/components/Image/Image.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Image/Image.tsx
-const getContentfulParams = (src, width, height) => {
+const getContentfulParams = ({ height, src, width }) => {
 	const url = !src.startsWith("http") ? new URL("https://" + src) : new URL(src);
 	[
 		["fm", "webp"],
@@ -9,7 +9,7 @@ const getContentfulParams = (src, width, height) => {
 		["w", width],
 		...height ? [["h", height]] : []
 	].forEach(([k, v]) => {
-		if (!url.searchParams.has(k)) url.searchParams.set(k, v);
+		if (k && v && !url.searchParams.has(k)) url.searchParams.set(k, v);
 	});
 	return {
 		height: url.searchParams.get("h") ?? height,
@@ -17,26 +17,29 @@ const getContentfulParams = (src, width, height) => {
 		width: url.searchParams.get("w") ?? width
 	};
 };
-const Image = ({ alt, crop, height, ref, src, width = "640", ...props }) => {
+const Image = ({ alt, height, ref, src, width = "640", ...props }) => {
 	let params = {
 		height,
 		src,
 		width
 	};
-	if (src.includes("images.ctfassets.net")) params = getContentfulParams(src, width, height);
+	if (src.includes("images.ctfassets.net")) params = getContentfulParams({
+		height,
+		src,
+		width
+	});
 	const dimensions = {
-		"data-crop": crop,
 		height: params.height,
 		width: params.width
 	};
-	return /* @__PURE__ */ jsx("picture", { children: /* @__PURE__ */ jsx("img", {
+	return /* @__PURE__ */ jsx("img", {
 		alt,
 		loading: "lazy",
 		src: params.src,
 		...dimensions,
 		...props,
 		ref
-	}) });
+	});
 };
 Image.slot = { name: "Image" };
 //#endregion

package/dist/components/LoadingSpinner/LoadingSpinner.js

@@ -3,11 +3,14 @@ import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/LoadingSpinner/LoadingSpinner.tsx
 const LoadingSpinner = ({ className, ref, stroke = "currentColor", strokeWidth = "1px", ...props }) => {
-	return /* @__PURE__ */ jsx(LoadingIcon, {
+	const componentProps = {
 		className: clsx("coop-loading-spinner ", className),
 		stroke,
 		strokeWidth,
-		...props,
+		...props
+	};
+	return /* @__PURE__ */ jsx(LoadingIcon, {
+		...componentProps,
 		ref
 	});
 };

package/dist/components/Logo/Logo.js

@@ -2,7 +2,7 @@ import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Logo/Logo.tsx
 const Logo = ({ alt = "Co-op", className, fill = "brand-blue", height, id, ref, width, ...props }) => {
-	return /* @__PURE__ */ jsxs("svg", {
+	const componentProps = {
 		alt,
 		className: clsx("coop-logo", className),
 		fill: fill === "brand-blue" ? void 0 : `var(--color-${fill})`,
@@ -11,7 +11,10 @@ const Logo = ({ alt = "Co-op", className, fill = "brand-blue", height, id, ref,
 		role: "img",
 		viewBox: "0 0 38 40",
 		width,
-		...props,
+		...props
+	};
+	return /* @__PURE__ */ jsxs("svg", {
+		...componentProps,
 		ref,
 		children: [/* @__PURE__ */ jsx("title", { children: alt }), /* @__PURE__ */ jsx("path", { d: "M37.8 8.8c0-1.4-.2-2.8-.6-4.2-.5-1.7-1.8-3-3.4-3.7a14.9 14.9 0 0 0-10.2 0c-1.7.6-2.9 2-3.4 3.7-.8 2.8-.8 5.7 0 8.5.5 1.7 1.8 3 3.4 3.7 1.6.6 3.4.9 5.1.8 1.7 0 3.5-.3 5.1-.8 1.7-.6 2.9-2 3.4-3.7.4-1.5.6-2.9.6-4.3zm-5.5 0c0 .7-.1 1.4-.3 2-.3.9-1 1.6-2 1.8-.9.2-1.8.2-2.6 0-.9-.2-1.7-.8-2-1.8-.4-1.3-.4-2.8 0-4.1.3-.9 1-1.6 2-1.8.9-.2 1.8-.2 2.6 0 .9.2 1.7.8 2 1.8.2.7.3 1.4.3 2.1m-14.6 23c.8-2.8.8-5.7 0-8.5-.5-1.7-1.8-3-3.4-3.7a14.9 14.9 0 0 0-10.2 0c-1.7.6-2.9 2-3.4 3.7-.8 2.8-.8 5.7 0 8.5.5 1.7 1.8 3 3.4 3.7 3.3 1.2 6.9 1.2 10.2 0 1.6-.6 2.9-2 3.4-3.7m-4.9-4.2c0 .7-.1 1.4-.3 2-.3.9-1 1.6-2 1.8-.9.2-1.8.2-2.6 0-.9-.2-1.7-.8-2-1.8-.4-1.4-.4-2.8 0-4.1.3-.9 1-1.6 2-1.8.9-.2 1.8-.2 2.6 0 .9.2 1.7.8 2 1.8.2.7.3 1.4.3 2.1m0-18.9h5.5c0-1.4-.2-2.8-.6-4.2-.5-1.7-1.8-3-3.4-3.7C11-.3 7.4-.3 4.1.9c-1.7.6-2.9 2-3.4 3.7-.8 2.8-.8 5.7 0 8.5.5 1.7 1.8 3 3.4 3.7 1.6.6 3.4.8 5.1.8s3.5-.3 5.1-.8c1.7-.6 2.9-2 3.4-3.7.1-.2.1-.5.2-.7L12.7 10c-.1.3-.1.6-.2.9-.3.9-1 1.6-2 1.8-.9.2-1.8.2-2.6 0-.9-.2-1.7-.8-2-1.8-.4-1.4-.4-2.9 0-4.2.3-.9 1-1.6 2-1.8.9-.2 1.8-.2 2.6 0 .9.2 1.7.8 2 1.8.2.7.3 1.3.3 2m7.4 14.6c-.4 1.4-.6 2.8-.6 4.2V40h5.5V27.6c0-.7.1-1.4.3-2 .3-.9 1-1.6 2-1.8.9-.2 1.8-.2 2.6 0 .9.2 1.7.8 2 1.8.4 1.4.4 2.8 0 4.1-.3.9-1 1.6-1.9 1.8-.9.2-1.8.2-2.6 0-.2-.1-.4-.1-.5-.2l1.9 5.1c1.7 0 3.5-.3 5.1-.8 1.7-.6 2.9-2 3.4-3.7.8-2.8.8-5.7 0-8.5-.5-1.7-1.8-3-3.4-3.7a14.9 14.9 0 0 0-10.2 0c-1.9.6-3.1 2-3.6 3.6" })]
 	});

package/dist/components/Picture/Picture.d.ts

@@ -0,0 +1,15 @@
+import { HTMLAttributes, JSX, ReactNode, Ref } from "react";
+//#region src/components/Picture/Picture.d.ts
+interface PictureProps extends HTMLAttributes<HTMLPictureElement> {
+  /** **(Optional)** Content inside the component. */
+  children?: string | ReactNode;
+  /** **(Optional)** Specify additional CSS classes. */
+  className?: string;
+  /** **(Optional)** Specify the image crop mode. */
+  crop?: "square" | "wide" | "thin" | "squircle" | "none";
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLPictureElement>;
+}
+declare const Picture: ({ children, className, crop, ref, ...props }: PictureProps) => JSX.Element;
+//#endregion
+export { Picture, Picture as default, PictureProps };

package/dist/components/Picture/Picture.js

@@ -0,0 +1,17 @@
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Picture/Picture.tsx
+const Picture = ({ children, className, crop, ref, ...props }) => {
+	const componentProps = {
+		className: clsx("coop-picture", className),
+		"data-crop": crop ?? void 0,
+		...props
+	};
+	return /* @__PURE__ */ jsx("picture", {
+		...componentProps,
+		ref,
+		children
+	});
+};
+//#endregion
+export { Picture, Picture as default };

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

@@ -0,0 +1,2 @@
+import { Picture, PictureProps } from "./Picture.js";
+export { Picture, Picture as default, PictureProps };

package/dist/components/Picture/index.js

@@ -0,0 +1,5 @@
+import { Picture } from "./Picture.js";
+//#region src/components/Picture/index.ts
+var Picture_default = Picture;
+//#endregion
+export { Picture, Picture_default as default };

package/dist/components/Prose/Prose.js

@@ -2,12 +2,15 @@ import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Prose/Prose.tsx
 const Prose = ({ children, className, full, ref, size, spacing, ...props }) => {
-	return /* @__PURE__ */ jsx("div", {
+	const componentProps = {
 		className: clsx("coop-prose ", className),
 		"data-full": full ?? void 0,
 		"data-size": size ?? void 0,
 		"data-spacing": spacing ?? void 0,
-		...props,
+		...props
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...componentProps,
 		ref,
 		children
 	});

package/dist/components/Radio/Radio.js

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

package/dist/components/Searchbox/Searchbox.js

@@ -1,12 +1,11 @@
 "use client";
-import { getSlotProp, hasUserBorder } from "../../utils/index.js";
 import { useId as useId$1 } from "../../hooks/useId.js";
 import { SearchIcon } from "../icons/SearchIcon.js";
+import { getSlotProp, hasUserBorder } from "../../utils/index.js";
 import { Button } from "../Button/Button.js";
 import { useSlots } from "../../hooks/useSlots.js";
 import TextInput_default from "../TextInput/index.js";
-import { FieldLabel } from "../Field/Field.js";
-import Field_default from "../Field/index.js";
+import { Field, FieldLabel } from "../Field/Field.js";
 import { SearchboxContext, useSearchbox } from "./Searchbox.context.js";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -60,14 +59,14 @@ const Searchbox = ({ action, children, className, id, label, labelVisible = fals
 				children: label
 			}), /* @__PURE__ */ jsxs("div", {
 				className: clsx("coop-searchbox--inner"),
-				children: [/* @__PURE__ */ jsx(Field_default, { children: slots.SearchboxInput }), slots.SearchboxButton]
+				children: [/* @__PURE__ */ jsx(Field, { children: slots.SearchboxInput }), slots.SearchboxButton]
 			})]
 		})
 	});
 };
 const SearchboxButton = ({ children, ...props }) => {
 	const searchbox = useSearchbox();
-	return /* @__PURE__ */ jsx(Button, {
+	const buttonProps = {
 		children: children ?? /* @__PURE__ */ jsx(SearchIcon, {
 			alt: "Search",
 			id: searchbox.buttonId + "__icon",
@@ -78,7 +77,8 @@ const SearchboxButton = ({ children, ...props }) => {
 		isLoading: searchbox.isLoading,
 		size: searchbox.size,
 		...props
-	});
+	};
+	return /* @__PURE__ */ jsx(Button, { ...buttonProps });
 };
 SearchboxButton.displayName = "Searchbox.Button";
 const SearchboxInput = (props) => {

package/dist/components/Select/Select.js

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

package/dist/components/Signpost/Signpost.js

@@ -9,14 +9,14 @@ import React from "react";
 */
 const Signpost = ({ as, children, className, headingLevel = "h3", href, image, ref, ...props }) => {
 	const element = as ?? "a";
-	return /* @__PURE__ */ jsxs("div", {
+	const componentProps = {
 		className: clsx("coop-signpost", className),
-		...props,
+		...props
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		...componentProps,
 		ref,
-		children: [image && /* @__PURE__ */ jsx(Image, {
-			crop: "wide",
-			...image
-		}), React.createElement(element, { href }, /* @__PURE__ */ jsxs("div", {
+		children: [image && /* @__PURE__ */ jsx(Image, { ...image }), React.createElement(element, { href }, /* @__PURE__ */ jsxs("div", {
 			className: "coop-signpost--content",
 			children: [React.createElement(headingLevel, { className: "coop-signpost--heading" }, children), /* @__PURE__ */ jsx("span", {
 				"aria-hidden": "true",

package/dist/components/SkipNav/SkipNav.js

@@ -15,10 +15,13 @@ const SkipNav = ({ className, isVisible = false, links = defaultLinks, ref, ...p
 		...componentProps,
 		ref,
 		children: /* @__PURE__ */ jsx("ul", { children: navLinks.map((link) => {
-			return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", {
+			const linkProps = {
 				"data-visible": isVisible,
 				href: link.href,
-				label: link.label,
+				label: link.label
+			};
+			return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", {
+				...linkProps,
 				children: link.label
 			}) }, link.href);
 		}) })

package/dist/components/Squircle/Squircle.js

@@ -3,10 +3,13 @@ import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Squircle/Squircle.tsx
 const Squircle = ({ children, className, ref, size = "md", ...props }) => {
-	return /* @__PURE__ */ jsx("figure", {
+	const componentProps = {
 		className: clsx("coop-squircle", !hasUserBg(className) && "bg-offer", className),
 		"data-size": size.length && size !== "md" ? size : void 0,
-		...props,
+		...props
+	};
+	return /* @__PURE__ */ jsx("figure", {
+		...componentProps,
 		ref,
 		children: /* @__PURE__ */ jsx("figcaption", { children })
 	});

package/dist/components/ValidationSummary/ValidationSummary.js

@@ -29,9 +29,12 @@ const ValidationSummary = ({ autoScroll = true, children, className, forceMount
 		hasErrors
 	]);
 	if (!hasErrors && !forceMount) return null;
-	return /* @__PURE__ */ jsxs("div", {
+	const componentProps = {
 		className: clsx("coop-validation-summary", className),
-		...props,
+		...props
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		...componentProps,
 		"aria-live": "assertive",
 		ref: mergeRefs(internalRef, ref),
 		role: "alert",

package/dist/components/icons/AccountCircleFilledIcon.js

@@ -4,7 +4,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/icons/AccountCircleFilledIcon.tsx
 const AccountCircleFilledIcon = ({ alt, className, fill, id, ref, ...props }) => {
 	const uid = useId(id);
-	return /* @__PURE__ */ jsxs("svg", {
+	const componentProps = {
 		"aria-labelledby": alt ? uid + "__title" : void 0,
 		className: clsx("coop-icon", className),
 		"data-icon": "account-circle-filled",
@@ -12,7 +12,10 @@ const AccountCircleFilledIcon = ({ alt, className, fill, id, ref, ...props }) =>
 		id: uid,
 		role: alt ? "img" : void 0,
 		viewBox: "0 0 32 32",
-		...props,
+		...props
+	};
+	return /* @__PURE__ */ jsxs("svg", {
+		...componentProps,
 		ref,
 		children: [alt ? /* @__PURE__ */ jsx("title", {
 			id: uid + "__title",

package/dist/components/icons/AccountCircleIcon.js

@@ -4,7 +4,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/icons/AccountCircleIcon.tsx
 const AccountCircleIcon = ({ alt, className, fill, id, ref, ...props }) => {
 	const uid = useId(id);
-	return /* @__PURE__ */ jsxs("svg", {
+	const componentProps = {
 		"aria-labelledby": alt ? uid + "__title" : void 0,
 		className: clsx("coop-icon", className),
 		"data-icon": "account-circle",
@@ -12,7 +12,10 @@ const AccountCircleIcon = ({ alt, className, fill, id, ref, ...props }) => {
 		id: uid,
 		role: alt ? "img" : void 0,
 		viewBox: "0 0 32 32",
-		...props,
+		...props
+	};
+	return /* @__PURE__ */ jsxs("svg", {
+		...componentProps,
 		ref,
 		children: [alt ? /* @__PURE__ */ jsx("title", {
 			id: uid + "__title",

package/dist/components/icons/AccountFilledIcon.js

@@ -4,7 +4,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/icons/AccountFilledIcon.tsx
 const AccountFilledIcon = ({ alt, className, fill, id, ref, ...props }) => {
 	const uid = useId(id);
-	return /* @__PURE__ */ jsxs("svg", {
+	const componentProps = {
 		"aria-labelledby": alt ? uid + "__title" : void 0,
 		className: clsx("coop-icon", className),
 		"data-icon": "account-filled",
@@ -12,7 +12,10 @@ const AccountFilledIcon = ({ alt, className, fill, id, ref, ...props }) => {
 		id: uid,
 		role: alt ? "img" : void 0,
 		viewBox: "0 0 32 32",
-		...props,
+		...props
+	};
+	return /* @__PURE__ */ jsxs("svg", {
+		...componentProps,
 		ref,
 		children: [alt ? /* @__PURE__ */ jsx("title", {
 			id: uid + "__title",

package/dist/components/icons/AccountIcon.js

@@ -4,7 +4,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/icons/AccountIcon.tsx
 const AccountIcon = ({ alt, className, fill, id, ref, ...props }) => {
 	const uid = useId(id);
-	return /* @__PURE__ */ jsxs("svg", {
+	const componentProps = {
 		"aria-labelledby": alt ? uid + "__title" : void 0,
 		className: clsx("coop-icon", className),
 		"data-icon": "account",
@@ -12,7 +12,10 @@ const AccountIcon = ({ alt, className, fill, id, ref, ...props }) => {
 		id: uid,
 		role: alt ? "img" : void 0,
 		viewBox: "0 0 32 32",
-		...props,
+		...props
+	};
+	return /* @__PURE__ */ jsxs("svg", {
+		...componentProps,
 		ref,
 		children: [alt ? /* @__PURE__ */ jsx("title", {
 			id: uid + "__title",

package/dist/components/icons/AddIcon.js

@@ -4,7 +4,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/icons/AddIcon.tsx
 const AddIcon = ({ alt, className, fill, id, ref, ...props }) => {
 	const uid = useId(id);
-	return /* @__PURE__ */ jsxs("svg", {
+	const componentProps = {
 		"aria-labelledby": alt ? uid + "__title" : void 0,
 		className: clsx("coop-icon", className),
 		"data-icon": "add",
@@ -12,7 +12,10 @@ const AddIcon = ({ alt, className, fill, id, ref, ...props }) => {
 		id: uid,
 		role: alt ? "img" : void 0,
 		viewBox: "0 0 32 32",
-		...props,
+		...props
+	};
+	return /* @__PURE__ */ jsxs("svg", {
+		...componentProps,
 		ref,
 		children: [alt ? /* @__PURE__ */ jsx("title", {
 			id: uid + "__title",

package/dist/components/icons/AppsFilledIcon.js

@@ -4,7 +4,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/icons/AppsFilledIcon.tsx
 const AppsFilledIcon = ({ alt, className, fill, id, ref, ...props }) => {
 	const uid = useId(id);
-	return /* @__PURE__ */ jsxs("svg", {
+	const componentProps = {
 		"aria-labelledby": alt ? uid + "__title" : void 0,
 		className: clsx("coop-icon", className),
 		"data-icon": "apps-filled",
@@ -12,7 +12,10 @@ const AppsFilledIcon = ({ alt, className, fill, id, ref, ...props }) => {
 		id: uid,
 		role: alt ? "img" : void 0,
 		viewBox: "0 0 32 32",
-		...props,
+		...props
+	};
+	return /* @__PURE__ */ jsxs("svg", {
+		...componentProps,
 		ref,
 		children: [alt ? /* @__PURE__ */ jsx("title", {
 			id: uid + "__title",

package/dist/components/icons/AppsIcon.js

@@ -4,7 +4,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/icons/AppsIcon.tsx
 const AppsIcon = ({ alt, className, fill, id, ref, ...props }) => {
 	const uid = useId(id);
-	return /* @__PURE__ */ jsxs("svg", {
+	const componentProps = {
 		"aria-labelledby": alt ? uid + "__title" : void 0,
 		className: clsx("coop-icon", className),
 		"data-icon": "apps",
@@ -12,7 +12,10 @@ const AppsIcon = ({ alt, className, fill, id, ref, ...props }) => {
 		id: uid,
 		role: alt ? "img" : void 0,
 		viewBox: "0 0 32 32",
-		...props,
+		...props
+	};
+	return /* @__PURE__ */ jsxs("svg", {
+		...componentProps,
 		ref,
 		children: [alt ? /* @__PURE__ */ jsx("title", {
 			id: uid + "__title",

package/dist/components/icons/ArrowDownIcon.js

@@ -4,7 +4,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/icons/ArrowDownIcon.tsx
 const ArrowDownIcon = ({ alt, className, fill, id, ref, ...props }) => {
 	const uid = useId(id);
-	return /* @__PURE__ */ jsxs("svg", {
+	const componentProps = {
 		"aria-labelledby": alt ? uid + "__title" : void 0,
 		className: clsx("coop-icon", className),
 		"data-icon": "arrow-down",
@@ -12,7 +12,10 @@ const ArrowDownIcon = ({ alt, className, fill, id, ref, ...props }) => {
 		id: uid,
 		role: alt ? "img" : void 0,
 		viewBox: "0 0 32 32",
-		...props,
+		...props
+	};
+	return /* @__PURE__ */ jsxs("svg", {
+		...componentProps,
 		ref,
 		children: [alt ? /* @__PURE__ */ jsx("title", {
 			id: uid + "__title",

package/dist/components/icons/ArrowLeftIcon.js

@@ -4,7 +4,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/icons/ArrowLeftIcon.tsx
 const ArrowLeftIcon = ({ alt, className, fill, id, ref, ...props }) => {
 	const uid = useId(id);
-	return /* @__PURE__ */ jsxs("svg", {
+	const componentProps = {
 		"aria-labelledby": alt ? uid + "__title" : void 0,
 		className: clsx("coop-icon", className),
 		"data-icon": "arrow-left",
@@ -12,7 +12,10 @@ const ArrowLeftIcon = ({ alt, className, fill, id, ref, ...props }) => {
 		id: uid,
 		role: alt ? "img" : void 0,
 		viewBox: "0 0 32 32",
-		...props,
+		...props
+	};
+	return /* @__PURE__ */ jsxs("svg", {
+		...componentProps,
 		ref,
 		children: [alt ? /* @__PURE__ */ jsx("title", {
 			id: uid + "__title",

package/dist/components/icons/ArrowRightIcon.js

@@ -4,7 +4,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/icons/ArrowRightIcon.tsx
 const ArrowRightIcon = ({ alt, className, fill, id, ref, ...props }) => {
 	const uid = useId(id);
-	return /* @__PURE__ */ jsxs("svg", {
+	const componentProps = {
 		"aria-labelledby": alt ? uid + "__title" : void 0,
 		className: clsx("coop-icon", className),
 		"data-icon": "arrow-right",
@@ -12,7 +12,10 @@ const ArrowRightIcon = ({ alt, className, fill, id, ref, ...props }) => {
 		id: uid,
 		role: alt ? "img" : void 0,
 		viewBox: "0 0 32 32",
-		...props,
+		...props
+	};
+	return /* @__PURE__ */ jsxs("svg", {
+		...componentProps,
 		ref,
 		children: [alt ? /* @__PURE__ */ jsx("title", {
 			id: uid + "__title",

package/dist/components/icons/ArrowUpIcon.js

@@ -4,7 +4,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/icons/ArrowUpIcon.tsx
 const ArrowUpIcon = ({ alt, className, fill, id, ref, ...props }) => {
 	const uid = useId(id);
-	return /* @__PURE__ */ jsxs("svg", {
+	const componentProps = {
 		"aria-labelledby": alt ? uid + "__title" : void 0,
 		className: clsx("coop-icon", className),
 		"data-icon": "arrow-up",
@@ -12,7 +12,10 @@ const ArrowUpIcon = ({ alt, className, fill, id, ref, ...props }) => {
 		id: uid,
 		role: alt ? "img" : void 0,
 		viewBox: "0 0 32 32",
-		...props,
+		...props
+	};
+	return /* @__PURE__ */ jsxs("svg", {
+		...componentProps,
 		ref,
 		children: [alt ? /* @__PURE__ */ jsx("title", {
 			id: uid + "__title",