@coopdigital/react 0.17.0 → 0.18.1

package/README.md

@@ -33,8 +33,8 @@ npm install @coopdigital/react @coopdigital/styles
 Import the components that you need, along with the main stylesheet and the corresponding component styles:
 ```
 import { Pill } from "@coopdigital/react"
-import "@coopdigital/styles/dist/main.css"
-import "@coopdigital/styles/dist/components/Pill.css"
+import "@coopdigital/styles/main.css"
+import "@coopdigital/styles/components/Pill.css"
 ```
 
 Alternatively if your project uses SASS you can import the source stylesheets:

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?: "grey" | "purple" | "pink" | "green" | "orange" | "red" | "yellow" | "lilac" | "blue" | "white" | "transparent";
     /** 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/AddIcon.d.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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/SettingsIcon.d.ts

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

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

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

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

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

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

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

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

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

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

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

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?: "primary" | "secondary" | "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 = "primary" } = _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 !== "primary" ? 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/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.17.0",
+  "version": "0.18.1",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -34,6 +34,7 @@
     "test:e2e:ui": "npx playwright test --ui",
     "test:e2e:ci": "npx playwright test --shard=$CI_NODE_INDEX/$CI_NODE_TOTAL",
     "build": "tsx scripts build",
+    "build:icons": "tsx scripts build-icons",
     "build:storybook": "storybook build --disable-telemetry && npm run storybook:fix-paths",
     "storybook": "storybook dev -p 6006",
     "storybook:playwright": "storybook dev -p 9000",
@@ -44,8 +45,8 @@
   "description": "",
   "devDependencies": {
     "@axe-core/playwright": "^4.10.1",
-    "@coopdigital/styles": "^0.15.1",
-    "@playwright/test": "^1.51.1",
+    "@coopdigital/styles": "^0.15.3",
+    "@playwright/test": "^1.52.0",
     "@storybook/addon-a11y": "^8.6.12",
     "@storybook/addon-essentials": "^8.6.12",
     "@storybook/addon-interactions": "^8.6.12",
@@ -57,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": "4a24650f72c010d21c1fccac53e6de59ec7c3e6e"
+  "gitHead": "3bad30dd8fdb2c160a2f71e0c95c1da38d12b0ab"
 }