import { ReactNode } from "react";
type AccordionProps = {
    /** Head is the top section of the accordion. It can be a string or a React node. */
    head: string | ReactNode;
    /** Children is the content of the accordion. It can be a string or a React node. */
    children: ReactNode;
    /** Expanded is a boolean that determines if the accordion is expanded by default or not. */
    expanded?: boolean;
    /** withDivider is a boolean that determines if the accordion should have a divider or not, typically used whe lots of accordions are listed together. */
    withDivider?: boolean;
    /** withBackground is a boolean that determines if the accordion should have 'surface variant' background.  */
    withBackground?: boolean;
    /** className is a string that can be used to add custom styling to the accordion. */
    className?: string;
};
/**
 * The Accordion component is used to show and hide content.
 * It is typically used when there is a lot of content that should be hidden by default. It is built with the HTML details and summary elements.
 *
 * To facilitate different use cases, the Accordion has some props that can be used to customize the component.
 * More importantly, the Accordion has a head prop that can be used to pass in either a string or any React node.
 * This is useful when you want to customize the head of the accordion. Same goes for the children prop.
 */
export declare const Accordion: import("@gnist/component-utils").VanillaRecipeComponent<import("react").ElementType, import("react").ForwardRefExoticComponent<AccordionProps & import("react").RefAttributes<HTMLDetailsElement>>, import("@gnist/component-utils").VariantSelection<{
    withDivider: {
        true: {
            borderBottom: `var(--${string}) solid var(--${string})` | `var(--${string}) solid var(--${string}, ${string})` | `var(--${string}) solid var(--${string}, ${number})` | `var(--${string}, ${string}) solid var(--${string})` | `var(--${string}, ${string}) solid var(--${string}, ${string})` | `var(--${string}, ${string}) solid var(--${string}, ${number})` | `var(--${string}, ${number}) solid var(--${string})` | `var(--${string}, ${number}) solid var(--${string}, ${string})` | `var(--${string}, ${number}) solid var(--${string}, ${number})`;
        };
    };
    withBackground: {
        true: {
            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        };
    };
}>>;
export {};
//# sourceMappingURL=Accordion.d.ts.map