@coopdigital/react 1.22.2 → 1.22.4

package/dist/components/TextInput/TextInput.d.ts

@@ -2,40 +2,40 @@ import { StandardSizes } from "../../types/index.js";
 import { InputHTMLAttributes, JSX, Ref } from "react";
 //#region src/components/TextInput/TextInput.d.ts
 export interface TextInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "prefix" | "size" | "type"> {
-  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  /** Specify additional CSS classes. */
   className?: string;
-  /** **(Optional)** Specify whether the TextInput should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility. */
+  /** Specify the disabled state. */
   disabled?: boolean;
-  /** **(Optional)** Specify the TextInput error state. */
+  /** Specify the component error state. */
   error?: boolean;
-  /** **(Optional)** Specify the wrapper behaviour. When true, width is fit-content, otherwise it expands to 100%.
+  /** Specify the wrapper behaviour. When true, width is fit-content, otherwise it expands to 100%.
    *
    * Default: false
    */
   fit?: boolean;
-  /** **(Optional)** Specify the TextInput id. Will be auto-generated if not set. */
+  /** Specify the component id. Will be auto-generated if not set. */
   id?: string;
-  /** Specify the TextInput name. */
+  /** Specify the component name. */
   name: string;
-  /** **(Optional)** Specify the TextInput placeholder text. Do not use in place of a form label. */
+  /** Specify placeholder text. Do not use in place of a form label. */
   placeholder?: string;
-  /** **(Optional)** Specify the prefix. It can be any valid JSX or string. */
+  /** Specify the prefix. */
   prefix?: React.ReactNode;
-  /** **(Optional)** Specify whether the prefix should be rendered inside the input. */
+  /** Specify whether the prefix should be rendered inside the input. */
   prefixInline?: boolean;
-  /** **(Optional)** Specify a custom React ref for this component. */
+  /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLInputElement>;
-  /** **(Optional)** Specify the TextInput size. */
+  /** Specify the component size. */
   size?: StandardSizes;
-  /** **(Optional)** Specify the suffix. It can be any valid JSX or string. */
+  /** Specify the suffix. */
   suffix?: React.ReactNode;
-  /** **(Optional)** Specify whether the suffix should be rendered inside the input. */
+  /** Specify whether the suffix should be rendered inside the input. */
   suffixInline?: boolean;
-  /** **(Optional)** Specify the TextInput type. */
+  /** Specify the underlying input type. */
   type?: "text" | "email" | "number" | "password" | "search" | "tel" | "url" | "date" | "datetime-local" | "week" | "month" | "time";
 }
 declare const TextInput: {
-  ({ "aria-placeholder": ariaPlaceholder, className, disabled, error, fit, id, name, placeholder, prefix, prefixInline, ref, size, suffix, suffixInline, type, ...props }: TextInputProps): JSX.Element;
+  ({ className, disabled, error, fit, id, name, placeholder, prefix, prefixInline, ref, size, suffix, suffixInline, type, ...props }: TextInputProps): JSX.Element;
   slot: {
     field: boolean;
     name: string;

package/dist/components/TextInput/TextInput.js

@@ -3,10 +3,9 @@ import { useField } from "../Field/Field.context.js";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/TextInput/TextInput.tsx
-const TextInput = ({ "aria-placeholder": ariaPlaceholder, className, disabled, error = false, fit = false, id, name, placeholder, prefix, prefixInline = false, ref, size, suffix, suffixInline = false, type = "text", ...props }) => {
+const TextInput = ({ className, disabled, error = false, fit = false, id, name, placeholder, prefix, prefixInline = false, ref, size, suffix, suffixInline = false, type = "text", ...props }) => {
 	const field = useField();
 	const componentProps = {
-		"aria-placeholder": placeholder ?? ariaPlaceholder ?? void 0,
 		className: clsx("coop-text-input", className),
 		"data-error": error || void 0,
 		"data-fit": fit || void 0,

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

@@ -2,43 +2,47 @@ import { StandardSizes } from "../../types/index.js";
 import { JSX, Ref, TextareaHTMLAttributes } from "react";
 //#region src/components/Textarea/Textarea.d.ts
 export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
-  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  /** Specify additional CSS classes. */
   className?: string;
-  /** Specify the number of columns (characters per row) in the Textarea. Defaults to `30`. */
+  /** Specify the number of columns (characters per row) in the Textarea.
+   *
+   * Default: `30`.
+   */
   cols?: number;
-  /** **(Optional)** Specify whether to show the character counter underneath the Textarea. */
+  /** Specify whether to show the character counter underneath the Textarea. */
   counter?: boolean;
-  /** **(Optional)** Specify whether the Textarea should allow more characters than its `maxLength` value.
+  /** Specify whether the Textarea should allow more characters than its `maxLength` value.
    *
-   * Defaults to `false`, meaning users can enter more characters than the maximum but will be warned if they go over the limit.
+   * Default: `false`. Users can enter more characters than the maximum but will be warned if they go over the limit.
    */
   cutoff?: boolean;
-  /** **(Optional)** Specify whether the Textarea should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility.  */
+  /** Specify the disabled state.  */
   disabled?: boolean;
-  /** **(Optional)** Specify the Textarea error state */
+  /** Specify the component error state */
   error?: boolean;
-  /** **(Optional)** Specify the wrapper behaviour. When true, width is fit-content, otherwise it expands to 100%.
+  /** Specify the wrapper behaviour. When true, width is fit-content, otherwise it expands to 100%.
    *
-   * Default: false
+   * Default: `false`
    */
   fit?: boolean;
-  /** **(Optional)** Specify the Textarea id. Will be auto-generated if not set. */
+  /** Specify the component id. Will be auto-generated if not set. */
   id?: string;
-  /** **(Optional)** Specify the Textarea maxLength. This is the maximum number of characters users can enter. */
-  maxLength?: number;
-  /** Specify the Textarea name. */
+  /** Specify the component name. */
   name: string;
-  /** **(Optional)** Specify the Textarea placeholder text. Do not use in place of a form label. */
+  /** Specify placeholder text. Do not use in place of a form label. */
   placeholder?: string;
-  /** **(Optional)** Specify a custom React ref for this component. */
+  /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLTextAreaElement>;
-  /** **(Optional)** Specify the number of rows (lines of text) in the Textarea. Defaults to `4`. */
+  /** Specify the number of rows (lines of text) in the Textarea.
+   *
+   * Default: `4`.
+   */
   rows?: number;
-  /** **(Optional)** Specify the Textarea size. */
+  /** Specify the component size. */
   size?: StandardSizes;
 }
 declare const Textarea: {
-  ({ "aria-placeholder": ariaPlaceholder, className, cols, counter, cutoff, disabled, error, fit, id, maxLength, name, onChange: userOnChange, placeholder, ref, rows, size, ...props }: TextareaProps): JSX.Element;
+  ({ className, cols, counter, cutoff, disabled, error, fit, id, maxLength, name, onChange: userOnChange, placeholder, ref, rows, size, ...props }: TextareaProps): JSX.Element;
   slot: {
     field: boolean;
     name: string;

package/dist/components/Textarea/Textarea.js

@@ -9,10 +9,9 @@ const DEBOUNCE_DELAY = 750;
 const charCountMessage = (remaining) => {
 	return `You have ${Math.abs(remaining).toLocaleString()} ${Math.abs(remaining) === 1 ? "character" : "characters"} ${remaining < 0 ? "too many" : "remaining"}`;
 };
-const Textarea = ({ "aria-placeholder": ariaPlaceholder, className, cols = 30, counter = false, cutoff = false, disabled = false, error = false, fit = false, id, maxLength, name, onChange: userOnChange, placeholder, ref, rows = 4, size, ...props }) => {
+const Textarea = ({ className, cols = 30, counter = false, cutoff = false, disabled = false, error = false, fit = false, id, maxLength, name, onChange: userOnChange, placeholder, ref, rows = 4, size, ...props }) => {
 	const field = useField();
 	const componentProps = {
-		"aria-placeholder": placeholder ?? ariaPlaceholder ?? void 0,
 		className: clsx("coop-textarea", className),
 		cols,
 		"data-error": error ?? void 0,

package/dist/components/ValidationSummary/ValidationSummary.d.ts

@@ -1,38 +1,43 @@
 import React, { HTMLAttributes, JSX, ReactNode, Ref } from "react";
 //#region src/components/ValidationSummary/ValidationSummary.d.ts
 export interface ValidationSummaryProps extends HTMLAttributes<HTMLDivElement> {
-  /** **(Optional)** Specify if the summary should be focused and the parent form scrolled into view if there are errors.
+  /** Specify if the summary should be focused and the parent form scrolled into view if there are errors.
    *
-   * Default: true
+   * Default: `true`
    */
   autoScroll?: boolean;
-  /** **(Optional)** This should be a set of `ValidationSummary.Heading`, `ValidationSummary.Prompt` and `ValidationSummary.Errors` components. */
+  /** Content inside the component.
+   *
+   * This should be a set of `<ValidationSummary.Heading>`, `<ValidationSummary.Prompt>` and `<ValidationSummary.Errors>`. */
   children?: ReactNode;
-  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  /** Specify additional CSS classes. */
   className?: string;
-  /** **(Optional)** Specify if the summary should always render regardless of error state. Use this if you want to control the logic in your own code.
+  /** Specify if the summary should always render regardless of error state. Use this if you want to control the logic in your own code.
    *
-   * Default: false
+   * Default: `false`
    */
   forceMount?: boolean;
-  /** **(Optional)** Specify a custom React ref for this component. */
+  /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLDivElement>;
 }
 interface ValidationSummaryHeadingProps extends HTMLAttributes<HTMLDivElement> {
-  /** **(Optional)** Specify a custom element to use instead of `h2`. */
+  /** Specify a custom element for the component.
+   *
+   * Default: `<h2>`.
+   */
   as?: "h2" | "h3" | "h4" | "h5" | "h6";
-  /** **(Optional)** Content inside the Heading.
+  /** Content inside the component.
    *
-   * Defaults to `There's a problem`.
+   * Default: `There's a problem`.
    */
   children?: React.ReactNode;
-  /** **(Optional)** Specify additional CSS classes to be applied to the Heading. */
+  /** Specify additional CSS classes. */
   className?: string;
 }
 interface ValidationSummaryPromptProps extends HTMLAttributes<HTMLDivElement> {
-  /** **(Optional)** Content inside the Prompt.
+  /** Content inside the component.
    *
-   * Defaults to `Check the form. You must:`.
+   * Default: `Check the form. You must:`.
    */
   children?: React.ReactNode;
 }
@@ -45,7 +50,7 @@ interface FieldError {
   type?: string | number;
 }
 interface ValidationSummaryErrorsProps extends HTMLAttributes<HTMLDivElement> {
-  /** **(Optional)** Content inside the Errors. */
+  /** Specify the validation error array. Refer to the FieldError type for the shape.. */
   errors?: Record<string, FieldError>;
 }
 declare const ValidationSummary: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "1.22.2",
+  "version": "1.22.4",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -110,5 +110,5 @@
     "merge-refs": "^2.0.0",
     "react-day-picker": "^10.0.1"
   },
-  "gitHead": "2b2ef6224f2d46240d7ecc496680337e919d02dc"
+  "gitHead": "164ef51c388796f63366ab6103fab9e5bd068465"
 }

package/src/components/AlertBanner/AlertBanner.tsx

@@ -3,20 +3,22 @@ import type { HTMLAttributes, JSX, ReactNode, Ref } from "react"
 import clsx from "clsx"
 
 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
 }
 

package/src/components/Author/Author.tsx

@@ -5,19 +5,21 @@ import clsx from "clsx"
 import { Image, ImageProps } from "@/components/Image"
 
 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"
 }
 

package/src/components/Box/Box.tsx

@@ -5,18 +5,21 @@ import React from "react"
 
 import { StandardSizesWithNone } from "@/types"
 export interface BoxProps extends HTMLAttributes<HTMLDivElement> {
-  /** **(Optional)** Specify a custom element to override default `div` */
+  /** Specify a custom element for the component
+   *
+   * Default: `<div>`
+   */
   // oxlint-disable-next-line typescript/no-explicit-any
   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>
 }
 

package/src/components/Button/Button.tsx

@@ -9,30 +9,33 @@ import { LoadingSpinner } from "@/components/LoadingSpinner"
 import { hasUserBg } from "@/utils"
 
 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>`.
+   */
   // oxlint-disable-next-line typescript/no-explicit-any
   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"
 }
 

package/src/components/Card/Card.tsx

@@ -16,98 +16,103 @@ import { StandardSizes } from "@/types"
 import { hasUserBg } from "@/utils"
 
 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 CardBodyProps extends HTMLAttributes<HTMLDivElement> {
-//   /** **(Optional)** Content inside the Body. */
-//   children?: React.ReactNode
-// }
-
 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>`.
+   */
   // oxlint-disable-next-line typescript/no-explicit-any
   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
 }
 
 const componentSlots = {

package/src/components/Checkbox/Checkbox.tsx

@@ -10,19 +10,19 @@ 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
 }
 

package/src/components/DatePicker/DatePicker.tsx

@@ -58,50 +58,49 @@ 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.
    */