@coopdigital/react 0.44.0 → 0.45.0

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/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 { getSlots } from '../../utils/slots.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,
+    RadioButton: null,
+    Textarea: null,
+    TextInput: null,
+};
+const standardFields = ["Children", "FieldError", "FieldHint", "FieldLabel"];
+const inlineFields = ["Checkbox", "RadioButton"];
+const Root = ({ boxed = false, children, className, error = false, hideErrorBar = false, ...props }) => {
+    var _a, _b, _c, _d, _e, _f;
+    const slots = getSlots(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/RadioButton/RadioButton.d.ts

@@ -1,36 +1,18 @@
 import { type InputHTMLAttributes, type JSX } from "react";
-import { FormFieldError, StandardSizes } from "src/types";
+import { StandardSizes } from "src/types";
 export interface RadioButtonProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
     /** **(Optional)** Specify additional CSS classes to be applied to the component. */
     className?: string;
     /** **(Optional)** Specify whether the RadioButton should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility.  */
     disabled?: boolean;
-    /** **(Optional)** Specify the RadioButton 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 RadioButton hint.
-     *
-     * This text is rendered under the label to provide further guidance for users.
-     */
-    hint?: string;
+    /** **(Optional)** Specify the RadioButton error state. */
+    error?: boolean;
     /** **(Optional)** Specify the RadioButton id. Will be auto-generated if not set. */
     id?: string;
-    /** **(Optional)** Specify the RadioButton 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 RadioButton name. */
     name: string;
     /** **(Optional)** Specify the RadioButton size. */
     size?: StandardSizes;
-    /** **(Optional)** Specify the RadioButton tag text. */
-    tag?: string;
-    /** **(Optional)** Specify the RadioButton tag className. */
-    tagClassName?: string;
 }
-export declare const RadioButton: ({ className, disabled, error, hint, id, label, labelVisible, name, size, tag, tagClassName, ...props }: RadioButtonProps) => JSX.Element;
+export declare const RadioButton: ({ className, disabled, error, id, name, size, ...props }: RadioButtonProps) => JSX.Element;
 export default RadioButton;

package/dist/components/RadioButton/RadioButton.js

@@ -1,17 +1,13 @@
-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';
 
-const RadioButton = ({ className, disabled, error = false, hint, id, label, labelVisible = true, name, size = "md", tag, tagClassName, ...props }) => {
+const RadioButton = ({ 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-button", className),
-        "data-error": error ? "" : undefined,
+        "data-error": error || undefined,
         "data-size": size.length && size !== "md" ? size : undefined,
         disabled,
         id,
@@ -19,8 +15,8 @@ const RadioButton = ({ className, disabled, error = false, hint, id, label, labe
         type: "radio",
         ...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: [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, { 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 })] }));
+    //const formItemProps = { "aria-disabled": disabled ? true : undefined }
+    return jsx("input", { ...componentProps });
 };
 
 export { RadioButton, RadioButton as default };

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

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

package/dist/components/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';
 
@@ -32,7 +32,7 @@ const SearchBox = ({ action, "aria-placeholder": ariaPlaceholder, autoCapitalize
     const formProps = {
         action: action !== null && action !== void 0 ? action : undefined,
         className: clsx("coop-search-box", className),
-        //"data-size": size && size !== "md" ? size : undefined,
+        "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-search-box--inner", children: [jsx(TextInput, { ...inputProps }), jsx(Button, { ...buttonProps, children: button.label })] })] }));
 };
 
 export { SearchBox, SearchBox as default };

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. */
@@ -36,5 +22,5 @@ export interface TextInputProps extends Omit<InputHTMLAttributes<HTMLInputElemen
     /** **(Optional)** Specify the TextInput type. */
     type?: "text" | "email" | "number" | "password" | "search" | "tel" | "url";
 }
-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 };