@stripe/ui-extension-sdk
Version:
The suite of functionality available to UI extensions in Stripe apps
658 lines (655 loc) • 108 kB
TypeScript
import * as React from 'react';
import { RemoteComponentType } from '@remote-ui/core';
export type Channel = {
domain?: any[] | undefined;
format?: ((Currency | UnitIdentifier) | ('capitalize' | {
[x: string]: string;
})) | undefined;
label?: string | undefined;
value?: (string | number) | undefined;
};
export type Currency = {
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';
};
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 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;
/** @deprecated Use the `backgroundColor` property instead. */
background?: ('container' | 'surface') | undefined;
/** @deprecated */
isolatedDependencies?: string[] | undefined;
/** @deprecated Use the `stack` property instead. */
layout?: ('column' | 'inline' | 'row' | 'inline-column' | 'inline-row') | undefined;
/** @deprecated Use nested styles instead. */
when?: (string | {
pointer: 'none' | 'coarse' | 'fine';
colorScheme: 'dark' | 'light';
motion: 'supported' | 'reduced';
hover: 'none' | 'hover';
viewportWidth: 'small' | 'medium' | 'large' | 'xlarge';
contrast: 'more' | 'less';
}[] | {
pointer: 'none' | 'coarse' | 'fine';
colorScheme: 'dark' | 'light';
motion: 'supported' | 'reduced';
hover: 'none' | 'hover';
viewportWidth: 'small' | 'medium' | 'large' | 'xlarge';
contrast: 'more' | 'less';
}) | 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;
/** 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;
/** @deprecated */
className?: string | 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;
/** An onChange-alike event that fires only when the change results
in a valid date. Identical behavior to `<input type="date" />`. */
onChange?: ((event: {
target: {
value: 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 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;
/** @deprecated Use `setShown` instead. If the user clicks out of the `FocusView` or presses
the escape button, this informs the extension that the user has closed the view. */
onClose?: (() => void) | 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?: ('row' | 'column') | undefined;
/** The text of the group's legend. This will be associated as a label with all fields inside the group. */
legend?: string | undefined;
/** Marks the group as invalid. Note that this is a visual-only property, and won't prevent submission.
@deprecated */
invalid?: boolean | 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' | '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<import("@remote-ui/react").ReactPropsFromRemoteComponentType<RemoteComponentType<"Icon", IconProps, true>>, any>) | ("Icon" & {
readonly type?: "Icon" | undefined;
readonly props?: IconProps | undefined;
readonly children?: true | undefined;
} & React.FunctionComponent<import("@remote-ui/react").ReactPropsFromRemoteComponentType<RemoteComponentType<"Icon", IconProps, true>>>);
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<import("@remote-ui/react").ReactPropsFromRemoteComponentType<RemoteComponentType<"Img", ImgProps, true>>, any>) | ("Img" & {
readonly type?: "Img" | undefined;
readonly props?: ImgProps | undefined;
readonly children?: true | undefined;
} & React.FunctionComponent<import("@remote-ui/react").ReactPropsFromRemoteComponentType<RemoteComponentType<"Img", ImgProps, true>>>);
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'