@cerberus-design/react 0.9.2 → 0.10.0-next-b1f50f5

package/build/legacy/_tsup-dts-rollup.d.cts

@@ -54,7 +54,7 @@ import { DroppableContainer } from '@dnd-kit/core';
 import { DroppableContainers } from '@dnd-kit/core';
 import { DroppableMeasuring } from '@dnd-kit/core';
 import { ElementType } from 'react';
-import { fieldMessage } from '@cerberus/styled-system/recipes';
+import { FieldMessageVariantProps } from '@cerberus/styled-system/recipes';
 import { FileStatusVariantProps } from '@cerberus/styled-system/recipes';
 import { ForwardRefExoticComponent } from 'react';
 import { getClientRect } from '@dnd-kit/core';
@@ -62,9 +62,9 @@ import { getFirstCollision } from '@dnd-kit/core';
 import { getScrollableAncestors } from '@dnd-kit/core';
 import { HTMLAttributes } from 'react';
 import { HtmlHTMLAttributes } from 'react';
-import { iconButton } from '@cerberus/styled-system/recipes';
-import { input } from '@cerberus/styled-system/recipes';
+import { IconButtonVariantProps } from '@cerberus/styled-system/recipes';
 import { InputHTMLAttributes } from 'react';
+import { InputVariantProps } from '@cerberus/styled-system/recipes';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { KeyboardCode } from '@dnd-kit/core';
 import { KeyboardCodes } from '@dnd-kit/core';
@@ -73,7 +73,7 @@ import type { KeyboardEventHandler } from 'react';
 import { KeyboardSensor } from '@dnd-kit/core';
 import { KeyboardSensorOptions } from '@dnd-kit/core';
 import { KeyboardSensorProps } from '@dnd-kit/core';
-import { label } from '@cerberus/styled-system/recipes';
+import { LabelVariantProps } from '@cerberus/styled-system/recipes';
 import { MeasuringConfiguration } from '@dnd-kit/core';
 import { MeasuringFrequency } from '@dnd-kit/core';
 import { MeasuringStrategy } from '@dnd-kit/core';
@@ -98,8 +98,7 @@ import { PropsWithChildren } from 'react';
 import { radio } from '@cerberus/styled-system/recipes';
 import { ReactNode } from 'react';
 import { ReactPortal } from 'react';
-import { RecipeVariantProps } from '@cerberus/styled-system/css';
-import type { RecipeVariantProps as RecipeVariantProps_2 } from '@cerberus/styled-system/types';
+import type { RecipeVariantProps } from '@cerberus/styled-system/types';
 import { rectIntersection } from '@dnd-kit/core';
 import { RefAttributes } from 'react';
 import { RefObject } from 'react';
@@ -118,7 +117,7 @@ import { Sensors } from '@dnd-kit/core';
 import type { SVGProps } from 'react';
 import type { TableHTMLAttributes } from 'react';
 import { TabsVariantProps } from '@cerberus/styled-system/recipes';
-import { tag } from '@cerberus/styled-system/recipes';
+import { TagVariantProps } from '@cerberus/styled-system/recipes';
 import { TbodyVariantProps } from '@cerberus/styled-system/recipes';
 import { TdVariantProps } from '@cerberus/styled-system/recipes';
 import type { TextareaHTMLAttributes } from 'react';
@@ -159,7 +158,7 @@ export { AutoScrollOptions }
 
 /**
  * The Avatar component is used to represent a user or entity. It will show an image if src provided, otherwise it will show the ariaLabel of the ariaLabel. If the ariaLabel is empty, it will show a `defineIcons().avatar` icon.
- * @definition [Avatar docs](https://cerberus.digitalu.design/react/avatar)
+ * @see https://cerberus.digitalu.design/react/avatar
  * @example
  * ```tsx
  * <Avatar
@@ -173,16 +172,34 @@ export { Avatar }
 export { Avatar as Avatar_alias_1 }
 
 declare type AvatarAsProps = SharedAvatarProps & {
+    /**
+     * An optional element to replace the image. Recommended for Next.js Image component.
+     */
     as: ReactNode;
+    /**
+     * The aria-label for the avatar needed for accessibility.
+     */
     ariaLabel?: never;
+    /**
+     * The source of the image.
+     */
     src?: never;
 };
 export { AvatarAsProps }
 export { AvatarAsProps as AvatarAsProps_alias_1 }
 
 declare type AvatarImageProps = HtmlHTMLAttributes<HTMLImageElement> & SharedAvatarProps & {
+    /**
+     * The aria-label for the avatar needed for accessibility.
+     */
     ariaLabel: string;
+    /**
+     * An optional element to replace the image. Recommended for Next.js Image component.
+     */
     as?: never;
+    /**
+     * The source of the image.
+     */
     src: string;
 };
 export { AvatarImageProps }
@@ -192,11 +209,19 @@ declare type AvatarProps = (HtmlHTMLAttributes<HTMLDivElement> & AvatarVariantPr
 export { AvatarProps }
 export { AvatarProps as AvatarProps_alias_1 }
 
+/**
+ * This module exports the NotificationDescription component.
+ * @module
+ */
 declare interface BaseNotificationDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {
 }
 export { BaseNotificationDescriptionProps }
 export { BaseNotificationDescriptionProps as BaseNotificationDescriptionProps_alias_1 }
 
+/**
+ * This module exports the NotificationHeading component.
+ * @module
+ */
 declare interface BaseNotificationHeadingProps extends HTMLAttributes<HTMLParagraphElement> {
 }
 export { BaseNotificationHeadingProps }
@@ -204,7 +229,7 @@ export { BaseNotificationHeadingProps as BaseNotificationHeadingProps_alias_1 }
 
 /**
  * A component that allows the user to perform actions
- * @description https://github.com/omnifed/cerberus/blob/main/packages/react/src/components/Button.tsx
+ * @see https://cerberus.digitalu.design/react/button
  */
 declare function Button(props: ButtonProps): JSX.Element;
 export { Button }
@@ -224,7 +249,7 @@ export { CancelDrop }
  * Checkbox component
  * @definition [ARIA Target Size](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html#:~:text=Understanding%20SC%202.5.,%3ATarget%20Size%20(Level%20AAA)&text=The%20size%20of%20the%20target,Equivalent)
  * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)
- * @definition [Checkbox docs](https://cerberus.digitalu.design/react/checkbox)
+ * @see https://cerberus.digitalu.design/react/checkbox
  * @example
  * ```tsx
  * <Field>
@@ -248,8 +273,18 @@ declare interface CheckboxIconProps extends SVGProps<SVGSVGElement> {
  * @module
  */
 declare type CheckboxProps = CheckboxVariantProps & Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'id'> & {
+    /**
+     * The id of the FieldMessage element describing the Checkbox.
+     */
     describedBy?: string;
+    /**
+     * The unique identifier for the checkbox. Required for accessibility.
+     */
     id: string;
+    /**
+     * Used to display a mixed checked state.
+     * @description [ARIA Mixed State](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/examples/checkbox-mixed/)
+     */
     mixed?: boolean;
 };
 export { CheckboxProps }
@@ -260,11 +295,69 @@ export { CheckboxProps as CheckboxProps_alias_1 }
  */
 export declare function CheckmarkIcon(props: CheckboxIconProps): JSX_2.Element;
 
+/**
+ * The CircularProgress component is used to display a loading indicator.
+ * @param props - SVG element attributes
+ * @param props.now - The current value of the CircularProgress
+ * @param props.title - The title of the CircularProgress for a11y
+ * @param props.label - What is shown below the now value (default: 'Done')
+ * @see https://cerberus.digitalu.design/react/progress-indicators
+ * @example
+ * ```tsx
+ * <CircularProgress now={24} title="Course completion" label="done" />
+ * ```
+ */
+declare function CircularProgress(props: CircularProgressProps): JSX_2.Element;
+export { CircularProgress }
+export { CircularProgress as CircularProgress_alias_1 }
+
+/**
+ * This module contains the CircularProgress component.
+ * @module
+ */
+declare interface CircularProgressProps extends SVGProps<SVGSVGElement> {
+    /**
+     * The current value of the CircularProgress
+     */
+    now: number;
+    /**
+     * The title of the CircularProgress for a11y
+     */
+    title: string;
+    /**
+     * What is shown below the now value (default: 'Done')
+     */
+    label?: string;
+}
+export { CircularProgressProps }
+export { CircularProgressProps as CircularProgressProps_alias_1 }
+
 declare type ClickableTagProps = HTMLAttributes<HTMLSpanElement> & {
+    /**
+     * The gradient to apply to the tag. Not available when the onClick prop is
+     * provided.
+     */
     gradient?: never;
+    /**
+     * The palette to use for the tag. Not available when the onClick prop is
+     * provided.
+     */
     palette?: never;
+    /**
+     * The action to be performed when the tag is clicked.
+     */
     onClick: () => void;
+    /**
+     * The shape of the tag. Not available when the onClick prop is provided.
+     * @type 'pill' | 'rounded'
+     * @default 'pill'
+     */
     shape: 'pill';
+    /**
+     * The usage of the tag. Not available when the onClick prop is provided.
+     * @type 'filled' | 'outlined'
+     * @default 'filled'
+     */
     usage: 'filled';
 };
 export { ClickableTagProps }
@@ -282,12 +375,13 @@ export { CollisionDescriptor }
 
 export { CollisionDetection }
 
-declare type ColorModes = 'light' | 'dark';
+declare type ColorModes = 'light' | 'dark' | 'system';
 export { ColorModes }
 export { ColorModes as ColorModes_alias_1 }
 
 /**
  * Provides a confirm modal to the app.
+ * @see https://cerberus.digitalu.design/react/confirm-modal
  * @example
  * ```tsx
  * // Wrap the Provider around the root of the feature.
@@ -349,7 +443,11 @@ export declare const defaultIcons: DefinedIcons;
 
 export { defaultScreenReaderInstructions }
 
-declare type DefaultThemes = 'cerberus';
+/**
+ * This module provides a context and hook for the theme.
+ * @module Theme
+ */
+declare type DefaultThemes = 'cerberus' | 'acheron';
 export { DefaultThemes }
 export { DefaultThemes as DefaultThemes_alias_1 }
 
@@ -421,6 +519,16 @@ export { DropAnimationKeyframeResolver }
 
 export { DropAnimationSideEffects }
 
+/**
+ * A Cerberus component is used to define a drop target for draggable elements.
+ * @see https://dndkit.com/
+ * @example
+ * ```tsx
+ * <Droppable id="dropzone">
+ *   <Draggable id="draggable">Drag me</Draggable>
+ * </Droppable>
+ * ```
+ */
 declare function Droppable(props: PropsWithChildren<DroppableProps>): JSX_2.Element;
 export { Droppable }
 export { Droppable as Droppable_alias_1 }
@@ -432,16 +540,26 @@ export { DroppableContainers }
 export { DroppableMeasuring }
 
 declare interface DroppableProps extends Omit<HtmlHTMLAttributes<HTMLDivElement>, 'id'>, UseDroppableArguments {
+    /**
+     * If the item has been dropped.
+     */
     dropped?: boolean;
 }
 export { DroppableProps }
 export { DroppableProps as DroppableProps_alias_1 }
 
+/**
+ * A component that allows you to show or hide content based on a feature flag.
+ * @see https://cerberus.digitalu.design/react/feature-flags
+ */
 declare function FeatureFlag(props: PropsWithChildren<FeatureFlagProps>): JSX_2.Element;
 export { FeatureFlag }
 export { FeatureFlag as FeatureFlag_alias_1 }
 
 declare interface FeatureFlagProps {
+    /**
+     * The name of the feature flag to check.
+     */
     flag: string;
 }
 export { FeatureFlagProps }
@@ -455,7 +573,7 @@ export { FeatureFlagProviderProps as FeatureFlagProviderProps_alias_1 }
 
 /**
  * Provides feature flags to the application.
- * @param flags - The flags data for the provider.
+ * @see https://cerberus.digitalu.design/react/feature-flags
  * @example
  * ```tsx
  * // This should be a JSON file or a server response.
@@ -489,14 +607,35 @@ declare interface FeatureFlagValue {
 export { FeatureFlagValue }
 export { FeatureFlagValue as FeatureFlagValue_alias_1 }
 
+/**
+ * Provides the field state for a all related components used within a group.
+ * @see https://cerberus.digitalu.design/react/input
+ */
 declare function Field(props: PropsWithChildren<FieldContextValue>): JSX.Element;
 export { Field }
 export { Field as Field_alias_1 }
 
+/**
+ * This module provides a context and hook for the field.
+ * @module Field
+ */
 declare interface FieldContextValue {
+    /**
+     * Whether the field is disabled.
+     * @description [Moz Input Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)
+     */
     disabled?: boolean;
+    /**
+     * Whether the field is read-only.
+     */
     readOnly?: boolean;
+    /**
+     * Whether the field is required.
+     */
     required?: boolean;
+    /**
+     * Whether the field is invalid.
+     */
     invalid?: boolean;
 }
 export { FieldContextValue }
@@ -504,7 +643,7 @@ export { FieldContextValue as FieldContextValue_alias_1 }
 
 /**
  * A component that provides feedback about the field.
- * @description [FieldMessage Docs](https://cerberus.digitalu.design/react/field-message)
+ * @see https://cerberus.digitalu.design/react/field-message
  * @example
  * ```tsx
  * <Field>
@@ -520,41 +659,58 @@ declare function FieldMessage(props: FieldMessageProps): JSX_2.Element;
 export { FieldMessage }
 export { FieldMessage as FieldMessage_alias_1 }
 
+/**
+ * This module contains the FieldMessage component.
+ * @module
+ */
 declare interface FieldMessageBaseProps extends HTMLAttributes<HTMLParagraphElement> {
+    /**
+     * The id of the FieldMessage element describing the field. Required for accessibility. It is considered best practice to use the `help` or `error` prefix to help screen readers identify the type of message.
+     *
+     * @example For help messages: `help:field_id`
+     * @example For error messages: `error:field_id`
+     */
     id: string;
 }
 export { FieldMessageBaseProps }
 export { FieldMessageBaseProps as FieldMessageBaseProps_alias_1 }
 
-declare type FieldMessageProps = FieldMessageBaseProps & FieldMessageRecipe;
+declare type FieldMessageProps = FieldMessageBaseProps & FieldMessageVariantProps;
 export { FieldMessageProps }
 export { FieldMessageProps as FieldMessageProps_alias_1 }
 
-/**
- * This module contains the FieldMessage component.
- * @module
- */
-declare type FieldMessageRecipe = RecipeVariantProps<typeof fieldMessage>;
-export { FieldMessageRecipe }
-export { FieldMessageRecipe as FieldMessageRecipe_alias_1 }
-
 declare interface FileBaseStatusProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> {
+    /**
+     * The name of the file.
+     */
     file: string;
-    now: number;
+    /**
+     * The percentage of the file that has been processed.
+     */
+    now: ProgressBarProps['now'];
+    /**
+     * The status of the file.
+     */
     status: processStatus;
+    /**
+     * The action to perform on the file when a user clicks the
+     * button located at the end of the status card.
+     * @param status - The status of the file.
+     * @param e - The event object.
+     * @example
+     * ```tsx
+     * <FileStatus file="file.txt" now={0} status={processStatus.TODO} action={(status, e) => console.log(status, e)} />
+     * ```
+     * @default () => {}
+     */
     onClick: (status: FileStatusActions, e: MouseEvent_2<HTMLButtonElement>) => void;
 }
 export { FileBaseStatusProps }
 export { FileBaseStatusProps as FileBaseStatusProps_alias_1 }
 
 /**
- * This component displays the status of a file.
- * @param props - {
- *  file: string,
- *  now: number,
- *  status: keyof typeof fileStatus,
- *  action: (status: FileStatusActions, e: MouseEvent<HTMLButtonElement>) => void
- * }.
+ * A component that displays the status of a file during file processing.
+ * @see https://cerberus.digitalu.design/react/file-uploader
  * @example
  * ```tsx
  * <FileStatus file="file.txt" now={0} status={processStatus.TODO} action={(status, e) => console.log(status, e)} />
@@ -564,6 +720,9 @@ declare function FileStatus(props: FileStatusProps): JSX_2.Element;
 export { FileStatus }
 export { FileStatus as FileStatus_alias_1 }
 
+/**
+ * The actions that can be performed on a file.
+ */
 declare type FileStatusActions = 'cancel' | 'retry' | 'delete';
 export { FileStatusActions }
 export { FileStatusActions as FileStatusActions_alias_1 }
@@ -572,6 +731,14 @@ export { FileStatusActions as FileStatusActions_alias_1 }
  * This module contains the FileStatus component.
  * @module
  */
+/**
+ * The available values of the fileStatus helper Object.
+ * @example
+ * ```tsx
+ * import { fileStatus } from '@cerberus/react'
+ * processStatus.TODO // 'todo'
+ * ```
+ */
 declare type FileStatusKey = (typeof processStatus)[keyof typeof processStatus];
 export { FileStatusKey }
 export { FileStatusKey as FileStatusKey_alias_1 }
@@ -580,12 +747,22 @@ declare type FileStatusProps = FileBaseStatusProps & FileStatusVariantProps;
 export { FileStatusProps }
 export { FileStatusProps as FileStatusProps_alias_1 }
 
+/**
+ * A component that allows the user to upload files.
+ * @see https://cerberus.digitalu.design/react/file-uploader
+ */
 declare function FileUploader(props: FileUploaderProps): JSX_2.Element;
 export { FileUploader }
 export { FileUploader as FileUploader_alias_1 }
 
 declare interface FileUploaderProps extends InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * The optional heading to display in the FileUploader component.
+     */
     heading?: string;
+    /**
+     * The name of the file input element.
+     */
     name: string;
 }
 export { FileUploaderProps }
@@ -595,14 +772,35 @@ export { getClientRect }
 
 export { getFirstCollision }
 
+/**
+ * Returns the position of the NavMenuList based on the position prop.
+ * @param position - The position of the NavMenuList.
+ * @returns The position of the NavMenuList.
+ */
 declare function getPosition(position: Positions): GetPositionResult;
 export { getPosition }
 export { getPosition as getPosition_alias_1 }
 
+/**
+ * This module contains the NavMenuList component.
+ * @module
+ */
 declare interface GetPositionResult {
+    /**
+     * The left position of the element.
+     */
     left: string;
+    /**
+     * The right position of the element.
+     */
     right: string;
+    /**
+     * The top position of the element.
+     */
     top: string;
+    /**
+     * The bottom position of the element.
+     */
     bottom: string;
 }
 
@@ -610,13 +808,13 @@ export { getScrollableAncestors }
 
 /**
  * A component that allows the user to perform actions using an icon
- * @description https://github.com/omnifed/cerberus/blob/main/packages/react/src/components/IconButton.tsx
+ * @see https://cerberus.digitalu.design/react/icon-button
  */
 declare function IconButton(props: IconButtonProps): JSX.Element;
 export { IconButton }
 export { IconButton as IconButton_alias_1 }
 
-declare type IconButtonProps = IconButtonRawProps & IconButtonRecipeProps;
+declare type IconButtonProps = IconButtonRawProps & IconButtonVariantProps;
 export { IconButtonProps }
 export { IconButtonProps as IconButtonProps_alias_1 }
 
@@ -625,16 +823,20 @@ export { IconButtonProps as IconButtonProps_alias_1 }
  * @module
  */
 declare interface IconButtonRawProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * The aria-label attribute for the icon button.
+     */
     ariaLabel: string;
+    /**
+     * The position of the tooltip relative to the icon button.
+     * @example 'top' | 'right' | 'bottom' | 'left'
+     * @default 'top'
+     */
     tooltipPosition?: Positions;
 }
 export { IconButtonRawProps }
 export { IconButtonRawProps as IconButtonRawProps_alias_1 }
 
-declare type IconButtonRecipeProps = RecipeVariantProps<typeof iconButton>;
-export { IconButtonRecipeProps }
-export { IconButtonRecipeProps as IconButtonRecipeProps_alias_1 }
-
 export declare type IconType = CarbonIconType | ElementType;
 
 /**
@@ -646,33 +848,53 @@ declare interface IndeterminateIconProps extends SVGProps<SVGSVGElement> {
 }
 
 declare type IndeterminateProgressBarProps = {
-    indeterminate: true;
+    /**
+     * The state of the progress bar.
+     */
+    indeterminate?: true;
+    /**
+     * The current value of the progress bar.
+     */
     now?: never;
 };
 export { IndeterminateProgressBarProps }
 export { IndeterminateProgressBarProps as IndeterminateProgressBarProps_alias_1 }
 
+/**
+ * A component that allows the user to input text. Must be wrapped in a Field
+ * component to keep track of the state for entire group of elements related to
+ * the field.
+ * @see https://cerberus.digitalu.design/react/input
+ */
 declare function Input(props: InputProps): JSX_2.Element;
 export { Input }
 export { Input as Input_alias_1 }
 
 declare interface InputBaseProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'size'> {
+    /**
+     * The id of the FieldMessage component used to describe the input. Required for accessibility.
+     */
     describedBy?: string;
+    /**
+     * The unique identifier for the input element. Required for accessibility.
+     */
     id: string;
+    /**
+     * An optional icon to display at the start of the input.
+     */
     startIcon?: ReactNode;
+    /**
+     * An optional icon to display at the end of the input.
+     */
     endIcon?: ReactNode;
 }
 export { InputBaseProps }
 export { InputBaseProps as InputBaseProps_alias_1 }
 
-declare type InputProps = InputBaseProps & InputRecipeProps;
+declare type InputProps = InputBaseProps & InputVariantProps;
 export { InputProps }
 export { InputProps as InputProps_alias_1 }
 
-declare type InputRecipeProps = RecipeVariantProps<typeof input>;
-export { InputRecipeProps }
-export { InputRecipeProps as InputRecipeProps_alias_1 }
-
 export { KeyboardCode }
 
 export { KeyboardCodes }
@@ -686,13 +908,14 @@ export { KeyboardSensorOptions }
 export { KeyboardSensorProps }
 
 /**
- * A screen ready friendly label component.
+ * A a11y compliant label component.
  * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)
- * @definition [Label docs](https://cerberus.digitalu.design/react/label)
+ * @see https://cerberus.digitalu.design/react/label
  * @example
  * ```tsx
  * <Field required>
- *   <Label htmlFor="test">Test Label</Label>
+ *   <Label htmlFor="search" hidden>Search everything</Label>
+ *   <Input id="search" startIcon={Search} type="text" />
  * </Field>
  * ```
  */
@@ -700,25 +923,27 @@ declare function Label(props: PropsWithChildren<LabelProps>): JSX_2.Element;
 export { Label }
 export { Label as Label_alias_1 }
 
+/**
+ * This module contains the Label component.
+ * @module
+ */
 declare interface LabelBaseProps extends HTMLAttributes<HTMLLabelElement> {
+    /**
+     * The unique identifier for the input element. Required for accessibility.
+     */
     htmlFor: string;
+    /**
+     * Used to hide the label from the UI while keeping it accessible to screen readers. Typically used for global search inputs that have no visible label.
+     */
     hidden?: boolean;
 }
 export { LabelBaseProps }
 export { LabelBaseProps as LabelBaseProps_alias_1 }
 
-declare type LabelProps = LabelBaseProps & LabelRecipeProps;
+declare type LabelProps = LabelBaseProps & LabelVariantProps;
 export { LabelProps }
 export { LabelProps as LabelProps_alias_1 }
 
-/**
- * This module contains the Label component.
- * @module
- */
-declare type LabelRecipeProps = RecipeVariantProps<typeof label>;
-export { LabelRecipeProps }
-export { LabelRecipeProps as LabelRecipeProps_alias_1 }
-
 export { MeasuringConfiguration }
 
 export { MeasuringFrequency }
@@ -727,14 +952,19 @@ export { MeasuringStrategy }
 
 /**
  * The Modal component is the root element for a customizable modal.
+ * @see https://cerberus.digitalu.design/react/modal
  * @example
  * ```tsx
  * const { modalRef } = useModal()
  *
  * <Modal ref={modalRef}>
- *  <ModalIcon icon={$cerberusIcons.alert} />
- *  <h2>Modal Heading</h2>
- *  <p>Modal description</p>
+ *  <Avatar icon={SomeIcon} />
+ *  <ModalHeader>
+ *    <ModalHeading>Modal Heading</ModalHeading>
+ *    <ModalDescription>Modal description</ModalDescription>
+ *  </ModalHeader>
+ *
+ *  {props.children}
  * </Modal>
  * ```
  */
@@ -744,6 +974,7 @@ export { Modal as Modal_alias_1 }
 
 /**
  * The ModalDescription component is a heading element for a customizable modal.
+ * @see https://cerberus.digitalu.design/react/modal
  * @example
  * ```tsx
  * <Modal>
@@ -765,6 +996,7 @@ export { ModalDescriptionProps as ModalDescriptionProps_alias_1 }
 
 /**
  * The ModalHeader component is a header element for a customizable modal.
+ * @see https://cerberus.digitalu.design/react/modal
  * @example
  * ```tsx
  * <Modal>
@@ -788,6 +1020,7 @@ export { ModalHeaderProps as ModalHeaderProps_alias_1 }
 
 /**
  * The ModalHeading component is a heading element for a customizable modal.
+ * @see https://cerberus.digitalu.design/react/modal
  * @example
  * ```tsx
  * <Modal>
@@ -827,24 +1060,61 @@ export { MouseSensor }
 
 export { MouseSensorOptions }
 
+/**
+ * Provides the nav menu state for all the NavMenu family components.
+ * @see https://cerberus.digitalu.design/react/nav-menu
+ */
 declare function NavMenu(props: PropsWithChildren): JSX.Element;
 export { NavMenu }
 export { NavMenu as NavMenu_alias_1 }
 
 declare interface NavMenuContextValue {
+    /**
+     * The ref for the trigger button.
+     */
     triggerRef: NavTriggerRef | null;
+    /**
+     * The ref for the menu.
+     */
     menuRef: NavMenuRef | null;
+    /**
+     * Whether the menu is expanded.
+     */
     expanded: boolean;
+    /**
+     * Called when the menu button is clicked.
+     */
     onToggle: () => void;
 }
 export { NavMenuContextValue }
 export { NavMenuContextValue as NavMenuContextValue_alias_1 }
 
+/**
+ * The NavMenuLink component is a link element that is used within the NavMenu.
+ * @see https://cerberus.digitalu.design/react/nav-menu
+ * @example
+ * ```tsx
+ * <NavMenu>
+ *  <NavMenuList id="nav-menu-list" position="bottom">
+ *   <NavMenuLink href="/home">Home</NavMenuLink>
+ *   <NavMenuLink href="/about">About</NavMenuLink>
+ *  </NavMenuList>
+ * </NavMenu>
+ * ```
+ */
 declare function NavMenuLink(props: NavMenuLinkProps): JSX.Element;
 export { NavMenuLink }
 export { NavMenuLink as NavMenuLink_alias_1 }
 
+/**
+ * This module contains the NavMenuLink component.
+ * @module
+ */
 declare interface NavMenuLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    /**
+     * The element type to render as. Recommended to use for Next apps with the
+     * `Link` component.
+     */
     as?: ElementType;
 }
 export { NavMenuLinkProps }
@@ -853,14 +1123,16 @@ export { NavMenuLinkProps as NavMenuLinkProps_alias_1 }
 /**
  * A component that allows the user to display a menu of navigation links.
  * @definition [Disclosure Nav](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/)
- * @definition [NavMenu Docs](https://cerberus.digitalu.design/react/nav-menu)
+ * @see https://cerberus.digitalu.design/react/nav-menu
  *
  * @example
  * ```tsx
- * <NavMenuList id="nav-menu-list" position="bottom">
- *  <NavMenuLink href="/home">Home</NavMenuLink>
- * <NavMenuLink href="/about">About</NavMenuLink>
- * </NavMenuList>
+ * <NavMenu>
+ *  <NavMenuList id="nav-menu-list" position="bottom">
+ *   <NavMenuLink href="/home">Home</NavMenuLink>
+ *   <NavMenuLink href="/about">About</NavMenuLink>
+ *  </NavMenuList>
+ * </NavMenu>
  * ```
  **/
 declare function NavMenuList(props: NavMenuListProps): JSX.Element;
@@ -868,7 +1140,15 @@ export { NavMenuList }
 export { NavMenuList as NavMenuList_alias_1 }
 
 declare interface NavMenuListProps extends HTMLAttributes<HTMLUListElement> {
+    /**
+     * The unique identifier for the NavMenuList. Required for accessibility.
+     */
     id: string;
+    /**
+     * The position of the NavMenuList.
+     * @type 'top' | 'right' | 'bottom' | 'left'
+     * @default 'bottom'
+     */
     position?: Positions;
 }
 export { NavMenuListProps }
@@ -894,7 +1174,19 @@ declare function NavMenuTrigger(props: NavMenuTriggerProps): JSX.Element;
 export { NavMenuTrigger }
 export { NavMenuTrigger as NavMenuTrigger_alias_1 }
 
+/**
+ * This module contains the NavMenuTrigger component.
+ * @module
+ */
 declare interface NavMenuTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement>, ButtonProps, NavTriggerAriaValues {
+    /**
+     * The element type to render as. Recommended to use for an IconButton trigger vs a standard Button.
+     * @default 'button'
+     * @example
+     * ```tsx
+     * <NavMenuTrigger as={IconButton} href="/home" />
+     * ```
+     */
     as?: ElementType;
 }
 export { NavMenuTriggerProps }
@@ -912,28 +1204,39 @@ declare interface NavTriggerAriaValues {
 export { NavTriggerAriaValues }
 export { NavTriggerAriaValues as NavTriggerAriaValues_alias_1 }
 
+/**
+ * This module provides a context and hook for the nav menu.
+ * @module NavMenu
+ */
 declare type NavTriggerRef = RefObject<HTMLButtonElement>;
 export { NavTriggerRef }
 export { NavTriggerRef as NavTriggerRef_alias_1 }
 
 declare type NonIndeterminateProgressBarProps = {
+    /**
+     * The state of the progress bar.
+     */
     indeterminate?: never;
+    /**
+     * The current value of the progress bar.
+     */
     now: number;
 };
 export { NonIndeterminateProgressBarProps }
 export { NonIndeterminateProgressBarProps as NonIndeterminateProgressBarProps_alias_1 }
 
 /**
- * The info notification component.
- * @param props - The component props.
- * @returns The info notification component.
+ * A static Notification component that displays a message to the user. This
+ * is typically only used when not utilizing the NotificationCenter.
+ * @see https://cerberus.digitalu.design/react/notification
+ * @memberof module:NotificationCenter
  * @example
  * ```tsx
  * <Notification id="info:1" open>
  *  <NotificationHeading>Info Notification</NotificationHeading>
- * <NotificationDescription>
- *  This is a description with a <a href="#">link</a> in the message.
- * </NotificationDescription>
+ *  <NotificationDescription>
+ *   This is a description with a <a href="#">link</a> in the message.
+ *  </NotificationDescription>
  * </Notification>
  * ```
  */
@@ -942,7 +1245,13 @@ export { Notification_2 as Notification }
 export { Notification_2 as Notification_alias_1 }
 
 declare interface NotificationBaseProps extends Omit<DialogHTMLAttributes<HTMLDialogElement>, 'onClose'> {
+    /**
+     * The unique id of the notification. Required for the onClose callback.
+     */
     id: string;
+    /**
+     * Called when the close button is clicked.
+     */
     onClose?: (e: MouseEvent_2<HTMLButtonElement>) => void;
 }
 export { NotificationBaseProps }
@@ -950,6 +1259,7 @@ export { NotificationBaseProps as NotificationBaseProps_alias_1 }
 
 /**
  * Provides a notification center to the app.
+ * @see https://cerberus.digitalu.design/react/notification
  * @example
  * ```tsx
  * // Wrap the Provider around the root of the feature.
@@ -974,7 +1284,9 @@ export { NotificationCenter }
 export { NotificationCenter as NotificationCenter_alias_1 }
 
 /**
- * The NotificationDescription component is used to render the description of a notification.
+ * Used to render the description of a notification.
+ * @see https://cerberus.digitalu.design/react/notification
+ * @memberof module:NotificationCenter
  * @param props - The anything a HTMLParagraphElement can accept.
  */
 declare function NotificationDescription(props: NotificationDescriptionProps): JSX_2.Element;
@@ -986,7 +1298,9 @@ export { NotificationDescriptionProps }
 export { NotificationDescriptionProps as NotificationDescriptionProps_alias_1 }
 
 /**
- * The NotificationHeading component is used to render the heading of a notification.
+ * Used to render the heading of a notification.
+ * @see https://cerberus.digitalu.design/react/notification
+ * @memberof module:NotificationCenter
  * @param props - The anything a HTMLParagraphElement can accept.
  */
 declare function NotificationHeading(props: NotificationHeadingProps): JSX_2.Element;
@@ -1017,10 +1331,26 @@ export { NotificationsValue as NotificationsValue_alias_1 }
  * @module
  */
 declare interface NotifyOptions {
+    /**
+     * The palette of the notification.
+     * @default 'info'
+     */
     palette: 'info' | 'success' | 'warning' | 'danger';
+    /**
+     * The heading of the notification.
+     */
     heading: string;
+    /**
+     * The unique id of the notification.
+     */
     id?: string;
+    /**
+     * The description of the notification.
+     */
     description?: ReactNode;
+    /**
+     * The action to take when the notification is closed
+     */
     onClose?: () => void;
 }
 export { NotifyOptions }
@@ -1058,8 +1388,8 @@ export { pointerWithin }
 
 /**
  * The Portal component is used to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
- * @param container - The props for the Portal component.
- * @returns ReactPortal
+ * @see https://cerberus.digitalu.design/react/portal
+ * @definition [React Portal Docs](https://react.dev/reference/react-dom/createPortal)
  */
 declare function Portal(props: PropsWithChildren<PortalProps>): ReactPortal;
 export { Portal }
@@ -1070,7 +1400,14 @@ export { Portal as Portal_alias_1 }
  * @module
  */
 declare interface PortalProps {
+    /**
+     * The root container to render the children into.
+     * @default document.body
+     */
     container?: Element | DocumentFragment;
+    /**
+     * An optional key to use for the Portal component.
+     */
     key?: null | string;
 }
 export { PortalProps }
@@ -1099,9 +1436,7 @@ export { processStatus as processStatus_alias_1 }
 
 /**
  * The ProgressBar component is used to display the progress of a task.
- * @param props - HTML div element attributes
- * @param props.now - The current value of the progress bar
- * @param props.indeterminate - Whether the progress bar is indeterminate
+ * @see https://cerberus.digitalu.design/react/progress-indicators
  * @example
  * ```tsx
  * <ProgressBar value={75} />
@@ -1126,6 +1461,7 @@ export { ProgressBarProps as ProgressBarProps_alias_1 }
 
 /**
  * Provides a prompt modal to the app.
+ * @see https://cerberus.digitalu.design/react/prompt-modal
  * @example
  * ```tsx
  * // Wrap the Provider around the root of the feature.
@@ -1160,6 +1496,21 @@ export { PromptModalProviderProps }
 export { PromptModalProviderProps as PromptModalProviderProps_alias_1 }
 
 declare interface PromptModalValue {
+    /**
+     * The method to trigger the prompt modal.
+     * @returns the value of the key if the action is confirmed.
+     * @example
+     * ```tsx
+     * const accepted = await prompt.show({
+     *  kind: 'destructive',
+     *  heading: 'Delete channel?',
+     *  description:
+     *   'This will permanently delete a channel on your account. There is no going back.',
+     *  key: CHANNEL_NAME,
+     *  actionText: 'Yes, delete channel',
+     *  cancelText: 'No, cancel',
+     * })
+     */
     show: (options: ShowPromptModalOptions) => Promise<string>;
 }
 export { PromptModalValue }
@@ -1169,11 +1520,35 @@ declare type PromptShowResult = ((value: string | PromiseLike<string>) => void)
 export { PromptShowResult }
 export { PromptShowResult as PromptShowResult_alias_1 }
 
+/**
+ * The Radio component is used to allow users to select a single option from a list of options.
+ * @see https://cerberus.digitalu.design/react/radio
+ * @memberof module:Field
+ * @example
+ * ```tsx
+ * <Field>
+ *  <fieldset name="fruit">
+ *    <Radio id="radio-1" name="fruit" value="1">
+ *     Option 1
+ *    </Radio>
+ *    <Radio id="radio-2" name="fruit" value="2">
+ *     Option 2
+ *    </Radio>
+ *    <Radio id="radio-3" name="fruit" value="3">
+ *     Option 3
+ *    </Radio>
+ *   </fieldset>
+ * </Field>
+ * ```
+ */
 declare function Radio(props: PropsWithChildren<RadioProps>): JSX_2.Element;
 export { Radio }
 export { Radio as Radio_alias_1 }
 
 declare interface RadioBaseProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /**
+     * A unique identifier for the radio button. Required for accessibility.
+     */
     id: string;
 }
 export { RadioBaseProps }
@@ -1183,7 +1558,11 @@ declare type RadioProps = RadioBaseProps & RadioRecipe;
 export { RadioProps }
 export { RadioProps as RadioProps_alias_1 }
 
-declare type RadioRecipe = RecipeVariantProps_2<typeof radio>;
+/**
+ * This module contains the Radio component.
+ * @module
+ */
+declare type RadioRecipe = RecipeVariantProps<typeof radio>;
 export { RadioRecipe }
 export { RadioRecipe as RadioRecipe_alias_1 }
 
@@ -1192,16 +1571,19 @@ export { rectIntersection }
 export { ScreenReaderInstructions }
 
 /**
- * Select component
- * props: SelectHTMLAttributes<HTMLSelectElement> & SelectVariantProps & { describedBy?: string }
+ * Used to allow users to select a single option from a list of options.
+ * @see https://cerberus.digitalu.design/react/select
+ * @memberof module:Field
  * @example
  * ```tsx
- * <Select describedby="help:fruit" id="fruit">
- *  <Option value="">Choose option</Option>
- *  <Option value="one">Option 1</Option>
- *  <Option value="two">Option 2</Option>
- *  <Option value="three">Option 3</Option>
- * </Select>
+ * <Field>
+ *   <Select describedby="help:fruit" id="fruit">
+ *    <Option value="">Choose option</Option>
+ *    <Option value="one">Option 1</Option>
+ *    <Option value="two">Option 2</Option>
+ *    <Option value="three">Option 3</Option>
+ *   </Select>
+ * </Field>
  * ```
  */
 declare function Select(props: SelectProps): JSX_2.Element;
@@ -1213,7 +1595,13 @@ export { Select as Select_alias_1 }
  * @module
  */
 declare type SelectProps = Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> & SelectVariantProps & {
+    /**
+     * The unique id of the select element. Required for accessibility.
+     */
     id: string;
+    /**
+     * The id of the FieldMessage that describes the select element.
+     */
     describedBy?: string;
 };
 export { SelectProps }
@@ -1242,21 +1630,30 @@ export { Sensors }
  * @module
  */
 declare type SharedAvatarProps = {
+    /**
+     * An optional icon to show when no src or ariaLabel is provided.
+     */
     icon?: ReactNode;
+    /**
+     * The size of the avatar.
+     */
     width?: number;
+    /**
+     * The size of the avatar.
+     */
     height?: number;
 };
 export { SharedAvatarProps }
 export { SharedAvatarProps as SharedAvatarProps_alias_1 }
 
 /**
- * Conditionally render its children or an optional fallback component
- * based on the SolidJS component.
- * @definition [Show docs](https://cerberus.digitalu.design/react/show)
+ * Conditionally render a memoized version of the children or optional fallback
+ * content.
+ * @see https://cerberus.digitalu.design/react/show
  * @example
  * ```tsx
- * <Show when={condition}>
- *  <div>Content</div>
+ * <Show when={isLoggedIn} fallback={<Navigate to="/login" />}>
+ *   <Dashboard />
  * </Show>
  */
 declare function Show(props: PropsWithChildren<ShowProps>): ReactNode;
@@ -1268,10 +1665,26 @@ export { Show as Show_alias_1 }
  * @module
  */
 declare interface ShowConfirmModalOptions {
+    /**
+     * The kind of confirm modal to show.
+     * @default 'non-destructive'
+     */
     kind?: 'destructive' | 'non-destructive';
+    /**
+     * The heading of the confirm modal.
+     */
     heading: string;
+    /**
+     * The description of the confirm modal.
+     */
     description?: string;
+    /**
+     * The text for the action button.
+     */
     actionText: string;
+    /**
+     * The text for the cancel button.
+     */
     cancelText: string;
 }
 export { ShowConfirmModalOptions }
@@ -1279,21 +1692,50 @@ export { ShowConfirmModalOptions as ShowConfirmModalOptions_alias_1 }
 
 /**
  * This module provides a context and hook for the prompt modal.
- * @module
+ * @module PromptModal
  */
 declare interface ShowPromptModalOptions {
+    /**
+     * The kind of prompt modal to show.
+     * @default 'non-destructive'
+     */
     kind?: 'destructive' | 'non-destructive';
+    /**
+     * The heading of the prompt modal.
+     */
     heading: string;
+    /**
+     * The description of the prompt modal.
+     */
     description?: string;
+    /**
+     * The key to confirm the action.
+     */
     key: string;
+    /**
+     * The text for the action button.
+     */
     actionText: string;
+    /**
+     * The text for the cancel button.
+     */
     cancelText: string;
 }
 export { ShowPromptModalOptions }
 export { ShowPromptModalOptions as ShowPromptModalOptions_alias_1 }
 
+/**
+ * This module contains the Show component.
+ * @module
+ */
 declare interface ShowProps {
+    /**
+     * The condition to render memoized children or the fallback content.
+     */
     when: boolean | null | undefined;
+    /**
+     * The children to render when the condition is false.
+     */
     fallback?: ReactNode;
 }
 export { ShowProps }
@@ -1303,7 +1745,46 @@ declare type ShowResult = ((value: boolean | PromiseLike<boolean>) => void) | nu
 export { ShowResult }
 export { ShowResult as ShowResult_alias_1 }
 
-declare type StaticTagProps = HTMLAttributes<HTMLSpanElement> & TagRecipeProps & {
+/**
+ * The Spinner component is used to display a loading indicator. Typically used
+ * in buttons, modals, and other components that require a loading state.
+ * @see https://cerberus.digitalu.design/react/loading-states/
+ * @example
+ * ```tsx
+ * <Button>
+ *   <Show when={loading} fallback={<>Save</>}>
+ *      Saving
+ *      <Spinner size={24} />
+ *   </Show>
+ * </Button>
+ * ```
+ */
+declare function Spinner(props: SpinnerProps): JSX_2.Element;
+export { Spinner }
+export { Spinner as Spinner_alias_1 }
+
+/**
+ * This module contains the Spinner component.
+ * @module
+ */
+declare type SpinnerProps = SVGProps<SVGSVGElement> & {
+    /**
+     * The size of the spinner
+     */
+    size?: number | string;
+};
+export { SpinnerProps }
+export { SpinnerProps as SpinnerProps_alias_1 }
+
+/**
+ * This module contains the tag component.
+ * @module
+ */
+declare type StaticTagProps = HTMLAttributes<HTMLSpanElement> & TagVariantProps & {
+    /**
+     * The action to be performed when the tag is clicked. Not available when
+     * the palette or gradient props are provided.
+     */
     onClick?: never;
 };
 export { StaticTagProps }
@@ -1312,13 +1793,16 @@ export { StaticTagProps as StaticTagProps_alias_1 }
 /**
  * The Tab component provides a tab element to be used in a TabList.
  * @definition [ARIA Target Size](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html#:~:text=Understanding%20SC%202.5.,%3ATarget%20Size%20(Level%20AAA)&text=The%20size%20of%20the%20target,Equivalent)
- * @definition [Tab docs](https://cerberus.digitalu.design/react/tabs)
- * @param value - the id of the tab that will be tracked as the active tab and used for aria attributes
+ * @see https://cerberus.digitalu.design/react/tabs
+ * @memberof module:Tabs
  * @example
  * ```tsx
- * <Tab value="overview">
- *  Overview
- * </Tab>
+ * <Tabs>
+ *  <TabList description="Profile settings">
+ *   <Tab value="overview">Overview</Tab>
+ *  </TabList>
+ *  <TabPanel tab="overview">...</TabPanel>
+ * </Tabs>
  * ```
  */
 declare function Tab(props: TabProps): JSX_2.Element;
@@ -1326,9 +1810,9 @@ export { Tab }
 export { Tab as Tab_alias_1 }
 
 /**
- * The Table component is used to render a table.
- * @definition [Table docs](https://cerberus.digitalu.design/react/table)
- * @prop caption - An easy to understand description of the table.
+ * An accessible table component.
+ * @definition [ARIA Table pattern](https://www.w3.org/WAI/ARIA/apg/patterns/table/)
+ * @see https://cerberus.digitalu.design/react/table.
  * @example
  * ```tsx
  * <Table caption="Basic Table">
@@ -1345,6 +1829,9 @@ export { Table as Table_alias_1 }
  * @module
  */
 declare interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
+    /**
+     * An easy to understand description of the table. Required for accessibility.
+     */
     caption: string;
 }
 export { TableProps }
@@ -1352,7 +1839,8 @@ export { TableProps as TableProps_alias_1 }
 
 /**
  * The TabList component provides a container for tab elements.
- * @param description - a description of what the tab list contains
+ * @see https://cerberus.digitalu.design/react/tabs
+ * @memberof module:Tabs
  * @example
  * ```tsx
  * <TabList description="Button details">
@@ -1370,14 +1858,19 @@ export { TabList as TabList_alias_1 }
  * @module
  */
 declare interface TabListProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * A description of what the tab list contains. Required for accessibility.
+     */
     description: string;
 }
 export { TabListProps }
 export { TabListProps as TabListProps_alias_1 }
 
 /**
- * The TabPanel component provides a panel element to be used in a Tabs provider.
- * @param tab - the value of the tab that will be tracked as the active tab and used for aria attributes
+ * The TabPanel component provides a panel element to be used in a Tabs
+ * provider.
+ * @see https://cerberus.digitalu.design/react/tabs
+ * @memberof module:Tabs
  * @example
  * ```tsx
  * <TabPanel tab="overview">
@@ -1394,6 +1887,9 @@ export { TabPanel as TabPanel_alias_1 }
  * @module
  */
 declare interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * The unique value of the Tab that is associated with the TabPanel.
+     */
     tab: string;
 }
 export { TabPanelProps }
@@ -1404,6 +1900,10 @@ export { TabPanelProps as TabPanelProps_alias_1 }
  * @module
  */
 declare interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * The id of the tab that will be tracked as the active tab and used for aria
+     * attributes.
+     */
     value: string;
 }
 export { TabProps }
@@ -1411,9 +1911,7 @@ export { TabProps as TabProps_alias_1 }
 
 /**
  * The Tabs component provides a context to manage tab state.
- * @param id - the id of the tabs component,
- * @param active - the default active tab id,
- * @param cache - whether to cache the active tab state in local storage
+ * @see https://cerberus.digitalu.design/react/tabs
  * @example
  * ```tsx
  * <Tabs cache>
@@ -1438,21 +1936,46 @@ export { TabsContext as TabsContext_alias_1 }
 
 /**
  * This module provides a Tabs component and a hook to access its context.
- * @module
+ * @module Tabs
  */
 declare interface TabsContextValue {
+    /**
+     * The ref for the tabs.
+     */
     tabs: MutableRefObject<HTMLButtonElement[]>;
+    /**
+     * The id of the tabs component.
+     */
     id: string;
+    /**
+     * The active tab id.
+     */
     active: string;
+    /**
+     * The styles for the tabs.
+     */
     styles: Pretty<Record<'tabList' | 'tab' | 'tabPanel', string>>;
+    /**
+     * Called when the active tab is updated.
+     */
     onTabUpdate: (active: string) => void;
 }
 export { TabsContextValue }
 export { TabsContextValue as TabsContextValue_alias_1 }
 
 declare interface TabsProps {
+    /**
+     * A unique identifier for the Tabs component. Typically used when there are
+     * multiple Tabs components on the same page.
+     */
     id?: string;
+    /**
+     * The default active tab id.
+     */
     active?: string;
+    /**
+     * Whether to cache the active tab state in local storage.
+     */
     cache?: boolean;
 }
 export { TabsProps }
@@ -1460,7 +1983,7 @@ export { TabsProps as TabsProps_alias_1 }
 
 /**
  * The Tag component is used to display a meta descriptions.
- * @definition [Tag docs](https://cerberus.digitalu.design/react/tags)
+ * @see https://cerberus.digitalu.design/react/tag
  * @example
  * ```tsx
  * <Tag>Tag</Tag>
@@ -1474,17 +1997,10 @@ declare type TagProps = StaticTagProps | ClickableTagProps;
 export { TagProps }
 export { TagProps as TagProps_alias_1 }
 
-/**
- * This module contains the tag component.
- * @module
- */
-declare type TagRecipeProps = RecipeVariantProps_2<typeof tag>;
-export { TagRecipeProps }
-export { TagRecipeProps as TagRecipeProps_alias_1 }
-
 /**
  * The TBody component is used to render a table body.
- * @definition [Table docs](https://cerberus.digitalu.design/react/table)
+ * @see https://cerberus.digitalu.design/react/table
+ * @memberof module:Table
  * @example
  * ```tsx
  * <TBody>
@@ -1496,6 +2012,10 @@ declare function Tbody(props: TbodyProps): JSX_2.Element;
 export { Tbody }
 export { Tbody as Tbody_alias_1 }
 
+/**
+ * This module provides a TBody component.
+ * @module
+ */
 declare type TbodyBaseProps = TableHTMLAttributes<HTMLTableSectionElement>;
 export { TbodyBaseProps }
 export { TbodyBaseProps as TbodyBaseProps_alias_1 }
@@ -1506,7 +2026,8 @@ export { TbodyProps as TbodyProps_alias_1 }
 
 /**
  * Styles for the Th component
- * @definition [Table docs](https://cerberus.digitalu.design/react/table)
+ * @see https://cerberus.digitalu.design/react/table
+ * @memberof module:Table
  * @example
  * ```tsx
  * <Td>Data cell</Td>
@@ -1530,7 +2051,7 @@ export { TdProps as TdProps_alias_1 }
 
 /**
  * A component that allows the user to input large blocks of text.
- * @description https://github.com/omnifed/cerberus/blob/main/packages/react/src/components/Textarea.tsx
+ * @see https://cerberus.digitalu.design/react/textarea
  */
 declare function Textarea(props: TextareaProps): JSX.Element;
 export { Textarea }
@@ -1541,23 +2062,37 @@ export { Textarea as Textarea_alias_1 }
  * @module
  */
 declare interface TextareaBaseProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'id'> {
+    /**
+     * The ID of the FieldMessage that describes the textarea.
+     */
     describedBy?: string;
+    /**
+     * The unique id of the textarea.
+     */
     id: string;
 }
 export { TextareaBaseProps }
 export { TextareaBaseProps as TextareaBaseProps_alias_1 }
 
-declare type TextareaProps = InputRecipeProps & TextareaBaseProps;
+declare type TextareaProps = InputVariantProps & TextareaBaseProps;
 export { TextareaProps }
 export { TextareaProps as TextareaProps_alias_1 }
 
 /**
  * Styles for the Th component
- * @definition [Table docs](https://cerberus.digitalu.design/react/table)
+ * @see https://cerberus.digitalu.design/react/table
+ * @memberof module:Table
  * @example
  * ```tsx
  * <Th>Header 1</Th>
  * ```
+ * @example
+ * ```tsx
+ * <Th onClick={handleClick}>
+ *   Names
+ *   <SortIcon />
+ * </Th>
+ * ```
  */
 declare function Th(props: ThProps): JSX_2.Element;
 export { Th }
@@ -1568,6 +2103,10 @@ export { Th as Th_alias_1 }
  * @module
  */
 declare type ThBaseProps = TableHTMLAttributes<HTMLTableCellElement> & {
+    /**
+     * Converts the Th into a actionable button. Called when the user clicks on
+     * the Th.
+     */
     onClick?: (e: MouseEvent_2<HTMLButtonElement>) => void;
 };
 export { ThBaseProps }
@@ -1575,7 +2114,8 @@ export { ThBaseProps as ThBaseProps_alias_1 }
 
 /**
  * The Thead component is used to render a table header.
- * @definition [Table docs](https://cerberus.digitalu.design/react/table)
+ * @see https://cerberus.digitalu.design/react/table
+ * @memberof module:Table
  * @example
  * ```tsx
  * <Thead>
@@ -1595,21 +2135,39 @@ declare type TheadProps = TableHTMLAttributes<HTMLTableSectionElement>;
 export { TheadProps }
 export { TheadProps as TheadProps_alias_1 }
 
+/**
+ * This module provides a hook for using the theme.
+ * @module
+ */
 declare const THEME_KEY = "cerberus-theme";
 export { THEME_KEY }
 export { THEME_KEY as THEME_KEY_alias_1 }
 
 declare interface ThemeContextValue<T extends string = DefaultThemes> {
+    /**
+     * The current theme.
+     */
     theme: CustomThemes<T>;
+    /**
+     * The current color mode.
+     */
     mode: ColorModes;
+    /**
+     * Called when the theme is updated.
+     */
     updateTheme: (theme: T) => void;
-    updateMode: () => void;
+    /**
+     * Called when the color mode is updated.
+     */
+    updateMode: (mode: ColorModes) => void;
 }
 export { ThemeContextValue }
 export { ThemeContextValue as ThemeContextValue_alias_1 }
 
 /**
- * A context provider that allows the user to set the theme and mode of the application.
+ * A context provider that allows the user to set the theme and mode of the
+ * application.
+ * @see https://cerberus.digitalu.design/react/use-theme-context
  * @example
  * ```tsx
  * <ThemeProvider>
@@ -1617,28 +2175,81 @@ export { ThemeContextValue as ThemeContextValue_alias_1 }
  * </ThemeProvider>
  * ```
  */
-declare function ThemeProvider(props: PropsWithChildren<unknown>): JSX.Element;
+declare function ThemeProvider(props: PropsWithChildren<ThemeProviderProps>): JSX.Element;
 export { ThemeProvider }
 export { ThemeProvider as ThemeProvider_alias_1 }
 
+declare interface ThemeProviderProps extends UseThemeOptions {
+    /**
+     * The default theme.
+     */
+    defaultTheme?: DefaultThemes;
+    /**
+     * The default color mode.
+     */
+    defaultColorMode?: ColorModes;
+}
+export { ThemeProviderProps }
+export { ThemeProviderProps as ThemeProviderProps_alias_1 }
+
 declare type ThProps = ThBaseProps & ThVariantProps;
 export { ThProps }
 export { ThProps as ThProps_alias_1 }
 
+/**
+ * The Toggle component is used to switch between two states. Optionally
+ * combine with the `useToggle` hook.
+ * @see https://cerberus.digitalu.design/react/toggle
+ * @example
+ * ```tsx
+ * const { checked, handleChange } = useToggle({ checked: 'toggle' })
+ *
+ * <Hstack justify="space-between" w="full">
+ *  <Field>
+ *    <Label htmlFor="toggle">Show notifications</Label>
+ *    <Toggle
+ *     checked={checked === 'toggle'}
+ *     id="toggle"
+ *     onChange={handleChange}
+ *     value="toggle"
+ *    />
+ *  </Field>
+ * </Hstack>
+ * ```
+ */
 declare function Toggle(props: ToggleProps): JSX_2.Element;
 export { Toggle }
 export { Toggle as Toggle_alias_1 }
 
+/**
+ * This module provides a toggle component.
+ * @module
+ */
 declare type ToggleBase = Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'id' | 'value'> & {
+    /**
+     * The FieldMessage providing context for the Toggle.
+     */
     describedBy?: string;
+    /**
+     * A unique identifier for the Toggle. Required for accessibility.
+     */
     id: string;
+    /**
+     * The value of the Toggle.
+     */
     value: string;
 };
 export { ToggleBase }
 export { ToggleBase as ToggleBase_alias_1 }
 
 declare interface ToggleHookReturn {
+    /**
+     * The checked state.
+     */
     checked: string;
+    /**
+     * A custom handler to be called when the checked state changes.
+     */
     handleChange: (e: ChangeEvent<HTMLInputElement>) => void;
 }
 export { ToggleHookReturn }
@@ -1698,14 +2309,26 @@ export { useDroppable }
 
 export { UseDroppableArguments }
 
+/**
+ * Used to retrieve the context of the FeatureFlags provider.
+ */
 declare function useFeatureFlags(key: string): boolean;
 export { useFeatureFlags }
 export { useFeatureFlags as useFeatureFlags_alias_1 }
 
+/**
+ * Used to access the field context.
+ * @returns The field context.
+ */
 declare function useFieldContext(): FieldContextValue;
 export { useFieldContext }
 export { useFieldContext as useFieldContext_alias_1 }
 
+/**
+ * Provides a hook for using a custom modal.
+ * @memberof module:Modal
+ * @returns The modal hook.
+ */
 declare function useModal(): UseModalReturnValue;
 export { useModal }
 export { useModal as useModal_alias_1 }
@@ -1715,11 +2338,24 @@ export { useModal as useModal_alias_1 }
  * @module
  */
 declare interface UseModalReturnValue {
+    /**
+     * The ref for the modal.
+     */
     modalRef: RefObject<HTMLDialogElement>;
+    /**
+     * Shows the modal.
+     */
     show: () => void;
+    /**
+     * Closes the modal.
+     */
     close: () => void;
 }
 
+/**
+ * Used to access the nav menu context.
+ * @returns The nav menu context.
+ */
 declare function useNavMenuContext(): NavMenuContextValue;
 export { useNavMenuContext }
 export { useNavMenuContext as useNavMenuContext_alias_1 }
@@ -1741,6 +2377,9 @@ declare function useNotificationCenter(): NotificationsValue;
 export { useNotificationCenter }
 export { useNotificationCenter as useNotificationCenter_alias_1 }
 
+/**
+ * Used to retrieve the context of the PromptModal provider.
+ */
 declare function usePromptModal(): PromptModalValue;
 export { usePromptModal }
 export { usePromptModal as usePromptModal_alias_1 }
@@ -1749,6 +2388,10 @@ export { useSensor }
 
 export { useSensors }
 
+/**
+ * Used to access the tabs context.
+ * @returns The tabs context.
+ */
 declare function useTabsContext(): TabsContextValue;
 export { useTabsContext }
 export { useTabsContext as useTabsContext_alias_1 }
@@ -1759,20 +2402,62 @@ declare function useTabsKeyboardNavigation(): {
 export { useTabsKeyboardNavigation }
 export { useTabsKeyboardNavigation as useTabsKeyboardNavigation_alias_1 }
 
-declare function useTheme<C extends string = DefaultThemes>(defaultTheme?: CustomThemes<C>, defaultColorMode?: ColorModes): ThemeContextValue<C>;
+/**
+ * Provides a hook for using the theme for a single instance of the application.
+ * @see https://cerberus.digitalu.design/react/use-theme
+ * @param defaultTheme The default theme.
+ * @param defaultColorMode The default color mode.
+ * @param options Additional options.
+ */
+declare function useTheme<C extends string = DefaultThemes>(defaultTheme?: CustomThemes<C>, defaultColorMode?: ColorModes, options?: UseThemeOptions<C>): ThemeContextValue<C>;
 export { useTheme }
 export { useTheme as useTheme_alias_1 }
 
+/**
+ * Used to access the theme context.
+ */
 declare function useThemeContext(): ThemeContextValue<DefaultThemes>;
 export { useThemeContext }
 export { useThemeContext as useThemeContext_alias_1 }
 
+declare interface UseThemeOptions<T extends string = DefaultThemes> {
+    /**
+     * Whether to cache the theme in local storage.
+     */
+    cache?: boolean;
+    /**
+     * Called when the theme is updated.
+     */
+    updateTheme?: (theme: T) => void;
+    /**
+     * Called when the color mode is updated.
+     */
+    updateMode?: (mode: ColorModes) => void;
+}
+export { UseThemeOptions }
+export { UseThemeOptions as UseThemeOptions_alias_1 }
+
+/**
+ * Provides a hook for using a toggle.
+ * @see https://cerberus.digitalu.design/react/use-toggle
+ * @memberof module:Toggle
+ */
 declare function useToggle(options?: UseToggleOptions): ToggleHookReturn;
 export { useToggle }
 export { useToggle as useToggle_alias_1 }
 
+/**
+ * This module provides a hook for using a toggle.
+ * @module useToggle
+ */
 declare interface UseToggleOptions {
+    /**
+     * The initial checked state.
+     */
     checked?: string;
+    /**
+     * Called when the checked state changes.
+     */
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 }
 export { UseToggleOptions }