@coopdigital/react 0.19.0 → 0.19.1

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

@@ -1,11 +1,12 @@
 import type { AnchorHTMLAttributes, ForwardRefExoticComponent, HTMLAttributes, JSX } from "react";
 import React from "react";
+import { Lights, Tints } from "../../types/colors";
 import { ImageProps } from "../Image";
 export interface CardProps extends HTMLAttributes<HTMLDivElement> {
     /** **(Optional)** Specifies the custom element to override default `a` */
     as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string;
     /** **(Optional)** Specifies the background color of the card. */
-    background?: "purple" | "pink" | "green" | "orange" | "red" | "yellow" | "lilac" | "blue" | "brown" | "grey";
+    background?: Tints;
     /** **(Optional)** Represents the content inside the badge. */
     badge?: React.ReactNode;
     /** **(Optional)** Specify badge position relative to top right corner. */
@@ -29,7 +30,7 @@ export interface CardProps extends HTMLAttributes<HTMLDivElement> {
     /** **(Optional)** Specifies the label of the Card */
     label?: string;
     /** **(Optional)** Specifies the label background of the Card */
-    labelBackground?: "yellow" | "green" | "pink" | "purple" | "orange" | "red" | "lilac" | "blue";
+    labelBackground?: Lights;
     /** **(Optional)** Specifies the layout of the Card */
     layout?: "vertical" | "horizontal";
 }

package/dist/components/Card/Card.js

@@ -1,6 +1,8 @@
 import { __rest } from '../../node_modules/tslib/tslib.es6.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
 import React from 'react';
+import { bgPropToClass } from '../../utils/index.js';
 import { Image } from '../Image/Image.js';
 
 function getCardLinkElement(as, href) {
@@ -23,8 +25,8 @@ const Card = (_a) => {
     var { as, background, badge, badgePosition = "inset", chevron = false, children, className = "", heading, headingLevel = "h3", href, image, imagePosition = "left", label = "", labelBackground, layout = "vertical" } = _a, props = __rest(_a, ["as", "background", "badge", "badgePosition", "chevron", "children", "className", "heading", "headingLevel", "href", "image", "imagePosition", "label", "labelBackground", "layout"]);
     const linkElement = getCardLinkElement(as, href);
     const imageProps = Object.assign({ crop: "wide" }, image);
-    const componentProps = Object.assign({ className: `coop-card ${className}`, "data-badge-pos": badgePosition, "data-bg": background, "data-image-pos": imagePosition, "data-label-bg": labelBackground, "data-layout": layout !== "vertical" ? layout : undefined }, props);
-    return (jsxs("article", Object.assign({}, componentProps, { children: [image && jsx(Image, Object.assign({}, imageProps)), badge && jsx("div", { className: "coop-card--badge", children: badge }), jsxs("div", { className: "coop-card--inner", children: [jsxs("div", { className: "coop-card--content", children: [label && jsx("span", { className: "coop-card--label", children: label }), React.createElement(linkElement.element, linkElement.props, React.createElement(headingLevel, { className: "coop-card--heading" }, heading)), children] }), chevron && (jsx("span", { "aria-hidden": "true", className: "coop-card--icon", role: "presentation", children: jsx("svg", { viewBox: "0 0 16 29", children: jsx("path", { d: "M2 28.1a1.6 1.6 0 0 1-1.2-2.7l11-10.9-11-11A1.6 1.6 0 1 1 3 1.5l12 12a1.6 1.6 0 0 1 0 2.2l-12 12c-.3.4-.7.5-1 .5z" }) }) }))] })] })));
+    const componentProps = Object.assign({ className: clsx("coop-card", background && bgPropToClass(background, className), className), "data-badge-pos": badgePosition, "data-image-pos": imagePosition, "data-layout": layout !== "vertical" ? layout : undefined }, props);
+    return (jsxs("article", Object.assign({}, componentProps, { children: [image && jsx(Image, Object.assign({}, imageProps)), badge && jsx("div", { className: "coop-card--badge", children: badge }), jsxs("div", { className: "coop-card--inner", children: [jsxs("div", { className: "coop-card--content", children: [label && (jsx("span", { className: clsx("coop-card--label", labelBackground && bgPropToClass(labelBackground, className)), children: label })), React.createElement(linkElement.element, linkElement.props, React.createElement(headingLevel, { className: "coop-card--heading" }, heading)), children] }), chevron && (jsx("span", { "aria-hidden": "true", className: "coop-card--icon", role: "presentation", children: jsx("svg", { viewBox: "0 0 16 29", children: jsx("path", { d: "M2 28.1a1.6 1.6 0 0 1-1.2-2.7l11-10.9-11-11A1.6 1.6 0 1 1 3 1.5l12 12a1.6 1.6 0 0 1 0 2.2l-12 12c-.3.4-.7.5-1 .5z" }) }) }))] })] })));
 };
 
 export { Card, Card as default };

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

@@ -1,7 +1,8 @@
 import type { DetailsHTMLAttributes, JSX } from "react";
+import { None, Tints, White } from "../../types/colors";
 export interface ExpandableProps extends DetailsHTMLAttributes<HTMLDetailsElement> {
     /** **(Optional)** Specifies the Expandable background color from the available options. */
-    background?: "purple" | "pink" | "green" | "orange" | "red" | "yellow" | "lilac" | "blue" | "white" | "transparent" | "brown" | "grey";
+    background?: Tints | White | None;
     /** Represents the content inside the Expandable component, only visible when expanded. It can be any valid JSX or string. */
     children: React.ReactNode;
     /** **(Optional)** Receives any className to be applied to Expandable component. */

package/dist/components/Expandable/Expandable.js

@@ -1,14 +1,16 @@
 import { __rest } from '../../node_modules/tslib/tslib.es6.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import { bgPropToClass } from '../../utils/index.js';
 
 /**
  * The Expandable component wraps content in an expandable block using the details/summary HTML elements.
  * It can be used to reveal more context for a specific issue or action.
  */
 const Expandable = (_a) => {
-    var { background = "grey", children, className = "", summary } = _a, props = __rest(_a, ["background", "children", "className", "summary"]);
-    const componentProps = Object.assign({ className: `coop-expandable ${className}`, "data-bg": background }, props);
-    return (jsxs("details", Object.assign({}, componentProps, { children: [jsxs("summary", { children: [summary, jsx("svg", { fill: "none", height: "24", width: "24", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "m20.25 9.75-6.22 6.22a.75.75 0 0 1-1.06 0L6.75 9.75", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) })] }), jsx("div", { className: "coop-expandable--content", children: children })] })));
+    var { background = "tint-grey", children, className = "", summary } = _a, props = __rest(_a, ["background", "children", "className", "summary"]);
+    const componentProps = Object.assign({ className: clsx("coop-expandable", bgPropToClass(background, className), className) }, props);
+    return (jsxs("details", Object.assign({}, componentProps, { style: { "--background-color": `var(--color-${background})` }, children: [jsxs("summary", { children: [summary, jsx("svg", { fill: "none", height: "24", width: "24", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "m20.25 9.75-6.22 6.22a.75.75 0 0 1-1.06 0L6.75 9.75", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) })] }), jsx("div", { className: "coop-expandable--content", children: children })] })));
 };
 
 export { Expandable, Expandable as default };

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

@@ -1,25 +1,26 @@
 import type { AnchorHTMLAttributes, ForwardRefExoticComponent, HTMLAttributes, JSX } from "react";
 import React from "react";
+import { Darks, OffersRed, Tints } from "../../types/colors";
 export interface PillProps extends HTMLAttributes<HTMLAnchorElement> {
     /** **(Optional)** Specifies the custom element to override default `a` or `span`. */
     as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string;
+    /** **(Optional)** Specifies the Pill background color from the available options. */
+    background?: Tints;
     /** **(Optional)** Specifies what text Pill should display on the badge. */
     badge?: string;
     /** **(Optional)** Specifies the badge background color from the available options. */
-    badgeColor?: "green" | "orange" | "red" | "pink";
+    badgeBackground?: Darks | OffersRed;
     /** **(Optional)** Represents the content inside the Pill component. It can be any valid JSX or string. */
     children?: React.ReactNode;
     /** **(Optional)** Receives any className to be applied to Pill component. */
     className?: string;
     /** **(Optional)** Specifies the URL that the Pill component will link to when clicked. */
     href?: string;
-    /** **(Optional)** Specifies the Pill background color from the available options. */
-    pillColor?: "blue" | "pink";
     /** **(Optional)** Specifies what should be the Pill size. */
     size?: "sm" | "md" | "lg" | "xl";
 }
 /**
  * The Pill component is a small, sligtly rounded label used to link and highlight information such as categories or articles. It can be customised with different content and styles to suit various use cases.
  */
-export declare const Pill: ({ as, badge, badgeColor, children, className, href, pillColor, size, ...props }: PillProps) => JSX.Element;
+export declare const Pill: ({ as, background, badge, badgeBackground, children, className, href, size, ...props }: PillProps) => JSX.Element;
 export default Pill;

package/dist/components/Pill/Pill.js

@@ -1,17 +1,21 @@
 import { __rest } from '../../node_modules/tslib/tslib.es6.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
 import React from 'react';
+import { bgPropToClass } from '../../utils/index.js';
 
 /**
  * The Pill component is a small, sligtly rounded label used to link and highlight information such as categories or articles. It can be customised with different content and styles to suit various use cases.
  */
 const Pill = (_a) => {
-    var { as, badge, badgeColor = "red", children, className = "", href, pillColor = "blue", size = "md" } = _a, props = __rest(_a, ["as", "badge", "badgeColor", "children", "className", "href", "pillColor", "size"]);
+    var { as, background = "tint-grey", badge, badgeBackground = "offers-red", children, className = "", href, size = "md" } = _a, props = __rest(_a, ["as", "background", "badge", "badgeBackground", "children", "className", "href", "size"]);
     let element = href ? "a" : "span";
     if (as) {
         element = as;
     }
-    const componentProps = Object.assign({ className: `coop-pill ${className}`, "data-badge": (badge === null || badge === void 0 ? void 0 : badge.length) ? badge : undefined, "data-badge-color": badgeColor, "data-pill-color": pillColor, "data-size": size.length && size !== "md" ? size : undefined, href }, props);
-    return React.createElement(element, Object.assign({}, componentProps), children);
+    const componentProps = Object.assign({ className: clsx("coop-pill", bgPropToClass(background, className), 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, Object.assign({}, componentProps), finalChildren);
 };
 
 export { Pill, Pill as default };

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

@@ -0,0 +1,17 @@
+import type { JSX } from "react";
+import { CoopBlue, Green, OffersRed } from "../../types/colors";
+export interface SquircleProps {
+    /** **(Optional)** Specifies the background color of the Squircle. */
+    background?: OffersRed | CoopBlue | Green;
+    /** **(Optional)** Represents the content inside the Squircle component. It can be any valid JSX or string. */
+    children?: React.ReactNode;
+    /** **(Optional)** Receives any className to be applied to Squircle component. */
+    className?: string;
+    /** **(Optional)** Specifies what should be the Squircle size */
+    size?: "sm" | "md" | "lg";
+}
+/**
+ * Squircle to use on components like Cards, etc.
+ */
+export declare const Squircle: ({ background, children, className, size, ...props }: SquircleProps) => JSX.Element;
+export default Squircle;

package/dist/components/Squircle/Squircle.js

@@ -0,0 +1,14 @@
+import { __rest } from '../../node_modules/tslib/tslib.es6.js';
+import { jsx } from 'react/jsx-runtime';
+import { bgPropToClass } from '../../utils/index.js';
+
+/**
+ * Squircle to use on components like Cards, etc.
+ */
+const Squircle = (_a) => {
+    var { background = "offers-red", children, className, size = "lg" } = _a, props = __rest(_a, ["background", "children", "className", "size"]);
+    const componentProps = Object.assign({ className: `coop-squircle ${bgPropToClass(background, className)} ${className !== null && className !== void 0 ? className : ""}`, "data-size": size.length && size !== "lg" ? size : undefined }, props);
+    return (jsx("figure", Object.assign({}, componentProps, { children: jsx("figcaption", { children: children }) })));
+};
+
+export { Squircle, Squircle as default };

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

@@ -0,0 +1,4 @@
+import Squircle from "./Squircle";
+export default Squircle;
+export { Squircle };
+export * from "./Squircle";

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

@@ -1,16 +1,17 @@
 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)** Specifies the custom element to override default `a` or `span`. */
     as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string;
+    /** **(Optional)** Specifies the Tag background color from the available options. */
+    background?: Lights | Darks | Tints | Greys | White | Black;
     /** **(Optional)** Represents the content inside the Tag component. It can be any valid JSX or string. */
     children?: React.ReactNode;
     /** **(Optional)** Receives any className to be applied to Tag component. */
     className?: string;
     /** **(Optional)** Specifies the URL that the Tag component will link to when clicked. */
     href?: string;
-    /** **(Optional)** Specifies the Tag background color from the available options. */
-    tagColor?: "white" | "purple" | "pink" | "green" | "orange" | "red" | "yellow" | "lilac" | "blue" | "brown" | "grey";
 }
 /**
  * Tag is a simple component that is meant to communicate a brief message such as categories.
@@ -22,5 +23,5 @@ export interface TagProps extends HTMLAttributes<HTMLAnchorElement> {
  * - Tag components should be used as tags to communicate brief message while Pill component is more versatile and has more styling options
  *
  */
-export declare const Tag: ({ as, children, className, href, tagColor, ...props }: TagProps) => JSX.Element;
+export declare const Tag: ({ as, background, children, className, href, ...props }: TagProps) => JSX.Element;
 export default Tag;

package/dist/components/Tag/Tag.js

@@ -1,5 +1,7 @@
 import { __rest } from '../../node_modules/tslib/tslib.es6.js';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
 import React from 'react';
+import { bgPropToClass } from '../../utils/index.js';
 
 /**
  * Tag is a simple component that is meant to communicate a brief message such as categories.
@@ -12,9 +14,9 @@ import React from 'react';
  *
  */
 const Tag = (_a) => {
-    var { as, children, className = "", href, tagColor = "grey" } = _a, props = __rest(_a, ["as", "children", "className", "href", "tagColor"]);
+    var { as, background = "tint-grey", children, className = "", href } = _a, props = __rest(_a, ["as", "background", "children", "className", "href"]);
     let element = href ? "a" : "span";
-    const componentProps = Object.assign({ className: `coop-tag ${className}`, "data-tag-color": tagColor, href }, props);
+    const componentProps = Object.assign({ className: clsx("coop-tag", bgPropToClass(background, className), className), href }, props);
     if (as) {
         element = as;
     }

package/dist/index.d.ts

@@ -9,4 +9,5 @@ export * from "./components/RootSVG";
 export * from "./components/SearchBox";
 export * from "./components/Signpost";
 export * from "./components/SkipNav";
+export * from "./components/Squircle";
 export * from "./components/Tag";

package/dist/index.js

@@ -9,4 +9,5 @@ export { RootSVG } from './components/RootSVG/RootSVG.js';
 export { SearchBox } from './components/SearchBox/SearchBox.js';
 export { Signpost } from './components/Signpost/Signpost.js';
 export { SkipNav } from './components/SkipNav/SkipNav.js';
+export { Squircle } from './components/Squircle/Squircle.js';
 export { Tag } from './components/Tag/Tag.js';

package/dist/node_modules/clsx/dist/clsx.js

@@ -0,0 +1,3 @@
+function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
+
+export { clsx, clsx as default };

package/dist/types/colors.d.ts

@@ -0,0 +1,11 @@
+export type Darks = "dark-blue" | "dark-yellow" | "dark-green" | "dark-lilac" | "dark-orange" | "dark-pink" | "dark-purple" | "dark-red";
+export type Tints = "tint-blue" | "tint-brown" | "tint-yellow" | "tint-green" | "tint-grey" | "tint-lilac" | "tint-orange" | "tint-pink" | "tint-purple" | "tint-red";
+export type Lights = "light-blue" | "light-yellow" | "light-green" | "light-lilac" | "light-orange" | "light-pink" | "light-purple" | "light-red";
+export type Greys = "dark-grey" | "mid-dark-grey" | "mid-grey" | "mid-light-grey" | "light-grey";
+export type White = "white";
+export type Black = "black";
+export type None = "none";
+export type CoopBlue = "coop-blue";
+export type OffersRed = "offers-red";
+export type Green = "green";
+export type Blue = "blue";

package/dist/utils/index.d.ts

@@ -0,0 +1 @@
+export declare const bgPropToClass: (color: string, userClasses?: string) => string;

package/dist/utils/index.js

@@ -0,0 +1,3 @@
+const bgPropToClass = (color, userClasses) => (userClasses === null || userClasses === void 0 ? void 0 : userClasses.includes("bg-")) ? "" : `bg-${color}`;
+
+export { bgPropToClass };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "0.19.0",
+  "version": "0.19.1",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -45,7 +45,7 @@
   "description": "",
   "devDependencies": {
     "@axe-core/playwright": "^4.10.1",
-    "@coopdigital/styles": "^0.16.0",
+    "@coopdigital/styles": "^0.16.1",
     "@playwright/test": "^1.52.0",
     "@storybook/addon-a11y": "^8.6.12",
     "@storybook/addon-essentials": "^8.6.12",
@@ -67,5 +67,8 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0"
   },
-  "gitHead": "c3b9ce837060a373926286d2a770796f75f8c168"
+  "dependencies": {
+    "clsx": "^2.1.1"
+  },
+  "gitHead": "8c11cfec54452dacb609b1a61075a2dbc1142ad1"
 }

package/src/components/Card/Card.tsx

@@ -1,7 +1,10 @@
 import type { AnchorHTMLAttributes, ForwardRefExoticComponent, HTMLAttributes, JSX } from "react"
 
+import clsx from "clsx"
 import React from "react"
 
+import { bgPropToClass } from "../../../src/utils"
+import { Lights, Tints } from "../../types/colors"
 import { Image, ImageProps } from "../Image"
 
 export interface CardProps extends HTMLAttributes<HTMLDivElement> {
@@ -10,17 +13,7 @@ export interface CardProps extends HTMLAttributes<HTMLDivElement> {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string
   /** **(Optional)** Specifies the background color of the card. */
-  background?:
-    | "purple"
-    | "pink"
-    | "green"
-    | "orange"
-    | "red"
-    | "yellow"
-    | "lilac"
-    | "blue"
-    | "brown"
-    | "grey"
+  background?: Tints
   /** **(Optional)** Represents the content inside the badge. */
   badge?: React.ReactNode
   /** **(Optional)** Specify badge position relative to top right corner. */
@@ -44,7 +37,7 @@ export interface CardProps extends HTMLAttributes<HTMLDivElement> {
   /** **(Optional)** Specifies the label of the Card */
   label?: string
   /** **(Optional)** Specifies the label background of the Card */
-  labelBackground?: "yellow" | "green" | "pink" | "purple" | "orange" | "red" | "lilac" | "blue"
+  labelBackground?: Lights
   /** **(Optional)** Specifies the layout of the Card */
   layout?: "vertical" | "horizontal"
 }
@@ -94,11 +87,9 @@ export const Card = ({
   }
 
   const componentProps = {
-    className: `coop-card ${className}`,
+    className: clsx("coop-card", background && bgPropToClass(background, className), className),
     "data-badge-pos": badgePosition,
-    "data-bg": background,
     "data-image-pos": imagePosition,
-    "data-label-bg": labelBackground,
     "data-layout": layout !== "vertical" ? layout : undefined,
     ...props,
   }
@@ -109,7 +100,16 @@ export const Card = ({
       {badge && <div className="coop-card--badge">{badge}</div>}
       <div className="coop-card--inner">
         <div className="coop-card--content">
-          {label && <span className="coop-card--label">{label}</span>}
+          {label && (
+            <span
+              className={clsx(
+                "coop-card--label",
+                labelBackground && bgPropToClass(labelBackground, className)
+              )}
+            >
+              {label}
+            </span>
+          )}
           {React.createElement(
             linkElement.element,
             linkElement.props,

package/src/components/Expandable/Expandable.tsx

@@ -1,20 +1,13 @@
 import type { DetailsHTMLAttributes, JSX } from "react"
 
+import { clsx } from "clsx"
+
+import { bgPropToClass } from "../../../src/utils"
+import { None, Tints, White } from "../../types/colors"
+
 export interface ExpandableProps extends DetailsHTMLAttributes<HTMLDetailsElement> {
   /** **(Optional)** Specifies the Expandable background color from the available options. */
-  background?:
-    | "purple"
-    | "pink"
-    | "green"
-    | "orange"
-    | "red"
-    | "yellow"
-    | "lilac"
-    | "blue"
-    | "white"
-    | "transparent"
-    | "brown"
-    | "grey"
+  background?: Tints | White | None
   /** Represents the content inside the Expandable component, only visible when expanded. It can be any valid JSX or string. */
   children: React.ReactNode
   /** **(Optional)** Receives any className to be applied to Expandable component. */
@@ -29,19 +22,18 @@ export interface ExpandableProps extends DetailsHTMLAttributes<HTMLDetailsElemen
  */
 
 export const Expandable = ({
-  background = "grey",
+  background = "tint-grey",
   children,
   className = "",
   summary,
   ...props
 }: ExpandableProps): JSX.Element => {
   const componentProps = {
-    className: `coop-expandable ${className}`,
-    "data-bg": background,
+    className: clsx("coop-expandable", bgPropToClass(background, className), className),
     ...props,
   }
   return (
-    <details {...componentProps}>
+    <details {...componentProps} style={{ "--background-color": `var(--color-${background})` }}>
       <summary>
         {summary}
         <svg fill="none" height="24" width="24" xmlns="http://www.w3.org/2000/svg">

package/src/components/Pill/Pill.tsx

@@ -1,23 +1,27 @@
 import type { AnchorHTMLAttributes, ForwardRefExoticComponent, HTMLAttributes, JSX } from "react"
 
+import clsx from "clsx"
 import React from "react"
 
+import { bgPropToClass } from "../../../src/utils"
+import { Darks, OffersRed, Tints } from "../../types/colors"
+
 export interface PillProps extends HTMLAttributes<HTMLAnchorElement> {
   /** **(Optional)** Specifies the 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)** Specifies the Pill background color from the available options. */
+  background?: Tints
   /** **(Optional)** Specifies what text Pill should display on the badge. */
   badge?: string
   /** **(Optional)** Specifies the badge background color from the available options. */
-  badgeColor?: "green" | "orange" | "red" | "pink"
+  badgeBackground?: Darks | OffersRed
   /** **(Optional)** Represents the content inside the Pill component. It can be any valid JSX or string. */
   children?: React.ReactNode
   /** **(Optional)** Receives any className to be applied to Pill component. */
   className?: string
   /** **(Optional)** Specifies the URL that the Pill component will link to when clicked. */
   href?: string
-  /** **(Optional)** Specifies the Pill background color from the available options. */
-  pillColor?: "blue" | "pink"
   /** **(Optional)** Specifies what should be the Pill size. */
   size?: "sm" | "md" | "lg" | "xl"
 }
@@ -27,12 +31,12 @@ export interface PillProps extends HTMLAttributes<HTMLAnchorElement> {
  */
 export const Pill = ({
   as,
+  background = "tint-grey",
   badge,
-  badgeColor = "red",
+  badgeBackground = "offers-red",
   children,
   className = "",
   href,
-  pillColor = "blue",
   size = "md",
   ...props
 }: PillProps): JSX.Element => {
@@ -43,15 +47,21 @@ export const Pill = ({
   }
 
   const componentProps = {
-    className: `coop-pill ${className}`,
-    "data-badge": badge?.length ? badge : undefined,
-    "data-badge-color": badgeColor,
-    "data-pill-color": pillColor,
+    className: clsx("coop-pill", bgPropToClass(background, className), className),
     "data-size": size.length && size !== "md" ? size : undefined,
     href,
     ...props,
   }
 
-  return React.createElement(element, { ...componentProps }, children)
+  const finalChildren = badge ? (
+    <>
+      {children}
+      <span className={clsx("coop-pill--badge", bgPropToClass(badgeBackground))}>{badge}</span>
+    </>
+  ) : (
+    children
+  )
+
+  return React.createElement(element, { ...componentProps }, finalChildren)
 }
 export default Pill

package/src/components/Squircle/Squircle.tsx

@@ -0,0 +1,41 @@
+import type { JSX } from "react"
+
+import { bgPropToClass } from "../../../src/utils"
+import { CoopBlue, Green, OffersRed } from "../../types/colors"
+
+export interface SquircleProps {
+  /** **(Optional)** Specifies the background color of the Squircle. */
+  background?: OffersRed | CoopBlue | Green
+  /** **(Optional)** Represents the content inside the Squircle component. It can be any valid JSX or string. */
+  children?: React.ReactNode
+  /** **(Optional)** Receives any className to be applied to Squircle component. */
+  className?: string
+  /** **(Optional)** Specifies what should be the Squircle size */
+  size?: "sm" | "md" | "lg"
+}
+
+/**
+ * Squircle to use on components like Cards, etc.
+ */
+
+export const Squircle = ({
+  background = "offers-red",
+  children,
+  className,
+  size = "lg",
+  ...props
+}: SquircleProps): JSX.Element => {
+  const componentProps = {
+    className: `coop-squircle ${bgPropToClass(background, className)} ${className ?? ""}`,
+    "data-size": size.length && size !== "lg" ? size : undefined,
+    ...props,
+  }
+
+  return (
+    <figure {...componentProps}>
+      <figcaption>{children}</figcaption>
+    </figure>
+  )
+}
+
+export default Squircle

package/src/components/Squircle/index.ts

@@ -0,0 +1,5 @@
+import Squircle from "./Squircle"
+
+export default Squircle
+export { Squircle }
+export * from "./Squircle"

package/src/components/Tag/Tag.tsx

@@ -1,30 +1,24 @@
 import type { AnchorHTMLAttributes, ForwardRefExoticComponent, HTMLAttributes, JSX } from "react"
 
+import clsx from "clsx"
 import React from "react"
 
+import type { Black, Darks, Greys, Lights, Tints, White } from "../../types/colors"
+
+import { bgPropToClass } from "../../../src/utils"
+
 export interface TagProps extends HTMLAttributes<HTMLAnchorElement> {
   /** **(Optional)** Specifies the 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)** Specifies the Tag background color from the available options. */
+  background?: Lights | Darks | Tints | Greys | White | Black
   /** **(Optional)** Represents the content inside the Tag component. It can be any valid JSX or string. */
   children?: React.ReactNode
   /** **(Optional)** Receives any className to be applied to Tag component. */
   className?: string
   /** **(Optional)** Specifies the URL that the Tag component will link to when clicked. */
   href?: string
-  /** **(Optional)** Specifies the Tag background color from the available options. */
-  tagColor?:
-    | "white"
-    | "purple"
-    | "pink"
-    | "green"
-    | "orange"
-    | "red"
-    | "yellow"
-    | "lilac"
-    | "blue"
-    | "brown"
-    | "grey"
 }
 
 /**
@@ -40,16 +34,15 @@ export interface TagProps extends HTMLAttributes<HTMLAnchorElement> {
 
 export const Tag = ({
   as,
+  background = "tint-grey",
   children,
   className = "",
   href,
-  tagColor = "grey",
   ...props
 }: TagProps): JSX.Element => {
   let element: TagProps["as"] = href ? "a" : "span"
   const componentProps = {
-    className: `coop-tag ${className}`,
-    "data-tag-color": tagColor,
+    className: clsx("coop-tag", bgPropToClass(background, className), className),
     href,
     ...props,
   }

package/src/index.ts

@@ -9,4 +9,5 @@ export * from "./components/RootSVG"
 export * from "./components/SearchBox"
 export * from "./components/Signpost"
 export * from "./components/SkipNav"
+export * from "./components/Squircle"
 export * from "./components/Tag"

package/src/types/colors.ts

@@ -0,0 +1,41 @@
+export type Darks =
+  | "dark-blue"
+  | "dark-yellow"
+  | "dark-green"
+  | "dark-lilac"
+  | "dark-orange"
+  | "dark-pink"
+  | "dark-purple"
+  | "dark-red"
+
+export type Tints =
+  | "tint-blue"
+  | "tint-brown"
+  | "tint-yellow"
+  | "tint-green"
+  | "tint-grey"
+  | "tint-lilac"
+  | "tint-orange"
+  | "tint-pink"
+  | "tint-purple"
+  | "tint-red"
+
+export type Lights =
+  | "light-blue"
+  | "light-yellow"
+  | "light-green"
+  | "light-lilac"
+  | "light-orange"
+  | "light-pink"
+  | "light-purple"
+  | "light-red"
+
+export type Greys = "dark-grey" | "mid-dark-grey" | "mid-grey" | "mid-light-grey" | "light-grey"
+
+export type White = "white"
+export type Black = "black"
+export type None = "none"
+export type CoopBlue = "coop-blue"
+export type OffersRed = "offers-red"
+export type Green = "green"
+export type Blue = "blue"

package/src/types/react.d.ts

@@ -0,0 +1,8 @@
+/* eslint-disable @typescript-eslint/consistent-indexed-object-style */
+declare module "react" {
+  interface CSSProperties {
+    [key: `--${string}`]: string | number | undefined;
+  }
+}
+
+export {};

package/src/utils/index.ts

@@ -0,0 +1,2 @@
+export const bgPropToClass = (color: string, userClasses?: string) =>
+  userClasses?.includes("bg-") ? "" : `bg-${color}`