@coopdigital/react 0.18.0 → 0.19.0

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

@@ -22,7 +22,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /** **(Optional)** Specifies the Button size. */
     size?: "sm" | "md" | "lg" | "xl";
     /** **(Optional)** Specifies the Button variant. */
-    variant?: "primary" | "secondary" | "white" | "grey" | "ghost" | "text";
+    variant?: "green" | "blue" | "white" | "grey" | "green-ghost" | "blue-ghost" | "white-ghost" | "grey-ghost" | "text";
 }
 /**
  * The Button component is an interactive element that people can use to take an action.

package/dist/components/Button/Button.js

@@ -1,15 +1,13 @@
 import { __rest, __awaiter } from '../../node_modules/tslib/tslib.es6.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import React, { useState, useCallback } from 'react';
+import { LoadingIcon } from '../Icon/LoadingIcon.js';
 
-const LoadingIcon = () => {
-    return (jsx("svg", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) }));
-};
 /**
  * The Button component is an interactive element that people can use to take an action.
  */
 const Button = (_a) => {
-    var { as, children, className = "", href, isDisabled = false, isFullWidth = false, isLoading = false, loadingText = "Loading", onClick, size = "md", variant = "primary" } = _a, props = __rest(_a, ["as", "children", "className", "href", "isDisabled", "isFullWidth", "isLoading", "loadingText", "onClick", "size", "variant"]);
+    var { as, children, className = "", href, isDisabled = false, isFullWidth = false, isLoading = false, loadingText = "Loading", onClick, size = "md", variant = "green" } = _a, props = __rest(_a, ["as", "children", "className", "href", "isDisabled", "isFullWidth", "isLoading", "loadingText", "onClick", "size", "variant"]);
     let element = href ? "a" : "button";
     if (as) {
         element = as;

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

@@ -5,7 +5,7 @@ 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";
+    background?: "purple" | "pink" | "green" | "orange" | "red" | "yellow" | "lilac" | "blue" | "brown" | "grey";
     /** **(Optional)** Represents the content inside the badge. */
     badge?: React.ReactNode;
     /** **(Optional)** Specify badge position relative to top right corner. */

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

@@ -1,7 +1,7 @@
 import type { DetailsHTMLAttributes, JSX } from "react";
 export interface ExpandableProps extends DetailsHTMLAttributes<HTMLDetailsElement> {
     /** **(Optional)** Specifies the Expandable background color from the available options. */
-    background?: "grey" | "purple" | "pink" | "green" | "orange" | "red" | "yellow" | "lilac" | "blue";
+    background?: "purple" | "pink" | "green" | "orange" | "red" | "yellow" | "lilac" | "blue" | "white" | "transparent" | "brown" | "grey";
     /** 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

@@ -6,7 +6,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
  * It can be used to reveal more context for a specific issue or action.
  */
 const Expandable = (_a) => {
-    var { background, children, className = "", summary } = _a, props = __rest(_a, ["background", "children", "className", "summary"]);
+    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 })] })));
 };

package/dist/components/Icon/LoadingIcon.d.ts

@@ -0,0 +1,6 @@
+import { type SVGProps } from "react";
+interface IconProps extends SVGProps<SVGSVGElement> {
+    alt?: string;
+}
+export declare const LoadingIcon: ({ alt, className, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Icon/LoadingIcon.js

@@ -0,0 +1,12 @@
+import { __rest } from '../../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId } from 'react';
+
+const LoadingIcon = (_a) => {
+    var { alt, className } = _a, props = __rest(_a, ["alt", "className"]);
+    const id = useId();
+    const componentProps = Object.assign({ "aria-labelledby": alt ? id : undefined, className: `coop-icon ${className !== null && className !== void 0 ? className : ""}`.trim(), "data-icon": "loading", fill: "none", role: alt ? "img" : undefined, viewBox: "0 0 24 24" }, props);
+    return (jsxs("svg", Object.assign({}, componentProps, { children: [alt ? jsx("title", { id: id, children: alt }) : null, jsx("path", { d: "M10.72 19.9a8 8 0 0 1-6.5-9.79 7.77 7.77 0 0 1 6.18-5.95 8 8 0 0 1 9.49 6.52A1.54 1.54 0 0 0 21.38 12h.13a1.37 1.37 0 0 0 1.38-1.54 11 11 0 1 0-12.7 12.39A1.54 1.54 0 0 0 12 21.34a1.47 1.47 0 0 0-1.28-1.44", fill: "currentColor" })] })));
+};
+
+export { LoadingIcon };

package/dist/components/Icon/SearchIcon.js

@@ -0,0 +1,12 @@
+import { __rest } from '../../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId } from 'react';
+
+const SearchIcon = (_a) => {
+    var { alt, className } = _a, props = __rest(_a, ["alt", "className"]);
+    const id = useId();
+    const componentProps = Object.assign({ "aria-labelledby": alt ? id : undefined, className: `coop-icon ${className !== null && className !== void 0 ? className : ""}`.trim(), "data-icon": "search", fill: "none", role: alt ? "img" : undefined, viewBox: "0 0 32 32" }, props);
+    return (jsxs("svg", Object.assign({}, componentProps, { children: [alt ? jsx("title", { id: id, children: alt }) : null, jsx("path", { d: "M13.25 25.49a12.25 12.25 0 1 1 12.24-12.24 12.25 12.25 0 0 1-12.24 12.24m0-22.61a10.37 10.37 0 1 0 10.36 10.37A10.38 10.38 0 0 0 13.25 2.88", fill: "currentColor" }), jsx("path", { d: "M30.06 31a.94.94 0 0 1-.67-.28l-8.81-8.81a.94.94 0 1 1 1.33-1.33l8.81 8.81a.94.94 0 0 1 0 1.33.9.9 0 0 1-.66.28", fill: "currentColor" })] })));
+};
+
+export { SearchIcon };

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

@@ -20,6 +20,7 @@ export { CoopLocationIcon } from "./CoopLocationIcon";
 export { DownloadIcon } from "./DownloadIcon";
 export { HomeIcon } from "./HomeIcon";
 export { InformationIcon } from "./InformationIcon";
+export { LoadingIcon } from "./LoadingIcon";
 export { LocationIcon } from "./LocationIcon";
 export { MailIcon } from "./MailIcon";
 export { MenuIcon } from "./MenuIcon";

package/dist/components/SearchBox/SearchBox.d.ts

@@ -0,0 +1,48 @@
+import React, { HTMLAttributes } from "react";
+import { type JSX } from "react";
+import { type ButtonProps } from "../Button";
+export interface SearchBoxProps extends HTMLAttributes<HTMLInputElement> {
+    /** **(Optional)** Server endpoint to submit the form. Will be ignored if onSubmit is also set. */
+    action?: string;
+    /** **(Optional)** Whether or not to enable auto complete on the input field. Default: `off`. */
+    autoComplete?: "off" | "on";
+    /** **(Optional)** Props to forward to the Button element. Use `label` to set Button text. */
+    button?: Pick<ButtonProps, "className" | "loadingText"> & {
+        label?: React.ReactNode;
+    };
+    /** **(Optional)** Receives any className to be applied to SearchBox component. */
+    className?: string;
+    /** Receives the label to be applied to SearchBox component. */
+    label: string;
+    /** **(Optional)** Receives whether label is visible to human or only screen readers. */
+    labelVisible?: boolean;
+    /** **(Optional)** Name of the input element, also used as the URL search parameter. Defaults to `query` */
+    name?: string;
+    /** **(Optional)** Callback to run when the form is submitted. If this is an async function, it will be awaited and the SearchBox will be in a pending state until the promise is resolved. */
+    onSubmit?: React.FormEventHandler<HTMLElement> | undefined;
+    /** **(Optional)** Receives any placeholder for SearchBox component. */
+    placeholder?: string;
+    /** **(Optional)** Receives any size to be applied to SearchBox component. */
+    size?: string;
+    /** **(Optional)** Receives the variant to be applied to SearchBox component. */
+    variant?: "green" | "blue" | "white" | "grey" | "green-ghost" | "blue-ghost" | "white-ghost" | "grey-ghost";
+}
+/**
+ * SearchBox component allows a person to enter a word or a phrase to find relevant content.
+ *
+ * The `label` prop is mandatory but not visible by default (it is visible for screen readers). You can make it visible to humans by setting `labelVisible` to true.
+ *
+ * If you are using a single icon with no text for `button.label`, ensure you pass an `alt` property to the icon for accessibility purposes.
+ *
+ * You can provide an `action` to submit input like a normal HTML form, or an `onSubmit` callback to handle submissions client-side.
+ *
+ * **Good to know:** SearchBox requires both `SearchBox` and `Button` css/scss files.
+ *
+ * ```
+ * import "@coopdigital/styles/components/Searchbox.css"
+ * import "@coopdigital/styles/components/Button.css"
+ *
+ * ```
+ */
+export declare const SearchBox: ({ action, "aria-placeholder": ariaPlaceholder, autoCapitalize, autoComplete, button, className, label, labelVisible, name, onSubmit, placeholder, size, variant, ...props }: SearchBoxProps) => JSX.Element;
+export default SearchBox;

package/dist/components/SearchBox/SearchBox.js

@@ -0,0 +1,67 @@
+import { __rest, __awaiter } from '../../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useState, useCallback, useId } from 'react';
+import { Button } from '../Button/Button.js';
+import { SearchIcon } from '../Icon/SearchIcon.js';
+
+const defaultButtonProps = {
+    label: React.createElement(SearchIcon, { alt: "Search", stroke: "currentColor", strokeWidth: 2 }),
+    loadingText: "",
+};
+/**
+ * SearchBox component allows a person to enter a word or a phrase to find relevant content.
+ *
+ * The `label` prop is mandatory but not visible by default (it is visible for screen readers). You can make it visible to humans by setting `labelVisible` to true.
+ *
+ * If you are using a single icon with no text for `button.label`, ensure you pass an `alt` property to the icon for accessibility purposes.
+ *
+ * You can provide an `action` to submit input like a normal HTML form, or an `onSubmit` callback to handle submissions client-side.
+ *
+ * **Good to know:** SearchBox requires both `SearchBox` and `Button` css/scss files.
+ *
+ * ```
+ * import "@coopdigital/styles/components/Searchbox.css"
+ * import "@coopdigital/styles/components/Button.css"
+ *
+ * ```
+ */
+const SearchBox = (_a) => {
+    var _b, _c;
+    var { action, "aria-placeholder": ariaPlaceholder, autoCapitalize = "off", autoComplete = "off", button = defaultButtonProps, className, label, labelVisible = false, name = "query", onSubmit, placeholder, size = "md", variant = "green" } = _a, props = __rest(_a, ["action", "aria-placeholder", "autoCapitalize", "autoComplete", "button", "className", "label", "labelVisible", "name", "onSubmit", "placeholder", "size", "variant"]);
+    const [isPending, setIsPending] = useState(false);
+    const handleSubmit = useCallback((event) => __awaiter(void 0, void 0, void 0, function* () {
+        event.preventDefault();
+        if (isPending || !onSubmit)
+            return;
+        setIsPending(true);
+        try {
+            yield Promise.resolve(onSubmit(event));
+        }
+        finally {
+            setIsPending(false);
+        }
+    }), [onSubmit, isPending]);
+    const id = useId();
+    const formProps = {
+        action: action !== null && action !== void 0 ? action : undefined,
+        className: `coop-search-box ${className !== null && className !== void 0 ? className : ""}`.trim(),
+        "data-size": size.length && size !== "md" ? size : undefined,
+        "data-variant": variant.length && variant !== "green" ? variant : undefined,
+        onSubmit: onSubmit ? handleSubmit : undefined,
+    };
+    const buttonProps = {
+        className: button === null || button === void 0 ? void 0 : button.className,
+        isLoading: isPending,
+        loadingText: (_b = button === null || button === void 0 ? void 0 : button.loadingText) !== null && _b !== void 0 ? _b : "",
+        size: size,
+        variant: variant,
+    };
+    const inputProps = Object.assign({ "aria-placeholder": (_c = placeholder !== null && placeholder !== void 0 ? placeholder : ariaPlaceholder) !== null && _c !== void 0 ? _c : undefined, autoCapitalize,
+        autoComplete,
+        id,
+        name,
+        placeholder, type: "search" }, props);
+    return (jsxs("form", Object.assign({}, formProps, { children: [jsx("label", { className: labelVisible ? "" : "sr-only", htmlFor: id, children: label }), jsxs("div", { className: "coop-search-box--inner", children: [jsx("input", Object.assign({}, inputProps)), jsx(Button, Object.assign({}, buttonProps, { children: button.label }))] })] })));
+};
+
+export { SearchBox, SearchBox as default };

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

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

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

@@ -10,7 +10,7 @@ export interface TagProps extends HTMLAttributes<HTMLAnchorElement> {
     /** **(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" | "grey" | "purple" | "pink" | "green" | "orange" | "red" | "yellow" | "lilac" | "blue";
+    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.

package/dist/index.d.ts

@@ -6,6 +6,7 @@ export * from "./components/Expandable";
 export * from "./components/Image";
 export * from "./components/Pill";
 export * from "./components/RootSVG";
+export * from "./components/SearchBox";
 export * from "./components/Signpost";
 export * from "./components/SkipNav";
 export * from "./components/Tag";

package/dist/index.js

@@ -6,6 +6,7 @@ export { Expandable } from './components/Expandable/Expandable.js';
 export { Image } from './components/Image/Image.js';
 export { Pill } from './components/Pill/Pill.js';
 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 { Tag } from './components/Tag/Tag.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -45,8 +45,8 @@
   "description": "",
   "devDependencies": {
     "@axe-core/playwright": "^4.10.1",
-    "@coopdigital/styles": "^0.15.2",
-    "@playwright/test": "^1.51.1",
+    "@coopdigital/styles": "^0.16.0",
+    "@playwright/test": "^1.52.0",
     "@storybook/addon-a11y": "^8.6.12",
     "@storybook/addon-essentials": "^8.6.12",
     "@storybook/addon-interactions": "^8.6.12",
@@ -58,14 +58,14 @@
     "@storybook/test": "^8.6.12",
     "@storybook/theming": "^8.6.12",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.2.0",
-    "@types/react": "^19.0.12",
-    "@types/react-dom": "^19.0.4",
+    "@testing-library/react": "^16.3.0",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
     "storybook": "^8.6.12"
   },
   "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
   },
-  "gitHead": "0fa78c25e19ac1c1dc6af564c570e94646e71bc4"
+  "gitHead": "c3b9ce837060a373926286d2a770796f75f8c168"
 }

package/src/components/Button/Button.tsx

@@ -7,6 +7,8 @@ import type {
 
 import React, { useCallback, useState } from "react"
 
+import { LoadingIcon } from "../Icon"
+
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   /** **(Optional)** Specifies the custom element to override default `a` or `button`. */
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -30,29 +32,22 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   /** **(Optional)** Specifies the Button size. */
   size?: "sm" | "md" | "lg" | "xl"
   /** **(Optional)** Specifies the Button variant. */
-  variant?: "primary" | "secondary" | "white" | "grey" | "ghost" | "text"
+  variant?:
+    | "green"
+    | "blue"
+    | "white"
+    | "grey"
+    | "green-ghost"
+    | "blue-ghost"
+    | "white-ghost"
+    | "grey-ghost"
+    | "text"
 }
 
 type OnClickHandler =
   | React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>
   | ((event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => Promise<void>)
 
-const LoadingIcon = () => {
-  return (
-    <svg
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path d="M21 12a9 9 0 1 1-6.219-8.56" />
-    </svg>
-  )
-}
-
 /**
  * The Button component is an interactive element that people can use to take an action.
  */
@@ -67,7 +62,7 @@ export const Button = ({
   loadingText = "Loading",
   onClick,
   size = "md",
-  variant = "primary",
+  variant = "green",
   ...props
 }: ButtonProps): JSX.Element => {
   let element: ButtonProps["as"] = href ? "a" : "button"

package/src/components/Card/Card.tsx

@@ -10,7 +10,17 @@ 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"
+  background?:
+    | "purple"
+    | "pink"
+    | "green"
+    | "orange"
+    | "red"
+    | "yellow"
+    | "lilac"
+    | "blue"
+    | "brown"
+    | "grey"
   /** **(Optional)** Represents the content inside the badge. */
   badge?: React.ReactNode
   /** **(Optional)** Specify badge position relative to top right corner. */

package/src/components/Expandable/Expandable.tsx

@@ -2,7 +2,19 @@ import type { DetailsHTMLAttributes, JSX } from "react"
 
 export interface ExpandableProps extends DetailsHTMLAttributes<HTMLDetailsElement> {
   /** **(Optional)** Specifies the Expandable background color from the available options. */
-  background?: "grey" | "purple" | "pink" | "green" | "orange" | "red" | "yellow" | "lilac" | "blue"
+  background?:
+    | "purple"
+    | "pink"
+    | "green"
+    | "orange"
+    | "red"
+    | "yellow"
+    | "lilac"
+    | "blue"
+    | "white"
+    | "transparent"
+    | "brown"
+    | "grey"
   /** 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. */
@@ -17,7 +29,7 @@ export interface ExpandableProps extends DetailsHTMLAttributes<HTMLDetailsElemen
  */
 
 export const Expandable = ({
-  background,
+  background = "grey",
   children,
   className = "",
   summary,

package/src/components/Icon/AddIcon.tsx

@@ -9,6 +9,7 @@ export const AddIcon = ({ alt, className, ...props }: IconProps) => {
   const componentProps = {
     "aria-labelledby": alt ? id : undefined,
     className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "add",
     fill: "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",

package/src/components/Icon/ArrowDownIcon.tsx

@@ -9,6 +9,7 @@ export const ArrowDownIcon = ({ alt, className, ...props }: IconProps) => {
   const componentProps = {
     "aria-labelledby": alt ? id : undefined,
     className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "arrow-down",
     fill: "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",

package/src/components/Icon/ArrowLeftIcon.tsx

@@ -9,6 +9,7 @@ export const ArrowLeftIcon = ({ alt, className, ...props }: IconProps) => {
   const componentProps = {
     "aria-labelledby": alt ? id : undefined,
     className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "arrow-left",
     fill: "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",

package/src/components/Icon/ArrowRightIcon.tsx

@@ -9,6 +9,7 @@ export const ArrowRightIcon = ({ alt, className, ...props }: IconProps) => {
   const componentProps = {
     "aria-labelledby": alt ? id : undefined,
     className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "arrow-right",
     fill: "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",

package/src/components/Icon/ArrowUpIcon.tsx

@@ -9,6 +9,7 @@ export const ArrowUpIcon = ({ alt, className, ...props }: IconProps) => {
   const componentProps = {
     "aria-labelledby": alt ? id : undefined,
     className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "arrow-up",
     fill: "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",

package/src/components/Icon/AvatarAltIcon.tsx

@@ -9,6 +9,7 @@ export const AvatarAltIcon = ({ alt, className, ...props }: IconProps) => {
   const componentProps = {
     "aria-labelledby": alt ? id : undefined,
     className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "avatar-alt",
     fill: "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",

package/src/components/Icon/AvatarIcon.tsx

@@ -9,6 +9,7 @@ export const AvatarIcon = ({ alt, className, ...props }: IconProps) => {
   const componentProps = {
     "aria-labelledby": alt ? id : undefined,
     className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "avatar",
     fill: "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",

package/src/components/Icon/BasketIcon.tsx

@@ -9,6 +9,7 @@ export const BasketIcon = ({ alt, className, ...props }: IconProps) => {
   const componentProps = {
     "aria-labelledby": alt ? id : undefined,
     className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "basket",
     fill: "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",

package/src/components/Icon/CalendarIcon.tsx

@@ -9,6 +9,7 @@ export const CalendarIcon = ({ alt, className, ...props }: IconProps) => {
   const componentProps = {
     "aria-labelledby": alt ? id : undefined,
     className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "calendar",
     fill: "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",

package/src/components/Icon/ChevronDownIcon.tsx

@@ -9,6 +9,7 @@ export const ChevronDownIcon = ({ alt, className, ...props }: IconProps) => {
   const componentProps = {
     "aria-labelledby": alt ? id : undefined,
     className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "chevron-down",
     fill: "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",

package/src/components/Icon/ChevronLeftIcon.tsx

@@ -9,6 +9,7 @@ export const ChevronLeftIcon = ({ alt, className, ...props }: IconProps) => {
   const componentProps = {
     "aria-labelledby": alt ? id : undefined,
     className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "chevron-left",
     fill: "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",

package/src/components/Icon/ChevronRightIcon.tsx

@@ -9,6 +9,7 @@ export const ChevronRightIcon = ({ alt, className, ...props }: IconProps) => {
   const componentProps = {
     "aria-labelledby": alt ? id : undefined,
     className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "chevron-right",
     fill: "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",

package/src/components/Icon/ChevronUpIcon.tsx

@@ -9,6 +9,7 @@ export const ChevronUpIcon = ({ alt, className, ...props }: IconProps) => {
   const componentProps = {
     "aria-labelledby": alt ? id : undefined,
     className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "chevron-up",
     fill: "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",

package/src/components/Icon/ClockIcon.tsx

@@ -9,6 +9,7 @@ export const ClockIcon = ({ alt, className, ...props }: IconProps) => {
   const componentProps = {
     "aria-labelledby": alt ? id : undefined,
     className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "clock",
     fill: "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",

package/src/components/Icon/CloseAltIcon.tsx

@@ -9,6 +9,7 @@ export const CloseAltIcon = ({ alt, className, ...props }: IconProps) => {
   const componentProps = {
     "aria-labelledby": alt ? id : undefined,
     className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "close-alt",
     fill: "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",

package/src/components/Icon/CloseIcon.tsx

@@ -9,6 +9,7 @@ export const CloseIcon = ({ alt, className, ...props }: IconProps) => {
   const componentProps = {
     "aria-labelledby": alt ? id : undefined,
     className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "close",
     fill: "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",

package/src/components/Icon/CoopCardIcon.tsx

@@ -9,6 +9,7 @@ export const CoopCardIcon = ({ alt, className, ...props }: IconProps) => {
   const componentProps = {
     "aria-labelledby": alt ? id : undefined,
     className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "coop-card",
     fill: "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",

package/src/components/Icon/CoopIcon.tsx

@@ -9,6 +9,7 @@ export const CoopIcon = ({ alt, className, ...props }: IconProps) => {
   const componentProps = {
     "aria-labelledby": alt ? id : undefined,
     className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "coop",
     fill: "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",

package/src/components/Icon/CoopLocationIcon.tsx

@@ -9,6 +9,7 @@ export const CoopLocationIcon = ({ alt, className, ...props }: IconProps) => {
   const componentProps = {
     "aria-labelledby": alt ? id : undefined,
     className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "coop-location",
     fill: "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",

package/src/components/Icon/DownloadIcon.tsx

@@ -9,6 +9,7 @@ export const DownloadIcon = ({ alt, className, ...props }: IconProps) => {
   const componentProps = {
     "aria-labelledby": alt ? id : undefined,
     className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "download",
     fill: "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",

package/src/components/Icon/HomeIcon.tsx

@@ -9,6 +9,7 @@ export const HomeIcon = ({ alt, className, ...props }: IconProps) => {
   const componentProps = {
     "aria-labelledby": alt ? id : undefined,
     className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "home",
     fill: "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",

package/src/components/Icon/InformationIcon.tsx

@@ -9,6 +9,7 @@ export const InformationIcon = ({ alt, className, ...props }: IconProps) => {
   const componentProps = {
     "aria-labelledby": alt ? id : undefined,
     className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "information",
     fill: "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",

package/src/components/Icon/LoadingIcon.tsx

@@ -0,0 +1,27 @@
+import { type SVGProps, useId } from "react"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const LoadingIcon = ({ alt, className, ...props }: IconProps) => {
+  const id = useId()
+  const componentProps = {
+    "aria-labelledby": alt ? id : undefined,
+    className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "loading",
+    fill: "none",
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 24 24",
+    ...props,
+  }
+  return (
+    <svg {...componentProps}>
+      {alt ? <title id={id}>{alt}</title> : null}
+      <path
+        d="M10.72 19.9a8 8 0 0 1-6.5-9.79 7.77 7.77 0 0 1 6.18-5.95 8 8 0 0 1 9.49 6.52A1.54 1.54 0 0 0 21.38 12h.13a1.37 1.37 0 0 0 1.38-1.54 11 11 0 1 0-12.7 12.39A1.54 1.54 0 0 0 12 21.34a1.47 1.47 0 0 0-1.28-1.44"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}

package/src/components/Icon/LocationIcon.tsx

@@ -9,6 +9,7 @@ export const LocationIcon = ({ alt, className, ...props }: IconProps) => {
   const componentProps = {
     "aria-labelledby": alt ? id : undefined,
     className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "location",
     fill: "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",

package/src/components/Icon/MailIcon.tsx

@@ -9,6 +9,7 @@ export const MailIcon = ({ alt, className, ...props }: IconProps) => {
   const componentProps = {
     "aria-labelledby": alt ? id : undefined,
     className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "mail",
     fill: "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",

package/src/components/Icon/MenuIcon.tsx

@@ -9,6 +9,7 @@ export const MenuIcon = ({ alt, className, ...props }: IconProps) => {
   const componentProps = {
     "aria-labelledby": alt ? id : undefined,
     className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "menu",
     fill: "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",

package/src/components/Icon/MessageIcon.tsx

@@ -9,6 +9,7 @@ export const MessageIcon = ({ alt, className, ...props }: IconProps) => {
   const componentProps = {
     "aria-labelledby": alt ? id : undefined,
     className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "message",
     fill: "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",

package/src/components/Icon/MinusIcon.tsx

@@ -9,6 +9,7 @@ export const MinusIcon = ({ alt, className, ...props }: IconProps) => {
   const componentProps = {
     "aria-labelledby": alt ? id : undefined,
     className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "minus",
     fill: "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",

package/src/components/Icon/OpenNewIcon.tsx

@@ -9,6 +9,7 @@ export const OpenNewIcon = ({ alt, className, ...props }: IconProps) => {
   const componentProps = {
     "aria-labelledby": alt ? id : undefined,
     className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "open-new",
     fill: "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",

package/src/components/Icon/PencilIcon.tsx

@@ -9,6 +9,7 @@ export const PencilIcon = ({ alt, className, ...props }: IconProps) => {
   const componentProps = {
     "aria-labelledby": alt ? id : undefined,
     className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "pencil",
     fill: "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",

package/src/components/Icon/PhoneIcon.tsx

@@ -9,6 +9,7 @@ export const PhoneIcon = ({ alt, className, ...props }: IconProps) => {
   const componentProps = {
     "aria-labelledby": alt ? id : undefined,
     className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "phone",
     fill: "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",

package/src/components/Icon/QuestionIcon.tsx

@@ -9,6 +9,7 @@ export const QuestionIcon = ({ alt, className, ...props }: IconProps) => {
   const componentProps = {
     "aria-labelledby": alt ? id : undefined,
     className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "question",
     fill: "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",

package/src/components/Icon/ScooterIcon.tsx

@@ -9,6 +9,7 @@ export const ScooterIcon = ({ alt, className, ...props }: IconProps) => {
   const componentProps = {
     "aria-labelledby": alt ? id : undefined,
     className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "scooter",
     fill: "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",

package/src/components/Icon/SearchIcon.tsx

@@ -9,6 +9,7 @@ export const SearchIcon = ({ alt, className, ...props }: IconProps) => {
   const componentProps = {
     "aria-labelledby": alt ? id : undefined,
     className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "search",
     fill: "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",

package/src/components/Icon/SettingsIcon.tsx

@@ -9,6 +9,7 @@ export const SettingsIcon = ({ alt, className, ...props }: IconProps) => {
   const componentProps = {
     "aria-labelledby": alt ? id : undefined,
     className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "settings",
     fill: "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",

package/src/components/Icon/TickAltIcon.tsx

@@ -9,6 +9,7 @@ export const TickAltIcon = ({ alt, className, ...props }: IconProps) => {
   const componentProps = {
     "aria-labelledby": alt ? id : undefined,
     className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "tick-alt",
     fill: "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",

package/src/components/Icon/TickIcon.tsx

@@ -9,6 +9,7 @@ export const TickIcon = ({ alt, className, ...props }: IconProps) => {
   const componentProps = {
     "aria-labelledby": alt ? id : undefined,
     className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "tick",
     fill: "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",

package/src/components/Icon/VanIcon.tsx

@@ -9,6 +9,7 @@ export const VanIcon = ({ alt, className, ...props }: IconProps) => {
   const componentProps = {
     "aria-labelledby": alt ? id : undefined,
     className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "van",
     fill: "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",

package/src/components/Icon/WarningIcon.tsx

@@ -9,6 +9,7 @@ export const WarningIcon = ({ alt, className, ...props }: IconProps) => {
   const componentProps = {
     "aria-labelledby": alt ? id : undefined,
     className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "warning",
     fill: "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",

package/src/components/Icon/WriteIcon.tsx

@@ -9,6 +9,7 @@ export const WriteIcon = ({ alt, className, ...props }: IconProps) => {
   const componentProps = {
     "aria-labelledby": alt ? id : undefined,
     className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "write",
     fill: "none",
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",

package/src/components/Icon/index.tsx

@@ -20,6 +20,7 @@ export { CoopLocationIcon } from "./CoopLocationIcon"
 export { DownloadIcon } from "./DownloadIcon"
 export { HomeIcon } from "./HomeIcon"
 export { InformationIcon } from "./InformationIcon"
+export { LoadingIcon } from "./LoadingIcon"
 export { LocationIcon } from "./LocationIcon"
 export { MailIcon } from "./MailIcon"
 export { MenuIcon } from "./MenuIcon"

package/src/components/SearchBox/SearchBox.tsx

@@ -0,0 +1,139 @@
+import React, { HTMLAttributes, useCallback, useId, useState } from "react"
+import { type JSX } from "react"
+
+import { Button, type ButtonProps } from "../Button"
+import { SearchIcon } from "../Icon"
+
+export interface SearchBoxProps extends HTMLAttributes<HTMLInputElement> {
+  /** **(Optional)** Server endpoint to submit the form. Will be ignored if onSubmit is also set. */
+  action?: string
+  /** **(Optional)** Whether or not to enable auto complete on the input field. Default: `off`. */
+  autoComplete?: "off" | "on"
+  /** **(Optional)** Props to forward to the Button element. Use `label` to set Button text. */
+  button?: Pick<ButtonProps, "className" | "loadingText"> & { label?: React.ReactNode }
+  /** **(Optional)** Receives any className to be applied to SearchBox component. */
+  className?: string
+  /** Receives the label to be applied to SearchBox component. */
+  label: string
+  /** **(Optional)** Receives whether label is visible to human or only screen readers. */
+  labelVisible?: boolean
+  /** **(Optional)** Name of the input element, also used as the URL search parameter. Defaults to `query` */
+  name?: string
+  /** **(Optional)** Callback to run when the form is submitted. If this is an async function, it will be awaited and the SearchBox will be in a pending state until the promise is resolved. */
+  onSubmit?: React.FormEventHandler<HTMLElement> | undefined
+  /** **(Optional)** Receives any placeholder for SearchBox component. */
+  placeholder?: string
+  /** **(Optional)** Receives any size to be applied to SearchBox component. */
+  size?: string
+  /** **(Optional)** Receives the variant to be applied to SearchBox component. */
+  variant?:
+    | "green"
+    | "blue"
+    | "white"
+    | "grey"
+    | "green-ghost"
+    | "blue-ghost"
+    | "white-ghost"
+    | "grey-ghost"
+}
+
+const defaultButtonProps: SearchBoxProps["button"] = {
+  label: React.createElement(SearchIcon, { alt: "Search", stroke: "currentColor", strokeWidth: 2 }),
+  loadingText: "",
+}
+
+/**
+ * SearchBox component allows a person to enter a word or a phrase to find relevant content.
+ *
+ * The `label` prop is mandatory but not visible by default (it is visible for screen readers). You can make it visible to humans by setting `labelVisible` to true.
+ *
+ * If you are using a single icon with no text for `button.label`, ensure you pass an `alt` property to the icon for accessibility purposes.
+ *
+ * You can provide an `action` to submit input like a normal HTML form, or an `onSubmit` callback to handle submissions client-side.
+ *
+ * **Good to know:** SearchBox requires both `SearchBox` and `Button` css/scss files.
+ *
+ * ```
+ * import "@coopdigital/styles/components/Searchbox.css"
+ * import "@coopdigital/styles/components/Button.css"
+ *
+ * ```
+ */
+export const SearchBox = ({
+  action,
+  "aria-placeholder": ariaPlaceholder,
+  autoCapitalize = "off",
+  autoComplete = "off",
+  button = defaultButtonProps,
+  className,
+  label,
+  labelVisible = false,
+  name = "query",
+  onSubmit,
+  placeholder,
+  size = "md",
+  variant = "green",
+  ...props
+}: SearchBoxProps): JSX.Element => {
+  const [isPending, setIsPending] = useState(false)
+
+  const handleSubmit = useCallback(
+    async (event: React.FormEvent<HTMLFormElement>) => {
+      event.preventDefault()
+
+      if (isPending || !onSubmit) return
+
+      setIsPending(true)
+
+      try {
+        await Promise.resolve(onSubmit(event))
+      } finally {
+        setIsPending(false)
+      }
+    },
+    [onSubmit, isPending]
+  )
+
+  const id = useId()
+
+  const formProps = {
+    action: action ?? undefined,
+    className: `coop-search-box ${className ?? ""}`.trim(),
+    "data-size": size.length && size !== "md" ? size : undefined,
+    "data-variant": variant.length && variant !== "green" ? variant : undefined,
+    onSubmit: onSubmit ? handleSubmit : undefined,
+  }
+
+  const buttonProps = {
+    className: button?.className,
+    isLoading: isPending,
+    loadingText: button?.loadingText ?? "",
+    size: size as keyof ButtonProps["size"],
+    variant: variant as keyof ButtonProps["variant"],
+  }
+
+  const inputProps = {
+    "aria-placeholder": placeholder ?? ariaPlaceholder ?? undefined,
+    autoCapitalize,
+    autoComplete,
+    id,
+    name,
+    placeholder,
+    type: "search",
+    ...props,
+  }
+
+  return (
+    <form {...formProps}>
+      <label className={labelVisible ? "" : "sr-only"} htmlFor={id}>
+        {label}
+      </label>
+      <div className="coop-search-box--inner">
+        <input {...inputProps}></input>
+        <Button {...buttonProps}>{button.label}</Button>
+      </div>
+    </form>
+  )
+}
+
+export default SearchBox

package/src/components/SearchBox/index.ts

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

package/src/components/Tag/Tag.tsx

@@ -15,7 +15,6 @@ export interface TagProps extends HTMLAttributes<HTMLAnchorElement> {
   /** **(Optional)** Specifies the Tag background color from the available options. */
   tagColor?:
     | "white"
-    | "grey"
     | "purple"
     | "pink"
     | "green"
@@ -24,6 +23,8 @@ export interface TagProps extends HTMLAttributes<HTMLAnchorElement> {
     | "yellow"
     | "lilac"
     | "blue"
+    | "brown"
+    | "grey"
 }
 
 /**

package/src/index.ts

@@ -6,6 +6,7 @@ export * from "./components/Expandable"
 export * from "./components/Image"
 export * from "./components/Pill"
 export * from "./components/RootSVG"
+export * from "./components/SearchBox"
 export * from "./components/Signpost"
 export * from "./components/SkipNav"
 export * from "./components/Tag"