@stripe/ui-extension-sdk
Version:
The suite of functionality available to UI extensions in Stripe apps
760 lines • 123 kB
TypeScript
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<import("@remote-ui/react").ReactPropsFromRemoteComponentType<RemoteComponentType<"AccordionItem", AccordionItemProps, true>>, any>) | ("AccordionItem" & {
readonly type?: "AccordionItem" | undefined;
readonly props?: AccordionItemProps | undefined;
readonly children?: true | undefined;
} & React.FunctionComponent<import("@remote-ui/react").ReactPropsFromRemoteComponentType<RemoteComponentType<"AccordionItem", AccordionItemProps, true>>>);
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<import("@remote-ui/react").ReactPropsFromRemoteComponentType<RemoteComponentType<"Accordion", AccordionProps, true>>, any>) | ("Accordion" & {
readonly type?: "Accordion" | undefined;
readonly props?: AccordionProps | undefined;
readonly children?: true | undefined;
} & React.FunctionComponent<import("@remote-ui/react").ReactPropsFromRemoteComponentType<RemoteComponentType<"Accordion", AccordionProps, true>>>);
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<import("@remote-ui/react").ReactPropsFromRemoteComponentType<RemoteComponentType<"Badge", BadgeProps, true>>, any>) | ("Badge" & {
readonly type?: "Badge" | undefined;
readonly props?: BadgeProps | undefined;
readonly children?: true | undefined;
} & React.FunctionComponent<import("@remote-ui/react").ReactPropsFromRemoteComponentType<RemoteComponentType<"Badge", BadgeProps, true>>>);
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<import("@remote-ui/react").ReactPropsFromRemoteComponentType<RemoteComponentType<"Banner", BannerProps, true>>, any>) | ("Banner" & {
readonly type?: "Banner" | undefined;
readonly props?: BannerProps | undefined;
readonly children?: true | undefined;
} & React.FunctionComponent<import("@remote-ui/react").ReactPropsFromRemoteComponentType<RemoteComponentType<"Banner", BannerProps, true>>>);
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<import("@remote-ui/react").ReactPropsFromRemoteComponentType<RemoteComponentType<"BarChart", BarChartProps, true>>, any>) | ("BarChart" & {
readonly type?: "BarChart" | undefined;
readonly props?: BarChartProps | undefined;
readonly children?: true | undefined;
} & React.FunctionComponent<import("@remote-ui/react").ReactPropsFromRemoteComponentType<RemoteComponentType<"BarChart", BarChartProps, true>>>);
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<import("@remote-ui/react").ReactPropsFromRemoteComponentType<RemoteComponentType<"Box", BoxProps, true>>, any>) | ("Box" & {
readonly type?: "Box" | undefined;
readonly props?: BoxProps | undefined;
readonly children?: true | undefined;
} & React.FunctionComponent<import("@remote-ui/react").ReactPropsFromRemoteComponentType<RemoteComponentType<"Box", BoxProps, true>>>);
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<import("@remote-ui/react").ReactPropsFromRemoteComponentType<RemoteComponentType<"ButtonGroup", ButtonGroupProps, true>>, any>) | ("ButtonGroup" & {
readonly type?: "ButtonGroup" | undefined;
readonly props?: ButtonGroupProps | undefined;
readonly children?: true | undefined;
} & React.FunctionComponent<import("@remote-ui/react").ReactPropsFromRemoteComponentType<RemoteComponentType<"ButtonGroup", ButtonGroupProps, true>>>);
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<import("@remote-ui/react").ReactPropsFromRemoteComponentType<RemoteComponentType<"Button", ButtonProps, true>>, any>) | ("Button" & {
readonly type?: "Button" | undefined;
readonly props?: ButtonProps | undefined;
readonly children?: true | undefined;
} & React.FunctionComponent<import("@remote-ui/react").ReactPropsFromRemoteComponentType<RemoteComponentType<"Button", ButtonProps, true>>>);
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 `<form>` 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<HTMLInputElement>) => 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<import("@remote-ui/react").ReactPropsFromRemoteComponentType<RemoteComponentType<"Checkbox", CheckboxProps, true>>, any>) | ("Checkbox" & {
readonly type?: "Checkbox" | undefined;
readonly props?: CheckboxProps | undefined;
readonly children?: true | undefined;
} & React.FunctionComponent<import("@remote-ui/react").ReactPropsFromRemoteComponentType<RemoteComponentType<"Checkbox", CheckboxProps, true>>>);
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<import("@remote-ui/react").ReactPropsFromRemoteComponentType<RemoteComponentType<"ChipList", ChipListProps, true>>, any>) | ("ChipList" & {
readonly type?: "ChipList" | undefined;
readonly props?: ChipListProps | undefined;
readonly children?: true | undefined;
} & React.FunctionComponent<import("@remote-ui/react").ReactPropsFromRemoteComponentType<RemoteComponentType<"ChipList", ChipListProps, true>>>);
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<import("@remote-ui/react").ReactPropsFromRemoteComponentType<RemoteComponentType<"Chip", ChipProps, true>>, any>) | ("Chip" & {
readonly type?: "Chip" | undefined;
readonly props?: ChipProps | undefined;
readonly children?: true | undefined;
} & React.FunctionComponent<import("@remote-ui/react").ReactPropsFromRemoteComponentType<RemoteComponentType<"Chip", ChipProps, true>>>);
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<import("@remote-ui/react").ReactPropsFromRemoteComponentType<RemoteComponentType<"ContextView", ContextViewProps, true>>, any>) | ("ContextView" & {
readonly type?: "ContextView" | undefined;
readonly props?: ContextViewProps | undefined;
readonly children?: true | undefined;
} & React.FunctionComponent<import("@remote-ui/react").ReactPropsFromRemoteComponentType<RemoteComponentType<"ContextView", ContextViewProps, true>>>);
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<import("@remote-ui/react").ReactPropsFromRemoteComponentType<RemoteComponentType<"DateField", DateFieldProps, true>>, any>) | ("DateField" & {
readonly type?: "DateField" | undefined;
readonly props?: DateFieldProps | undefined;
readonly children?: true | undefined;
} & React.FunctionComponent<import("@remote-ui/react").ReactPropsFromRemoteComponentType<RemoteComponentType<"DateField", DateFieldProps, true>>>);
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<import("@remote-ui/react").ReactPropsFromRemoteComponentType<RemoteComponentType<"DetailPageModule", DetailPageModuleProps, true>>, any>) | ("DetailPageModule" & {
readonly type?: "DetailPageModule" | undefined;
readonly props?: DetailPageModuleProps | undefined;
readonly children?: true | undefined;
} & React.FunctionComponent<import("@remote-ui/react").ReactPropsFromRemoteComponentType<RemoteComponentType<"DetailPageModule", DetailPageModuleProps, true>>>);
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<import("@remote-ui/react").ReactPropsFromRemoteComponentType<RemoteComponentType<"DetailPagePropertyList", DetailPagePropertyListProps, true>>, any>) | ("DetailPagePropertyList" & {
readonly type?: "DetailPagePropertyList" | undefined;
readonly props?: DetailPagePropertyListProps | undefined;
readonly children?: true | undefined;
} & React.FunctionComponent<import("@remote-ui/react").ReactPropsFromRemoteComponentType<RemoteComponentType<"DetailPagePropertyList", DetailPagePropertyListProps, true>>>);
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<import("@remote-ui/react").ReactPropsFromRemoteComponentType<RemoteComponentType<"DetailPageTable", DetailPageTableProps, true>>, any>) | ("DetailPageTable" & {
readonly type?: "DetailPageTable" | undefined;
readonly props?: DetailPageTableProps | undefined;
readonly children?: true | undefined;
} & React.FunctionComponent<import("@remote-ui/react").ReactPropsFromRemoteComponentType<RemoteComponentType<"DetailPageTable", DetailPageTableProps, true>>>);
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<import("@remote-ui/react").ReactPropsFromRemoteComponentType<RemoteComponentType<"FocusView", FocusViewProps, true>>, any>) | ("FocusView" & {
readonly type?: "FocusView" | undefined;
readonly props?: FocusViewProps | undefined;
readonly children?: true | undefined;
} & React.FunctionComponent<import("@remote-ui/react").ReactPropsFromRemoteComponentType<RemoteComponentType<"FocusView", FocusViewProps, true>>>);
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<import("@remote-ui/react").ReactPropsFromRemoteComponentType<RemoteComponentType<"FormFieldGroup", FormFieldGroupProps, true>>, any>) | ("FormFieldGroup" & {
readonly type?: "FormFieldGroup" | undefined;
readonly props?: FormFieldGroupProps | undefined;
readonly children?: true | undefined;
} & React.FunctionComponent<import("@remote-ui/react").ReactPropsFromRemoteComponentType<RemoteComponentType<"FormFieldGroup", FormFieldGroupProps, true>>>);
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' | 'checkCirc