@coopdigital/react 0.53.0 → 0.54.0

package/README.md

@@ -25,18 +25,18 @@ npm install @coopdigital/react
 
 ## Usage
 
-Import the components that you need, along with the main stylesheet and the corresponding component styles:
+Import the components that you need, along with the foundations stylesheet and the corresponding component styles:
 
 ```
 import { Pill } from "@coopdigital/react"
-import "@coopdigital/styles/main.css"
+import "@coopdigital/styles/foundations.css"
 import "@coopdigital/styles/components/Pill.css"
 ```
 
 Alternatively if your project uses SASS you can import the source stylesheets:
 
 ```
-@use "@coopdigital/styles/src/main.scss"
+@use "@coopdigital/styles/src/foundations.scss"
 @use "@coopdigital/styles/src/components/Pill.scss"
 ```
 

package/dist/components/Button/Button.d.ts

@@ -24,7 +24,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /** **(Optional)** Specify the Button size. */
     size?: "sm" | "md" | "lg";
     /** **(Optional)** Specify the Button variant. */
-    variant?: "green" | "blue" | "white" | "grey" | "green-ghost" | "blue-ghost" | "white-ghost" | "grey-ghost" | "text";
+    variant?: "solid" | "ghost" | "text";
 }
 export declare const Button: ({ as, children, className, href, isDisabled, isFullWidth, isLoading, loadingText, onClick, ref, size, variant, ...props }: ButtonProps) => JSX.Element;
 export default Button;

package/dist/components/Button/Button.js

@@ -3,9 +3,10 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import React__default, { useState, useCallback } from 'react';
+import { hasUserBg } from '../../utils/index.js';
 import { LoadingIcon } from '../icons/LoadingIcon.js';
 
-const Button = ({ as, children, className, href, isDisabled = false, isFullWidth = false, isLoading = false, loadingText = "Loading", onClick, ref, size = "md", variant = "green", ...props }) => {
+const Button = ({ as, children, className, href, isDisabled = false, isFullWidth = false, isLoading = false, loadingText = "Loading", onClick, ref, size = "md", variant = "solid", ...props }) => {
     const element = as !== null && as !== void 0 ? as : (href ? "a" : "button");
     const [isPending, setIsPending] = useState(false);
     const handleClick = useCallback(async (event) => {
@@ -22,7 +23,7 @@ const Button = ({ as, children, className, href, isDisabled = false, isFullWidth
     const componentProps = {
         "aria-disabled": isDisabled ? true : undefined,
         "aria-live": "assertive",
-        className: clsx(variant == "text" ? "coop-link" : "coop-button", className),
+        className: clsx(variant == "text" ? "coop-link" : "coop-button", !hasUserBg(className) && variant === "solid" && "bg-teal", className),
         "data-loading": isLoading || isPending ? true : undefined,
         "data-size": size.length && size !== "md" ? size : undefined,
         "data-variant": variant !== "text" ? variant : undefined,

package/dist/components/Card/Card.js

@@ -2,6 +2,7 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import React__default from 'react';
 import { useSlots } from '../../hooks/useSlots.js';
+import { hasUserBg } from '../../utils/index.js';
 import { ChevronRightIcon } from '../icons/ChevronRightIcon.js';
 import { Image } from '../Image/Image.js';
 
@@ -28,7 +29,7 @@ const Card = ({ chevron = false, children, className, href, hrefAs, imagePositio
     const innerProps = { className: "coop-card--inner" };
     const hasLinkWrapper = href && !slots.CardHeading;
     const componentProps = {
-        className: clsx("coop-card", className),
+        className: clsx("coop-card", !hasUserBg(className) && "bg-white", className),
         "data-image-pos": imagePosition,
         "data-orientation": orientation !== "vertical" ? orientation : undefined,
         ...props,

package/dist/components/DatePicker/DatePicker.js

@@ -130,7 +130,7 @@ const DatePicker = ({ className, closeOnSelect = true, dateFormat = "dd/MM/yyyy"
                                 // eslint-disable-next-line jsx-a11y/no-autofocus
                                 autoFocus: true, captionLayout: "dropdown", 
                                 //defaultMonth={defaultMonth}
-                                disabled: disabledDates, endMonth: endDate, month: state.view, onMonthChange: setView, onSelect: updateValues, startMonth: startDate, ...calendarProps[mode] }), jsxs("div", { className: "coop-datepicker-actions", children: [jsxs(Button, { "aria-label": "Cancel", onClick: resetState, size: "sm", variant: "grey", children: ["Clear ", jsx(CloseIcon, { stroke: "black", strokeWidth: 1 })] }), jsx(Popover.Close, { asChild: true, children: jsxs(Button, { "aria-label": "Accept", size: "sm", children: ["OK ", jsx(TickIcon, { stroke: "white", strokeWidth: 1 })] }) })] })] })] }), jsx("div", { "aria-live": "assertive", className: "sr-only coop-datepicker-status", role: "status", children: (_g = state.message) !== null && _g !== void 0 ? _g : footerMessage[mode] }), mode === "single" && jsx("input", { ...valueProps, value: (_j = (_h = state.single) === null || _h === void 0 ? void 0 : _h.field) !== null && _j !== void 0 ? _j : "" }), mode === "multiple" && jsx("input", { ...valueProps, value: (_l = (_k = state.multiple) === null || _k === void 0 ? void 0 : _k.field) !== null && _l !== void 0 ? _l : "" }), mode === "range" && (jsxs(Fragment, { children: [jsx("input", { ...baseValueProps, id: `${uid}_start`, name: `${name}_start`, value: (_p = (_o = (_m = state.range) === null || _m === void 0 ? void 0 : _m.field) === null || _o === void 0 ? void 0 : _o.from) !== null && _p !== void 0 ? _p : "" }), jsx("input", { ...baseValueProps, id: `${uid}_end`, name: `${name}_end`, value: (_s = (_r = (_q = state.range) === null || _q === void 0 ? void 0 : _q.field) === null || _r === void 0 ? void 0 : _r.to) !== null && _s !== void 0 ? _s : "" })] }))] }));
+                                disabled: disabledDates, endMonth: endDate, month: state.view, onMonthChange: setView, onSelect: updateValues, startMonth: startDate, ...calendarProps[mode] }), jsxs("div", { className: "coop-datepicker-actions", children: [jsxs(Button, { "aria-label": "Cancel", className: "bg-tint-grey", onClick: resetState, size: "sm", children: ["Clear ", jsx(CloseIcon, { stroke: "black", strokeWidth: 1 })] }), jsx(Popover.Close, { asChild: true, children: jsxs(Button, { "aria-label": "Accept", size: "sm", children: ["OK ", jsx(TickIcon, { stroke: "white", strokeWidth: 1 })] }) })] })] })] }), jsx("div", { "aria-live": "assertive", className: "sr-only coop-datepicker-status", role: "status", children: (_g = state.message) !== null && _g !== void 0 ? _g : footerMessage[mode] }), mode === "single" && jsx("input", { ...valueProps, value: (_j = (_h = state.single) === null || _h === void 0 ? void 0 : _h.field) !== null && _j !== void 0 ? _j : "" }), mode === "multiple" && jsx("input", { ...valueProps, value: (_l = (_k = state.multiple) === null || _k === void 0 ? void 0 : _k.field) !== null && _l !== void 0 ? _l : "" }), mode === "range" && (jsxs(Fragment, { children: [jsx("input", { ...baseValueProps, id: `${uid}_start`, name: `${name}_start`, value: (_p = (_o = (_m = state.range) === null || _m === void 0 ? void 0 : _m.field) === null || _o === void 0 ? void 0 : _o.from) !== null && _p !== void 0 ? _p : "" }), jsx("input", { ...baseValueProps, id: `${uid}_end`, name: `${name}_end`, value: (_s = (_r = (_q = state.range) === null || _q === void 0 ? void 0 : _q.field) === null || _r === void 0 ? void 0 : _r.to) !== null && _s !== void 0 ? _s : "" })] }))] }));
 };
 DatePicker.config = componentConfig;
 

package/dist/components/Expandable/Expandable.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { clsx } from 'clsx';
 import { useSlots } from '../../hooks/useSlots.js';
-import { hasUserBg, bgClassToColor } from '../../utils/index.js';
+import { hasUserBg } from '../../utils/index.js';
 import 'react';
 import { ChevronDownIcon } from '../icons/ChevronDownIcon.js';
 
@@ -15,9 +15,9 @@ const Expandable = ({ children, className, ref, ...props }) => {
         className: clsx("coop-expandable", !hasUserBg(className) && "bg-tint-grey", className),
         ...props,
     };
-    componentProps.style = {
-        "--bg": `var(--color-${bgClassToColor(componentProps.className)})`,
-    };
+    // componentProps.style = {
+    //   "--bg": `var(--color-${bgClassToColor(componentProps.className)})`,
+    // }
     return (jsxs("details", { ...componentProps, ref: ref, children: [slots.ExpandableSummary, slots.ExpandableContent] }));
 };
 const ExpandableSummary = ({ children, className, ...props }) => {

package/dist/components/Pill/Pill.js

@@ -22,7 +22,7 @@ const Pill = ({ as, children, className, href, ref, size = "md", ...props }) =>
     return React__default.createElement(element, { ...componentProps, ref }, slots.PillBadge, slots.Children);
 };
 const PillBadge = ({ children, className }) => {
-    return (jsx("span", { className: clsx("coop-pill--badge", !hasUserBg(className) && "bg-offer-red", className), children: children }));
+    return (jsx("span", { className: clsx("coop-pill--badge", !hasUserBg(className) && "bg-red", className), children: children }));
 };
 PillBadge.config = { name: "PillBadge" };
 Pill.Badge = PillBadge;

package/dist/components/Searchbox/Searchbox.d.ts

@@ -1,8 +1,9 @@
-import type { InputHTMLAttributes, JSX, Ref } from "react";
+import type { FormHTMLAttributes, JSX, Ref } from "react";
 import React from "react";
 import { StandardSizes } from "../../types";
 import { type ButtonProps } from "../Button";
-export interface SearchboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+import { TextInputProps } from "../TextInput";
+export interface SearchboxProps extends FormHTMLAttributes<HTMLFormElement> {
     /** **(Optional)** Specify a server endpoint to submit the form. Will be ignored if onSubmit is also set. */
     action?: string;
     /** **(Optional)** Specify props to forward to the Button element. Use `label` to set Button text. */
@@ -28,7 +29,22 @@ export interface SearchboxProps extends Omit<InputHTMLAttributes<HTMLInputElemen
     /** **(Optional)** Specify the Searchbox size. */
     size?: StandardSizes;
     /** **(Optional)** Specify the Searchbox variant. */
-    variant?: "green" | "blue" | "white" | "grey" | "green-ghost" | "blue-ghost" | "white-ghost" | "grey-ghost";
+    variant?: "solid" | "ghost";
 }
-export declare const Searchbox: ({ action, "aria-placeholder": ariaPlaceholder, autoCapitalize, autoComplete, button, className, id, label, labelVisible, name, onSubmit, placeholder, ref, size, variant, ...props }: SearchboxProps) => JSX.Element;
+export declare const Searchbox: {
+    ({ action, children, className, id, label, labelVisible, onSubmit, ref, size, variant, ...props }: SearchboxProps): JSX.Element;
+    Button: {
+        ({ children, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+        config: {
+            name: string;
+        };
+    };
+    Input: {
+        (props: TextInputProps): import("react/jsx-runtime").JSX.Element;
+        config: {
+            isField: boolean;
+            name: string;
+        };
+    };
+};
 export default Searchbox;

package/dist/components/Searchbox/Searchbox.js

@@ -1,21 +1,27 @@
 
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import React__default, { useState, useCallback } from 'react';
 import { useId } from '../../hooks/useId.js';
+import { useSlots } from '../../hooks/useSlots.js';
+import { hasUserBorder } from '../../utils/index.js';
 import { Button } from '../Button/Button.js';
 import { Field } from '../Field/Field.js';
-import { Label } from '../FieldMarkers/Label.js';
 import { SearchIcon } from '../icons/SearchIcon.js';
 import { TextInput } from '../TextInput/TextInput.js';
 
-const defaultButtonProps = {
-    label: React__default.createElement(SearchIcon, { alt: "Search", stroke: "currentColor", strokeWidth: 2 }),
-    loadingText: "",
+const componentSlots = {
+    SearchboxButton: null,
+    SearchboxInput: null,
 };
-const Searchbox = ({ action, "aria-placeholder": ariaPlaceholder, autoCapitalize = "off", autoComplete = "off", button = defaultButtonProps, className, id, label, labelVisible = false, name = "query", onSubmit, placeholder, ref, size = "md", variant = "green", ...props }) => {
-    var _a, _b;
+const defaultButtonText = React__default.createElement(SearchIcon, {
+    alt: "Search",
+    stroke: "currentColor",
+    strokeWidth: 2,
+});
+const Searchbox = ({ action, children, className, id, label, labelVisible = false, onSubmit, ref, size = "md", variant = "solid", ...props }) => {
+    const slots = useSlots(componentSlots, children);
     const [isPending, setIsPending] = useState(false);
     const uid = useId(id);
     const handleSubmit = useCallback(async (event) => {
@@ -30,37 +36,45 @@ const Searchbox = ({ action, "aria-placeholder": ariaPlaceholder, autoCapitalize
             setIsPending(false);
         }
     }, [onSubmit, isPending]);
+    let borderClass = "";
+    if (!hasUserBorder(className)) {
+        borderClass = variant === "ghost" ? "border-teal" : "border-grey";
+    }
     const formProps = {
         action: action !== null && action !== void 0 ? action : undefined,
-        className: clsx("coop-searchbox", className),
+        className: clsx("coop-searchbox", borderClass, className),
         "data-size": size && size !== "md" ? size : undefined,
-        "data-variant": variant.length && variant !== "green" ? variant : undefined,
-        id: uid,
+        "data-variant": variant.length && variant !== "solid" ? variant : undefined,
+        id: uid + "-form",
         onSubmit: onSubmit ? handleSubmit : undefined,
+        ...props,
     };
-    const buttonProps = {
-        className: button === null || button === void 0 ? void 0 : button.className,
+    slots.SearchboxButton = React__default.cloneElement(slots.SearchboxButton, {
         isLoading: isPending,
-        loadingText: (_a = button === null || button === void 0 ? void 0 : button.loadingText) !== null && _a !== void 0 ? _a : "",
         size,
-        variant,
-    };
-    const inputProps = {
-        "aria-placeholder": (_b = placeholder !== null && placeholder !== void 0 ? placeholder : ariaPlaceholder) !== null && _b !== void 0 ? _b : undefined,
-        autoCapitalize,
-        autoComplete,
-        id: uid + "--input",
-        name,
-        placeholder,
+    });
+    slots.SearchboxInput = React__default.cloneElement(slots.SearchboxInput, {
+        autoCapitalize: "off",
+        id: uid,
         size,
-        type: "search",
-        ...props,
-    };
+    });
     const labelProps = {
-        htmlFor: uid + "--input",
+        htmlFor: uid,
         isVisible: labelVisible,
     };
-    return (jsxs("form", { ...formProps, ref: ref, children: [label && jsx(Label, { ...labelProps, children: label }), jsxs("div", { className: "coop-searchbox--inner", children: [jsx(Field, { children: jsx(TextInput, { ...inputProps }) }), jsx(Button, { ...buttonProps, children: button.label })] })] }));
+    return (jsxs("form", { ...formProps, ref: ref, children: [label && jsx(Field.Label, { ...labelProps, children: label }), jsxs("div", { className: clsx("coop-searchbox--inner"), children: [jsx(Field, { children: slots.SearchboxInput }), slots.SearchboxButton] })] }));
+};
+const SearchboxButton = ({ children, ...props }) => {
+    const buttonProps = {
+        children: children !== null && children !== void 0 ? children : defaultButtonText,
+        ...props,
+    };
+    return jsx(Button, { ...buttonProps });
 };
+const SearchboxInput = (props) => jsx(TextInput, { ...props });
+Searchbox.Button = SearchboxButton;
+Searchbox.Input = SearchboxInput;
+SearchboxButton.config = { name: "SearchboxButton" };
+SearchboxInput.config = { isField: true, name: "SearchboxInput" };
 
 export { Searchbox, Searchbox as default };

package/dist/components/Squircle/Squircle.js

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

package/dist/types/colors.d.ts

@@ -1,11 +1,10 @@
 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 BrandBlue = "brand-blue";
-export type OfferRed = "offer-red";
+export type OfferRed = "offer";
 export type Green = "green";
 export type Blue = "blue";

package/dist/utils/index.d.ts

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

package/dist/utils/index.js

@@ -1,6 +1,9 @@
 const hasUserBg = (userClasses) => {
     return typeof userClasses === "string" && (userClasses === null || userClasses === void 0 ? void 0 : userClasses.includes("bg-")) ? true : false;
 };
+const hasUserBorder = (userClasses) => {
+    return typeof userClasses === "string" && (userClasses === null || userClasses === void 0 ? void 0 : userClasses.includes("border-")) ? 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;
@@ -12,4 +15,4 @@ const bgClassToColor = (userClasses) => {
     // )
 };
 
-export { bgClassToColor, hasUserBg };
+export { bgClassToColor, hasUserBg, hasUserBorder };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "0.53.0",
+  "version": "0.54.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -58,22 +58,22 @@
   "license": "MIT",
   "description": "React components for the Experience Library design system",
   "devDependencies": {
-    "@axe-core/playwright": "^4.11.0",
+    "@axe-core/playwright": "^4.11.1",
     "@playwright/test": "^1.58.1",
-    "@storybook/addon-a11y": "^10.2.6",
-    "@storybook/addon-docs": "^10.2.6",
-    "@storybook/addon-onboarding": "^10.2.6",
-    "@storybook/react-vite": "^10.2.6",
+    "@storybook/addon-a11y": "^10.2.7",
+    "@storybook/addon-docs": "^10.2.7",
+    "@storybook/addon-onboarding": "^10.2.7",
+    "@storybook/react-vite": "^10.2.7",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
-    "@types/react": "^19.2.10",
+    "@types/react": "^19.2.13",
     "@types/react-dom": "^19.2.3",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "resize-observer-polyfill": "^1.5.1",
     "serve": "^14.2.5",
-    "storybook": "^10.2.6",
-    "storybook-addon-tag-badges": "^3.0.5"
+    "storybook": "^10.2.7",
+    "storybook-addon-tag-badges": "^3.0.6"
   },
   "peerDependencies": {
     "react": "^19.1.0",
@@ -83,10 +83,10 @@
     "storybook": "$storybook"
   },
   "dependencies": {
-    "@coopdigital/styles": "^0.44.0",
+    "@coopdigital/styles": "^0.45.0",
     "@radix-ui/react-popover": "^1.1.15",
     "clsx": "^2.1.1",
     "react-day-picker": "^9.12.0"
   },
-  "gitHead": "d8324f6ee7c544c37f752b5e6eeb67cffff20237"
+  "gitHead": "d15d7ae0d231bf28986a18a9e097537802f845db"
 }

package/src/components/Button/Button.tsx

@@ -5,6 +5,7 @@ import type { ButtonHTMLAttributes, ForwardRefExoticComponent, JSX, Ref } from "
 import clsx from "clsx"
 import React, { useCallback, useState } from "react"
 
+import { hasUserBg } from "../../utils"
 import { LoadingIcon } from "../icons"
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
@@ -32,16 +33,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   /** **(Optional)** Specify the Button size. */
   size?: "sm" | "md" | "lg"
   /** **(Optional)** Specify the Button variant. */
-  variant?:
-    | "green"
-    | "blue"
-    | "white"
-    | "grey"
-    | "green-ghost"
-    | "blue-ghost"
-    | "white-ghost"
-    | "grey-ghost"
-    | "text"
+  variant?: "solid" | "ghost" | "text"
 }
 
 type OnClickHandler =
@@ -60,7 +52,7 @@ export const Button = ({
   onClick,
   ref,
   size = "md",
-  variant = "green",
+  variant = "solid",
   ...props
 }: ButtonProps): JSX.Element => {
   const element: ButtonProps["as"] = as ?? (href ? "a" : "button")
@@ -85,7 +77,11 @@ export const Button = ({
   const componentProps = {
     "aria-disabled": isDisabled ? true : undefined,
     "aria-live": "assertive" as keyof ButtonHTMLAttributes<HTMLButtonElement>["aria-live"],
-    className: clsx(variant == "text" ? "coop-link" : "coop-button", className),
+    className: clsx(
+      variant == "text" ? "coop-link" : "coop-button",
+      !hasUserBg(className) && variant === "solid" && "bg-teal",
+      className
+    ),
     "data-loading": isLoading || isPending ? true : undefined,
     "data-size": size.length && size !== "md" ? size : undefined,
     "data-variant": variant !== "text" ? variant : undefined,

package/src/components/Card/Card.tsx

@@ -4,6 +4,7 @@ import clsx from "clsx"
 import React from "react"
 
 import { useSlots } from "../../hooks/useSlots"
+import { hasUserBg } from "../../utils"
 import { ChevronRightIcon } from "../icons/ChevronRightIcon"
 import { Image, ImageProps } from "../Image"
 
@@ -99,7 +100,7 @@ export const Card = ({
   const hasLinkWrapper = href && !slots.CardHeading
 
   const componentProps = {
-    className: clsx("coop-card", className),
+    className: clsx("coop-card", !hasUserBg(className) && "bg-white", className),
     "data-image-pos": imagePosition,
     "data-orientation": orientation !== "vertical" ? orientation : undefined,
     ...props,

package/src/components/DatePicker/DatePicker.tsx

@@ -330,7 +330,7 @@ export const DatePicker = ({
             {...calendarProps[mode]}
           />
           <div className="coop-datepicker-actions">
-            <Button aria-label="Cancel" onClick={resetState} size="sm" variant="grey">
+            <Button aria-label="Cancel" className="bg-tint-grey" onClick={resetState} size="sm">
               Clear <CloseIcon stroke="black" strokeWidth={1} />
             </Button>
             <Popover.Close asChild>

package/src/components/Expandable/Expandable.tsx

@@ -3,7 +3,7 @@ import type { DetailsHTMLAttributes, HTMLAttributes, JSX, Ref } from "react"
 import { clsx } from "clsx"
 
 import { useSlots } from "../../hooks/useSlots"
-import { bgClassToColor, hasUserBg } from "../../utils"
+import { hasUserBg } from "../../utils"
 import { ChevronDownIcon } from "../icons"
 
 export interface ExpandableProps extends DetailsHTMLAttributes<HTMLDetailsElement> {
@@ -47,9 +47,9 @@ export const Expandable = ({
     ...props,
   }
 
-  componentProps.style = {
-    "--bg": `var(--color-${bgClassToColor(componentProps.className)})`,
-  }
+  // componentProps.style = {
+  //   "--bg": `var(--color-${bgClassToColor(componentProps.className)})`,
+  // }
 
   return (
     <details {...componentProps} ref={ref}>

package/src/components/Pill/Pill.tsx

@@ -62,7 +62,7 @@ export const Pill = ({
 
 const PillBadge = ({ children, className }: PillBadgeProps) => {
   return (
-    <span className={clsx("coop-pill--badge", !hasUserBg(className) && "bg-offer-red", className)}>
+    <span className={clsx("coop-pill--badge", !hasUserBg(className) && "bg-red", className)}>
       {children}
     </span>
   )

package/src/components/Searchbox/Searchbox.tsx

@@ -1,22 +1,20 @@
 "use client"
 
-import type { InputHTMLAttributes, JSX, Ref } from "react"
+import type { FormHTMLAttributes, JSX, Ref } from "react"
 
 import clsx from "clsx"
 import React, { useCallback, useState } from "react"
 
 import { useId } from "../../hooks/useId"
+import { useSlots } from "../../hooks/useSlots"
 import { StandardSizes } from "../../types"
+import { hasUserBorder } from "../../utils"
 import { Button, type ButtonProps } from "../Button"
 import Field from "../Field"
-import { Label as FieldLabel } from "../FieldMarkers/Label"
 import { SearchIcon } from "../icons"
 import TextInput, { TextInputProps } from "../TextInput"
 
-export interface SearchboxProps extends Omit<
-  InputHTMLAttributes<HTMLInputElement>,
-  "size" | "type"
-> {
+export interface SearchboxProps extends FormHTMLAttributes<HTMLFormElement> {
   /** **(Optional)** Specify a server endpoint to submit the form. Will be ignored if onSubmit is also set. */
   action?: string
   /** **(Optional)** Specify props to forward to the Button element. Use `label` to set Button text. */
@@ -40,46 +38,40 @@ export interface SearchboxProps extends Omit<
   /** **(Optional)** Specify the Searchbox size. */
   size?: StandardSizes
   /** **(Optional)** Specify the Searchbox variant. */
-  variant?:
-    | "green"
-    | "blue"
-    | "white"
-    | "grey"
-    | "green-ghost"
-    | "blue-ghost"
-    | "white-ghost"
-    | "grey-ghost"
+  variant?: "solid" | "ghost"
 }
 
-const defaultButtonProps: SearchboxProps["button"] = {
-  label: React.createElement(SearchIcon, { alt: "Search", stroke: "currentColor", strokeWidth: 2 }),
-  loadingText: "",
+const componentSlots = {
+  SearchboxButton: null,
+  SearchboxInput: null,
 }
 
+const defaultButtonText = React.createElement(SearchIcon, {
+  alt: "Search",
+  stroke: "currentColor",
+  strokeWidth: 2,
+})
+
 export const Searchbox = ({
   action,
-  "aria-placeholder": ariaPlaceholder,
-  autoCapitalize = "off",
-  autoComplete = "off",
-  button = defaultButtonProps,
+  children,
   className,
-
   id,
   label,
   labelVisible = false,
-  name = "query",
   onSubmit,
-  placeholder,
   ref,
   size = "md",
-  variant = "green",
+  variant = "solid",
   ...props
 }: SearchboxProps): JSX.Element => {
+  const slots = useSlots(componentSlots, children)
+
   const [isPending, setIsPending] = useState(false)
   const uid = useId(id)
 
   const handleSubmit = useCallback(
-    async (event: React.FormEvent<HTMLFormElement>) => {
+    async (event: React.SubmitEvent<HTMLFormElement>) => {
       event.preventDefault()
 
       if (isPending || !onSubmit) return
@@ -95,51 +87,69 @@ export const Searchbox = ({
     [onSubmit, isPending]
   )
 
+  let borderClass = ""
+  if (!hasUserBorder(className)) {
+    borderClass = variant === "ghost" ? "border-teal" : "border-grey"
+  }
+
   const formProps = {
     action: action ?? undefined,
-    className: clsx("coop-searchbox", className),
+    className: clsx("coop-searchbox", borderClass, className),
     "data-size": size && size !== "md" ? size : undefined,
-    "data-variant": variant.length && variant !== "green" ? variant : undefined,
-    id: uid,
+    "data-variant": variant.length && variant !== "solid" ? variant : undefined,
+    id: uid + "-form",
     onSubmit: onSubmit ? handleSubmit : undefined,
+    ...props,
   }
 
-  const buttonProps: ButtonProps = {
-    className: button?.className,
-    isLoading: isPending,
-    loadingText: button?.loadingText ?? "",
-    size,
-    variant,
-  }
+  slots.SearchboxButton = React.cloneElement(
+    slots.SearchboxButton as React.ReactElement<ButtonProps>,
+    {
+      isLoading: isPending,
+      size,
+    }
+  )
 
-  const inputProps: TextInputProps = {
-    "aria-placeholder": placeholder ?? ariaPlaceholder ?? undefined,
-    autoCapitalize,
-    autoComplete,
-    id: uid + "--input",
-    name,
-    placeholder,
-    size,
-    type: "search",
-    ...props,
-  }
+  slots.SearchboxInput = React.cloneElement(
+    slots.SearchboxInput as React.ReactElement<TextInputProps>,
+    {
+      autoCapitalize: "off",
+      id: uid,
+      size,
+    }
+  )
 
   const labelProps = {
-    htmlFor: uid + "--input",
+    htmlFor: uid,
     isVisible: labelVisible,
   }
 
   return (
     <form {...formProps} ref={ref}>
-      {label && <FieldLabel {...labelProps}>{label}</FieldLabel>}
-      <div className="coop-searchbox--inner">
-        <Field>
-          <TextInput {...inputProps} />
-        </Field>
-        <Button {...buttonProps}>{button.label}</Button>
+      {label && <Field.Label {...labelProps}>{label}</Field.Label>}
+      <div className={clsx("coop-searchbox--inner")}>
+        <Field>{slots.SearchboxInput}</Field>
+        {slots.SearchboxButton}
       </div>
     </form>
   )
 }
 
+const SearchboxButton = ({ children, ...props }: ButtonProps) => {
+  const buttonProps = {
+    children: children ?? defaultButtonText,
+    ...props,
+  }
+
+  return <Button {...buttonProps} />
+}
+
+const SearchboxInput = (props: TextInputProps) => <TextInput {...props} />
+
+Searchbox.Button = SearchboxButton
+Searchbox.Input = SearchboxInput
+
+SearchboxButton.config = { name: "SearchboxButton" }
+SearchboxInput.config = { isField: true, name: "SearchboxInput" }
+
 export default Searchbox

package/src/components/Squircle/Squircle.tsx

@@ -22,7 +22,7 @@ export const Squircle = ({
   ...props
 }: SquircleProps): JSX.Element => {
   const componentProps = {
-    className: clsx("coop-squircle", !hasUserBg(className) && "bg-offer-red", className),
+    className: clsx("coop-squircle", !hasUserBg(className) && "bg-offer", className),
     "data-size": size.length && size !== "lg" ? size : undefined,
     ...props,
   }

package/src/types/colors.ts

@@ -30,12 +30,10 @@ export type Lights =
   | "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 BrandBlue = "brand-blue"
-export type OfferRed = "offer-red"
+export type OfferRed = "offer"
 export type Green = "green"
 export type Blue = "blue"

package/src/utils/index.ts

@@ -5,6 +5,10 @@ export const hasUserBg = (userClasses?: string) => {
   return typeof userClasses === "string" && userClasses?.includes("bg-") ? true : false
 }
 
+export const hasUserBorder = (userClasses?: string) => {
+  return typeof userClasses === "string" && userClasses?.includes("border-") ? true : false
+}
+
 export const bgClassToColor = (userClasses: string) => {
   return /bg-([^\s]+)/.exec(userClasses)?.[1] ?? null