import { JSXSlack } from '../../jsx';
import { LayoutBlockProps } from './utils';
export interface SectionProps extends LayoutBlockProps {
    children: JSXSlack.ChildElements;
}
interface FieldProps {
    children: JSXSlack.ChildElements;
}
export declare const availableSectionAccessoryTypes: ("input" | "button" | "overflow" | "image" | "checkboxes" | "datepicker" | "users_select" | "multi_users_select" | "static_select" | "multi_static_select" | "conversations_select" | "multi_conversations_select" | "channels_select" | "multi_channels_select" | "external_select" | "multi_external_select" | "radio_buttons" | "timepicker" | "workflow_button")[];
/**
 * Generate the field for `<Section>` block element.
 *
 * By using 1 to 10 `<Field>` components in immediate child of `<Section>`, you
 * can insert the additional two-column text(s) after the main message.
 *
 * Of course, you can format the text through HTML-like elements.
 *
 * ```jsx
 * <Blocks>
 *   <Section>
 *     Informations about jsx-slack are here.
 *     <Field>
 *       <b>GitHub:</b>
 *     </Field>
 *     <Field>
 *       <a href="https://github.com/yhatt/jsx-slack">yhatt/jsx-slack</a>
 *     </Field>
 *     <Field>
 *       <b>npm:</b>
 *     </Field>
 *     <Field>
 *       <a href="https://npm.im/jsx-slack">jsx-slack</a>
 *     </Field>
 *   </Section>
 * </Blocks>
 * ```
 *
 * @return The JSON of text composition object suited to section's field
 */
export declare const Field: import("../../jsx-internals").BuiltInComponent<FieldProps>;
/**
 * [The `section` layout block](https://api.slack.com/reference/messaging/blocks#section)
 * to display text message, and optional fields / the accessory block element.
 *
 * You can style text contents through HTML-like formatting. For example, insert
 * a line break by `<br />`, style text as bold with `<b>`, make paragraph
 * through `<p>`, and create hyperlink via `<a>`.
 *
 * ```jsx
 * <Blocks>
 *   <Section>
 *     <p><i>Hello, world!</i></p>
 *     <p>
 *       <b><a href="https://github.com/yhatt/jsx-slack/">jsx-slack</a></b>
 *       <br />
 *       Helps to create an amazing Slack app, with familiar HTML syntax!
 *     </p>
 *   </Section>
 * </Blocks>
 * ```
 *
 * **NOTE**: Basic characters for styling text, `*bold*`, `_italic_`,
 * `~strike~`, `` `code` ``, ` ```code block``` `, and `> quote` _still can
 * use_. Consider using `<Escape>` to sanitize them if you want.
 *
 * ### Accessory
 *
 * A one of supported accessory component can show in side-by-side (or just
 * below) of the message by placing it in immediate child of `<Section>`.
 *
 * ```jsx
 * <Blocks>
 *   <Section>
 *     You can add an image of so cute kitten :cat:
 *     <Image src="https://placekitten.com/256/256" alt="Kitten" />
 *   </Section>
 * </Blocks>
 * ```
 *
 * You can pick one as an accessory from following:
 *
 * - `<Image>` (`<img>`)
 * - `<Button>` (`<button>`)
 * - `<Select>` (`<select>`)
 * - `<ExternalSelect>`
 * - `<UsersSelect>`
 * - `<ConversationsSelect>`
 * - `<ChannelsSelect>`
 * - `<Overflow>`
 * - `<DatePicker>`
 * - `<TimePicker>`
 * - `<CheckboxGroup>`
 * - `<RadioButtonGroup>`
 *
 * ### Fields
 *
 * By using `<Field>` component(s) in immediate child of `<Section>`, you can
 * insert the additional two-column text(s) after the main content of message.
 *
 * `<Section>` allows containing up to 10 fields.
 *
 * @return The partial JSON for `section` layout block
 */
export declare const Section: import("../../jsx-internals").BuiltInComponent<SectionProps>;
export {};