import type { Snippet } from 'svelte';
type GraphicPreset = 'zero-content';
type Props = {
    /** Illustration / icon. Snippet for custom content (consumer-sized), OR a preset name to use a built-in illustration. Omit for no graphic. Current presets: `'zero-content'`. */
    graphic?: Snippet | GraphicPreset;
    /** Heading. May contain HTML — sanitized via `HtmlHelper.sanitizeHtml` before render. */
    title?: string;
    /** Body text. May contain HTML — sanitized before render. */
    description?: string;
    /** Action snippet below the description (typically Button / button group). */
    action?: Snippet;
    /** Spacing scale: `compact` for inline lists / dropdowns, `default` for modals / list views, `spacious` for hero / first-run. @default 'default' */
    layout?: 'compact' | 'default' | 'spacious';
};
/**
 * EmptyState — centered placeholder for empty lists, tables, search results, first-run surfaces and any "nothing here" scenario. Renders an optional graphic (Snippet — consumer-sized, OR the built-in `'zero-content'` preset illustration), an optional HTML-capable title and description (both sanitized), and an optional action snippet. The `layout` prop picks one of three spacing scales — compact / default / spacious — covering inline-empties through hero-empties without separate components.
 *
 * Width is `100%` of the container — wrap or constrain in the consumer's layout if a narrower target is wanted.
 *
 * ### CSS Custom Properties
 * | Property | Description | Default |
 * |---|---|---|
 * | `--sc-kit--empty-state--padding-block` | Vertical padding | per layout |
 * | `--sc-kit--empty-state--padding-inline` | Horizontal padding | per layout |
 * | `--sc-kit--empty-state--gap--graphic` | Gap below the graphic | per layout |
 * | `--sc-kit--empty-state--gap--title` | Gap between title and description | per layout |
 * | `--sc-kit--empty-state--gap--action` | Gap above the action | per layout |
 * | `--sc-kit--empty-state--title--font-size` | Title font size | `--sc-kit--font-size--lg` |
 * | `--sc-kit--empty-state--title--color` | Title color | `--sc-kit--color--text--primary` |
 * | `--sc-kit--empty-state--title--font-weight` | Title weight | `--sc-kit--font-weight--semibold` |
 * | `--sc-kit--empty-state--description--font-size` | Description font size | `--sc-kit--font-size--md` |
 * | `--sc-kit--empty-state--description--color` | Description color | `--sc-kit--color--text--secondary` |
 * | `--sc-kit--empty-state--description--line-height` | Description line-height | `--sc-kit--leading--relaxed` |
 * | `--sc-kit--empty-state--graphic--width` | Preset graphic width | `13.3125rem` (213px) |
 * | `--sc-kit--empty-state--graphic--height` | Preset graphic height | `12.3125rem` (197px) |
 */
declare const Cmp: import("svelte").Component<Props, {}, "">;
type Cmp = ReturnType<typeof Cmp>;
export default Cmp;