@cerberus-design/react 0.15.0 → 0.16.0-next-4f6c716

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

@@ -14,6 +14,11 @@ import { ButtonHTMLAttributes } from 'react';
 import { ButtonVariantProps } from '@cerberus/styled-system/recipes';
 import { CancelDrop } from '@dnd-kit/core';
 import { ChangeEvent } from 'react';
+import { CheckboxControlProps } from '@ark-ui/react';
+import { CheckboxGroupProps } from '@ark-ui/react';
+import { CheckboxIndicatorProps } from '@ark-ui/react';
+import { CheckboxLabelProps } from '@ark-ui/react';
+import { CheckboxRootProps } from '@ark-ui/react';
 import { CheckboxVariantProps } from '@cerberus/styled-system/recipes';
 import { ClientRect as ClientRect_2 } from '@dnd-kit/core';
 import { closestCenter } from '@dnd-kit/core';
@@ -75,8 +80,19 @@ import { DroppableContainer } from '@dnd-kit/core';
 import { DroppableContainers } from '@dnd-kit/core';
 import { DroppableMeasuring } from '@dnd-kit/core';
 import { ElementType } from 'react';
+import { FieldHelperTextProps } from '@ark-ui/react/field';
+import { FieldInputProps as FieldInputProps_2 } from '@ark-ui/react/field';
+import { FieldLabelProps } from '@ark-ui/react/field';
 import { FieldMessageVariantProps } from '@cerberus/styled-system/recipes';
-import type { FieldsetHTMLAttributes } from 'react';
+import { FieldRootProps as FieldRootProps_2 } from '@ark-ui/react/field';
+import type { FieldRootProps as FieldRootProps_3 } from '@ark-ui/react';
+import { FieldsetHelperTextProps } from '@ark-ui/react/fieldset';
+import { FieldsetLegendProps } from '@ark-ui/react/fieldset';
+import type { FieldsetRootProps } from '@ark-ui/react';
+import { FieldsetRootProps as FieldsetRootProps_2 } from '@ark-ui/react/fieldset';
+import { FieldsetVariantProps } from '@cerberus/styled-system/recipes';
+import { FieldTextareaProps } from '@ark-ui/react/field';
+import { FieldVariantProps } from '@cerberus/styled-system/recipes';
 import { FileStatusVariantProps } from '@cerberus/styled-system/recipes';
 import { ForwardRefExoticComponent } from 'react';
 import { getClientRect } from '@dnd-kit/core';
@@ -86,7 +102,6 @@ import { HTMLAttributes } from 'react';
 import { HtmlHTMLAttributes } from 'react';
 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';
@@ -96,6 +111,7 @@ import { KeyboardSensor } from '@dnd-kit/core';
 import { KeyboardSensorOptions } from '@dnd-kit/core';
 import { KeyboardSensorProps } from '@dnd-kit/core';
 import { LabelVariantProps } from '@cerberus/styled-system/recipes';
+import { ListCollection } from '@ark-ui/react/select';
 import { MeasuringConfiguration } from '@dnd-kit/core';
 import { MeasuringFrequency } from '@dnd-kit/core';
 import { MeasuringStrategy } from '@dnd-kit/core';
@@ -107,7 +123,6 @@ import { MouseEventHandler } from 'react';
 import { MouseSensor } from '@dnd-kit/core';
 import { MouseSensorOptions } from '@dnd-kit/core';
 import { NotificationVariantProps } from '@cerberus/styled-system/recipes';
-import type { OptionHTMLAttributes } from 'react';
 import { Over } from '@dnd-kit/core';
 import { PointerActivationConstraint } from '@dnd-kit/core';
 import { PointerEventHandlers } from '@dnd-kit/core';
@@ -120,14 +135,36 @@ import { PProps } from '@cerberus/styled-system/jsx';
 import type { Pretty } from '@cerberus/styled-system/types';
 import { ProgressBarVariantProps } from '@cerberus/styled-system/recipes';
 import { PropsWithChildren } from 'react';
-import { radio } from '@cerberus/styled-system/recipes';
+import { RadioGroupIndicatorProps } from '@ark-ui/react/radio-group';
+import { RadioGroupItemControlProps } from '@ark-ui/react/radio-group';
+import { RadioGroupItemHiddenInputProps } from '@ark-ui/react/radio-group';
+import { RadioGroupItemProps } from '@ark-ui/react/radio-group';
+import type { RadioGroupItemProps as RadioGroupItemProps_2 } from '@ark-ui/react';
+import { RadioGroupItemTextProps } from '@ark-ui/react/radio-group';
+import { RadioGroupLabelProps } from '@ark-ui/react/radio-group';
+import { RadioGroupRootProps } from '@ark-ui/react/radio-group';
+import { RadioGroupVariantProps } from '@cerberus/styled-system/recipes';
 import { ReactNode } from 'react';
-import type { RecipeVariantProps } from '@cerberus/styled-system/types';
 import { rectIntersection } from '@dnd-kit/core';
 import { RefAttributes } from 'react';
 import { RefObject } from 'react';
 import { ScreenReaderInstructions } from '@dnd-kit/core';
-import type { SelectHTMLAttributes } from 'react';
+import { SelectClearTriggerProps } from '@ark-ui/react/select';
+import { SelectContentProps } from '@ark-ui/react/select';
+import { SelectControlProps } from '@ark-ui/react/select';
+import { SelectHiddenSelectProps } from '@ark-ui/react/select';
+import { SelectIndicatorProps } from '@ark-ui/react/select';
+import { SelectItemGroupLabelProps } from '@ark-ui/react/select';
+import { SelectItemGroupProps } from '@ark-ui/react/select';
+import { SelectItemIndicatorProps } from '@ark-ui/react/select';
+import { SelectItemProps } from '@ark-ui/react/select';
+import { SelectItemTextProps } from '@ark-ui/react/select';
+import { SelectLabelProps } from '@ark-ui/react/select';
+import { SelectPositionerProps } from '@ark-ui/react/select';
+import { SelectRootProps } from '@ark-ui/react/select';
+import { SelectTriggerProps } from '@ark-ui/react/select';
+import { SelectValueChangeDetails } from '@ark-ui/react/select';
+import { SelectValueTextProps } from '@ark-ui/react/select';
 import { SelectVariantProps } from '@cerberus/styled-system/recipes';
 import { Sensor } from '@dnd-kit/core';
 import { SensorContext } from '@dnd-kit/core';
@@ -139,15 +176,20 @@ import { SensorProps } from '@dnd-kit/core';
 import { SensorResponse } from '@dnd-kit/core';
 import { Sensors } from '@dnd-kit/core';
 import type { SVGProps } from 'react';
+import { Switch as Switch_2 } from '@ark-ui/react';
+import { SwitchControlProps } from '@ark-ui/react';
+import { SwitchLabelProps } from '@ark-ui/react';
+import { SwitchRecipeVariantProps } from '@cerberus/styled-system/recipes';
+import { SwitchRootProps } from '@ark-ui/react';
+import { SwitchThumbProps } from '@ark-ui/react';
 import type { TableHTMLAttributes } from 'react';
 import { Tabs as Tabs_2 } from '@ark-ui/react/tabs';
 import { TabsVariantProps } 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';
 import { ThVariantProps } from '@cerberus/styled-system/recipes';
-import { ToggleVariantProps } from '@cerberus/styled-system/recipes';
+import { Toggle } from '@ark-ui/react/toggle';
 import { TooltipContentProps } from '@ark-ui/react/tooltip';
 import { TouchSensor } from '@dnd-kit/core';
 import { TouchSensorOptions } from '@dnd-kit/core';
@@ -520,6 +562,16 @@ declare type BaseNotificationHeadingProps = HTMLAttributes<HTMLParagraphElement>
 export { BaseNotificationHeadingProps }
 export { BaseNotificationHeadingProps as BaseNotificationHeadingProps_alias_1 }
 
+declare interface BaseSelectProps {
+    /**
+     * The placeholder text when no option is selected.
+     */
+    placeholder?: string;
+}
+export { BaseSelectProps }
+export { BaseSelectProps as BaseSelectProps_alias_1 }
+export { BaseSelectProps as BaseSelectProps_alias_2 }
+
 /**
  * A component that allows the user to perform actions
  * @see https://cerberus.digitalu.design/react/button
@@ -527,14 +579,52 @@ export { BaseNotificationHeadingProps as BaseNotificationHeadingProps_alias_1 }
 declare function Button(props: ButtonProps): JSX.Element;
 export { Button }
 export { Button as Button_alias_1 }
+export { Button as Button_alias_2 }
 
 /**
- * This module contains the Button component.
- * @module
+ * An icon to display in a button that utilizes the pending state to display
+ * a loading spinner.
+ */
+declare function ButtonIcon(props: PropsWithChildren<object>): JSX_2.Element;
+export { ButtonIcon }
+export { ButtonIcon as ButtonIcon_alias_1 }
+export { ButtonIcon as ButtonIcon_alias_2 }
+
+/**
+ * An Object containing the parts of the Button component. For users that
+ * prefer Object component syntax.
+ *
+ * @remarks
+ *
+ * When using object component syntax, you import the ButtonParts object and
+ * the entire family of components vs. only what you use.
+ */
+declare const ButtonParts: ButtonPartsValue;
+export { ButtonParts }
+export { ButtonParts as ButtonParts_alias_1 }
+export { ButtonParts as ButtonParts_alias_2 }
+
+/**
+ * This module contains the parts of the Button component.
+ * @module 'button/parts'
  */
-declare type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & ButtonVariantProps;
+declare interface ButtonPartsValue {
+    /**
+     * The context provider of the button.
+     */
+    Root: ElementType;
+    /**
+     * The icon of the button.
+     */
+    Icon: ElementType;
+}
+
+declare type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & ButtonVariantProps & {
+    pending?: boolean;
+};
 export { ButtonProps }
 export { ButtonProps as ButtonProps_alias_1 }
+export { ButtonProps as ButtonProps_alias_2 }
 
 export { CancelDrop }
 
@@ -551,6 +641,48 @@ declare interface CerberusProviderProps {
     config: SystemConfig;
 }
 
+/**
+ * Checkbox component is an abstraction of the primitives that displays a
+ * controlled checkbox with a label.
+ * @description [Cerberus Docs] https://cerberus.digitalu.design/react/checkbox
+ * @description [Ark Docs] https://ark-ui.com/docs/components/checkbox
+ */
+declare function Checkbox(props: CheckboxProps): JSX_2.Element;
+export { Checkbox }
+export { Checkbox as Checkbox_alias_1 }
+export { Checkbox as Checkbox_alias_2 }
+
+/**
+ * Checkbox Control component used to display the control of the checkbox.
+ * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)
+ * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)
+ */
+declare function CheckboxControl(props: CheckboxControlProps & CheckboxVariantProps): JSX_2.Element;
+export { CheckboxControl }
+export { CheckboxControl as CheckboxControl_alias_1 }
+export { CheckboxControl as CheckboxControl_alias_2 }
+
+/**
+ * Checkbox Group is used to group checkboxes together in a consistently styled
+ * way.
+ * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)
+ * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)
+ */
+declare function CheckboxGroup(props: CheckboxGroupProps): JSX_2.Element;
+export { CheckboxGroup }
+export { CheckboxGroup as CheckboxGroup_alias_1 }
+export { CheckboxGroup as CheckboxGroup_alias_2 }
+
+/**
+ * Checkbox HiddenInput component used to provide the native checkbox input.
+ * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)
+ * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)
+ */
+declare function CheckboxHiddenInput(props: CheckboxControlProps): JSX_2.Element;
+export { CheckboxHiddenInput }
+export { CheckboxHiddenInput as CheckboxHiddenInput_alias_1 }
+export { CheckboxHiddenInput as CheckboxHiddenInput_alias_2 }
+
 /**
  * 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)
@@ -563,9 +695,7 @@ declare interface CerberusProviderProps {
  * </Field>
  * ```
  */
-declare function Checkbox(props: CheckboxProps): JSX_2.Element;
-export { Checkbox }
-export { Checkbox as Checkbox_alias_1 }
+export declare function CheckboxIcon(props: CheckboxIconProps_2): JSX_2.Element;
 
 /**
  * This module contains substitute icons for the Checkbox component.
@@ -574,26 +704,101 @@ export { Checkbox as Checkbox_alias_1 }
 export declare type CheckboxIconProps = SVGProps<SVGSVGElement>;
 
 /**
- * This module contains the Checkbox component.
+ * This module contains the Checkbox Icon component.
  * @module
  */
-declare type CheckboxProps = CheckboxVariantProps & Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'id'> & {
+declare interface CheckboxIconProps_2 {
+    indeterminate?: boolean;
+}
+
+/**
+ * Checkbox Indicator component used to display the indicator of the checkbox.
+ * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)
+ * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)
+ */
+declare function CheckboxIndicator(props: CheckboxIndicatorProps): JSX_2.Element;
+export { CheckboxIndicator }
+export { CheckboxIndicator as CheckboxIndicator_alias_1 }
+export { CheckboxIndicator as CheckboxIndicator_alias_2 }
+
+/**
+ * Checkbox Label component used to display the label of the checkbox.
+ * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)
+ * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)
+ */
+declare function CheckboxLabel(props: CheckboxLabelProps & CheckboxVariantProps): JSX_2.Element;
+export { CheckboxLabel }
+export { CheckboxLabel as CheckboxLabel_alias_1 }
+export { CheckboxLabel as CheckboxLabel_alias_2 }
+
+/**
+ * An Object containing the parts of the Checkbox component. For users that
+ * prefer Object component syntax.
+ *
+ * @remarks
+ *
+ * When using object component syntax, you import the CheckboxParts object and
+ * the entire family of components vs. only what you use.
+ */
+declare const CheckboxParts: CheckboxPartsValue;
+export { CheckboxParts }
+export { CheckboxParts as CheckboxParts_alias_1 }
+export { CheckboxParts as CheckboxParts_alias_2 }
+
+/**
+ * This module contains the parts of the Field component.
+ * @module 'field/parts'
+ */
+declare interface CheckboxPartsValue {
     /**
-     * The id of the FieldMessage element describing the Checkbox.
+     * The container of the field.
      */
-    describedBy?: string;
+    Root: ElementType;
     /**
-     * The unique identifier for the checkbox. Required for accessibility.
+     * The label of the field.
      */
-    id: string;
+    Label: ElementType;
     /**
-     * Used to display a mixed checked state.
-     * @description [ARIA Mixed State](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/examples/checkbox-mixed/)
+     * The control of the field.
      */
-    mixed?: boolean;
-};
+    Control: ElementType;
+    /**
+     * The indicator of the field.
+     */
+    Indicator: ElementType;
+    /**
+     * The hidden input of the field.
+     */
+    HiddenInput: ElementType;
+    /**
+     * The checkbox group component.
+     */
+    Group: ElementType;
+}
+
+/**
+ * This module contains the Checkbox component.
+ * @module
+ */
+declare type CheckboxProps = CheckboxVariantProps & CheckboxRootProps;
 export { CheckboxProps }
 export { CheckboxProps as CheckboxProps_alias_1 }
+export { CheckboxProps as CheckboxProps_alias_2 }
+
+/**
+ * This module contains the Checkbox primitives.
+ * @module 'react/checkbox'
+ */
+/**
+ * Checkbox Root component used to provide the context to all other checkbox
+ * primitives.
+ * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)
+ * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)
+ */
+declare function CheckboxRoot(props: CheckboxRootProps): JSX_2.Element;
+export { CheckboxRoot }
+export { CheckboxRoot as CheckboxRoot_alias_1 }
+export { CheckboxRoot as CheckboxRoot_alias_2 }
 
 /**
  * Checkmark icon for Checkbox component
@@ -749,6 +954,19 @@ declare function createNavTriggerProps(values: NavTriggerAriaValues): NavTrigger
 export { createNavTriggerProps }
 export { createNavTriggerProps as createNavTriggerProps_alias_1 }
 
+/**
+ * A helper function to create a SelectCollection object.
+ * @param collection - An array of SelectCollectionItem objects that matches
+ * the following shape:
+ * ```ts
+ * [{ label: 'Hades', value: 'hades', disabled?: true }]
+ * ```
+ */
+declare function createSelectCollection(collection: SelectCollectionItem[]): ListCollection<SelectCollectionItem>;
+export { createSelectCollection }
+export { createSelectCollection as createSelectCollection_alias_1 }
+export { createSelectCollection as createSelectCollection_alias_2 }
+
 /**
  * Provides a CTA modal to the app.
  * @see https://cerberus.digitalu.design/react/cta-modal
@@ -1117,6 +1335,7 @@ declare interface DefinedIcons<T extends IconType = IconType> {
     invalidAlt: T;
     redo: T;
     selectArrow: T;
+    selectChecked: T;
     toggleChecked: T;
 }
 export { DefinedIcons }
@@ -1443,18 +1662,34 @@ 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
+ * The Field component is the context provider for all FieldParts and displays
+ * the label, helperText, and ErrorText.
+ * @description [Field Docs](https://cerberus.digitalu.design/react/field)
+ * @example
+ * ```tsx
+ * <Field
+ *  ids={{
+ *   control: 'firstName',
+ *  }}
+ *  label="Label"
+ *  helperText="This is what people will see on your profile."
+ *  errorText="A first name is required to create an account."
+ *  required
+ * >
+ *   <Input name="firstName" type="text" />
+ * </Field>
+ * ```
  */
-declare function Field(props: PropsWithChildren<FieldContextValue>): JSX.Element;
+declare function Field(props: FieldProps): JSX_2.Element;
 export { Field }
 export { Field as Field_alias_1 }
+export { Field as Field_alias_2 }
 
 /**
  * This module provides a context and hook for the field.
  * @module Field
  */
-declare interface FieldContextValue {
+export declare interface FieldContextValue {
     /**
      * Whether the field is disabled.
      * @description [Moz Input Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)
@@ -1473,23 +1708,93 @@ declare interface FieldContextValue {
      */
     invalid?: boolean;
 }
-export { FieldContextValue }
-export { FieldContextValue as FieldContextValue_alias_1 }
 
 /**
- * A component that provides feedback about the field.
- * @see https://cerberus.digitalu.design/react/field-message
+ * The error text for the Field component that is shown when the field is
+ * invalid.
+ * @description [Field Docs](https://cerberus.digitalu.design/react/field)
  * @example
  * ```tsx
- * <Field>
- *  <Label htmlFor="first_name">First Name</Label>
- *  <Input aria-describedBy="help:first_name" id="first_name" type="text" />
- *  <FieldMessage id="help:first_name">
- *   This will only be used in your account information.
- *  </FieldMessage>
- * </Field>
+ * <FieldRoot>
+ *   <FieldInput />
+ *   <FieldErrorText>Error text</FieldErrorText>
+ * </FieldRoot>
+ * ```
+ */
+declare function FieldErrorText(props: FieldHelperTextProps): JSX_2.Element | null;
+export { FieldErrorText }
+export { FieldErrorText as FieldErrorText_alias_1 }
+export { FieldErrorText as FieldErrorText_alias_2 }
+
+/**
+ * The helper text for the Field component that is shown when the field is
+ * valid.
+ * @description [Field Docs](https://cerberus.digitalu.design/react/field)
+ * @example
+ * ```tsx
+ * <FieldRoot>
+ *   <FieldInput />
+ *   <FieldHelperText>Helper text</FieldHelperText>
+ * </FieldRoot>
+ * ```
+ */
+declare function FieldHelperText(props: FieldHelperTextProps): JSX_2.Element | null;
+export { FieldHelperText }
+export { FieldHelperText as FieldHelperText_alias_1 }
+export { FieldHelperText as FieldHelperText_alias_2 }
+
+declare type FieldIndicatorProps = HTMLAttributes<HTMLSpanElement>;
+export { FieldIndicatorProps }
+export { FieldIndicatorProps as FieldIndicatorProps_alias_1 }
+export { FieldIndicatorProps as FieldIndicatorProps_alias_2 }
+
+/**
+ * The input for the Field component.
+ * @description [Field Docs](https://cerberus.digitalu.design/react/field)
+ * @example
+ * ```tsx
+ * <FieldRoot>
+ *   <FieldInput />
+ * </FieldRoot>
  * ```
  */
+declare function FieldInput(props: FieldInputProps): JSX_2.Element;
+export { FieldInput }
+export { FieldInput as FieldInput_alias_1 }
+export { FieldInput as FieldInput_alias_2 }
+
+declare interface FieldInputProps extends Omit<FieldInputProps_2, 'size'>, FieldVariantProps {
+    /**
+     * 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 { FieldInputProps }
+export { FieldInputProps as FieldInputProps_alias_1 }
+export { FieldInputProps as FieldInputProps_alias_2 }
+
+/**
+ * The label for the Field component.
+ * @description [Field Docs](https://cerberus.digitalu.design/react/field)
+ * @example
+ * ```tsx
+ * <FieldRoot>
+ *   <FieldLabel>Label</FieldLabel>
+ * </FieldRoot>
+ * ```
+ */
+declare function FieldLabel(props: FieldLabelProps): JSX_2.Element;
+export { FieldLabel }
+export { FieldLabel as FieldLabel_alias_1 }
+export { FieldLabel as FieldLabel_alias_2 }
+
+/**
+ * @deprecated use FieldHelperText, FieldErrorText, or FieldParts instead
+ */
 declare function FieldMessage(props: FieldMessageProps): JSX_2.Element;
 export { FieldMessage }
 export { FieldMessage as FieldMessage_alias_1 }
@@ -1515,166 +1820,373 @@ export { FieldMessageProps }
 export { FieldMessageProps as FieldMessageProps_alias_1 }
 
 /**
- * A component to group related elements in a form for accessibility.
- * @memberof Field
- * @see https://cerberus.digitalu.com/react/fieldset
- * @description [A11y Form Checklist](https://www.a11yproject.com/checklist/#forms)
- * @description [MDN Web Docs: Fieldset](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset)
- * @example
- * ```tsx
- * import { Fieldset, Legend, Field, Radio, Label } from '@cerberus/react'
- * import { Hstack } from '@cerberus/styled-system/jsx'
+ * An Object containing the parts of the Field component. For users that
+ * prefer Object component syntax.
  *
- * function SomeForm() {
- *   return (
- *    <form>
- *     <Fieldset>
- *      <Legend>Do you like cats?</Legend>
- *      <Hstack>
- *        <Field>
- *          <Radio id="yes" name="cats" value="yes" />
- *          <Label htmlFor="yes">Yes</Label>
- *        </Field>
- *      </Hstack>
- *      <Hstack>
- *        <Field>
- *         <Radio id="no" name="cats" value="no" />
- *         <Label htmlFor="no">No</Label>
- *        </Field>
- *      </Hstack>
- *     </Fieldset>
- *    </form>
- *   )
- * }
- */
-declare function Fieldset(props: FieldsetProps): JSX_2.Element;
-export { Fieldset }
-export { Fieldset as Fieldset_alias_1 }
-
-/**
- * Used for labeling inputs that are children of a Fieldset group.
- * @memberof Fieldset
- * @see https://cerberus.digitalu.design/react/fieldset
- * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)
- * @example
- * ```tsx
- * import { Fieldset, Legend, Field, Radio, Label } from '@cerberus/react'
- * import { Hstack } from '@cerberus/styled-system/jsx'
+ * @remarks
  *
- * function SomeForm() {
- *   return (
- *    <form>
- *     <Fieldset>
- *      <Legend>Do you like cats?</Legend>
- *      <Hstack>
- *        <Field>
- *          <Radio id="yes" name="cats" value="yes" />
- *          <FieldsetLabel htmlFor="yes">Yes</FieldsetLabel>
- *        </Field>
- *      </Hstack>
- *      <Hstack>
- *        <Field>
- *         <Radio id="no" name="cats" value="no" />
- *         <FieldsetLabel htmlFor="no">No</FieldsetLabel>
- *        </Field>
- *      </Hstack>
- *     </Fieldset>
- *    </form>
- *   )
- * }
- * ```
- */
-declare function FieldsetLabel(props: FieldsetLabelProps): JSX_2.Element;
-export { FieldsetLabel }
-export { FieldsetLabel as FieldsetLabel_alias_1 }
-
-/**
- * This module contains the FieldsetLabel component.
- * @module FieldsetLabel
+ * When using object component syntax, you import the FieldParts object and
+ * the entire family of components vs. only what you use.
  */
-declare type FieldsetLabelProps = LabelProps & LabelVariantProps;
-export { FieldsetLabelProps }
-export { FieldsetLabelProps as FieldsetLabelProps_alias_1 }
+declare const FieldParts: FieldPartsValue;
+export { FieldParts }
+export { FieldParts as FieldParts_alias_1 }
+export { FieldParts as FieldParts_alias_2 }
 
 /**
- * This module contains the Fieldset component.
- * @module Fieldset
+ * This module contains the parts of the Field component.
+ * @module 'field/parts'
  */
-declare type FieldsetProps = FieldsetHTMLAttributes<HTMLFieldSetElement>;
-export { FieldsetProps }
-export { FieldsetProps as FieldsetProps_alias_1 }
-
-declare interface FileBaseStatusProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> {
+declare interface FieldPartsValue {
     /**
-     * A unique identifier for the file status. Required for accessibility.
+     * The container of the field.
      */
-    id: string;
+    Root: ElementType;
     /**
-     * The name of the file.
+     * The label of the field.
      */
-    file: string;
+    Label: ElementType;
     /**
-     * The percentage of the file that has been processed.
+     * The input of the field.
      */
-    now: ProgressBarProps['now'];
+    Input: ElementType;
     /**
-     * The status of the file.
+     * The textarea of the field.
      */
-    status: processStatus;
+    Textarea: ElementType;
     /**
-     * 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 () => {}
+     * The text that displays when the field is valid.
      */
-    onClick: (status: FileStatusActions, e: MouseEvent_2<HTMLButtonElement>) => void;
+    HelperText: ElementType;
+    /**
+     * The text that displays when the field is invalid.
+     */
+    ErrorText: ElementType;
+    /**
+     * The indicator that appears at the start of the field.
+     */
+    StartIndicator: ElementType;
+    /**
+     * The status indicator of the field.
+     */
+    StatusIndicator: ElementType;
+    /**
+     * The indicator that appears at the end of the field.
+     */
+    RequiredIndicator: ElementType;
 }
-export { FileBaseStatusProps }
-export { FileBaseStatusProps as FileBaseStatusProps_alias_1 }
 
-/**
- * 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)} />
- * ```
- */
-declare function FileStatus(props: FileStatusProps): JSX_2.Element;
-export { FileStatus }
-export { FileStatus as FileStatus_alias_1 }
+declare interface FieldProps extends FieldRootProps_2 {
+    /**
+     * The label of the field.
+     */
+    label?: string;
+    /**
+     * The helper text of the field.
+     */
+    helperText?: string;
+    /**
+     * A helper text positioned at the end of the field. Good for Textarea fields.
+     */
+    secondaryHelperText?: string;
+    /**
+     * The error text of the field. Shown when the field is invalid.
+     */
+    errorText?: string;
+}
+export { FieldProps }
+export { FieldProps as FieldProps_alias_1 }
+export { FieldProps as FieldProps_alias_2 }
 
 /**
- * The actions that can be performed on a file.
+ * @deprecated use FieldRoot or FieldParts instead
  */
-declare type FileStatusActions = 'cancel' | 'retry' | 'delete';
-export { FileStatusActions }
-export { FileStatusActions as FileStatusActions_alias_1 }
+export declare function FieldProvider(props: PropsWithChildren<FieldRootProps_3>): JSX.Element;
 
 /**
- * This module contains the FileStatus component.
- * @module
+ * The required indicator for the Field component.
  */
+declare function FieldRequiredIndicator(): JSX_2.Element;
+export { FieldRequiredIndicator }
+export { FieldRequiredIndicator as FieldRequiredIndicator_alias_1 }
+export { FieldRequiredIndicator as FieldRequiredIndicator_alias_2 }
+
 /**
- * The available values of the fileStatus helper Object.
+ * The context & container for the Field components.
+ * @description [Field Docs](https://cerberus.digitalu.design/react/field)
  * @example
  * ```tsx
- * import { fileStatus } from '@cerberus/react'
- * processStatus.TODO // 'todo'
+ * <FieldRoot required ids={{ input: 'exampleId' }}>
+ *  <FieldLabel>Label</FieldLabel>
+ *  <FieldInput />
+ * </FieldRoot>
  * ```
  */
-declare type FileStatusKey = (typeof processStatus)[keyof typeof processStatus];
-export { FileStatusKey }
-export { FileStatusKey as FileStatusKey_alias_1 }
+declare function FieldRoot(props: FieldRootProps): JSX_2.Element;
+export { FieldRoot }
+export { FieldRoot as FieldRoot_alias_1 }
+export { FieldRoot as FieldRoot_alias_2 }
 
-declare type FileStatusProps = FileBaseStatusProps & FileStatusVariantProps;
-export { FileStatusProps }
-export { FileStatusProps as FileStatusProps_alias_1 }
+/**
+ * This module contains all the primitives of the Field component.
+ * @module 'field'
+ */
+declare type FieldRootProps = FieldRootProps_2 & FieldVariantProps;
+export { FieldRootProps }
+export { FieldRootProps as FieldRootProps_alias_1 }
+export { FieldRootProps as FieldRootProps_alias_2 }
+
+/**
+ * A component used for grouping related fields in a form that is an
+ * abstraction of the Fieldset primitives.
+ * @description [Fieldset Docs](https://cerberus.digitalu.design/react/fieldset)
+ * @description [Primitive Docs](https://ark-ui.com/react/docs/components/fieldset)
+ */
+declare function Fieldset(props: FieldsetProps): JSX_2.Element;
+export { Fieldset }
+export { Fieldset as Fieldset_alias_1 }
+export { Fieldset as Fieldset_alias_2 }
+
+/**
+ * The error text element for the Fieldset group.
+ * @description [Fieldset Docs](https://cerberus.digitalu.design/react/fieldset)
+ * @description [Primitive Docs](https://ark-ui.com/react/docs/components/fieldset)
+ */
+declare function FieldsetErrorText(props: FieldsetHelperTextProps): JSX_2.Element;
+export { FieldsetErrorText }
+export { FieldsetErrorText as FieldsetErrorText_alias_1 }
+export { FieldsetErrorText as FieldsetErrorText_alias_2 }
+
+/**
+ * The description element for the Fieldset group.
+ * @description [Fieldset Docs](https://cerberus.digitalu.design/react/fieldset)
+ * @description [Primitive Docs](https://ark-ui.com/react/docs/components/fieldset)
+ */
+declare function FieldsetHelperText(props: FieldsetHelperTextProps & FieldsetVariantProps): JSX_2.Element;
+export { FieldsetHelperText }
+export { FieldsetHelperText as FieldsetHelperText_alias_1 }
+export { FieldsetHelperText as FieldsetHelperText_alias_2 }
+
+/**
+ * @deprecated
+ */
+declare function FieldsetLabel(props: FieldsetLabelProps): JSX_2.Element;
+export { FieldsetLabel }
+export { FieldsetLabel as FieldsetLabel_alias_1 }
+
+/**
+ * This module contains the FieldsetLabel component.
+ * @module FieldsetLabel
+ */
+declare type FieldsetLabelProps = LabelProps & LabelVariantProps & {
+    htmlFor?: string;
+};
+export { FieldsetLabelProps }
+export { FieldsetLabelProps as FieldsetLabelProps_alias_1 }
+
+/**
+ * The legend element for the Fieldset group.
+ * @description [Fieldset Docs](https://cerberus.digitalu.design/react/fieldset)
+ * @description [Primitive Docs](https://ark-ui.com/react/docs/components/fieldset)
+ */
+declare function FieldsetLegend(props: FieldsetLegendProps & FieldsetVariantProps): JSX_2.Element;
+export { FieldsetLegend }
+export { FieldsetLegend as FieldsetLegend_alias_1 }
+export { FieldsetLegend as FieldsetLegend_alias_2 }
+
+/**
+ * An Object containing the parts of the Field component. For users that
+ * prefer Object component syntax.
+ *
+ * @remarks
+ *
+ * When using object component syntax, you import the FieldParts object and
+ * the entire family of components vs. only what you use.
+ */
+declare const FieldsetParts: FieldsetPartsValue;
+export { FieldsetParts }
+export { FieldsetParts as FieldsetParts_alias_1 }
+export { FieldsetParts as FieldsetParts_alias_2 }
+
+/**
+ * This module contains the parts of the Field component.
+ * @module 'field/parts'
+ */
+declare interface FieldsetPartsValue {
+    /**
+     * The container of the field.
+     */
+    Root: ElementType;
+    /**
+     * The label of the field.
+     */
+    Legend: ElementType;
+    /**
+     * The text that displays when the field is valid.
+     */
+    HelperText: ElementType;
+    /**
+     * The text that displays when the field is invalid.
+     */
+    ErrorText: ElementType;
+}
+
+/**
+ * This module contains the Fieldset component.
+ * @module Fieldset
+ */
+declare interface FieldsetProps extends FieldsetRootProps, FieldsetVariantProps {
+    /**
+     * The legend/title/label of the fieldset group.
+     */
+    legend?: string;
+    /**
+     * The description text for the fieldset group.
+     */
+    helperText?: string;
+    /**
+     * The error text for the fieldset group shown when the field is invalid.
+     */
+    errorText?: string;
+}
+export { FieldsetProps }
+export { FieldsetProps as FieldsetProps_alias_1 }
+export { FieldsetProps as FieldsetProps_alias_2 }
+
+/**
+ * This module contains all the primitives of the Fieldset component.
+ * @module 'react/fieldset'
+ */
+/**
+ * The context & container for the Fieldset components.
+ * @description [Fieldset Docs](https://cerberus.digitalu.design/react/fieldset)
+ * @description [Primitive Docs](https://ark-ui.com/react/docs/components/fieldset)
+ */
+declare function FieldsetRoot(props: FieldsetRootProps_2): JSX_2.Element;
+export { FieldsetRoot }
+export { FieldsetRoot as FieldsetRoot_alias_1 }
+export { FieldsetRoot as FieldsetRoot_alias_2 }
+
+/**
+ * The start indicator displays an indicator at the start of the Input.
+ * @description [Field Docs](https://cerberus.digitalu.design/react/field)
+ */
+declare function FieldStartIndicator(props: FieldIndicatorProps): JSX_2.Element | null;
+export { FieldStartIndicator }
+export { FieldStartIndicator as FieldStartIndicator_alias_1 }
+export { FieldStartIndicator as FieldStartIndicator_alias_2 }
+
+/**
+ * The invalid status indicator for the Field component.
+ * @description [Field Docs](https://cerberus.digitalu.design/react/field)
+ * @example
+ * ```tsx
+ * <FieldRoot>
+ *   <FieldStatusIndicator />
+ * </FieldRoot>
+ * ```
+ */
+declare function FieldStatusIndicator(props: FieldStatusIndicatorProps): JSX_2.Element;
+export { FieldStatusIndicator }
+export { FieldStatusIndicator as FieldStatusIndicator_alias_1 }
+export { FieldStatusIndicator as FieldStatusIndicator_alias_2 }
+
+declare interface FieldStatusIndicatorProps extends HTMLAttributes<HTMLSpanElement> {
+    /**
+     * The fallback content to display when the field is valid.
+     */
+    fallback?: ReactNode;
+}
+export { FieldStatusIndicatorProps }
+export { FieldStatusIndicatorProps as FieldStatusIndicatorProps_alias_1 }
+export { FieldStatusIndicatorProps as FieldStatusIndicatorProps_alias_2 }
+
+/**
+ * The textarea for the Field component.
+ * @description [Field Docs](https://cerberus.digitalu.design/react/field)
+ * @example
+ * ```tsx
+ * <FieldRoot>
+ *   <FieldTextarea />
+ * </FieldRoot>
+ * ```
+ */
+declare function FieldTextarea(props: FieldTextareaProps): JSX_2.Element;
+export { FieldTextarea }
+export { FieldTextarea as FieldTextarea_alias_1 }
+export { FieldTextarea as FieldTextarea_alias_2 }
+
+declare interface FileBaseStatusProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> {
+    /**
+     * A unique identifier for the file status. Required for accessibility.
+     */
+    id: string;
+    /**
+     * The name of the file.
+     */
+    file: string;
+    /**
+     * 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 }
+
+/**
+ * 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)} />
+ * ```
+ */
+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 }
+
+/**
+ * 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 }
+
+declare type FileStatusProps = FileBaseStatusProps & FileStatusVariantProps;
+export { FileStatusProps }
+export { FileStatusProps as FileStatusProps_alias_1 }
 
 /**
  * A component that allows the user to upload files.
@@ -1701,6 +2213,22 @@ declare interface FileUploaderProps extends InputHTMLAttributes<HTMLInputElement
 export { FileUploaderProps }
 export { FileUploaderProps as FileUploaderProps_alias_1 }
 
+/**
+ * The For component is used to iterate over an array and render a list of
+ * components or display a fallback when the array is empty.
+ * Inspired by the `<For>` component from SolidJS.
+ *
+ * @example
+ * ```tsx
+ * <For each={['a', 'b', 'c']}>
+ *   {(item, index) => <div key={index}>{item}</div>}
+ * </For>
+ * ```
+ */
+declare function For<T extends string | number | Record<string, unknown> | object | undefined>(props: ForProps<T>): ReactNode;
+export { For }
+export { For as For_alias_1 }
+
 /**
  * Formats a date string to US Military format.
  * @param date The date string to format (i.e., '2024-01-01')
@@ -1746,6 +2274,23 @@ declare function formatNotifyCount(count: number): string;
 export { formatNotifyCount }
 export { formatNotifyCount as formatNotifyCount_alias_1 }
 
+declare interface ForProps<T> {
+    /**
+     * The array to iterate over
+     */
+    each: T[];
+    /**
+     * The fallback content to render when the array is empty
+     */
+    fallback?: ReactNode;
+    /**
+     * The render function to render each item in the array
+     */
+    children: (item: Exclude<T, undefined>, index: number) => ReactNode;
+}
+export { ForProps }
+export { ForProps as ForProps_alias_1 }
+
 export { getClientRect }
 
 export { getFirstCollision }
@@ -1860,39 +2405,29 @@ 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
+ * A named export for the FieldInput component.
+ * @description [Field Docs](https://cerberus.digitalu.design/react/field)
+ * @example
+ * ```tsx
+ * import { Input } from '@cerberus/react'
+ *
+ * <Field
+ *   ids={{
+ *    control: 'email',
+ *   }}
+ *   label="Enter your email"
+ *   helperText="We'll never share your email with anyone else."
+ *   errorText="Email is required."
+ *   required
+ * >
+ *   <Input type="email" />
+ * </Field>
+ * ```
  */
-declare function Input(props: InputProps): JSX_2.Element;
+declare const Input: typeof FieldInput;
 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 & InputVariantProps;
-export { InputProps }
-export { InputProps as InputProps_alias_1 }
+export { Input as Input_alias_2 }
 
 export { KeyboardCode }
 
@@ -1907,16 +2442,7 @@ export { KeyboardSensorOptions }
 export { KeyboardSensorProps }
 
 /**
- * A a11y compliant label component.
- * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)
- * @see https://cerberus.digitalu.design/react/label
- * @example
- * ```tsx
- * <Field required>
- *   <Label htmlFor="search" hidden>Search everything</Label>
- *   <Input id="search" startIcon={Search} type="text" />
- * </Field>
- * ```
+ * @deprecated Use FieldLabel or FieldParts.Label instead.
  */
 declare function Label(props: PropsWithChildren<LabelProps>): JSX_2.Element;
 export { Label }
@@ -1926,16 +2452,7 @@ 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;
-}
+declare type LabelBaseProps = HTMLAttributes<HTMLLabelElement>;
 export { LabelBaseProps }
 export { LabelBaseProps as LabelBaseProps_alias_1 }
 
@@ -1989,6 +2506,10 @@ declare type LegendProps = HTMLAttributes<HTMLLegendElement> & LabelVariantProps
 export { LegendProps }
 export { LegendProps as LegendProps_alias_1 }
 
+export { ListCollection }
+export { ListCollection as ListCollection_alias_1 }
+export { ListCollection as ListCollection_alias_2 }
+
 /**
  * Create a system configuration object to be used on the CerberusProvider.
  * @param options The system configuration options you want to customize.
@@ -2552,21 +3073,51 @@ declare interface NotifyOptions {
 export { NotifyOptions }
 export { NotifyOptions as NotifyOptions_alias_1 }
 
+declare function Option_2(props: OptionProps): JSX_2.Element;
+export { Option_2 as Option }
+export { Option_2 as Option_alias_1 }
+export { Option_2 as Option_alias_2 }
+
+/**
+ * The OptionGroup component is a group of options in the dropdown list.
+ * @definition [Select docs](https://cerberus.digitalu.design/react/select)
+ * @definition [ARK docs](https://ark-ui.com/react/docs/components/select)
+ * @example
+ * ```tsx
+ * <OptionGroup>
+ *  <OptionGroupLabel>Greek gods</OptionGroupLabel>
+ *  ...
+ * </OptionGroup>
+ * ```
+ */
+declare function OptionGroup(props: SelectItemGroupProps): JSX_2.Element;
+export { OptionGroup }
+export { OptionGroup as OptionGroup_alias_1 }
+export { OptionGroup as OptionGroup_alias_2 }
+
 /**
- * Option component
- * props: OptionHTMLAttributes<HTMLOptionElement>
+ * The OptionGroupLabel component is the label of the OptionGroup.
+ * @definition [Select docs](https://cerberus.digitalu.design/react/select)
+ * @definition [ARK docs](https://ark-ui.com/react/docs/components/select)
  * @example
  * ```tsx
- * <Option value="one">Option 1</Option>
+ * <OptionGroupLabel>Greek gods</OptionGroupLabel>
  * ```
  */
-declare function Option_2(props: OptionProps): JSX_2.Element;
-export { Option_2 as Option }
-export { Option_2 as Option_alias_1 }
+declare function OptionGroupLabel(props: SelectItemGroupLabelProps): JSX_2.Element;
+export { OptionGroupLabel }
+export { OptionGroupLabel as OptionGroupLabel_alias_1 }
+export { OptionGroupLabel as OptionGroupLabel_alias_2 }
 
-declare type OptionProps = OptionHTMLAttributes<HTMLOptionElement>;
+declare interface OptionProps extends SelectItemProps {
+    /**
+     * The CollectionListItem to be displayed in the dropdown list.
+     */
+    item: SelectCollectionItem;
+}
 export { OptionProps }
 export { OptionProps as OptionProps_alias_1 }
+export { OptionProps as OptionProps_alias_2 }
 
 export { Over }
 
@@ -2723,45 +3274,141 @@ export { PromptShowResult as PromptShowResult_alias_1 }
  * @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>
+ * <Radio value="option1">Option 1</Radio>
  * ```
  */
-declare function Radio(props: PropsWithChildren<RadioProps>): JSX_2.Element;
+declare function Radio(props: RadioProps): JSX_2.Element;
 export { Radio }
 export { Radio as Radio_alias_1 }
+export { Radio as Radio_alias_2 }
+
+declare const RadioGroup: typeof RadioGroupRoot;
+export { RadioGroup }
+export { RadioGroup as RadioGroup_alias_1 }
+export { RadioGroup as RadioGroup_alias_2 }
+
+/**
+ * The RadioGroupIndicator component is used to indicate the selected radio
+ * button in a group.
+ */
+declare function RadioGroupIndicator(props: RadioGroupIndicatorProps): JSX_2.Element;
+export { RadioGroupIndicator }
+export { RadioGroupIndicator as RadioGroupIndicator_alias_1 }
+export { RadioGroupIndicator as RadioGroupIndicator_alias_2 }
+
+/**
+ * The RadioGroupItem component is used to render a single radio button in a
+ * group.
+ */
+declare function RadioGroupItem(props: RadioGroupItemProps): JSX_2.Element;
+export { RadioGroupItem }
+export { RadioGroupItem as RadioGroupItem_alias_1 }
+export { RadioGroupItem as RadioGroupItem_alias_2 }
+
+/**
+ * The RadioGroupItemControl component is used to render the control for a
+ * single radio button in a group.
+ */
+declare function RadioGroupItemControl(props: RadioGroupItemControlProps & RadioGroupVariantProps): JSX_2.Element;
+export { RadioGroupItemControl }
+export { RadioGroupItemControl as RadioGroupItemControl_alias_1 }
+export { RadioGroupItemControl as RadioGroupItemControl_alias_2 }
+
+/**
+ * The RadioGroupItemHiddenInput component is used to render the hidden input
+ * for a single radio button in a group.
+ */
+declare function RadioGroupItemHiddenInput(props: RadioGroupItemHiddenInputProps): JSX_2.Element;
+export { RadioGroupItemHiddenInput }
+export { RadioGroupItemHiddenInput as RadioGroupItemHiddenInput_alias_1 }
+export { RadioGroupItemHiddenInput as RadioGroupItemHiddenInput_alias_2 }
+
+/**
+ * The RadioGroupItemText component is used to render the text label for a
+ * single radio button in a group.
+ */
+declare function RadioGroupItemText(props: RadioGroupItemTextProps & RadioGroupVariantProps): JSX_2.Element;
+export { RadioGroupItemText }
+export { RadioGroupItemText as RadioGroupItemText_alias_1 }
+export { RadioGroupItemText as RadioGroupItemText_alias_2 }
 
-declare interface RadioBaseProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+/**
+ * The RadioGroupLabel component is used to label a group of radio buttons.
+ */
+declare function RadioGroupLabel(props: RadioGroupLabelProps): JSX_2.Element;
+export { RadioGroupLabel }
+export { RadioGroupLabel as RadioGroupLabel_alias_1 }
+export { RadioGroupLabel as RadioGroupLabel_alias_2 }
+
+/**
+ * This module contains the Radio primitives
+ * @module 'react/radio'
+ */
+/**
+ * The RadioGroupRoot component is used to group radio buttons together.
+ */
+declare function RadioGroupRoot(props: RadioGroupRootProps & RadioGroupVariantProps): JSX_2.Element;
+export { RadioGroupRoot }
+export { RadioGroupRoot as RadioGroupRoot_alias_1 }
+export { RadioGroupRoot as RadioGroupRoot_alias_2 }
+
+/**
+ * An Object containing the parts of the Radio component. For users that
+ * prefer Object component syntax.
+ *
+ * @remarks
+ *
+ * When using object component syntax, you import the RadioParts object and
+ * the entire family of components vs. only what you use.
+ */
+declare const RadioParts: RadioPartsValue;
+export { RadioParts }
+export { RadioParts as RadioParts_alias_1 }
+export { RadioParts as RadioParts_alias_2 }
+
+/**
+ * This module contains the parts of the Radio parts.
+ * @module 'radio/parts'
+ */
+declare interface RadioPartsValue {
     /**
-     * A unique identifier for the radio button. Required for accessibility.
+     * The container of the field.
      */
-    id: string;
+    Root: ElementType;
+    /**
+     * The label of the field.
+     */
+    Label: ElementType;
+    /**
+     * The indicator that appears when a radio is checked.
+     */
+    Indicator: ElementType;
+    /**
+     * An individual radio item of the field.
+     */
+    Item: ElementType;
+    /**
+     * The text that labels a single radio of the field.
+     */
+    ItemText: ElementType;
+    /**
+     * The visual radio control of the field.
+     */
+    ItemControl: ElementType;
+    /**
+     * The native input for a radio item in the field.
+     */
+    ItemHiddenInput: ElementType;
 }
-export { RadioBaseProps }
-export { RadioBaseProps as RadioBaseProps_alias_1 }
-
-declare type RadioProps = RadioBaseProps & RadioRecipe;
-export { RadioProps }
-export { RadioProps as RadioProps_alias_1 }
 
 /**
  * This module contains the Radio component.
  * @module
  */
-declare type RadioRecipe = RecipeVariantProps<typeof radio>;
-export { RadioRecipe }
-export { RadioRecipe as RadioRecipe_alias_1 }
+declare type RadioProps = RadioGroupVariantProps & RadioGroupItemProps_2;
+export { RadioProps }
+export { RadioProps as RadioProps_alias_1 }
+export { RadioProps as RadioProps_alias_2 }
 
 /**
  * The input component for the DatePicker that uses ranges.
@@ -2830,41 +3477,286 @@ export { RootColorsResult as RootColorsResult_alias_1 }
 export { ScreenReaderInstructions }
 
 /**
- * Used to allow users to select a single option from a list of options.
- * @see https://cerberus.digitalu.design/react/select
- * @memberof module:Field
+ * The Select component is a dropdown list that allows users to select an
+ * option from a list.
+ * @definition [Select docs](https://cerberus.digitalu.design/react/select)
+ * @definition [ARK docs](https://ark-ui.com/react/docs/components/select)
  * @example
  * ```tsx
- * <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>
- * ```
+ * import { Select, Option, createListCollection } from '@cerberus-design/react'
+ *
+ * export function SelectBasicPreview() {
+ *  const collection = createListCollection({
+ *   items: [
+ *    { label: 'Hades', value: 'hades' },
+ *    { label: 'Persephone', value: 'persephone' },
+ *    { label: 'Zeus', value: 'zeus', disabled: true },
+ *   ]
+ *  })
+ *
+ *  return (
+ *   <Select
+ *    collection={collection}
+ *    label="Select Relative"
+ *    placeholder="Choose option"
+ *   >
+ *   {collection.items.map((item) => (
+ *    <Option key={item.value} item={item} />
+ *   ))}
+ *  </Select>
+ *  )
+ * }
  */
 declare function Select(props: SelectProps): JSX_2.Element;
 export { Select }
 export { Select as Select_alias_1 }
+export { Select as Select_alias_2 }
 
 /**
- * This module contains the select components.
- * @module
+ * The trigger that clears the selected value.
  */
-declare type SelectProps = Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> & SelectVariantProps & {
+declare function SelectClearTrigger(props: SelectClearTriggerProps): JSX_2.Element;
+export { SelectClearTrigger }
+export { SelectClearTrigger as SelectClearTrigger_alias_1 }
+export { SelectClearTrigger as SelectClearTrigger_alias_2 }
+
+declare interface SelectCollection {
     /**
-     * The unique id of the select element. Required for accessibility.
+     * The items to be displayed in the dropdown list.
      */
-    id: string;
+    items: SelectCollectionItem[];
+}
+export { SelectCollection }
+export { SelectCollection as SelectCollection_alias_1 }
+export { SelectCollection as SelectCollection_alias_2 }
+
+/**
+ * This module contains the Select components.
+ * @module 'react/select'
+ */
+declare interface SelectCollectionItem {
     /**
-     * The id of the FieldMessage that describes the select element.
+     * What is displayed in the dropdown list.
      */
-    describedBy?: string;
-};
+    label: string;
+    /**
+     * The value of the selected item used in the form.
+     */
+    value: string;
+    /**
+     * If the item is disabled.
+     */
+    disabled?: boolean;
+}
+export { SelectCollectionItem }
+export { SelectCollectionItem as SelectCollectionItem_alias_1 }
+export { SelectCollectionItem as SelectCollectionItem_alias_2 }
+
+/**
+ * The content of the dropdown (i.e. the container itself).
+ */
+declare function SelectContent(props: SelectContentProps & SelectVariantProps): JSX_2.Element;
+export { SelectContent }
+export { SelectContent as SelectContent_alias_1 }
+export { SelectContent as SelectContent_alias_2 }
+
+/**
+ * The control that wraps the select trigger.
+ */
+declare function SelectControl(props: SelectControlProps): JSX_2.Element;
+export { SelectControl }
+export { SelectControl as SelectControl_alias_1 }
+export { SelectControl as SelectControl_alias_2 }
+
+/**
+ * The native input for a select item.
+ */
+declare function SelectHiddenSelect(props: SelectHiddenSelectProps): JSX_2.Element;
+export { SelectHiddenSelect }
+export { SelectHiddenSelect as SelectHiddenSelect_alias_1 }
+export { SelectHiddenSelect as SelectHiddenSelect_alias_2 }
+
+/**
+ * The indicator that appears in the trigger.
+ */
+declare function SelectIndicator(props: SelectIndicatorProps): JSX_2.Element;
+export { SelectIndicator }
+export { SelectIndicator as SelectIndicator_alias_1 }
+export { SelectIndicator as SelectIndicator_alias_2 }
+
+/**
+ * The container for an item in the select content.
+ */
+declare function SelectItem(props: SelectItemProps): JSX_2.Element;
+export { SelectItem }
+export { SelectItem as SelectItem_alias_1 }
+export { SelectItem as SelectItem_alias_2 }
+
+/**
+ * The container for a group of item options.
+ */
+declare function SelectItemGroup(props: SelectItemGroupProps): JSX_2.Element;
+export { SelectItemGroup }
+export { SelectItemGroup as SelectItemGroup_alias_1 }
+export { SelectItemGroup as SelectItemGroup_alias_2 }
+
+/**
+ * The label for a group of item options.
+ */
+declare function SelectItemGroupLabel(props: SelectItemGroupLabelProps): JSX_2.Element;
+export { SelectItemGroupLabel }
+export { SelectItemGroupLabel as SelectItemGroupLabel_alias_1 }
+export { SelectItemGroupLabel as SelectItemGroupLabel_alias_2 }
+
+/**
+ * The indicator for an item option shown when it is selected.
+ */
+declare function SelectItemIndicator(props: SelectItemIndicatorProps): JSX_2.Element;
+export { SelectItemIndicator }
+export { SelectItemIndicator as SelectItemIndicator_alias_1 }
+export { SelectItemIndicator as SelectItemIndicator_alias_2 }
+
+/**
+ * The text for an item option.
+ */
+declare function SelectItemText(props: SelectItemTextProps): JSX_2.Element;
+export { SelectItemText }
+export { SelectItemText as SelectItemText_alias_1 }
+export { SelectItemText as SelectItemText_alias_2 }
+
+/**
+ * The label that appears above the select input.
+ */
+declare function SelectLabel(props: SelectLabelProps): JSX_2.Element;
+export { SelectLabel }
+export { SelectLabel as SelectLabel_alias_1 }
+export { SelectLabel as SelectLabel_alias_2 }
+
+/**
+ * An Object containing the parts of the Radio component. For users that
+ * prefer Object component syntax.
+ *
+ * @remarks
+ *
+ * When using object component syntax, you import the SelectParts object and
+ * the entire family of components vs. only what you use.
+ */
+declare const SelectParts: SelectPartsValue;
+export { SelectParts }
+export { SelectParts as SelectParts_alias_1 }
+export { SelectParts as SelectParts_alias_2 }
+
+/**
+ * This module contains the parts of the Select parts.
+ * @module 'select/parts'
+ */
+declare interface SelectPartsValue {
+    /**
+     * The context provider for the Select component.
+     */
+    Root: ElementType;
+    /**
+     * The label that appears above the select input.
+     */
+    Label: ElementType;
+    /**
+     * The control that wraps the select trigger.
+     */
+    Control: ElementType;
+    /**
+     * The trigger that opens the dropdown.
+     */
+    Trigger: ElementType;
+    /**
+     * The trigger to clear the select input.
+     */
+    ClearTrigger: ElementType;
+    /**
+     * The text that appears in the trigger.
+     */
+    ValueText: ElementType;
+    /**
+     * The indicator that appears in the trigger.
+     */
+    Indicator: ElementType;
+    /**
+     * The positioner that wraps the content.
+     */
+    Positioner: ElementType;
+    /**
+     * The content of the select component.
+     */
+    Content: ElementType;
+    /**
+     * A group of items in the select component.
+     */
+    ItemGroup: ElementType;
+    /**
+     * The label for a group of items in the select component.
+     */
+    ItemGroupLabel: ElementType;
+    /**
+     * An individual item in the select component.
+     */
+    Item: ElementType;
+    /**
+     * The text that labels a single radio of the field.
+     */
+    ItemText: ElementType;
+    /**
+     * The indicator that appears when the item has been selected.
+     */
+    ItemIndicator: ElementType;
+    /**
+     * The native select for use within a field.
+     */
+    HiddenSelect: ElementType;
+}
+
+/**
+ * The positioner that contains the dropdown.
+ */
+declare function SelectPositioner(props: SelectPositionerProps): JSX_2.Element;
+export { SelectPositioner }
+export { SelectPositioner as SelectPositioner_alias_1 }
+export { SelectPositioner as SelectPositioner_alias_2 }
+
+declare type SelectProps = SelectRootProps<SelectCollectionItem> & BaseSelectProps & SelectVariantProps;
 export { SelectProps }
 export { SelectProps as SelectProps_alias_1 }
+export { SelectProps as SelectProps_alias_2 }
+
+/**
+ * This module contains the Select primitives
+ * @module 'react/select'
+ */
+/**
+ * The SelectRoot component is the context provider for the Select component.
+ */
+declare function SelectRoot(props: SelectRootProps<SelectCollectionItem> & SelectVariantProps): JSX_2.Element;
+export { SelectRoot }
+export { SelectRoot as SelectRoot_alias_1 }
+export { SelectRoot as SelectRoot_alias_2 }
+
+/**
+ * The trigger that opens the dropdown.
+ */
+declare function SelectTrigger(props: SelectTriggerProps): JSX_2.Element;
+export { SelectTrigger }
+export { SelectTrigger as SelectTrigger_alias_1 }
+export { SelectTrigger as SelectTrigger_alias_2 }
+
+export { SelectValueChangeDetails }
+export { SelectValueChangeDetails as SelectValueChangeDetails_alias_1 }
+export { SelectValueChangeDetails as SelectValueChangeDetails_alias_2 }
+
+/**
+ * The text that appears in the trigger.
+ */
+declare function SelectValueText(props: SelectValueTextProps): JSX_2.Element;
+export { SelectValueText }
+export { SelectValueText as SelectValueText_alias_1 }
+export { SelectValueText as SelectValueText_alias_2 }
 
 export { Sensor }
 
@@ -3047,6 +3939,18 @@ declare type SpinnerProps = SVGProps<SVGSVGElement> & {
 export { SpinnerProps }
 export { SpinnerProps as SpinnerProps_alias_1 }
 
+/**
+ * Splits the properties of an object into multiple groups based on lists of keys.
+ * @param props - The object to split.
+ * @param keyGroups - The lists of keys to include in each group.
+ * @returns An array of objects: each containing the properties specified in the corresponding key group, and the last object containing the remaining keys.
+ */
+declare function splitProps<T extends object>(props: T, ...keyGroups: (keyof T)[][]): {
+    [K in keyof T]?: T[K];
+}[];
+export { splitProps }
+export { splitProps as splitProps_alias_1 }
+
 /**
  * This module contains the tag component.
  * @module
@@ -3061,6 +3965,109 @@ declare type StaticTagProps = HTMLAttributes<HTMLSpanElement> & TagVariantProps
 export { StaticTagProps }
 export { StaticTagProps as StaticTagProps_alias_1 }
 
+/**
+ * The Switch component is a and abstraction of the primitives that displays a
+ * controlled Switch with a label.
+ * @description [Cerberus Docs] https://cerberus.digitalu.design/react/switch
+ * @description [Ark Docs] https://ark-ui.com/docs/components/switch
+ */
+declare function Switch(props: SwitchProps): JSX_2.Element;
+export { Switch }
+export { Switch as Switch_alias_1 }
+export { Switch as Switch_alias_2 }
+
+/**
+ * The SwitchControl component is the visual input for the Switch.
+ */
+declare function SwitchControl(props: SwitchControlProps): JSX_2.Element;
+export { SwitchControl }
+export { SwitchControl as SwitchControl_alias_1 }
+export { SwitchControl as SwitchControl_alias_2 }
+
+/**
+ * The SwitchHiddenInput component is the native input for the Switch.
+ */
+declare const SwitchHiddenInput: ForwardRefExoticComponent<Switch_2.HiddenInputProps & RefAttributes<HTMLInputElement>>;
+export { SwitchHiddenInput }
+export { SwitchHiddenInput as SwitchHiddenInput_alias_1 }
+export { SwitchHiddenInput as SwitchHiddenInput_alias_2 }
+
+export declare function SwitchIndicator(): JSX_2.Element;
+
+/**
+ * The SwitchLabel component is the label for the Switch.
+ */
+declare function SwitchLabel(props: SwitchLabelProps): JSX_2.Element;
+export { SwitchLabel }
+export { SwitchLabel as SwitchLabel_alias_1 }
+export { SwitchLabel as SwitchLabel_alias_2 }
+
+/**
+ * An Object containing the parts of the Radio component. For users that
+ * prefer Object component syntax.
+ *
+ * @remarks
+ *
+ * When using object component syntax, you import the SwitchParts object and
+ * the entire family of components vs. only what you use.
+ */
+declare const SwitchParts: SwitchPartsValue;
+export { SwitchParts }
+export { SwitchParts as SwitchParts_alias_1 }
+export { SwitchParts as SwitchParts_alias_2 }
+
+/**
+ * This module contains the parts of the Radio parts.
+ * @module 'radio/parts'
+ */
+declare interface SwitchPartsValue {
+    /**
+     * The container of the field.
+     */
+    Root: ElementType;
+    /**
+     * The label of the field.
+     */
+    Label: ElementType;
+    /**
+     * The visual input of the switch.
+     */
+    Control: ElementType;
+    /**
+     * The thumb item of the switch.
+     */
+    Thumb: ElementType;
+    /**
+     * The native input for the switch.
+     */
+    HiddenInput: ElementType;
+}
+
+declare type SwitchProps = SwitchRootProps & SwitchRecipeVariantProps;
+export { SwitchProps }
+export { SwitchProps as SwitchProps_alias_1 }
+export { SwitchProps as SwitchProps_alias_2 }
+
+/**
+ * This module contains the Switch primitives
+ * @module 'react/switch'
+ */
+/**
+ * The SwitchRoot component is the context provider for the Switch components.
+ */
+declare function SwitchRoot(props: SwitchRootProps & SwitchRecipeVariantProps): JSX_2.Element;
+export { SwitchRoot }
+export { SwitchRoot as SwitchRoot_alias_1 }
+export { SwitchRoot as SwitchRoot_alias_2 }
+
+/**
+ * The SwitchThumb component is the thumb for the Switch.
+ */
+declare function SwitchThumb(props: SwitchThumbProps): JSX_2.Element;
+export { SwitchThumb }
+export { SwitchThumb as SwitchThumb_alias_1 }
+export { SwitchThumb as SwitchThumb_alias_2 }
+
 /**
  * This module contains the types for the Cerberus React configuration.
  * @module config.types
@@ -3331,34 +4338,10 @@ declare function Text_2(props: PropsWithChildren<TextProps>): JSX_2.Element;
 export { Text_2 as Text }
 export { Text_2 as Text_alias_1 }
 
-/**
- * A component that allows the user to input large blocks of text.
- * @see https://cerberus.digitalu.design/react/textarea
- */
-declare function Textarea(props: TextareaProps): JSX.Element;
+declare const Textarea: typeof FieldTextarea;
 export { Textarea }
 export { Textarea as Textarea_alias_1 }
-
-/**
- * This module contains the Textarea component.
- * @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 = InputVariantProps & TextareaBaseProps;
-export { TextareaProps }
-export { TextareaProps as TextareaProps_alias_1 }
+export { Textarea as Textarea_alias_2 }
 
 declare type TextElements = 'p' | 'strong' | 'em' | 'small' | 'span';
 export { TextElements }
@@ -3491,52 +4474,6 @@ 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.
@@ -3550,9 +4487,51 @@ declare interface ToggleHookReturn {
 export { ToggleHookReturn }
 export { ToggleHookReturn as ToggleHookReturn_alias_1 }
 
-declare type ToggleProps = ToggleBase & ToggleVariantProps;
-export { ToggleProps }
-export { ToggleProps as ToggleProps_alias_1 }
+/**
+ * The ToggleIndicator is used to render the indicator of the Toggle component
+ * based on the pressed state.
+ */
+declare const ToggleIndicator: ForwardRefExoticComponent<Toggle.IndicatorProps & RefAttributes<HTMLDivElement>>;
+export { ToggleIndicator }
+export { ToggleIndicator as ToggleIndicator_alias_1 }
+export { ToggleIndicator as ToggleIndicator_alias_2 }
+
+/**
+ * An Object containing the parts of the Radio component. For users that
+ * prefer Object component syntax.
+ *
+ * @remarks
+ *
+ * When using object component syntax, you import the RadioParts object and
+ * the entire family of components vs. only what you use.
+ */
+declare const ToggleParts: TogglePartsValue;
+export { ToggleParts }
+export { ToggleParts as ToggleParts_alias_1 }
+export { ToggleParts as ToggleParts_alias_2 }
+
+/**
+ * This module contains the parts of the Toggle parts.
+ * @module 'toggle/parts'
+ */
+declare interface TogglePartsValue {
+    /**
+     * The container of the toggle.
+     */
+    Root: ElementType;
+    /**
+     * The indicator that appears when a toggle is pressed.
+     */
+    Indicator: ElementType;
+}
+
+/**
+ * The ToggleRoot is used to manage the state of the Toggle component.
+ */
+declare const ToggleRoot: ForwardRefExoticComponent<Toggle.RootProps & RefAttributes<HTMLButtonElement>>;
+export { ToggleRoot }
+export { ToggleRoot as ToggleRoot_alias_1 }
+export { ToggleRoot as ToggleRoot_alias_2 }
 
 /**
  * The Tooltip component is used to provide additional information about an element when it is hovered over.
@@ -3647,13 +4626,7 @@ export { useCTAModal }
 export { useCTAModal as useCTAModal_alias_1 }
 
 /**
- * A hook for formatting and validating date inputs. The date format defaults to US Military format.
- * @example
- * ```tsx
- * const MyComponent = () => {
- *  const date = useDate({ initialValue: '01 JAN 2024' })
- *  return <input onChange={date.onChange} type="text" value={date.value} />
- * }
+ * @deprecated use the DatePicker family instead
  */
 declare function useDate(options?: UseDateOptions): UseDateReturn;
 export { useDate }
@@ -3719,9 +4692,7 @@ 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 }
+export declare function useFieldContext(): FieldContextValue;
 
 /**
  * Provides a hook for using a custom modal via the native dialog element
@@ -3855,9 +4826,7 @@ 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
+ * @deprecated Will be removed in v1. Use ToggleParts instead.
  */
 declare function useToggle(options?: UseToggleOptions): ToggleHookReturn;
 export { useToggle }