@via-profit/ui-kit 0.4.0 → 0.6.0

package/ThemeProvider/index.d.ts

@@ -3,13 +3,18 @@ import { useTheme } from '@emotion/react';
 import type Color from '../Color';
 export { useTheme };
 export * from './createTheme';
-export type UITheme = Required<Omit<UIThemeOverrides, 'isDark' | 'fontSize' | 'zIndex' | 'shape' | 'color' | 'spacing'>> & {
+export * from './tokens';
+export type UITheme = Required<Omit<UIThemeOverrides, 'isDark' | 'fontSize' | 'zIndex' | 'shape' | 'color' | 'spacing' | 'padding' | 'typography' | 'focusRing' | 'elevation'>> & {
+    readonly typography: UIThemeOverrideTypography;
+    readonly focusRing: UIThemeOverrideFocusRing;
+    readonly elevation: UIThemeOverrideElevation;
     readonly isDark: boolean;
     readonly fontSize: Record<keyof UIThemeOverrideFontSize, number>;
     readonly zIndex: Required<UIThemeOverrideZIndex>;
     readonly color: Record<keyof UIThemeOverrideColor, Color>;
     readonly shape: Required<UIThemeOverrideShape>;
     readonly spacing: Required<UIThemeOverrideSpacing>;
+    readonly padding: Record<ThemePadding, Required<UIThemeOverridePaddingValue>>;
 };
 export interface UIThemeOverrideColor {
     readonly backgroundPrimary?: string;
@@ -28,6 +33,49 @@ export interface UIThemeOverrideColor {
     readonly success?: string;
     readonly successContrast?: string;
 }
+/**
+ * The font of the theme. The components inherit the font of the page:
+ * apply `theme.typography.fontFamily` to the `body` of your application
+ */
+export interface UIThemeOverrideTypography {
+    readonly fontFamily?: string;
+}
+/**
+ * The outline of the focused element. Without these values every component draws its own focus
+ */
+export interface UIThemeOverrideFocusRing {
+    /**
+     * e.g. `2px`
+     */
+    readonly width?: string;
+    /**
+     * The gap between the element and the outline, e.g. `1px`
+     */
+    readonly offset?: string;
+    /**
+     * Any CSS color. Without it the outline has the color of the component
+     */
+    readonly color?: string;
+}
+/**
+ * The shadows by the level of the elements. Without a value the components of the level
+ * get the default shadow of the kit: all of them have the same shadow
+ */
+export interface UIThemeOverrideElevation {
+    /**
+     * The elements over the page: Menu, Calendar, Toast, Tooltip, the modal windows
+     */
+    readonly popup?: string;
+    /**
+     * The cards and the panels on the page: Surface, Accordion, Table
+     */
+    readonly surface?: string;
+    /**
+     * The raised parts of the controls: the knob of the Switch
+     */
+    readonly control?: string;
+}
+export type ThemeElevation = keyof UIThemeOverrideElevation;
 export interface UIThemeOverrideZIndex {
     readonly header?: number;
     readonly modal?: number;
@@ -47,6 +95,40 @@ export interface UIThemeOverrideSpacing {
     readonly xl?: string;
 }
 export type ThemeSpacing = keyof UIThemeOverrideSpacing;
+/**
+ * The inner padding of one class of the elements. Any CSS length, `em` is recommended:
+ * the padding grows together with the font size
+ */
+export interface UIThemeOverridePaddingValue {
+    /**
+     * The top and the bottom padding
+     */
+    readonly y?: string;
+    /**
+     * The left and the right padding
+     */
+    readonly x?: string;
+}
+/**
+ * The inner paddings of the components, by the class of the elements.
+ * Smaller paddings make a denser interface without changing the font size
+ */
+export interface UIThemeOverridePadding {
+    /**
+     * The controls: Button, TextField, TextArea, Selectbox, DatePicker, Autocomplete.
+     * `y` sets the height of the controls, all of them have the same height
+     */
+    readonly control?: UIThemeOverridePaddingValue;
+    /**
+     * The rows of the lists: the menu items, the table cells, the tabs, the accordion headers
+     */
+    readonly item?: UIThemeOverridePaddingValue;
+    /**
+     * The content of the panels: Surface, Accordion, the modal windows, Drawer, Toast
+     */
+    readonly container?: UIThemeOverridePaddingValue;
+}
+export type ThemePadding = keyof UIThemeOverridePadding;
 export interface UIThemeOverrideFontSize {
     readonly small?: number;
     readonly normal?: number;
@@ -59,9 +141,13 @@ export interface UIThemeOverrides {
      */
     readonly isDark?: boolean;
     readonly fontSize?: UIThemeOverrideFontSize;
+    readonly typography?: UIThemeOverrideTypography;
+    readonly focusRing?: UIThemeOverrideFocusRing;
+    readonly elevation?: UIThemeOverrideElevation;
     readonly zIndex?: UIThemeOverrideZIndex;
     readonly shape?: UIThemeOverrideShape;
     readonly spacing?: UIThemeOverrideSpacing;
+    readonly padding?: UIThemeOverridePadding;
     readonly color?: UIThemeOverrideColor;
 }
 declare const ThemeProvider: React.FC<ThemeProviderProps>;

package/ThemeProvider/index.js

@@ -22,6 +22,7 @@ const react_1 = __importDefault(require("react"));
 const react_2 = require("@emotion/react");
 Object.defineProperty(exports, "useTheme", { enumerable: true, get: function () { return react_2.useTheme; } });
 __exportStar(require("./createTheme"), exports);
+__exportStar(require("./tokens"), exports);
 const ThemeProvider = props => {
     const { children, theme } = props;
     return react_1.default.createElement(react_2.ThemeProvider, { theme: theme }, children);

package/ThemeProvider/tokens.d.ts

@@ -0,0 +1,66 @@
+import { Theme } from '@emotion/react';
+import type { ThemePadding, ThemeElevation } from './index';
+/**
+ * True if the theme sets the focus ring
+ */
+export declare const hasThemeFocusRing: (theme: Theme) => boolean;
+/**
+ * The focus ring of the theme for the `selector` of the focused element.
+ * Put it at the end of the styles: it replaces the own focus of the component.
+ * Without `focusRing` in the theme it returns nothing and the component keeps its own focus
+ */
+export declare const themeFocusRing: (theme: Theme, selector?: string) => import("@emotion/react").SerializedStyles | undefined;
+/**
+ * The default shadows of the levels: the components of one level have the same shadow.
+ * In `px`, not in `em`: the tooltip and the toast have a smaller font, but the same shadow as the menu
+ */
+export declare const defaultElevation: (theme: Theme) => Record<ThemeElevation, string>;
+/**
+ * The shadow of the level: the `elevation` of the theme or the default shadow of the level.
+ * `own` replaces the default shadow, the shadow of the theme wins over both
+ */
+export declare const elevation: (theme: Theme, level: ThemeElevation, own?: string) => string;
+/**
+ * The height of the text line in the controls, in the `em` of the control. Set as a length,
+ * the line height is inherited as is by the text of any size: the label of the button and the value of the field
+ */
+export declare const CONTROL_LINE_HEIGHT = "1.2em";
+/**
+ * The width of the borders of the components: `1px` at the font size of `16px`.
+ * In `em`: the border grows together with the font, and at the usual sizes the browser draws `1px`
+ */
+export declare const BORDER_WIDTH = "0.0625em";
+/**
+ * The border of the buttons. The standard and the plain buttons have no border:
+ * their padding is larger by this width, so all the variants have the same size
+ */
+export declare const CONTROL_BORDER = "0.0625em";
+/**
+ * The size of the text in the fields (TextField, TextArea, Selectbox) relative to the control
+ */
+export declare const FIELD_TEXT_SCALE = 0.9;
+/**
+ * The height of the one-line control: the icon buttons are squares of this size
+ */
+export declare const controlHeight: (theme: Theme) => string;
+/**
+ * The border of the field: the border of the buttons in the `em` of the field with the font size `fontScale`
+ */
+export declare const fieldBorder: (fontScale?: number) => string;
+/**
+ * The padding of the field with the `fieldBorder`, so the field has the height of the button.
+ * `fontScale` is the font size of the element relative to the control: the `em` of the padding are its own
+ */
+export declare const fieldPadding: (theme: Theme, fontScale?: number) => {
+    y: string;
+    x: string;
+};
+/**
+ * The padding of the class for the element with its own font size.
+ * `fontScale` is the font size of the element relative to the parent: the padding is in the `em` of the parent,
+ * so the header with a larger font has the same padding as the content under it
+ */
+export declare const themePadding: (theme: Theme, kind: ThemePadding, fontScale?: number) => {
+    y: string;
+    x: string;
+};

package/ThemeProvider/tokens.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.themePadding = exports.fieldPadding = exports.fieldBorder = exports.controlHeight = exports.FIELD_TEXT_SCALE = exports.CONTROL_BORDER = exports.BORDER_WIDTH = exports.CONTROL_LINE_HEIGHT = exports.elevation = exports.defaultElevation = exports.themeFocusRing = exports.hasThemeFocusRing = void 0;
+const react_1 = require("@emotion/react");
+/**
+ * True if the theme sets the focus ring
+ */
+const hasThemeFocusRing = (theme) => typeof theme.focusRing.width !== 'undefined' || typeof theme.focusRing.color !== 'undefined';
+exports.hasThemeFocusRing = hasThemeFocusRing;
+/**
+ * The focus ring of the theme for the `selector` of the focused element.
+ * Put it at the end of the styles: it replaces the own focus of the component.
+ * Without `focusRing` in the theme it returns nothing and the component keeps its own focus
+ */
+const themeFocusRing = (theme, selector = '&:focus-visible') => {
+    if (!(0, exports.hasThemeFocusRing)(theme)) {
+        return undefined;
+    }
+    const { width = '2px', offset = '1px', color = theme.color.accentPrimary.toString(), } = theme.focusRing;
+    return (0, react_1.css) `
+    ${selector} {
+      outline: ${width} solid ${color};
+      outline-offset: ${offset};
+    }
+  `;
+};
+exports.themeFocusRing = themeFocusRing;
+/**
+ * The default shadows of the levels: the components of one level have the same shadow.
+ * In `px`, not in `em`: the tooltip and the toast have a smaller font, but the same shadow as the menu
+ */
+const defaultElevation = (theme) => ({
+    popup: `0 8px 24px ${theme.color.surface.darken(50).alpha(0.6).toString()}`,
+    surface: `0 8px 32px -13px ${theme.color.surface.darken(100).alpha(0.4).toString()}`,
+    control: `0 1px 3px ${theme.color.surface.darken(100).alpha(0.35).toString()}`,
+});
+exports.defaultElevation = defaultElevation;
+/**
+ * The shadow of the level: the `elevation` of the theme or the default shadow of the level.
+ * `own` replaces the default shadow, the shadow of the theme wins over both
+ */
+const elevation = (theme, level, own) => { var _a, _b; return (_b = (_a = theme.elevation[level]) !== null && _a !== void 0 ? _a : own) !== null && _b !== void 0 ? _b : (0, exports.defaultElevation)(theme)[level]; };
+exports.elevation = elevation;
+/**
+ * The height of the text line in the controls, in the `em` of the control. Set as a length,
+ * the line height is inherited as is by the text of any size: the label of the button and the value of the field
+ */
+exports.CONTROL_LINE_HEIGHT = '1.2em';
+/**
+ * The width of the borders of the components: `1px` at the font size of `16px`.
+ * In `em`: the border grows together with the font, and at the usual sizes the browser draws `1px`
+ */
+exports.BORDER_WIDTH = '0.0625em';
+/**
+ * The border of the buttons. The standard and the plain buttons have no border:
+ * their padding is larger by this width, so all the variants have the same size
+ */
+exports.CONTROL_BORDER = exports.BORDER_WIDTH;
+/**
+ * The size of the text in the fields (TextField, TextArea, Selectbox) relative to the control
+ */
+exports.FIELD_TEXT_SCALE = 0.9;
+/**
+ * The height of the one-line control: the icon buttons are squares of this size
+ */
+const controlHeight = (theme) => `calc(${exports.CONTROL_LINE_HEIGHT} + 2 * ${theme.padding.control.y} + 2 * ${exports.CONTROL_BORDER})`;
+exports.controlHeight = controlHeight;
+/**
+ * The border of the field: the border of the buttons in the `em` of the field with the font size `fontScale`
+ */
+const fieldBorder = (fontScale = 1) => `calc(${exports.CONTROL_BORDER} / ${fontScale})`;
+exports.fieldBorder = fieldBorder;
+/**
+ * The padding of the field with the `fieldBorder`, so the field has the height of the button.
+ * `fontScale` is the font size of the element relative to the control: the `em` of the padding are its own
+ */
+const fieldPadding = (theme, fontScale = 1) => (0, exports.themePadding)(theme, 'control', fontScale);
+exports.fieldPadding = fieldPadding;
+/**
+ * The padding of the class for the element with its own font size.
+ * `fontScale` is the font size of the element relative to the parent: the padding is in the `em` of the parent,
+ * so the header with a larger font has the same padding as the content under it
+ */
+const themePadding = (theme, kind, fontScale = 1) => {
+    const { y, x } = theme.padding[kind];
+    return fontScale === 1
+        ? { y, x }
+        : { y: `calc(${y} / ${fontScale})`, x: `calc(${x} / ${fontScale})` };
+};
+exports.themePadding = themePadding;

package/Toast/ToastAction.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export type ToastActionProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
+declare const _default: React.ForwardRefExoticComponent<ToastActionProps & React.RefAttributes<HTMLButtonElement>>;
+export default _default;

package/Toast/ToastAction.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const tokens_1 = require("../ThemeProvider/tokens");
+const StyledButton = styled_1.default.button `
+  margin: 0;
+  padding: 0.35em 0.7em;
+  border: 0;
+  border-radius: ${({ theme }) => theme.shape.radiusFactor}em;
+  background-color: ${({ theme }) => theme.color.accentPrimary.alpha(0.1).toString()};
+  color: ${({ theme }) => theme.color.accentPrimary.toString()};
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 150ms ease-out;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.color.accentPrimary.alpha(0.18).toString()};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme }) => theme.color.accentPrimary.toString()};
+    outline-offset: 1px;
+  }
+  ${({ theme }) => (0, tokens_1.themeFocusRing)(theme)}
+`;
+const ToastAction = (props, ref) => react_1.default.createElement(StyledButton, Object.assign({ type: "button" }, props, { ref: ref }));
+exports.default = react_1.default.forwardRef(ToastAction);

package/Toast/ToastCard.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { ToastPosition, ToastType } from './store';
+export type ToastCardProps = React.HTMLAttributes<HTMLDivElement> & {
+    readonly type: ToastType;
+    readonly position: ToastPosition;
+    /**
+     * The toast plays the exit animation
+     */
+    readonly isClosing: boolean;
+};
+export declare const TOAST_ANIMATION_MS = 200;
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    readonly type: ToastType;
+    readonly position: ToastPosition;
+    /**
+     * The toast plays the exit animation
+     */
+    readonly isClosing: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/Toast/ToastCard.js

@@ -0,0 +1,89 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TOAST_ANIMATION_MS = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_2 = require("@emotion/react");
+const tokens_1 = require("../ThemeProvider/tokens");
+exports.TOAST_ANIMATION_MS = 200;
+/**
+ * The toasts slide from the edge of the screen they are attached to
+ */
+const getOffset = (position) => {
+    if (position.endsWith('right')) {
+        return 'translateX(110%)';
+    }
+    if (position.endsWith('left')) {
+        return 'translateX(-110%)';
+    }
+    return position.startsWith('top') ? 'translateY(-100%)' : 'translateY(100%)';
+};
+const StyledCard = styled_1.default.div `
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75em;
+  box-sizing: border-box;
+  width: max-content;
+  max-width: 100%;
+  min-width: 14em;
+  padding: ${({ theme }) => {
+    const { y, x } = (0, tokens_1.themePadding)(theme, 'container');
+    return `calc(${y} * 0.75) ${x}`;
+}};
+  border-radius: ${({ theme }) => theme.shape.radiusFactor * 1.5}em;
+  border: 1px solid ${({ theme }) => theme.color.textPrimary.alpha(0.08).toString()};
+  background-color: ${({ theme }) => theme.color.surface.toString()};
+  color: ${({ theme }) => theme.color.textPrimary.toString()};
+  box-shadow: ${({ theme }) => (0, tokens_1.elevation)(theme, 'popup')};
+  font-size: 0.875em;
+  line-height: 1.4;
+  pointer-events: auto;
+  overflow-wrap: anywhere;
+  ${({ $position, $isClosing }) => {
+    const hidden = (0, react_2.css) `
+      opacity: 0;
+      transform: ${getOffset($position)};
+    `;
+    const shown = (0, react_2.css) `
+      opacity: 1;
+      transform: none;
+    `;
+    const enter = (0, react_2.keyframes) `from { ${hidden.styles} } to { ${shown.styles} }`;
+    const exit = (0, react_2.keyframes) `from { ${shown.styles} } to { ${hidden.styles} }`;
+    return (0, react_2.css) `
+      animation: ${$isClosing ? exit : enter} ${exports.TOAST_ANIMATION_MS}ms cubic-bezier(0.2, 0, 0, 1)
+        forwards;
+    `;
+}}
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme }) => theme.color.accentPrimary.toString()};
+    outline-offset: 2px;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    animation-name: none;
+    opacity: ${({ $isClosing }) => ($isClosing ? 0 : 1)};
+  }
+  ${({ theme }) => (0, tokens_1.themeFocusRing)(theme)}
+`;
+const ToastCard = (props, ref) => {
+    const { children, type, position, isClosing } = props, nativeProps = __rest(props, ["children", "type", "position", "isClosing"]);
+    return (react_1.default.createElement(StyledCard, Object.assign({ "data-toast-type": type }, nativeProps, { "$position": position, "$isClosing": isClosing, ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(ToastCard);

package/Toast/ToastCloseButton.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export type ToastCloseButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
+declare const _default: React.ForwardRefExoticComponent<ToastCloseButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default _default;

package/Toast/ToastCloseButton.js

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const tokens_1 = require("../ThemeProvider/tokens");
+const StyledButton = styled_1.default.button `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1.75em;
+  height: 1.75em;
+  margin: -0.25em -0.5em -0.25em 0;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: none;
+  color: inherit;
+  opacity: 0.55;
+  cursor: pointer;
+  transition:
+    opacity 150ms ease-out,
+    background-color 150ms ease-out;
+
+  &:hover {
+    opacity: 1;
+    background-color: ${({ theme }) => theme.color.textPrimary.alpha(0.08).toString()};
+  }
+
+  &:focus-visible {
+    opacity: 1;
+    outline: 2px solid ${({ theme }) => theme.color.accentPrimary.toString()};
+    outline-offset: 0;
+  }
+
+  & svg {
+    width: 0.85em;
+    height: 0.85em;
+  }
+  ${({ theme }) => (0, tokens_1.themeFocusRing)(theme)}
+`;
+const ToastCloseButton = (props, ref) => (react_1.default.createElement(StyledButton, Object.assign({ type: "button" }, props, { ref: ref }),
+    react_1.default.createElement("svg", { viewBox: "0 0 24 24", "aria-hidden": true },
+        react_1.default.createElement("path", { d: "m5 5 14 14M19 5 5 19", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round" }))));
+exports.default = react_1.default.forwardRef(ToastCloseButton);

package/Toast/ToastContainer.d.ts

@@ -0,0 +1,88 @@
+import React from 'react';
+import { ToastCardProps } from './ToastCard';
+import { ToastIconProps } from './ToastIcon';
+import { ToastCloseButtonProps } from './ToastCloseButton';
+import { ToastActionProps } from './ToastAction';
+import { ToastPosition } from './store';
+export interface ToastContainerProps {
+    /**
+     * The container shows only the toasts with the same `containerId`.
+     * Needed only if there are several containers, e.g. with the different look
+     * Default: undefined
+     */
+    readonly containerId?: string;
+    /**
+     * Where the toasts appear if the toast has no own `position`
+     * Default: `top-right`
+     */
+    readonly position?: ToastPosition;
+    /**
+     * The time in ms before the toast closes, or `false` to keep the toasts until the user closes them
+     * Default: 5000
+     */
+    readonly autoClose?: number | false;
+    /**
+     * The maximum number of the toasts on the screen. The rest wait in the queue
+     * Default: undefined (no limit)
+     */
+    readonly limit?: number;
+    /**
+     * Default: true
+     */
+    readonly closeButton?: boolean;
+    /**
+     * The label of the close button for the screen readers
+     * Default: `Close`
+     */
+    readonly closeButtonLabel?: string;
+    /**
+     * Closes the toast on the click. The clicks on the buttons, links and fields inside the toast are not counted
+     * Default: true
+     */
+    readonly closeOnClick?: boolean;
+    /**
+     * Default: true
+     */
+    readonly pauseOnHover?: boolean;
+    /**
+     * Default: true
+     */
+    readonly pauseOnFocusLoss?: boolean;
+    /**
+     * The new toast appears above the previous ones
+     * Default: false
+     */
+    readonly newestOnTop?: boolean;
+    /**
+     * The key that moves the focus to the newest toast, e.g. to press its button without the mouse
+     * Default: `F8`
+     */
+    readonly hotkey?: string | null;
+    /**
+     * The label of the notifications area for the screen readers
+     * Default: `Notifications`
+     */
+    readonly label?: string;
+    /**
+     * Default: `theme.zIndex.modal + 2`, above the modal windows and the tooltips
+     */
+    readonly zIndex?: number;
+    readonly overrides?: ToastOverrides;
+}
+export interface ToastOverrides {
+    /**
+     * The card of the toast
+     */
+    readonly Toast?: React.ComponentType<ToastCardProps & React.RefAttributes<HTMLDivElement>>;
+    /**
+     * The icon of the type or the spinner
+     */
+    readonly Icon?: React.ComponentType<ToastIconProps & React.RefAttributes<HTMLSpanElement>>;
+    readonly CloseButton?: React.ComponentType<ToastCloseButtonProps & React.RefAttributes<HTMLButtonElement>>;
+    /**
+     * The button of `actions`
+     */
+    readonly Action?: React.ComponentType<ToastActionProps & React.RefAttributes<HTMLButtonElement>>;
+}
+declare const ToastContainer: React.FC<ToastContainerProps>;
+export default ToastContainer;