@brokerize/elements 1.0.1

package/dist/bundle.d.ts

@@ -0,0 +1,956 @@
+import type { AuthContextConfiguration } from '@brokerize/client';
+import type { AuthorizedApiContext } from '@brokerize/client';
+import type { Brokerize } from '@brokerize/client';
+import type { BrokerizeError } from '@brokerize/client';
+import * as Client from '@brokerize/client';
+import type { Models } from '@brokerize/client';
+
+export declare type BrokerizeBaseConfig = {
+    	/**
+     	 * @deprecated just provide the theme in config objects directly
+     	 */
+    	renderConfig?: BrokerizeRenderConfig;
+
+    	/**
+     	 * Optionally provide a theme, otherwise a default theme will be used.
+     	 */
+    	theme?: Theme;
+
+    	/**
+     	 * If true, a frame with some "powered by brokerize" information and links will be added to the component.
+     	 */
+    	addFrame?: boolean;
+
+    	/**
+     	 * If provided, a support link will be added to footers (only if `addFrame` is used),
+     	 */
+    	supportLink?: SupportLink;
+
+    	renderTo: HTMLElement;
+    	authorizedApiContext: AuthorizedApiContext;
+
+    	/**
+     	 * If provided, the function will be used to open external links (e.g. for cost estimation documents).
+     	 * If not provided, this will default to creating a window using `window.open`.
+     	 *
+     	 * @param url the URL to open
+     	 */
+    	openExternalLink?: openExternalLinkCallback;
+
+    	/**
+     	 * If provided, overrides the "save to disk" behavior. Defaults to creating an `a` HTML element and issuing
+     	 * a click event on that, which works fine in browsers but not in mobile apps.
+     	 *
+     	 * @param download the downloaded file to save
+     	 */
+    	saveDownloadedFile?: SaveDownloadedFile;
+};
+
+export declare type BrokerizeElement = {
+    	theme: Theme;
+    	destroy: () => void;
+};
+
+export declare type BrokerizeElements = {
+    	createBrokerizeMain: (cfg: BrokerizeMainConfig) => BrokerizeMainElement;
+    	createBrokerList: (cfg: BrokerListConfig) => BrokerizeElement;
+    	createLoginForm: (cfg: LoginFormConfig) => BrokerizeElement;
+    	createBrokerLoginForm: (cfg: BrokerLoginFormConfig) => BrokerizeElement;
+    	createOrderForm: (cfg: OrderFormConfig) => BrokerizeElement;
+    	createPortfolioTable: (cfg: PortfolioTableConfig) => BrokerizeElement;
+    	createSessionTanForm: (cfg: SessionTanFormConfig) => BrokerizeElement;
+    	createOrderTable: (cfg: OrderTableConfig) => BrokerizeElement;
+    	createOrderReceipt: (cfg: OrderReceiptConfig) => BrokerizeElement;
+    	createPositionsTable: (cfg: PositionsTableConfig) => BrokerizeElement;
+    	createChangeOrderForm: (cfg: ChangeOrderFormConfig) => BrokerizeElement;
+    	createCancelOrderForm: (cfg: CancelOrderFormConfig) => BrokerizeElement;
+    	createSessionsTable: (cfg: SessionsTableConfig) => BrokerizeElement;
+    	createPortfolioView: (cfg: PortfolioViewConfig) => BrokerizeElement;
+    	createModalHost: (cfg: ModalHostConfig) => BrokerizeElement;
+    	modalService: ModalService;
+    	/**
+     	 * Configure global settings for Brokerize Elements. The global configuration is shared across all instances of Brokerize Elements.
+     	 * All configuration parameters are optional.
+     	 *
+     	 * @param config configuration parameters to set
+     	 * @returns
+     	 */
+    	configure: (config: Partial<BrokerizeElementsGlobalConfiguration>) => void;
+};
+
+export declare type BrokerizeElementsGlobalConfiguration = {
+    	/**
+     	 * Optionally provide a path where static assets (image files) can be loaded from. If it is not provided, assets will be
+     	 * included from `https://assets.brokerize.com`, so make sure your Content-Security-Policy allows this.
+     	 *
+     	 * If you bundle the assets yourself (have a look at the `@brokerize/elements` assets subdirectory), you can
+     	 * change this path. This makes sense if you are building a mobile app where you can bundle the assets together
+     	 * with other app resources.
+     	 */
+    	assetsPath?: string;
+};
+
+export declare type BrokerizeMainConfig = BrokerizeBaseConfig & {
+    	onNavigationStateChange?: (state: any) => void;
+    	useNavigation?: boolean;
+    	/**
+     	 * If provided, OAuth broker logins will return to this URL. Defaults to window.location.href.
+     	 */
+    	returnToUrl?: string;
+};
+
+export declare type BrokerizeMainElement = BrokerizeElement & {
+    	navigation: BrokerizeNavigation;
+};
+
+export declare type BrokerizeNavigation = {
+    	NavigateToPortfolio: (portfolioId: string) => void;
+    	NavigateToOrderForm: (_isin: string, _initialOrderCreateValues: OrderFormInitialOrder) => void;
+    	NavigateToChangeBroker: () => void;
+    	NavigateToDepot: () => void;
+    	NavigateToSessions: () => void;
+};
+
+/**
+ * @deprecated
+ */
+export declare type BrokerizeRenderConfig = {
+    	theme: Theme;
+    	assetsPath?: string;
+};
+
+export declare type BrokerizeSummaryData = { title: string } & any;
+
+export declare type BrokerListConfig = {
+    	onLogin: (data: { brokerName: string }) => void;
+    	confirmationStorage?: ConfirmationStorage;
+} & BrokerizeBaseConfig;
+
+export declare type BrokerLoginFormConfig = {
+    	brokerName: string;
+
+    	/**
+     	 * If this is given, only this env will be available. Clients may choose to store the environment after a successful login so that
+     	 * users may skip the env selection.
+     	 */
+    	env?: string;
+
+    	onExit: (loggedIn: boolean) => void;
+
+    	/**
+     	 * If provided, OAuth broker logins will return to this URL. Defaults to window.location.href.
+     	 */
+    	returnToUrl?: string;
+
+    	/**
+     	 * If provided, this function will be called to start a broker OAuth login. Defaults to setting window.location.href to
+     	 * the url.
+     	 */
+    	onRedirect?: (url: string) => void;
+
+    	/**
+     	 * If provided, the store will be used to try load and store broker credentials. Note that this *MUST* be a safe storage,
+     	 * as it contains the user's full broker login data (username and password). This is designed to be only used in native
+     	 * apps, where those credentials can be stored safely (e.g. encrypted in the Secure Encalve).
+     	 *
+     	 * If in doubt, *DO NOT* provide a CredentialsStore.
+     	 *
+     	 * @deprecated credentials will only be interacted with on external OAuth pages
+     	 */
+    	credentialsStore?: CredentialsStore;
+} & BrokerizeBaseConfig;
+
+export declare type CancelOrderFormConfig = {
+    	orderId: string;
+    	onExit: () => void;
+    	onNavigate: (linkTarget: LinkTarget) => void;
+} & BrokerizeBaseConfig;
+
+export declare type ChangeOrderFormConfig = {
+    	orderId: string;
+    	onExit: () => void;
+} & BrokerizeBaseConfig;
+
+export { Client }
+
+/**
+ * Wrapper for AWS Cognito, which can be provided to `@brokerize/client` (given a proper configuration).
+ * @public
+ */
+export declare const cognitoFacade: Client.CognitoFacade;
+
+export declare type ConfirmationStorage = {
+    	getTermsAccepted(termsId: string): ConfirmItemAcceptanceEntry | null | undefined;
+    	setTermsAccepted(termsId: string, entry: ConfirmItemAcceptanceEntry | null);
+};
+
+export declare type ConfirmItemAcceptanceEntry = {
+    	acceptedAt: number;
+};
+
+export declare type CredentialsStore = {
+    	storeCredentials: (displayLabel: string, brokerName: string, value: string) => Promise<void>;
+    	loadCredentials: (brokerName: string) => Promise<string | null>;
+};
+
+export declare type DataCellValue =
+	| DataCellValueString
+	| DataCellValueBrokerName
+	| DataCellValueDateTime
+	| DataCellValueDate
+	| DataCellValueAmount
+	| DataCellValueLink
+	| DataCellValueActions
+	| DataCellValueOrderValidity
+	| DataCellValueOrderTrailingDistance
+	| DataCellValueProfitLossRel
+	| DataCellValueProfitLossAbs
+	| DataCellValueImage
+	| DataCellValueHtml
+	| DataCellValueDebug
+	| DataCellValueOrderModelBadge
+	| DataCellValuePlainText;
+
+export declare type DataCellValueActions = {
+    	type: 'actions';
+    	value: TableRowAction[];
+};
+
+export declare type DataCellValueAmount = {
+    	type: 'amount';
+    	value: Models.Amount;
+    	tooltip?: string;
+};
+
+export declare type DataCellValueBrokerName = {
+    	type: 'brokerName';
+    	value: string;
+};
+
+export declare type DataCellValueDate = {
+    	type: 'date';
+    	value: Date;
+};
+
+export declare type DataCellValueDateTime = {
+    	type: 'datetime';
+    	value: Date;
+};
+
+export declare type DataCellValueDebug = {
+    	type: 'debug';
+    	value: any;
+};
+
+export declare type DataCellValueHtml = {
+    	type: 'html';
+    	value: string;
+};
+
+export declare type DataCellValueImage = {
+    	type: 'image';
+    	value: Image_2;
+};
+
+export declare type DataCellValueLink = {
+    	type: 'link';
+    	value: Models.GenericTableRowValueLinkPortfolio | Models.GenericTableRowValueLinkUrl;
+};
+
+declare type DataCellValueOrderModelBadge = {
+    	type: 'orderModelBadge';
+    	value: {
+        		orderModelLabel: string;
+        		direction: Models.Direction;
+        		intent: Models.OrderIntent;
+        	};
+};
+
+export declare type DataCellValueOrderTrailingDistance = {
+    	type: 'orderTrailingDistance';
+    	value: Models.TrailingDistance;
+    	currency: string;
+};
+
+export declare type DataCellValueOrderValidity = {
+    	type: 'orderValidity';
+    	value: Models.OrderValidity;
+};
+
+declare type DataCellValuePlainText = {
+    	type: 'plainText';
+    	value: string;
+};
+
+export declare type DataCellValueProfitLossAbs = {
+    	type: 'profitLossAbs';
+    	value: Models.Amount;
+};
+
+export declare type DataCellValueProfitLossRel = {
+    	type: 'profitLossRel';
+    	value: number;
+};
+
+export declare type DataCellValueString = {
+    	type: 'text';
+    	value: string;
+    	/**
+     	 * If true, a "copy to clipboard" button is shown
+     	 */
+    	clipboard?: boolean;
+    	/**
+     	 * If true, dispatch a "rowNavigate" event when the text is clicked
+     	 */
+    	navigate?: boolean;
+    	cssConfig?: any;
+};
+
+export declare type DownloadedFile = {
+    	blob: Blob;
+    	filename: string;
+};
+
+/**
+ * Entry-point for creating all available brokerize elements.
+ * @public
+ */
+export declare const Elements: BrokerizeElements;
+
+export declare type Header = HeaderItem[];
+
+export declare type HeaderItem = {
+    	id: string;
+    	label: string;
+    	align?: 'left' | 'right' | 'center';
+    	width?: number | string;
+    	sortable?: boolean;
+    	visuallyHidden?: boolean;
+    	defaultDirection?: OrderDirection;
+};
+
+declare type Image_2 = {
+    	url: string;
+    	height: string;
+};
+export { Image_2 as Image }
+
+export declare type LinkTarget = {
+    	type: 'portfolio';
+    	portfolioId: string;
+};
+
+export declare type LoginFormConfig = {
+    	onGuestLogin: () => void;
+    	client: Brokerize;
+    	onLogin: (authCtxConfiguration: AuthContextConfiguration) => void;
+} & BrokerizeBaseConfig;
+
+export declare type ModalHostConfig = { showToast?: ShowToast } & BrokerizeBaseConfig;
+
+export declare interface ModalService {
+    	showSecurityInformation(title: string, content: string): void;
+    	showConfirm(msg: string): Promise<boolean>;
+    	showSessionTanModal(sessionId: string): void;
+    	activate(): void;
+    	deactivate(): void;
+    	override(overrides: Partial<ModalService>): void;
+    	showReceipt(data: ReceiptData, showActions: boolean, handleOrderTableAction: (e: any) => void): void;
+    	showDetailedTable(table: Models.GenericTable): void;
+    	showPositionDetail(
+    		position: Models.Position,
+    		row?: TableRow,
+    		header?: Header,
+    		handleTableAction?: (actionId: string, rowId: string) => void
+    	): void;
+    	showLoginForm(brokerName: any, returnToUrl: string, redirect: (redirecTo: string) => void): void;
+    	showToast(opts: ToastOptions): void;
+}
+
+export declare type openExternalLinkCallback = (url: string, target?: string, windowfeatures?: string) => void;
+
+export declare type OrderDirection = 'asc' | 'desc';
+
+export declare type OrderFormConfig = {
+    	portfolioId: string;
+    	/**
+     	 * The ISIN to show the OrderForm.
+     	 * @deprecated
+     	 */
+    	isin?: string;
+    	/**
+     	 * The security to show the OrderForm.
+     	 */
+    	security: Models.Security;
+    	/**
+     	 * Can be provided to pick a default exchange from the known brokerize exchanges.
+     	 * Note that it may be ignored depending on broker's preferences.
+     	 */
+    	preferredExchangeId?: number;
+    	/*
+    	 * If provided, the given broker exchange id will be pre-selected in the OrderForm.
+    	 * Note that depending on `PreparedTrade.noExchangeDefault`, frontends are obligated to present a selection of exchanges
+    	 * before passing this value, as brokers may not allow pre-selecting exchanges. Make sure to only
+    	 * pass this value if the user has already selected an exchange and knows their options.
+    	 *
+    	 * The value will only be applied if it is available via PreparedTrade - the frontend should check this before passing the value.
+    	 */
+    	overrideBrokerExchangeId?: string;
+
+    	/**
+     	 * If true, users cannot change the order direction. A direction must be provided in `initialOrder.direction` in this case.
+     	 */
+    	lockOrderDirection?: boolean;
+
+    	/**
+     	 * If true, the order direction toggle button is hidden. It should be used in combination with `lockOrderDirection=true`.
+     	 */
+    	hideOrderDirection?: boolean;
+
+    	/**
+     	 * Some initial order parameters may be provided here optionally (direction, size, orderModel, limit, stop, stopLimit, stopLoss and validity).
+     	 * Note that the OrderForm may ignore some or all of the desired parameters, depending on whether the values can be set for the given broker / portfolio / ISIN combination.
+     	 */
+    	initialOrder?: OrderFormInitialOrder;
+    	onOrderCreated: (response: Models.CreateTradeResponse) => void;
+    	/**
+     	 * If order creation is unsucessful, this callback will be called with the error response.
+     	 */
+    	onOrderError?: (details: { error: BrokerizeError }) => void;
+    	/**
+     	 * If custom quotes should be shown in the order form, provide an implementation of `SecurityQuotesProvider`.
+     	 */
+    	quotesProvider?: SecurityQuotesProvider;
+} & BrokerizeBaseConfig;
+
+export declare type OrderFormInitialOrder = Partial<
+	Pick<
+		Models.OrderCreate,
+		| 'direction'
+		| 'intent'
+		| 'orderModel'
+		| 'limit'
+		| 'stop'
+		| 'stopLimit'
+		| 'stopLoss'
+		| 'takeProfit'
+		| 'validity'
+		| 'size'
+		| 'trailingDistance'
+		| 'trailingLimitTolerance'
+	>
+>;
+
+export declare type OrderReceiptConfig = {
+    	orderId: string;
+    	onNavigate: (linkTarget: LinkTarget) => void;
+} & BrokerizeBaseConfig;
+
+export declare type OrderTableConfig = {
+    	portfolioId: string;
+
+    	onEditOrder: ({ orderId }: { orderId: string }) => void;
+    	onCancelOrder: ({ orderId }: { orderId: string }) => void;
+    	onShowReceipt: ({ orderId }: { orderId: string }) => void;
+} & BrokerizeBaseConfig;
+
+export declare type PortfolioTableConfig = {
+    	hideInactivePortfolios?: boolean;
+    	onNavigate: (portfolio: Models.Portfolio) => void;
+} & BrokerizeBaseConfig;
+
+export declare type PortfolioViewConfig = {
+    	portfolioId: string;
+    	onBuy: (opts: { security: Models.Security; isin: string }) => void;
+    	onSell: (opts: { security: Models.Security; isin: string; availableSize: number }) => void;
+    	onCancelOrder: (opts: { orderId: string }) => void;
+    	onChangeOrder: (opts: { orderId: string }) => void;
+    	onShowReceipt: (opts: { orderId: string }) => void;
+} & BrokerizeBaseConfig;
+
+export declare type PositionsTableConfig = {
+    	portfolioId: string;
+
+    	onTradeInstrument: (opts: { security: Models.Security; isin: string; direction: Models.Direction }) => void;
+} & BrokerizeBaseConfig;
+
+export declare type ReceiptData = {
+    	order: Models.Order;
+    	portfolio: Models.Portfolio;
+};
+
+export declare type SaveDownloadedFile = (download: DownloadedFile) => Promise<void>;
+
+export declare type SecurityQuote = {
+    	quote: number;
+    	date: Date;
+};
+
+export declare type SecurityQuoteCallback = (err: Error, quote: SecurityQuoteContainer) => void;
+
+export declare type SecurityQuoteContainer = {
+    	bid?: SecurityQuote;
+    	ask?: SecurityQuote;
+};
+
+export declare type SecurityQuoteMeta = {
+    	decimals: number;
+    	currency: string;
+    	quoteSourceName: string;
+};
+
+export declare type SecurityQuotes = {
+    	loadMeta: (abortSignal?: AbortSignal) => Promise<SecurityQuoteMeta>;
+    	subscribe: (cb: SecurityQuoteCallback) => SecurityQuoteSubscription;
+};
+
+export declare type SecurityQuotesProvider = (opts: SecurityQuotesProviderOpts) => SecurityQuotes;
+
+export declare type SecurityQuotesProviderOpts = {
+    	security?: Models.Security;
+    	/**
+     	 * The ISIN of the security.
+     	 * @deprecated
+     	 */
+    	isin?: string;
+    	/**
+     	 * The (brokerize) exchangeId that is currently selected. Note that it may be empty if the exchange is not
+     	 * mapped to a brokerize exchange.
+     	 */
+    	exchangeId?: number;
+    	/**
+     	 * If provided by the brokerize API, the token that can be used to access the quotes via brokerize.
+     	 */
+    	securityQuotesToken?: string;
+};
+
+export declare type SecurityQuoteSubscription = { unsubscribe: () => void };
+
+export declare type SessionsTableConfig = {
+    	onEnableSessionTan: (opts: { sessionId: string }) => void;
+} & BrokerizeBaseConfig;
+
+export declare type SessionTanFormConfig = {
+    	sessionId: string;
+    	/**
+     	 * Called when the SessionTanForm is ended.
+     	 * @param details `enabled` is `true` if the Session TAN has been enabled successfully.
+     	 * @returns
+     	 */
+    	onExit: (details: { enabled: boolean }) => void;
+} & BrokerizeBaseConfig;
+
+export declare type ShowToast = (opts: ToastOptions) => void;
+
+export declare type SupportLink = {
+    	emailSubject: string;
+};
+
+export declare type TableData = TableRow[];
+
+export declare type TableOrder = {
+    	field: string;
+    	direction: OrderDirection;
+};
+
+export declare type TableRow = {
+    	id: string;
+    	map: Record<string, DataCellValue>;
+    	showFaded?: boolean;
+};
+
+export declare type TableRowAction = {
+    	id: string;
+    	label: string;
+};
+
+export declare type Theme = {
+    	layout: 'block' | 'columns';
+    	tokens: ThemeTokens;
+    	logoStyle: 'dark' | 'light';
+};
+
+export declare type ThemeTokens = {
+    	'zl-app-background-color'?: string;
+    	'zl-app-background-image'?: string;
+    	'zl-app-frame-border-color'?: string;
+    	'zl-app-frame-border-radius'?: string;
+    	'zl-app-frame-border-style'?: string;
+    	'zl-app-frame-border-width'?: string;
+    	'zl-app-frame-box-shadow'?: string;
+    	'zl-app-frame-padding'?: string;
+    	'zl-app-min-height'?: string;
+    	'zl-app-padding'?: string;
+    	'zl-border-radius-2xl'?: string;
+    	'zl-border-radius-3xl'?: string;
+    	'zl-border-radius-full'?: string;
+    	'zl-border-radius-lg'?: string;
+    	'zl-border-radius-md'?: string;
+    	'zl-border-radius-none'?: string;
+    	'zl-border-radius-sm'?: string;
+    	'zl-border-radius-xl'?: string;
+    	'zl-box-shadow-2xl'?: string;
+    	'zl-box-shadow-lg'?: string;
+    	'zl-box-shadow-md'?: string;
+    	'zl-box-shadow-sm'?: string;
+    	'zl-box-shadow-xl'?: string;
+    	'zl-btn-active-background-color'?: string;
+    	'zl-btn-active-background-image'?: string;
+    	'zl-btn-background-color'?: string;
+    	'zl-btn-background-image'?: string;
+    	'zl-btn-border-color'?: string;
+    	'zl-btn-border-radius'?: string;
+    	'zl-btn-border-style'?: string;
+    	'zl-btn-border-width'?: string;
+    	'zl-btn-countdown-bar-color'?: string;
+    	'zl-btn-default-color'?: string;
+    	'zl-btn-focus-background-image'?: string;
+    	'zl-btn-focus-color'?: string;
+    	'zl-btn-hover-background-color'?: string;
+    	'zl-btn-hover-background-image'?: string;
+    	'zl-btn-hover-box-shadow'?: string;
+    	'zl-btn-hover-color'?: string;
+    	'zl-btn-lg-font-size'?: string;
+    	'zl-btn-lg-padding-x'?: string;
+    	'zl-btn-lg-padding-y'?: string;
+    	'zl-btn-md-font-size'?: string;
+    	'zl-btn-md-padding-x'?: string;
+    	'zl-btn-md-padding-y'?: string;
+    	'zl-btn-muted-color'?: string;
+    	'zl-btn-outlined-color'?: string;
+    	'zl-btn-progessbar-height'?: string;
+    	'zl-btn-sm-font-size'?: string;
+    	'zl-btn-sm-padding-x'?: string;
+    	'zl-btn-sm-padding-y'?: string;
+    	'zl-card-background-color'?: string;
+    	'zl-card-border-color'?: string;
+    	'zl-card-border-radius'?: string;
+    	'zl-card-border-style'?: string;
+    	'zl-card-border-width'?: string;
+    	'zl-card-logo-max-width'?: string;
+    	'zl-card-logo-size'?: string;
+    	'zl-card-min-height'?: string;
+    	'zl-checkbox-border-radius'?: string;
+    	'zl-checkbox-border-width'?: string;
+    	'zl-checkbox-check-size'?: string;
+    	'zl-checkbox-color'?: string;
+    	'zl-checkbox-contrast-color'?: string;
+    	'zl-checkbox-label-color'?: string;
+    	'zl-checkbox-label-font-size'?: string;
+    	'zl-color-black'?: string;
+    	'zl-color-buy-base'?: string;
+    	'zl-color-dark'?: string;
+    	'zl-color-error-base'?: string;
+    	'zl-color-error-dark'?: string;
+    	'zl-color-error-decent'?: string;
+    	'zl-color-error-light'?: string;
+    	'zl-color-error-text'?: string;
+    	'zl-color-gray-base'?: string;
+    	'zl-color-gray-dark'?: string;
+    	'zl-color-gray-darker'?: string;
+    	'zl-color-gray-darkest'?: string;
+    	'zl-color-gray-light'?: string;
+    	'zl-color-gray-lighter'?: string;
+    	'zl-color-gray-lightest'?: string;
+    	'zl-color-light'?: string;
+    	'zl-color-outline'?: string;
+    	'zl-color-primary-base'?: string;
+    	'zl-color-primary-dark'?: string;
+    	'zl-color-primary-decent'?: string;
+    	'zl-color-primary-light'?: string;
+    	'zl-color-primary-text'?: string;
+    	'zl-color-sell-base'?: string;
+    	'zl-color-success-base'?: string;
+    	'zl-color-success-dark'?: string;
+    	'zl-color-success-decent'?: string;
+    	'zl-color-success-light'?: string;
+    	'zl-color-success-text'?: string;
+    	'zl-color-warning-base'?: string;
+    	'zl-color-warning-dark'?: string;
+    	'zl-color-warning-decent'?: string;
+    	'zl-color-warning-light'?: string;
+    	'zl-color-warning-text'?: string;
+    	'zl-color-white'?: string;
+    	'zl-cost-item-background-color'?: string;
+    	'zl-cost-item-border-radius'?: string;
+    	'zl-cost-item-box-shadow'?: string;
+    	'zl-cost-item-label-color'?: string;
+    	'zl-cost-item-label-font-size'?: string;
+    	'zl-cost-item-value-color'?: string;
+    	'zl-cost-item-value-font-size'?: string;
+    	'zl-cost-item-value-font-weight'?: string;
+    	'zl-countdown-duration-static'?: string;
+    	'zl-countdown-duration'?: string;
+    	'zl-default-base-rem'?: string;
+    	'zl-default-border-color'?: string;
+    	'zl-default-border-radius'?: string;
+    	'zl-default-border-width'?: string;
+    	'zl-default-box-shadow'?: string;
+    	'zl-default-font-size'?: string;
+    	'zl-default-link-color'?: string;
+    	'zl-default-link-decoration'?: string;
+    	'zl-default-padding-x'?: string;
+    	'zl-default-padding-y'?: string;
+    	'zl-default-text-color'?: string;
+    	'zl-font-family'?: string;
+    	'zl-font-size-2xl'?: string;
+    	'zl-font-size-2xs'?: string;
+    	'zl-font-size-3xl'?: string;
+    	'zl-font-size-4xl'?: string;
+    	'zl-font-size-5xl'?: string;
+    	'zl-font-size-6xl'?: string;
+    	'zl-font-size-base'?: string;
+    	'zl-font-size-lg'?: string;
+    	'zl-font-size-md'?: string;
+    	'zl-font-size-sm'?: string;
+    	'zl-font-size-xl'?: string;
+    	'zl-font-size-xs'?: string;
+    	'zl-font-weight-bold'?: string;
+    	'zl-font-weight-extrabold'?: string;
+    	'zl-font-weight-light'?: string;
+    	'zl-font-weight-medium'?: string;
+    	'zl-font-weight-normal'?: string;
+    	'zl-font-weight-semibold'?: string;
+    	'zl-footer-color'?: string;
+    	'zl-footer-font-size'?: string;
+    	'zl-form-item-background-color'?: string;
+    	'zl-form-item-border-radius'?: string;
+    	'zl-form-item-border'?: string;
+    	'zl-form-item-first-border-radius'?: string;
+    	'zl-form-item-focus-within-outline-blur'?: string;
+    	'zl-form-item-focus-within-outline-color'?: string;
+    	'zl-form-item-focus-within-outline-position'?: string;
+    	'zl-form-item-focus-within-outline-width'?: string;
+    	'zl-form-item-gap-x'?: string;
+    	'zl-form-item-gap-y'?: string;
+    	'zl-form-item-gap'?: string;
+    	'zl-form-item-last-border-radius'?: string;
+    	'zl-form-item-margin'?: string;
+    	'zl-form-item-padding-x'?: string;
+    	'zl-form-item-padding-y'?: string;
+    	'zl-form-label-margin'?: string;
+    	'zl-gap-2xl'?: string;
+    	'zl-gap-3xl'?: string;
+    	'zl-gap-4xl'?: string;
+    	'zl-gap-base'?: string;
+    	'zl-gap-form'?: string;
+    	'zl-gap-lg'?: string;
+    	'zl-gap-md'?: string;
+    	'zl-gap-sm'?: string;
+    	'zl-gap-xl'?: string;
+    	'zl-gap-xs'?: string;
+    	'zl-input-background-color'?: string;
+    	'zl-input-border-color'?: string;
+    	'zl-input-border-radius'?: string;
+    	'zl-input-border-style'?: string;
+    	'zl-input-border-width'?: string;
+    	'zl-input-color'?: string;
+    	'zl-input-focus-border-color'?: string;
+    	'zl-input-focus-error-border-color'?: string;
+    	'zl-input-font-size-mobile'?: string;
+    	'zl-input-font-size'?: string;
+    	'zl-input-padding-x-mobile'?: string;
+    	'zl-input-padding-x'?: string;
+    	'zl-input-padding-y-mobile'?: string;
+    	'zl-input-padding-y'?: string;
+    	'zl-input-placeholder-color'?: string;
+    	'zl-input-with-dropdown-background-color'?: string;
+    	'zl-input-with-dropdown-border-bottom-left-radius'?: string;
+    	'zl-input-with-dropdown-border-bottom-right-radius'?: string;
+    	'zl-input-with-dropdown-border-top-left-radius'?: string;
+    	'zl-input-with-dropdown-border-top-right-radius'?: string;
+    	'zl-keyfigures-font-size'?: string;
+    	'zl-keyfigures-gap-x'?: string;
+    	'zl-keyfigures-gap-y'?: string;
+    	'zl-keyfigures-key-color'?: string;
+    	'zl-keyfigures-key-font-weight'?: string;
+    	'zl-keyfigures-padding-x'?: string;
+    	'zl-keyfigures-padding-y'?: string;
+    	'zl-keyfigures-value-font-weight'?: string;
+    	'zl-label-color'?: string;
+    	'zl-label-font-size'?: string;
+    	'zl-label-font-weight'?: string;
+    	'zl-link-underline-offset'?: string;
+    	'zl-listbox-background-color'?: string;
+    	'zl-listbox-border-color'?: string;
+    	'zl-listbox-border-radius'?: string;
+    	'zl-listbox-border-style'?: string;
+    	'zl-listbox-border-width'?: string;
+    	'zl-listbox-max-width'?: string;
+    	'zl-listbox-padding'?: string;
+    	'zl-loader-color'?: string;
+    	'zl-loader-contrast-color'?: string;
+    	'zl-logo-margin'?: string;
+    	'zl-logo-max-width'?: string;
+    	'zl-overlay-backdrop-opacity'?: string;
+    	'zl-modal-background-color'?: string;
+    	'zl-modal-background-image'?: string;
+    	'zl-modal-close-offset'?: string;
+    	'zl-modal-margin'?: string;
+    	'zl-modal-max-height'?: string;
+    	'zl-modal-max-width'?: string;
+    	'zl-modal-padding'?: string;
+    	'zl-notification-border-color'?: string;
+    	'zl-notification-error-background-color'?: string;
+    	'zl-notification-error-border-color'?: string;
+    	'zl-notification-error-color'?: string;
+    	'zl-notification-font-size'?: string;
+    	'zl-notification-font-weight'?: string;
+    	'zl-notification-info-background-color'?: string;
+    	'zl-notification-info-color'?: string;
+    	'zl-notification-success-background-color'?: string;
+    	'zl-notification-success-border-color'?: string;
+    	'zl-notification-success-color'?: string;
+    	'zl-notification-warning-background-color'?: string;
+    	'zl-notification-warning-border-color'?: string;
+    	'zl-notification-warning-color'?: string;
+    	'zl-order-shortview-background-color'?: string;
+    	'zl-order-shortview-background-gradient-end'?: string;
+    	'zl-order-shortview-background-gradient-start'?: string;
+    	'zl-order-shortview-background-gradient-stop'?: string;
+    	'zl-order-shortview-background-image'?: string;
+    	'zl-order-shortview-border-radius'?: string;
+    	'zl-order-shortview-color-prio-one'?: string;
+    	'zl-order-shortview-color-prio-two'?: string;
+    	'zl-order-shortview-color'?: string;
+    	'zl-order-shortview-padding'?: string;
+    	'zl-order-shortview-position-isin-font-size'?: string;
+    	'zl-order-shortview-position-name-font-size'?: string;
+    	'zl-order-shortview-tile-background-color'?: string;
+    	'zl-order-shortview-tile-border-radius'?: string;
+    	'zl-order-shortview-tile-box-shadow'?: string;
+    	'zl-order-shortview-tile-description-font-size'?: string;
+    	'zl-order-shortview-tile-price-font-size'?: string;
+    	'zl-order-toggle-background-color'?: string;
+    	'zl-order-toggle-buy-background-color'?: string;
+    	'zl-order-toggle-buy-border-left-radius'?: string;
+    	'zl-order-toggle-buy-border-right-radius'?: string;
+    	'zl-order-toggle-buy-color'?: string;
+    	'zl-order-toggle-buy-selected-background-color'?: string;
+    	'zl-order-toggle-buy-selected-color'?: string;
+    	'zl-order-toggle-container-background-color'?: string;
+    	'zl-order-toggle-container-border-radius'?: string;
+    	'zl-order-toggle-container-padding-x'?: string;
+    	'zl-order-toggle-container-padding-y'?: string;
+    	'zl-order-toggle-padding-x'?: string;
+    	'zl-order-toggle-padding-y'?: string;
+    	'zl-order-toggle-selected-box-shadow'?: string;
+    	'zl-order-toggle-sell-background-color'?: string;
+    	'zl-order-toggle-sell-border-left-radius'?: string;
+    	'zl-order-toggle-sell-border-right-radius'?: string;
+    	'zl-order-toggle-sell-color'?: string;
+    	'zl-order-toggle-sell-selected-background-color'?: string;
+    	'zl-order-toggle-sell-selected-color'?: string;
+    	'zl-order-toggle-text-align'?: string;
+    	'zl-popup-background-color'?: string;
+    	'zl-popup-color'?: string;
+    	'zl-popup-font-weight'?: string;
+    	'zl-popup-title-color'?: string;
+    	'zl-popup-title-font-size'?: string;
+    	'zl-primary-background-color'?: string;
+    	'zl-select-background-color'?: string;
+    	'zl-select-border-color'?: string;
+    	'zl-select-border-radius'?: string;
+    	'zl-select-border-style'?: string;
+    	'zl-select-border-width'?: string;
+    	'zl-select-color'?: string;
+    	'zl-select-font-size-mobile'?: string;
+    	'zl-select-font-size'?: string;
+    	'zl-select-padding-x-mobile'?: string;
+    	'zl-select-padding-x'?: string;
+    	'zl-select-padding-y-mobile'?: string;
+    	'zl-select-padding-y'?: string;
+    	'zl-size-2xl'?: string;
+    	'zl-size-3xl'?: string;
+    	'zl-size-lg'?: string;
+    	'zl-size-md'?: string;
+    	'zl-size-sm'?: string;
+    	'zl-size-xl'?: string;
+    	'zl-size-xs'?: string;
+    	'zl-spacing-2xl'?: string;
+    	'zl-spacing-3xl'?: string;
+    	'zl-spacing-4xl'?: string;
+    	'zl-spacing-base'?: string;
+    	'zl-spacing-lg'?: string;
+    	'zl-spacing-md'?: string;
+    	'zl-spacing-sm'?: string;
+    	'zl-spacing-xl'?: string;
+    	'zl-spacing-xs'?: string;
+    	'zl-state-border-color'?: string;
+    	'zl-state-error-background-color'?: string;
+    	'zl-state-error-border-color'?: string;
+    	'zl-state-error-color'?: string;
+    	'zl-state-font-size'?: string;
+    	'zl-state-font-weight'?: string;
+    	'zl-state-info-background-color'?: string;
+    	'zl-state-info-color'?: string;
+    	'zl-state-success-background-color'?: string;
+    	'zl-state-success-border-color'?: string;
+    	'zl-state-success-color'?: string;
+    	'zl-state-warning-background-color'?: string;
+    	'zl-state-warning-border-color'?: string;
+    	'zl-state-warning-color'?: string;
+    	'zl-summary-border-color'?: string;
+    	'zl-summary-border-style'?: string;
+    	'zl-summary-border-width'?: string;
+    	'zl-summary-key-color'?: string;
+    	'zl-summary-key-font-weight'?: string;
+    	'zl-summary-key-value-gap'?: string;
+    	'zl-summary-padding-x'?: string;
+    	'zl-summary-padding-y'?: string;
+    	'zl-summary-row-gap'?: string;
+    	'zl-summary-title-color'?: string;
+    	'zl-summary-title-font-size'?: string;
+    	'zl-summary-title-font-weight'?: string;
+    	'zl-summary-value-alignment'?: string;
+    	'zl-summary-value-color'?: string;
+    	'zl-summary-value-font-weight'?: string;
+    	'zl-table-background-color'?: string;
+    	'zl-table-border'?: string;
+    	'zl-table-box-shadow'?: string;
+    	'zl-table-color'?: string;
+    	'zl-table-empty-icon-color'?: string;
+    	'zl-table-padding-x'?: string;
+    	'zl-table-padding-y'?: string;
+    	'zl-table-scroll-overflow-color-fade-base'?: string;
+    	'zl-table-scroll-overflow-color-solid-base'?: string;
+    	'zl-table-th-background-color'?: string;
+    	'zl-table-th-color'?: string;
+    	'zl-tabs-container-border-color'?: string;
+    	'zl-tabs-container-border-radius'?: string;
+    	'zl-tabs-container-border-style'?: string;
+    	'zl-tabs-container-border-width'?: string;
+    	'zl-tabs-container-padding'?: string;
+    	'zl-tabs-item-border-color'?: string;
+    	'zl-tabs-item-border-width'?: string;
+    	'zl-tabs-link-active-background-color'?: string;
+    	'zl-tabs-link-active-border-color'?: string;
+    	'zl-tabs-link-active-color'?: string;
+    	'zl-tabs-link-hover-color'?: string;
+    	'zl-tabs-link-padding-x'?: string;
+    	'zl-tabs-link-padding-y'?: string;
+    	'zl-tabs-list-border-color'?: string;
+    	'zl-tabs-list-border-width'?: string;
+    	'zl-tooltip-background-color'?: string;
+    	'zl-tooltip-border-color'?: string;
+    	'zl-tooltip-border-style'?: string;
+    	'zl-tooltip-border-width'?: string;
+    	'zl-tooltip-box-shadow'?: string;
+    	'zl-tooltip-color'?: string;
+    	'zl-tooltip-font-size'?: string;
+    	'zl-tooltip-max-width'?: string;
+    	'zl-tooltip-padding'?: string;
+    	'zl-tooltip-text-align'?: string;
+    	'zl-z-index-content'?: string;
+    	'zl-z-index-header'?: string;
+    	'zl-z-index-modal'?: string;
+    	'zl-z-index-popup'?: string;
+    	'zl-z-index'?: string;
+};
+
+declare type ToastOptions = {
+    	message: string;
+    	style: 'info' | 'error' | 'success';
+};
+
+export { }