@coopdigital/react 0.44.0 → 0.46.0

package/dist/components/{SearchBox/SearchBox.js → Searchbox/Searchbox.js}

@@ -4,7 +4,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import React, { useState, useId, useCallback } from 'react';
 import { Button } from '../Button/Button.js';
-import { FieldLabel } from '../FieldLabel/FieldLabel.js';
+import { Label } from '../FieldMarkers/Label.js';
 import { SearchIcon } from '../Icon/SearchIcon.js';
 import { TextInput } from '../TextInput/TextInput.js';
 
@@ -12,7 +12,7 @@ const defaultButtonProps = {
     label: React.createElement(SearchIcon, { alt: "Search", stroke: "currentColor", strokeWidth: 2 }),
     loadingText: "",
 };
-const SearchBox = ({ action, "aria-placeholder": ariaPlaceholder, autoCapitalize = "off", autoComplete = "off", button = defaultButtonProps, className, id, label, labelVisible = false, name = "query", onSubmit, placeholder, size = "md", variant = "green", ...props }) => {
+const Searchbox = ({ action, "aria-placeholder": ariaPlaceholder, autoCapitalize = "off", autoComplete = "off", button = defaultButtonProps, className, id, label, labelVisible = false, name = "query", onSubmit, placeholder, size = "md", variant = "green", ...props }) => {
     var _a, _b;
     const [isPending, setIsPending] = useState(false);
     const internalId = useId();
@@ -31,8 +31,8 @@ const SearchBox = ({ action, "aria-placeholder": ariaPlaceholder, autoCapitalize
     }, [onSubmit, isPending]);
     const formProps = {
         action: action !== null && action !== void 0 ? action : undefined,
-        className: clsx("coop-search-box", className),
-        //"data-size": size && size !== "md" ? size : undefined,
+        className: clsx("coop-searchbox", className),
+        "data-size": size && size !== "md" ? size : undefined,
         "data-variant": variant.length && variant !== "green" ? variant : undefined,
         onSubmit: onSubmit ? handleSubmit : undefined,
     };
@@ -54,7 +54,7 @@ const SearchBox = ({ action, "aria-placeholder": ariaPlaceholder, autoCapitalize
         type: "search",
         ...props,
     };
-    return (jsxs("form", { ...formProps, children: [label && (jsx(FieldLabel, { htmlFor: id, isVisible: labelVisible, children: label })), jsxs("div", { className: "coop-search-box--inner", children: [jsx(TextInput, { ...inputProps }), jsx(Button, { ...buttonProps, children: button.label })] })] }));
+    return (jsxs("form", { ...formProps, children: [label && (jsx(Label, { htmlFor: id, isVisible: labelVisible, children: label })), jsxs("div", { className: "coop-searchbox--inner", children: [jsx(TextInput, { ...inputProps }), jsx(Button, { ...buttonProps, children: button.label })] })] }));
 };
 
-export { SearchBox, SearchBox as default };
+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/TextInput/TextInput.d.ts

@@ -1,28 +1,14 @@
 import type { InputHTMLAttributes, JSX } from "react";
-import { FormFieldError, StandardSizes } from "../../../src/types";
+import { StandardSizes } from "../../../src/types";
 export interface TextInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "prefix" | "size" | "type"> {
     /** **(Optional)** Specify additional CSS classes to be applied to the component. */
     className?: string;
     /** **(Optional)** Specify whether the TextInput should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility. */
     disabled?: boolean;
-    /** **(Optional)** Specify the TextInput error state.
-     *
-     * This is an instance of `FormFieldError`. You can provide either an object with a `message` key, or a boolean value if you need to render the message independently.
-     */
-    error?: FormFieldError;
-    /** **(Optional)** Specify the TextInput hint.
-     *
-     * This text is rendered under the label to provide further guidance for users.
-     */
-    hint?: string;
+    /** **(Optional)** Specify the TextInput error state. */
+    error?: boolean;
     /** **(Optional)** Specify the TextInput id. Will be auto-generated if not set. */
     id?: string;
-    /** **(Optional)** Specify the TextInput label.
-     *
-     * This property is optional in case you need to render your own label, but all form elements *must* provide a label. */
-    label?: string;
-    /** **(Optional)** Specify whether the label should be visible to humans or screen readers. */
-    labelVisible?: boolean;
     /** Specify the TextInput name. */
     name: string;
     /** **(Optional)** Specify the TextInput placeholder text. Do not use in place of a form label. */
@@ -34,7 +20,7 @@ export interface TextInputProps extends Omit<InputHTMLAttributes<HTMLInputElemen
     /** **(Optional)** Specify the suffix. It can be any valid JSX or string. */
     suffix?: React.ReactNode;
     /** **(Optional)** Specify the TextInput type. */
-    type?: "text" | "email" | "number" | "password" | "search" | "tel" | "url";
+    type?: "text" | "email" | "number" | "password" | "search" | "tel" | "url" | "date" | "datetime-local" | "week" | "month" | "time";
 }
-export declare const TextInput: ({ "aria-placeholder": ariaPlaceholder, className, disabled, error, hint, id, label, labelVisible, name, placeholder, prefix, size, suffix, type, ...props }: TextInputProps) => JSX.Element;
+export declare const TextInput: ({ "aria-placeholder": ariaPlaceholder, className, disabled, error, id, name, placeholder, prefix, size, suffix, type, ...props }: TextInputProps) => JSX.Element;
 export default TextInput;

package/dist/components/TextInput/TextInput.js

@@ -1,28 +1,24 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 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 { useId } from '../../hooks/useId.js';
 
-const TextInput = ({ "aria-placeholder": ariaPlaceholder, className, disabled, error = false, hint, id, label, labelVisible = true, name, placeholder, prefix, size = "md", suffix, type = "text", ...props }) => {
+const TextInput = ({ "aria-placeholder": ariaPlaceholder, className, disabled, error = false, id, name, placeholder, prefix, size = "md", suffix, type = "text", ...props }) => {
     var _a;
-    const internalId = useId();
-    id = id !== null && id !== void 0 ? id : internalId;
+    const uid = useId(id);
     const componentProps = {
         "aria-placeholder": (_a = placeholder !== null && placeholder !== void 0 ? placeholder : ariaPlaceholder) !== null && _a !== void 0 ? _a : undefined,
         className: clsx("coop-text-input", className),
-        "data-error": error ? "" : undefined,
+        "data-error": error || undefined,
         "data-size": size.length && size !== "md" ? size : undefined,
         disabled,
-        id,
+        id: uid,
         name,
         placeholder,
         type,
         ...props,
     };
-    const formItemProps = { "aria-disabled": disabled ? true : undefined };
-    return (jsxs("div", { className: "coop-form-item", ...formItemProps, children: [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 }), jsxs("div", { className: "coop-text-input-wrapper", children: [prefix && jsx("span", { className: "coop-text-input--prefix", children: prefix }), jsx("input", { ...componentProps }), suffix && jsx("span", { className: "coop-text-input--suffix", children: suffix })] })] }));
+    //const formItemProps = { "aria-disabled": disabled ? true : undefined }
+    return (jsxs("div", { className: "coop-text-input-wrapper", children: [prefix && jsx("span", { className: "coop-text-input--prefix", children: prefix }), jsx("input", { ...componentProps }), suffix && jsx("span", { className: "coop-text-input--suffix", children: suffix })] }));
 };
 
 export { TextInput, TextInput as default };

package/dist/components/Textarea/Textarea.d.ts

@@ -1,5 +1,5 @@
 import type { JSX, TextareaHTMLAttributes } from "react";
-import { FormFieldError, StandardSizes } from "../../types";
+import { StandardSizes } from "../../types";
 export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
     /** **(Optional)** Specify additional CSS classes to be applied to the component. */
     className?: string;
@@ -16,24 +16,10 @@ export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElemen
     cutoff?: boolean;
     /** **(Optional)** Specify whether the Textarea should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility.  */
     disabled?: boolean;
-    /** **(Optional)** Specify the Textarea error state.
-     *
-     * This is an instance of `FormFieldError`. You can provide either an object with a `message` key, or a boolean value if you need to render the message independently.
-     */
-    error?: FormFieldError;
-    /** **(Optional)** Specify the Textarea hint.
-     *
-     * This text is rendered under the label to provide further guidance for users.
-     */
-    hint?: string;
+    /** **(Optional)** Specify the Textarea error state */
+    error?: boolean;
     /** **(Optional)** Specify the Textarea id. Will be auto-generated if not set. */
     id?: string;
-    /** **(Optional)** Specify the Textarea label.
-     *
-     * This property is optional in case you need to render your own label, but all form elements *must* provide a label. */
-    label?: string;
-    /** **(Optional)** Specify whether the label should be visible to humans or screen readers. */
-    labelVisible?: boolean;
     /** **(Optional)** Specify the Textarea maxLength. This is the maximum number of characters users can enter. */
     maxLength?: number;
     /** Specify the Textarea name. */
@@ -45,5 +31,5 @@ export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElemen
     /** **(Optional)** Specify the Textarea size. */
     size?: StandardSizes;
 }
-export declare const Textarea: ({ "aria-placeholder": ariaPlaceholder, className, cols, counter, cutoff, disabled, error, hint, id, label, labelVisible, maxLength, name, onChange: userOnChange, placeholder, rows, size, ...props }: TextareaProps) => JSX.Element;
+export declare const Textarea: ({ "aria-placeholder": ariaPlaceholder, className, cols, counter, cutoff, disabled, error, id, maxLength, name, onChange: userOnChange, placeholder, rows, size, ...props }: TextareaProps) => JSX.Element;
 export default Textarea;

package/dist/components/Textarea/Textarea.js

@@ -1,16 +1,14 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { useId, useState } from 'react';
+import { useState } from 'react';
 import { useDebounce } from '../../hooks/useDebounce.js';
-import { FieldError } from '../FieldError/FieldError.js';
-import { FieldHint } from '../FieldHint/FieldHint.js';
-import { FieldLabel } from '../FieldLabel/FieldLabel.js';
+import { useId } from '../../hooks/useId.js';
 
 const DEBOUNCE_DELAY = 750;
 const charCountMessage = (remaining) => {
     return `You have ${Math.abs(remaining).toLocaleString()} ${Math.abs(remaining) === 1 ? "character" : "characters"} ${remaining < 0 ? "too many" : "remaining"}`;
 };
-const Textarea = ({ "aria-placeholder": ariaPlaceholder, className, cols = 30, counter = false, cutoff = false, disabled = false, error = false, hint, id, label, labelVisible = true, maxLength, name, onChange: userOnChange = undefined, placeholder, rows = 4, size = "md", ...props }) => {
+const Textarea = ({ "aria-placeholder": ariaPlaceholder, className, cols = 30, counter = false, cutoff = false, disabled = false, error = false, id, maxLength, name, onChange: userOnChange = undefined, placeholder, rows = 4, size = "md", ...props }) => {
     var _a;
     const internalId = useId();
     id = id !== null && id !== void 0 ? id : internalId;
@@ -18,7 +16,7 @@ const Textarea = ({ "aria-placeholder": ariaPlaceholder, className, cols = 30, c
         "aria-placeholder": (_a = placeholder !== null && placeholder !== void 0 ? placeholder : ariaPlaceholder) !== null && _a !== void 0 ? _a : undefined,
         className: clsx("coop-textarea", className),
         cols,
-        "data-error": error ? "" : undefined,
+        "data-error": error !== null && error !== void 0 ? error : undefined,
         "data-size": size.length && size !== "md" ? size : undefined,
         disabled,
         id,
@@ -30,14 +28,15 @@ const Textarea = ({ "aria-placeholder": ariaPlaceholder, className, cols = 30, c
     };
     const [remaining, setRemaining] = useState(maxLength);
     const debouncedRemaining = useDebounce(remaining, DEBOUNCE_DELAY);
+    const showCounter = !disabled && counter && maxLength && remaining != null && debouncedRemaining != null;
     const handleChange = (e) => {
         maxLength && e.target && setRemaining(maxLength - e.target.value.length);
     };
-    const formItemProps = { "aria-disabled": disabled ? true : undefined };
-    return (jsxs("div", { className: "coop-form-item", ...formItemProps, children: [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 }), jsx("textarea", { ...componentProps, onChange: (e) => {
+    // const formItemProps = { "aria-disabled": disabled ? true : undefined }
+    return (jsxs("div", { className: "coop-textarea-wrapper", children: [jsx("textarea", { ...componentProps, onChange: (e) => {
                     userOnChange === null || userOnChange === void 0 ? void 0 : userOnChange(e);
                     handleChange(e);
-                } }), !disabled && counter && maxLength && remaining != null && debouncedRemaining != null && (jsxs(Fragment, { children: [jsx("small", { "aria-hidden": "true", className: "coop-textarea-counter", ...(remaining < 0 && { "data-error": "" }), children: charCountMessage(remaining) }), jsx("span", { "aria-live": "polite", className: "sr-only", children: charCountMessage(debouncedRemaining) })] }))] }));
+                } }), showCounter && (jsxs(Fragment, { children: [jsx("small", { "aria-hidden": "true", className: "coop-textarea-counter", ...(remaining < 0 && { "data-error": true }), children: charCountMessage(remaining) }), jsx("span", { "aria-live": "polite", className: "sr-only", children: charCountMessage(debouncedRemaining) })] }))] }));
 };
 
 export { Textarea, Textarea as default };

package/dist/hooks/useId.d.ts

@@ -0,0 +1,2 @@
+export type UseId = (id?: string) => string;
+export declare const useId: UseId;

package/dist/hooks/useId.js

@@ -0,0 +1,8 @@
+import { useId as useId$1 } from 'react';
+
+const useId = (id) => {
+    const uniqueId = useId$1();
+    return id !== null && id !== void 0 ? id : uniqueId;
+};
+
+export { useId };

package/dist/{utils/slots.d.ts → hooks/useSlots.d.ts}

@@ -2,5 +2,7 @@ import React from "react";
 type Slots<T> = Record<keyof T, React.ReactNode>;
 export declare function isKey<T extends object>(x: T, k: PropertyKey): k is keyof T;
 export declare function getSlotName(node: React.ReactNode): string | false;
-export declare function getSlots<T>(componentSlots: Slots<T>, children: React.ReactNode): Slots<T>;
+export declare function useSlots<T>(componentSlots: Slots<T>, children: React.ReactNode, options?: {
+    collect?: string[];
+}): Slots<T>;
 export {};

package/dist/{utils/slots.js → hooks/useSlots.js}

@@ -8,11 +8,17 @@ function getSlotName(node) {
         ? node.type.name
         : false;
 }
-function getSlots(componentSlots, children) {
+function useSlots(componentSlots, children, options) {
     return React.Children.toArray(children).reduce((slots, child) => {
+        var _a;
         const slotName = getSlotName(child);
         if (child && slotName && isKey(componentSlots, slotName)) {
-            slots[slotName] = child;
+            if ((_a = void 0 ) === null || _a === void 0 ? void 0 : _a.includes(slotName)) {
+                slots[slotName] = slots[slotName] ? [...[slots[slotName]].flat(), child] : [child];
+            }
+            else {
+                slots[slotName] = child;
+            }
         }
         else if ("Children" in slots) {
             slots.Children = slots.Children ? [...[slots.Children].flat(), child] : [child];
@@ -21,4 +27,4 @@ function getSlots(componentSlots, children) {
     }, { ...componentSlots });
 }
 
-export { getSlotName, getSlots, isKey };
+export { getSlotName, isKey, useSlots };

package/dist/index.d.ts

@@ -5,15 +5,13 @@ export * from "./components/Card";
 export * from "./components/Checkbox";
 export * from "./components/Expandable";
 export * from "./components/Field";
-export * from "./components/FieldError";
-export * from "./components/FieldHint";
-export * from "./components/FieldLabel";
+export * from "./components/Fieldset";
 export * from "./components/Flourish";
 export * from "./components/Image";
 export * from "./components/Pill";
-export * from "./components/RadioButton";
+export * from "./components/Radio";
 export * from "./components/RootSVG";
-export * from "./components/SearchBox";
+export * from "./components/Searchbox";
 export * from "./components/Signpost";
 export * from "./components/SkipNav";
 export * from "./components/Squircle";

package/dist/index.js

@@ -3,19 +3,15 @@ export { Author } from './components/Author/Author.js';
 export { Button } from './components/Button/Button.js';
 export { Card } from './components/Card/Card.js';
 export { Checkbox } from './components/Checkbox/Checkbox.js';
-export { CheckboxGroup } from './components/Checkbox/CheckboxGroup.js';
 export { Expandable } from './components/Expandable/Expandable.js';
-export { Field } from './components/Field/Field.js';
-export { FieldError } from './components/FieldError/FieldError.js';
-export { FieldHint } from './components/FieldHint/FieldHint.js';
-export { FieldLabel } from './components/FieldLabel/FieldLabel.js';
+export { Field, FieldControl } from './components/Field/Field.js';
+export { Fieldset, FieldsetFields } from './components/Fieldset/Fieldset.js';
 export { Flourish } from './components/Flourish/Flourish.js';
 export { Image } from './components/Image/Image.js';
 export { Pill } from './components/Pill/Pill.js';
-export { RadioButton } from './components/RadioButton/RadioButton.js';
-export { RadioButtonGroup } from './components/RadioButton/RadioButtonGroup.js';
+export { Radio } from './components/Radio/Radio.js';
 export { RootSVG } from './components/RootSVG/RootSVG.js';
-export { SearchBox } from './components/SearchBox/SearchBox.js';
+export { Searchbox } from './components/Searchbox/Searchbox.js';
 export { Signpost } from './components/Signpost/Signpost.js';
 export { SkipNav } from './components/SkipNav/SkipNav.js';
 export { Squircle } from './components/Squircle/Squircle.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "0.44.0",
+  "version": "0.46.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -57,18 +57,18 @@
   "devDependencies": {
     "@axe-core/playwright": "^4.11.0",
     "@playwright/test": "^1.56.1",
-    "@storybook/addon-a11y": "^10.0.5",
-    "@storybook/addon-docs": "^10.0.5",
-    "@storybook/addon-onboarding": "^10.0.5",
-    "@storybook/react-vite": "^10.0.5",
+    "@storybook/addon-a11y": "^10.0.7",
+    "@storybook/addon-docs": "^10.0.7",
+    "@storybook/addon-onboarding": "^10.0.7",
+    "@storybook/react-vite": "^10.0.7",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
-    "@types/react": "^19.2.2",
-    "@types/react-dom": "^19.2.2",
+    "@types/react": "^19.2.4",
+    "@types/react-dom": "^19.2.3",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "serve": "^14.2.5",
-    "storybook": "^10.0.5"
+    "storybook": "^10.0.7"
   },
   "peerDependencies": {
     "react": "^19.1.0",
@@ -78,8 +78,8 @@
     "storybook": "$storybook"
   },
   "dependencies": {
-    "@coopdigital/styles": "^0.38.0",
+    "@coopdigital/styles": "^0.40.0",
     "clsx": "^2.1.1"
   },
-  "gitHead": "076bf8aa7441434b71bfc244c699b79397a8b0fd"
+  "gitHead": "9020e79195ead8270e9a2c39209142a02160bae5"
 }

package/src/components/Button/Button.tsx

@@ -1,11 +1,6 @@
 "use client"
 
-import type {
-  AnchorHTMLAttributes,
-  ButtonHTMLAttributes,
-  ForwardRefExoticComponent,
-  JSX,
-} from "react"
+import type { ButtonHTMLAttributes, ForwardRefExoticComponent, JSX, Ref } from "react"
 
 import clsx from "clsx"
 import React, { useCallback, useState } from "react"
@@ -15,7 +10,7 @@ import { LoadingIcon } from "../Icon"
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   /** **(Optional)** Specify a custom element to override default `a` or `button`. */
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string
+  as?: React.FC<any> | ForwardRefExoticComponent<any> | string
   /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
   children?: React.ReactNode
   /** **(Optional)** Specify additional CSS classes to be applied to the component. */
@@ -31,7 +26,9 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   /** **(Optional)** Specify text to show when the Button is in a loading state. */
   loadingText?: string
   /** **(Optional)** Callback to run when the button is pressed. If this is an async function, it will be awaited and the button will be in a pending state until the promise is resolved. */
-  onClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void
+  onClick?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLButtonElement | HTMLAnchorElement>
   /** **(Optional)** Specify the Button size. */
   size?: "sm" | "md" | "lg"
   /** **(Optional)** Specify the Button variant. */
@@ -61,14 +58,12 @@ export const Button = ({
   isLoading = false,
   loadingText = "Loading",
   onClick,
+  ref,
   size = "md",
   variant = "green",
   ...props
 }: ButtonProps): JSX.Element => {
-  let element: ButtonProps["as"] = href ? "a" : "button"
-  if (as) {
-    element = as
-  }
+  const element: ButtonProps["as"] = as ?? (href ? "a" : "button")
 
   const [isPending, setIsPending] = useState(false)
 
@@ -79,7 +74,7 @@ export const Button = ({
       setIsPending(true)
 
       try {
-        await Promise.resolve(onClick(event as React.MouseEvent<HTMLButtonElement>))
+        await Promise.resolve(onClick(event))
       } finally {
         setIsPending(false)
       }
@@ -96,7 +91,8 @@ export const Button = ({
     "data-variant": variant !== "text" ? variant : undefined,
     "data-width": isFullWidth ? "full" : undefined,
     href,
-    onClick: handleClick,
+    onClick: onClick ? handleClick : undefined,
+    ref,
     ...props,
   }
 

package/src/components/Card/Card.tsx

@@ -3,7 +3,7 @@ import type { ForwardRefExoticComponent, HTMLAttributes, JSX } from "react"
 import clsx from "clsx"
 import React from "react"
 
-import { getSlots } from "../../utils/slots"
+import { useSlots } from "../../hooks/useSlots"
 import { ChevronRightIcon } from "../Icon/ChevronRightIcon"
 import { Image, ImageProps } from "../Image"
 
@@ -91,8 +91,7 @@ export const Card = ({
 }: CardProps): JSX.Element => {
   const { element: linkElement, props: linkProps } = getCardLinkElement(hrefAs, href)
 
-  const slots = getSlots(componentSlots, children)
-
+  const slots = { ...useSlots(componentSlots, children) }
   const innerProps = { className: "coop-card--inner" }
   const hasLinkWrapper = href && !slots.CardHeading
 

package/src/components/Checkbox/Checkbox.tsx

@@ -1,13 +1,9 @@
 import type { InputHTMLAttributes, JSX } from "react"
 
 import clsx from "clsx"
-import { useId } from "react"
 
-import { FormFieldError, StandardSizes } from "../../../src/types"
-import { FieldError } from "../FieldError"
-import { FieldHint } from "../FieldHint"
-import { FieldLabel } from "../FieldLabel"
-import Tag from "../Tag"
+import { StandardSizes } from "../../../src/types"
+import { useId } from "../../hooks/useId"
 
 export interface CheckboxProps
   extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
@@ -15,89 +11,37 @@ export interface CheckboxProps
   className?: string
   /** **(Optional)** Specify whether the Checkbox should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility. */
   disabled?: boolean
-  /** **(Optional)** Specify the Checkbox error state.
-   *
-   * This is an instance of `FormFieldError`. You can provide either an object with a `message` key, or a boolean value if you need to render the message independently.
-   */
-  error?: FormFieldError
-  /** **(Optional)** Specify the Checkbox hint.
-   *
-   * This text is rendered under the label to provide further guidance for users.
-   */
-  hint?: string
+  /** **(Optional)** Specify the Checkbox error state. */
+  error?: boolean
   /** **(Optional)** Specify the Checkbox id. Will be auto-generated if not set. */
   id?: string
-  /** **(Optional)** Specify the Checkbox label.
-   *
-   * This property is optional in case you need to render your own label, but all form elements *must* provide a label. */
-  label: string
-  /** **(Optional)** Specify whether the label should be visible to humans or screen readers. */
-  labelVisible?: boolean
   /** Specify the Checkbox name. */
   name: string
   /** **(Optional)** Specify the Checkbox size. */
   size?: StandardSizes
-  /** **(Optional)** Specify the Checkbox tag text. */
-  tag?: string
-  /** **(Optional)** Specify the Checkbox tag className. */
-  tagClassName?: string
-  /** **(Optional)** Specify the Checkbox variant. */
-  variant?: "default" | "boxed"
 }
 
 export const Checkbox = ({
   className,
   disabled,
   error = false,
-  hint,
   id,
-  label,
-  labelVisible = true,
   name,
   size = "md",
-  tag,
-  tagClassName,
-  variant = "default",
   ...props
 }: CheckboxProps): JSX.Element => {
-  const internalId = useId()
-
-  id = id ?? internalId
-
+  const uid = useId(id)
   const componentProps = {
     className: clsx("coop-checkbox", className),
-    "data-error": error ? "" : undefined,
+    "data-error": error || undefined,
     "data-size": size.length && size !== "md" ? size : undefined,
-    "data-variant": variant !== "default" ? variant : undefined,
     disabled,
-    id,
+    id: uid,
     name,
     type: "checkbox",
     ...props,
   }
-  const formItemProps = { "aria-disabled": disabled ? true : undefined }
-  return (
-    <div className="coop-form-item" {...formItemProps}>
-      <div className="coop-checkbox-wrapper">
-        <div className="coop-checkbox-input-wrapper">
-          <input {...componentProps} />
-
-          {label && (
-            <FieldLabel htmlFor={id} isVisible={labelVisible}>
-              <span>{label}</span>{" "}
-              {tag && (
-                <Tag className={tagClassName} size="sm">
-                  {tag}
-                </Tag>
-              )}
-            </FieldLabel>
-          )}
-        </div>
-        {hint && <FieldHint>{hint}</FieldHint>}
-      </div>
-      {typeof error === "object" && error?.message && <FieldError>{error.message}</FieldError>}
-    </div>
-  )
+  return <input {...componentProps} />
 }
 
 export default Checkbox

package/src/components/Checkbox/index.ts

@@ -1,6 +1,5 @@
 import Checkbox from "./Checkbox"
-import CheckboxGroup from "./CheckboxGroup"
 
 export default Checkbox
-export { Checkbox, CheckboxGroup }
+export { Checkbox }
 export * from "./Checkbox"

package/src/components/Expandable/Expandable.tsx

@@ -2,8 +2,8 @@ import type { DetailsHTMLAttributes, HTMLAttributes, JSX } from "react"
 
 import { clsx } from "clsx"
 
+import { useSlots } from "../../hooks/useSlots"
 import { bgClassToColor, hasUserBg } from "../../utils"
-import { getSlots } from "../../utils/slots"
 import { ChevronDownIcon } from "../Icon"
 
 export interface ExpandableProps extends DetailsHTMLAttributes<HTMLDetailsElement> {
@@ -26,7 +26,7 @@ const componentSlots = {
 }
 
 export const Expandable = ({ children, className, ...props }: ExpandableProps): JSX.Element => {
-  const slots = getSlots(componentSlots, children)
+  const slots = useSlots(componentSlots, children)
 
   const componentProps = {
     className: clsx("coop-expandable", !hasUserBg(className) && "bg-tint-grey", className),