@via-profit/ui-kit 0.4.0 → 0.5.0

package/ThemeProvider/index.d.ts

@@ -1,9 +1,17 @@
 import React from 'react';
 import { useTheme } from '@emotion/react';
 import type Color from '../Color';
+import type { UIThemeComponents } from './components';
 export { useTheme };
 export * from './createTheme';
-export type UITheme = Required<Omit<UIThemeOverrides, 'isDark' | 'fontSize' | 'zIndex' | 'shape' | 'color' | 'spacing'>> & {
+export * from './components';
+export { default as useThemeProps } from './useThemeProps';
+export * from './tokens';
+export type UITheme = Required<Omit<UIThemeOverrides, 'isDark' | 'fontSize' | 'zIndex' | 'shape' | 'color' | 'spacing' | 'components' | 'typography' | 'focusRing' | 'elevation'>> & {
+    readonly typography: UIThemeOverrideTypography;
+    readonly focusRing: UIThemeOverrideFocusRing;
+    readonly elevation: UIThemeOverrideElevation;
+    readonly components: UIThemeComponents;
     readonly isDark: boolean;
     readonly fontSize: Record<keyof UIThemeOverrideFontSize, number>;
     readonly zIndex: Required<UIThemeOverrideZIndex>;
@@ -28,6 +36,43 @@ 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. Without these values every component has its own shadow
+ */
+export interface UIThemeOverrideElevation {
+    /**
+     * The elements over the page: the menus, the calendar of the date picker, the toasts
+     */
+    readonly popup?: string;
+    /**
+     * The cards and the panels on the page: Surface, Accordion, Table
+     */
+    readonly surface?: string;
+}
 export interface UIThemeOverrideZIndex {
     readonly header?: number;
     readonly modal?: number;
@@ -58,7 +103,15 @@ export interface UIThemeOverrides {
      * **Default:** `false`
      */
     readonly isDark?: boolean;
+    /**
+     * The look of the components: `defaultProps`, the `styles` added to the parts
+     * and the `overrides` that replace the parts. The props of the component instance win over the theme
+     */
+    readonly components?: UIThemeComponents;
     readonly fontSize?: UIThemeOverrideFontSize;
+    readonly typography?: UIThemeOverrideTypography;
+    readonly focusRing?: UIThemeOverrideFocusRing;
+    readonly elevation?: UIThemeOverrideElevation;
     readonly zIndex?: UIThemeOverrideZIndex;
     readonly shape?: UIThemeOverrideShape;
     readonly spacing?: UIThemeOverrideSpacing;

package/ThemeProvider/index.js

@@ -17,11 +17,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTheme = void 0;
+exports.useThemeProps = exports.useTheme = void 0;
 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("./components"), exports);
+var useThemeProps_1 = require("./useThemeProps");
+Object.defineProperty(exports, "useThemeProps", { enumerable: true, get: function () { return __importDefault(useThemeProps_1).default; } });
+__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,15 @@
+import { Theme } from '@emotion/react';
+/**
+ * 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/utils").SerializedStyles | undefined;
+/**
+ * The shadow of the level: the `elevation` of the theme, or the own shadow of the component
+ */
+export declare const elevation: (theme: Theme, level: 'popup' | 'surface', own: string) => string;

package/ThemeProvider/tokens.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.elevation = 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 shadow of the level: the `elevation` of the theme, or the own shadow of the component
+ */
+const elevation = (theme, level, own) => { var _a; return (_a = theme.elevation[level]) !== null && _a !== void 0 ? _a : own; };
+exports.elevation = elevation;

package/ThemeProvider/useThemeProps.d.ts

@@ -0,0 +1,7 @@
+import type { ThemeComponentName } from './components';
+/**
+ * Adds the `defaultProps` and the `overrides` of the theme to the props of the component.
+ * The props passed explicitly win over `defaultProps`, the `overrides` of the instance win over the theme ones
+ */
+declare const useThemeProps: <P extends object>(name: ThemeComponentName, props: P) => P;
+export default useThemeProps;

package/ThemeProvider/useThemeProps.js

@@ -0,0 +1,34 @@
+"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 react_2 = require("@emotion/react");
+/**
+ * Adds the `defaultProps` and the `overrides` of the theme to the props of the component.
+ * The props passed explicitly win over `defaultProps`, the `overrides` of the instance win over the theme ones
+ */
+const useThemeProps = (name, props) => {
+    var _a;
+    const theme = (0, react_2.useTheme)();
+    const config = (_a = theme.components) === null || _a === void 0 ? void 0 : _a[name];
+    const defaultProps = config === null || config === void 0 ? void 0 : config.defaultProps;
+    const themeOverrides = config === null || config === void 0 ? void 0 : config.overrides;
+    const { overrides } = props;
+    // A stable object: the components memoize the map of their parts by `overrides`
+    const mergedOverrides = react_1.default.useMemo(() => (themeOverrides ? Object.assign(Object.assign({}, themeOverrides), overrides) : overrides), [themeOverrides, overrides]);
+    if (!defaultProps && !themeOverrides) {
+        return props;
+    }
+    const merged = Object.assign(Object.assign({}, props), { overrides: mergedOverrides });
+    if (defaultProps) {
+        Object.entries(defaultProps).forEach(([key, value]) => {
+            if (typeof merged[key] === 'undefined') {
+                merged[key] = value;
+            }
+        });
+    }
+    return merged;
+};
+exports.default = useThemeProps;

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,86 @@
+"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: 0.75em 1em;
+  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', `0 0.5em 1.5em rgba(0, 0, 0, ${theme.isDark ? 0.5 : 0.14})`)};
+  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;

package/Toast/ToastContainer.js

@@ -0,0 +1,155 @@
+"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 react_dom_1 = __importDefault(require("react-dom"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_2 = require("@emotion/react");
+const ToastCard_1 = __importDefault(require("./ToastCard"));
+const ToastIcon_1 = __importDefault(require("./ToastIcon"));
+const ToastCloseButton_1 = __importDefault(require("./ToastCloseButton"));
+const ToastAction_1 = __importDefault(require("./ToastAction"));
+const ToastItem_1 = __importDefault(require("./ToastItem"));
+const store_1 = require("./store");
+const useThemeProps_1 = __importDefault(require("../ThemeProvider/useThemeProps"));
+const POSITIONS = [
+    'top-left',
+    'top-center',
+    'top-right',
+    'bottom-left',
+    'bottom-center',
+    'bottom-right',
+];
+const Stack = styled_1.default.div `
+  position: fixed;
+  z-index: ${({ $zIndex }) => $zIndex};
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+  box-sizing: border-box;
+  max-width: min(26em, calc(100vw - 2em));
+  pointer-events: none;
+  ${({ $position }) => {
+    const [vertical, horizontal] = $position.split('-');
+    return (0, react_2.css) `
+      ${vertical}: 1em;
+      align-items: ${horizontal === 'left'
+        ? 'flex-start'
+        : horizontal === 'right'
+            ? 'flex-end'
+            : 'center'};
+      ${horizontal === 'center'
+        ? (0, react_2.css) `
+            left: 50%;
+            transform: translateX(-50%);
+          `
+        : (0, react_2.css) `
+            ${horizontal}: 1em;
+          `}
+
+      /* The narrow screen: the toasts take the whole width */
+      @media (max-width: 480px) {
+        left: 0.5em;
+        right: 0.5em;
+        ${vertical}: 0.5em;
+        max-width: none;
+        transform: none;
+        align-items: stretch;
+        & > * {
+          width: auto;
+        }
+      }
+    `;
+}}
+`;
+const getPortal = () => {
+    const id = 'ui-kit-toasts';
+    const existing = document.getElementById(id);
+    if (existing) {
+        return existing;
+    }
+    const node = document.createElement('div');
+    node.id = id;
+    document.body.appendChild(node);
+    return node;
+};
+const useWindowFocused = () => {
+    const [isFocused, setIsFocused] = react_1.default.useState(true);
+    react_1.default.useEffect(() => {
+        const update = () => setIsFocused(document.hasFocus());
+        update();
+        window.addEventListener('focus', update);
+        window.addEventListener('blur', update);
+        return () => {
+            window.removeEventListener('focus', update);
+            window.removeEventListener('blur', update);
+        };
+    }, []);
+    return isFocused;
+};
+const ToastContainer = props => {
+    const { containerId, position = 'top-right', autoClose = 5000, limit, closeButton = true, closeButtonLabel = 'Close', closeOnClick = true, pauseOnHover = true, pauseOnFocusLoss = true, newestOnTop = false, hotkey = 'F8', label = 'Notifications', zIndex, overrides, } = (0, useThemeProps_1.default)('Toast', props);
+    const theme = (0, react_2.useTheme)();
+    const allToasts = react_1.default.useSyncExternalStore(store_1.toastStore.subscribe, store_1.toastStore.getSnapshot, store_1.toastStore.getServerSnapshot);
+    const toasts = react_1.default.useMemo(() => allToasts.filter(item => item.containerId === containerId), [allToasts, containerId]);
+    const isWindowFocused = useWindowFocused();
+    const [portal, setPortal] = react_1.default.useState(null);
+    const regionRef = react_1.default.useRef(null);
+    react_1.default.useEffect(() => {
+        setPortal(getPortal());
+    }, []);
+    const components = react_1.default.useMemo(() => ({
+        Toast: (overrides === null || overrides === void 0 ? void 0 : overrides.Toast) || ToastCard_1.default,
+        Icon: (overrides === null || overrides === void 0 ? void 0 : overrides.Icon) || ToastIcon_1.default,
+        CloseButton: (overrides === null || overrides === void 0 ? void 0 : overrides.CloseButton) || ToastCloseButton_1.default,
+        Action: (overrides === null || overrides === void 0 ? void 0 : overrides.Action) || ToastAction_1.default,
+    }), [overrides]);
+    const defaults = react_1.default.useMemo(() => ({
+        autoClose,
+        closeButton,
+        closeOnClick,
+        pauseOnHover,
+        pauseOnFocusLoss,
+        closeButtonLabel,
+    }), [autoClose, closeButton, closeOnClick, pauseOnHover, pauseOnFocusLoss, closeButtonLabel]);
+    // The toasts over the limit wait: they appear when the shown ones close
+    const visible = typeof limit === 'number' ? toasts.slice(0, Math.max(limit, 0)) : toasts;
+    // A waiting toast closed before it was shown has no exit animation: it is removed at once
+    react_1.default.useEffect(() => {
+        toasts
+            .filter(item => item.isClosing && !visible.includes(item))
+            .forEach(item => store_1.toastStore.remove(item.toastId));
+    }, [toasts, visible]);
+    react_1.default.useEffect(() => {
+        if (!hotkey) {
+            return undefined;
+        }
+        const handleKeyDown = (event) => {
+            var _a;
+            if (event.key === hotkey) {
+                const cards = (_a = regionRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[role="status"], [role="alert"]');
+                const newest = cards === null || cards === void 0 ? void 0 : cards[cards.length - 1];
+                if (newest) {
+                    event.preventDefault();
+                    newest.focus();
+                }
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [hotkey]);
+    if (!portal) {
+        return null;
+    }
+    const byPosition = POSITIONS.map(stackPosition => {
+        const items = visible.filter(item => { var _a; return ((_a = item.position) !== null && _a !== void 0 ? _a : position) === stackPosition; });
+        return { stackPosition, items: newestOnTop ? [...items].reverse() : items };
+    }).filter(({ items }) => items.length > 0);
+    // The region is always in the DOM: the screen readers announce what is added to a live region they already know
+    return react_dom_1.default.createPortal(react_1.default.createElement("div", { role: "region", "aria-label": hotkey ? `${label} (${hotkey})` : label, "aria-live": "polite", ref: regionRef }, byPosition.map(({ stackPosition, items }) => (react_1.default.createElement(Stack, { key: stackPosition, "$position": stackPosition, "$zIndex": zIndex !== null && zIndex !== void 0 ? zIndex : theme.zIndex.modal + 2 }, items.map(item => (react_1.default.createElement(ToastItem_1.default, { key: item.toastId, toast: item, position: stackPosition, defaults: defaults, components: components, isWindowFocused: isWindowFocused }))))))), portal);
+};
+exports.default = ToastContainer;

package/Toast/ToastIcon.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { ToastType } from './store';
+export type ToastIconProps = React.HTMLAttributes<HTMLSpanElement> & {
+    readonly type: ToastType;
+    readonly isLoading: boolean;
+};
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
+    readonly type: ToastType;
+    readonly isLoading: boolean;
+} & React.RefAttributes<HTMLSpanElement>>;
+export default _default;