@coopdigital/react 1.22.3 → 1.22.4

package/dist/components/AlertBanner/AlertBanner.d.ts

@@ -1,19 +1,21 @@
 import { HTMLAttributes, JSX, ReactNode, Ref } from "react";
 //#region src/components/AlertBanner/AlertBanner.d.ts
 export interface AlertBannerProps extends HTMLAttributes<HTMLDivElement> {
-  /** **(Optional)** Main content inside the banner. It can be any valid JSX or string. */
-  children?: string | ReactNode;
-  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  /** Content inside the component.
+   *
+   * This should be an `<AlertBanner.Heading>` followed by any valid JSX. */
+  children?: ReactNode;
+  /** Specify additional CSS classes. */
   className?: string;
-  /** **(Optional)** Specify a custom React ref for this component. */
+  /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLDivElement>;
-  /** **(Optional)** Specify the AlertBanner variant. */
+  /** Specify the component variant. */
   variant?: "black" | "default";
 }
 interface AlertBannerHeadingProps extends HTMLAttributes<HTMLHeadingElement> {
-  /** **(Optional)** Content inside the Heading. */
+  /** Content inside the component. */
   children?: React.ReactNode;
-  /** **(Optional)** Specify additional CSS classes to be applied to the Heading. */
+  /** Specify additional CSS classes. */
   className?: string;
 }
 declare const AlertBanner: {

package/dist/components/Author/Author.d.ts

@@ -3,19 +3,21 @@ import "../Image/index.js";
 import { HTMLAttributes, JSX, Ref } from "react";
 //#region src/components/Author/Author.d.ts
 export interface AuthorProps extends HTMLAttributes<HTMLDivElement> {
-  /** **(Optional)** Specify the Author name. */
+  /** Specify the Author name. */
   author?: string;
-  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  /** Specify additional CSS classes. */
   className?: string;
-  /** **(Optional)** Specify the date. Refer to Experience Library guidance on date formats. We advise using the following format (dd mmmm yyyy) eg: 1 January 2000.  */
+  /** Specify the date.
+   *
+   * Recommended format `dd mmmm yyyy` eg: 1 January 2000.  */
   date?: string;
-  /** **(Optional)** Specify the text that will prefix the date, e.g. "Updated". */
+  /** Specify the text that will prefix the date, e.g. "Updated". */
   datePrefix?: string;
-  /** **(Optional)** Specify properties of the Author Image. */
+  /** Specify properties of the Author Image. */
   image?: ImageProps;
-  /** **(Optional)** Specify a custom React ref for this component. */
+  /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLDivElement>;
-  /** **(Optional)** Specify the Author size. */
+  /** Specify the component size. */
   size?: "sm" | "md";
 }
 declare const Author: {

package/dist/components/Box/Box.d.ts

@@ -2,17 +2,20 @@ import { StandardSizesWithNone } from "../../types/index.js";
 import React, { ForwardRefExoticComponent, HTMLAttributes, JSX, ReactNode, Ref } from "react";
 //#region src/components/Box/Box.d.ts
 export interface BoxProps extends HTMLAttributes<HTMLDivElement> {
-  /** **(Optional)** Specify a custom element to override default `div` */
+  /** Specify a custom element for the component
+   *
+   * Default: `<div>`
+   */
   as?: React.FC<any> | ForwardRefExoticComponent<any> | string;
-  /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
-  children?: string | ReactNode;
-  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  /** Content inside the component. */
+  children?: ReactNode;
+  /** Specify additional CSS classes. */
   className?: string;
-  /** **(Optional)** Specify the Box padding. */
+  /** Specify the padding. */
   padding?: StandardSizesWithNone;
-  /** **(Optional)** Specify the Box border radius. */
+  /** Specify the border radius. */
   radius?: StandardSizesWithNone;
-  /** **(Optional)** Specify a custom React ref for this component. */
+  /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLDivElement>;
 }
 export declare const Box: ({ as, children, className, padding, radius, ref, ...props }: BoxProps) => JSX.Element;

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

@@ -1,29 +1,32 @@
 import React, { ButtonHTMLAttributes, ForwardRefExoticComponent, JSX, Ref } from "react";
 //#region src/components/Button/Button.d.ts
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  /** **(Optional)** Specify a custom element to override default `a` or `button`. */
+  /** Specify a custom element for the component.
+   *
+   * Default: `<button>` or `<a>`.
+   */
   as?: React.FC<any> | ForwardRefExoticComponent<any> | string;
-  /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
+  /** Content inside the component. */
   children?: React.ReactNode;
-  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  /** Specify additional CSS classes. */
   className?: string;
-  /** **(Optional)** Specify the URL that the Button component will link to when clicked. */
+  /** Specify the target URL. */
   href?: string;
-  /** **(Optional)** Specify whether the Button should be disabled. This will not actually disable the button, just make it look disabled. Refer to Experience Library guidance on disabled buttons and accessibility.  */
+  /** Specify whether the Button should be disabled. This will not actually disable the button, just make it look disabled. */
   isDisabled?: boolean;
-  /** **(Optional)** Specify whether the Button should be full width. Refer to Experience Library guidance on full width buttons. */
+  /** Specify whether the Button should be full width. */
   isFullWidth?: boolean;
-  /** **(Optional)** Force the Button into a loading state. */
+  /** Force the Button into a loading state. */
   isLoading?: boolean;
-  /** **(Optional)** Specify text to show when the Button is in a loading state. */
+  /** 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. */
+  /** Callback to run when clicked. 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?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
-  /** **(Optional)** Specify a custom React ref for this component. */
+  /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLElement>;
-  /** **(Optional)** Specify the Button size. */
+  /** Specify the component size. */
   size?: "sm" | "md" | "lg";
-  /** **(Optional)** Specify the Button variant. */
+  /** Specify the component variant. */
   variant?: "solid" | "ghost" | "text";
 }
 declare const Button: {

package/dist/components/Card/Card.d.ts

@@ -6,86 +6,96 @@ import "../Picture/index.js";
 import React, { AnchorHTMLAttributes, ForwardRefExoticComponent, HTMLAttributes, JSX, Ref } from "react";
 //#region src/components/Card/Card.d.ts
 export interface CardProps extends HTMLAttributes<HTMLDivElement> {
-  /**  **(Optional)** Specify how the Card behaves across screen sizes.
+  /** Specify how the Card behaves across screen sizes.
    *
    * For finer control, use utility classes or custom CSS to control flex-direction. */
   adaptive?: "sm" | "md";
-  /** **(Optional)** Specify an element to use for the container.
+  /** Specify an element for the component.
    *
-   * Default: `article`
+   * Default: `<article>`
    */
   as?: "article" | "section" | "figure" | "div";
-  /** **(Optional)** Content inside the component. */
+  /** Content inside the component.
+   *
+   * This should be a set of `<Card.Badge>`, `<Card.Content>` and / or `<Card.Picture>`. */
   children?: React.ReactNode;
-  /** **(Optional)** Specify additional CSS classes. */
+  /** Specify additional CSS classes. */
   className?: string;
-  /** **(Optional)** Specify the Card orientation. */
+  /** Specify the component orientation. */
   orientation?: "vertical" | "horizontal";
-  /** **(Optional)** Specify the Card padding. */
+  /** Specify the component padding. */
   padding?: StandardSizes;
-  /** **(Optional)** Specify the Card border radius. */
+  /** Specify the component border radius. */
   radius?: StandardSizes;
-  /** **(Optional)** Specify a custom React ref for this component. */
+  /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLDivElement>;
-  /** **(Optional)** Enable additional styles to use the Card as a signpost.
+  /** Enable additional styles to use the Card as a signpost.
    *
    * Text is vertically aligned centrally and the Icon is enlarged. */
   signpost?: boolean;
 }
 interface CardHeadingProps extends HTMLAttributes<HTMLDivElement> {
-  /** **(Optional)** Specify an element to use for the heading.
+  /** Specify a custom element for the component.
    *
-   * Default: `h3`
+   * Default: `<h3>`
    */
   as?: "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "strong" | "figcaption";
-  /** **(Optional)** Content inside the component. */
+  /** Content inside the component. */
   children?: React.ReactNode;
-  /** **(Optional)** Specify additional CSS classes. */
+  /** Specify additional CSS classes. */
   className?: string;
 }
 interface CardIconProps extends HTMLAttributes<HTMLDivElement> {
-  /** **(Optional)** Content inside the component. */
+  /** Content inside the component. */
   children?: React.ReactNode;
-  /** **(Optional)** Specify additional CSS classes. */
+  /** Specify additional CSS classes. */
   className?: string;
 }
 interface CardContentProps extends HTMLAttributes<HTMLDivElement> {
-  /** **(Optional)** Content inside the component. */
+  /** Content inside the component.
+   *
+   * This should be a set of `<Card.Link>`, `<Card.Heading>` and / or `<Card.Icon>` followed by any valid JSX.
+   */
   children?: React.ReactNode;
-  /** **(Optional)** Specify additional CSS classes. */
+  /** Specify additional CSS classes. */
   className?: string;
 }
 interface CardLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
-  /** **(Optional)** Specify an element to use instead of native `a`. */
+  /** Specify an element for the component.
+   *
+   * Default: `<a>`.
+   */
   as?: React.FC<any> | ForwardRefExoticComponent<any> | string;
-  /** **(Optional)** Content inside the component. */
+  /** Content inside the component.
+   *
+   * Usually this will be a `<Card.Heading>` but can be any valid JSX.
+   */
   children?: React.ReactNode;
-  /** **(Optional)** Specify additional CSS classes. */
+  /** Specify additional CSS classes. */
   className?: string;
 }
 interface CardBadgeProps extends HTMLAttributes<HTMLDivElement> {
-  /** **(Optional)** Specify alignment relative to container.
+  /** Specify alignment relative to container.
    *
-   * Default: `right`
+   * Default: `right`.
    */
   align?: "left" | "right";
-  /** **(Optional)** Content inside the component. */
+  /** Content inside the component. */
   children?: React.ReactNode;
-  /** **(Optional)** Specify additional CSS classes. */
+  /** Specify additional CSS classes. */
   className?: string;
-  /** **(Optional)** Specify position relative to top corner.
+  /** Specify position relative to top corner.
    *
-   * Default: `popout`
+   * Default: `popout`.
    */
   position?: "inset" | "popout";
 }
 interface CardPictureProps extends PictureProps {
-  /** **(Optional)** Specify on which side the Picture should appear. */
+  /** Specify alignment relative to container.
+   *
+   * Default: `left`.
+   */
   align?: "left" | "right";
-  /** **(Optional)** Content inside the component. */
-  children?: React.ReactNode;
-  /** **(Optional)** Specify additional CSS classes. */
-  className?: string;
 }
 declare const Card: {
   ({ adaptive, as, children, className, orientation, padding, radius, ref, signpost, ...props }: CardProps): JSX.Element;

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

@@ -2,19 +2,19 @@ import { StandardSizes } from "../../types/index.js";
 import { InputHTMLAttributes, JSX, Ref } from "react";
 //#region src/components/Checkbox/Checkbox.d.ts
 export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
-  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  /** Specify additional CSS classes. */
   className?: string;
-  /** **(Optional)** Specify whether the Checkbox should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility. */
+  /** Specify the disabled state. */
   disabled?: boolean;
-  /** **(Optional)** Specify the Checkbox error state. */
+  /** Specify the component error state. */
   error?: boolean;
-  /** **(Optional)** Specify the Checkbox id. Will be auto-generated if not set. */
+  /** Specify the component id. Will be auto-generated if not set. */
   id?: string;
-  /** Specify the Checkbox name. */
+  /** Specify the component name. */
   name: string;
-  /** **(Optional)** Specify a custom React ref for this component. */
+  /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLInputElement>;
-  /** **(Optional)** Specify the Checkbox size. */
+  /** Specify the component size. */
   size?: StandardSizes;
 }
 declare const Checkbox: {

package/dist/components/DatePicker/DatePicker.d.ts

@@ -8,49 +8,49 @@ type OnDateSelectHandler = (selected: string | string[] | {
   to?: string;
 } | undefined) => void;
 export interface DatePickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onSelect" | "onChange" | "onChangeCapture" | "size" | "type"> {
-  /** **(Optional)** Specify additional CSS classes to be applied to the wrapper. */
+  /** Specify additional CSS classes. */
   className?: string;
-  /** **(Optional)** Specify whether the picker should close when selecting a date. Has no effect in range mode. */
+  /** Specify whether the DatePicker should close when selecting a date. Has no effect in range mode. */
   closeOnSelect?: boolean;
-  /** **(Optional)** Specify the date format. This affects the values displayed to users and the accepted format for manual inputs. */
+  /** Specify the date format. This affects the values displayed to users and the accepted format for manual inputs. */
   dateFormat?: string;
-  /** **(Optional)** Specify whether the Date Picker should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility. */
+  /** Specify whether the DatePicker should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility. */
   disabled?: boolean;
-  /** **(Optional)** Specify dates to be disabled. Refer to react-daypicker docs for full configuration. */
+  /** Specify dates to be disabled. Refer to react-day-picker docs for full configuration. */
   disabledDates?: DayPickerProps["disabled"];
-  /** **(Optional)** Specify the upper bound for the picker.
+  /** Specify the upper bound for the DatePicker.
    *
    * Default: today plus one year.
    */
   endDate?: Date;
-  /** **(Optional)** Specify the Date Picker error state. */
+  /** Specify the component error state. */
   error?: boolean;
-  /** **(Optional)** Specify the Date Picker id. Will be auto-generated if not set. */
+  /** Specify the component id. Will be auto-generated if not set. */
   id?: string;
-  /** **(Optional)** Specify the initial month view for the picker. Combine with `initialSelected` to pre-select a date.
+  /** Specify the initial month view for the DatePicker. Combine with `initialSelected` to pre-select a date.
    *
    * Default: today.
    */
   initialDate?: Date | DateRange;
-  /** **(Optional)** Specify whether the initial date should be pre-selected. */
+  /** Specify whether the initial date should be pre-selected. */
   initialSelected?: boolean;
-  /** **(Optional)** Specify the picker mode. */
+  /** Specify the DatePicker mode. */
   mode?: Mode;
-  /** Specify the Datepicker name. */
+  /** Specify the component name. */
   name: string;
   /** Provided only for compatibility with form libraries. Use `onSelect` instead. */
   onChange?: OnDateSelectHandler;
-  /** **(Optional)** Callback to run when a date is selected and validated.
+  /** Callback to run when a date is selected and validated.
    *
    * Contains the selected value, which is either an ISO-8601 formatted date string, or an object with from and to values. */
   onSelect?: OnDateSelectHandler;
-  /** **(Optional)** Specify a custom React ref for this component. */
+  /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLInputElement>;
-  /** **(Optional)** Specify whether this is a required field. */
+  /** Specify whether this is a required field. */
   required?: boolean;
-  /** **(Optional)** Specify the DatePicker size. */
+  /** Specify the component size. */
   size?: StandardSizes;
-  /** **(Optional)** Specify the lower bound for the picker.
+  /** Specify the lower bound for the DatePicker.
    *
    * Default: today minus one year.
    */

package/dist/components/Dialog/Dialog.d.ts

@@ -1,64 +1,64 @@
 import React, { DialogHTMLAttributes, HTMLAttributes, JSX, ReactEventHandler, ReactNode, Ref } from "react";
 //#region src/components/Dialog/Dialog.d.ts
 export interface DialogProps extends Omit<DialogHTMLAttributes<HTMLDialogElement>, "closedby"> {
-  /** Content inside the Dialog.
+  /** Content inside the component.
    *
-   * This should be a `<Dialog.Header>` and `<Dialog.Body>`, although arbitrary JSX children are also accepted. */
-  children: string | ReactNode;
-  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+   * This should be a set of `<Dialog.Header>` and `<Dialog.Body>`. */
+  children?: ReactNode;
+  /** Specify additional CSS classes. */
   className?: string;
-  /** **(Optional)** Specify how the dialog can be closed. Set this to `none` to disable escape key and click-outside behaviour.
+  /** Specify how the Dialog can be closed. Set this to `none` to disable escape key and click-outside behaviour.
    *
    * Default: `any` */
   closedBy?: "any" | "none";
-  /** **(Optional)** Specify the Dialog id. Will be auto-generated if not set. */
+  /** Specify the component id. Will be auto-generated if not set. */
   id?: string;
-  /** Specify an accessible label for the dialog that will be read out by screen readers. */
+  /** Specify an accessible label for the Dialog that will be read out by screen readers. */
   label: string;
-  /** **(Optional)** Specify the Dialog mode.
+  /** Specify the Dialog mode.
    *
    * Default: `dialog`
    */
   mode?: "sheet" | "dialog";
-  /** **(Optional)** Specific a callback to run when the Dialog closes. */
+  /** Specify a callback to run when the Dialog closes. */
   onClose?: ReactEventHandler<HTMLDialogElement>;
-  /** **(Optional)** Specific a callback to run when the Dialog opens. */
+  /** Specify a callback to run when the Dialog opens. */
   onOpen?: ReactEventHandler<HTMLDialogElement>;
-  /** **(Optional)** Specific a callback to run when the Dialog opens or closes. */
+  /** Specify a callback to run when the Dialog opens or closes. */
   onToggle?: ReactEventHandler<HTMLDialogElement>;
   /** Specify the Dialog open state. This should reflect the value of your `useState`.
    *
    * Default: `false`
    */
   open: boolean;
-  /** **(Optional)** Specify the Dialog position. This only applies when the `mode` is set to `sheet`.
+  /** Specify the Dialog position. This only applies when the `mode` is set to `sheet`.
    *
    * Default: `bottom`
    */
   position?: "right" | "bottom" | "left";
-  /** **(Optional)** Specify a custom React ref for this component. */
+  /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLDialogElement>;
-  /** **(Optional)** Specify an ARIA role for the dialog. Use `alertdialog` if the message includes urgent information that requires an explicit user action.
+  /** Specify an ARIA role for the Dialog. Use `alertdialog` if the message includes urgent information that requires an explicit user action.
    *
    * Default: `dialog`
    */
   role?: "dialog" | "alertdialog";
 }
 interface DialogHeaderProps extends HTMLAttributes<HTMLDivElement> {
-  /** **(Optional)** Content inside the Dialog Header. */
+  /** Content inside the component. */
   children?: React.ReactNode;
-  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  /** Specify additional CSS classes. */
   className?: string;
-  /** **(Optional)** Specify whether to render the close button.
+  /** Specify whether to render the close button.
    *
    * Default: `true`
    */
   closeButton?: boolean;
 }
 interface DialogBodyProps extends HTMLAttributes<HTMLDivElement> {
-  /** **(Optional)** Content inside the Dialog Body. */
+  /** Content inside the component. */
   children?: React.ReactNode;
-  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  /** Specify additional CSS classes. */
   className?: string;
 }
 declare const Dialog: {

package/dist/components/Expandable/Expandable.d.ts

@@ -1,23 +1,25 @@
 import { DetailsHTMLAttributes, HTMLAttributes, JSX, Ref } from "react";
 //#region src/components/Expandable/Expandable.d.ts
 export interface ExpandableProps extends DetailsHTMLAttributes<HTMLDetailsElement> {
-  /** Main content inside the component. This should be an `Expandable.Summary` and `Expandable.Content`. */
-  children: React.ReactNode;
-  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  /** Content inside the component.
+   *
+   * This should be a set of `<Expandable.Summary>` and `<Expandable.Content>`. */
+  children?: React.ReactNode;
+  /** Specify additional CSS classes. */
   className?: string;
-  /** **(Optional)** Specify a custom React ref for this component. */
+  /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLDetailsElement>;
 }
 interface ExpandableSummaryProps extends HTMLAttributes<HTMLElement> {
-  /** **(Optional)** Content inside the Summary. */
+  /** Content inside the component. */
   children?: React.ReactNode;
-  /** **(Optional)** Specify additional CSS classes to be applied to the Summary. */
+  /** Specify additional CSS classes. */
   className?: string;
 }
 interface ExpandableContentProps extends HTMLAttributes<HTMLElement> {
-  /** **(Optional)** Content inside the Expandable. */
+  /** Content inside the component. */
   children?: React.ReactNode;
-  /** **(Optional)** Specify additional CSS classes to be applied to the content wrapper. */
+  /** Specify additional CSS classes. */
   className?: string;
 }
 declare const Expandable: {

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

@@ -4,19 +4,19 @@ import { LabelProps } from "../FieldMarkers/Label.js";
 import React, { HTMLAttributes, JSX, Ref } from "react";
 //#region src/components/Field/Field.d.ts
 interface FieldProps extends HTMLAttributes<HTMLDivElement> {
-  /** **(Optional)** Specify whether the Field should render inside a box. */
+  /** Specify whether the Field should render inside a box. */
   boxed?: boolean;
-  /** Form elements inside the Field.
+  /** Content inside the component.
    *
-   * 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. */
+   * This should be a set of `<Field.Label>`, `<Field.Hint>`, `<Field.Error>` and an associated form component. */
+  children?: React.ReactNode;
+  /** Specify additional CSS classes. */
   classname?: string;
-  /** **(Optional)** Specify the Field error state. Use this to apply visual styling to the field control. */
+  /** Specify the component error state. */
   error?: boolean;
-  /** **(Optional)** Specify whether the Field should show the left-hand error bar if it is in an error state. */
+  /** Specify whether the Field should show the left-hand error bar if it is in an error state. */
   hideErrorBar?: boolean;
-  /** **(Optional)** Specify a custom React ref for this component. */
+  /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLDivElement>;
 }
 declare const Field: {

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

@@ -1,11 +1,11 @@
 import { HTMLAttributes, JSX, ReactNode, Ref } from "react";
 //#region src/components/FieldMarkers/Error.d.ts
 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. */
+  /** Content inside the component. */
+  children?: ReactNode;
+  /** Specify additional CSS classes. */
   className?: string;
-  /** **(Optional)** Specify a custom React ref for this component. */
+  /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLSpanElement>;
 }
 //#endregion

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

@@ -1,11 +1,11 @@
 import { HTMLAttributes, JSX, ReactNode, Ref } from "react";
 //#region src/components/FieldMarkers/Hint.d.ts
 export interface HintProps extends HTMLAttributes<HTMLDivElement> {
-  /** **(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. */
+  /** Content inside the component. */
+  children?: ReactNode;
+  /** Specify additional CSS classes. */
   className?: string;
-  /** **(Optional)** Specify a custom React ref for this component. */
+  /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLDivElement>;
 }
 //#endregion

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

@@ -1,13 +1,13 @@
 import { JSX, LabelHTMLAttributes, Ref } from "react";
 //#region src/components/FieldMarkers/Label.d.ts
 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. */
+  /** Content inside the component. */
+  children?: React.ReactNode;
+  /** Specify additional CSS classes. */
   className?: string;
-  /** **(Optional)** Specify whether the label is visible for humans or only for screen readers. */
+  /** Specify whether the Label is visible to humans or screen readers only. */
   isVisible?: boolean;
-  /** **(Optional)** Specify a custom React ref for this component. */
+  /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLLabelElement>;
 }
 //#endregion

package/dist/components/FieldMarkers/Label.js

@@ -2,11 +2,12 @@ import { useField } from "../Field/Field.context.js";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/FieldMarkers/Label.tsx
-const Label = ({ children, className, isVisible = true, ref, ...props }) => {
+const Label = ({ children, className, htmlFor, id, isVisible = true, ref, ...props }) => {
 	const field = useField();
 	const componentProps = {
 		className: clsx("coop-field-label", !isVisible && "sr-only", className),
-		htmlFor: props.htmlFor ?? (field?.id ? field.id + (field?.suffix ?? "") : void 0),
+		htmlFor: htmlFor ?? (field?.id ? field.id + (field?.suffix ?? "") : void 0),
+		id: id ?? (field?.id ? field.id + "_label" : void 0),
 		...props
 	};
 	return /* @__PURE__ */ jsx("label", {

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

@@ -1,13 +1,13 @@
 import { HTMLAttributes, JSX, Ref } from "react";
 //#region src/components/FieldMarkers/Legend.d.ts
 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. */
+  /** Content inside the component. */
+  children?: React.ReactNode;
+  /** Specify additional CSS classes. */
   className?: string;
-  /** **(Optional)** Specify whether the legend should be visible to humans or screen readers. */
+  /** Specify whether the Legend is visible to humans or screen readers only. */
   isVisible?: boolean;
-  /** **(Optional)** Specify a custom React ref for this component. */
+  /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLLegendElement>;
 }
 //#endregion