@myzbox/react-overlay 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 myzbox
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,457 @@
+# @myzbox/react-overlay
+
+[![npm version](https://img.shields.io/npm/v/@myzbox/react-overlay.svg)](https://www.npmjs.com/package/@myzbox/react-overlay)
+[![npm downloads](https://img.shields.io/npm/dm/@myzbox/react-overlay.svg)](https://www.npmjs.com/package/@myzbox/react-overlay)
+[![bundle size](https://img.shields.io/bundlephobia/minzip/@myzbox/react-overlay)](https://bundlephobia.com/package/@myzbox/react-overlay)
+[![license](https://img.shields.io/npm/l/@myzbox/react-overlay.svg)](https://github.com/myzbox/react-overlay/blob/main/LICENSE)
+
+A highly configurable, accessible, and senior-grade React overlay library. Built with TypeScript, Accessibility, and Performance in mind.
+
+## Features
+
+- 🎯 **Accessible**: Fully compliant with WAI-ARIA practices (focus trapping, aria attributes, keyboard navigation).
+- 🎨 **Animations**: Built-in animations (Zoom, Fade, Slide Up/Down/Left/Right).
+- 📱 **Responsive**: Mobile-friendly out of the box.
+- 🖐 **Draggable**: Enable drag-and-drop support on modals.
+- 🗄️ **Drawer Component**: Slide-out panels from any edge (Left, Right, Top, Bottom).
+- 💡 **Tooltip Component**: Customizable tooltips with support for HTML content.
+- 💬 **Popover Component**: Click-triggered interactive popups.
+- 🍞 **Toast System**: Global notifications with stacking, positioning, and auto-close.
+- 🌈 **Themable**: Configurable colors via CSS Variables.
+- 🧩 **Variants**: Includes `AlertModal`, `ConfirmModal`, `Drawer`, `Tooltip`, `Popover`, and `Toast`.
+- 🛠 **Customizable**: Extensive props for specific positioning, sizing, and styling.
+- 📦 **Lightweight**: Minimal dependencies (`classnames`, `react`, `react-dom`).
+
+## Installation
+
+```bash
+npm install @myzbox/react-overlay
+# or
+yarn add @myzbox/react-overlay
+```
+
+Ensure you have peer dependencies installed:
+```bash
+npm install react react-dom
+```
+
+## Basic Usage
+
+```tsx
+// Complete bundle (Recommended)
+import '@myzbox/react-overlay/dist/react-overlay.css';
+
+// OR import all source modules at once
+import '@myzbox/react-overlay/styles/index.css';
+
+
+
+// 1. Wrap your app with ToastProvider
+import { ToastProvider } from '@myzbox/react-overlay';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <ToastProvider>
+    <App />
+  </ToastProvider>
+);
+```
+
+### `<Modal />`
+
+```tsx
+import React, { useState } from 'react';
+import { Modal, useModal } from '@myzbox/react-overlay';
+
+const App = () => {
+  const { isOpen, open, close } = useModal();
+
+  return (
+    <>
+      <button onClick={open}>Open Modal</button>
+      
+      <Modal 
+        isOpen={isOpen} 
+        onClose={close} 
+        title="Welcome"
+        position="center"
+        animation="zoom"
+        draggable // Enable drag
+      >
+        <p>This is a custom accessible modal.</p>
+        <div style={{ marginTop: '1rem', display: 'flex', justifyContent: 'flex-end' }}>
+             <button onClick={close}>Close</button>
+        </div>
+      </Modal>
+    </>
+  );
+};
+```
+
+### `<Tooltip />`
+
+```tsx
+import { Tooltip } from '@myzbox/react-overlay';
+
+<Tooltip content="I am a simple tooltip" position="top">
+  <button>Hover me</button>
+</Tooltip>
+
+// With HTML content and custom width
+<Tooltip 
+  content={<strong>Bold content</strong>} 
+  width={200}
+  position="right"
+>
+  <button>HTML Tooltip</button>
+</Tooltip>
+```
+
+### `<AlertModal />` - Simple Alerts
+
+```tsx
+import { AlertModal, useModal } from '@myzbox/react-overlay';
+
+const App = () => {
+  const { isOpen, open, close } = useModal();
+
+  return (
+    <>
+      <button onClick={open}>Show Success Alert</button>
+      
+      <AlertModal
+        isOpen={isOpen}
+        onClose={close}
+        type="success"  // 'success' | 'error' | 'warning' | 'info'
+        message="Your changes have been saved successfully!"
+        okText="Got it"
+        onOk={() => console.log('OK clicked')}
+      />
+    </>
+  );
+};
+```
+
+### `<ConfirmModal />` - Confirmation Dialogs
+
+```tsx
+import { ConfirmModal, useModal } from '@myzbox/react-overlay';
+
+const App = () => {
+  const { isOpen, open, close } = useModal();
+
+  const handleDelete = async () => {
+    // Simulate async operation
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    console.log('Deleted!');
+  };
+
+  return (
+    <>
+      <button onClick={open}>Delete Item</button>
+      
+      <ConfirmModal
+        isOpen={isOpen}
+        onClose={close}
+        message="Are you sure you want to delete this item? This action cannot be undone."
+        confirmText="Delete"
+        cancelText="Cancel"
+        isDestructive={true}  // Red button for dangerous actions
+        onConfirm={handleDelete}  // Supports async functions
+        onCancel={() => console.log('Cancelled')}
+      />
+    </>
+  );
+};
+```
+
+### `<Drawer />` - Side Panels
+
+```tsx
+import { Drawer, useModal } from '@myzbox/react-overlay';
+
+const App = () => {
+  const { isOpen, open, close } = useModal();
+
+  return (
+    <>
+      <button onClick={open}>Open Settings</button>
+      
+      <Drawer
+        isOpen={isOpen}
+        onClose={close}
+        placement="right"  // 'left' | 'right' | 'top' | 'bottom'
+        title="Settings"
+      >
+        <div>
+          <h3>Account Settings</h3>
+          <p>Configure your preferences here...</p>
+        </div>
+      </Drawer>
+    </>
+  );
+};
+```
+
+### `<Tooltip />` - Contextual Help
+
+```tsx
+import { Tooltip } from '@myzbox/react-overlay';
+
+// Simple text tooltip
+<Tooltip content="Click to copy to clipboard" position="top">
+  <button>Copy</button>
+</Tooltip>
+
+// Rich HTML content
+<Tooltip 
+  content={
+    <div>
+      <strong>Pro Tip:</strong>
+      <p>Hold Shift to select multiple items</p>
+    </div>
+  }
+  position="right"
+  delay={300}
+  width={250}
+>
+  <span>ℹ️ Help</span>
+</Tooltip>
+
+// Icon with tooltip
+<Tooltip content="This is a multi-line tooltip that provides detailed information about the feature">
+  <button>🔍</button>
+</Tooltip>
+```
+
+### `<Popover />` - Interactive Menus
+
+```tsx
+import { Popover } from '@myzbox/react-overlay';
+
+// Simple content
+<Popover content="Quick info here" position="bottom">
+  <button>Click Me</button>
+</Popover>
+
+// Interactive menu with render prop
+<Popover 
+  content={(close) => (
+    <div style={{ padding: '1rem' }}>
+      <h4>Actions</h4>
+      <button onClick={() => { console.log('Edit'); close(); }}>
+        Edit
+      </button>
+      <button onClick={() => { console.log('Delete'); close(); }}>
+        Delete
+      </button>
+      <button onClick={close}>Cancel</button>
+    </div>
+  )}
+  position="bottom"
+  width={200}
+  draggable  // Make it draggable
+>
+  <button>⋮ More Options</button>
+</Popover>
+```
+
+### `useToast()` - Global Notifications
+
+```tsx
+import { useToast, ToastProvider } from '@myzbox/react-overlay';
+
+// Wrap your app with ToastProvider first
+function Root() {
+  return (
+    <ToastProvider>
+      <App />
+    </ToastProvider>
+  );
+}
+
+function App() {
+  const toast = useToast();
+
+  const showNotifications = () => {
+    // Simple usage
+    toast.success("Saved successfully!");
+    toast.error("Failed to save");
+    toast.warning("Please review your changes");
+    toast.info("New update available");
+
+    // Advanced with options
+    toast.success("File uploaded", {
+      position: "top-right",    // 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'
+      duration: 5000,           // milliseconds (0 = never auto-close)
+      delay: 500,               // delay before showing
+      draggable: true           // allow dragging
+    });
+
+    // Manual close (persist until user closes)
+    toast.info("Processing your request...", { duration: 0 });
+  };
+
+  return <button onClick={showNotifications}>Show Toasts</button>;
+}
+```
+
+### Advanced: Draggable Modals
+
+```tsx
+import { Modal, useModal } from '@myzbox/react-overlay';
+
+const App = () => {
+  const { isOpen, open, close } = useModal();
+
+  return (
+    <>
+      <button onClick={open}>Open Draggable Modal</button>
+      
+      <Modal
+        isOpen={isOpen}
+        onClose={close}
+        title="Drag me around!"
+        draggable={true}  // Enable dragging
+        position="center"
+        animation="zoom"
+      >
+        <p>You can drag this modal by its header!</p>
+      </Modal>
+    </>
+  );
+};
+```
+
+### `useToast()`
+
+```tsx
+import { useToast } from '@myzbox/react-overlay';
+
+const MyComponent = () => {
+  const toast = useToast();
+
+  const handleClick = () => {
+    // Simple
+    toast.success("Operation saved!");
+
+    // Advanced
+    toast.error("Network Error", {
+      position: "bottom-right",
+      duration: 5000,
+      delay: 500, // Wait 500ms before showing
+    });
+    
+    // Manual Close / Persistent
+    toast.info("Updating...", { duration: 0 }); // 0 = never close automatically
+  };
+
+  return <button onClick={handleClick}>Show Toast</button>;
+};
+```
+
+## Theming & Customization
+
+Define these variables in your CSS (e.g., `:root`) to override default colors:
+
+```css
+:root {
+  /* Modal Backgrounds */
+  --rm-overlay-bg: rgba(0, 0, 0, 0.5);
+  --rm-modal-bg: #ffffff;
+  
+  /* Text & Borders */
+  --rm-text-color: #374151;
+  --rm-title-color: #111827;
+  --rm-border-color: #e5e7eb;
+  
+  /* Buttons */
+  --rm-btn-primary-bg: #2563eb;
+  --rm-btn-primary-hover: #1d4ed8;
+  --rm-btn-primary-text: #ffffff;
+  
+  --rm-btn-destructive-bg: #dc2626;
+  --rm-btn-destructive-hover: #b91c1c;
+}
+```
+
+## Components API
+
+### `<Modal />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `isOpen` | boolean | required | Controls visibility |
+| `onClose` | function | required | Callback when requesting close |
+| `children` | ReactNode | required | Content of the modal |
+| `draggable` | boolean | `false` | Enable drag functionality |
+| `position` | 'center', 'top', etc. | 'center' | Position on screen |
+| `size` | 'sm', 'md', 'lg', 'xl', 'full' | 'md' | Width size preset |
+| `animation` | 'zoom', 'fade', 'slide-up'... | 'zoom' | Entry/Exit animation |
+| `hideHeader` | boolean | `false` | Hides the header (title/close btn) |
+
+### `<AlertModal />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `type` | 'success', 'error', 'warning', 'info' | 'info' | Visual style/icon |
+| `message` | ReactNode | required | Alert content |
+| `showHeader` | boolean | `true` | Show/Hide the header |
+| `onOk` | function | - | Callback for OK button |
+
+### `<Tooltip />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | ReactNode | required | Trigger element |
+| `content` | ReactNode | required | content of tooltip |
+| `position` | 'top', 'bottom', 'left', 'right' | 'top' | Position relative to trigger |
+| `delay` | number | 200 | Delay in ms before showing |
+| `width` | string/number | - | Custom width |
+| `height` | string/number | - | Custom height |
+
+### `<Popover />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | ReactNode | required | Trigger element (clickable) |
+| `content` | ReactNode | required | Content of the popover |
+| `position` | 'top', 'bottom', 'left', 'right' | 'bottom' | Position relative to trigger |
+| `width` | string/number | - | Custom width |
+
+## Community
+
+- [Changelog](./CHANGELOG.md)
+- [Roadmap](./ROADMAP.md)
+- [Contributing](./CONTRIBUTING.md)
+
+## 🤝 Contributing
+
+Contributions are welcome!
+
+Please read CONTRIBUTING.md before submitting a pull request.
+
+## 👤 Maintainer
+
+**Maintainer:** Mahantesh Teli  
+**Email:** <myzbox1@gmail.com>  
+**Organization:** myZbox
+
+
+For questions, bug reports, or feature requests, please open an issue.
+Direct emails are recommended only for security or private concerns.
+
+## 📄 License
+
+MIT © 2026 myzbox
+
+## ⭐ Support
+
+If this library helps you:
+
+Star the repository ⭐
+
+Share feedback
+
+Open issues for bugs or feature requests
+
+---

package/dist/index.d.ts

@@ -0,0 +1 @@
+export {}

package/dist/react-overlay.css

@@ -0,0 +1 @@
+:root{--rm-overlay-bg: rgba(0, 0, 0, .5);--rm-modal-bg: #ffffff;--rm-modal-shadow: 0 4px 6px rgba(0, 0, 0, .1), 0 10px 15px rgba(0, 0, 0, .1);--rm-text-color: #374151;--rm-title-color: #111827;--rm-border-color: #e5e7eb;--rm-close-color: #374151;--rm-close-hover-bg: #f3f4f6;--rm-close-hover-color: #111827;--rm-footer-bg: #f9fafb}._overlay_1pta6_15{box-sizing:border-box!important;position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:var(--rm-overlay-bg);display:flex;justify-content:center;align-items:center;z-index:1000;opacity:0;transition:opacity .2s ease-in-out;pointer-events:none}._overlay_1pta6_15._open_1pta6_32{opacity:1;pointer-events:auto}._overlay_1pta6_15._center_1pta6_38{justify-content:center;align-items:center;box-sizing:border-box}._overlay_1pta6_15._top_1pta6_44{align-items:flex-start;padding-top:2rem;box-sizing:border-box}._overlay_1pta6_15._bottom_1pta6_50{align-items:flex-end;padding-bottom:2rem}._overlay_1pta6_15._left_1pta6_55{justify-content:flex-start;height:100vh;box-sizing:border-box}._overlay_1pta6_15._right_1pta6_61{justify-content:flex-end;height:100vh}._overlay_1pta6_15._top-left_1pta6_66{justify-content:flex-start;align-items:flex-start;padding:2rem;box-sizing:border-box}._overlay_1pta6_15._top-right_1pta6_73{justify-content:flex-end;align-items:flex-start;padding:2rem;box-sizing:border-box}._overlay_1pta6_15._bottom-left_1pta6_80{justify-content:flex-start;align-items:flex-end;padding:2rem;box-sizing:border-box}._overlay_1pta6_15._bottom-right_1pta6_87{justify-content:flex-end;align-items:flex-end;padding:2rem;box-sizing:border-box}._modal_1pta6_94{box-sizing:border-box;background:var(--rm-modal-bg);border-radius:8px;box-shadow:var(--rm-modal-shadow);width:100%;max-width:100%;max-height:90vh;display:flex;flex-direction:column;position:relative;overflow:hidden;opacity:0;transform:scale(.95);transition:all .2s cubic-bezier(.4,0,.2,1)}._modal_1pta6_94 *,._modal_1pta6_94 *:before,._modal_1pta6_94 *:after{box-sizing:border-box}._modal_1pta6_94._open_1pta6_32{opacity:1;transform:scale(1);animation:_openScale_1pta6_1 .2s cubic-bezier(.4,0,.2,1)}._modal_1pta6_94._sm_1pta6_124{width:400px}._modal_1pta6_94._md_1pta6_128{width:600px}._modal_1pta6_94._lg_1pta6_132{width:800px}._modal_1pta6_94._xl_1pta6_136{width:1140px}._modal_1pta6_94._full_1pta6_140{width:98vw;height:96vh;max-height:96vh;border-radius:8px}._modal_1pta6_94._auto_1pta6_147{width:auto}@keyframes _openScale_1pta6_1{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}._modal_1pta6_94._slide-up_1pta6_164{transform:translateY(20px)}._modal_1pta6_94._slide-up_1pta6_164._open_1pta6_32{transform:translateY(0)}._modal_1pta6_94._slide-down_1pta6_172{transform:translateY(-20px)}._modal_1pta6_94._slide-down_1pta6_172._open_1pta6_32{transform:translateY(0)}._modal_1pta6_94._fade_1pta6_180,._modal_1pta6_94._fade_1pta6_180._open_1pta6_32{transform:none}._modal_1pta6_94._slide-left_1pta6_188{transform:translate(-20px)}._modal_1pta6_94._slide-left_1pta6_188._open_1pta6_32{transform:translate(0)}._modal_1pta6_94._slide-right_1pta6_196{transform:translate(20px)}._modal_1pta6_94._slide-right_1pta6_196._open_1pta6_32{transform:translate(0)}._modal_1pta6_94._drawer-slide-right_1pta6_205{transform:translate(100%)}._modal_1pta6_94._drawer-slide-right_1pta6_205._open_1pta6_32{transform:translate(0)}._modal_1pta6_94._drawer-slide-left_1pta6_213{transform:translate(-100%)}._modal_1pta6_94._drawer-slide-left_1pta6_213._open_1pta6_32{transform:translate(0)}._modal_1pta6_94._drawer-slide-up_1pta6_221{transform:translateY(100%)}._modal_1pta6_94._drawer-slide-up_1pta6_221._open_1pta6_32{transform:translateY(0)}._modal_1pta6_94._drawer-slide-down_1pta6_229{transform:translateY(-100%)}._modal_1pta6_94._drawer-slide-down_1pta6_229._open_1pta6_32{transform:translateY(0)}._header_1pta6_237{box-sizing:border-box;width:100%;padding:1rem 1.5rem;border-bottom:1px solid var(--rm-border-color);display:flex;justify-content:space-between;align-items:center}._header_1pta6_237._draggable_1pta6_247{cursor:move;-webkit-user-select:none;user-select:none}._title_1pta6_252{font-size:1.25rem;font-weight:600;color:var(--rm-title-color);margin:0}._closeButton_1pta6_259{box-sizing:border-box;background:transparent;border:none;cursor:pointer;width:32px;height:32px;border-radius:50%;color:var(--rm-close-color);transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;margin-right:-4px;background-color:transparent}._closeButton_1pta6_259:hover{color:var(--rm-close-hover-color);transform:scale(1.15)}._closeButton_1pta6_259:active{transform:scale(.95)}._closeButton_1pta6_259 svg{width:16px;height:16px;stroke:currentColor;stroke-width:3;display:block;transition:transform .2s}._content_1pta6_294{box-sizing:border-box;width:100%;padding:1.5rem;overflow-y:auto;flex:1;color:var(--rm-text-color);font-size:1rem;line-height:1.5}._footer_1pta6_305{box-sizing:border-box;width:100%;padding:1rem 1.5rem;border-top:1px solid var(--rm-border-color);background-color:var(--rm-footer-bg);display:flex;justify-content:flex-end;gap:.75rem}:root{--rm-success-bg: #d1fae5;--rm-success-color: #065f46;--rm-error-bg: #fee2e2;--rm-error-color: #991b1b;--rm-warning-bg: #fef3c7;--rm-warning-color: #92400e;--rm-info-bg: #dbeafe;--rm-info-color: #1e40af;--rm-btn-primary-bg: #2563eb;--rm-btn-primary-hover: #1d4ed8;--rm-btn-primary-text: #ffffff;--rm-btn-default-bg: #ffffff;--rm-btn-default-border: #d1d5db;--rm-btn-default-text: #374151;--rm-btn-default-hover: #f3f4f6;--rm-btn-destructive-bg: #dc2626;--rm-btn-destructive-hover: #b91c1c}._drawer_43ihb_24{border-radius:0;max-height:none}._drawer_43ihb_24._left_43ihb_29,._drawer_43ihb_24._right_43ihb_30{height:100vh;border-radius:0}._drawer_43ihb_24._top_43ihb_35,._drawer_43ihb_24._bottom_43ihb_36{width:100vw;border-radius:0}._alertModal_43ihb_41{box-sizing:border-box;display:block}._alertContent_43ihb_47{display:flex;align-items:center;gap:1rem}._icon_43ihb_53{width:2rem;height:2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}._success_43ihb_64 ._icon_43ihb_53{background:var(--rm-success-bg);color:var(--rm-success-color)}._error_43ihb_69 ._icon_43ihb_53{background:var(--rm-error-bg);color:var(--rm-error-color)}._warning_43ihb_74 ._icon_43ihb_53{background:var(--rm-warning-bg);color:var(--rm-warning-color)}._info_43ihb_79 ._icon_43ihb_53{background:var(--rm-info-bg);color:var(--rm-info-color)}._okButton_43ihb_84,._confirmButton_43ihb_85{box-sizing:border-box;background:var(--rm-btn-primary-bg);color:var(--rm-btn-primary-text);border:none;padding:.5rem 1rem;border-radius:4px;cursor:pointer;font-weight:500}._okButton_43ihb_84:hover,._confirmButton_43ihb_85:hover{background:var(--rm-btn-primary-hover)}._okButton_43ihb_84:disabled,._confirmButton_43ihb_85:disabled{opacity:.5;cursor:not-allowed}._cancelButton_43ihb_107{box-sizing:border-box;background:var(--rm-btn-default-bg);border:1px solid var(--rm-btn-default-border);color:var(--rm-btn-default-text);padding:.5rem 1rem;border-radius:4px;cursor:pointer}._cancelButton_43ihb_107:hover{background:var(--rm-btn-default-hover)}._cancelButton_43ihb_107:disabled{opacity:.5;cursor:not-allowed}._destructive_43ihb_126{background:var(--rm-btn-destructive-bg)}._destructive_43ihb_126:hover{background:var(--rm-btn-destructive-hover)}._wrapper_1bfkp_1{position:relative;display:inline-block}._trigger_1bfkp_6{cursor:pointer;display:inline-block}._popover_1bfkp_11{position:absolute;background-color:#fff;color:#374151;padding:1rem;border-radius:8px;border:1px solid #e5e7eb;z-index:900;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;min-width:200px;animation:_fadeIn_1bfkp_1 .15s ease-out}._popover_1bfkp_11._draggable_1bfkp_24{cursor:move;-webkit-user-select:none;user-select:none}._popover_1bfkp_11._bottom_1bfkp_30{top:calc(100% + .5rem);left:50%;transform:translate(-50%);transform-origin:top center}._popover_1bfkp_11._top_1bfkp_37{bottom:calc(100% + .5rem);left:50%;transform:translate(-50%);transform-origin:bottom center}._popover_1bfkp_11._left_1bfkp_44{right:calc(100% + .5rem);top:50%;transform:translateY(-50%);transform-origin:center right}._popover_1bfkp_11._right_1bfkp_51{left:calc(100% + .5rem);top:50%;transform:translateY(-50%);transform-origin:center left}@keyframes _fadeIn_1bfkp_1{0%{opacity:0;transform:scale(.95);margin-top:-5px}to{opacity:1;transform:scale(1);margin-top:0}}._toast_15h14_1{display:flex;align-items:center;gap:12px;min-width:300px;max-width:400px;padding:12px 16px;border-radius:6px;background:#fff;box-shadow:0 4px 12px #00000026;margin-bottom:10px;pointer-events:auto;overflow:hidden;animation:_slideIn_15h14_1 .3s ease-out;transition:all .3s ease-in-out;position:relative}._toast_15h14_1._draggable_15h14_19{cursor:move;-webkit-user-select:none;user-select:none}._toast_15h14_1._exiting_15h14_24{opacity:0;transform:scale(.95);margin-bottom:-40px}._toast_15h14_1._success_15h14_31{border-left:4px solid #10b981}._toast_15h14_1._error_15h14_35{border-left:4px solid #ef4444}._toast_15h14_1._warning_15h14_39{border-left:4px solid #f59e0b}._toast_15h14_1._info_15h14_43{border-left:4px solid #3b82f6}._icon_15h14_47{font-weight:700;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;flex-shrink:0}._toast_15h14_1._success_15h14_31 ._icon_15h14_47{background-color:#ecfdf5;color:#059669}._toast_15h14_1._error_15h14_35 ._icon_15h14_47{background-color:#fef2f2;color:#dc2626}._toast_15h14_1._warning_15h14_39 ._icon_15h14_47{background-color:#fffbeb;color:#d97706}._toast_15h14_1._info_15h14_43 ._icon_15h14_47{background-color:#eff6ff;color:#2563eb}._content_15h14_78{flex:1;font-size:14px;color:#374151;line-height:1.4}._closeBtn_15h14_85{background:transparent;border:none;cursor:pointer;font-size:18px;color:#4b5563;padding:0;display:flex;font-weight:700;align-items:center;justify-content:center;width:24px;height:24px}._closeBtn_15h14_85:hover{color:#111827;background-color:#0000000d;border-radius:4px}@keyframes _slideIn_15h14_1{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}._container_15h14_119{position:fixed;z-index:9999;pointer-events:none;display:flex;flex-direction:column;padding:16px;gap:8px}._container_15h14_119._top-left_15h14_129{top:0;left:0;align-items:flex-start}._container_15h14_119._top-right_15h14_135{top:0;right:0;align-items:flex-end}._container_15h14_119._top-center_15h14_141{top:0;left:50%;transform:translate(-50%);align-items:center}._container_15h14_119._bottom-left_15h14_148{bottom:0;left:0;align-items:flex-start;flex-direction:column-reverse}._container_15h14_119._bottom-right_15h14_155{bottom:0;right:0;align-items:flex-end;flex-direction:column-reverse}._container_15h14_119._bottom-center_15h14_162{bottom:0;left:50%;transform:translate(-50%);align-items:center;flex-direction:column-reverse}._container_15h14_119._bottom-left_15h14_148 ._toast_15h14_1,._container_15h14_119._bottom-right_15h14_155 ._toast_15h14_1,._container_15h14_119._bottom-center_15h14_162 ._toast_15h14_1{margin-bottom:0;margin-top:10px;animation:_slideInBottom_15h14_1 .3s ease-out}._container_15h14_119._bottom-left_15h14_148 ._toast_15h14_1._exiting_15h14_24,._container_15h14_119._bottom-right_15h14_155 ._toast_15h14_1._exiting_15h14_24,._container_15h14_119._bottom-center_15h14_162 ._toast_15h14_1._exiting_15h14_24{margin-top:-40px;margin-bottom:0}@keyframes _slideInBottom_15h14_1{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}._wrapper_1dham_1{position:relative;display:inline-block}._tooltip_1dham_6{position:absolute;background-color:#111827;color:#fff;padding:.5rem .75rem;border-radius:4px;font-size:.875rem;z-index:1000;white-space:nowrap;pointer-events:none;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;opacity:0;animation:_fadeIn_1dham_1 .2s forwards}._tooltip_1dham_6._top_1dham_22{bottom:100%;left:50%;transform:translate(-50%) translateY(-.5rem)}._tooltip_1dham_6._bottom_1dham_28{top:100%;left:50%;transform:translate(-50%) translateY(.5rem)}._tooltip_1dham_6._left_1dham_34{right:100%;top:50%;transform:translateY(-50%) translate(-.5rem)}._tooltip_1dham_6._right_1dham_40{left:100%;top:50%;transform:translateY(-50%) translate(.5rem)}@keyframes _fadeIn_1dham_1{to{opacity:1}}