@heymantle/litho 0.0.13 → 0.0.15

package/dist/esm/components/ToastNotification.js

@@ -0,0 +1,353 @@
+"use client";
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState, useRef, useCallback } from "react";
+import { tv } from "tailwind-variants";
+import Text from "./Text.js";
+import Icon from "./Icon.js";
+import { CancelMinor } from "@shopify/polaris-icons";
+var styles = tv({
+    base: "Litho-ToastNotification group/toast pointer-events-auto min-w-60 max-w-85 bg-surface-highest/95 hover:bg-surface-highest rounded-md shadow-card border border-tint-2 p-2 flex items-start gap-2 transition-all duration-300 ease-in-out",
+    variants: {
+        position: {
+            topRight: "",
+            topLeft: "",
+            topCenter: "",
+            bottomRight: "",
+            bottomLeft: "",
+            bottomCenter: ""
+        },
+        fixed: {
+            true: "fixed z-[9999]",
+            false: "relative"
+        },
+        visible: {
+            true: "opacity-100 translate-y-0",
+            false: "opacity-0"
+        },
+        clickable: {
+            true: "cursor-pointer",
+            false: ""
+        }
+    },
+    defaultVariants: {
+        position: "topRight",
+        visible: true,
+        fixed: true,
+        clickable: false
+    },
+    compoundVariants: [
+        {
+            position: "topRight",
+            fixed: true,
+            class: "top-4 right-4"
+        },
+        {
+            position: "topLeft",
+            fixed: true,
+            class: "top-4 left-4"
+        },
+        {
+            position: "topCenter",
+            fixed: true,
+            class: "top-4 left-1/2 -translate-x-1/2"
+        },
+        {
+            position: "bottomRight",
+            fixed: true,
+            class: "bottom-4 right-4"
+        },
+        {
+            position: "bottomLeft",
+            fixed: true,
+            class: "bottom-4 left-4"
+        },
+        {
+            position: "bottomCenter",
+            fixed: true,
+            class: "bottom-4 left-1/2 -translate-x-1/2"
+        },
+        {
+            position: "topRight",
+            visible: false,
+            class: "translate-x-full"
+        },
+        {
+            position: "topLeft",
+            visible: false,
+            class: "-translate-x-full"
+        },
+        {
+            position: "topCenter",
+            visible: false,
+            class: "-translate-y-4"
+        },
+        {
+            position: "bottomRight",
+            visible: false,
+            class: "translate-x-full"
+        },
+        {
+            position: "bottomLeft",
+            visible: false,
+            class: "-translate-x-full"
+        },
+        {
+            position: "bottomCenter",
+            visible: false,
+            class: "translate-y-4"
+        }
+    ]
+});
+var closeButtonStyles = tv({
+    base: "Litho-ToastNotification__Close flex-none p-0.5 rounded-md cursor-pointer hover:bg-tint-2 active:bg-tint-3 transition-colors opacity-0 group-hover/toast:opacity-100"
+});
+/**
+ * ToastNotification component for displaying temporary notifications to users.
+ * Automatically dismisses after the specified duration.
+ *
+ * @component
+ * @param {Object} props - The component props.
+ * @param {React.ReactNode} [props.prefix] - Optional prefix content (image, icon, or component) to display before the title.
+ * @param {Object|Function} [props.icon] - Optional icon source (from @shopify/polaris-icons) to display as prefix. Used as fallback if prefix is not provided.
+ * @param {string} props.title - The main title text of the toast.
+ * @param {string} [props.subtitle] - Optional subtitle text displayed below the title.
+ * @param {number} [props.duration=3000] - Duration in milliseconds before the toast auto-dismisses. Defaults to 2000ms (2 seconds).
+ * @param {'topRight' | 'topLeft' | 'topCenter' | 'bottomRight' | 'bottomLeft' | 'bottomCenter'} [props.position='topRight'] - Position of the toast on the screen.
+ * @param {Function} [props.onDismiss] - Callback function called when the toast is dismissed (either automatically or manually).
+ * @param {Function} [props.onClick] - Callback function called when the toast is clicked. Makes the entire toast clickable with cursor-pointer.
+ * @param {boolean} [props.dismissible=true] - Whether the toast can be manually dismissed via the close button.
+ * @param {boolean} [props.fixed=true] - Whether to use fixed positioning. Set to false when used within ToastProvider.
+ * @param {boolean} [props.isDismissing=false] - Whether the toast is in a dismissing state. Starts the exit animation immediately.
+ * @param {string} [props.className] - Additional CSS classes to apply to the toast container.
+ * @returns {JSX.Element|null} The rendered toast notification or null if dismissed.
+ *
+ * @example
+ * <ToastNotification
+ *   prefix={<Icon source={TickMinor} color="success" />}
+ *   title="Support ticket updated"
+ *   subtitle="Your ticket has been resolved"
+ *   duration={3000}
+ *   position="topRight"
+ *   onDismiss={() => console.log('Toast dismissed')}
+ * />
+ */ function ToastNotification() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var prefix = props.prefix, icon = props.icon, title = props.title, subtitle = props.subtitle, _props_duration = props.duration, duration = _props_duration === void 0 ? 3000 : _props_duration, _props_position = props.position, position = _props_position === void 0 ? "topRight" : _props_position, onDismiss = props.onDismiss, onClick = props.onClick, _props_dismissible = props.dismissible, dismissible = _props_dismissible === void 0 ? true : _props_dismissible, _props_fixed = props.fixed, fixed = _props_fixed === void 0 ? true : _props_fixed, _props_isDismissing = props.isDismissing, isDismissing = _props_isDismissing === void 0 ? false : _props_isDismissing, className = props.className;
+    var _useState = _sliced_to_array(useState(!isDismissing), 2), visible = _useState[0], setVisible = _useState[1];
+    var _useState1 = _sliced_to_array(useState(true), 2), shouldRender = _useState1[0], setShouldRender = _useState1[1];
+    var _useState2 = _sliced_to_array(useState(false), 2), isHovered = _useState2[0], setIsHovered = _useState2[1];
+    var timerRef = useRef(null);
+    var startTimeRef = useRef(null);
+    var remainingTimeRef = useRef(duration);
+    var dismissStartedRef = useRef(false);
+    // If isDismissing is true, start exit animation immediately
+    useEffect(function() {
+        if (isDismissing) {
+            setVisible(false);
+            dismissStartedRef.current = true;
+            setTimeout(function() {
+                setShouldRender(false);
+            }, 300);
+        }
+    }, [
+        isDismissing
+    ]);
+    var handleDismiss = useCallback(function() {
+        if (dismissStartedRef.current) {
+            return; // Already dismissing
+        }
+        dismissStartedRef.current = true;
+        setVisible(false);
+        // Wait for exit animation to complete before removing from DOM
+        setTimeout(function() {
+            setShouldRender(false);
+            if (onDismiss) {
+                onDismiss();
+            }
+        }, 300); // Match transition duration
+    }, [
+        onDismiss
+    ]);
+    // Initialize remaining time when duration changes
+    useEffect(function() {
+        if (duration > 0) {
+            remainingTimeRef.current = duration;
+        }
+    }, [
+        duration
+    ]);
+    // Set up auto-dismiss timer
+    useEffect(function() {
+        // Don't start timer if already dismissing, duration is 0, or hovered
+        if (isDismissing || duration <= 0 || isHovered || dismissStartedRef.current) {
+            return;
+        }
+        // Clear any existing timer
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+            timerRef.current = null;
+        }
+        // Start timer with remaining time
+        startTimeRef.current = Date.now();
+        timerRef.current = setTimeout(function() {
+            handleDismiss();
+        }, remainingTimeRef.current);
+        return function() {
+            if (timerRef.current) {
+                clearTimeout(timerRef.current);
+                timerRef.current = null;
+            }
+        };
+    }, [
+        duration,
+        isDismissing,
+        isHovered,
+        handleDismiss
+    ]);
+    // Handle hover state changes
+    useEffect(function() {
+        if (isHovered && timerRef.current && startTimeRef.current && !dismissStartedRef.current) {
+            // Pause: calculate remaining time and clear timer
+            var elapsed = Date.now() - startTimeRef.current;
+            remainingTimeRef.current = Math.max(0, remainingTimeRef.current - elapsed);
+            clearTimeout(timerRef.current);
+            timerRef.current = null;
+        } else if (!isHovered && !isDismissing && duration > 0 && remainingTimeRef.current > 0 && visible && !dismissStartedRef.current) {
+            // Resume: restart timer with remaining time
+            if (timerRef.current) {
+                clearTimeout(timerRef.current);
+            }
+            startTimeRef.current = Date.now();
+            timerRef.current = setTimeout(function() {
+                handleDismiss();
+            }, remainingTimeRef.current);
+        }
+    }, [
+        isHovered,
+        isDismissing,
+        duration,
+        visible,
+        handleDismiss
+    ]);
+    var handleMouseEnter = function() {
+        if (!isDismissing && visible && !dismissStartedRef.current) {
+            setIsHovered(true);
+        }
+    };
+    var handleMouseLeave = function() {
+        if (!isDismissing && visible && !dismissStartedRef.current) {
+            setIsHovered(false);
+        }
+    };
+    if (!shouldRender) {
+        return null;
+    }
+    var classes = styles({
+        position: position,
+        visible: visible,
+        fixed: fixed,
+        clickable: !!onClick
+    });
+    var closeClasses = closeButtonStyles();
+    var handleToastClick = function(e) {
+        if (onClick) {
+            onClick(e);
+        }
+    };
+    var handleCloseClick = function(e) {
+        e.stopPropagation(); // Prevent triggering toast onClick
+        handleDismiss();
+    };
+    // Determine what to render as prefix: use prefix if provided, otherwise fallback to icon
+    var prefixContent = prefix || (icon ? /*#__PURE__*/ _jsx(Icon, {
+        source: icon,
+        color: "subdued"
+    }) : null);
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "".concat(classes).concat(className ? " ".concat(className) : ""),
+        onClick: handleToastClick,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        children: [
+            prefixContent && /*#__PURE__*/ _jsx("div", {
+                className: "Litho-ToastNotification__Prefix flex-none",
+                children: prefixContent
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "Litho-ToastNotification__Content flex-1 flex flex-col gap-0.5 min-w-0",
+                children: [
+                    /*#__PURE__*/ _jsx(Text, {
+                        fontWeight: "medium",
+                        variant: "bodySm",
+                        clampLines: 1,
+                        children: title
+                    }),
+                    subtitle && /*#__PURE__*/ _jsx(Text, {
+                        variant: "bodySm",
+                        color: "subdued",
+                        clampLines: 2,
+                        children: subtitle
+                    })
+                ]
+            }),
+            dismissible && /*#__PURE__*/ _jsx("button", {
+                type: "button",
+                onClick: handleCloseClick,
+                className: closeClasses,
+                "aria-label": "Dismiss notification",
+                children: /*#__PURE__*/ _jsx(Icon, {
+                    source: CancelMinor,
+                    size: "sm",
+                    color: "subdued"
+                })
+            })
+        ]
+    });
+}
+export default ToastNotification;

package/dist/esm/components/ToastProvider.js

@@ -0,0 +1,336 @@
+"use client";
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _array_without_holes(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array(arr);
+}
+function _iterable_to_array(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _non_iterable_spread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _to_consumable_array(arr) {
+    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, useContext, useState, useCallback, useEffect } from "react";
+import { flushSync } from "react-dom";
+import { createPortal } from "react-dom";
+import ToastNotification from "./ToastNotification.js";
+import { useFrame } from "./Frame.js";
+import Stack from "./Stack.js";
+var ToastContext = /*#__PURE__*/ createContext(null);
+/**
+ * Hook to access the toast notification system.
+ * Must be used within a ToastProvider.
+ *
+ * @returns {Object} Toast methods
+ * @returns {Function} returns.show - Show a toast notification
+ * @returns {Function} returns.dismiss - Dismiss a specific toast by ID
+ * @returns {Function} returns.dismissAll - Dismiss all toasts
+ *
+ * @example
+ * const toast = useToast();
+ * toast.show({
+ *   title: "Success!",
+ *   subtitle: "Your changes have been saved",
+ *   prefix: <Icon source={TickMinor} color="success" />
+ * });
+ */ export var useToast = function() {
+    var context = useContext(ToastContext);
+    if (!context) {
+        // Return a no-op function if used outside provider
+        return {
+            show: function() {
+                console.warn("useToast must be used within a ToastProvider");
+            },
+            dismiss: function() {},
+            dismissAll: function() {}
+        };
+    }
+    return context;
+};
+/**
+ * ToastProvider component that manages multiple toast notifications.
+ * Handles stacking and positioning of multiple toasts.
+ *
+ * @component
+ * @param {Object} props - The component props.
+ * @param {React.ReactNode} props.children - Child components that can use the toast system.
+ * @param {'topRight' | 'topLeft' | 'topCenter' | 'bottomRight' | 'bottomLeft' | 'bottomCenter'} [props.defaultPosition='topRight'] - Default position for toasts.
+ * @param {number} [props.maxToasts=5] - Maximum number of toasts to display at once.
+ * @param {number} [props.stackGap=2] - Gap in pixels between stacked toasts.
+ * @returns {JSX.Element} The provider component.
+ */ function ToastProvider(param) {
+    var children = param.children, _param_defaultPosition = param.defaultPosition, defaultPosition = _param_defaultPosition === void 0 ? "topRight" : _param_defaultPosition, _param_maxToasts = param.maxToasts, maxToasts = _param_maxToasts === void 0 ? 5 : _param_maxToasts, _param_stackGap = param.stackGap, stackGap = _param_stackGap === void 0 ? 2 : _param_stackGap;
+    var _useState = _sliced_to_array(useState([]), 2), toasts = _useState[0], setToasts = _useState[1];
+    var _useState1 = _sliced_to_array(useState([]), 2), dismissingToasts = _useState1[0], setDismissingToasts = _useState1[1];
+    var _useState2 = _sliced_to_array(useState(null), 2), container = _useState2[0], setContainer = _useState2[1];
+    var paneIsOpen = useFrame().paneIsOpen;
+    // Create portal container on mount
+    useEffect(function() {
+        if (typeof window !== "undefined") {
+            var div = document.createElement("div");
+            div.className = "Litho-ToastProvider";
+            div.setAttribute("data-toast-container", "true");
+            document.body.appendChild(div);
+            setContainer(div);
+            return function() {
+                if (document.body.contains(div)) {
+                    document.body.removeChild(div);
+                }
+            };
+        }
+    }, []);
+    var show = useCallback(function() {
+        var options = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+        var prefix = options.prefix, icon = options.icon, title = options.title, subtitle = options.subtitle, _options_duration = options.duration, duration = _options_duration === void 0 ? 2000 : _options_duration, _options_position = options.position, position = _options_position === void 0 ? defaultPosition : _options_position, _options_dismissible = options.dismissible, dismissible = _options_dismissible === void 0 ? true : _options_dismissible, onDismiss = options.onDismiss, onClick = options.onClick, id = options.id;
+        if (!title) {
+            console.warn("Toast requires a title");
+            return null;
+        }
+        var toastId = id || "toast-".concat(Date.now(), "-").concat(Math.random().toString(36).substr(2, 9));
+        setToasts(function(prev) {
+            // Limit number of toasts
+            var newToasts = _to_consumable_array(prev).concat([
+                {
+                    id: toastId,
+                    prefix: prefix,
+                    icon: icon,
+                    title: title,
+                    subtitle: subtitle,
+                    duration: duration,
+                    position: position,
+                    dismissible: dismissible,
+                    onDismiss: onDismiss,
+                    onClick: onClick
+                }
+            ]);
+            return newToasts.slice(-maxToasts);
+        });
+        return toastId;
+    }, [
+        defaultPosition,
+        maxToasts
+    ]);
+    var dismiss = useCallback(function(id) {
+        // Move toast to dismissing state for exit animation, remove from active toasts immediately
+        flushSync(function() {
+            setToasts(function(prev) {
+                var toast = prev.find(function(t) {
+                    return t.id === id;
+                });
+                if (toast) {
+                    // Add to dismissing toasts for exit animation
+                    setDismissingToasts(function(prevDismissing) {
+                        // Avoid duplicates
+                        if (prevDismissing.find(function(t) {
+                            return t.id === id;
+                        })) {
+                            return prevDismissing;
+                        }
+                        return _to_consumable_array(prevDismissing).concat([
+                            toast
+                        ]);
+                    });
+                    // Remove from active toasts immediately so others slide up
+                    return prev.filter(function(t) {
+                        return t.id !== id;
+                    });
+                }
+                return prev;
+            });
+        });
+        // Clean up dismissing toast after animation completes
+        setTimeout(function() {
+            setDismissingToasts(function(prev) {
+                return prev.filter(function(t) {
+                    return t.id !== id;
+                });
+            });
+        }, 300); // Match transition duration
+    }, []);
+    var dismissAll = useCallback(function() {
+        setToasts([]);
+    }, []);
+    var handleToastDismiss = useCallback(function(id, onDismiss) {
+        // Remove from state immediately so other toasts can slide up
+        dismiss(id);
+        // Call onDismiss callback after a brief delay to allow exit animation to start
+        if (onDismiss) {
+            setTimeout(function() {
+                onDismiss();
+            }, 0);
+        }
+    }, [
+        dismiss
+    ]);
+    // Group toasts by position
+    var toastsByPosition = toasts.reduce(function(acc, toast) {
+        var position = toast.position || defaultPosition;
+        if (!acc[position]) {
+            acc[position] = [];
+        }
+        acc[position].push(toast);
+        return acc;
+    }, {});
+    if (!container) {
+        return /*#__PURE__*/ _jsx(_Fragment, {
+            children: children
+        });
+    }
+    return /*#__PURE__*/ _jsxs(ToastContext.Provider, {
+        value: {
+            show: show,
+            dismiss: dismiss,
+            dismissAll: dismissAll
+        },
+        children: [
+            children,
+            /*#__PURE__*/ createPortal(/*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    dismissingToasts.map(function(toast) {
+                        var position = toast.position || defaultPosition;
+                        var isTop = position.startsWith("top");
+                        var isBottom = position.startsWith("bottom");
+                        var dismissingStyle = {
+                            position: "fixed",
+                            zIndex: 9998
+                        };
+                        if (isTop) {
+                            dismissingStyle.top = "calc(12px + var(--litho-header-height))";
+                        } else if (isBottom) {
+                            dismissingStyle.bottom = "12px";
+                        }
+                        if (position.includes("Right")) {
+                            if (paneIsOpen) {
+                                dismissingStyle.right = "calc(12px + var(--litho-pane-width))";
+                            } else {
+                                dismissingStyle.right = "12px";
+                            }
+                        } else if (position.includes("Left")) {
+                            dismissingStyle.left = "12px";
+                        } else if (position.includes("Center")) {
+                            dismissingStyle.left = "50%";
+                            dismissingStyle.transform = "translateX(-50%)";
+                        }
+                        return /*#__PURE__*/ _jsx("div", {
+                            style: dismissingStyle,
+                            className: "Litho-ToastProvider__DismissingToast",
+                            children: /*#__PURE__*/ _jsx(ToastNotification, {
+                                prefix: toast.prefix,
+                                icon: toast.icon,
+                                title: toast.title,
+                                subtitle: toast.subtitle,
+                                duration: 0,
+                                position: toast.position || defaultPosition,
+                                dismissible: false,
+                                fixed: false,
+                                isDismissing: true,
+                                onClick: toast.onClick,
+                                onDismiss: function() {}
+                            })
+                        }, "dismissing-".concat(toast.id));
+                    }),
+                    Object.entries(toastsByPosition).map(function(param) {
+                        var _param = _sliced_to_array(param, 2), position = _param[0], positionToasts = _param[1];
+                        var isTop = position.startsWith("top");
+                        var isBottom = position.startsWith("bottom");
+                        var isCenter = position.includes("Center");
+                        var containerStyle = {
+                            position: "fixed",
+                            zIndex: 9999
+                        };
+                        if (isTop) {
+                            containerStyle.top = "calc(12px + var(--litho-header-height))"; // top-4
+                        } else if (isBottom) {
+                            containerStyle.bottom = "12px"; // bottom-4
+                        }
+                        if (position.includes("Right")) {
+                            // Adjust right position when pane is open to avoid covering the pane
+                            if (paneIsOpen) {
+                                containerStyle.right = "calc(12px + var(--litho-pane-width))";
+                            } else {
+                                containerStyle.right = "12px";
+                            }
+                        } else if (position.includes("Left")) {
+                            containerStyle.left = "12px";
+                        } else if (position.includes("Center")) {
+                            containerStyle.left = "50%";
+                            containerStyle.transform = "translateX(-50%)";
+                        }
+                        return /*#__PURE__*/ _jsx("div", {
+                            style: containerStyle,
+                            className: "Litho-ToastProvider__Container",
+                            children: /*#__PURE__*/ _jsx(Stack, {
+                                gap: stackGap,
+                                children: positionToasts.map(function(toast, index) {
+                                    return /*#__PURE__*/ _jsx(ToastNotification, {
+                                        prefix: toast.prefix,
+                                        icon: toast.icon,
+                                        title: toast.title,
+                                        subtitle: toast.subtitle,
+                                        duration: toast.duration,
+                                        position: toast.position || defaultPosition,
+                                        dismissible: toast.dismissible,
+                                        fixed: false,
+                                        onClick: toast.onClick,
+                                        onDismiss: function() {
+                                            return handleToastDismiss(toast.id, toast.onDismiss);
+                                        }
+                                    }, toast.id);
+                                })
+                            })
+                        }, position);
+                    })
+                ]
+            }), container)
+        ]
+    });
+}
+export default ToastProvider;