import * as React from 'react'; import { RemoteComponentType } from '@remote-ui/core'; export type Channel = { domain?: any[] | undefined; format?: ((CurrencyFormat | UnitIdentifier | { style?: 'decimal' | undefined; }) | ('capitalize' | { [x: string]: string; })) | undefined; label?: string | undefined; nice?: boolean | undefined; tickFormat?: ((CurrencyFormat | UnitIdentifier | { style?: 'decimal' | undefined; }) | ('capitalize' | { [x: string]: string; })) | undefined; ticks?: number | undefined; value?: (string | number) | undefined; zero?: boolean | undefined; }; export type CurrencyFormat = { currency: 'AED' | 'AFN' | 'ALL' | 'AMD' | 'ANG' | 'AOA' | 'ARS' | 'AUD' | 'AWG' | 'AZN' | 'BAM' | 'BBD' | 'BDT' | 'BGN' | 'BHD' | 'BIF' | 'BMD' | 'BND' | 'BOB' | 'BRL' | 'BSD' | 'BTN' | 'BWP' | 'BYN' | 'BZD' | 'CAD' | 'CDF' | 'CHF' | 'CLP' | 'CNY' | 'COP' | 'CRC' | 'CUC' | 'CUP' | 'CVE' | 'CZK' | 'DJF' | 'DKK' | 'DOP' | 'DZD' | 'EGP' | 'ERN' | 'ETB' | 'EUR' | 'FJD' | 'FKP' | 'GBP' | 'GEL' | 'GHS' | 'GIP' | 'GMD' | 'GNF' | 'GTQ' | 'GYD' | 'HKD' | 'HNL' | 'HRK' | 'HTG' | 'HUF' | 'IDR' | 'ILS' | 'INR' | 'IQD' | 'IRR' | 'ISK' | 'JMD' | 'JOD' | 'JPY' | 'KES' | 'KGS' | 'KHR' | 'KMF' | 'KPW' | 'KRW' | 'KWD' | 'KYD' | 'KZT' | 'LAK' | 'LBP' | 'LKR' | 'LRD' | 'LSL' | 'LYD' | 'MAD' | 'MDL' | 'MGA' | 'MKD' | 'MMK' | 'MNT' | 'MOP' | 'MRU' | 'MUR' | 'MVR' | 'MWK' | 'MXN' | 'MYR' | 'MZN' | 'NAD' | 'NGN' | 'NIO' | 'NOK' | 'NPR' | 'NZD' | 'OMR' | 'PAB' | 'PEN' | 'PGK' | 'PHP' | 'PKR' | 'PLN' | 'PYG' | 'QAR' | 'RON' | 'RSD' | 'RUB' | 'RWF' | 'SAR' | 'SBD' | 'SCR' | 'SDG' | 'SEK' | 'SGD' | 'SHP' | 'SLL' | 'SOS' | 'SRD' | 'SSP' | 'STN' | 'SYP' | 'SZL' | 'THB' | 'TJS' | 'TMT' | 'TND' | 'TOP' | 'TRY' | 'TTD' | 'TWD' | 'TZS' | 'UAH' | 'UGX' | 'USD' | 'UYU' | 'UZS' | 'VES' | 'VND' | 'VUV' | 'WST' | 'XAF' | 'XCD' | 'XOF' | 'XPF' | 'YER' | 'ZAR' | 'ZMW'; fractionalDigits?: (0 | 'auto') | undefined; }; export type UnitIdentifier = { unit: 'acre' | 'bit' | 'byte' | 'celsius' | 'centimeter' | 'day' | 'degree' | 'fahrenheit' | 'fluid-ounce' | 'foot' | 'gallon' | 'gigabit' | 'gigabyte' | 'gram' | 'hectare' | 'hour' | 'inch' | 'kilobit' | 'kilobyte' | 'kilogram' | 'kilometer' | 'liter' | 'megabit' | 'megabyte' | 'meter' | 'mile' | 'mile-scandinavian' | 'milliliter' | 'millimeter' | 'millisecond' | 'minute' | 'month' | 'ounce' | 'percent' | 'petabyte' | 'pound' | 'second' | 'stone' | 'terabit' | 'terabyte' | 'week' | 'yard' | 'year' | `${'acre' | 'bit' | 'byte' | 'celsius' | 'centimeter' | 'day' | 'degree' | 'fahrenheit' | 'fluid-ounce' | 'foot' | 'gallon' | 'gigabit' | 'gigabyte' | 'gram' | 'hectare' | 'hour' | 'inch' | 'kilobit' | 'kilobyte' | 'kilogram' | 'kilometer' | 'liter' | 'megabit' | 'megabyte' | 'meter' | 'mile' | 'mile-scandinavian' | 'milliliter' | 'millimeter' | 'millisecond' | 'minute' | 'month' | 'ounce' | 'percent' | 'petabyte' | 'pound' | 'second' | 'stone' | 'terabit' | 'terabyte' | 'week' | 'yard' | 'year'}-per-${'acre' | 'bit' | 'byte' | 'celsius' | 'centimeter' | 'day' | 'degree' | 'fahrenheit' | 'fluid-ounce' | 'foot' | 'gallon' | 'gigabit' | 'gigabyte' | 'gram' | 'hectare' | 'hour' | 'inch' | 'kilobit' | 'kilobyte' | 'kilogram' | 'kilometer' | 'liter' | 'megabit' | 'megabyte' | 'meter' | 'mile' | 'mile-scandinavian' | 'milliliter' | 'millimeter' | 'millisecond' | 'minute' | 'month' | 'ounce' | 'percent' | 'petabyte' | 'pound' | 'second' | 'stone' | 'terabit' | 'terabyte' | 'week' | 'yard' | 'year'}`; }; export type ExternalLink = { /** Label of an external link. */ label: string; /** URL of an external link. */ href: string; }; export type DetailPageModuleTable = { /** Sets the visual style to pending. */ pending: boolean; /** An event handler to create a new item. */ createAction?: (() => void) | undefined; /** An array of extra actions to display in the module. */ extraActions?: DetailPageModuleAction[] | undefined; /** The message to display when the table is empty. */ emptyMessage?: string | undefined; /** Sets the visual style to `error`, displaying an error message. */ error?: DetailPageModuleDisplayError | undefined; /** The columns to display in the table. */ columns: DetailPageModuleTableColumn[]; /** The items to display in the table. */ items?: DetailPageModuleTableItem[] | undefined; /** An event handler for when the user clicks an item. */ onItemPress?: ((item: DetailPageModuleTableItem) => void) | undefined; /** Actions to display in the row. */ rowActions?: (DetailPageModuleTableRowAction | DetailPageModuleTableRowActionGroup)[] | undefined; /** The type of the module. */ type: 'table'; }; export type DetailPageModuleAction = { /** The label of the action. */ label: string; /** An event handler for the action. */ onPress: () => void; }; export type DetailPageModuleDisplayError = { /** The error message to display. */ message: string; /** An action to handle the error. */ errorAction?: { /** The title of the error action. */ title: string; /** Native `href` attribute. */ href: string; } | undefined; }; export type DetailPageModuleTableColumn = { /** The unique identifier for the column. */ key: string; /** The label to display for the column. */ label: string; /** Sets the column label to be hidden. */ hideHeaderLabel?: boolean | undefined; /** Cell format options. */ cell?: DetailPageModuleTableCellFormat | undefined; }; export type DetailPageModuleTableCellFormat = { /** The type of the cell. */ type: 'text'; } | { /** The type of the cell. */ type: 'link'; /** A map of URLs to link text. If no mapping is found for a URL, the URL itself is used as the link text. */ linkMap?: { [x: string]: string; } | undefined; } | { /** The type of the cell. */ type: 'date'; } | { /** The type of the cell. */ type: 'id'; } | { /** The type of the cell. */ type: 'status'; /** A map of cell values to status types. */ statusMap: { [x: string]: 'neutral' | 'urgent' | 'warning' | 'negative' | 'positive' | 'info'; }; } | { /** The type of the cell. */ type: 'currency'; /** Three-letter ISO-4217 currency code or a non-ISO currency code like `USDC` for USD Coin or `BTC` for Bitcoin. */ currency: string; }; export type DetailPageModuleTableItem = { /** The unique identifier for the item. */ id: string; } & { [x: string]: string | number; }; export type DetailPageModuleTableRowAction = { /** The unique identifier for the action. */ id: string; /** The label of the action. */ label: string; /** An event handler for the action. */ onPress: (item: DetailPageModuleTableItem) => void; /** The type of the action. */ type?: ('default' | 'destructive') | undefined; }; export type DetailPageModuleTableRowActionGroup = { /** The unique identifier for the action group. */ id: string; /** The label of the action group. */ label: string; /** The actions to display in the action group. */ actions: DetailPageModuleTableRowAction[]; }; export type DetailPageModulePropertyList = { /** Sets the visual style to pending. */ pending: boolean; /** An event handler to create a new item. */ createAction?: (() => void) | undefined; /** An array of extra actions to display in the module. */ extraActions?: DetailPageModuleAction[] | undefined; /** The message to display when the table is empty. */ emptyMessage?: string | undefined; /** Sets the visual style to `error`, displaying an error message. */ error?: DetailPageModuleDisplayError | undefined; /** The orientation of the list. */ orientation?: ('vertical' | 'horizontal') | undefined; /** The items to display in the property list. Each item defines a label-values pair. */ items?: DetailPagePropertyListItem[] | undefined; /** The type of the module. */ type: 'propertyList'; }; export type DetailPagePropertyListItem = { /** The label of the property. */ label: string; /** The values of the property. */ values: { /** The label of the value. */ label?: DetailPageModulePropertyListItemValue | undefined; /** The sub-value of the value. */ value?: DetailPageModulePropertyListItemValue | undefined; }[]; /** The description of the property. */ description?: string | undefined; }; export type DetailPageModulePropertyListItemValue = { /** The label of the value. */ text?: string | undefined; /** An action to display in the value. */ action?: { /** The title of the action. */ title: string; /** An event handler for when the user clicks the action. */ onPress: () => void; } | undefined; }; export type ConfirmCloseMessages = { title: string; description: string; cancelAction: string; exitAction: string; }; export type SignInActionWithHref = { label: string; href: string; target?: string | undefined; onPress?: ((event: PressEvent) => void) | undefined; }; export type SignInActionWithOnPress = { label: string; href?: string | undefined; target?: string | undefined; onPress: (event: PressEvent) => void; }; export type AccordionItemProps = { /** The contents of the component. */ children: React.ReactNode; /** A title describing the `AccordionItem`. */ title: React.ReactNode; /** A component containing actions that a user can take on the `AccordionItem`. If there are more than 2 actions, use an overflow menu to show the rest. */ actions?: React.ReactNode; /** Whether or not the `AccordionItem` should be open on the first render. */ defaultOpen?: boolean | undefined; /** A component containing an optional `Img` or `Icon` to help identify the `AccordionItem`. */ media?: React.ReactNode; /** Callback when the open state has changed. */ onChange?: ((isOpen: boolean) => void) | undefined; /** An optional subtitle with addition descriptive information. */ subtitle?: React.ReactNode; }; export declare const AccordionItem: ("AccordionItem" & { readonly type?: "AccordionItem" | undefined; readonly props?: AccordionItemProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("AccordionItem" & { readonly type?: "AccordionItem" | undefined; readonly props?: AccordionItemProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type AccordionItem = RemoteComponentType<'AccordionItem', AccordionItemProps>; export type AccordionProps = { /** One or more `AccordionItem` components. */ children: React.ReactNode; }; export declare const Accordion: ("Accordion" & { readonly type?: "Accordion" | undefined; readonly props?: AccordionProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("Accordion" & { readonly type?: "Accordion" | undefined; readonly props?: AccordionProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type Accordion = RemoteComponentType<'Accordion', AccordionProps>; export type BadgeProps = { /** The contents of the component. */ children: React.ReactNode; type?: ('neutral' | 'urgent' | 'warning' | 'negative' | 'positive' | 'info') | undefined; }; export declare const Badge: ("Badge" & { readonly type?: "Badge" | undefined; readonly props?: BadgeProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("Badge" & { readonly type?: "Badge" | undefined; readonly props?: BadgeProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type Badge = RemoteComponentType<'Badge', BadgeProps>; export type BannerProps = { actions?: React.ReactNode; description?: React.ReactNode; onDismiss?: (() => void) | undefined; title?: React.ReactNode; type?: ('default' | 'caution' | 'critical') | undefined; }; export declare const Banner: ("Banner" & { readonly type?: "Banner" | undefined; readonly props?: BannerProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("Banner" & { readonly type?: "Banner" | undefined; readonly props?: BannerProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type Banner = RemoteComponentType<'Banner', BannerProps>; export type BarChartProps = { /** The data used to generate the chart. */ data: { [x: string]: any; }[]; /** The property or accessor for the point on the x axis. */ x: string | number | Channel; /** The property or accessor for the point on the y axis. */ y: string | number | Channel; /** Determines whether to render labels and ticks for each axis. */ axis?: ('x' | 'y' | 'both' | 'none') | undefined; /** Groups data by color based on a property or accessor. */ color?: (string | number | Channel) | undefined; /** Determines whether to render grid lines for each axis. */ grid?: ('x' | 'y' | 'both' | 'none') | undefined; /** Determines whether to render the legend (when more than one item is present). */ legend?: boolean | undefined; /** Determines whether to render a tooltip when hovering over the chart. */ tooltip?: boolean | undefined; /** Groups data based on a property or accessor. */ z?: (string | number | Channel) | undefined; }; export declare const BarChart: ("BarChart" & { readonly type?: "BarChart" | undefined; readonly props?: BarChartProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("BarChart" & { readonly type?: "BarChart" | undefined; readonly props?: BarChartProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type BarChart = RemoteComponentType<'BarChart', BarChartProps>; export type BoxProps = { /** The contents of the component. */ children: React.ReactNode; css?: { /** Horizontal alignment. See [Layout properties](https://docs.stripe.com/stripe-apps/style#layout-properties) for details. */ alignSelfX?: ('start' | 'center' | 'end' | 'stretch') | undefined; /** Vertical alignment. See [Layout properties](https://docs.stripe.com/stripe-apps/style#layout-properties) for details. */ alignSelfY?: ('top' | 'center' | 'baseline' | 'bottom' | 'stretch') | undefined; /** Horizontal alignment. See [Layout properties](https://docs.stripe.com/stripe-apps/style#layout-properties) for details. */ alignX?: ('start' | 'center' | 'end' | 'stretch') | undefined; /** Vertical alignment. See [Layout properties](https://docs.stripe.com/stripe-apps/style#layout-properties) for details. */ alignY?: ('top' | 'center' | 'baseline' | 'bottom' | 'stretch') | undefined; backgroundColor?: ('container' | 'surface') | undefined; bleed?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; bleedBottom?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; bleedLeft?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; bleedRight?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; bleedTop?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; bleedX?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; bleedY?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; borderBottomColor?: ('neutral' | 'critical') | undefined; borderBottomLeftRadius?: ('none' | 'xsmall' | 'small' | 'medium' | 'large' | 'rounded') | undefined; borderBottomRightRadius?: ('none' | 'xsmall' | 'small' | 'medium' | 'large' | 'rounded') | undefined; borderBottomStyle?: ('dashed' | 'dotted' | 'double' | 'groove' | 'hidden' | 'inherit' | 'initial' | 'inset' | 'none' | 'outset' | 'revert-layer' | 'revert' | 'ridge' | 'solid' | 'unset') | undefined; /** The width of the border. */ borderBottomWidth?: number | undefined; borderColor?: ('neutral' | 'critical') | undefined; borderLeftColor?: ('neutral' | 'critical') | undefined; borderLeftStyle?: ('dashed' | 'dotted' | 'double' | 'groove' | 'hidden' | 'inherit' | 'initial' | 'inset' | 'none' | 'outset' | 'revert-layer' | 'revert' | 'ridge' | 'solid' | 'unset') | undefined; /** The width of the border. */ borderLeftWidth?: number | undefined; borderRadius?: ('none' | 'xsmall' | 'small' | 'medium' | 'large' | 'rounded') | undefined; borderRightColor?: ('neutral' | 'critical') | undefined; borderRightStyle?: ('dashed' | 'dotted' | 'double' | 'groove' | 'hidden' | 'inherit' | 'initial' | 'inset' | 'none' | 'outset' | 'revert-layer' | 'revert' | 'ridge' | 'solid' | 'unset') | undefined; /** The width of the border. */ borderRightWidth?: number | undefined; borderStyle?: ('dashed' | 'dotted' | 'double' | 'groove' | 'hidden' | 'inherit' | 'initial' | 'inset' | 'none' | 'outset' | 'revert-layer' | 'revert' | 'ridge' | 'solid' | 'unset') | undefined; borderTopColor?: ('neutral' | 'critical') | undefined; borderTopLeftRadius?: ('none' | 'xsmall' | 'small' | 'medium' | 'large' | 'rounded') | undefined; borderTopRightRadius?: ('none' | 'xsmall' | 'small' | 'medium' | 'large' | 'rounded') | undefined; borderTopStyle?: ('dashed' | 'dotted' | 'double' | 'groove' | 'hidden' | 'inherit' | 'initial' | 'inset' | 'none' | 'outset' | 'revert-layer' | 'revert' | 'ridge' | 'solid' | 'unset') | undefined; /** The width of the border. */ borderTopWidth?: number | undefined; /** The width of the border. */ borderWidth?: number | undefined; bottom?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; boxShadow?: ('none' | 'base' | 'top' | 'hover' | 'focus') | undefined; color?: ('brand' | 'primary' | 'secondary' | 'disabled' | 'info' | 'success' | 'attention' | 'critical') | undefined; columnGap?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; display?: 'grid' | undefined; distribute?: ('packed' | 'space-between') | undefined; fill?: ('brand' | 'primary' | 'secondary' | 'disabled' | 'info' | 'success' | 'attention' | 'critical') | undefined; focusRing?: ('none' | 'base' | 'top' | 'hover' | 'focus') | undefined; font?: ('body' | 'bodyEmphasized' | 'caption' | 'heading' | 'kicker' | 'lead' | 'subheading' | 'subtitle' | 'title') | undefined; fontFamily?: ('monospace' | 'ui') | undefined; fontWeight?: ('regular' | 'semibold' | 'bold') | undefined; gap?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; gapX?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; gapY?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; gridColumns?: number | undefined; /** The height of the component. See [Sizing](https://docs.stripe.com/stripe-apps/style#sizing) for details. */ height?: (number | 'auto' | 'fill' | 'min' | 'max' | 'fit' | '1/2' | '1/3' | '2/3' | '1/4' | '2/4' | '3/4' | '1/5' | '2/5' | '3/5' | '4/5' | '1/6' | '2/6' | '3/6' | '4/6' | '5/6' | '1/12' | '2/12' | '3/12' | '4/12' | '5/12' | '6/12' | '7/12' | '8/12' | '9/12' | '10/12' | '11/12') | undefined; inset?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; keyline?: ('neutral' | 'critical') | undefined; left?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; margin?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; marginBottom?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; marginLeft?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; marginRight?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; marginTop?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; marginX?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; marginY?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; /** The height of the component. See [Sizing](https://docs.stripe.com/stripe-apps/style#sizing) for details. */ maxHeight?: (number | 'auto' | 'fill' | 'min' | 'max' | 'fit' | '1/2' | '1/3' | '2/3' | '1/4' | '2/4' | '3/4' | '1/5' | '2/5' | '3/5' | '4/5' | '1/6' | '2/6' | '3/6' | '4/6' | '5/6' | '1/12' | '2/12' | '3/12' | '4/12' | '5/12' | '6/12' | '7/12' | '8/12' | '9/12' | '10/12' | '11/12') | undefined; /** The width of the component. See [Sizing](https://docs.stripe.com/stripe-apps/style#sizing) for details. */ maxWidth?: (number | 'auto' | 'fill' | 'min' | 'max' | 'fit' | '1/2' | '1/3' | '2/3' | '1/4' | '2/4' | '3/4' | '1/5' | '2/5' | '3/5' | '4/5' | '1/6' | '2/6' | '3/6' | '4/6' | '5/6' | '1/12' | '2/12' | '3/12' | '4/12' | '5/12' | '6/12' | '7/12' | '8/12' | '9/12' | '10/12' | '11/12') | undefined; /** The height of the component. See [Sizing](https://docs.stripe.com/stripe-apps/style#sizing) for details. */ minHeight?: (number | 'auto' | 'fill' | 'min' | 'max' | 'fit' | '1/2' | '1/3' | '2/3' | '1/4' | '2/4' | '3/4' | '1/5' | '2/5' | '3/5' | '4/5' | '1/6' | '2/6' | '3/6' | '4/6' | '5/6' | '1/12' | '2/12' | '3/12' | '4/12' | '5/12' | '6/12' | '7/12' | '8/12' | '9/12' | '10/12' | '11/12') | undefined; minTileWidth?: (number | '1/2' | '1/3' | '2/3' | '1/4' | '2/4' | '3/4' | '1/5' | '2/5' | '3/5' | '4/5' | '1/6' | '2/6' | '3/6' | '4/6' | '5/6' | '1/12' | '2/12' | '3/12' | '4/12' | '5/12' | '6/12' | '7/12' | '8/12' | '9/12' | '10/12' | '11/12') | undefined; /** The width of the component. See [Sizing](https://docs.stripe.com/stripe-apps/style#sizing) for details. */ minWidth?: (number | 'auto' | 'fill' | 'min' | 'max' | 'fit' | '1/2' | '1/3' | '2/3' | '1/4' | '2/4' | '3/4' | '1/5' | '2/5' | '3/5' | '4/5' | '1/6' | '2/6' | '3/6' | '4/6' | '5/6' | '1/12' | '2/12' | '3/12' | '4/12' | '5/12' | '6/12' | '7/12' | '8/12' | '9/12' | '10/12' | '11/12') | undefined; overflow?: ('visible' | 'hidden' | 'clip' | 'scroll' | 'auto') | undefined; overflowWrap?: ('break-word' | 'normal') | undefined; overflowX?: ('visible' | 'hidden' | 'clip' | 'scroll' | 'auto') | undefined; overflowY?: ('visible' | 'hidden' | 'clip' | 'scroll' | 'auto') | undefined; padding?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; paddingBottom?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; paddingLeft?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; paddingRight?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; paddingTop?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; paddingX?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; paddingY?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; rowGap?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; stack?: ('x' | 'y' | 'z') | undefined; textAlign?: ('center' | 'end' | 'justify' | 'left' | 'match-parent' | 'right' | 'start') | undefined; textOverflow?: 'ellipsis' | undefined; textTransform?: ('capitalize' | 'uppercase' | 'lowercase' | 'none' | 'full-width' | 'full-size-kana') | undefined; top?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; topShadow?: ('none' | 'base' | 'top' | 'hover' | 'focus') | undefined; whiteSpace?: ('normal' | 'nowrap' | 'pre' | 'pre-wrap' | 'pre-line' | 'break-spaces') | undefined; /** The width of the component. See [Sizing](https://docs.stripe.com/stripe-apps/style#sizing) for details. */ width?: (number | 'auto' | 'fill' | 'min' | 'max' | 'fit' | '1/2' | '1/3' | '2/3' | '1/4' | '2/4' | '3/4' | '1/5' | '2/5' | '3/5' | '4/5' | '1/6' | '2/6' | '3/6' | '4/6' | '5/6' | '1/12' | '2/12' | '3/12' | '4/12' | '5/12' | '6/12' | '7/12' | '8/12' | '9/12' | '10/12' | '11/12') | undefined; wordBreak?: ('normal' | 'break-all' | 'keep-all' | 'break-word') | undefined; wordWrap?: ('break-word' | 'normal') | undefined; wrap?: ('wrap' | 'nowrap' | 'wrap-reverse') | undefined; zIndex?: ('overlay' | 'partial') | undefined; } | undefined; }; export declare const Box: ("Box" & { readonly type?: "Box" | undefined; readonly props?: BoxProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("Box" & { readonly type?: "Box" | undefined; readonly props?: BoxProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type Box = RemoteComponentType<'Box', BoxProps>; export type ButtonGroupProps = { /** One or more `Button` components. */ children: React.ReactNode; /** Controls whether or not `Buttons` within the group collapse when there isn't enough space to display them without overflowing. */ collapse?: ('auto' | 'none') | undefined; /** Controls which axis the `ButtonGroup` should span. */ direction?: ('row' | 'column') | undefined; /** Allows overriding the trigger element used for an overflow menu. Must be a component that supports press events. */ menuTrigger?: React.ReactNode; }; export declare const ButtonGroup: ("ButtonGroup" & { readonly type?: "ButtonGroup" | undefined; readonly props?: ButtonGroupProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("ButtonGroup" & { readonly type?: "ButtonGroup" | undefined; readonly props?: ButtonGroupProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type ButtonGroup = RemoteComponentType<'ButtonGroup', ButtonGroupProps>; export type ButtonProps = { /** The contents of the component. */ children: React.ReactNode; css?: { /** Horizontal alignment. See [Layout properties](https://docs.stripe.com/stripe-apps/style#layout-properties) for details. */ alignX?: ('start' | 'center' | 'end' | 'stretch') | undefined; /** The width of the component. See [Sizing](https://docs.stripe.com/stripe-apps/style#sizing) for details. */ width?: (number | 'auto' | 'fill' | 'min' | 'max' | 'fit' | '1/2' | '1/3' | '2/3' | '1/4' | '2/4' | '3/4' | '1/5' | '2/5' | '3/5' | '4/5' | '1/6' | '2/6' | '3/6' | '4/6' | '5/6' | '1/12' | '2/12' | '3/12' | '4/12' | '5/12' | '6/12' | '7/12' | '8/12' | '9/12' | '10/12' | '11/12') | undefined; } | undefined; /** Whether the action is disabled. */ disabled?: boolean | undefined; /** Native `href` attribute. */ href?: string | undefined; /** Handler that is called when the press is released over the target. */ onPress?: ((event: PressEvent) => void) | undefined; /** Sets the visual style to pending and functionally disables the `Button`. */ pending?: boolean | undefined; /** The size of the component. */ size?: ('small' | 'medium' | 'large') | undefined; /** Where to display the linked URL, as the name for a browsing context. */ target?: ('_self' | '_blank' | '_top' | '_parent') | undefined; /** The type of the `Button`. */ type?: ('primary' | 'secondary' | 'destructive') | undefined; }; export declare const Button: ("Button" & { readonly type?: "Button" | undefined; readonly props?: ButtonProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("Button" & { readonly type?: "Button" | undefined; readonly props?: ButtonProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type Button = RemoteComponentType<'Button', ButtonProps>; export type CheckboxProps = { /** If `true`, React will focus the element on mount. */ autoFocus?: boolean | undefined; /** Controls whether the input is selected. When you pass this prop, you must also pass an `onChange` handler that updates the passed value. */ checked?: boolean | undefined; /** Specifies the initial value that a user can change. */ defaultChecked?: boolean | undefined; /** Descriptive text that will be rendered adjacent to the control's label. */ description?: string | undefined; /** Sets whether or not the element should be disabled. Prevents selection. */ disabled?: boolean | undefined; /** Error text that will be rendered below the control. */ error?: string | undefined; /** Specifies the `id` of the `
` this input belongs to. If omitted, it's the closest parent form. */ form?: string | undefined; /** Visually hides the specified elements. The hidden elements will still be present and visible to screen readers. */ hiddenElements?: ('label' | 'description' | 'error')[] | undefined; /** Sets whether the `Checkbox` should be rendered as indeterminate ("partially checked") or not. Note that this is purely visual, and will not change the actual `checked` state of the `Checkbox`. If a `Checkbox` is both `indeterminate` and `checked`, it will display as `indeterminate`. */ indeterminate?: boolean | undefined; /** Sets whether or not the element is in an invalid state. This is a display-only prop, and will not prevent form submission. */ invalid?: boolean | undefined; /** Text that describes the control. Will be both visible and clickable. */ label?: React.ReactNode; /** Specifies the name for this input that's submitted with the form. */ name?: string | undefined; /** Required for controlled inputs. Fires immediately when the input's value is changed by the user (for example, it fires on every keystroke). Behaves like the browser input event. */ onChange?: ((event: React.ChangeEvent) => void) | undefined; /** If `true`, the input is not editable by the user. */ readOnly?: boolean | undefined; /** If `true`, the value must be provided for the form to submit. */ required?: boolean | undefined; /** Overrides the default tab key behavior. Avoid using values other than `-1` and `0`. */ tabIndex?: number | undefined; /** Controls the input's text. When you pass this prop, you must also pass an `onChange` handler that updates the passed value. */ value?: string | undefined; }; export declare const Checkbox: ("Checkbox" & { readonly type?: "Checkbox" | undefined; readonly props?: CheckboxProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("Checkbox" & { readonly type?: "Checkbox" | undefined; readonly props?: CheckboxProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type Checkbox = RemoteComponentType<'Checkbox', CheckboxProps>; export type ChipListProps = { /** One or more `Chip` components. */ children: React.ReactNode; direction?: ('row' | 'row-reverse') | undefined; }; export declare const ChipList: ("ChipList" & { readonly type?: "ChipList" | undefined; readonly props?: ChipListProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("ChipList" & { readonly type?: "ChipList" | undefined; readonly props?: ChipListProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type ChipList = RemoteComponentType<'ChipList', ChipListProps>; export type ChipProps = { /** A string that uniquely identifies the `Chip` amongst other `Chips` that may be presented alongside it. If this property is present without a `value`, the `Chip` will be rendered in the "suggested" style. */ label?: string | undefined; /** The function to be called when the user clicks a "suggested" `Chip` in order to activate it. */ onAddSuggestion?: (() => void) | undefined; /** The function to be called when the user clicks the icon to remove a `Chip`. */ onClose?: (() => void) | undefined; /** The function to be called when the user clicks the right side of an active `Chip` in order to edit the selected value. */ onDropdown?: (() => void) | undefined; /** The currently selected value of a `Chip`. */ value?: (string | string[]) | undefined; }; export declare const Chip: ("Chip" & { readonly type?: "Chip" | undefined; readonly props?: ChipProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("Chip" & { readonly type?: "Chip" | undefined; readonly props?: ChipProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type Chip = RemoteComponentType<'Chip', ChipProps>; export type ContextViewProps = { /** The contents of the component. */ children: React.ReactNode; /** The title of the `ContextView`. This will be displayed at the top of the drawer under that app's name. */ title: string; /** A React fragment containing up to three `Buttons` that will be displayed directly under the header and above the children of the `ContextView`. */ actions?: React.ReactNode; /** A `Banner` component that will be displayed directly under the header and above the children of the `ContextView`. */ banner?: React.ReactElement | undefined; /** A CSS color that contrasts well with `brandIcon`. */ brandColor?: string | undefined; /** A square, 1-color SVG that contrasts well with `brandColor`. */ brandIcon?: string | undefined; /** A description of the view's purpose, can also be used as a subtitle. */ description?: string | undefined; /** A link to an external webpage. This should generally allow the user to view related information on another site with more context than what the app makes available in the app drawer. */ externalLink?: ExternalLink | undefined; /** React node adjacent to any actions in the footer. */ footerContent?: React.ReactNode; /** A primary call to action ("Save" or "Continue") `Button` placed in the footer. */ primaryAction?: React.ReactElement | undefined; /** A secondary call to action ("Cancel") `Button` placed in the footer. */ secondaryAction?: React.ReactElement | undefined; }; export declare const ContextView: ("ContextView" & { readonly type?: "ContextView" | undefined; readonly props?: ContextViewProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("ContextView" & { readonly type?: "ContextView" | undefined; readonly props?: ContextViewProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type ContextView = RemoteComponentType<'ContextView', ContextViewProps>; export type DateFieldProps = { /** Specifies the initial value that a user can change. */ defaultValue?: string | undefined; /** Descriptive text that will be rendered adjacent to the control's label. */ description?: string | undefined; /** Sets whether or not the element should be disabled. Prevents selection. */ disabled?: boolean | undefined; /** Error text that will be rendered below the control. */ error?: string | undefined; /** Visually hides the specified elements. The hidden elements will still be present and visible to screen readers. */ hiddenElements?: ('label' | 'description' | 'error')[] | undefined; /** Sets whether or not the element is in an invalid state. This is a display-only prop, and will not prevent form submission. */ invalid?: boolean | undefined; /** Text that describes the control. Will be both visible and clickable. */ label?: React.ReactNode; onChange?: ((event: string) => void) | undefined; /** The size of the component. */ size?: ('small' | 'medium' | 'large') | undefined; /** Controls the input's text. When you pass this prop, you must also pass an `onChange` handler that updates the passed value. */ value?: string | undefined; }; export declare const DateField: ("DateField" & { readonly type?: "DateField" | undefined; readonly props?: DateFieldProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("DateField" & { readonly type?: "DateField" | undefined; readonly props?: DateFieldProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type DateField = RemoteComponentType<'DateField', DateFieldProps>; export type DetailPageModuleProps = DetailPageModuleTable | DetailPageModulePropertyList; export declare const DetailPageModule: ("DetailPageModule" & { readonly type?: "DetailPageModule" | undefined; readonly props?: DetailPageModuleProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("DetailPageModule" & { readonly type?: "DetailPageModule" | undefined; readonly props?: DetailPageModuleProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type DetailPageModule = RemoteComponentType<'DetailPageModule', DetailPageModuleProps>; export type DetailPagePropertyListProps = { /** Sets the visual style to pending. */ pending: boolean; /** An event handler to create a new item. */ createAction?: (() => void) | undefined; /** The message to display when the table is empty. */ emptyMessage?: string | undefined; /** Sets the visual style to `error`, displaying an error message. */ error?: DetailPageModuleDisplayError | undefined; /** An array of extra actions to display in the module. */ extraActions?: DetailPageModuleAction[] | undefined; /** The items to display in the property list. Each item defines a label-values pair. */ items?: DetailPagePropertyListItem[] | undefined; /** The orientation of the list. */ orientation?: ('vertical' | 'horizontal') | undefined; }; export declare const DetailPagePropertyList: ("DetailPagePropertyList" & { readonly type?: "DetailPagePropertyList" | undefined; readonly props?: DetailPagePropertyListProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("DetailPagePropertyList" & { readonly type?: "DetailPagePropertyList" | undefined; readonly props?: DetailPagePropertyListProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type DetailPagePropertyList = RemoteComponentType<'DetailPagePropertyList', DetailPagePropertyListProps>; export type DetailPageTableProps = { /** The columns to display in the table. */ columns: DetailPageModuleTableColumn[]; /** Sets the visual style to pending. */ pending: boolean; /** An event handler to create a new item. */ createAction?: (() => void) | undefined; /** The message to display when the table is empty. */ emptyMessage?: string | undefined; /** Sets the visual style to `error`, displaying an error message. */ error?: DetailPageModuleDisplayError | undefined; /** An array of extra actions to display in the module. */ extraActions?: DetailPageModuleAction[] | undefined; /** The items to display in the table. */ items?: DetailPageModuleTableItem[] | undefined; /** An event handler for when the user clicks an item. */ onItemPress?: ((item: DetailPageModuleTableItem) => void) | undefined; /** Actions to display in the row. */ rowActions?: (DetailPageModuleTableRowAction | DetailPageModuleTableRowActionGroup)[] | undefined; }; export declare const DetailPageTable: ("DetailPageTable" & { readonly type?: "DetailPageTable" | undefined; readonly props?: DetailPageTableProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("DetailPageTable" & { readonly type?: "DetailPageTable" | undefined; readonly props?: DetailPageTableProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type DetailPageTable = RemoteComponentType<'DetailPageTable', DetailPageTableProps>; export type DividerProps = {}; export declare const Divider: ("Divider" & { readonly type?: "Divider" | undefined; readonly props?: DividerProps | undefined; readonly children?: true | undefined; } & React.ComponentClass<{ children?: React.ReactNode; }, any>) | ("Divider" & { readonly type?: "Divider" | undefined; readonly props?: DividerProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent<{ children?: React.ReactNode; }>); export type Divider = RemoteComponentType<'Divider', DividerProps>; export type FocusViewProps = { /** The contents of the component. */ children: React.ReactNode; /** The title of the `FocusView`. This will be displayed at the top of the drawer under your app's name. */ title: string; /** If provided, confirmCloseMessages will be displayed when the user closes the `FocusView`. */ confirmCloseMessages?: ConfirmCloseMessages | undefined; /** React node adjacent to any actions in the footer. */ footerContent?: React.ReactNode; /** A primary call to action ("Save" or "Continue") `Button` placed in the footer. */ primaryAction?: React.ReactElement | undefined; /** A secondary call to action ("Cancel") `Button` placed in the footer. */ secondaryAction?: React.ReactElement | undefined; /** Allows the `FocusView` to manage shown state if a user requests to close the window, or if it needs to stay open because of the close confirmation dialog. */ setShown?: ((shown: boolean) => void) | undefined; /** Whether the `FocusView` should be shown or not. This property is maintained by a parent view. */ shown?: boolean | undefined; }; export declare const FocusView: ("FocusView" & { readonly type?: "FocusView" | undefined; readonly props?: FocusViewProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("FocusView" & { readonly type?: "FocusView" | undefined; readonly props?: FocusViewProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type FocusView = RemoteComponentType<'FocusView', FocusViewProps>; export type FormFieldGroupProps = { /** The contents of the component. */ children: React.ReactNode; /** Descriptive text that will be rendered adjacent to the group's legend. */ description?: string | undefined; /** Disables all fields in the group. Can be overriden on a per-field basis. */ disabled?: boolean | undefined; /** The layout of the fields in the group. */ layout?: ('horizontal' | 'vertical') | undefined; /** The text of the group's legend. This will be associated as a label with all fields inside the group. */ legend?: string | undefined; }; export declare const FormFieldGroup: ("FormFieldGroup" & { readonly type?: "FormFieldGroup" | undefined; readonly props?: FormFieldGroupProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("FormFieldGroup" & { readonly type?: "FormFieldGroup" | undefined; readonly props?: FormFieldGroupProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type FormFieldGroup = RemoteComponentType<'FormFieldGroup', FormFieldGroupProps>; export type IconProps = { name: 'accept' | 'add' | 'addCircle' | 'addCircleFilled' | 'api' | 'apps' | 'arrowDown' | 'arrowDownCircle' | 'arrowExport' | 'arrowExportCircle' | 'arrowIncrease' | 'arrowLeft' | 'arrowLeftCircle' | 'arrowRight' | 'arrowRightCircle' | 'arrowsInward' | 'arrowsLoop' | 'arrowsOutward' | 'arrowUp' | 'arrowUpCircle' | 'arrowUpDown' | 'arrowUpRight' | 'arrowUpRightCircle' | 'balance' | 'bank' | 'bankLightning' | 'barChart' | 'barGraph' | 'beta' | 'billing' | 'billingQuote' | 'block' | 'business' | 'calculator' | 'calendar' | 'call' | 'camera' | 'cancel' | 'cancelCircle' | 'cancelCircleFilled' | 'card' | 'caretDown' | 'caretLeft' | 'caretRight' | 'caretUp' | 'cart' | 'certificate' | 'change' | 'changeCircle' | 'charge' | 'chat' | 'check' | 'checkCircle' | 'checkCircleFilled' | 'checkmark' | 'chevronDown' | 'chevronDownCircle' | 'chevronLeft' | 'chevronLeftCircle' | 'chevronRight' | 'chevronRightCircle' | 'chevronUp' | 'chevronUpCircle' | 'circle' | 'clipboard' | 'clipboardCheck' | 'clock' | 'cloud' | 'code' | 'collapse' | 'compliance' | 'connectPayments' | 'convert' | 'coupon' | 'createCards' | 'createIdentityVerification' | 'cross' | 'crypto' | 'customer' | 'customerPortal' | 'customers' | 'customizeBrand' | 'data' | 'dataExport' | 'delete' | 'deploy' | 'desktop' | 'dispute' | 'disputeProtection' | 'doc' | 'document' | 'download' | 'dragHandle' | 'earlyFraudWarning' | 'edit' | 'editCircle' | 'email' | 'expand' | 'explorer' | 'export' | 'exportCircle' | 'external' | 'externalTest' | 'eyeClosed' | 'eyeOpen' | 'fee' | 'filter' | 'financialActivity' | 'fingerprint' | 'flag' | 'folder' | 'gavel' | 'gift' | 'globe' | 'gridView' | 'growth' | 'guide' | 'heart' | 'heartFilled' | 'help' | 'hide' | 'history' | 'home' | 'identityVerification' | 'import' | 'info' | 'insight' | 'invite' | 'invoice' | 'iosShare' | 'lab' | 'lightBulb' | 'lightningBolt' | 'link' | 'list' | 'listView' | 'locationPin' | 'lock' | 'menu' | 'miniPlayer' | 'mobileWallet' | 'moneyMovement' | 'more' | 'moreCircle' | 'moved' | 'navClock' | 'negative' | 'negativeCircle' | 'negativeCircleFilled' | 'new' | 'next' | 'note' | 'notifications' | 'office' | 'openLock' | 'order' | 'orgChart' | 'overflow' | 'pane' | 'panelArrowLeft' | 'panelArrowRight' | 'paperclip' | 'passkey' | 'pause' | 'payByBank' | 'payment' | 'paymentLink' | 'payout' | 'person' | 'personWithKey' | 'phone' | 'pieChart' | 'pin' | 'pinAdd' | 'pinFilled' | 'ping' | 'pinOutline' | 'plan' | 'platform' | 'play' | 'playCircle' | 'positive' | 'previous' | 'product' | 'productSubscription' | 'qrCode' | 'recurring' | 'recurringInvoice' | 'refresh' | 'refreshCircle' | 'refund' | 'refundCircle' | 'reporting' | 'reserve' | 'review' | 'risk' | 'rocket' | 'rule' | 'safe' | 'sandbox' | 'search' | 'send' | 'settings' | 'share' | 'shield' | 'shieldCheck' | 'shoppingBag' | 'show' | 'signed' | 'signOut' | 'soundOff' | 'soundOn' | 'source' | 'sparkle' | 'spinner' | 'star' | 'starFilled' | 'subscription' | 'support' | 'tag' | 'tasks' | 'terminal' | 'thumbsDown' | 'thumbsUp' | 'topup' | 'transfer' | 'trash' | 'trial' | 'truck' | 'upload' | 'usage' | 'vault' | 'video' | 'wallet' | 'warning' | 'warningCircle' | 'webhook' | 'website' | 'wifi' | 'withdrawal'; css?: { /** Contrasting color. See [Color](https://docs.stripe.com/stripe-apps/style#color) for details. If you don’t specify a fill value, the `Icon` gets its color from its parent. @type [text and icon color token](https://docs.stripe.com/stripe-apps/style#text-&-icons) */ fill?: ('brand' | 'primary' | 'secondary' | 'disabled' | 'info' | 'success' | 'attention' | 'critical') | undefined; } | undefined; size?: ('xsmall' | 'small' | 'medium' | 'large' | 'xlarge') | undefined; }; export declare const Icon: ("Icon" & { readonly type?: "Icon" | undefined; readonly props?: IconProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("Icon" & { readonly type?: "Icon" | undefined; readonly props?: IconProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type Icon = RemoteComponentType<'Icon', IconProps>; export type ImgProps = { /** The alternative text of the image. */ alt?: string | undefined; /** Cross-origin support for the image. */ crossOrigin?: 'anonymous' | undefined; /** The height of the image. */ height?: (string | number) | undefined; /** The sizes of the image (for use with srcSet). */ sizes?: string | undefined; /** The source of the image. */ src?: string | undefined; /** The source set of the image. */ srcSet?: string | undefined; /** The width of the image. */ width?: (string | number) | undefined; }; export declare const Img: ("Img" & { readonly type?: "Img" | undefined; readonly props?: ImgProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("Img" & { readonly type?: "Img" | undefined; readonly props?: ImgProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type Img = RemoteComponentType<'Img', ImgProps>; export type InlineProps = { /** The contents of the component. */ children: React.ReactNode; css?: { /** Horizontal alignment. See [Layout properties](https://docs.stripe.com/stripe-apps/style#layout-properties) for details. */ alignSelfX?: ('start' | 'center' | 'end' | 'stretch') | undefined; /** Vertical alignment. See [Layout properties](https://docs.stripe.com/stripe-apps/style#layout-properties) for details. */ alignSelfY?: ('top' | 'center' | 'baseline' | 'bottom' | 'stretch') | undefined; /** Horizontal alignment. See [Layout properties](https://docs.stripe.com/stripe-apps/style#layout-properties) for details. */ alignX?: ('start' | 'center' | 'end' | 'stretch') | undefined; /** Vertical alignment. See [Layout properties](https://docs.stripe.com/stripe-apps/style#layout-properties) for details. */ alignY?: ('top' | 'center' | 'baseline' | 'bottom' | 'stretch') | undefined; backgroundColor?: ('container' | 'surface') | undefined; bleed?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; bleedBottom?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; bleedLeft?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; bleedRight?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; bleedTop?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; bleedX?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; bleedY?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; borderBottomColor?: ('neutral' | 'critical') | undefined; borderBottomLeftRadius?: ('none' | 'xsmall' | 'small' | 'medium' | 'large' | 'rounded') | undefined; borderBottomRightRadius?: ('none' | 'xsmall' | 'small' | 'medium' | 'large' | 'rounded') | undefined; borderBottomStyle?: ('dashed' | 'dotted' | 'double' | 'groove' | 'hidden' | 'inherit' | 'initial' | 'inset' | 'none' | 'outset' | 'revert-layer' | 'revert' | 'ridge' | 'solid' | 'unset') | undefined; /** The width of the border. */ borderBottomWidth?: number | undefined; borderColor?: ('neutral' | 'critical') | undefined; borderLeftColor?: ('neutral' | 'critical') | undefined; borderLeftStyle?: ('dashed' | 'dotted' | 'double' | 'groove' | 'hidden' | 'inherit' | 'initial' | 'inset' | 'none' | 'outset' | 'revert-layer' | 'revert' | 'ridge' | 'solid' | 'unset') | undefined; /** The width of the border. */ borderLeftWidth?: number | undefined; borderRadius?: ('none' | 'xsmall' | 'small' | 'medium' | 'large' | 'rounded') | undefined; borderRightColor?: ('neutral' | 'critical') | undefined; borderRightStyle?: ('dashed' | 'dotted' | 'double' | 'groove' | 'hidden' | 'inherit' | 'initial' | 'inset' | 'none' | 'outset' | 'revert-layer' | 'revert' | 'ridge' | 'solid' | 'unset') | undefined; /** The width of the border. */ borderRightWidth?: number | undefined; borderStyle?: ('dashed' | 'dotted' | 'double' | 'groove' | 'hidden' | 'inherit' | 'initial' | 'inset' | 'none' | 'outset' | 'revert-layer' | 'revert' | 'ridge' | 'solid' | 'unset') | undefined; borderTopColor?: ('neutral' | 'critical') | undefined; borderTopLeftRadius?: ('none' | 'xsmall' | 'small' | 'medium' | 'large' | 'rounded') | undefined; borderTopRightRadius?: ('none' | 'xsmall' | 'small' | 'medium' | 'large' | 'rounded') | undefined; borderTopStyle?: ('dashed' | 'dotted' | 'double' | 'groove' | 'hidden' | 'inherit' | 'initial' | 'inset' | 'none' | 'outset' | 'revert-layer' | 'revert' | 'ridge' | 'solid' | 'unset') | undefined; /** The width of the border. */ borderTopWidth?: number | undefined; /** The width of the border. */ borderWidth?: number | undefined; bottom?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; boxShadow?: ('none' | 'base' | 'top' | 'hover' | 'focus') | undefined; color?: ('brand' | 'primary' | 'secondary' | 'disabled' | 'info' | 'success' | 'attention' | 'critical') | undefined; columnGap?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; display?: 'grid' | undefined; distribute?: ('packed' | 'space-between') | undefined; fill?: ('brand' | 'primary' | 'secondary' | 'disabled' | 'info' | 'success' | 'attention' | 'critical') | undefined; focusRing?: ('none' | 'base' | 'top' | 'hover' | 'focus') | undefined; font?: ('body' | 'bodyEmphasized' | 'caption' | 'heading' | 'kicker' | 'lead' | 'subheading' | 'subtitle' | 'title') | undefined; fontFamily?: ('monospace' | 'ui') | undefined; fontWeight?: ('regular' | 'semibold' | 'bold') | undefined; gap?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; gapX?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; gapY?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; gridColumns?: number | undefined; /** The height of the component. See [Sizing](https://docs.stripe.com/stripe-apps/style#sizing) for details. */ height?: (number | 'auto' | 'fill' | 'min' | 'max' | 'fit' | '1/2' | '1/3' | '2/3' | '1/4' | '2/4' | '3/4' | '1/5' | '2/5' | '3/5' | '4/5' | '1/6' | '2/6' | '3/6' | '4/6' | '5/6' | '1/12' | '2/12' | '3/12' | '4/12' | '5/12' | '6/12' | '7/12' | '8/12' | '9/12' | '10/12' | '11/12') | undefined; inset?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; keyline?: ('neutral' | 'critical') | undefined; left?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; margin?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; marginBottom?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; marginLeft?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; marginRight?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; marginTop?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; marginX?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; marginY?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; /** The height of the component. See [Sizing](https://docs.stripe.com/stripe-apps/style#sizing) for details. */ maxHeight?: (number | 'auto' | 'fill' | 'min' | 'max' | 'fit' | '1/2' | '1/3' | '2/3' | '1/4' | '2/4' | '3/4' | '1/5' | '2/5' | '3/5' | '4/5' | '1/6' | '2/6' | '3/6' | '4/6' | '5/6' | '1/12' | '2/12' | '3/12' | '4/12' | '5/12' | '6/12' | '7/12' | '8/12' | '9/12' | '10/12' | '11/12') | undefined; /** The width of the component. See [Sizing](https://docs.stripe.com/stripe-apps/style#sizing) for details. */ maxWidth?: (number | 'auto' | 'fill' | 'min' | 'max' | 'fit' | '1/2' | '1/3' | '2/3' | '1/4' | '2/4' | '3/4' | '1/5' | '2/5' | '3/5' | '4/5' | '1/6' | '2/6' | '3/6' | '4/6' | '5/6' | '1/12' | '2/12' | '3/12' | '4/12' | '5/12' | '6/12' | '7/12' | '8/12' | '9/12' | '10/12' | '11/12') | undefined; /** The height of the component. See [Sizing](https://docs.stripe.com/stripe-apps/style#sizing) for details. */ minHeight?: (number | 'auto' | 'fill' | 'min' | 'max' | 'fit' | '1/2' | '1/3' | '2/3' | '1/4' | '2/4' | '3/4' | '1/5' | '2/5' | '3/5' | '4/5' | '1/6' | '2/6' | '3/6' | '4/6' | '5/6' | '1/12' | '2/12' | '3/12' | '4/12' | '5/12' | '6/12' | '7/12' | '8/12' | '9/12' | '10/12' | '11/12') | undefined; minTileWidth?: (number | '1/2' | '1/3' | '2/3' | '1/4' | '2/4' | '3/4' | '1/5' | '2/5' | '3/5' | '4/5' | '1/6' | '2/6' | '3/6' | '4/6' | '5/6' | '1/12' | '2/12' | '3/12' | '4/12' | '5/12' | '6/12' | '7/12' | '8/12' | '9/12' | '10/12' | '11/12') | undefined; /** The width of the component. See [Sizing](https://docs.stripe.com/stripe-apps/style#sizing) for details. */ minWidth?: (number | 'auto' | 'fill' | 'min' | 'max' | 'fit' | '1/2' | '1/3' | '2/3' | '1/4' | '2/4' | '3/4' | '1/5' | '2/5' | '3/5' | '4/5' | '1/6' | '2/6' | '3/6' | '4/6' | '5/6' | '1/12' | '2/12' | '3/12' | '4/12' | '5/12' | '6/12' | '7/12' | '8/12' | '9/12' | '10/12' | '11/12') | undefined; overflow?: ('visible' | 'hidden' | 'clip' | 'scroll' | 'auto') | undefined; overflowWrap?: ('break-word' | 'normal') | undefined; overflowX?: ('visible' | 'hidden' | 'clip' | 'scroll' | 'auto') | undefined; overflowY?: ('visible' | 'hidden' | 'clip' | 'scroll' | 'auto') | undefined; padding?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; paddingBottom?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; paddingLeft?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; paddingRight?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; paddingTop?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; paddingX?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; paddingY?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; rowGap?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; stack?: ('x' | 'y' | 'z') | undefined; textAlign?: ('center' | 'end' | 'justify' | 'left' | 'match-parent' | 'right' | 'start') | undefined; textOverflow?: 'ellipsis' | undefined; textTransform?: ('capitalize' | 'uppercase' | 'lowercase' | 'none' | 'full-width' | 'full-size-kana') | undefined; top?: (number | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge') | undefined; topShadow?: ('none' | 'base' | 'top' | 'hover' | 'focus') | undefined; whiteSpace?: ('normal' | 'nowrap' | 'pre' | 'pre-wrap' | 'pre-line' | 'break-spaces') | undefined; /** The width of the component. See [Sizing](https://docs.stripe.com/stripe-apps/style#sizing) for details. */ width?: (number | 'auto' | 'fill' | 'min' | 'max' | 'fit' | '1/2' | '1/3' | '2/3' | '1/4' | '2/4' | '3/4' | '1/5' | '2/5' | '3/5' | '4/5' | '1/6' | '2/6' | '3/6' | '4/6' | '5/6' | '1/12' | '2/12' | '3/12' | '4/12' | '5/12' | '6/12' | '7/12' | '8/12' | '9/12' | '10/12' | '11/12') | undefined; wordBreak?: ('normal' | 'break-all' | 'keep-all' | 'break-word') | undefined; wordWrap?: ('break-word' | 'normal') | undefined; wrap?: ('wrap' | 'nowrap' | 'wrap-reverse') | undefined; zIndex?: ('overlay' | 'partial') | undefined; } | undefined; }; export declare const Inline: ("Inline" & { readonly type?: "Inline" | undefined; readonly props?: InlineProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("Inline" & { readonly type?: "Inline" | undefined; readonly props?: InlineProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type Inline = RemoteComponentType<'Inline', InlineProps>; export type LineChartProps = { /** The data used to generate the chart. */ data: { [x: string]: any; }[]; /** The property or accessor for the point on the x axis. */ x: string | number | Channel; /** The property or accessor for the point on the y axis. */ y: string | number | Channel; /** Determines whether to render labels and ticks for each axis. */ axis?: ('x' | 'y' | 'both' | 'none') | undefined; /** Groups data by color based on a property or accessor. */ color?: (string | number | Channel) | undefined; /** Determines whether to render grid lines for each axis. */ grid?: ('x' | 'y' | 'both' | 'none') | undefined; /** Determines whether to render the legend (when more than one item is present). */ legend?: boolean | undefined; /** Determines whether to render a tooltip when hovering over the chart. */ tooltip?: boolean | undefined; /** Groups data based on a property or accessor. */ z?: (string | number | Channel) | undefined; }; export declare const LineChart: ("LineChart" & { readonly type?: "LineChart" | undefined; readonly props?: LineChartProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("LineChart" & { readonly type?: "LineChart" | undefined; readonly props?: LineChartProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type LineChart = RemoteComponentType<'LineChart', LineChartProps>; export type LinkProps = { /** The contents of the component. */ children: React.ReactNode; css?: { /** Horizontal alignment. See [Layout properties](https://docs.stripe.com/stripe-apps/style#layout-properties) for details. */ alignX?: ('start' | 'center' | 'end' | 'stretch') | undefined; /** The width of the component. See [Sizing](https://docs.stripe.com/stripe-apps/style#sizing) for details. */ width?: (number | 'auto' | 'fill' | 'min' | 'max' | 'fit' | '1/2' | '1/3' | '2/3' | '1/4' | '2/4' | '3/4' | '1/5' | '2/5' | '3/5' | '4/5' | '1/6' | '2/6' | '3/6' | '4/6' | '5/6' | '1/12' | '2/12' | '3/12' | '4/12' | '5/12' | '6/12' | '7/12' | '8/12' | '9/12' | '10/12' | '11/12') | undefined; } | undefined; /** Whether the action is disabled. */ disabled?: boolean | undefined; /** Whether linking out to an external resource. */ external?: boolean | undefined; /** Native `href` attribute. */ href?: string | undefined; /** Handler that is called when the press is released over the target. */ onPress?: ((event: PressEvent) => void) | undefined; /** Native `rel` attribute. */ rel?: string | undefined; /** Overrides the default tab key behavior. Avoid using values other than `-1` and `0`. */ tabIndex?: number | undefined; /** Where to display the linked URL, as the name for a browsing context. */ target?: ('_self' | '_blank' | '_top' | '_parent') | undefined; /** The type of the `Link`. */ type?: ('primary' | 'secondary') | undefined; }; export declare const Link: ("Link" & { readonly type?: "Link" | undefined; readonly props?: LinkProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("Link" & { readonly type?: "Link" | undefined; readonly props?: LinkProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type Link = RemoteComponentType<'Link', LinkProps>; export type ListItemProps = { /** Icon that appears to the left of the content and description. Will be overridden by `image` if both are present. */ icon?: React.ReactNode; /** The id of the item. This will be passed into the `onAction` handler of `List`. */ id?: string | undefined; /** Image that appears to the left of the content and description. Will override `icon` if both are present. */ image?: React.ReactNode; /** Secondary content for the `ListItem` component. */ secondaryTitle?: React.ReactNode; /** Size of the `ListItem` component. */ size?: ('default' | 'large') | undefined; /** Title content for the `ListItem` component. */ title?: React.ReactNode; /** The value to display on the right-hand side of the item. */ value?: React.ReactNode; }; export declare const ListItem: ("ListItem" & { readonly type?: "ListItem" | undefined; readonly props?: ListItemProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("ListItem" & { readonly type?: "ListItem" | undefined; readonly props?: ListItemProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type ListItem = RemoteComponentType<'ListItem', ListItemProps>; export type ListProps = { /** One or more `ListItem` components. */ children: React.ReactNode; /** Press event handler which receives the corresponding key of the `ListItem` that was pressed. */ onAction?: ((id: React.Key) => void) | undefined; }; export declare const List: ("List" & { readonly type?: "List" | undefined; readonly props?: ListProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("List" & { readonly type?: "List" | undefined; readonly props?: ListProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type List = RemoteComponentType<'List', ListProps>; export type MenuGroupProps = { /** One or more `MenuItem` components. */ children: React.ReactNode; title?: React.ReactNode; }; export declare const MenuGroup: ("MenuGroup" & { readonly type?: "MenuGroup" | undefined; readonly props?: MenuGroupProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("MenuGroup" & { readonly type?: "MenuGroup" | undefined; readonly props?: MenuGroupProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type MenuGroup = RemoteComponentType<'MenuGroup', MenuGroupProps>; export type MenuItemProps = { /** The contents of the component. */ children: React.ReactNode; /** Marks an item as disabled. Disabled items cannot be selected, focused, or otherwise interacted with. */ disabled?: boolean | undefined; /** The id of the item. This will be passed into the `onAction` handler of `Menu`. */ id?: string | undefined; /** Handler that is called when an item is selected. */ onAction?: ((key: React.Key) => void) | undefined; }; export declare const MenuItem: ("MenuItem" & { readonly type?: "MenuItem" | undefined; readonly props?: MenuItemProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("MenuItem" & { readonly type?: "MenuItem" | undefined; readonly props?: MenuItemProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type MenuItem = RemoteComponentType<'MenuItem', MenuItemProps>; export type MenuProps = { /** One or more `MenuGroup` or `MenuItem` components. */ children: React.ReactNode; /** Handler that is called when an item is selected. */ onAction?: ((key: React.Key) => void) | undefined; /** The trigger Element to show/hide the `Menu`. Must be a component that supports press events, such as a `Button` or `Link`. */ trigger?: React.ReactNode; }; export declare const Menu: ("Menu" & { readonly type?: "Menu" | undefined; readonly props?: MenuProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("Menu" & { readonly type?: "Menu" | undefined; readonly props?: MenuProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type Menu = RemoteComponentType<'Menu', MenuProps>; export type OnboardingViewProps = { /** React component that renders the content of the primary column. */ children: React.ReactNode; /** Whether all onboarding tasks are done. When set to true, the onboarding modal window will automatically close after a brief delay to return the user to their previous location. */ completed: boolean; /** A list of onboarding tasks. */ tasks: { /** The display title of the task. */ title: string; /** An event handler for when the user clicks anywhere on the task. */ onPress?: ((event: PressEvent) => void) | undefined; /** The current status of the task. */ status?: ('not-started' | 'in-progress' | 'blocked' | 'complete') | undefined; /** A list of sub-tasks that belong to this task. */ subTasks?: { /** The display title of the task. */ title: string; /** An event handler for when the user clicks anywhere on the task. */ onPress?: ((event: PressEvent) => void) | undefined; /** The current status of the task. */ status?: ('not-started' | 'in-progress' | 'blocked' | 'complete') | undefined; }[] | undefined; }[]; /** Onboarding step title. */ title: string; /** Onboarding step description. */ description?: string | undefined; /** Information about an error that occurred during onboarding. */ error?: React.ReactNode; /** Whether the onboarding flow is in a loading state. Shows spinner and loading message when true. */ pending?: boolean | undefined; }; export declare const OnboardingView: ("OnboardingView" & { readonly type?: "OnboardingView" | undefined; readonly props?: OnboardingViewProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("OnboardingView" & { readonly type?: "OnboardingView" | undefined; readonly props?: OnboardingViewProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type OnboardingView = RemoteComponentType<'OnboardingView', OnboardingViewProps>; export type PlatformConfigurationViewProps = { /** The contents of the component. */ children: React.ReactNode; /** A callback that contains the form values and a success callback when the form is submitted. */ onSubmit: (submissionDetails: { values: Record; successCallback: () => void; }) => void; }; export declare const PlatformConfigurationView: ("PlatformConfigurationView" & { readonly type?: "PlatformConfigurationView" | undefined; readonly props?: PlatformConfigurationViewProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("PlatformConfigurationView" & { readonly type?: "PlatformConfigurationView" | undefined; readonly props?: PlatformConfigurationViewProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type PlatformConfigurationView = RemoteComponentType<'PlatformConfigurationView', PlatformConfigurationViewProps>; export type PressEvent = { altKey: boolean; ctrlKey: boolean; metaKey: boolean; pointerType: 'mouse' | 'pen' | 'touch' | 'keyboard' | 'virtual'; shiftKey: boolean; target: Element; type: 'pressstart' | 'pressend' | 'pressup' | 'press'; }; export type PropertyListItemProps = { /** The name of the property to render in the list. */ label: React.ReactNode; /** The value of the property to show, such as a static input, a formula, a database reference, or a nested set of `PropertyListItem` components. */ value?: React.ReactNode; }; export declare const PropertyListItem: ("PropertyListItem" & { readonly type?: "PropertyListItem" | undefined; readonly props?: PropertyListItemProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("PropertyListItem" & { readonly type?: "PropertyListItem" | undefined; readonly props?: PropertyListItemProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type PropertyListItem = RemoteComponentType<'PropertyListItem', PropertyListItemProps>; export type PropertyListProps = { /** One or more `PropertyListItem` components that each define a label-value pair. */ children: React.ReactNode; /** The orientation of the list. */ orientation?: ('vertical' | 'horizontal') | undefined; }; export declare const PropertyList: ("PropertyList" & { readonly type?: "PropertyList" | undefined; readonly props?: PropertyListProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("PropertyList" & { readonly type?: "PropertyList" | undefined; readonly props?: PropertyListProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type PropertyList = RemoteComponentType<'PropertyList', PropertyListProps>; export type RadioProps = { /** If `true`, React will focus the element on mount. */ autoFocus?: boolean | undefined; /** Controls whether the input is selected. When you pass this prop, you must also pass an `onChange` handler that updates the passed value. */ checked?: boolean | undefined; /** Specifies the initial value that a user can change. */ defaultChecked?: boolean | undefined; /** Descriptive text that will be rendered adjacent to the control's label. */ description?: string | undefined; /** Sets whether or not the element should be disabled. Prevents selection. */ disabled?: boolean | undefined; /** Error text that will be rendered below the control. */ error?: string | undefined; /** Specifies the `id` of the `` this input belongs to. If omitted, it's the closest parent form. */ form?: string | undefined; /** Visually hides the specified elements. The hidden elements will still be present and visible to screen readers. */ hiddenElements?: ('label' | 'description' | 'error')[] | undefined; /** Sets whether or not the element is in an invalid state. This is a display-only prop, and will not prevent form submission. */ invalid?: boolean | undefined; /** Text that describes the control. Will be both visible and clickable. */ label?: React.ReactNode; /** Used to collect multiple `Radios` into a single, mutually exclusive group, for uncontrolled use cases. */ name?: string | undefined; /** Required for controlled inputs. Fires immediately when the input's value is changed by the user (for example, it fires on every keystroke). Behaves like the browser input event. */ onChange?: ((event: React.ChangeEvent) => void) | undefined; /** If `true`, the input is not editable by the user. */ readOnly?: boolean | undefined; /** If `true`, the value must be provided for the form to submit. */ required?: boolean | undefined; /** Overrides the default tab key behavior. Avoid using values other than `-1` and `0`. */ tabIndex?: number | undefined; /** Controls the input's text. When you pass this prop, you must also pass an `onChange` handler that updates the passed value. */ value?: string | undefined; }; export declare const Radio: ("Radio" & { readonly type?: "Radio" | undefined; readonly props?: RadioProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("Radio" & { readonly type?: "Radio" | undefined; readonly props?: RadioProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type Radio = RemoteComponentType<'Radio', RadioProps>; export type SelectProps = { /** The contents of the component. */ children: React.ReactNode; /** Specifies one of the possible autocomplete behaviors. */ autoComplete?: string | undefined; /** If `true`, React will focus the element on mount. */ autoFocus?: boolean | undefined; css?: { /** The width of the component. See [Sizing](https://docs.stripe.com/stripe-apps/style#sizing) for details. */ width?: (number | 'auto' | 'fill' | 'min' | 'max' | 'fit' | '1/2' | '1/3' | '2/3' | '1/4' | '2/4' | '3/4' | '1/5' | '2/5' | '3/5' | '4/5' | '1/6' | '2/6' | '3/6' | '4/6' | '5/6' | '1/12' | '2/12' | '3/12' | '4/12' | '5/12' | '6/12' | '7/12' | '8/12' | '9/12' | '10/12' | '11/12') | undefined; } | undefined; /** A string (or an array of strings for `multiple={true}`). Specifies the initially selected option that a user can change. */ defaultValue?: (string | string[]) | undefined; /** Descriptive text that will be rendered adjacent to the control's label. */ description?: string | undefined; /** Sets whether or not the element should be disabled. Prevents selection. */ disabled?: boolean | undefined; /** Error text that will be rendered below the control. */ error?: string | undefined; /** Specifies the `id` of the `` this input belongs to. If omitted, it's the closest parent form. */ form?: string | undefined; /** Visually hides the specified elements. The hidden elements will still be present and visible to screen readers. */ hiddenElements?: ('label' | 'description' | 'error')[] | undefined; /** Sets whether or not the element is in an invalid state. This is a display-only prop, and will not prevent form submission. */ invalid?: boolean | undefined; /** Text that describes the control. Will be both visible and clickable. */ label?: React.ReactNode; /** If `true`, the browser allows multiple selection. */ multiple?: boolean | undefined; /** Specifies the name for this input that's submitted with the form. */ name?: string | undefined; /** Required for controlled inputs. Fires immediately when the input's value is changed by the user (for example, it fires on every keystroke). Behaves like the browser input event. */ onChange?: ((event: React.ChangeEvent) => void) | undefined; /** If `true`, the value must be provided for the form to submit. */ required?: boolean | undefined; /** The size of the component. */ size?: ('small' | 'medium' | 'large') | undefined; /** A string (or an array of strings for `multiple={true}`). Controls which option is selected. */ value?: (string | string[]) | undefined; }; export declare const Select: ("Select" & { readonly type?: "Select" | undefined; readonly props?: SelectProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("Select" & { readonly type?: "Select" | undefined; readonly props?: SelectProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type Select = RemoteComponentType<'Select', SelectProps>; export type SettingsViewProps = { /** The contents of the component. */ children: React.ReactNode; /** If provided, a "Save" `Button` will be rendered with the `SettingsView`. This callback will be called when the `Button` is clicked. */ onSave?: ((values: { [x: string]: string; }) => void) | undefined; /** A string to display a status such as "Saved" or "Error" in the header of the view. */ statusMessage?: string | undefined; }; export declare const SettingsView: ("SettingsView" & { readonly type?: "SettingsView" | undefined; readonly props?: SettingsViewProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("SettingsView" & { readonly type?: "SettingsView" | undefined; readonly props?: SettingsViewProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type SettingsView = RemoteComponentType<'SettingsView', SettingsViewProps>; export type SignInViewProps = { /** A CSS color that contrasts well with `brandIcon`. */ brandColor?: string | undefined; /** A square, 1-color SVG that contrasts well with `brandColor`. */ brandIcon?: string | undefined; /** A paragraph description of the app and its features. */ description?: string | undefined; /** Description action contents that open in a `FocusView`. */ descriptionActionContents?: React.ReactNode; /** An action label ("Learn more" or "View demo", for example) below the description. */ descriptionActionLabel?: string | undefined; /** The title in the `FocusView` for the description action. */ descriptionActionTitle?: string | undefined; /** React node below the primary action in the footer. */ footerContent?: React.ReactNode; primaryAction?: (SignInActionWithHref | SignInActionWithOnPress) | undefined; secondaryAction?: (SignInActionWithHref | SignInActionWithOnPress) | undefined; }; export declare const SignInView: ("SignInView" & { readonly type?: "SignInView" | undefined; readonly props?: SignInViewProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("SignInView" & { readonly type?: "SignInView" | undefined; readonly props?: SignInViewProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type SignInView = RemoteComponentType<'SignInView', SignInViewProps>; export type SparklineProps = { /** The data used to generate the chart. */ data: { [x: string]: any; }[]; /** The property or accessor for the point on the x axis. */ x: string | number | Channel; /** The property or accessor for the point on the y axis. */ y: string | number | Channel; /** Groups data by color based on a property or accessor. */ color?: (string | number | Channel) | undefined; /** Determines whether to render a tooltip when hovering over the chart. */ tooltip?: boolean | undefined; /** Groups data based on a property or accessor. */ z?: (string | number | Channel) | undefined; }; export declare const Sparkline: ("Sparkline" & { readonly type?: "Sparkline" | undefined; readonly props?: SparklineProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("Sparkline" & { readonly type?: "Sparkline" | undefined; readonly props?: SparklineProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type Sparkline = RemoteComponentType<'Sparkline', SparklineProps>; export type SpinnerProps = { /** Delay applied to animation. */ delay?: number | undefined; /** The size of the component. */ size?: ('small' | 'medium' | 'large') | undefined; }; export declare const Spinner: ("Spinner" & { readonly type?: "Spinner" | undefined; readonly props?: SpinnerProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("Spinner" & { readonly type?: "Spinner" | undefined; readonly props?: SpinnerProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type Spinner = RemoteComponentType<'Spinner', SpinnerProps>; export type StripeFileUploaderProps = { /** The text label for the file uploader. */ label: string; /** The upload purpose. See https://stripe.com/docs/api/files/object#purpose for more details. */ purpose: string; /** A callback that will be called with the file object when the upload is complete. See https://stripe.com/docs/api/files/object for more details. */ onComplete?: ((fileObject: { id: string; object: string; created: number; expires_at?: number | undefined; filename?: string | undefined; links: { object: string; data: { id: string; object: string; created: number; expired: boolean; expires_at?: number | undefined; livemode: boolean; file: string; metadata: Record; url?: string | undefined; }[]; has_more: boolean; url: string; }; purpose: string; size: number; title?: string | undefined; type?: string | undefined; url?: string | undefined; }) => void) | undefined; /** A callback that will be called if the upload fails. */ onError?: ((error: any) => void) | undefined; }; export declare const StripeFileUploader: ("StripeFileUploader" & { readonly type?: "StripeFileUploader" | undefined; readonly props?: StripeFileUploaderProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("StripeFileUploader" & { readonly type?: "StripeFileUploader" | undefined; readonly props?: StripeFileUploaderProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type StripeFileUploader = RemoteComponentType<'StripeFileUploader', StripeFileUploaderProps>; export type SwitchProps = { /** If `true`, React will focus the element on mount. */ autoFocus?: boolean | undefined; /** Controls whether the input is selected. When you pass this prop, you must also pass an `onChange` handler that updates the passed value. */ checked?: boolean | undefined; /** Specifies the initial value that a user can change. */ defaultChecked?: boolean | undefined; /** Descriptive text that will be rendered adjacent to the control's label. */ description?: string | undefined; /** Sets whether or not the element should be disabled. Prevents selection. */ disabled?: boolean | undefined; /** Error text that will be rendered below the control. */ error?: string | undefined; /** Specifies the `id` of the `` this input belongs to. If omitted, it's the closest parent form. */ form?: string | undefined; /** Visually hides the specified elements. The hidden elements will still be present and visible to screen readers. */ hiddenElements?: ('label' | 'description' | 'error')[] | undefined; /** Sets whether or not the element is in an invalid state. This is a display-only prop, and will not prevent form submission. */ invalid?: boolean | undefined; /** Text that describes the control. Will be both visible and clickable. */ label?: React.ReactNode; /** Specifies the name for this input that's submitted with the form. */ name?: string | undefined; /** Required for controlled inputs. Fires immediately when the input's value is changed by the user (for example, it fires on every keystroke). Behaves like the browser input event. */ onChange?: ((event: React.ChangeEvent) => void) | undefined; /** If `true`, the input is not editable by the user. */ readOnly?: boolean | undefined; /** If `true`, the value must be provided for the form to submit. */ required?: boolean | undefined; /** Overrides the default tab key behavior. Avoid using values other than `-1` and `0`. */ tabIndex?: number | undefined; /** Controls the input's text. When you pass this prop, you must also pass an `onChange` handler that updates the passed value. */ value?: string | undefined; }; export declare const Switch: ("Switch" & { readonly type?: "Switch" | undefined; readonly props?: SwitchProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("Switch" & { readonly type?: "Switch" | undefined; readonly props?: SwitchProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type Switch = RemoteComponentType<'Switch', SwitchProps>; export type TabListProps = { /** One or more `Tab` components. */ children: React.ReactNode; }; export declare const TabList: ("TabList" & { readonly type?: "TabList" | undefined; readonly props?: TabListProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("TabList" & { readonly type?: "TabList" | undefined; readonly props?: TabListProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type TabList = RemoteComponentType<'TabList', TabListProps>; export type TabPanelProps = { /** The contents of the component. */ children: React.ReactNode; /** A unique identifier that controls selection using the `Tabs` component's `selectedKey` prop. */ id: string; }; export declare const TabPanel: ("TabPanel" & { readonly type?: "TabPanel" | undefined; readonly props?: TabPanelProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("TabPanel" & { readonly type?: "TabPanel" | undefined; readonly props?: TabPanelProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type TabPanel = RemoteComponentType<'TabPanel', TabPanelProps>; export type TabPanelsProps = { /** One or more TabPanel components. */ children: React.ReactNode; }; export declare const TabPanels: ("TabPanels" & { readonly type?: "TabPanels" | undefined; readonly props?: TabPanelsProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("TabPanels" & { readonly type?: "TabPanels" | undefined; readonly props?: TabPanelsProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type TabPanels = RemoteComponentType<'TabPanels', TabPanelsProps>; export type TabProps = { /** The contents of the component. */ children: React.ReactNode; /** A unique identifier that controls selection using the `Tabs` component's `selectedKey` prop. */ id: string; /** Whether or not the tab should be disabled. */ disabled?: boolean | undefined; }; export declare const Tab: ("Tab" & { readonly type?: "Tab" | undefined; readonly props?: TabProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("Tab" & { readonly type?: "Tab" | undefined; readonly props?: TabProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type Tab = RemoteComponentType<'Tab', TabProps>; export type TableBodyProps = { /** The contents of the component. */ children: React.ReactNode; }; export declare const TableBody: ("TableBody" & { readonly type?: "TableBody" | undefined; readonly props?: TableBodyProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("TableBody" & { readonly type?: "TableBody" | undefined; readonly props?: TableBodyProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type TableBody = RemoteComponentType<'TableBody', TableBodyProps>; export type TableCellProps = { /** The contents of the component. */ children: React.ReactNode; align?: ('center' | 'left' | 'right') | undefined; colSpan?: number | undefined; maxWidth?: ('auto' | 'maximized' | 'minimized' | number) | undefined; minWidth?: ('auto' | 'maximized' | 'minimized' | number) | undefined; rowSpan?: number | undefined; vAlign?: ('baseline' | 'bottom' | 'middle' | 'top') | undefined; width?: ('auto' | 'maximized' | 'minimized' | number) | undefined; wrap?: boolean | undefined; }; export declare const TableCell: ("TableCell" & { readonly type?: "TableCell" | undefined; readonly props?: TableCellProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("TableCell" & { readonly type?: "TableCell" | undefined; readonly props?: TableCellProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type TableCell = RemoteComponentType<'TableCell', TableCellProps>; export type TableFooterProps = { /** The contents of the component. */ children: React.ReactNode; }; export declare const TableFooter: ("TableFooter" & { readonly type?: "TableFooter" | undefined; readonly props?: TableFooterProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("TableFooter" & { readonly type?: "TableFooter" | undefined; readonly props?: TableFooterProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type TableFooter = RemoteComponentType<'TableFooter', TableFooterProps>; export type TableHeadProps = { /** The contents of the component. */ children: React.ReactNode; }; export declare const TableHead: ("TableHead" & { readonly type?: "TableHead" | undefined; readonly props?: TableHeadProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("TableHead" & { readonly type?: "TableHead" | undefined; readonly props?: TableHeadProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type TableHead = RemoteComponentType<'TableHead', TableHeadProps>; export type TableHeaderCellProps = { /** The contents of the component. */ children: React.ReactNode; align?: ('center' | 'left' | 'right') | undefined; colSpan?: number | undefined; maxWidth?: ('auto' | 'maximized' | 'minimized' | number) | undefined; minWidth?: ('auto' | 'maximized' | 'minimized' | number) | undefined; rowSpan?: number | undefined; vAlign?: ('baseline' | 'bottom' | 'middle' | 'top') | undefined; width?: ('auto' | 'maximized' | 'minimized' | number) | undefined; wrap?: boolean | undefined; }; export declare const TableHeaderCell: ("TableHeaderCell" & { readonly type?: "TableHeaderCell" | undefined; readonly props?: TableHeaderCellProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("TableHeaderCell" & { readonly type?: "TableHeaderCell" | undefined; readonly props?: TableHeaderCellProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type TableHeaderCell = RemoteComponentType<'TableHeaderCell', TableHeaderCellProps>; export type TableProps = { /** The contents of the component. */ children: React.ReactNode; }; export declare const Table: ("Table" & { readonly type?: "Table" | undefined; readonly props?: TableProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("Table" & { readonly type?: "Table" | undefined; readonly props?: TableProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type Table = RemoteComponentType<'Table', TableProps>; export type TableRowProps = { /** The contents of the component. */ children: React.ReactNode; }; export declare const TableRow: ("TableRow" & { readonly type?: "TableRow" | undefined; readonly props?: TableRowProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("TableRow" & { readonly type?: "TableRow" | undefined; readonly props?: TableRowProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type TableRow = RemoteComponentType<'TableRow', TableRowProps>; export type TabsProps = { /** One or more `TabList` or `TabPanels` components. */ children: React.ReactNode; /** Whether or not the `TabList` should take up the entire width of its container. */ fitted?: boolean | undefined; /** Callback to be fired when a `Tab` is selected. */ onSelectionChange?: ((event: string) => void) | undefined; /** The `id` of the selected `Tab` when using it as a controlled component. Use with `onSelectionChange` to control the tab selection state. */ selectedKey?: string | undefined; /** The size of the component. */ size?: ('small' | 'medium' | 'large') | undefined; }; export declare const Tabs: ("Tabs" & { readonly type?: "Tabs" | undefined; readonly props?: TabsProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("Tabs" & { readonly type?: "Tabs" | undefined; readonly props?: TabsProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type Tabs = RemoteComponentType<'Tabs', TabsProps>; export type TaskListItemProps = { /** The display title of the task. */ title: string; /** An event handler for when the user clicks anywhere on the task. */ onPress?: ((event: PressEvent) => void) | undefined; /** The current status of the task. */ status?: ('not-started' | 'in-progress' | 'blocked' | 'complete') | undefined; /** A list of sub-tasks that belong to this task. */ subTasks?: { /** The display title of the task. */ title: string; /** An event handler for when the user clicks anywhere on the task. */ onPress?: ((event: PressEvent) => void) | undefined; /** The current status of the task. */ status?: ('not-started' | 'in-progress' | 'blocked' | 'complete') | undefined; }[] | undefined; }; export declare const TaskListItem: ("TaskListItem" & { readonly type?: "TaskListItem" | undefined; readonly props?: TaskListItemProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("TaskListItem" & { readonly type?: "TaskListItem" | undefined; readonly props?: TaskListItemProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type TaskListItem = RemoteComponentType<'TaskListItem', TaskListItemProps>; export type TaskListProps = { /** One or more `TaskListItem` components. */ children: React.ReactNode; }; export declare const TaskList: ("TaskList" & { readonly type?: "TaskList" | undefined; readonly props?: TaskListProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("TaskList" & { readonly type?: "TaskList" | undefined; readonly props?: TaskListProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type TaskList = RemoteComponentType<'TaskList', TaskListProps>; export type TextAreaProps = { /** Specifies one of the possible autocomplete behaviors. */ autoComplete?: string | undefined; /** If `true`, React will focus the element on mount. */ autoFocus?: boolean | undefined; cols?: number | undefined; css?: { /** The width of the component. See [Sizing](https://docs.stripe.com/stripe-apps/style#sizing) for details. */ width?: (number | 'auto' | 'fill' | 'min' | 'max' | 'fit' | '1/2' | '1/3' | '2/3' | '1/4' | '2/4' | '3/4' | '1/5' | '2/5' | '3/5' | '4/5' | '1/6' | '2/6' | '3/6' | '4/6' | '5/6' | '1/12' | '2/12' | '3/12' | '4/12' | '5/12' | '6/12' | '7/12' | '8/12' | '9/12' | '10/12' | '11/12') | undefined; } | undefined; /** Specifies the initial value that a user can change. */ defaultValue?: string | undefined; /** Descriptive text that will be rendered adjacent to the control's label. */ description?: string | undefined; /** Sets whether or not the element should be disabled. Prevents selection. */ disabled?: boolean | undefined; /** Error text that will be rendered below the control. */ error?: string | undefined; /** Specifies the `id` of the `` this input belongs to. If omitted, it's the closest parent form. */ form?: string | undefined; /** Visually hides the specified elements. The hidden elements will still be present and visible to screen readers. */ hiddenElements?: ('label' | 'description' | 'error')[] | undefined; /** Sets whether or not the element is in an invalid state. This is a display-only prop, and will not prevent form submission. */ invalid?: boolean | undefined; /** Text that describes the control. Will be both visible and clickable. */ label?: React.ReactNode; /** Specifies the maximum length of text. */ maxLength?: number | undefined; /** Specifies the minimum length of text. */ minLength?: number | undefined; /** Specifies the name for this input that's submitted with the form. */ name?: string | undefined; /** Required for controlled inputs. Fires immediately when the input's value is changed by the user (for example, it fires on every keystroke). Behaves like the browser input event. */ onChange?: ((event: React.ChangeEvent) => void) | undefined; /** Fires when a key is pressed. */ onKeyDown?: ((event: React.KeyboardEvent) => void) | undefined; /** Fires when a key is released. */ onKeyUp?: ((event: React.KeyboardEvent) => void) | undefined; /** Displayed in a dimmed color when the input value is empty. */ placeholder?: string | undefined; /** If `true`, the input is not editable by the user. */ readOnly?: boolean | undefined; /** If `true`, the value must be provided for the form to submit. */ required?: boolean | undefined; resizeable?: boolean | undefined; rows?: number | undefined; /** The size of the component. */ size?: ('small' | 'medium' | 'large') | undefined; /** If explicitly set to `true` or `false`, enables or disables spellchecking. */ spellCheck?: boolean | 'true' | 'false' | undefined; /** Overrides the default tab key behavior. Avoid using values other than `-1` and `0`. */ tabIndex?: number | undefined; /** Controls the input's text. When you pass this prop, you must also pass an `onChange` handler that updates the passed value. */ value?: string | undefined; wrap?: ('soft' | 'hard') | undefined; }; export declare const TextArea: ("TextArea" & { readonly type?: "TextArea" | undefined; readonly props?: TextAreaProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("TextArea" & { readonly type?: "TextArea" | undefined; readonly props?: TextAreaProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type TextArea = RemoteComponentType<'TextArea', TextAreaProps>; export type TextFieldProps = { /** Specifies one of the possible autocomplete behaviors. */ autoComplete?: string | undefined; /** If `true`, React will focus the element on mount. */ autoFocus?: boolean | undefined; css?: { /** The width of the component. See [Sizing](https://docs.stripe.com/stripe-apps/style#sizing) for details. */ width?: (number | 'auto' | 'fill' | 'min' | 'max' | 'fit' | '1/2' | '1/3' | '2/3' | '1/4' | '2/4' | '3/4' | '1/5' | '2/5' | '3/5' | '4/5' | '1/6' | '2/6' | '3/6' | '4/6' | '5/6' | '1/12' | '2/12' | '3/12' | '4/12' | '5/12' | '6/12' | '7/12' | '8/12' | '9/12' | '10/12' | '11/12') | undefined; } | undefined; /** Specifies the initial value that a user can change. */ defaultValue?: string | undefined; /** Descriptive text that will be rendered adjacent to the control's label. */ description?: string | undefined; /** Sets whether or not the element should be disabled. Prevents selection. */ disabled?: boolean | undefined; /** Error text that will be rendered below the control. */ error?: string | undefined; /** Specifies the `id` of the `` this input belongs to. If omitted, it's the closest parent form. */ form?: string | undefined; /** Visually hides the specified elements. The hidden elements will still be present and visible to screen readers. */ hiddenElements?: ('label' | 'description' | 'error')[] | undefined; /** Sets whether or not the element is in an invalid state. This is a display-only prop, and will not prevent form submission. */ invalid?: boolean | undefined; /** Text that describes the control. Will be both visible and clickable. */ label?: React.ReactNode; /** Specifies the maximum length of text. */ maxLength?: number | undefined; /** Specifies the minimum length of text. */ minLength?: number | undefined; /** Specifies the name for this input that's submitted with the form. */ name?: string | undefined; /** Required for controlled inputs. Fires immediately when the input's value is changed by the user (for example, it fires on every keystroke). Behaves like the browser input event. */ onChange?: ((event: React.ChangeEvent) => void) | undefined; /** Fires when a key is pressed. */ onKeyDown?: ((event: React.KeyboardEvent) => void) | undefined; /** Fires when a key is released. */ onKeyUp?: ((event: React.KeyboardEvent) => void) | undefined; /** Displayed in a dimmed color when the input value is empty. */ placeholder?: string | undefined; /** If `true`, the input is not editable by the user. */ readOnly?: boolean | undefined; /** If `true`, the value must be provided for the form to submit. */ required?: boolean | undefined; /** The size of the component. */ size?: ('small' | 'medium' | 'large') | undefined; /** If explicitly set to `true` or `false`, enables or disables spellchecking. */ spellCheck?: boolean | 'true' | 'false' | undefined; /** Overrides the default tab key behavior. Avoid using values other than `-1` and `0`. */ tabIndex?: number | undefined; /** Choose between the text-alike types on an input. */ type?: ('number' | 'text' | 'search' | 'tel' | 'url' | 'email' | 'password') | undefined; /** Controls the input's text. When you pass this prop, you must also pass an `onChange` handler that updates the passed value. */ value?: string | undefined; }; export declare const TextField: ("TextField" & { readonly type?: "TextField" | undefined; readonly props?: TextFieldProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("TextField" & { readonly type?: "TextField" | undefined; readonly props?: TextFieldProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type TextField = RemoteComponentType<'TextField', TextFieldProps>; export type TooltipProps = { /** The contents of the component. */ children: React.ReactNode; /** The target element that should be used as the `Tooltip` trigger. */ trigger: React.ReactElement; /** How much time in milliseconds to wait before showing the `Tooltip` on hover. */ delay?: number | undefined; /** How the `Tooltip` should be placed relative to the trigger element. */ placement?: ('bottom' | 'bottom left' | 'bottom right' | 'bottom start' | 'bottom end' | 'top' | 'top left' | 'top right' | 'top start' | 'top end' | 'left' | 'left top' | 'left bottom' | 'start' | 'start top' | 'start bottom' | 'right' | 'right top' | 'right bottom' | 'end' | 'end top' | 'end bottom') | undefined; /** The style variant of the `Tooltip`. */ type?: ('label' | 'description') | undefined; }; export declare const Tooltip: ("Tooltip" & { readonly type?: "Tooltip" | undefined; readonly props?: TooltipProps | undefined; readonly children?: true | undefined; } & React.ComponentClass>, any>) | ("Tooltip" & { readonly type?: "Tooltip" | undefined; readonly props?: TooltipProps | undefined; readonly children?: true | undefined; } & React.FunctionComponent>>); export type Tooltip = RemoteComponentType<'Tooltip', TooltipProps>;