@coopdigital/react 0.42.0 → 0.43.0

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

@@ -1,10 +1,7 @@
 import type { ForwardRefExoticComponent, HTMLAttributes, JSX } from "react";
 import React from "react";
-import { Lights, Tints, White } from "../../types/colors";
 import { ImageProps } from "../Image";
 export interface CardProps extends HTMLAttributes<HTMLDivElement> {
-    /** **(Optional)** Specify the Card background color. */
-    background?: Tints | White;
     /** **(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. */
@@ -21,8 +18,6 @@ export interface CardProps extends HTMLAttributes<HTMLDivElement> {
     orientation?: "vertical" | "horizontal";
 }
 interface CardLabelProps extends HTMLAttributes<HTMLSpanElement> {
-    /** **(Optional)** Specify the Label background color. */
-    background?: Lights;
     /** **(Optional)** Content inside the Label. */
     children?: React.ReactNode;
     /** **(Optional)** Specify additional CSS classes to be applied to the Label. */
@@ -52,9 +47,9 @@ interface CardBadgeProps extends HTMLAttributes<HTMLDivElement> {
 }
 type CardImageProps = ImageProps;
 export declare const Card: {
-    ({ background, chevron, children, className, href, hrefAs, imagePosition, orientation, ...props }: CardProps): JSX.Element;
+    ({ chevron, children, className, href, hrefAs, imagePosition, orientation, ...props }: CardProps): JSX.Element;
     Label: {
-        ({ background, children, className }: CardLabelProps): JSX.Element;
+        ({ children, className }: CardLabelProps): JSX.Element;
         displayName: string;
     };
     Heading: {

package/dist/components/Card/Card.js

@@ -1,7 +1,6 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import React from 'react';
-import { bgPropToClass } from '../../utils/index.js';
 import { getSlots } from '../../utils/slots.js';
 import { ChevronRightIcon } from '../Icon/ChevronRightIcon.js';
 import { Image } from '../Image/Image.js';
@@ -23,13 +22,13 @@ function getCardLinkElement(as, href) {
         },
     };
 }
-const Card = ({ background = "white", chevron = false, children, className, href, hrefAs, imagePosition = "left", orientation = "vertical", ...props }) => {
+const Card = ({ chevron = false, children, className, href, hrefAs, imagePosition = "left", orientation = "vertical", ...props }) => {
     const { element: linkElement, props: linkProps } = getCardLinkElement(hrefAs, href);
     const slots = getSlots(componentSlots, children);
     const innerProps = { className: "coop-card--inner" };
     const hasLinkWrapper = href && !slots.CardHeading;
     const componentProps = {
-        className: clsx("coop-card", background && bgPropToClass(background, className), className),
+        className: clsx("coop-card", className),
         "data-image-pos": imagePosition,
         "data-orientation": orientation !== "vertical" ? orientation : undefined,
         ...props,
@@ -43,8 +42,8 @@ const CardHeading = ({ as = "h3", children, className }) => {
     return React.createElement(as, { className: clsx("coop-card--heading", className) }, children);
 };
 CardHeading.displayName = "Card.Heading";
-const CardLabel = ({ background, children, className }) => {
-    return (jsx("span", { className: clsx("coop-card--label", className, background && bgPropToClass(background, className)), children: children }));
+const CardLabel = ({ children, className }) => {
+    return jsx("span", { className: clsx("coop-card--label", className), children: children });
 };
 CardLabel.displayName = "Card.Label";
 const CardBadge = ({ align = "right", children, position = "popout", ...props }) => {

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

@@ -1,6 +1,5 @@
 import type { InputHTMLAttributes, JSX } from "react";
 import { FormFieldError, StandardSizes } from "../../../src/types";
-import { TagProps } from "../Tag";
 export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
     /** **(Optional)** Specify additional CSS classes to be applied to the component. */
     className?: string;
@@ -30,10 +29,10 @@ export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement
     size?: StandardSizes;
     /** **(Optional)** Specify the Checkbox tag text. */
     tag?: string;
-    /** **(Optional)** Specify the Checkbox tag background color. */
-    tagBackground?: TagProps["background"];
+    /** **(Optional)** Specify the Checkbox tag className. */
+    tagClassName?: string;
     /** **(Optional)** Specify the Checkbox variant. */
     variant?: "default" | "boxed";
 }
-export declare const Checkbox: ({ className, disabled, error, hint, id, label, labelVisible, name, size, tag, tagBackground, variant, ...props }: CheckboxProps) => JSX.Element;
+export declare const Checkbox: ({ className, disabled, error, hint, id, label, labelVisible, name, size, tag, tagClassName, variant, ...props }: CheckboxProps) => JSX.Element;
 export default Checkbox;

package/dist/components/Checkbox/Checkbox.js

@@ -6,7 +6,7 @@ import { FieldHint } from '../FieldHint/FieldHint.js';
 import { FieldLabel } from '../FieldLabel/FieldLabel.js';
 import { Tag } from '../Tag/Tag.js';
 
-const Checkbox = ({ className, disabled, error = false, hint, id, label, labelVisible = true, name, size = "md", tag, tagBackground, variant = "default", ...props }) => {
+const Checkbox = ({ className, disabled, error = false, hint, id, label, labelVisible = true, name, size = "md", tag, tagClassName, variant = "default", ...props }) => {
     const internalId = useId();
     id = id !== null && id !== void 0 ? id : internalId;
     const componentProps = {
@@ -21,7 +21,7 @@ const Checkbox = ({ className, disabled, error = false, hint, id, label, labelVi
         ...props,
     };
     const formItemProps = { "aria-disabled": disabled ? true : undefined };
-    return (jsxs("div", { className: "coop-form-item", ...formItemProps, children: [jsxs("div", { className: "coop-checkbox-wrapper", children: [jsxs("div", { className: "coop-checkbox-input-wrapper", children: [jsx("input", { ...componentProps }), label && (jsxs(FieldLabel, { htmlFor: id, isVisible: labelVisible, children: [jsx("span", { children: label }), " ", tag && (jsx(Tag, { background: tagBackground, size: "sm", children: tag }))] }))] }), hint && jsx(FieldHint, { children: hint })] }), typeof error === "object" && (error === null || error === void 0 ? void 0 : error.message) && jsx(FieldError, { children: error.message })] }));
+    return (jsxs("div", { className: "coop-form-item", ...formItemProps, children: [jsxs("div", { className: "coop-checkbox-wrapper", children: [jsxs("div", { className: "coop-checkbox-input-wrapper", children: [jsx("input", { ...componentProps }), label && (jsxs(FieldLabel, { htmlFor: id, isVisible: labelVisible, children: [jsx("span", { children: label }), " ", tag && (jsx(Tag, { className: tagClassName, size: "sm", children: tag }))] }))] }), hint && jsx(FieldHint, { children: hint })] }), typeof error === "object" && (error === null || error === void 0 ? void 0 : error.message) && jsx(FieldError, { children: error.message })] }));
 };
 
 export { Checkbox, Checkbox as default };

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

@@ -1,14 +1,21 @@
-import type { DetailsHTMLAttributes, JSX } from "react";
-import { None, Tints, White } from "../../types/colors";
+import type { DetailsHTMLAttributes, HTMLAttributes, JSX } from "react";
 export interface ExpandableProps extends DetailsHTMLAttributes<HTMLDetailsElement> {
-    /** **(Optional)** Specify the Expandable background color. */
-    background?: Tints | White | None;
     /** Main content inside the component, only visible when it is open. It can be any valid JSX or string. */
     children: React.ReactNode;
     /** **(Optional)** Specify additional CSS classes to be applied to the component. */
     className?: string;
-    /** Specify the summary text to show when the Expandable is not open. */
-    summary: React.ReactNode;
 }
-export declare const Expandable: ({ background, children, className, summary, ...props }: ExpandableProps) => JSX.Element;
+interface ExpandableSummaryProps extends HTMLAttributes<HTMLElement> {
+    /** **(Optional)** Content inside the Summary. */
+    children?: React.ReactNode;
+    /** **(Optional)** Specify additional CSS classes to be applied to the Summary. */
+    className?: string;
+}
+export declare const Expandable: {
+    ({ children, className, ...props }: ExpandableProps): JSX.Element;
+    Summary: {
+        ({ children, className, ...props }: ExpandableSummaryProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
 export default Expandable;

package/dist/components/Expandable/Expandable.js

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

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

@@ -1,12 +1,12 @@
 import type { JSX, ReactNode, SVGProps } from "react";
-import { BrandBlue, Darks, Lights, OfferRed } from "../../types/colors";
+import { Black, BrandBlue, Darks, Lights, OfferRed, Tints, White } from "../../types/colors";
 export interface FlourishProps extends SVGProps<SVGSVGElement> {
     /** Specify the text to be highlighted by the Flourish. */
     children: string | ReactNode;
     /** **(Optional)** Specify additional CSS classes to be applied to the component. */
     className?: string;
     /** **(Optional)** Specify the Flourish color. */
-    fill?: Darks | Lights | OfferRed | BrandBlue;
+    fill?: Darks | Lights | Tints | OfferRed | BrandBlue | White | Black;
 }
 export declare const Flourish: ({ children, className, fill, ...props }: FlourishProps) => JSX.Element;
 export default Flourish;

package/dist/components/Flourish/Flourish.js

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

package/dist/components/Pill/Pill.d.ts

@@ -1,16 +1,9 @@
-import type { AnchorHTMLAttributes, ForwardRefExoticComponent, HTMLAttributes, JSX } from "react";
+import type { ForwardRefExoticComponent, HTMLAttributes, JSX } from "react";
 import React from "react";
 import { StandardSizes } from "src/types";
-import { Darks, OfferRed, Tints } from "../../types/colors";
 export interface PillProps extends HTMLAttributes<HTMLAnchorElement> {
     /** **(Optional)** Specify a custom element to override default `a` or `span`. */
-    as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string;
-    /** **(Optional)** Specify the Pill background color. */
-    background?: Tints;
-    /** **(Optional)** Specify text to display inside the badge. */
-    badge?: string;
-    /** **(Optional)** Specify the badge background color. */
-    badgeBackground?: Darks | OfferRed;
+    as?: React.FC<any> | ForwardRefExoticComponent<any> | string;
     /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
     children?: React.ReactNode;
     /** **(Optional)** Specify additional CSS classes to be applied to the component. */
@@ -20,5 +13,17 @@ export interface PillProps extends HTMLAttributes<HTMLAnchorElement> {
     /** **(Optional)** Specify the Pill size. */
     size?: StandardSizes;
 }
-export declare const Pill: ({ as, background, badge, badgeBackground, children, className, href, size, ...props }: PillProps) => JSX.Element;
+interface PillBadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    /** **(Optional)** Content inside the Badge. */
+    children?: React.ReactNode;
+    /** **(Optional)** Specify additional CSS classes to be applied to the Badge. */
+    className?: string;
+}
+export declare const Pill: {
+    ({ as, children, className, href, size, ...props }: PillProps): JSX.Element;
+    Badge: {
+        ({ children, className }: PillBadgeProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
 export default Pill;

package/dist/components/Pill/Pill.js

@@ -1,21 +1,31 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import React from 'react';
-import { bgPropToClass } from '../../utils/index.js';
+import { hasUserBg } from '../../utils/index.js';
+import { getSlots } from '../../utils/slots.js';
 
-const Pill = ({ as, background = "tint-grey", badge, badgeBackground = "offer-red", children, className, href, size = "md", ...props }) => {
+const componentSlots = {
+    Children: null,
+    PillBadge: null,
+};
+const Pill = ({ as, children, className, href, size = "md", ...props }) => {
     let element = href ? "a" : "span";
+    const slots = getSlots(componentSlots, children);
     if (as) {
         element = as;
     }
     const componentProps = {
-        className: clsx("coop-pill", bgPropToClass(background, className), className),
+        className: clsx("coop-pill", !hasUserBg(className) && "bg-tint-grey", className),
         "data-size": size.length && size !== "md" ? size : undefined,
         href,
         ...props,
     };
-    const finalChildren = badge ? (jsxs(Fragment, { children: [children, jsx("span", { className: clsx("coop-pill--badge", bgPropToClass(badgeBackground)), children: badge })] })) : (children);
-    return React.createElement(element, { ...componentProps }, finalChildren);
+    return React.createElement(element, { ...componentProps }, slots.PillBadge, slots.Children);
+};
+const PillBadge = ({ children, className }) => {
+    return (jsx("span", { className: clsx("coop-pill--badge", !hasUserBg(className) && "bg-offer-red", className), children: children }));
 };
+PillBadge.displayName = "Pill.Badge";
+Pill.Badge = PillBadge;
 
 export { Pill, Pill as default };

package/dist/components/RadioButton/RadioButton.d.ts

@@ -1,6 +1,5 @@
 import { type InputHTMLAttributes, type JSX } from "react";
 import { FormFieldError, StandardSizes } from "src/types";
-import { TagProps } from "../Tag";
 export interface RadioButtonProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
     /** **(Optional)** Specify additional CSS classes to be applied to the component. */
     className?: string;
@@ -30,8 +29,8 @@ export interface RadioButtonProps extends Omit<InputHTMLAttributes<HTMLInputElem
     size?: StandardSizes;
     /** **(Optional)** Specify the RadioButton tag text. */
     tag?: string;
-    /** **(Optional)** Specify the RadioButton tag background color. */
-    tagBackground?: TagProps["background"];
+    /** **(Optional)** Specify the RadioButton tag className. */
+    tagClassName?: string;
 }
-export declare const RadioButton: ({ className, disabled, error, hint, id, label, labelVisible, name, size, tag, tagBackground, ...props }: RadioButtonProps) => JSX.Element;
+export declare const RadioButton: ({ className, disabled, error, hint, id, label, labelVisible, name, size, tag, tagClassName, ...props }: RadioButtonProps) => JSX.Element;
 export default RadioButton;

package/dist/components/RadioButton/RadioButton.js

@@ -6,7 +6,7 @@ import { FieldHint } from '../FieldHint/FieldHint.js';
 import { FieldLabel } from '../FieldLabel/FieldLabel.js';
 import { Tag } from '../Tag/Tag.js';
 
-const RadioButton = ({ className, disabled, error = false, hint, id, label, labelVisible = true, name, size = "md", tag, tagBackground, ...props }) => {
+const RadioButton = ({ className, disabled, error = false, hint, id, label, labelVisible = true, name, size = "md", tag, tagClassName, ...props }) => {
     const internalId = useId();
     id = id !== null && id !== void 0 ? id : internalId;
     const componentProps = {
@@ -20,7 +20,7 @@ const RadioButton = ({ className, disabled, error = false, hint, id, label, labe
         ...props,
     };
     const formItemProps = { "aria-disabled": disabled ? true : undefined };
-    return (jsxs("div", { className: "coop-form-item", ...formItemProps, children: [jsxs("div", { className: "coop-radio-button-wrapper", children: [jsxs("div", { className: "coop-radio-button-input-wrapper", children: [jsx("input", { ...componentProps }), label && (jsxs(FieldLabel, { htmlFor: id, isVisible: labelVisible, children: [jsx("span", { children: label }), " ", tag && (jsx(Tag, { background: tagBackground, size: "sm", children: tag }))] }))] }), hint && jsx(FieldHint, { children: hint })] }), typeof error === "object" && (error === null || error === void 0 ? void 0 : error.message) && jsx(FieldError, { children: error.message })] }));
+    return (jsxs("div", { className: "coop-form-item", ...formItemProps, children: [jsxs("div", { className: "coop-radio-button-wrapper", children: [jsxs("div", { className: "coop-radio-button-input-wrapper", children: [jsx("input", { ...componentProps }), label && (jsxs(FieldLabel, { htmlFor: id, isVisible: labelVisible, children: [jsx("span", { children: label }), " ", tag && (jsx(Tag, { className: tagClassName, size: "sm", children: tag }))] }))] }), hint && jsx(FieldHint, { children: hint })] }), typeof error === "object" && (error === null || error === void 0 ? void 0 : error.message) && jsx(FieldError, { children: error.message })] }));
 };
 
 export { RadioButton, RadioButton as default };

package/dist/components/Squircle/Squircle.d.ts

@@ -1,8 +1,5 @@
 import type { HTMLAttributes, JSX } from "react";
-import { BrandBlue, Green, OfferRed } from "../../types/colors";
 export interface SquircleProps extends HTMLAttributes<HTMLDivElement> {
-    /** **(Optional)** Specify the Squircle background color. */
-    background?: OfferRed | BrandBlue | Green;
     /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
     children?: React.ReactNode;
     /** **(Optional)** Specify additional CSS classes to be applied to the component. */
@@ -10,5 +7,5 @@ export interface SquircleProps extends HTMLAttributes<HTMLDivElement> {
     /** **(Optional)** Specify the Squircle size. */
     size?: "sm" | "md" | "lg";
 }
-export declare const Squircle: ({ background, children, className, size, ...props }: SquircleProps) => JSX.Element;
+export declare const Squircle: ({ children, className, size, ...props }: SquircleProps) => JSX.Element;
 export default Squircle;

package/dist/components/Squircle/Squircle.js

@@ -1,10 +1,10 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { bgPropToClass } from '../../utils/index.js';
+import { hasUserBg } from '../../utils/index.js';
 
-const Squircle = ({ background = "offer-red", children, className, size = "lg", ...props }) => {
+const Squircle = ({ children, className, size = "lg", ...props }) => {
     const componentProps = {
-        className: clsx("coop-squircle", bgPropToClass(background, className), className),
+        className: clsx("coop-squircle", !hasUserBg(className) && "bg-offer-red", className),
         "data-size": size.length && size !== "lg" ? size : undefined,
         ...props,
     };

package/dist/components/Tag/Tag.d.ts

@@ -1,11 +1,8 @@
 import type { AnchorHTMLAttributes, ForwardRefExoticComponent, HTMLAttributes, JSX } from "react";
 import React from "react";
-import type { Black, Darks, Greys, Lights, Tints, White } from "../../types/colors";
 export interface TagProps extends HTMLAttributes<HTMLAnchorElement> {
     /** **(Optional)** Specify a custom element to override default `a` or `span`. */
     as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string;
-    /** **(Optional)** Specify the Tag background color. */
-    background?: Lights | Darks | Tints | Greys | White | Black;
     /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
     children?: React.ReactNode;
     /** **(Optional)** Specify additional CSS classes to be applied to the component. */
@@ -15,5 +12,5 @@ export interface TagProps extends HTMLAttributes<HTMLAnchorElement> {
     /** **(Optional)** Specify the Tag size. */
     size?: "sm" | "md";
 }
-export declare const Tag: ({ as, background, children, className, href, size, ...props }: TagProps) => JSX.Element;
+export declare const Tag: ({ as, children, className, href, size, ...props }: TagProps) => JSX.Element;
 export default Tag;

package/dist/components/Tag/Tag.js

@@ -1,11 +1,11 @@
 import clsx from 'clsx';
 import React from 'react';
-import { bgPropToClass } from '../../utils/index.js';
+import { hasUserBg } from '../../utils/index.js';
 
-const Tag = ({ as, background = "tint-grey", children, className, href, size = "md", ...props }) => {
+const Tag = ({ as, children, className, href, size = "md", ...props }) => {
     let element = href ? "a" : "span";
     const componentProps = {
-        className: clsx("coop-tag", bgPropToClass(background, className), className),
+        className: clsx("coop-tag", !hasUserBg(className) && "bg-tint-grey", className),
         "data-size": size.length && size !== "md" ? size : undefined,
         href,
         ...props,

package/dist/utils/index.d.ts

@@ -1 +1,3 @@
 export declare const bgPropToClass: (color: string, userClasses?: string) => string;
+export declare const hasUserBg: (userClasses?: string) => boolean;
+export declare const bgClassToColor: (userClasses: string) => string | null;

package/dist/utils/index.js

@@ -1,3 +1,15 @@
-const bgPropToClass = (color, userClasses) => (userClasses === null || userClasses === void 0 ? void 0 : userClasses.includes("bg-")) ? "" : `bg-${color}`;
+const hasUserBg = (userClasses) => {
+    return typeof userClasses === "string" && (userClasses === null || userClasses === void 0 ? void 0 : userClasses.includes("bg-")) ? true : false;
+};
+const bgClassToColor = (userClasses) => {
+    var _a, _b;
+    return (_b = (_a = /bg-([^\s]+)/.exec(userClasses)) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : null;
+    // return (
+    //   userClasses
+    //     .split(" ")
+    //     .find((c) => c.startsWith("bg"))
+    //     ?.replace("bg-", "") ?? ""
+    // )
+};
 
-export { bgPropToClass };
+export { bgClassToColor, hasUserBg };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "0.42.0",
+  "version": "0.43.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -78,8 +78,8 @@
     "storybook": "$storybook"
   },
   "dependencies": {
-    "@coopdigital/styles": "^0.37.0",
+    "@coopdigital/styles": "^0.38.0",
     "clsx": "^2.1.1"
   },
-  "gitHead": "57b13b4c8ea674ab0e171bc7656668c952d141e2"
-}
+  "gitHead": "c3dc3d710bed7e0bc415887e1d484ce5f048f98c"
+}

package/src/components/Card/Card.tsx

@@ -3,15 +3,11 @@ import type { ForwardRefExoticComponent, HTMLAttributes, JSX } from "react"
 import clsx from "clsx"
 import React from "react"
 
-import { bgPropToClass } from "../../../src/utils"
-import { Lights, Tints, White } from "../../types/colors"
 import { getSlots } from "../../utils/slots"
 import { ChevronRightIcon } from "../Icon/ChevronRightIcon"
 import { Image, ImageProps } from "../Image"
 
 export interface CardProps extends HTMLAttributes<HTMLDivElement> {
-  /** **(Optional)** Specify the Card background color. */
-  background?: Tints | White
   /** **(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. */
@@ -31,8 +27,6 @@ export interface CardProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 interface CardLabelProps extends HTMLAttributes<HTMLSpanElement> {
-  /** **(Optional)** Specify the Label background color. */
-  background?: Lights
   /** **(Optional)** Content inside the Label. */
   children?: React.ReactNode
   /** **(Optional)** Specify additional CSS classes to be applied to the Label. */
@@ -86,7 +80,6 @@ function getCardLinkElement(as: CardProps["hrefAs"], href?: string) {
 }
 
 export const Card = ({
-  background = "white",
   chevron = false,
   children,
   className,
@@ -104,7 +97,7 @@ export const Card = ({
   const hasLinkWrapper = href && !slots.CardHeading
 
   const componentProps = {
-    className: clsx("coop-card", background && bgPropToClass(background, className), className),
+    className: clsx("coop-card", className),
     "data-image-pos": imagePosition,
     "data-orientation": orientation !== "vertical" ? orientation : undefined,
     ...props,
@@ -143,18 +136,8 @@ const CardHeading = ({ as = "h3", children, className }: CardHeadingProps): JSX.
 
 CardHeading.displayName = "Card.Heading"
 
-const CardLabel = ({ background, children, className }: CardLabelProps): JSX.Element => {
-  return (
-    <span
-      className={clsx(
-        "coop-card--label",
-        className,
-        background && bgPropToClass(background, className)
-      )}
-    >
-      {children}
-    </span>
-  )
+const CardLabel = ({ children, className }: CardLabelProps): JSX.Element => {
+  return <span className={clsx("coop-card--label", className)}>{children}</span>
 }
 
 CardLabel.displayName = "Card.Label"

package/src/components/Checkbox/Checkbox.tsx

@@ -7,7 +7,7 @@ import { FormFieldError, StandardSizes } from "../../../src/types"
 import { FieldError } from "../FieldError"
 import { FieldHint } from "../FieldHint"
 import { FieldLabel } from "../FieldLabel"
-import Tag, { TagProps } from "../Tag"
+import Tag from "../Tag"
 
 export interface CheckboxProps
   extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
@@ -39,8 +39,8 @@ export interface CheckboxProps
   size?: StandardSizes
   /** **(Optional)** Specify the Checkbox tag text. */
   tag?: string
-  /** **(Optional)** Specify the Checkbox tag background color. */
-  tagBackground?: TagProps["background"]
+  /** **(Optional)** Specify the Checkbox tag className. */
+  tagClassName?: string
   /** **(Optional)** Specify the Checkbox variant. */
   variant?: "default" | "boxed"
 }
@@ -56,7 +56,7 @@ export const Checkbox = ({
   name,
   size = "md",
   tag,
-  tagBackground,
+  tagClassName,
   variant = "default",
   ...props
 }: CheckboxProps): JSX.Element => {
@@ -86,7 +86,7 @@ export const Checkbox = ({
             <FieldLabel htmlFor={id} isVisible={labelVisible}>
               <span>{label}</span>{" "}
               {tag && (
-                <Tag background={tagBackground} size="sm">
+                <Tag className={tagClassName} size="sm">
                   {tag}
                 </Tag>
               )}

package/src/components/Expandable/Expandable.tsx

@@ -1,47 +1,66 @@
-import type { DetailsHTMLAttributes, JSX } from "react"
+import type { DetailsHTMLAttributes, HTMLAttributes, JSX } from "react"
 
 import { clsx } from "clsx"
 
-import { bgPropToClass } from "../../../src/utils"
-import { None, Tints, White } from "../../types/colors"
+import { bgClassToColor, hasUserBg } from "../../utils"
+import { getSlots } from "../../utils/slots"
 import { ChevronDownIcon } from "../Icon"
 
 export interface ExpandableProps extends DetailsHTMLAttributes<HTMLDetailsElement> {
-  /** **(Optional)** Specify the Expandable background color. */
-  background?: Tints | White | None
   /** Main content inside the component, only visible when it is open. It can be any valid JSX or string. */
   children: React.ReactNode
   /** **(Optional)** Specify additional CSS classes to be applied to the component. */
   className?: string
-  /** Specify the summary text to show when the Expandable is not open. */
-  summary: React.ReactNode
 }
 
-export const Expandable = ({
-  background = "tint-grey",
-  children,
-  className,
-  summary,
-  ...props
-}: ExpandableProps): JSX.Element => {
+interface ExpandableSummaryProps extends HTMLAttributes<HTMLElement> {
+  /** **(Optional)** Content inside the Summary. */
+  children?: React.ReactNode
+  /** **(Optional)** Specify additional CSS classes to be applied to the Summary. */
+  className?: string
+}
+
+const componentSlots = {
+  Children: null,
+  ExpandableSummary: null,
+}
+
+export const Expandable = ({ children, className, ...props }: ExpandableProps): JSX.Element => {
+  const slots = getSlots(componentSlots, children)
+
   const componentProps = {
-    className: clsx("coop-expandable", bgPropToClass(background, className), className),
+    className: clsx("coop-expandable", !hasUserBg(className) && "bg-tint-grey", className),
     ...props,
   }
+
+  componentProps.style = {
+    "--bg": `var(--color-${bgClassToColor(componentProps.className)})`,
+  }
+
   return (
-    <details {...componentProps} style={{ "--background-color": `var(--color-${background})` }}>
-      <summary>
-        {summary}
-        <ChevronDownIcon
-          className="coop-expandable--icon"
-          stroke="currentColor"
-          strokeWidth={2}
-          width="12"
-        />
-      </summary>
-      <div className="coop-expandable--content">{children}</div>
+    <details {...componentProps}>
+      {slots.ExpandableSummary}
+      <div className="coop-expandable--content">{slots.Children}</div>
     </details>
   )
 }
 
+const ExpandableSummary = ({ children, className, ...props }: ExpandableSummaryProps) => {
+  return (
+    <summary {...props} className={className}>
+      {children}
+      <ChevronDownIcon
+        className="coop-expandable--icon"
+        stroke="currentColor"
+        strokeWidth={2}
+        width="12"
+      />
+    </summary>
+  )
+}
+
+ExpandableSummary.displayName = "Expandable.Summary"
+
+Expandable.Summary = ExpandableSummary
+
 export default Expandable

package/src/components/Flourish/Flourish.tsx

@@ -2,7 +2,7 @@ import type { JSX, ReactNode, SVGProps } from "react"
 
 import clsx from "clsx"
 
-import { BrandBlue, Darks, Lights, OfferRed } from "../../types/colors"
+import { Black, BrandBlue, Darks, Lights, OfferRed, Tints, White } from "../../types/colors"
 
 export interface FlourishProps extends SVGProps<SVGSVGElement> {
   /** Specify the text to be highlighted by the Flourish. */
@@ -10,13 +10,13 @@ export interface FlourishProps extends SVGProps<SVGSVGElement> {
   /** **(Optional)** Specify additional CSS classes to be applied to the component. */
   className?: string
   /** **(Optional)** Specify the Flourish color. */
-  fill?: Darks | Lights | OfferRed | BrandBlue
+  fill?: Darks | Lights | Tints | OfferRed | BrandBlue | White | Black
 }
 
 export const Flourish = ({
   children,
   className,
-  fill = "light-yellow",
+  fill = "brand-blue",
   ...props
 }: FlourishProps): JSX.Element => {
   const componentProps = {
@@ -28,7 +28,7 @@ export const Flourish = ({
   return (
     <span style={{ position: "relative" }}>
       {children}
-      <svg {...componentProps} height="10" viewBox="0 0 276 10" width="276">
+      <svg {...componentProps} viewBox="0 0 276 10">
         <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" />
       </svg>
     </span>

package/src/components/Pill/Pill.tsx

@@ -1,22 +1,16 @@
-import type { AnchorHTMLAttributes, ForwardRefExoticComponent, HTMLAttributes, JSX } from "react"
+import type { ForwardRefExoticComponent, HTMLAttributes, JSX } from "react"
 
 import clsx from "clsx"
 import React from "react"
 import { StandardSizes } from "src/types"
 
-import { bgPropToClass } from "../../../src/utils"
-import { Darks, OfferRed, Tints } from "../../types/colors"
+import { hasUserBg } from "../../utils"
+import { getSlots } from "../../utils/slots"
 
 export interface PillProps extends HTMLAttributes<HTMLAnchorElement> {
   /** **(Optional)** Specify a custom element to override default `a` or `span`. */
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string
-  /** **(Optional)** Specify the Pill background color. */
-  background?: Tints
-  /** **(Optional)** Specify text to display inside the badge. */
-  badge?: string
-  /** **(Optional)** Specify the badge background color. */
-  badgeBackground?: Darks | OfferRed
+  as?: React.FC<any> | ForwardRefExoticComponent<any> | string
   /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
   children?: React.ReactNode
   /** **(Optional)** Specify additional CSS classes to be applied to the component. */
@@ -27,11 +21,20 @@ export interface PillProps extends HTMLAttributes<HTMLAnchorElement> {
   size?: StandardSizes
 }
 
+interface PillBadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  /** **(Optional)** Content inside the Badge. */
+  children?: React.ReactNode
+  /** **(Optional)** Specify additional CSS classes to be applied to the Badge. */
+  className?: string
+}
+
+const componentSlots = {
+  Children: null,
+  PillBadge: null,
+}
+
 export const Pill = ({
   as,
-  background = "tint-grey",
-  badge,
-  badgeBackground = "offer-red",
   children,
   className,
   href,
@@ -40,26 +43,32 @@ export const Pill = ({
 }: PillProps): JSX.Element => {
   let element: PillProps["as"] = href ? "a" : "span"
 
+  const slots = getSlots(componentSlots, children)
+
   if (as) {
     element = as
   }
 
   const componentProps = {
-    className: clsx("coop-pill", bgPropToClass(background, className), className),
+    className: clsx("coop-pill", !hasUserBg(className) && "bg-tint-grey", className),
     "data-size": size.length && size !== "md" ? size : undefined,
     href,
     ...props,
   }
 
-  const finalChildren = badge ? (
-    <>
+  return React.createElement(element, { ...componentProps }, slots.PillBadge, slots.Children)
+}
+
+const PillBadge = ({ children, className }: PillBadgeProps) => {
+  return (
+    <span className={clsx("coop-pill--badge", !hasUserBg(className) && "bg-offer-red", className)}>
       {children}
-      <span className={clsx("coop-pill--badge", bgPropToClass(badgeBackground))}>{badge}</span>
-    </>
-  ) : (
-    children
+    </span>
   )
-
-  return React.createElement(element, { ...componentProps }, finalChildren)
 }
+
+PillBadge.displayName = "Pill.Badge"
+
+Pill.Badge = PillBadge
+
 export default Pill

package/src/components/RadioButton/RadioButton.tsx

@@ -5,7 +5,7 @@ import { FormFieldError, StandardSizes } from "src/types"
 import { FieldError } from "../FieldError"
 import { FieldHint } from "../FieldHint"
 import { FieldLabel } from "../FieldLabel"
-import Tag, { TagProps } from "../Tag"
+import Tag from "../Tag"
 
 export interface RadioButtonProps
   extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
@@ -37,8 +37,8 @@ export interface RadioButtonProps
   size?: StandardSizes
   /** **(Optional)** Specify the RadioButton tag text. */
   tag?: string
-  /** **(Optional)** Specify the RadioButton tag background color. */
-  tagBackground?: TagProps["background"]
+  /** **(Optional)** Specify the RadioButton tag className. */
+  tagClassName?: string
 }
 
 export const RadioButton = ({
@@ -52,7 +52,7 @@ export const RadioButton = ({
   name,
   size = "md",
   tag,
-  tagBackground,
+  tagClassName,
   ...props
 }: RadioButtonProps): JSX.Element => {
   const internalId = useId()
@@ -80,7 +80,7 @@ export const RadioButton = ({
             <FieldLabel htmlFor={id} isVisible={labelVisible}>
               <span>{label}</span>{" "}
               {tag && (
-                <Tag background={tagBackground} size="sm">
+                <Tag className={tagClassName} size="sm">
                   {tag}
                 </Tag>
               )}

package/src/components/Squircle/Squircle.tsx

@@ -2,12 +2,8 @@ import type { HTMLAttributes, JSX } from "react"
 
 import clsx from "clsx"
 
-import { bgPropToClass } from "../../../src/utils"
-import { BrandBlue, Green, OfferRed } from "../../types/colors"
-
+import { hasUserBg } from "../../../src/utils"
 export interface SquircleProps extends HTMLAttributes<HTMLDivElement> {
-  /** **(Optional)** Specify the Squircle background color. */
-  background?: OfferRed | BrandBlue | Green
   /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
   children?: React.ReactNode
   /** **(Optional)** Specify additional CSS classes to be applied to the component. */
@@ -17,14 +13,13 @@ export interface SquircleProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 export const Squircle = ({
-  background = "offer-red",
   children,
   className,
   size = "lg",
   ...props
 }: SquircleProps): JSX.Element => {
   const componentProps = {
-    className: clsx("coop-squircle", bgPropToClass(background, className), className),
+    className: clsx("coop-squircle", !hasUserBg(className) && "bg-offer-red", className),
     "data-size": size.length && size !== "lg" ? size : undefined,
     ...props,
   }

package/src/components/Tag/Tag.tsx

@@ -3,16 +3,12 @@ import type { AnchorHTMLAttributes, ForwardRefExoticComponent, HTMLAttributes, J
 import clsx from "clsx"
 import React from "react"
 
-import type { Black, Darks, Greys, Lights, Tints, White } from "../../types/colors"
-
-import { bgPropToClass } from "../../../src/utils"
+import { hasUserBg } from "../../../src/utils"
 
 export interface TagProps extends HTMLAttributes<HTMLAnchorElement> {
   /** **(Optional)** Specify a custom element to override default `a` or `span`. */
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string
-  /** **(Optional)** Specify the Tag background color. */
-  background?: Lights | Darks | Tints | Greys | White | Black
   /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
   children?: React.ReactNode
   /** **(Optional)** Specify additional CSS classes to be applied to the component. */
@@ -25,7 +21,6 @@ export interface TagProps extends HTMLAttributes<HTMLAnchorElement> {
 
 export const Tag = ({
   as,
-  background = "tint-grey",
   children,
   className,
   href,
@@ -34,7 +29,7 @@ export const Tag = ({
 }: TagProps): JSX.Element => {
   let element: TagProps["as"] = href ? "a" : "span"
   const componentProps = {
-    className: clsx("coop-tag", bgPropToClass(background, className), className),
+    className: clsx("coop-tag", !hasUserBg(className) && "bg-tint-grey", className),
     "data-size": size.length && size !== "md" ? size : undefined,
     href,
 

package/src/utils/index.ts

@@ -1,2 +1,17 @@
 export const bgPropToClass = (color: string, userClasses?: string) =>
   userClasses?.includes("bg-") ? "" : `bg-${color}`
+
+export const hasUserBg = (userClasses?: string) => {
+  return typeof userClasses === "string" && userClasses?.includes("bg-") ? true : false
+}
+
+export const bgClassToColor = (userClasses: string) => {
+  return /bg-([^\s]+)/.exec(userClasses)?.[1] ?? null
+
+  // return (
+  //   userClasses
+  //     .split(" ")
+  //     .find((c) => c.startsWith("bg"))
+  //     ?.replace("bg-", "") ?? ""
+  // )
+}