@vinyasa/feedback 1.0.21 → 1.0.23

package/dist/cjs/index.cjs

@@ -38,15 +38,35 @@ var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
     Alert: ()=>alert_Alert,
+    AlertBody: ()=>AlertBody,
+    AlertDescription: ()=>AlertDescription,
+    AlertIcon: ()=>AlertIcon,
+    AlertTitle: ()=>AlertTitle,
     Banner: ()=>banner_Banner,
+    BannerIcon: ()=>BannerIcon,
     CircularProgress: ()=>circular_progress_CircularProgress,
+    CircularProgressIndicator: ()=>CircularProgressIndicator,
     EmptyState: ()=>empty_state_EmptyState,
+    EmptyStateAction: ()=>EmptyStateAction,
+    EmptyStateDescription: ()=>EmptyStateDescription,
+    EmptyStateIcon: ()=>EmptyStateIcon,
+    EmptyStateTitle: ()=>EmptyStateTitle,
     ErrorBoundary: ()=>error_boundary_ErrorBoundary,
+    ErrorBoundaryContent: ()=>ErrorBoundaryContent,
+    ErrorBoundaryFallback: ()=>ErrorBoundaryFallback,
     InlineMessage: ()=>inline_message_InlineMessage,
+    InlineMessageIcon: ()=>InlineMessageIcon,
     LoadingOverlay: ()=>loading_overlay_LoadingOverlay,
+    LoadingOverlayBackdrop: ()=>LoadingOverlayBackdrop,
+    LoadingOverlayContent: ()=>LoadingOverlayContent,
     ProgressBar: ()=>progress_bar_ProgressBar,
+    ProgressBarIndicator: ()=>ProgressBarIndicator,
     Skeleton: ()=>skeleton_Skeleton,
     Spinner: ()=>spinner_Spinner,
+    ToastAction: ()=>ToastAction,
+    ToastClose: ()=>ToastClose,
+    ToastDescription: ()=>ToastDescription,
+    ToastTitle: ()=>ToastTitle,
     Toaster: ()=>toaster_Toaster,
     toast: ()=>toast
 });
@@ -61,6 +81,9 @@ const statusIcons = {
     warning: icons_namespaceObject.AlertTriangleIcon,
     error: icons_namespaceObject.XIcon
 };
+const StatusContext = (0, external_react_namespaceObject.createContext)('info');
+const StatusProvider = StatusContext.Provider;
+const useStatusContext = ()=>(0, external_react_namespaceObject.useContext)(StatusContext);
 function toPrimitive(t, r) {
     if ("object" != typeof t || !t) return t;
     var e = t[Symbol.toPrimitive];
@@ -163,9 +186,9 @@ var Alert_css_alert = createRuntimeFn({
     compoundVariants: []
 });
 var body = '_1313gq6';
-var Alert_css_description = '_1313gq8';
-var Alert_css_icon = '_1313gq5';
-var Alert_css_title = '_1313gq7';
+var description = '_1313gq8';
+var icon = '_1313gq5';
+var title = '_1313gq7';
 function _define_property(obj, key, value) {
     if (key in obj) Object.defineProperty(obj, key, {
         value: value,
@@ -248,46 +271,71 @@ const Alert = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0,
     let _ref = [
         _0,
         _1
-    ], [_ref1, ..._rest] = _ref, { status = 'info', title, description, className } = _ref1, rest = _object_without_properties(_ref1, [
+    ], [_ref1, ..._rest] = _ref, { status = 'info', className, children } = _ref1, rest = _object_without_properties(_ref1, [
         "status",
-        "title",
-        "description",
-        "className"
+        "className",
+        "children"
     ]), [ref] = _rest;
-    const Icon = statusIcons[status];
     const classes = className ? `${Alert_css_alert({
         status
     })} ${className}` : Alert_css_alert({
         status
     });
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(box_default(), _object_spread_props(_object_spread({
-        ref: ref,
-        role: "alert",
-        className: classes
-    }, rest), {
-        children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Icon, {
-                className: Alert_css_icon,
-                "aria-hidden": "true"
-            }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                className: body,
-                children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
-                        className: Alert_css_title,
-                        children: title
-                    }),
-                    description ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
-                        className: Alert_css_description,
-                        children: description
-                    }) : null
-                ]
-            })
-        ]
-    }));
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StatusProvider, {
+        value: status,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(box_default(), _object_spread_props(_object_spread({
+            ref: ref,
+            role: "alert",
+            className: classes
+        }, rest), {
+            children: children
+        }))
+    });
 });
 Alert.displayName = 'Alert';
 const alert_Alert = Alert;
+const AlertIcon = (_0)=>{
+    let { className, children } = _0, rest = _object_without_properties(_0, [
+        "className",
+        "children"
+    ]);
+    const status = useStatusContext();
+    const StatusIcon = statusIcons[status];
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", _object_spread_props(_object_spread({
+        className: className ? `${icon} ${className}` : icon,
+        "aria-hidden": "true"
+    }, rest), {
+        children: null != children ? children : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StatusIcon, {})
+    }));
+};
+AlertIcon.displayName = 'AlertIcon';
+const AlertBody = (_0)=>{
+    let { className } = _0, rest = _object_without_properties(_0, [
+        "className"
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", _object_spread({
+        className: className ? `${body} ${className}` : body
+    }, rest));
+};
+AlertBody.displayName = 'AlertBody';
+const AlertTitle = (_0)=>{
+    let { className } = _0, rest = _object_without_properties(_0, [
+        "className"
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", _object_spread({
+        className: className ? `${title} ${className}` : title
+    }, rest));
+};
+AlertTitle.displayName = 'AlertTitle';
+const AlertDescription = (_0)=>{
+    let { className } = _0, rest = _object_without_properties(_0, [
+        "className"
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", _object_spread({
+        className: className ? `${description} ${className}` : description
+    }, rest));
+};
+AlertDescription.displayName = "AlertDescription";
 var banner = createRuntimeFn({
     defaultClassName: 'a1nlu90',
     variantClassNames: {
@@ -391,28 +439,40 @@ const Banner = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0,
         "className",
         "children"
     ]), [ref] = _rest;
-    const Icon = statusIcons[status];
     const classes = className ? `${banner({
         status
     })} ${className}` : banner({
         status
     });
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(box_default(), Banner_object_spread_props(Banner_object_spread({
-        ref: ref,
-        role: "alert",
-        className: classes
-    }, rest), {
-        children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Icon, {
-                className: Banner_css_icon,
-                "aria-hidden": "true"
-            }),
-            children
-        ]
-    }));
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StatusProvider, {
+        value: status,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(box_default(), Banner_object_spread_props(Banner_object_spread({
+            ref: ref,
+            role: "alert",
+            className: classes
+        }, rest), {
+            children: children
+        }))
+    });
 });
 Banner.displayName = 'Banner';
 const banner_Banner = Banner;
+const BannerIcon = (_0)=>{
+    let { className, children } = _0, rest = Banner_object_without_properties(_0, [
+        "className",
+        "children"
+    ]);
+    const status = useStatusContext();
+    const StatusIcon = statusIcons[status];
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", Banner_object_spread_props(Banner_object_spread({
+        className: className ? `${Banner_css_icon} ${className}` : Banner_css_icon,
+        "aria-hidden": "true"
+    }, rest), {
+        children: null != children ? children : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StatusIcon, {})
+    }));
+};
+BannerIcon.displayName = 'BannerIcon';
+const react_progress_namespaceObject = require("@radix-ui/react-progress");
 const tokens_namespaceObject = require("@vinyasa/tokens");
 const space = {
     1: tokens_namespaceObject.themeContract.space1,
@@ -570,11 +630,17 @@ function CircularProgress_object_without_properties_loose(source, excluded) {
     }
     return target;
 }
+const CircularProgressContext = /*#__PURE__*/ (0, external_react_namespaceObject.createContext)({
+    value: null,
+    max: 100,
+    size: 32,
+    strokeWidth: 4
+});
 const CircularProgress = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _1)=>{
     let _ref = [
         _0,
         _1
-    ], [_ref1, ..._rest] = _ref, { value, max = 100, size = 32, strokeWidth = 4, m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py, className, style } = _ref1, rest = CircularProgress_object_without_properties(_ref1, [
+    ], [_ref1, ..._rest] = _ref, { value, max = 100, size = 32, strokeWidth = 4, m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py, className, style, children } = _ref1, rest = CircularProgress_object_without_properties(_ref1, [
         "value",
         "max",
         "size",
@@ -594,13 +660,10 @@ const CircularProgress = /*#__PURE__*/ (0, external_react_namespaceObject.forwar
         "px",
         "py",
         "className",
-        "style"
+        "style",
+        "children"
     ]), [ref] = _rest;
-    const radius = (size - strokeWidth) / 2;
-    const circumference = 2 * Math.PI * radius;
     const isIndeterminate = void 0 === value;
-    const percent = isIndeterminate ? 25 : Math.min(100, Math.max(0, value / max * 100));
-    const dashOffset = circumference - percent / 100 * circumference;
     const computedStyle = CircularProgress_object_spread({}, resolveSpacingStyle({
         m,
         mt,
@@ -623,41 +686,71 @@ const CircularProgress = /*#__PURE__*/ (0, external_react_namespaceObject.forwar
         className
     ].filter(Boolean).join(' ');
     const center = size / 2;
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("svg", CircularProgress_object_spread_props(CircularProgress_object_spread({
-        ref: ref,
-        role: "progressbar",
-        "aria-valuenow": isIndeterminate ? void 0 : value,
-        "aria-valuemin": 0,
-        "aria-valuemax": max,
-        width: size,
-        height: size,
-        viewBox: `0 0 ${String(size)} ${String(size)}`,
-        className: classes,
-        style: computedStyle
-    }, rest), {
-        children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("circle", {
-                className: track,
-                cx: center,
-                cy: center,
-                r: radius,
-                strokeWidth: strokeWidth
-            }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("circle", {
-                className: fill,
-                cx: center,
-                cy: center,
-                r: radius,
-                strokeWidth: strokeWidth,
-                strokeDasharray: circumference,
-                strokeDashoffset: dashOffset,
-                transform: `rotate(-90 ${String(center)} ${String(center)})`
+    const radius = (size - strokeWidth) / 2;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(CircularProgressContext.Provider, {
+        value: {
+            value: isIndeterminate ? null : value,
+            max,
+            size,
+            strokeWidth
+        },
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_progress_namespaceObject.Root, CircularProgress_object_spread_props(CircularProgress_object_spread({
+            value: isIndeterminate ? null : value,
+            max: max
+        }, rest), {
+            asChild: true,
+            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("svg", {
+                ref: ref,
+                width: size,
+                height: size,
+                viewBox: `0 0 ${String(size)} ${String(size)}`,
+                className: classes,
+                style: computedStyle,
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("circle", {
+                        className: track,
+                        cx: center,
+                        cy: center,
+                        r: radius,
+                        strokeWidth: strokeWidth
+                    }),
+                    children
+                ]
             })
-        ]
-    }));
+        }))
+    });
 });
 CircularProgress.displayName = 'CircularProgress';
 const circular_progress_CircularProgress = CircularProgress;
+const CircularProgressIndicator = (_0)=>{
+    let { className, style } = _0, rest = CircularProgress_object_without_properties(_0, [
+        "className",
+        "style"
+    ]);
+    const { value, max, size, strokeWidth } = (0, external_react_namespaceObject.useContext)(CircularProgressContext);
+    const isIndeterminate = null === value;
+    const radius = (size - strokeWidth) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const percent = isIndeterminate ? 25 : Math.min(100, Math.max(0, value / max * 100));
+    const dashOffset = circumference - percent / 100 * circumference;
+    const center = size / 2;
+    const classes = className ? `${fill} ${className}` : fill;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_progress_namespaceObject.Indicator, {
+        asChild: true,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("circle", CircularProgress_object_spread({
+            className: classes,
+            cx: center,
+            cy: center,
+            r: radius,
+            strokeWidth: strokeWidth,
+            strokeDasharray: circumference,
+            strokeDashoffset: dashOffset,
+            transform: `rotate(-90 ${String(center)} ${String(center)})`,
+            style: style
+        }, rest))
+    });
+};
+CircularProgressIndicator.displayName = 'CircularProgressIndicator';
 const layout_namespaceObject = require("@vinyasa/layout");
 const typography_namespaceObject = require("@vinyasa/typography");
 var iconWrapper = 'dmnndp0';
@@ -743,45 +836,57 @@ const EmptyState = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(
     let _ref = [
         _0,
         _1
-    ], [_ref1, ..._rest] = _ref, { icon, title, description, action, p = 6 } = _ref1, rest = EmptyState_object_without_properties(_ref1, [
-        "icon",
-        "title",
-        "description",
-        "action",
-        "p"
+    ], [_ref1, ..._rest] = _ref, { p = 6, children } = _ref1, rest = EmptyState_object_without_properties(_ref1, [
+        "p",
+        "children"
     ]), [ref] = _rest;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(layout_namespaceObject.Center, EmptyState_object_spread_props(EmptyState_object_spread({
         ref: ref,
         p: p
     }, rest), {
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(layout_namespaceObject.Stack, {
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(layout_namespaceObject.Stack, {
             gap: 2,
             align: "center",
             style: {
                 textAlign: 'center',
                 maxWidth: '24rem'
             },
-            children: [
-                icon ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                    className: iconWrapper,
-                    children: icon
-                }) : null,
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(typography_namespaceObject.Heading, {
-                    as: "h3",
-                    size: "lg",
-                    children: title
-                }),
-                description ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(typography_namespaceObject.Paragraph, {
-                    color: "muted",
-                    children: description
-                }) : null,
-                action
-            ]
+            children: children
         })
     }));
 });
 EmptyState.displayName = 'EmptyState';
 const empty_state_EmptyState = EmptyState;
+const EmptyStateIcon = (_0)=>{
+    let { className } = _0, rest = EmptyState_object_without_properties(_0, [
+        "className"
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", EmptyState_object_spread({
+        className: className ? `${iconWrapper} ${className}` : iconWrapper
+    }, rest));
+};
+EmptyStateIcon.displayName = 'EmptyStateIcon';
+const EmptyStateTitle = (_0)=>{
+    let { size = 'lg' } = _0, rest = EmptyState_object_without_properties(_0, [
+        "size"
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(typography_namespaceObject.Heading, EmptyState_object_spread({
+        as: "h3",
+        size: size
+    }, rest));
+};
+EmptyStateTitle.displayName = 'EmptyStateTitle';
+const EmptyStateDescription = (_0)=>{
+    let { color = 'muted' } = _0, rest = EmptyState_object_without_properties(_0, [
+        "color"
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(typography_namespaceObject.Paragraph, EmptyState_object_spread({
+        color: color
+    }, rest));
+};
+EmptyStateDescription.displayName = "EmptyStateDescription";
+const EmptyStateAction = (props)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", EmptyState_object_spread({}, props));
+EmptyStateAction.displayName = 'EmptyStateAction';
 const button_namespaceObject = require("@vinyasa/button");
 var button_default = /*#__PURE__*/ __webpack_require__.n(button_namespaceObject);
 function ErrorBoundary_define_property(obj, key, value) {
@@ -794,6 +899,27 @@ function ErrorBoundary_define_property(obj, key, value) {
     else obj[key] = value;
     return obj;
 }
+const ErrorBoundaryContent = ({ children })=>children;
+ErrorBoundaryContent.displayName = 'ErrorBoundaryContent';
+const ErrorBoundaryFallback = (props)=>null;
+ErrorBoundaryFallback.displayName = 'ErrorBoundaryFallback';
+const findSlot = (children, type)=>external_react_namespaceObject.Children.toArray(children).find((child)=>/*#__PURE__*/ (0, external_react_namespaceObject.isValidElement)(child) && child.type === type);
+const defaultFallback = ({ error, resetErrorBoundary })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(empty_state_EmptyState, {
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(EmptyStateTitle, {
+                children: "Something went wrong"
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(EmptyStateDescription, {
+                children: error.message
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(EmptyStateAction, {
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_default(), {
+                    onClick: resetErrorBoundary,
+                    children: "Try again"
+                })
+            })
+        ]
+    });
 class ErrorBoundary extends external_react_namespaceObject.Component {
     static getDerivedStateFromError(error) {
         return {
@@ -814,19 +940,20 @@ class ErrorBoundary extends external_react_namespaceObject.Component {
     }
     render() {
         const { error } = this.state;
-        if (!error) return this.props.children;
-        const { fallback } = this.props;
+        const { children } = this.props;
+        if (!error) {
+            var _findSlot;
+            return null != (_findSlot = findSlot(children, ErrorBoundaryContent)) ? _findSlot : null;
+        }
+        const fallbackSlot = findSlot(children, ErrorBoundaryFallback);
+        const fallback = null == fallbackSlot ? void 0 : fallbackSlot.props.children;
         if ('function' == typeof fallback) return fallback({
             error,
             resetErrorBoundary: this.reset
         });
-        return null != fallback ? fallback : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(empty_state_EmptyState, {
-            title: "Something went wrong",
-            description: error.message,
-            action: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_default(), {
-                onClick: this.reset,
-                children: "Try again"
-            })
+        return null != fallback ? fallback : defaultFallback({
+            error,
+            resetErrorBoundary: this.reset
         });
     }
     constructor(...args){
@@ -960,7 +1087,6 @@ const InlineMessage = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRe
         "style",
         "children"
     ]), [ref] = _rest;
-    const Icon = statusIcons[status];
     const classes = className ? `${inlineMessage({
         status
     })} ${className}` : inlineMessage({
@@ -982,23 +1108,35 @@ const InlineMessage = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRe
         px,
         py
     }), style);
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", InlineMessage_object_spread_props(InlineMessage_object_spread({
-        ref: ref,
-        role: "alert",
-        className: classes,
-        style: computedStyle
-    }, rest), {
-        children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Icon, {
-                className: InlineMessage_css_icon,
-                "aria-hidden": "true"
-            }),
-            children
-        ]
-    }));
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StatusProvider, {
+        value: status,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", InlineMessage_object_spread_props(InlineMessage_object_spread({
+            ref: ref,
+            role: "alert",
+            className: classes,
+            style: computedStyle
+        }, rest), {
+            children: children
+        }))
+    });
 });
 InlineMessage.displayName = 'InlineMessage';
 const inline_message_InlineMessage = InlineMessage;
+const InlineMessageIcon = (_0)=>{
+    let { className, children } = _0, rest = InlineMessage_object_without_properties(_0, [
+        "className",
+        "children"
+    ]);
+    const status = useStatusContext();
+    const StatusIcon = statusIcons[status];
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", InlineMessage_object_spread_props(InlineMessage_object_spread({
+        className: className ? `${InlineMessage_css_icon} ${className}` : InlineMessage_css_icon,
+        "aria-hidden": "true"
+    }, rest), {
+        children: null != children ? children : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StatusIcon, {})
+    }));
+};
+InlineMessageIcon.displayName = 'InlineMessageIcon';
 var spinner = createRuntimeFn({
     defaultClassName: '_8naz5u1',
     variantClassNames: {
@@ -1207,6 +1345,7 @@ function LoadingOverlay_object_without_properties_loose(source, excluded) {
     }
     return target;
 }
+const LoadingOverlayContext = /*#__PURE__*/ (0, external_react_namespaceObject.createContext)(false);
 const LoadingOverlay = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _1)=>{
     let _ref = [
         _0,
@@ -1217,26 +1356,43 @@ const LoadingOverlay = /*#__PURE__*/ (0, external_react_namespaceObject.forwardR
         "children"
     ]), [ref] = _rest;
     const classes = className ? `${wrapper} ${className}` : wrapper;
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(box_default(), LoadingOverlay_object_spread_props(LoadingOverlay_object_spread({
-        ref: ref,
-        className: classes
-    }, rest), {
-        children: [
-            children,
-            visible ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                className: overlay,
-                children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                        className: backdrop
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(spinner_Spinner, {})
-                ]
-            }) : null
-        ]
-    }));
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(LoadingOverlayContext.Provider, {
+        value: visible,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(box_default(), LoadingOverlay_object_spread_props(LoadingOverlay_object_spread({
+            ref: ref,
+            className: classes
+        }, rest), {
+            children: children
+        }))
+    });
 });
 LoadingOverlay.displayName = 'LoadingOverlay';
 const loading_overlay_LoadingOverlay = LoadingOverlay;
+const LoadingOverlayBackdrop = (_0)=>{
+    let { className } = _0, rest = LoadingOverlay_object_without_properties(_0, [
+        "className"
+    ]);
+    const visible = (0, external_react_namespaceObject.useContext)(LoadingOverlayContext);
+    if (!visible) return null;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", LoadingOverlay_object_spread({
+        className: className ? `${backdrop} ${className}` : backdrop
+    }, rest));
+};
+LoadingOverlayBackdrop.displayName = 'LoadingOverlayBackdrop';
+const LoadingOverlayContent = (_0)=>{
+    let { className, children } = _0, rest = LoadingOverlay_object_without_properties(_0, [
+        "className",
+        "children"
+    ]);
+    const visible = (0, external_react_namespaceObject.useContext)(LoadingOverlayContext);
+    if (!visible) return null;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", LoadingOverlay_object_spread_props(LoadingOverlay_object_spread({
+        className: className ? `${overlay} ${className}` : overlay
+    }, rest), {
+        children: null != children ? children : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(spinner_Spinner, {})
+    }));
+};
+LoadingOverlayContent.displayName = 'LoadingOverlayContent';
 var ProgressBar_css_fill = '_1ie0lek1';
 var ProgressBar_css_track = '_1ie0lek0';
 function ProgressBar_define_property(obj, key, value) {
@@ -1262,25 +1418,6 @@ function ProgressBar_object_spread(target) {
     }
     return target;
 }
-function ProgressBar_ownKeys(object, enumerableOnly) {
-    var keys = Object.keys(object);
-    if (Object.getOwnPropertySymbols) {
-        var symbols = Object.getOwnPropertySymbols(object);
-        if (enumerableOnly) symbols = symbols.filter(function(sym) {
-            return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-        });
-        keys.push.apply(keys, symbols);
-    }
-    return keys;
-}
-function ProgressBar_object_spread_props(target, source) {
-    source = null != source ? source : {};
-    if (Object.getOwnPropertyDescriptors) Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    else ProgressBar_ownKeys(Object(source)).forEach(function(key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-    });
-    return target;
-}
 function ProgressBar_object_without_properties(source, excluded) {
     if (null == source) return {};
     var target = {}, sourceKeys, key, i;
@@ -1317,37 +1454,83 @@ function ProgressBar_object_without_properties_loose(source, excluded) {
     }
     return target;
 }
+const ProgressBarContext = /*#__PURE__*/ (0, external_react_namespaceObject.createContext)({
+    value: 0,
+    max: 100
+});
 const ProgressBar = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _1)=>{
     let _ref = [
         _0,
         _1
-    ], [_ref1, ..._rest] = _ref, { value, max = 100, className, style } = _ref1, rest = ProgressBar_object_without_properties(_ref1, [
+    ], [_ref1, ..._rest] = _ref, { value, max = 100, m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py, className, style } = _ref1, rest = ProgressBar_object_without_properties(_ref1, [
         "value",
         "max",
+        "m",
+        "mt",
+        "mr",
+        "mb",
+        "ml",
+        "mx",
+        "my",
+        "p",
+        "pt",
+        "pr",
+        "pb",
+        "pl",
+        "px",
+        "py",
         "className",
         "style"
     ]), [ref] = _rest;
+    const computedStyle = ProgressBar_object_spread({}, resolveSpacingStyle({
+        m,
+        mt,
+        mr,
+        mb,
+        ml,
+        mx,
+        my,
+        p,
+        pt,
+        pr,
+        pb,
+        pl,
+        px,
+        py
+    }), style);
     const classes = className ? `${ProgressBar_css_track} ${className}` : ProgressBar_css_track;
-    const percent = Math.min(100, Math.max(0, value / max * 100));
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(box_default(), ProgressBar_object_spread_props(ProgressBar_object_spread({
-        ref: ref,
-        role: "progressbar",
-        "aria-valuenow": value,
-        "aria-valuemin": 0,
-        "aria-valuemax": max,
-        className: classes,
-        style: style
-    }, rest), {
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-            className: ProgressBar_css_fill,
-            style: {
-                width: `${String(percent)}%`
-            }
-        })
-    }));
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ProgressBarContext.Provider, {
+        value: {
+            value,
+            max
+        },
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_progress_namespaceObject.Root, ProgressBar_object_spread({
+            ref: ref,
+            value: value,
+            max: max,
+            className: classes,
+            style: computedStyle
+        }, rest))
+    });
 });
 ProgressBar.displayName = 'ProgressBar';
 const progress_bar_ProgressBar = ProgressBar;
+const ProgressBarIndicator = (_0)=>{
+    let { className, style } = _0, rest = ProgressBar_object_without_properties(_0, [
+        "className",
+        "style"
+    ]);
+    const { value, max } = (0, external_react_namespaceObject.useContext)(ProgressBarContext);
+    const percent = Math.min(100, Math.max(0, value / max * 100));
+    const classes = className ? `${ProgressBar_css_fill} ${className}` : ProgressBar_css_fill;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_progress_namespaceObject.Indicator, ProgressBar_object_spread({
+        className: classes,
+        style: ProgressBar_object_spread({
+            transform: `translateX(-${String(100 - percent)}%)`
+        }, style)
+    }, rest));
+};
+ProgressBarIndicator.displayName = 'ProgressBarIndicator';
 var hiddenContent = 'i625lp6';
 var Skeleton_css_overlay = 'i625lp5';
 var skeleton = createRuntimeFn({
@@ -1492,15 +1675,29 @@ const Skeleton = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_
 });
 Skeleton.displayName = 'Skeleton';
 const skeleton_Skeleton = Skeleton;
-var Toaster_css_body = '_1xil9gel';
-var closeButton = '_1xil9geo';
-var Toaster_css_description = '_1xil9gen';
-var enterFromBottom = '_1xil9geh';
-var enterFromTop = '_1xil9geg';
-var exitToBottom = '_1xil9gej';
-var exitToTop = '_1xil9gei';
-var Toaster_css_icon = '_1xil9gek';
-var stack = createRuntimeFn({
+const react_toast_namespaceObject = require("@radix-ui/react-toast");
+var action = '_1xil9gel';
+var Toaster_css_body = '_1xil9geh';
+var closeButton = '_1xil9gek';
+var Toaster_css_description = '_1xil9gej';
+var Toaster_css_icon = '_1xil9geg';
+var Toaster_css_title = '_1xil9gei';
+var toastCard = createRuntimeFn({
+    defaultClassName: '_1xil9geb',
+    variantClassNames: {
+        status: {
+            info: '_1xil9gec',
+            success: '_1xil9ged',
+            warning: '_1xil9gee',
+            error: '_1xil9gef'
+        }
+    },
+    defaultVariants: {
+        status: 'info'
+    },
+    compoundVariants: []
+});
+var viewport = createRuntimeFn({
     defaultClassName: '_1xil9ge0',
     variantClassNames: {
         position: {
@@ -1517,22 +1714,152 @@ var stack = createRuntimeFn({
     },
     compoundVariants: []
 });
-var Toaster_css_title = '_1xil9gem';
-var toastCard = createRuntimeFn({
-    defaultClassName: '_1xil9ge7',
-    variantClassNames: {
-        status: {
-            info: '_1xil9ge8',
-            success: '_1xil9ge9',
-            warning: '_1xil9gea',
-            error: '_1xil9geb'
+function ToasterItem_define_property(obj, key, value) {
+    if (key in obj) Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+    });
+    else obj[key] = value;
+    return obj;
+}
+function ToasterItem_object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = null != arguments[i] ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if ("function" == typeof Object.getOwnPropertySymbols) ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+            return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+        }));
+        ownKeys.forEach(function(key) {
+            ToasterItem_define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ToasterItem_object_without_properties(source, excluded) {
+    if (null == source) return {};
+    var target = {}, sourceKeys, key, i;
+    if ("u" > typeof Reflect && Reflect.ownKeys) {
+        sourceKeys = Reflect.ownKeys(Object(source));
+        for(i = 0; i < sourceKeys.length; i++){
+            key = sourceKeys[i];
+            if (!(excluded.indexOf(key) >= 0)) {
+                if (Object.prototype.propertyIsEnumerable.call(source, key)) target[key] = source[key];
+            }
         }
-    },
-    defaultVariants: {
-        status: 'info'
-    },
-    compoundVariants: []
+        return target;
+    }
+    target = ToasterItem_object_without_properties_loose(source, excluded);
+    if (Object.getOwnPropertySymbols) {
+        sourceKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceKeys.length; i++){
+            key = sourceKeys[i];
+            if (!(excluded.indexOf(key) >= 0)) {
+                if (Object.prototype.propertyIsEnumerable.call(source, key)) target[key] = source[key];
+            }
+        }
+    }
+    return target;
+}
+function ToasterItem_object_without_properties_loose(source, excluded) {
+    if (null == source) return {};
+    var target = {}, sourceKeys = Object.getOwnPropertyNames(source), key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (!(excluded.indexOf(key) >= 0)) {
+            if (Object.prototype.propertyIsEnumerable.call(source, key)) target[key] = source[key];
+        }
+    }
+    return target;
+}
+const ToastTitle = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _1)=>{
+    let _ref = [
+        _0,
+        _1
+    ], [_ref1, ..._rest] = _ref, { className } = _ref1, rest = ToasterItem_object_without_properties(_ref1, [
+        "className"
+    ]), [ref] = _rest;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_toast_namespaceObject.Title, ToasterItem_object_spread({
+        ref: ref,
+        className: className ? `${Toaster_css_title} ${className}` : Toaster_css_title
+    }, rest));
+});
+ToastTitle.displayName = 'ToastTitle';
+const ToastDescription = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _1)=>{
+    let _ref = [
+        _0,
+        _1
+    ], [_ref1, ..._rest] = _ref, { className } = _ref1, rest = ToasterItem_object_without_properties(_ref1, [
+        "className"
+    ]), [ref] = _rest;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_toast_namespaceObject.Description, ToasterItem_object_spread({
+        ref: ref,
+        className: className ? `${Toaster_css_description} ${className}` : Toaster_css_description
+    }, rest));
+});
+ToastDescription.displayName = "ToastDescription";
+const ToastAction = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _1)=>{
+    let _ref = [
+        _0,
+        _1
+    ], [_ref1, ..._rest] = _ref, { className } = _ref1, rest = ToasterItem_object_without_properties(_ref1, [
+        "className"
+    ]), [ref] = _rest;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_toast_namespaceObject.Action, ToasterItem_object_spread({
+        ref: ref,
+        className: className ? `${action} ${className}` : action
+    }, rest));
 });
+ToastAction.displayName = 'ToastAction';
+const ToastClose = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _1)=>{
+    let _ref = [
+        _0,
+        _1
+    ], [_ref1, ..._rest] = _ref, { className } = _ref1, rest = ToasterItem_object_without_properties(_ref1, [
+        "className"
+    ]), [ref] = _rest;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_toast_namespaceObject.Close, ToasterItem_object_spread({
+        ref: ref,
+        className: className ? `${closeButton} ${className}` : closeButton
+    }, rest));
+});
+ToastClose.displayName = 'ToastClose';
+const ToasterItem = ({ status, title: itemTitle, description: itemDescription, duration, open, edge, onOpenChange })=>{
+    const Icon = statusIcons[status];
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(react_toast_namespaceObject.Root, {
+        className: toastCard({
+            status
+        }),
+        "data-edge": edge,
+        open: open,
+        duration: 0 === duration ? 1 / 0 : duration,
+        onOpenChange: onOpenChange,
+        forceMount: true,
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Icon, {
+                className: Toaster_css_icon,
+                "aria-hidden": "true"
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: Toaster_css_body,
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ToastTitle, {
+                        children: itemTitle
+                    }),
+                    itemDescription ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ToastDescription, {
+                        children: itemDescription
+                    }) : null
+                ]
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ToastClose, {
+                "aria-label": "Dismiss",
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_namespaceObject.XIcon, {})
+            })
+        ]
+    });
+};
+const toaster_ToasterItem = ToasterItem;
 function toastStore_define_property(obj, key, value) {
     if (key in obj) Object.defineProperty(obj, key, {
         value: value,
@@ -1599,7 +1926,7 @@ const show = (options)=>{
         title: options.title,
         description: options.description,
         duration: null != (_options_duration = options.duration) ? _options_duration : 4000,
-        exiting: false
+        open: true
     };
     toasts = [
         ...toasts,
@@ -1610,9 +1937,9 @@ const show = (options)=>{
 };
 const dismiss = (id)=>{
     const target = toasts.find((item)=>item.id === id);
-    if (!target || target.exiting) return;
+    if (!(null == target ? void 0 : target.open)) return;
     toasts = toasts.map((item)=>item.id === id ? toastStore_object_spread_props(toastStore_object_spread({}, item), {
-            exiting: true
+            open: false
         }) : item);
     notify();
     setTimeout(()=>{
@@ -1624,57 +1951,6 @@ const toast = {
     show,
     dismiss
 };
-const ToastItemView = ({ id, status, title: itemTitle, description: itemDescription, duration, exiting, edge })=>{
-    (0, external_react_namespaceObject.useEffect)(()=>{
-        if (duration <= 0) return;
-        const timer = setTimeout(()=>{
-            dismiss(id);
-        }, duration);
-        return ()=>{
-            clearTimeout(timer);
-        };
-    }, [
-        id,
-        duration
-    ]);
-    const Icon = statusIcons[status];
-    const animationClass = exiting ? 'top' === edge ? exitToTop : exitToBottom : 'top' === edge ? enterFromTop : enterFromBottom;
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-        className: `${toastCard({
-            status
-        })} ${animationClass}`,
-        role: "status",
-        children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Icon, {
-                className: Toaster_css_icon,
-                "aria-hidden": "true"
-            }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                className: Toaster_css_body,
-                children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
-                        className: Toaster_css_title,
-                        children: itemTitle
-                    }),
-                    itemDescription ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
-                        className: Toaster_css_description,
-                        children: itemDescription
-                    }) : null
-                ]
-            }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
-                type: "button",
-                className: closeButton,
-                onClick: ()=>{
-                    dismiss(id);
-                },
-                "aria-label": "Dismiss",
-                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_namespaceObject.XIcon, {})
-            })
-        ]
-    });
-};
-const toaster_ToastItemView = ToastItemView;
 function Toaster_define_property(obj, key, value) {
     if (key in obj) Object.defineProperty(obj, key, {
         value: value,
@@ -1721,40 +1997,88 @@ const emptySnapshot = [];
 const Toaster = ({ position = 'bottom-right' })=>{
     const items = (0, external_react_namespaceObject.useSyncExternalStore)(subscribe, getSnapshot, ()=>emptySnapshot);
     const edge = position.startsWith('top') ? 'top' : 'bottom';
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-        className: stack({
-            position
-        }),
-        children: items.map((item)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(toaster_ToastItemView, Toaster_object_spread_props(Toaster_object_spread({}, item), {
-                edge: edge
-            }), item.id))
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(react_toast_namespaceObject.Provider, {
+        duration: 4000,
+        children: [
+            items.map((item)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(toaster_ToasterItem, Toaster_object_spread_props(Toaster_object_spread({}, item), {
+                    edge: edge,
+                    onOpenChange: (open)=>{
+                        if (!open) dismiss(item.id);
+                    }
+                }), item.id)),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_toast_namespaceObject.Viewport, {
+                className: viewport({
+                    position
+                })
+            })
+        ]
     });
 };
 Toaster.displayName = 'Toaster';
 const toaster_Toaster = Toaster;
 exports.Alert = __webpack_exports__.Alert;
+exports.AlertBody = __webpack_exports__.AlertBody;
+exports.AlertDescription = __webpack_exports__.AlertDescription;
+exports.AlertIcon = __webpack_exports__.AlertIcon;
+exports.AlertTitle = __webpack_exports__.AlertTitle;
 exports.Banner = __webpack_exports__.Banner;
+exports.BannerIcon = __webpack_exports__.BannerIcon;
 exports.CircularProgress = __webpack_exports__.CircularProgress;
+exports.CircularProgressIndicator = __webpack_exports__.CircularProgressIndicator;
 exports.EmptyState = __webpack_exports__.EmptyState;
+exports.EmptyStateAction = __webpack_exports__.EmptyStateAction;
+exports.EmptyStateDescription = __webpack_exports__.EmptyStateDescription;
+exports.EmptyStateIcon = __webpack_exports__.EmptyStateIcon;
+exports.EmptyStateTitle = __webpack_exports__.EmptyStateTitle;
 exports.ErrorBoundary = __webpack_exports__.ErrorBoundary;
+exports.ErrorBoundaryContent = __webpack_exports__.ErrorBoundaryContent;
+exports.ErrorBoundaryFallback = __webpack_exports__.ErrorBoundaryFallback;
 exports.InlineMessage = __webpack_exports__.InlineMessage;
+exports.InlineMessageIcon = __webpack_exports__.InlineMessageIcon;
 exports.LoadingOverlay = __webpack_exports__.LoadingOverlay;
+exports.LoadingOverlayBackdrop = __webpack_exports__.LoadingOverlayBackdrop;
+exports.LoadingOverlayContent = __webpack_exports__.LoadingOverlayContent;
 exports.ProgressBar = __webpack_exports__.ProgressBar;
+exports.ProgressBarIndicator = __webpack_exports__.ProgressBarIndicator;
 exports.Skeleton = __webpack_exports__.Skeleton;
 exports.Spinner = __webpack_exports__.Spinner;
+exports.ToastAction = __webpack_exports__.ToastAction;
+exports.ToastClose = __webpack_exports__.ToastClose;
+exports.ToastDescription = __webpack_exports__.ToastDescription;
+exports.ToastTitle = __webpack_exports__.ToastTitle;
 exports.Toaster = __webpack_exports__.Toaster;
 exports.toast = __webpack_exports__.toast;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "Alert",
+    "AlertBody",
+    "AlertDescription",
+    "AlertIcon",
+    "AlertTitle",
     "Banner",
+    "BannerIcon",
     "CircularProgress",
+    "CircularProgressIndicator",
     "EmptyState",
+    "EmptyStateAction",
+    "EmptyStateDescription",
+    "EmptyStateIcon",
+    "EmptyStateTitle",
     "ErrorBoundary",
+    "ErrorBoundaryContent",
+    "ErrorBoundaryFallback",
     "InlineMessage",
+    "InlineMessageIcon",
     "LoadingOverlay",
+    "LoadingOverlayBackdrop",
+    "LoadingOverlayContent",
     "ProgressBar",
+    "ProgressBarIndicator",
     "Skeleton",
     "Spinner",
+    "ToastAction",
+    "ToastClose",
+    "ToastDescription",
+    "ToastTitle",
     "Toaster",
     "toast"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];