@coopdigital/react 1.22.2 → 1.22.4

package/src/components/Dialog/Dialog.tsx

@@ -31,44 +31,44 @@ const useDialog = () => {
 }
 
 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`
    */
@@ -76,20 +76,20 @@ export interface DialogProps extends Omit<DialogHTMLAttributes<HTMLDialogElement
 }
 
 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
 }
 

package/src/components/Expandable/Expandable.tsx

@@ -7,25 +7,27 @@ import { useSlots } from "@/hooks/useSlots"
 import { hasUserBg } from "@/utils"
 
 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
 }
 

package/src/components/Field/Field.tsx

@@ -14,19 +14,19 @@ import { getSlotProp } from "@/utils"
 import { FieldConfig, FieldContext } from "./Field.context"
 
 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>
 }
 

package/src/components/FieldMarkers/Error.tsx

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

package/src/components/FieldMarkers/Hint.tsx

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

package/src/components/FieldMarkers/Label.tsx

@@ -4,19 +4,21 @@ import { JSX, LabelHTMLAttributes, Ref } from "react"
 import { useField } from "@/components/Field/Field.context"
 
 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>
 }
 
 export const Label = ({
   children,
   className,
+  htmlFor,
+  id,
   isVisible = true,
   ref,
   ...props
@@ -24,7 +26,8 @@ export const Label = ({
   const field = useField()
   const componentProps = {
     className: clsx("coop-field-label", !isVisible && "sr-only", className),
-    htmlFor: props.htmlFor ?? (field?.id ? field.id + (field?.suffix ?? "") : undefined),
+    htmlFor: htmlFor ?? (field?.id ? field.id + (field?.suffix ?? "") : undefined),
+    id: id ?? (field?.id ? field.id + "_label" : undefined),
     ...props,
   }
   return (

package/src/components/FieldMarkers/Legend.tsx

@@ -2,13 +2,13 @@ import clsx from "clsx"
 import { HTMLAttributes, JSX, Ref } 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. */
+  /** 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>
 }
 

package/src/components/Fieldset/Fieldset.tsx

@@ -7,21 +7,21 @@ import { Legend as BaseLegend, type LegendProps } from "@/components/FieldMarker
 import { StandardSizes } from "@/types"
 
 export interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
-  /** Form elements inside the Fieldset.
+  /** Content inside the component.
    *
-   * 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. */
+   * This should be a set of `<Fieldset.Legend>`, `<Fieldset.Hint>`, `<Fieldset.Error>` and `<Fieldset.Fields>`. */
+  children?: React.ReactNode
+  /** Specify additional CSS classes. */
   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. */
+  /** Specify the disabled state. Applies to all descendants. */
   disabled?: boolean
-  /** **(Optional)** Specify the Fieldset error state. Use this to apply visual styling to the field control. */
+  /** Specify the component error state. */
   error?: boolean
-  /** **(Optional)** Specify whether the Fieldset should show the left-hand error bar if it is in an error state. */
+  /** Specify whether the Fieldset 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<HTMLFieldSetElement>
-  /** **(Optional)** Specify the size of the Fieldset and all its descendents. */
+  /** Specify the size of the component. Applies to all descendants. */
   size?: StandardSizes
 }
 const Fieldset = ({
@@ -52,13 +52,13 @@ const Fieldset = ({
 }
 
 interface FieldsetFieldsProps extends HTMLAttributes<HTMLDivElement> {
-  /** **(Optional)** Specify whether all descendent Fields should render inside a box. */
+  /** Specify whether all descendant 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. */
+  /** Content inside the component. */
+  children?: React.ReactNode
+  /** Specify additional CSS classes. */
   className?: string
-  /** **(Optional)** Specify the CheckboxGroup orientation. */
+  /** Specify the component orientation. */
   orientation?: "horizontal" | "vertical"
 }
 

package/src/components/Flourish/Flourish.tsx

@@ -5,13 +5,13 @@ import clsx from "clsx"
 import { Black, BrandBlue, Darks, Lights, OfferRed, Tints, White } from "@/types/colors"
 
 export interface FlourishProps extends SVGProps<SVGSVGElement> {
-  /** Specify the text to be highlighted by the Flourish. */
-  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 Flourish color. */
+  /** Specify the Flourish color. */
   fill?: Darks | Lights | Tints | OfferRed | BrandBlue | White | Black
-  /** **(Optional)** Specify a custom React ref for this component. */
+  /** Specify a custom React ref for this component. */
   ref?: Ref<SVGSVGElement>
 }
 

package/src/components/Form/Form.tsx

@@ -3,11 +3,11 @@ import type { FormHTMLAttributes, JSX, ReactNode, Ref } from "react"
 import clsx from "clsx"
 
 export interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
-  /** **(Optional)** Main content inside the form. This will usually be a collection of Field, Fieldset and Button components. */
-  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<HTMLFormElement>
 }
 

package/src/components/Image/Image.tsx

@@ -1,16 +1,12 @@
 import type { ImgHTMLAttributes, JSX, Ref } from "react"
 
 export interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
-  /** Specify text to describe the image. Refer to Experience Library guidelines on writing good alt text. */
+  /** Specify text to describe the Image. */
   alt: string
-  /** **(Optional)** Specify the height of the image. */
-  height?: string
-  /** **(Optional)** Specify a custom React ref for this component. */
+  /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLImageElement>
-  /** Specify the Image source URL. */
+  /** Specify the source URL. */
   src: string
-  /** **(Optional)** Specify the width of the image. */
-  width?: string
 }
 
 const getContentfulParams = ({
@@ -18,10 +14,13 @@ const getContentfulParams = ({
   src,
   width,
 }: {
-  height?: string
+  height?: string | number
   src: string
-  width: string
+  width: string | number
 }) => {
+  width = width.toString()
+  height = height ? height?.toString() : undefined
+
   const url = !src.startsWith("http") ? new URL("https://" + src) : new URL(src)
   const params = [
     ["fm", "webp"],

package/src/components/LoadingSpinner/LoadingSpinner.tsx

@@ -5,14 +5,10 @@ import clsx from "clsx"
 import { LoadingIcon } from "@/components/icons"
 
 export interface LoadingSpinnerProps extends SVGProps<SVGSVGElement> {
-  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  /** 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<SVGSVGElement>
-  /** **(Optional)** Specify LoadingSpinner stroke. */
-  stroke?: string
-  /** **(Optional)** Specify LoadingSpinner stroke width. */
-  strokeWidth?: string
 }
 
 export const LoadingSpinner = ({

package/src/components/Logo/Logo.tsx

@@ -2,18 +2,17 @@ import type { JSX, SVGProps } from "react"
 
 import clsx from "clsx"
 export interface LogoProps extends SVGProps<SVGSVGElement> {
-  /** **(Optional)** Specify the Logo alternative text. */
+  /** Specify alternative text for the Logo.
+   *
+   * Default: `Co-op`.
+   */
   alt?: string
-  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  /** Specify additional CSS classes. */
   className?: string
-  /** **(Optional)** Specify the Logo fill color.
+  /** Specify the fill color.
    *
    * Default: brand-blue. */
   fill?: "white" | "black" | "brand-blue"
-  /** **(Optional)** Specify the Logo height. */
-  height?: number
-  /** **(Optional)** Specify the Logo width. */
-  width?: number
 }
 
 export const Logo = ({

package/src/components/PasswordInput/PasswordInput.tsx

@@ -12,9 +12,9 @@ export interface PasswordInputProps extends Omit<
   "prefix" | "prefixInline" | "suffix" | "suffixInline" | "type"
 > {
   /**
-   * **(Optional)** Specify if the show/hide toggle button should be shown.
+   * Specify if the show/hide toggle button should be shown.
    *
-   * Default: false
+   * Default: `false`.
    */
   showToggle?: boolean
 }
@@ -22,6 +22,7 @@ export interface PasswordInputProps extends Omit<
 const PasswordInput = ({
   disabled,
   id,
+  ref,
   showToggle = false,
   size,
   ...props
@@ -41,7 +42,7 @@ const PasswordInput = ({
       autoCapitalize="none"
       disabled={disabled}
       id={inputId}
-      ref={props.ref}
+      ref={ref}
       size={size}
       spellCheck="false"
       type={isVisible ? "text" : "password"}

package/src/components/Picture/Picture.tsx

@@ -3,13 +3,15 @@ import type { HTMLAttributes, JSX, ReactNode, Ref } from "react"
 import clsx from "clsx"
 
 export interface PictureProps extends HTMLAttributes<HTMLPictureElement> {
-  /** **(Optional)** Content inside the component. */
-  children?: string | ReactNode
-  /** **(Optional)** Specify additional CSS classes. */
+  /** Content inside the component.
+   *
+   * Usually this should be an `<Image>`. */
+  children?: ReactNode
+  /** Specify additional CSS classes. */
   className?: string
-  /** **(Optional)** Specify the image crop mode. */
+  /** Specify the crop mode. */
   crop?: "square" | "wide" | "thin" | "squircle" | "none"
-  /** **(Optional)** Specify a custom React ref for this component. */
+  /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLPictureElement>
 }
 

package/src/components/Pill/Pill.tsx

@@ -8,25 +8,30 @@ import { StandardSizes } from "@/types"
 import { hasUserBg } from "@/utils"
 
 export interface PillProps extends HTMLAttributes<HTMLAnchorElement> {
-  /** **(Optional)** Specify a custom element to override default `a` or `span`. */
+  /** Specify a custom element for the component.
+   *
+   * Default: `<span>` 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.
+   *
+   * This can be any valid JSX including an optional `<Pill.Badge>`. */
   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 Pill component will link to when clicked. */
+  /** Specify the target URL. */
   href?: string
-  /** **(Optional)** Specify a custom React ref for this component. */
+  /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLElement>
-  /** **(Optional)** Specify the Pill size. */
+  /** Specify the component size. */
   size?: StandardSizes
 }
 
 interface PillBadgeProps extends HTMLAttributes<HTMLSpanElement> {
-  /** **(Optional)** Content inside the Badge. */
+  /** Content inside the component. */
   children?: React.ReactNode
-  /** **(Optional)** Specify additional CSS classes to be applied to the Badge. */
+  /** Specify additional CSS classes. */
   className?: string
 }
 

package/src/components/Popover/Popover.tsx

@@ -14,59 +14,62 @@ import { useSlots } from "@/hooks/useSlots"
 import { bgClassToColor, hasUserBg } from "@/utils"
 
 export interface PopoverProps extends RadixPopoverProps {
-  /** Content inside the Popover.
+  /** Content inside the component.
    *
-   * This should be a `Popover.Trigger` and `Popover.Content`, with an optional `Popover.Close`. Other children will be ignored. */
-  children: string | ReactNode
-  /** **(Optional)** Callback to run when the Popover is opened or closed. */
+   * This should be a set of `<Popover.Trigger>` and `<Popover.Content>`. */
+  children?: ReactNode
+  /** Callback to run when the Popover is opened or closed. */
   onOpenChange?: RadixPopoverProps["onOpenChange"]
-  /** **(Optional)** Force the Popover state. Must be used together with `onOpenChange`. */
+  /** Force the Popover state. Must be used together with `onOpenChange`. */
   open?: RadixPopoverProps["open"]
 }
 
 interface PopoverTriggerProps extends RadixPopoverTriggerProps {
-  /** **(Optional)** When true, the element passed as a child becomes the trigger root element. */
+  /** When true, the element passed as a child becomes the root element. */
   asChild?: RadixPopoverTriggerProps["asChild"]
-  /** **(Optional)** Content inside the Popover Trigger. */
+  /** Content inside the component. */
   children?: React.ReactNode
-  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  /** Specify additional CSS classes. */
   className?: string
 }
 
 interface PopoverContentProps extends RadixPopoverContentProps {
-  /** **(Optional)** Specify horizontal alignment of the Popover against the trigger. May change when collisions occur. */
+  /** Specify horizontal alignment of the Popover against the trigger. May change when collisions occur. */
   align?: RadixPopoverContentProps["align"]
-  /** **(Optional)** Specify pixel offset from the "start" or "end" alignment. */
+  /** Specify pixel offset from the "start" or "end" alignment. */
   alignOffset?: RadixPopoverContentProps["alignOffset"]
-  /** **(Optional)** Specify whether the Popover should reposition itself if it falls out of the viewport. */
+  /** Specify whether the Popover should reposition itself if it falls out of the viewport. */
   avoidCollisions?: RadixPopoverContentProps["avoidCollisions"]
-  /** **(Optional)** Content inside the Popover window. */
+  /** Content inside the component.
+   *
+   * This can be any valid JSX including an optional `<Popover.Close>`.
+   */
   children?: React.ReactNode
-  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  /** Specify additional CSS classes. */
   className?: string
-  /** **(Optional)** Specify pixel boundary for collision safe area. */
+  /** Specify pixel boundary for collision safe area. */
   collisionPadding?: RadixPopoverContentProps["collisionPadding"]
-  /** **(Optional)** Specify a custom React ref for this component. */
+  /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLDivElement>
-  /** **(Optional)** Specify placement of the Popover against the trigger. Will change when collisions occur. */
+  /** Specify placement of the Popover against the trigger. Will change when collisions occur. */
   side?: RadixPopoverContentProps["side"]
-  /** **(Optional)** Specify pixel offset from the trigger element. */
+  /** Specify pixel offset from the trigger element. */
   sideOffset?: RadixPopoverContentProps["sideOffset"]
 }
 
 interface PopoverCloseProps extends RadixPopoverCloseProps {
-  /** **(Optional)** When true, the element passed as a child becomes the close button root element. */
+  /** When true, the element passed as a child becomes the root element. */
   asChild?: RadixPopoverCloseProps["asChild"]
-  /** **(Optional)** Content inside the Popover Close element. */
+  /** Content inside the component. */
   children?: React.ReactNode
-  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  /** Specify additional CSS classes. */
   className?: string
 }
 
 interface PopoverAnchorProps extends RadixPopoverAnchorProps {
-  /** **(Optional)** When true, the element passed as a child becomes the anchor root element. */
+  /** When true, the element passed as a child becomes the root element. */
   asChild?: RadixPopoverAnchorProps["asChild"]
-  /** **(Optional)** Content inside the Popover Anchor element. */
+  /** Content inside the component. */
   children?: React.ReactNode
 }
 

package/src/components/Prose/Prose.tsx

@@ -5,22 +5,22 @@ import clsx from "clsx"
 import { StandardSizes } from "@/types"
 
 export interface ProseProps extends HTMLAttributes<HTMLDivElement> {
-  /** **(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 if the Prose container should stretch to 100% width.
+  /** Specify if the container should stretch to 100% width.
    *
    * If this not set, the container will be 100% width up to a maximum of 864px / 54rem */
   full?: boolean
-  /** **(Optional)** Specify a custom React ref for this component. */
+  /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLDivElement>
-  /** **(Optional)** Specify font size behaviour. When set to `lg`, body copy will increase to 20px on larger screens.
+  /** Specify font size behaviour. When set to `lg`, body copy will increase to 20px on larger screens.
    *
    * Default: `md`
    */
   size?: "md" | "lg"
-  /** **(Optional)** Specify the Prose spacing.
+  /** Specify the spacing.
    *
    * Default: `md`
    */