import { jsx as _jsx } from "react/jsx-runtime";
import { memo } from 'react';
import { Box } from '../box';
import { useVuiContext, v } from '../core';
import { zIndices } from '../theme';
export const toasterWidth = 420;
const Toaster = () => {
    const { toasts } = useVuiContext();
    const padding = { md: '16px', sm: '4px', xs: '2px' };
    const right = { md: '1rem', sm: 0, xs: 0 };
    const width = { md: toasterWidth, sm: toasterWidth, xs: '100%' };
    const bottom = toasts?.list?.length ? '1rem' : '-2rem';
    return (_jsx(Box, { bottom: bottom, className: "vui-toaster", display: "block", maxW: width, minW: width, p: padding, position: "fixed", right: right, zIndex: zIndices.toast, children: toasts?.list?.map?.((toast) => (_jsx(v.div, { id: `toast_${toast.id}`, children: toast.component }, toast.id))) }));
};
export default memo(Toaster);
//# sourceMappingURL=toast.js.map