@coopdigital/react 0.44.0 → 0.46.0

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

@@ -1,8 +1,8 @@
-import type { AnchorHTMLAttributes, ButtonHTMLAttributes, ForwardRefExoticComponent, JSX } from "react";
+import type { ButtonHTMLAttributes, ForwardRefExoticComponent, JSX, Ref } from "react";
 import React from "react";
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /** **(Optional)** Specify a custom element to override default `a` or `button`. */
-    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. */
@@ -18,11 +18,13 @@ 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. */
     variant?: "green" | "blue" | "white" | "grey" | "green-ghost" | "blue-ghost" | "white-ghost" | "grey-ghost" | "text";
 }
-export declare const Button: ({ as, children, className, href, isDisabled, isFullWidth, isLoading, loadingText, onClick, size, variant, ...props }: ButtonProps) => JSX.Element;
+export declare const Button: ({ as, children, className, href, isDisabled, isFullWidth, isLoading, loadingText, onClick, ref, size, variant, ...props }: ButtonProps) => JSX.Element;
 export default Button;

package/dist/components/Button/Button.js

@@ -5,11 +5,8 @@ import clsx from 'clsx';
 import React, { useState, useCallback } from 'react';
 import { LoadingIcon } from '../Icon/LoadingIcon.js';
 
-const Button = ({ as, children, className, href, isDisabled = false, isFullWidth = false, isLoading = false, loadingText = "Loading", onClick, size = "md", variant = "green", ...props }) => {
-    let element = href ? "a" : "button";
-    if (as) {
-        element = as;
-    }
+const Button = ({ as, children, className, href, isDisabled = false, isFullWidth = false, isLoading = false, loadingText = "Loading", onClick, ref, size = "md", variant = "green", ...props }) => {
+    const element = as !== null && as !== void 0 ? as : (href ? "a" : "button");
     const [isPending, setIsPending] = useState(false);
     const handleClick = useCallback(async (event) => {
         if (isPending || !onClick)
@@ -31,7 +28,8 @@ const Button = ({ as, children, className, href, isDisabled = false, isFullWidth
         "data-variant": variant !== "text" ? variant : undefined,
         "data-width": isFullWidth ? "full" : undefined,
         href,
-        onClick: handleClick,
+        onClick: onClick ? handleClick : undefined,
+        ref,
         ...props,
     };
     const finalChildren = isPending || isLoading ? (jsxs(Fragment, { children: [loadingText, jsx(LoadingIcon, {})] })) : (children);

package/dist/components/Card/Card.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import React from 'react';
-import { getSlots } from '../../utils/slots.js';
+import { useSlots } from '../../hooks/useSlots.js';
 import { ChevronRightIcon } from '../Icon/ChevronRightIcon.js';
 import { Image } from '../Image/Image.js';
 
@@ -24,7 +24,7 @@ function getCardLinkElement(as, href) {
 }
 const Card = ({ chevron = false, children, className, href, hrefAs, imagePosition = "left", orientation = "vertical", ...props }) => {
     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;
     const componentProps = {

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

@@ -1,38 +1,18 @@
 import type { InputHTMLAttributes, JSX } from "react";
-import { FormFieldError, StandardSizes } from "../../../src/types";
+import { StandardSizes } from "../../../src/types";
 export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
     /** **(Optional)** Specify additional CSS classes to be applied to the component. */
     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 declare const Checkbox: ({ className, disabled, error, hint, id, label, labelVisible, name, size, tag, tagClassName, variant, ...props }: CheckboxProps) => JSX.Element;
+export declare const Checkbox: ({ className, disabled, error, id, name, size, ...props }: CheckboxProps) => JSX.Element;
 export default Checkbox;

package/dist/components/Checkbox/Checkbox.js

@@ -1,27 +1,20 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { 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 { Tag } from '../Tag/Tag.js';
+import { useId } from '../../hooks/useId.js';
 
-const Checkbox = ({ className, disabled, error = false, hint, id, label, labelVisible = true, name, size = "md", tag, tagClassName, variant = "default", ...props }) => {
-    const internalId = useId();
-    id = id !== null && id !== void 0 ? id : internalId;
+const Checkbox = ({ className, disabled, error = false, id, name, size = "md", ...props }) => {
+    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 (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, { className: tagClassName, 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 jsx("input", { ...componentProps });
 };
 
 export { Checkbox, Checkbox as default };

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

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

package/dist/components/Expandable/Expandable.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { clsx } from 'clsx';
+import { useSlots } from '../../hooks/useSlots.js';
 import { hasUserBg, bgClassToColor } from '../../utils/index.js';
-import { getSlots } from '../../utils/slots.js';
 import 'react';
 import { ChevronDownIcon } from '../Icon/ChevronDownIcon.js';
 
@@ -10,7 +10,7 @@ const componentSlots = {
     ExpandableSummary: null,
 };
 const Expandable = ({ children, className, ...props }) => {
-    const slots = getSlots(componentSlots, children);
+    const slots = useSlots(componentSlots, children);
     const componentProps = {
         className: clsx("coop-expandable", !hasUserBg(className) && "bg-tint-grey", className),
         ...props,

package/dist/components/Field/Field.d.ts

@@ -1,9 +1,48 @@
-import type { HTMLAttributes, JSX, ReactNode } from "react";
-export interface FieldProps extends HTMLAttributes<HTMLDivElement> {
-    /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
-    children?: string | ReactNode;
+import type { HTMLAttributes, JSX } from "react";
+import React from "react";
+import { type ErrorProps } from "../FieldMarkers/Error";
+import { type HintProps } from "../FieldMarkers/Hint";
+import { type LabelProps } from "../FieldMarkers/Label";
+interface FieldProps extends HTMLAttributes<HTMLDivElement> {
+    /** **(Optional)** Specify whether the Field should render inside a box. */
+    boxed?: boolean;
+    /** Form elements inside the Field.
+     *
+     * Usually this will be a combination of `Field.Label`, `Field.Hint`, `Field.Error` and an associated control such as `TextInput` or `Checkbox`. */
+    children: React.ReactNode;
+    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+    classname?: string;
+    /** **(Optional)** Specify the Field error state. Use this to apply visual styling to the field control. */
+    error?: boolean;
+    /** **(Optional)** Specify whether the Field should show the left-hand error bar if it is in an error state. */
+    hideErrorBar?: boolean;
+}
+interface ControlProps extends HTMLAttributes<HTMLDivElement> {
+    /** **(Optional)** Elements inside the form control. */
+    children?: string | React.ReactNode;
     /** **(Optional)** Specify additional CSS classes to be applied to the component. */
     className?: string;
 }
-export declare const Field: ({ children, className, ...props }: FieldProps) => JSX.Element;
+export declare const FieldControl: {
+    ({ children, className, ...props }: ControlProps): JSX.Element;
+    displayName: string;
+};
+export declare const Field: (({ boxed, children, className, error, hideErrorBar, ...props }: FieldProps) => import("react/jsx-runtime").JSX.Element) & {
+    Control: {
+        ({ children, className, ...props }: ControlProps): JSX.Element;
+        displayName: string;
+    };
+    Error: {
+        (props: ErrorProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Hint: {
+        (props: HintProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Label: {
+        (props: LabelProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
 export default Field;

package/dist/components/Field/Field.js

@@ -1,12 +1,75 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
+import React from 'react';
+import { useId } from '../../hooks/useId.js';
+import { useSlots } from '../../hooks/useSlots.js';
+import { Error } from '../FieldMarkers/Error.js';
+import { Hint } from '../FieldMarkers/Hint.js';
+import { Label } from '../FieldMarkers/Label.js';
 
-const Field = ({ children, className, ...props }) => {
+const componentSlots = {
+    Checkbox: null,
+    Children: null,
+    Control: null,
+    FieldError: null,
+    FieldHint: null,
+    FieldLabel: null,
+    Radio: null,
+    Textarea: null,
+    TextInput: null,
+};
+const standardFields = ["Children", "FieldError", "FieldHint", "FieldLabel"];
+const inlineFields = ["Checkbox", "Radio"];
+const Root = ({ boxed = false, children, className, error = false, hideErrorBar = false, ...props }) => {
+    var _a, _b, _c, _d, _e, _f;
+    const slots = { ...useSlots(componentSlots, children) };
+    const slotsArray = Object.entries(slots);
+    const uid = useId();
+    const isInlineControl = slotsArray.some((s) => s[1] !== null && inlineFields.includes(s[0]));
+    const hasFieldMarkers = !!((_b = (_a = slots.FieldLabel) !== null && _a !== void 0 ? _a : slots.FieldError) !== null && _b !== void 0 ? _b : slots.FieldHint);
+    const [, control] = (_c = slotsArray.find((s) => (!standardFields.includes(s[0]) && s[1] !== null ? s : null))) !== null && _c !== void 0 ? _c : [];
+    let controlId = uid;
+    let controlDisabled = false;
+    if (control) {
+        if (typeof control === "object" && "props" in control) {
+            const controlProps = control.props;
+            controlId = (_d = controlProps.id) !== null && _d !== void 0 ? _d : controlId;
+            controlDisabled = (_e = controlProps.disabled) !== null && _e !== void 0 ? _e : false;
+        }
+        slots.Control = React.cloneElement(control, {
+            id: controlId,
+        });
+    }
+    if (slots.FieldLabel && React.isValidElement(slots.FieldLabel)) {
+        slots.FieldLabel = React.cloneElement(slots.FieldLabel, {
+            htmlFor: (_f = slots.FieldLabel.props.htmlFor) !== null && _f !== void 0 ? _f : controlId,
+        });
+    }
     const componentProps = {
-        className: clsx("coop-form-item ", className),
         ...props,
+        "aria-disabled": controlDisabled || undefined,
+        className: clsx("coop-field", isInlineControl && "coop-field-inline", className),
+        "data-boxed": boxed || undefined,
+        "data-error": error || undefined,
+        "data-hide-error": hideErrorBar || undefined,
     };
-    return jsx("div", { ...componentProps, children: children });
+    return (jsxs("div", { ...componentProps, children: [!isInlineControl && hasFieldMarkers && (jsxs("div", { className: "coop-field-markers", children: [slots.FieldLabel, slots.FieldHint, slots.FieldError] })), slots.Control && (jsxs("div", { className: "coop-field-control", children: [slots.Control, isInlineControl && hasFieldMarkers && (jsxs("div", { className: "coop-field-markers", children: [slots.FieldLabel, slots.FieldHint, slots.FieldError] }))] })), slots.Children] }));
+};
+const FieldControl = ({ children, className, ...props }) => {
+    return (jsx("div", { className: clsx("coop-field-control ", className), ...props, children: children }));
 };
+FieldControl.displayName = "Field.Control";
+const FieldLabel = (props) => jsx(Label, { ...props });
+FieldLabel.displayName = "Field.Label";
+const FieldHint = (props) => jsx(Hint, { ...props });
+FieldHint.displayName = "Field.Hint";
+const FieldError = (props) => jsx(Error, { ...props });
+FieldError.displayName = "Field.Error";
+const Field = Object.assign(Root, {
+    Control: FieldControl,
+    Error: FieldError,
+    Hint: FieldHint,
+    Label: FieldLabel,
+});
 
-export { Field, Field as default };
+export { Field, FieldControl, Field as default };

package/dist/components/FieldMarkers/Error.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes, JSX, ReactNode } from "react";
+export interface ErrorProps extends HTMLAttributes<HTMLSpanElement> {
+    /** **(Optional)** Error text for the form element. Accepts any valid JSX or string. */
+    children?: string | ReactNode;
+    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+    className?: string;
+}
+export declare const Error: ({ children, className, ...props }: ErrorProps) => JSX.Element;
+export default Error;

package/dist/components/{FieldError/FieldError.js → FieldMarkers/Error.js}

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 
-const FieldError = ({ children, className, ...props }) => {
+const Error = ({ children, className, ...props }) => {
     const componentProps = {
         className: clsx("coop-field-error ", className),
         ...props,
@@ -9,4 +9,4 @@ const FieldError = ({ children, className, ...props }) => {
     return jsx("span", { ...componentProps, children: children });
 };
 
-export { FieldError, FieldError as default };
+export { Error, Error as default };

package/dist/components/FieldMarkers/Hint.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes, JSX, ReactNode } from "react";
+export interface HintProps extends HTMLAttributes<HTMLParagraphElement> {
+    /** **(Optional)** Hint text for the form element. Accepts any valid JSX or string. */
+    children?: string | ReactNode;
+    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+    className?: string;
+}
+export declare const Hint: ({ children, className, ...props }: HintProps) => JSX.Element | null;
+export default Hint;

package/dist/components/{FieldHint/FieldHint.js → FieldMarkers/Hint.js}

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 
-const FieldHint = ({ children, className, ...props }) => {
+const Hint = ({ children, className, ...props }) => {
     const componentProps = {
         className: clsx("coop-field-hint ", className),
         ...props,
@@ -9,4 +9,4 @@ const FieldHint = ({ children, className, ...props }) => {
     return children ? jsx("div", { ...componentProps, children: children }) : null;
 };
 
-export { FieldHint, FieldHint as default };
+export { Hint, Hint as default };

package/dist/components/FieldMarkers/Label.d.ts

@@ -0,0 +1,11 @@
+import { LabelHTMLAttributes } from "react";
+export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+    /** **(Optional)** Main label for the form element. Accepts any valid JSX or string. */
+    children?: string | React.ReactNode;
+    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+    className?: string;
+    /** **(Optional)** Specify whether the label is visible for humans or only for screen readers. */
+    isVisible?: boolean;
+}
+export declare const Label: ({ children, className, isVisible, ...props }: LabelProps) => import("react/jsx-runtime").JSX.Element;
+export default Label;

package/dist/components/FieldMarkers/Label.js

@@ -0,0 +1,8 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+
+const Label = ({ children, className, isVisible = true, ...props }) => {
+    return (jsx("label", { ...props, className: clsx("coop-field-label", !isVisible && "sr-only", className), children: jsx("span", { children: children }) }));
+};
+
+export { Label, Label as default };

package/dist/components/FieldMarkers/Legend.d.ts

@@ -0,0 +1,11 @@
+import { HTMLAttributes } from "react";
+export interface LegendProps extends HTMLAttributes<HTMLLegendElement> {
+    /** **(Optional)** Main legend for the fieldset. Accepts any valid JSX or string. */
+    children?: string | React.ReactNode;
+    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+    className?: string;
+    /** **(Optional)** Specify whether the legend should be visible to humans or screen readers. */
+    isVisible?: boolean;
+}
+export declare const Legend: ({ children, className, isVisible, ...props }: LegendProps) => import("react/jsx-runtime").JSX.Element;
+export default Legend;

package/dist/components/FieldMarkers/Legend.js

@@ -0,0 +1,13 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+
+const Legend = ({ children, className, isVisible = true, ...props }) => {
+    const componentProps = {
+        "aria-hidden": true,
+        className: clsx("coop-field-label", !isVisible && "sr-only", className),
+        ...props,
+    };
+    return (jsxs(Fragment, { children: [jsx("legend", { className: "sr-only", children: children }), isVisible && jsx("div", { ...componentProps, children: children })] }));
+};
+
+export { Legend, Legend as default };

package/dist/components/Fieldset/Fieldset.d.ts

@@ -0,0 +1,54 @@
+import { type FieldsetHTMLAttributes, type JSX } from "react";
+import { StandardSizes } from "../../../src/types";
+import { type ErrorProps } from "../FieldMarkers/Error";
+import { type HintProps } from "../FieldMarkers/Hint";
+import { type LegendProps } from "../FieldMarkers/Legend";
+export interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
+    /** Form elements inside the Fieldset.
+     *
+     * Usually this will be a combination of `Fieldset.Legend` and `Fieldset.Fields`. */
+    children: React.ReactNode;
+    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+    className?: string;
+    /** **(Optional)** Specify whether the Fieldset, and all of its descendents, should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility. */
+    disabled?: boolean;
+    /** **(Optional)** Specify the Fieldset error state. Use this to apply visual styling to the field control. */
+    error?: boolean;
+    /** **(Optional)** Specify whether the Fieldset should show the left-hand error bar if it is in an error state. */
+    hideErrorBar?: boolean;
+    /** **(Optional)** Specify the size of the Fieldset and all its descendents. */
+    size?: StandardSizes;
+}
+interface FieldsetFieldsProps {
+    /** **(Optional)** Specify whether all descendent Fields should render inside a box. */
+    boxed?: boolean;
+    /** **(Optional)** Form elements inside the Fieldset.Fields container. */
+    children?: string | React.ReactNode;
+    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+    className?: string;
+    /** **(Optional)** Specify the CheckboxGroup orientation. */
+    orientation?: "horizontal" | "vertical";
+}
+export declare const FieldsetFields: {
+    ({ boxed, children, className, orientation, ...props }: FieldsetFieldsProps): JSX.Element;
+    displayName: string;
+};
+export declare const Fieldset: (({ children, className, disabled, error, hideErrorBar, size, ...props }: FieldsetProps) => JSX.Element) & {
+    Error: {
+        (props: ErrorProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Fields: {
+        ({ boxed, children, className, orientation, ...props }: FieldsetFieldsProps): JSX.Element;
+        displayName: string;
+    };
+    Hint: {
+        (props: HintProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Legend: {
+        (props: LegendProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export default Fieldset;

package/dist/components/Fieldset/Fieldset.js

@@ -0,0 +1,44 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { Error } from '../FieldMarkers/Error.js';
+import { Hint } from '../FieldMarkers/Hint.js';
+import { Legend } from '../FieldMarkers/Legend.js';
+
+const Root = ({ children, className, disabled, error = false, hideErrorBar = false, size = "md", ...props }) => {
+    const componentProps = {
+        "aria-disabled": disabled,
+        className: clsx("coop-fieldset", className),
+        "data-error": error || undefined,
+        //"data-variant": variant !== "default" ? variant : undefined,
+        "data-hide-error": hideErrorBar || undefined,
+        // "data-orientation": orientation !== "vertical" ? orientation : undefined,
+        "data-size": size.length && size !== "md" ? size : undefined,
+        disabled,
+        ...props,
+    };
+    return jsx("fieldset", { ...componentProps, children: children });
+};
+const FieldsetFields = ({ boxed = false, children, className, orientation = "vertical", ...props }) => {
+    const componentProps = {
+        className: clsx("coop-fieldset-fields", className),
+        "data-boxed": boxed || undefined,
+        "data-orientation": orientation !== "vertical" ? orientation : undefined,
+        ...props,
+    };
+    return jsx("div", { ...componentProps, children: children });
+};
+FieldsetFields.displayName = "Fieldset.Fields";
+const FieldsetLegend = (props) => jsx(Legend, { ...props });
+FieldsetLegend.displayName = "Fieldset.Legend";
+const FieldsetHint = (props) => jsx(Hint, { ...props });
+FieldsetHint.displayName = "Fieldset.Hint";
+const FieldsetError = (props) => jsx(Error, { ...props });
+FieldsetError.displayName = "Fieldset.Error";
+const Fieldset = Object.assign(Root, {
+    Error: FieldsetError,
+    Fields: FieldsetFields,
+    Hint: FieldsetHint,
+    Legend: FieldsetLegend,
+});
+
+export { Fieldset, FieldsetFields, Fieldset as default };

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

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

package/dist/components/Pill/Pill.js

@@ -1,8 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import React from 'react';
+import { useSlots } from '../../hooks/useSlots.js';
 import { hasUserBg } from '../../utils/index.js';
-import { getSlots } from '../../utils/slots.js';
 
 const componentSlots = {
     Children: null,
@@ -10,7 +10,7 @@ const componentSlots = {
 };
 const Pill = ({ as, children, className, href, size = "md", ...props }) => {
     let element = href ? "a" : "span";
-    const slots = getSlots(componentSlots, children);
+    const slots = useSlots(componentSlots, children);
     if (as) {
         element = as;
     }

package/dist/components/Radio/Radio.d.ts

@@ -0,0 +1,18 @@
+import { type InputHTMLAttributes, type JSX } from "react";
+import { StandardSizes } from "src/types";
+export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+    className?: string;
+    /** **(Optional)** Specify whether the Radio should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility.  */
+    disabled?: boolean;
+    /** **(Optional)** Specify the Radio error state. */
+    error?: boolean;
+    /** **(Optional)** Specify the Radio id. Will be auto-generated if not set. */
+    id?: string;
+    /** Specify the Radio name. */
+    name: string;
+    /** **(Optional)** Specify the Radio size. */
+    size?: StandardSizes;
+}
+export declare const Radio: ({ className, disabled, error, id, name, size, ...props }: RadioProps) => JSX.Element;
+export default Radio;

package/dist/components/Radio/Radio.js

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { useId } from 'react';
+
+const Radio = ({ className, disabled, error = false, id, name, size = "md", ...props }) => {
+    const internalId = useId();
+    id = id !== null && id !== void 0 ? id : internalId;
+    const componentProps = {
+        className: clsx("coop-radio", className),
+        "data-error": error || undefined,
+        "data-size": size.length && size !== "md" ? size : undefined,
+        disabled,
+        id,
+        name,
+        type: "radio",
+        ...props,
+    };
+    //const formItemProps = { "aria-disabled": disabled ? true : undefined }
+    return jsx("input", { ...componentProps });
+};
+
+export { Radio, Radio as default };

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

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

package/dist/components/{SearchBox/SearchBox.d.ts → Searchbox/Searchbox.d.ts}

@@ -1,8 +1,8 @@
 import type { InputHTMLAttributes, JSX } from "react";
 import React from "react";
-import { StandardSizes } from "../../../src/types";
+import { StandardSizes } from "../../types";
 import { type ButtonProps } from "../Button";
-export interface SearchBoxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+export interface SearchboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
     /** **(Optional)** Specify a server endpoint to submit the form. Will be ignored if onSubmit is also set. */
     action?: string;
     /** **(Optional)** Specify props to forward to the Button element. Use `label` to set Button text. */
@@ -19,14 +19,14 @@ export interface SearchBoxProps extends Omit<InputHTMLAttributes<HTMLInputElemen
     labelVisible?: boolean;
     /** **(Optional)** Specify the TextInput name, 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. */
+    /** **(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)** Specify the TextInput placeholder text Do not use in place of a form label. */
     placeholder?: string;
-    /** **(Optional)** Specify the SearchBox size. */
+    /** **(Optional)** Specify the Searchbox size. */
     size?: StandardSizes;
-    /** **(Optional)** Specify the SearchBox variant. */
+    /** **(Optional)** Specify the Searchbox variant. */
     variant?: "green" | "blue" | "white" | "grey" | "green-ghost" | "blue-ghost" | "white-ghost" | "grey-ghost";
 }
-export declare const SearchBox: ({ action, "aria-placeholder": ariaPlaceholder, autoCapitalize, autoComplete, button, className, id, label, labelVisible, name, onSubmit, placeholder, size, variant, ...props }: SearchBoxProps) => JSX.Element;
-export default SearchBox;
+export declare const Searchbox: ({ action, "aria-placeholder": ariaPlaceholder, autoCapitalize, autoComplete, button, className, id, label, labelVisible, name, onSubmit, placeholder, size, variant, ...props }: SearchboxProps) => JSX.Element;
+export default Searchbox;