@coopdigital/react 0.39.0 → 0.40.0

package/dist/components/AlertBanner/AlertBanner.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 
 const AlertBanner = ({ children, className, heading, variant = "default", ...props }) => {
     const componentProps = {

package/dist/components/Author/Author.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 import { Image } from '../Image/Image.js';
 
 const Author = ({ author = "Co-op team", className, date, datePrefix = "", image = {

package/dist/components/Button/Button.js

@@ -1,7 +1,7 @@
 
 "use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 import React, { useState, useCallback } from 'react';
 import { LoadingIcon } from '../Icon/LoadingIcon.js';
 

package/dist/components/Card/Card.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 import React from 'react';
 import { bgPropToClass } from '../../utils/index.js';
 import { ChevronRightIcon } from '../Icon/ChevronRightIcon.js';

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

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

package/dist/components/Checkbox/Checkbox.js

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

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

@@ -25,6 +25,8 @@ export interface CheckboxGroupProps extends FieldsetHTMLAttributes<HTMLFieldSetE
     orientation?: "horizontal" | "vertical";
     /** **(Optional)** Specify the CheckboxGroup size. */
     size?: StandardSizes;
+    /** **(Optional)** Specify the CheckboxGroup variant. */
+    variant?: "default" | "boxed";
 }
-export declare const CheckboxGroup: ({ children, className, error, hint, label, labelVisible, orientation, size, ...props }: CheckboxGroupProps) => JSX.Element;
+export declare const CheckboxGroup: ({ children, className, error, hint, label, labelVisible, orientation, size, variant, ...props }: CheckboxGroupProps) => JSX.Element;
 export default CheckboxGroup;

package/dist/components/Checkbox/CheckboxGroup.js

@@ -1,14 +1,15 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 import { FieldError } from '../FieldError/FieldError.js';
 import { FieldHint } from '../FieldHint/FieldHint.js';
 
-const CheckboxGroup = ({ children, className, error = false, hint, label, labelVisible = true, orientation = "vertical", size = "md", ...props }) => {
+const CheckboxGroup = ({ children, className, error = false, hint, label, labelVisible = true, orientation = "vertical", size = "md", variant = "default", ...props }) => {
     const componentProps = {
         className: clsx("coop-fieldset", "coop-checkbox-group", className),
         "data-error": error ? "" : undefined,
         "data-orientation": orientation !== "vertical" ? orientation : undefined,
         "data-size": size.length && size !== "md" ? size : undefined,
+        "data-variant": variant !== "default" ? variant : undefined,
         ...props,
     };
     const legendProps = {

package/dist/components/Expandable/Expandable.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import { clsx } from 'clsx';
 import { bgPropToClass } from '../../utils/index.js';
 import 'react';
 import { ChevronDownIcon } from '../Icon/ChevronDownIcon.js';

package/dist/components/Field/Field.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 
 const Field = ({ children, className, ...props }) => {
     const componentProps = {

package/dist/components/FieldError/FieldError.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 
 const FieldError = ({ children, className, ...props }) => {
     const componentProps = {

package/dist/components/FieldHint/FieldHint.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 
 const FieldHint = ({ children, className, ...props }) => {
     const componentProps = {

package/dist/components/FieldLabel/FieldLabel.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 
 const FieldLabel = ({ children, className, htmlFor, isVisible = true, ...props }) => {
     const componentProps = {

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

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

package/dist/components/Flourish/Flourish.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 
 const Flourish = ({ children, className, fill = "light-yellow", ...props }) => {
     const componentProps = {

package/dist/components/Icon/AddIcon.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 import { useId } from 'react';
 
 const AddIcon = ({ alt, className, fill, ...props }) => {

package/dist/components/Icon/ArrowDownIcon.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 import { useId } from 'react';
 
 const ArrowDownIcon = ({ alt, className, fill, ...props }) => {

package/dist/components/Icon/ArrowLeftIcon.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 import { useId } from 'react';
 
 const ArrowLeftIcon = ({ alt, className, fill, ...props }) => {

package/dist/components/Icon/ArrowRightIcon.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 import { useId } from 'react';
 
 const ArrowRightIcon = ({ alt, className, fill, ...props }) => {

package/dist/components/Icon/ArrowUpIcon.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 import { useId } from 'react';
 
 const ArrowUpIcon = ({ alt, className, fill, ...props }) => {

package/dist/components/Icon/AvatarAltIcon.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 import { useId } from 'react';
 
 const AvatarAltIcon = ({ alt, className, fill, ...props }) => {

package/dist/components/Icon/AvatarIcon.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 import { useId } from 'react';
 
 const AvatarIcon = ({ alt, className, fill, ...props }) => {

package/dist/components/Icon/BasketIcon.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 import { useId } from 'react';
 
 const BasketIcon = ({ alt, className, fill, ...props }) => {

package/dist/components/Icon/CalendarIcon.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 import { useId } from 'react';
 
 const CalendarIcon = ({ alt, className, fill, ...props }) => {

package/dist/components/Icon/ChevronDownIcon.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 import { useId } from 'react';
 
 const ChevronDownIcon = ({ alt, className, fill, ...props }) => {

package/dist/components/Icon/ChevronLeftIcon.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 import { useId } from 'react';
 
 const ChevronLeftIcon = ({ alt, className, fill, ...props }) => {

package/dist/components/Icon/ChevronRightIcon.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 import { useId } from 'react';
 
 const ChevronRightIcon = ({ alt, className, fill, ...props }) => {

package/dist/components/Icon/ChevronUpIcon.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 import { useId } from 'react';
 
 const ChevronUpIcon = ({ alt, className, fill, ...props }) => {

package/dist/components/Icon/ClockIcon.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 import { useId } from 'react';
 
 const ClockIcon = ({ alt, className, fill, ...props }) => {

package/dist/components/Icon/CloseAltIcon.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 import { useId } from 'react';
 
 const CloseAltIcon = ({ alt, className, fill, ...props }) => {

package/dist/components/Icon/CloseIcon.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 import { useId } from 'react';
 
 const CloseIcon = ({ alt, className, fill, ...props }) => {

package/dist/components/Icon/CoopCardIcon.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 import { useId } from 'react';
 
 const CoopCardIcon = ({ alt, className, fill, ...props }) => {

package/dist/components/Icon/CoopIcon.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 import { useId } from 'react';
 
 const CoopIcon = ({ alt, className, fill, ...props }) => {

package/dist/components/Icon/CoopLocationIcon.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 import { useId } from 'react';
 
 const CoopLocationIcon = ({ alt, className, fill, ...props }) => {

package/dist/components/Icon/DownloadIcon.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 import { useId } from 'react';
 
 const DownloadIcon = ({ alt, className, fill, ...props }) => {

package/dist/components/Icon/HomeIcon.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 import { useId } from 'react';
 
 const HomeIcon = ({ alt, className, fill, ...props }) => {

package/dist/components/Icon/InformationIcon.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 import { useId } from 'react';
 
 const InformationIcon = ({ alt, className, fill, ...props }) => {

package/dist/components/Icon/LoadingIcon.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 import { useId } from 'react';
 
 const LoadingIcon = ({ alt, className, fill, ...props }) => {

package/dist/components/Icon/LocationIcon.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 import { useId } from 'react';
 
 const LocationIcon = ({ alt, className, fill, ...props }) => {

package/dist/components/Icon/MailIcon.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 import { useId } from 'react';
 
 const MailIcon = ({ alt, className, fill, ...props }) => {

package/dist/components/Icon/MenuIcon.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 import { useId } from 'react';
 
 const MenuIcon = ({ alt, className, fill, ...props }) => {

package/dist/components/Icon/MessageIcon.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 import { useId } from 'react';
 
 const MessageIcon = ({ alt, className, fill, ...props }) => {

package/dist/components/Icon/MinusIcon.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 import { useId } from 'react';
 
 const MinusIcon = ({ alt, className, fill, ...props }) => {

package/dist/components/Icon/OpenNewIcon.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 import { useId } from 'react';
 
 const OpenNewIcon = ({ alt, className, fill, ...props }) => {

package/dist/components/Icon/PencilIcon.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 import { useId } from 'react';
 
 const PencilIcon = ({ alt, className, fill, ...props }) => {

package/dist/components/Icon/PhoneIcon.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 import { useId } from 'react';
 
 const PhoneIcon = ({ alt, className, fill, ...props }) => {

package/dist/components/Icon/QuestionIcon.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 import { useId } from 'react';
 
 const QuestionIcon = ({ alt, className, fill, ...props }) => {

package/dist/components/Icon/ScooterIcon.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 import { useId } from 'react';
 
 const ScooterIcon = ({ alt, className, fill, ...props }) => {

package/dist/components/Icon/SearchIcon.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 import { useId } from 'react';
 
 const SearchIcon = ({ alt, className, fill, ...props }) => {

package/dist/components/Icon/SettingsIcon.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 import { useId } from 'react';
 
 const SettingsIcon = ({ alt, className, fill, ...props }) => {

package/dist/components/Icon/TickAltIcon.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 import { useId } from 'react';
 
 const TickAltIcon = ({ alt, className, fill, ...props }) => {

package/dist/components/Icon/TickIcon.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 import { useId } from 'react';
 
 const TickIcon = ({ alt, className, fill, ...props }) => {

package/dist/components/Icon/VanIcon.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 import { useId } from 'react';
 
 const VanIcon = ({ alt, className, fill, ...props }) => {

package/dist/components/Icon/WarningIcon.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 import { useId } from 'react';
 
 const WarningIcon = ({ alt, className, fill, ...props }) => {

package/dist/components/Icon/WriteIcon.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 import { useId } from 'react';
 
 const WriteIcon = ({ alt, className, fill, ...props }) => {

package/dist/components/Pill/Pill.js

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 import React from 'react';
 import { bgPropToClass } from '../../utils/index.js';
 

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

@@ -32,8 +32,6 @@ export interface RadioButtonProps extends Omit<InputHTMLAttributes<HTMLInputElem
     tag?: string;
     /** **(Optional)** Specify the RadioButton tag background color. */
     tagBackground?: TagProps["background"];
-    /** **(Optional)** Specify the RadioButton variant. */
-    variant?: "default" | "boxed";
 }
-export declare const RadioButton: ({ className, disabled, error, hint, id, label, labelVisible, name, size, tag, tagBackground, variant, ...props }: RadioButtonProps) => JSX.Element;
+export declare const RadioButton: ({ className, disabled, error, hint, id, label, labelVisible, name, size, tag, tagBackground, ...props }: RadioButtonProps) => JSX.Element;
 export default RadioButton;

package/dist/components/RadioButton/RadioButton.js

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

package/dist/components/RadioButton/RadioButtonGroup.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 import { FieldError } from '../FieldError/FieldError.js';
 import { FieldHint } from '../FieldHint/FieldHint.js';
 

package/dist/components/SearchBox/SearchBox.js

@@ -1,7 +1,7 @@
 
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 import React, { useState, useId, useCallback } from 'react';
 import { Button } from '../Button/Button.js';
 import { FieldLabel } from '../FieldLabel/FieldLabel.js';

package/dist/components/Signpost/Signpost.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 import React from 'react';
 import { ChevronRightIcon } from '../Icon/ChevronRightIcon.js';
 import { Image } from '../Image/Image.js';

package/dist/components/SkipNav/SkipNav.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 
 const defaultLinks = [{ href: "#main", label: "Skip to main content" }];
 const SkipNav = ({ className, isVisible = false, links = defaultLinks, ...props }) => {

package/dist/components/Squircle/Squircle.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 import { bgPropToClass } from '../../utils/index.js';
 
 const Squircle = ({ background = "offer-red", children, className, size = "lg", ...props }) => {

package/dist/components/Tag/Tag.js

@@ -1,4 +1,4 @@
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 import React from 'react';
 import { bgPropToClass } from '../../utils/index.js';
 

package/dist/components/TextInput/TextInput.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 import { useId } from 'react';
 import { FieldError } from '../FieldError/FieldError.js';
 import { FieldHint } from '../FieldHint/FieldHint.js';

package/dist/components/Textarea/Textarea.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import clsx from 'clsx';
 import { useId, useState } from 'react';
 import { useDebounce } from '../../hooks/useDebounce.js';
 import { FieldError } from '../FieldError/FieldError.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "0.39.0",
+  "version": "0.40.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -65,14 +65,12 @@
     "@testing-library/react": "^16.3.0",
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.1",
-    "clsx": "^2.1.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "serve": "^14.2.5",
     "storybook": "^9.1.10"
   },
   "peerDependencies": {
-    "clsx": "^2.1.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0"
   },
@@ -80,7 +78,8 @@
     "storybook": "$storybook"
   },
   "dependencies": {
-    "@coopdigital/styles": "^0.34.0"
+    "@coopdigital/styles": "^0.35.0",
+    "clsx": "^2.1.1"
   },
-  "gitHead": "4cfcb7cf937b00fcc45f830b41c01bf705cdd1fd"
+  "gitHead": "86e50cd4304b4cc5e0f308a825727ff5659c7da9"
 }

package/src/components/Checkbox/Checkbox.tsx

@@ -7,6 +7,7 @@ import { FormFieldError, StandardSizes } from "../../../src/types"
 import { FieldError } from "../FieldError"
 import { FieldHint } from "../FieldHint"
 import { FieldLabel } from "../FieldLabel"
+import Tag, { TagProps } from "../Tag"
 
 export interface CheckboxProps
   extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
@@ -36,6 +37,12 @@ export interface CheckboxProps
   name: string
   /** **(Optional)** Specify the Checkbox size. */
   size?: StandardSizes
+  /** **(Optional)** Specify the Checkbox tag text. */
+  tag?: string
+  /** **(Optional)** Specify the Checkbox tag background color. */
+  tagBackground?: TagProps["background"]
+  /** **(Optional)** Specify the Checkbox variant. */
+  variant?: "default" | "boxed"
 }
 
 export const Checkbox = ({
@@ -48,6 +55,9 @@ export const Checkbox = ({
   labelVisible = true,
   name,
   size = "md",
+  tag,
+  tagBackground,
+  variant = "default",
   ...props
 }: CheckboxProps): JSX.Element => {
   const internalId = useId()
@@ -58,6 +68,7 @@ export const Checkbox = ({
     className: clsx("coop-checkbox", className),
     "data-error": error ? "" : undefined,
     "data-size": size.length && size !== "md" ? size : undefined,
+    "data-variant": variant !== "default" ? variant : undefined,
     disabled,
     id,
     name,
@@ -68,13 +79,20 @@ export const Checkbox = ({
   return (
     <div className="coop-form-item" {...formItemProps}>
       <div className="coop-checkbox-wrapper">
-        <input {...componentProps} />
+        <div className="coop-checkbox-input-wrapper">
+          <input {...componentProps} />
 
-        {label && (
-          <FieldLabel htmlFor={id} isVisible={labelVisible}>
-            {label}
-          </FieldLabel>
-        )}
+          {label && (
+            <FieldLabel htmlFor={id} isVisible={labelVisible}>
+              <span>{label}</span>{" "}
+              {tag && (
+                <Tag background={tagBackground} size="sm">
+                  {tag}
+                </Tag>
+              )}
+            </FieldLabel>
+          )}
+        </div>
         {hint && <FieldHint>{hint}</FieldHint>}
       </div>
       {typeof error === "object" && error?.message && <FieldError>{error.message}</FieldError>}

package/src/components/Checkbox/CheckboxGroup.tsx

@@ -31,6 +31,8 @@ export interface CheckboxGroupProps extends FieldsetHTMLAttributes<HTMLFieldSetE
   orientation?: "horizontal" | "vertical"
   /** **(Optional)** Specify the CheckboxGroup size. */
   size?: StandardSizes
+  /** **(Optional)** Specify the CheckboxGroup variant. */
+  variant?: "default" | "boxed"
 }
 
 export const CheckboxGroup = ({
@@ -42,6 +44,7 @@ export const CheckboxGroup = ({
   labelVisible = true,
   orientation = "vertical",
   size = "md",
+  variant = "default",
   ...props
 }: CheckboxGroupProps): JSX.Element => {
   const componentProps = {
@@ -49,6 +52,7 @@ export const CheckboxGroup = ({
     "data-error": error ? "" : undefined,
     "data-orientation": orientation !== "vertical" ? orientation : undefined,
     "data-size": size.length && size !== "md" ? size : undefined,
+    "data-variant": variant !== "default" ? variant : undefined,
     ...props,
   }
 

package/src/components/Flourish/Flourish.tsx

@@ -2,7 +2,7 @@ import type { JSX, ReactNode, SVGProps } from "react"
 
 import clsx from "clsx"
 
-import { Darks, Lights } from "../../types/colors"
+import { BrandBlue, Darks, Lights, OfferRed } from "../../types/colors"
 
 export interface FlourishProps extends SVGProps<SVGSVGElement> {
   /** Specify the text to be highlighted by the Flourish. */
@@ -10,7 +10,7 @@ export interface FlourishProps extends SVGProps<SVGSVGElement> {
   /** **(Optional)** Specify additional CSS classes to be applied to the component. */
   className?: string
   /** **(Optional)** Specify the Flourish color. */
-  fill?: Darks | Lights
+  fill?: Darks | Lights | OfferRed | BrandBlue
 }
 
 export const Flourish = ({

package/src/components/RadioButton/RadioButton.tsx

@@ -39,8 +39,6 @@ export interface RadioButtonProps
   tag?: string
   /** **(Optional)** Specify the RadioButton tag background color. */
   tagBackground?: TagProps["background"]
-  /** **(Optional)** Specify the RadioButton variant. */
-  variant?: "default" | "boxed"
 }
 
 export const RadioButton = ({
@@ -55,7 +53,6 @@ export const RadioButton = ({
   size = "md",
   tag,
   tagBackground,
-  variant = "default",
   ...props
 }: RadioButtonProps): JSX.Element => {
   const internalId = useId()
@@ -66,7 +63,6 @@ export const RadioButton = ({
     className: clsx("coop-radio-button", className),
     "data-error": error ? "" : undefined,
     "data-size": size.length && size !== "md" ? size : undefined,
-    "data-variant": variant !== "default" ? variant : undefined,
     disabled,
     id,
     name,
@@ -77,18 +73,20 @@ export const RadioButton = ({
   return (
     <div className="coop-form-item" {...formItemProps}>
       <div className="coop-radio-button-wrapper">
-        <input {...componentProps} />
+        <div className="coop-radio-button-input-wrapper">
+          <input {...componentProps} />
 
-        {label && (
-          <FieldLabel htmlFor={id} isVisible={labelVisible}>
-            <span>{label}</span>{" "}
-            {tag && (
-              <Tag background={tagBackground} size="sm">
-                {tag}
-              </Tag>
-            )}
-          </FieldLabel>
-        )}
+          {label && (
+            <FieldLabel htmlFor={id} isVisible={labelVisible}>
+              <span>{label}</span>{" "}
+              {tag && (
+                <Tag background={tagBackground} size="sm">
+                  {tag}
+                </Tag>
+              )}
+            </FieldLabel>
+          )}
+        </div>
         {hint && <FieldHint>{hint}</FieldHint>}
       </div>
       {typeof error === "object" && error?.message && <FieldError>{error.message}</FieldError>}

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

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