@coopdigital/react 1.19.1 → 1.21.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";
@@ -23,8 +25,8 @@ import { Searchbox, SearchboxButton, SearchboxInput, SearchboxProps } from "./co
 import { Select, SelectOption, SelectOptionGroup, SelectProps } from "./components/Select/Select.js";
 import { Signpost, SignpostProps } from "./components/Signpost/Signpost.js";
 import { SkipNav, SkipNavProps } from "./components/SkipNav/SkipNav.js";
-import { Squircle, SquircleProps } from "./components/Squircle/Squircle.js";
+import { Squircle, SquircleProps, SquircleSvgProps } 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, SquircleSvgProps, 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.1",
+  "version": "1.21.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -66,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": {
@@ -103,12 +103,12 @@
     "storybook": "$storybook"
   },
   "dependencies": {
-    "@coopdigital/styles": "^1.13.2",
+    "@coopdigital/styles": "^1.15.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": "63e8cb1427d5e504b3390bb1c1028a30c76c9053"
+  "gitHead": "a54fd337dade28ed2d1e1f7d4d0e2cfeb7b90c9e"
 }

package/src/components/Card/Card.tsx

@@ -1,152 +1,153 @@
-import type { ForwardRefExoticComponent, HTMLAttributes, JSX, Ref } from "react"
+import type {
+  AnchorHTMLAttributes,
+  ForwardRefExoticComponent,
+  HTMLAttributes,
+  JSX,
+  Ref,
+} from "react"
 
 import clsx from "clsx"
 import React from "react"
 
-import { ChevronRightIcon } from "@/components/icons/ChevronRightIcon"
 import { Image, ImageProps } from "@/components/Image"
+import Picture, { PictureProps } from "@/components/Picture"
 import { useSlots } from "@/hooks/useSlots"
+import { StandardSizes } from "@/types"
 import { hasUserBg } from "@/utils"
 
 export 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`. */
-  // oxlint-disable-next-line typescript/no-explicit-any
-  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 CardBodyProps extends HTMLAttributes<HTMLDivElement> {
+//   /** **(Optional)** Content inside the Body. */
+//   children?: React.ReactNode
+// }
+
+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`. */
+  // oxlint-disable-next-line typescript/no-explicit-any
+  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
 }
 
 const componentSlots = {
   CardBadge: null,
-  CardBody: null,
-  CardHeading: null,
-  CardImage: null,
-  CardLabel: null,
   Children: null,
 }
 
-function getCardLinkElement(as: CardProps["hrefAs"], href?: string) {
-  return {
-    element: as ?? "a",
-    props: {
-      className: "coop-card--link",
-      href,
-    },
-  }
-}
-
 const Card = ({
   adaptive,
-  chevron = false,
+  as = "article",
   children,
   className,
-  href,
-  hrefAs,
   orientation,
+  padding,
+  radius,
   ref,
   signpost,
   ...props
 }: CardProps): JSX.Element => {
-  const { element: linkElement, props: linkProps } = getCardLinkElement(hrefAs, href)
-
   const slots = { ...useSlots(componentSlots, children) }
-  const hasLinkWrapper = href && !slots.CardHeading
 
   const componentProps = {
     className: clsx("coop-card", !hasUserBg(className) && "bg-white", className),
     "data-adaptive": adaptive ?? undefined,
     "data-orientation": orientation ?? undefined,
+    "data-padding": padding ?? undefined,
+    "data-radius": radius ?? undefined,
     "data-signpost": signpost ?? undefined,
     ...props,
   }
 
-  if (href && slots.CardHeading) {
-    slots.CardHeading = React.createElement(linkElement, linkProps, slots.CardHeading)
-  }
+  const cardContent = React.createElement(as, { ref, ...componentProps }, slots.Children)
 
-  return (
-    <article ref={ref} {...componentProps}>
-      {slots.CardImage}
+  return slots.CardBadge ? (
+    <div className="coop-card-wrapper">
+      {cardContent}
       {slots.CardBadge}
-      {React.createElement(
-        hasLinkWrapper ? linkElement : "div",
-        hasLinkWrapper
-          ? { className: "coop-card--content", href }
-          : { className: "coop-card--content" },
-        <>
-          {slots.CardLabel}
-          {slots.CardHeading}
-          {slots.CardBody}
-          {slots.Children}
-        </>
-      )}
-      {(chevron || signpost) && (
-        <span aria-hidden="true" className="coop-card--icon" role="presentation">
-          <ChevronRightIcon />
-        </span>
-      )}
-    </article>
+    </div>
+  ) : (
+    cardContent
   )
 }
 
@@ -163,47 +164,92 @@ const CardHeading = ({
   )
 }
 
-const CardLabel = ({ children, className, ...props }: CardLabelProps): JSX.Element => {
-  return (
-    <span className={clsx("coop-card--label", className)} {...props}>
-      {children}
-    </span>
-  )
+const CardIcon = ({ children, className, ...props }: CardIconProps): JSX.Element => {
+  const componentProps = {
+    className: clsx("coop-card--icon", className),
+    ...props,
+  }
+  return <span {...componentProps}>{children}</span>
 }
 
 const CardBadge = ({
   align = "right",
   children,
+  className,
   position = "popout",
   ...props
 }: CardBadgeProps): JSX.Element => {
-  return (
-    <div className="coop-card--badge" data-align={align} data-position={position} {...props}>
-      {children}
-    </div>
-  )
+  const componentProps = {
+    className: clsx("coop-card--badge", className),
+    "data-align": align,
+    "data-position": position,
+    ...props,
+  }
+  return <div {...componentProps}>{children}</div>
+}
+
+// const CardBody = ({ children }: CardBodyProps): JSX.Element => {
+//   return <>{children}</>
+// }
+
+const CardPicture = ({
+  align,
+  children,
+  className,
+  crop,
+  ...props
+}: CardPictureProps): JSX.Element => {
+  const componentProps = {
+    className: clsx("coop-card--picture", className),
+    "data-align": align ?? undefined,
+    "data-crop": crop ?? "wide",
+    ...props,
+  }
+  return <Picture {...componentProps}>{children}</Picture>
 }
 
-const CardBody = ({ children }: CardBodyProps): JSX.Element => {
-  return <>{children}</>
+const CardImage = (props: ImageProps): JSX.Element => <Image {...props} />
+
+const CardContent = ({ children, className, ...props }: CardContentProps): JSX.Element => {
+  const componentProps = {
+    className: clsx("coop-card--content", className),
+    ...props,
+  }
+  return <div {...componentProps}>{children}</div>
 }
 
-const CardImage = ({ align, crop, ...props }: CardImageProps): JSX.Element => {
-  return <Image {...{ ...props, crop: crop ?? "wide", "data-align": align ?? undefined }} />
+const CardLink = ({
+  as = "a",
+  children,
+  className,
+  href,
+  ...props
+}: CardLinkProps): JSX.Element => {
+  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" }
+CardLink.slot = { name: "CardLink" }
+
+CardPicture.slot = { name: "CardPicture" }
 
-Card.Label = CardLabel
+Card.Link = CardLink
 Card.Heading = CardHeading
 Card.Badge = CardBadge
-Card.Body = CardBody
+Card.Content = CardContent
+Card.Icon = CardIcon
 Card.Image = CardImage
 
+Card.Picture = CardPicture
+
 export default Card
-export { Card, CardBadge, CardBody, CardHeading, CardImage, CardLabel }
+export { Card, CardBadge, CardContent, CardHeading, CardIcon, CardImage, CardLink, CardPicture }