import { ReactNode } from 'react';
import { SpacingToken } from '../../../utils/spacing.js';
import { ResponsiveValue } from '../../../hooks/use-responsive-value.js';
/**
 * @description
 * The CollapsibleContent component renders the content that is shown or hidden
 * when the parent Collapsible component is expanded or collapsed.
 */
export interface CollapsibleContentProps {
    /**
     * The content to be shown or hidden.
     */
    children: ReactNode;
    /**
     * Sets the left indentation of the panel content with a Unity spacing token.
     * Accepts responsive values such as `{ base: '$400', md: '$800' }`.
     * @default '$400'
     */
    leftMargin?: SpacingToken | ResponsiveValue<SpacingToken>;
}
/**
 * The content component for a Collapsible.
 *
 * This component renders a DisclosurePanel that shows or hides its content
 * based on the expanded state of the parent Collapsible component.
 * @example
 * ```tsx
 * import {
 *   Collapsible,
 *   CollapsibleContent,
 *   CollapsibleTitle,
 * } from '@payfit/unity-components'
 *
 * function Example() {
 *   return (
 *     <Collapsible>
 *       <CollapsibleTitle>Section Title</CollapsibleTitle>
 *       <CollapsibleContent leftMargin={{ initial: '$400', md: '$800' }}>
 *         This content will be shown or hidden based on the expanded state.
 *       </CollapsibleContent>
 *     </Collapsible>
 *   )
 * }
 * ```
 * @remarks
 * - The content is visible only when the parent Collapsible is expanded.
 * - The default `leftMargin` is `$400`, matching the standard title indentation.
 * - Pass a responsive `leftMargin` value to adapt indentation across breakpoints.
 * @see {@link Collapsible} - The parent component
 * @see {@link CollapsibleTitle} - The title component that toggles the expanded state
 * @param {CollapsibleContentProps} props - The component props
 * @param {ReactNode} props.children - The content to be shown or hidden
 * @param {React.Ref<HTMLDivElement>} ref - A ref to the underlying HTML div element
 * @returns {JSX.Element} The rendered CollapsibleContent component
 */
declare const CollapsibleContent: import('react').ForwardRefExoticComponent<CollapsibleContentProps & import('react').RefAttributes<HTMLDivElement>>;
export { CollapsibleContent };