@coopdigital/react 1.19.0 → 1.20.0

package/dist/components/icons/VoucherFilledIcon.js

@@ -4,7 +4,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/icons/VoucherFilledIcon.tsx
 const VoucherFilledIcon = ({ 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": "voucher-filled",
@@ -12,7 +12,10 @@ const VoucherFilledIcon = ({ 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/VoucherIcon.js

@@ -4,7 +4,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/icons/VoucherIcon.tsx
 const VoucherIcon = ({ 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": "voucher",
@@ -12,7 +12,10 @@ const VoucherIcon = ({ 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/WarningCircleFilledIcon.js

@@ -4,7 +4,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/icons/WarningCircleFilledIcon.tsx
 const WarningCircleFilledIcon = ({ 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": "warning-circle-filled",
@@ -12,7 +12,10 @@ const WarningCircleFilledIcon = ({ 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/WarningCircleIcon.js

@@ -4,7 +4,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/icons/WarningCircleIcon.tsx
 const WarningCircleIcon = ({ 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": "warning-circle",
@@ -12,7 +12,10 @@ const WarningCircleIcon = ({ 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", {

package/dist/components/icons/WarningFilledIcon.js

@@ -4,7 +4,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/icons/WarningFilledIcon.tsx
 const WarningFilledIcon = ({ 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": "warning-filled",
@@ -12,7 +12,10 @@ const WarningFilledIcon = ({ 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/WarningIcon.js

@@ -4,7 +4,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/icons/WarningIcon.tsx
 const WarningIcon = ({ 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": "warning",
@@ -12,7 +12,10 @@ const WarningIcon = ({ 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/WifiIcon.js

@@ -4,7 +4,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/icons/WifiIcon.tsx
 const WifiIcon = ({ 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": "wifi",
@@ -12,7 +12,10 @@ const WifiIcon = ({ 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/WriteIcon.js

@@ -4,7 +4,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/icons/WriteIcon.tsx
 const WriteIcon = ({ 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": "write",
@@ -12,7 +12,10 @@ const WriteIcon = ({ 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/hooks/useSlots.js

@@ -31,9 +31,10 @@ function getSlotName(node) {
 function useSlots(componentSlots, children, options) {
 	return React.Children.toArray(children).reduce((slots, child) => {
 		const slotName = getSlotName(child);
-		if (child && slotName && isKey(componentSlots, slotName)) if (options?.collect?.includes(slotName)) slots[slotName] = slots[slotName] ? [...[slots[slotName]].flat(), child] : [child];
-		else slots[slotName] = child;
-		else if ("Children" in slots) slots.Children = slots.Children ? [...[slots.Children].flat(), child] : [child];
+		if (child && slotName && isKey(componentSlots, slotName)) {
+			if (options?.collect?.includes(slotName)) slots[slotName] = slots[slotName] ? [...[slots[slotName]].flat(), child] : [child];
+			else slots[slotName] = child;
+		} else if ("Children" in slots) slots.Children = slots.Children ? [...[slots.Children].flat(), child] : [child];
 		return slots;
 	}, { ...componentSlots });
 }

package/dist/index.d.ts

@@ -2,7 +2,9 @@ import { AlertBanner, AlertBannerHeading, AlertBannerProps } from "./components/
 import { Image, ImageProps } from "./components/Image/Image.js";
 import { Author, AuthorProps } from "./components/Author/Author.js";
 import { Button, ButtonProps } from "./components/Button/Button.js";
-import { Card, CardBadge, CardBody, CardHeading, CardImage, CardLabel, CardProps } from "./components/Card/Card.js";
+import { Picture, PictureProps } from "./components/Picture/Picture.js";
+import "./components/Picture/index.js";
+import { Card, CardBadge, CardContent, CardHeading, CardIcon, CardImage, CardLink, CardPicture, CardProps } from "./components/Card/Card.js";
 import { Checkbox, CheckboxProps } from "./components/Checkbox/Checkbox.js";
 import { DatePicker, DatePickerProps } from "./components/DatePicker/DatePicker.js";
 import { Dialog, DialogBody, DialogHeader, DialogProps } from "./components/Dialog/Dialog.js";
@@ -27,4 +29,4 @@ import { Squircle, SquircleProps } from "./components/Squircle/Squircle.js";
 import { Tag, TagProps } from "./components/Tag/Tag.js";
 import { Textarea, TextareaProps } from "./components/Textarea/Textarea.js";
 import { ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt, ValidationSummaryProps } from "./components/ValidationSummary/ValidationSummary.js";
-export { AlertBanner, AlertBannerHeading, AlertBannerProps, Author, AuthorProps, Button, ButtonProps, Card, CardBadge, CardBody, CardHeading, CardImage, CardLabel, CardProps, Checkbox, CheckboxProps, DatePicker, DatePickerProps, Dialog, DialogBody, DialogHeader, DialogProps, Expandable, ExpandableContent, ExpandableProps, ExpandableSummary, Field, FieldError, FieldHint, FieldLabel, Fieldset, FieldsetError, FieldsetFields, FieldsetHint, FieldsetLegend, FieldsetProps, Flourish, FlourishProps, Form, FormProps, Image, ImageProps, LoadingSpinner, LoadingSpinnerProps, Logo, LogoProps, PasswordInput, PasswordInputProps, Pill, PillBadge, PillProps, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverProps, PopoverTrigger, Radio, RadioProps, RootSVG, Searchbox, SearchboxButton, SearchboxInput, SearchboxProps, Select, SelectOption, SelectOptionGroup, SelectProps, Signpost, SignpostProps, SkipNav, SkipNavProps, Squircle, SquircleProps, Tag, TagProps, TextInput, TextInputProps, Textarea, TextareaProps, ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt, ValidationSummaryProps };
+export { AlertBanner, AlertBannerHeading, AlertBannerProps, Author, AuthorProps, Button, ButtonProps, Card, CardBadge, CardContent, CardHeading, CardIcon, CardImage, CardLink, CardPicture, CardProps, Checkbox, CheckboxProps, DatePicker, DatePickerProps, Dialog, DialogBody, DialogHeader, DialogProps, Expandable, ExpandableContent, ExpandableProps, ExpandableSummary, Field, FieldError, FieldHint, FieldLabel, Fieldset, FieldsetError, FieldsetFields, FieldsetHint, FieldsetLegend, FieldsetProps, Flourish, FlourishProps, Form, FormProps, Image, ImageProps, LoadingSpinner, LoadingSpinnerProps, Logo, LogoProps, PasswordInput, PasswordInputProps, Picture, PictureProps, Pill, PillBadge, PillProps, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverProps, PopoverTrigger, Radio, RadioProps, RootSVG, Searchbox, SearchboxButton, SearchboxInput, SearchboxProps, Select, SelectOption, SelectOptionGroup, SelectProps, Signpost, SignpostProps, SkipNav, SkipNavProps, Squircle, SquircleProps, Tag, TagProps, TextInput, TextInputProps, Textarea, TextareaProps, ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt, ValidationSummaryProps };

package/dist/index.js

@@ -3,7 +3,8 @@ import { Image } from "./components/Image/Image.js";
 import { Author } from "./components/Author/Author.js";
 import { LoadingSpinner } from "./components/LoadingSpinner/LoadingSpinner.js";
 import { Button } from "./components/Button/Button.js";
-import { Card, CardBadge, CardBody, CardHeading, CardImage, CardLabel } from "./components/Card/Card.js";
+import { Picture } from "./components/Picture/Picture.js";
+import { Card, CardBadge, CardContent, CardHeading, CardIcon, CardImage, CardLink, CardPicture } from "./components/Card/Card.js";
 import { Checkbox } from "./components/Checkbox/Checkbox.js";
 import { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger } from "./components/Popover/Popover.js";
 import { TextInput } from "./components/TextInput/TextInput.js";
@@ -27,4 +28,4 @@ import { Squircle } from "./components/Squircle/Squircle.js";
 import { Tag } from "./components/Tag/Tag.js";
 import { Textarea } from "./components/Textarea/Textarea.js";
 import { ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt } from "./components/ValidationSummary/ValidationSummary.js";
-export { AlertBanner, AlertBannerHeading, Author, Button, Card, CardBadge, CardBody, CardHeading, CardImage, CardLabel, Checkbox, DatePicker, Dialog, DialogBody, DialogHeader, Expandable, ExpandableContent, ExpandableSummary, Field, FieldError, FieldHint, FieldLabel, Fieldset, FieldsetError, FieldsetFields, FieldsetHint, FieldsetLegend, Flourish, Form, Image, LoadingSpinner, Logo, PasswordInput, Pill, PillBadge, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Radio, RootSVG, Searchbox, SearchboxButton, SearchboxInput, Select, SelectOption, SelectOptionGroup, Signpost, SkipNav, Squircle, Tag, TextInput, Textarea, ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt };
+export { AlertBanner, AlertBannerHeading, Author, Button, Card, CardBadge, CardContent, CardHeading, CardIcon, CardImage, CardLink, CardPicture, Checkbox, DatePicker, Dialog, DialogBody, DialogHeader, Expandable, ExpandableContent, ExpandableSummary, Field, FieldError, FieldHint, FieldLabel, Fieldset, FieldsetError, FieldsetFields, FieldsetHint, FieldsetLegend, Flourish, Form, Image, LoadingSpinner, Logo, PasswordInput, Picture, Pill, PillBadge, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Radio, RootSVG, Searchbox, SearchboxButton, SearchboxInput, Select, SelectOption, SelectOptionGroup, Signpost, SkipNav, Squircle, Tag, TextInput, Textarea, ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -49,6 +49,7 @@
     "test:e2e:ci": "npx playwright test --shard=$CI_NODE_INDEX/$CI_NODE_TOTAL",
     "build": "tsx scripts build",
     "build:docs": "tsx scripts build-docs",
+    "build:docs:all": "tsx scripts build-docs --all",
     "build:icons": "tsx scripts build-icons",
     "build:manifest": "tsx scripts build-manifest",
     "build:storybook": "storybook build --disable-telemetry",
@@ -65,20 +66,20 @@
   "devDependencies": {
     "@axe-core/playwright": "^4.13.0",
     "@playwright/test": "^1.62.1",
-    "@storybook/addon-a11y": "^10.5.8",
-    "@storybook/addon-docs": "^10.5.8",
-    "@storybook/addon-onboarding": "^10.5.8",
-    "@storybook/react-vite": "^10.5.8",
+    "@storybook/addon-a11y": "^10.5.10",
+    "@storybook/addon-docs": "^10.5.10",
+    "@storybook/addon-onboarding": "^10.5.10",
+    "@storybook/react-vite": "^10.5.10",
     "@testing-library/jest-dom": "^7.0.1",
-    "@testing-library/react": "^16.3.2",
+    "@testing-library/react": "^16.3.3",
     "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.4",
+    "@types/react-dom": "^19.2.5",
     "@whitespace/storybook-addon-html": "^9.0.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "resize-observer-polyfill": "^1.5.1",
     "serve": "^14.2.6",
-    "storybook": "^10.5.8",
+    "storybook": "^10.5.10",
     "storybook-addon-tag-badges": "^3.1.0"
   },
   "peerDependencies": {
@@ -102,12 +103,12 @@
     "storybook": "$storybook"
   },
   "dependencies": {
-    "@coopdigital/styles": "^1.13.1",
+    "@coopdigital/styles": "^1.14.0",
     "@radix-ui/react-popover": "^1.1.23",
     "clsx": "^2.1.1",
     "date-fns": "^4.4.0",
     "merge-refs": "^2.0.0",
     "react-day-picker": "^10.0.1"
   },
-  "gitHead": "773b6e1ec18be0a33b2dd40a336f7a6bee54a259"
+  "gitHead": "ed9a9d2eea7a2455ebcefd75bd1bc19994be87ee"
 }

package/src/components/Author/Author.tsx

@@ -2,7 +2,7 @@ import type { HTMLAttributes, JSX, Ref } from "react"
 
 import clsx from "clsx"
 
-import { Image, ImageProps } from "../Image"
+import { Image, ImageProps } from "@/components/Image"
 
 export interface AuthorProps extends HTMLAttributes<HTMLDivElement> {
   /** **(Optional)** Specify the Author name. */

package/src/components/Button/Button.tsx

@@ -5,8 +5,8 @@ import type { ButtonHTMLAttributes, ForwardRefExoticComponent, JSX, Ref } from "
 import clsx from "clsx"
 import React, { useCallback, useState } from "react"
 
-import { hasUserBg } from "../../utils"
-import { LoadingSpinner } from "./../LoadingSpinner"
+import { LoadingSpinner } from "@/components/LoadingSpinner"
+import { hasUserBg } from "@/utils"
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   /** **(Optional)** Specify a custom element to override default `a` or `button`. */