@temboplus/frontend-react-core 0.1.3-beta.2 → 0.1.3-beta.21

package/dist/features/notifications/tembo-notify.d.ts

@@ -1,124 +1,51 @@
 import { ToastOptions, ToastContent, Id } from 'react-toastify';
-import { TemboColorPalette, TemboUIConstants } from '../../theme/index.js';
-export interface NotifyOptions {
-    /**
-     * Duration in milliseconds before auto-closing (default: 4000 for most, 6000 for errors)
-     * Set to false to prevent auto-close
-     */
+import { ColorPalette } from '../../theme/tokens/colors.js';
+import { UIConstants } from '../../theme/tokens/constants.js';
+/**
+ * Message input - can be simple string or object with title and description
+ */
+export type NotifyMessage = ToastContent | {
+    title?: string;
+    description?: string;
+};
+export interface NotifyOptions extends Omit<ToastOptions, 'type'> {
+    toastId?: Id;
     duration?: number | false;
-    /**
-     * Custom position for the notification
-     */
-    position?: ToastOptions['position'];
-    /**
-     * Callback when notification is clicked
-     */
     onClick?: () => void;
-    /**
-     * Callback when notification is closed
-     */
     onClose?: () => void;
 }
 /**
  * TemboNotify - Unified notification system
- *
- * Wraps react-toastify with consistent styling and behavior
- * aligned with Tembo's design system.
- *
- * Note: This class needs to be initialized with theme tokens before use.
- * Call TemboNotify.init(colors, constants) in your app setup.
- *
- * @example
- * ```typescript
- * // In your app setup (e.g., App.tsx)
- * const { colors, constants } = useTemboTheme();
- * useEffect(() => {
- *   TemboNotify.init(colors, constants);
- * }, [colors, constants]);
- *
- * // Then use anywhere in your app
- * TemboNotify.success('Payment sent successfully!');
- *
- * // With options
- * TemboNotify.error('Payment failed', {
- *   duration: 8000,
- *   onClick: () => console.log('Error clicked')
- * });
- *
- * // Loading with promise
- * const loadingId = TemboNotify.loading('Processing payment...');
- * await processPayment();
- * TemboNotify.success('Payment complete!', { id: loadingId });
- *
- * // Promise-based
- * TemboNotify.promise(
- *   apiCall(),
- *   {
- *     pending: 'Processing...',
- *     success: 'Done!',
- *     error: 'Failed!'
- *   }
- * );
- * ```
  */
 export declare class TemboNotify {
     private static configs;
-    /**
-     * Initialize TemboNotify with theme tokens
-     * Must be called before using any notification methods
-     */
-    static init(colors: TemboColorPalette, constants: TemboUIConstants): void;
-    /**
-     * Get current toast configs, throws if not initialized
-     */
+    static init(colors: ColorPalette, constants: UIConstants): void;
     private static getConfigs;
     /**
-     * Display a success notification
-     */
-    static success(message: ToastContent, options?: NotifyOptions): Id;
-    /**
-     * Display an error notification
-     */
-    static error(message: ToastContent, options?: NotifyOptions): Id;
-    /**
-     * Display a warning notification
-     */
-    static warning(message: ToastContent, options?: NotifyOptions): Id;
-    /**
-     * Display an info notification
-     */
-    static info(message: ToastContent, options?: NotifyOptions): Id;
-    /**
-     * Display a loading notification
-     * Returns an ID that can be used to update/dismiss it
-     */
-    static loading(message: ToastContent, options?: Omit<NotifyOptions, 'duration'>): Id;
-    /**
-     * Update an existing notification
-     */
+     * Format message content for display
+     * - title only → bold
+     * - description only → weight 500
+     * - title + description → stacked
+     */
+    private static formatMessage;
+    private static buildOptions;
+    private static getSuccessConfig;
+    private static getErrorConfig;
+    private static getWarningConfig;
+    private static getInfoConfig;
+    private static getLoadingConfig;
+    static success(message: NotifyMessage, options?: NotifyOptions): Id;
+    static error(message: NotifyMessage, options?: NotifyOptions): Id;
+    static warning(message: NotifyMessage, options?: NotifyOptions): Id;
+    static info(message: NotifyMessage, options?: NotifyOptions): Id;
+    static loading(message: NotifyMessage, options?: Omit<NotifyOptions, 'duration'>): Id;
     static update(id: Id, options: {
         type?: 'success' | 'error' | 'warning' | 'info';
-        message?: ToastContent;
+        message?: NotifyMessage;
         autoClose?: number | false;
+        render?: ToastContent;
     }): void;
-    /**
-     * Dismiss a specific notification by ID
-     */
-    static dismiss(id: Id): void;
-    /**
-     * Dismiss all notifications
-     */
+    static dismiss(id?: Id): void;
     static dismissAll(): void;
-    /**
-     * Check if a notification is active
-     */
     static isActive(id: Id): boolean;
-    /**
-     * Handle promise-based operations with notifications
-     */
-    static promise<T>(promise: Promise<T>, messages: {
-        pending: ToastContent;
-        success: ToastContent<T>;
-        error: ToastContent | ((error: any) => ToastContent);
-    }, options?: NotifyOptions): Promise<T>;
 }

package/dist/features/notifications/tembo-notify.js

@@ -1,149 +1,140 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { toast } from 'react-toastify';
 import { buildToastConfigs } from './toast-config.js';
+/**
+ * Simple fallback config when TemboNotify.init hasn't been called yet.
+ */
+const FALLBACK_BASE_CONFIG = {
+    position: 'top-right',
+    autoClose: 4000, // ~4 seconds for everything except loading
+    hideProgressBar: true,
+    closeOnClick: true,
+    pauseOnHover: true,
+    draggable: true,
+    closeButton: false,
+};
 /**
  * TemboNotify - Unified notification system
- *
- * Wraps react-toastify with consistent styling and behavior
- * aligned with Tembo's design system.
- *
- * Note: This class needs to be initialized with theme tokens before use.
- * Call TemboNotify.init(colors, constants) in your app setup.
- *
- * @example
- * ```typescript
- * // In your app setup (e.g., App.tsx)
- * const { colors, constants } = useTemboTheme();
- * useEffect(() => {
- *   TemboNotify.init(colors, constants);
- * }, [colors, constants]);
- *
- * // Then use anywhere in your app
- * TemboNotify.success('Payment sent successfully!');
- *
- * // With options
- * TemboNotify.error('Payment failed', {
- *   duration: 8000,
- *   onClick: () => console.log('Error clicked')
- * });
- *
- * // Loading with promise
- * const loadingId = TemboNotify.loading('Processing payment...');
- * await processPayment();
- * TemboNotify.success('Payment complete!', { id: loadingId });
- *
- * // Promise-based
- * TemboNotify.promise(
- *   apiCall(),
- *   {
- *     pending: 'Processing...',
- *     success: 'Done!',
- *     error: 'Failed!'
- *   }
- * );
- * ```
  */
 export class TemboNotify {
-    /**
-     * Initialize TemboNotify with theme tokens
-     * Must be called before using any notification methods
-     */
     static init(colors, constants) {
         this.configs = buildToastConfigs(colors, constants);
     }
-    /**
-     * Get current toast configs, throws if not initialized
-     */
     static getConfigs() {
-        if (!this.configs) {
-            throw new Error('TemboNotify not initialized. Call TemboNotify.init(colors, constants) before using notifications.');
-        }
         return this.configs;
     }
     /**
-     * Display a success notification
+     * Format message content for display
+     * - title only → bold
+     * - description only → weight 500
+     * - title + description → stacked
      */
-    static success(message, options) {
-        var _a;
+    static formatMessage(message) {
+        if (message && typeof message === 'object' && !('$$typeof' in message)) {
+            const hasTitle = !!message.title;
+            const hasDescription = !!message.description;
+            if (hasTitle && hasDescription) {
+                return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsx("div", { style: { fontWeight: 500, fontSize: 14 }, children: message.title }), _jsx("div", { style: { fontSize: 13, fontWeight: 400, opacity: 0.96 }, children: message.description })] }));
+            }
+            if (hasTitle && !hasDescription) {
+                return (_jsx("div", { style: { fontWeight: 500, fontSize: 14 }, children: message.title }));
+            }
+            if (!hasTitle && hasDescription) {
+                return (_jsx("div", { style: { fontSize: 13, fontWeight: 500 }, children: message.description }));
+            }
+            // Empty object case
+            return '';
+        }
+        return message;
+    }
+    static buildOptions(baseConfig, options) {
+        const _a = options || {}, { duration, toastId, onClick, onClose } = _a, restOptions = __rest(_a, ["duration", "toastId", "onClick", "onClose"]);
+        const effectiveBase = baseConfig !== null && baseConfig !== void 0 ? baseConfig : FALLBACK_BASE_CONFIG;
+        return Object.assign(Object.assign(Object.assign({}, effectiveBase), restOptions), { // includes custom icon if provided
+            toastId, autoClose: duration !== undefined
+                ? duration || false
+                : effectiveBase.autoClose, onClick,
+            onClose });
+    }
+    static getSuccessConfig() {
+        var _a, _b;
         const configs = this.getConfigs();
-        return toast.success(message, Object.assign(Object.assign({}, configs.successConfig), { autoClose: (_a = options === null || options === void 0 ? void 0 : options.duration) !== null && _a !== void 0 ? _a : configs.successConfig.autoClose, position: options === null || options === void 0 ? void 0 : options.position, onClick: options === null || options === void 0 ? void 0 : options.onClick, onClose: options === null || options === void 0 ? void 0 : options.onClose }));
+        return (_b = (_a = configs === null || configs === void 0 ? void 0 : configs.successConfig) !== null && _a !== void 0 ? _a : configs === null || configs === void 0 ? void 0 : configs.baseConfig) !== null && _b !== void 0 ? _b : undefined;
     }
-    /**
-     * Display an error notification
-     */
-    static error(message, options) {
-        var _a;
+    static getErrorConfig() {
+        var _a, _b;
         const configs = this.getConfigs();
-        return toast.error(message, Object.assign(Object.assign({}, configs.errorConfig), { autoClose: (_a = options === null || options === void 0 ? void 0 : options.duration) !== null && _a !== void 0 ? _a : configs.errorConfig.autoClose, position: options === null || options === void 0 ? void 0 : options.position, onClick: options === null || options === void 0 ? void 0 : options.onClick, onClose: options === null || options === void 0 ? void 0 : options.onClose }));
+        return (_b = (_a = configs === null || configs === void 0 ? void 0 : configs.errorConfig) !== null && _a !== void 0 ? _a : configs === null || configs === void 0 ? void 0 : configs.baseConfig) !== null && _b !== void 0 ? _b : undefined;
     }
-    /**
-     * Display a warning notification
-     */
-    static warning(message, options) {
-        var _a;
+    static getWarningConfig() {
+        var _a, _b;
         const configs = this.getConfigs();
-        return toast.warning(message, Object.assign(Object.assign({}, configs.warningConfig), { autoClose: (_a = options === null || options === void 0 ? void 0 : options.duration) !== null && _a !== void 0 ? _a : configs.warningConfig.autoClose, position: options === null || options === void 0 ? void 0 : options.position, onClick: options === null || options === void 0 ? void 0 : options.onClick, onClose: options === null || options === void 0 ? void 0 : options.onClose }));
+        return (_b = (_a = configs === null || configs === void 0 ? void 0 : configs.warningConfig) !== null && _a !== void 0 ? _a : configs === null || configs === void 0 ? void 0 : configs.baseConfig) !== null && _b !== void 0 ? _b : undefined;
     }
-    /**
-     * Display an info notification
-     */
-    static info(message, options) {
-        var _a;
+    static getInfoConfig() {
+        var _a, _b;
         const configs = this.getConfigs();
-        return toast.info(message, Object.assign(Object.assign({}, configs.infoConfig), { autoClose: (_a = options === null || options === void 0 ? void 0 : options.duration) !== null && _a !== void 0 ? _a : configs.infoConfig.autoClose, position: options === null || options === void 0 ? void 0 : options.position, onClick: options === null || options === void 0 ? void 0 : options.onClick, onClose: options === null || options === void 0 ? void 0 : options.onClose }));
+        return (_b = (_a = configs === null || configs === void 0 ? void 0 : configs.infoConfig) !== null && _a !== void 0 ? _a : configs === null || configs === void 0 ? void 0 : configs.baseConfig) !== null && _b !== void 0 ? _b : undefined;
     }
-    /**
-     * Display a loading notification
-     * Returns an ID that can be used to update/dismiss it
-     */
-    static loading(message, options) {
+    static getLoadingConfig() {
+        var _a, _b;
         const configs = this.getConfigs();
-        return toast.loading(message, Object.assign(Object.assign({}, configs.loadingConfig), { position: options === null || options === void 0 ? void 0 : options.position, onClick: options === null || options === void 0 ? void 0 : options.onClick, onClose: options === null || options === void 0 ? void 0 : options.onClose }));
+        return (_b = (_a = configs === null || configs === void 0 ? void 0 : configs.loadingConfig) !== null && _a !== void 0 ? _a : configs === null || configs === void 0 ? void 0 : configs.baseConfig) !== null && _b !== void 0 ? _b : undefined;
     }
-    /**
-     * Update an existing notification
-     */
-    static update(id, options) {
+    static success(message, options) {
+        const content = this.formatMessage(message);
+        const toastOptions = this.buildOptions(this.getSuccessConfig(), options);
+        return toast.success(content, toastOptions);
+    }
+    static error(message, options) {
+        const content = this.formatMessage(message);
+        const toastOptions = this.buildOptions(this.getErrorConfig(), options);
+        return toast.error(content, toastOptions);
+    }
+    static warning(message, options) {
+        const content = this.formatMessage(message);
+        const toastOptions = this.buildOptions(this.getWarningConfig(), options);
+        return toast.warning(content, toastOptions);
+    }
+    static info(message, options) {
+        const content = this.formatMessage(message);
+        const toastOptions = this.buildOptions(this.getInfoConfig(), options);
+        return toast.info(content, toastOptions);
+    }
+    static loading(message, options) {
         var _a;
+        const content = this.formatMessage(message);
+        const _b = options || {}, { toastId, onClick, onClose } = _b, restOptions = __rest(_b, ["toastId", "onClick", "onClose"]);
+        const baseConfig = (_a = this.getLoadingConfig()) !== null && _a !== void 0 ? _a : FALLBACK_BASE_CONFIG;
+        return toast.loading(content, Object.assign(Object.assign(Object.assign({}, baseConfig), restOptions), { toastId,
+            onClick,
+            onClose }));
+    }
+    static update(id, options) {
+        var _a, _b;
         const configs = this.getConfigs();
-        const config = options.type ? {
-            success: configs.successConfig,
-            error: configs.errorConfig,
-            warning: configs.warningConfig,
-            info: configs.infoConfig,
-        }[options.type] : undefined;
-        toast.update(id, Object.assign({ render: options.message, type: options.type, isLoading: false, autoClose: (_a = options.autoClose) !== null && _a !== void 0 ? _a : config === null || config === void 0 ? void 0 : config.autoClose }, config));
+        const typeConfig = options.type && configs
+            ? {
+                success: configs.successConfig,
+                error: configs.errorConfig,
+                warning: configs.warningConfig,
+                info: configs.infoConfig,
+            }[options.type]
+            : undefined;
+        const content = options.message
+            ? this.formatMessage(options.message)
+            : options.render;
+        toast.update(id, Object.assign({ render: content, type: options.type, isLoading: false, autoClose: (_b = (_a = options.autoClose) !== null && _a !== void 0 ? _a : typeConfig === null || typeConfig === void 0 ? void 0 : typeConfig.autoClose) !== null && _b !== void 0 ? _b : FALLBACK_BASE_CONFIG.autoClose }, (typeConfig !== null && typeConfig !== void 0 ? typeConfig : {})));
     }
-    /**
-     * Dismiss a specific notification by ID
-     */
     static dismiss(id) {
         toast.dismiss(id);
     }
-    /**
-     * Dismiss all notifications
-     */
     static dismissAll() {
         toast.dismiss();
     }
-    /**
-     * Check if a notification is active
-     */
     static isActive(id) {
         return toast.isActive(id);
     }
-    /**
-     * Handle promise-based operations with notifications
-     */
-    static promise(promise, messages, options) {
-        var _a, _b;
-        const configs = this.getConfigs();
-        return toast.promise(promise, {
-            pending: Object.assign({ render: messages.pending }, configs.loadingConfig),
-            success: Object.assign(Object.assign({ render: messages.success }, configs.successConfig), { autoClose: (_a = options === null || options === void 0 ? void 0 : options.duration) !== null && _a !== void 0 ? _a : configs.successConfig.autoClose }),
-            error: Object.assign(Object.assign({ render: messages.error }, configs.errorConfig), { autoClose: (_b = options === null || options === void 0 ? void 0 : options.duration) !== null && _b !== void 0 ? _b : configs.errorConfig.autoClose }),
-        }, {
-            position: options === null || options === void 0 ? void 0 : options.position,
-        });
-    }
 }
 TemboNotify.configs = null;

package/dist/features/notifications/toast-config.d.ts

@@ -1,15 +1,13 @@
 import { ToastOptions } from 'react-toastify';
-import { TemboColorPalette, TemboUIConstants } from '../../theme/index.js';
-/**
- * Build toast configurations from theme tokens
- * This function is called with theme values to generate toast configs
- */
-export declare const buildToastConfigs: (colors: TemboColorPalette, constants: TemboUIConstants) => {
+import { ColorPalette } from '../../theme/tokens/colors.js';
+import { UIConstants } from '../../theme/tokens/constants.js';
+export declare const buildToastConfigs: (colors: ColorPalette, constants: UIConstants) => {
     loadingConfig: ToastOptions<unknown>;
     infoConfig: ToastOptions<unknown>;
     warningConfig: ToastOptions<unknown>;
     errorConfig: ToastOptions<unknown>;
     successConfig: ToastOptions<unknown>;
     baseConfig: ToastOptions<unknown>;
+    colors: ColorPalette;
 };
 export type ToastConfigs = ReturnType<typeof buildToastConfigs>;

package/dist/features/notifications/toast-config.js

@@ -1,47 +1,53 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { CheckCircleOutlined, CloseCircleOutlined, ExclamationCircleOutlined, InfoCircleOutlined, } from '@ant-design/icons';
-/**
- * Build toast configurations from theme tokens
- * This function is called with theme values to generate toast configs
- */
+import { CheckCircleOutlined, CloseCircleOutlined, ExclamationCircleOutlined, InfoCircleOutlined, LoadingOutlined, } from '@ant-design/icons';
 export const buildToastConfigs = (colors, constants) => {
     /**
-     * Common toast configuration aligned with Tembo theme
+     * Base = WHITE background for everything unless overridden
      */
     const baseConfig = {
         position: 'top-right',
         autoClose: 4000,
-        hideProgressBar: false,
+        hideProgressBar: true,
         closeOnClick: true,
         pauseOnHover: true,
         draggable: true,
-        progress: undefined,
+        closeButton: false,
         style: {
-            fontFamily: constants.typography.fontFamily,
-            fontSize: constants.typography.fontSize.base,
-            borderRadius: constants.radius.base,
+            fontFamily: constants.typography.fontFamily.base,
+            fontSize: 14,
+            borderRadius: 10,
+            padding: '10px 14px',
+            boxShadow: '0 12px 24px rgba(15, 23, 42, 0.12)',
+            border: 'none',
+            minHeight: 56,
+            backgroundColor: colors.surface.overlay,
+            color: colors.text.primary,
+            display: 'flex',
+            alignItems: 'center',
+            gap: 8,
         },
     };
     /**
-     * Success notification configuration
+     * SUCCESS → success colors
      */
-    const successConfig = Object.assign(Object.assign({}, baseConfig), { icon: _jsx(CheckCircleOutlined, { style: { fontSize: 20, color: colors.success.main } }), style: Object.assign(Object.assign({}, baseConfig.style), { border: `1px solid ${colors.success.border}` }) });
+    const successConfig = Object.assign(Object.assign({}, baseConfig), { icon: (_jsx(CheckCircleOutlined, { style: { fontSize: 18, color: colors.semantic.success.main } })), style: Object.assign(Object.assign({}, baseConfig.style), { backgroundColor: colors.semantic.success.subtle, color: colors.semantic.success.main }), className: 'toast-success' });
     /**
-     * Error notification configuration
+     * ERROR → error colors
      */
-    const errorConfig = Object.assign(Object.assign({}, baseConfig), { icon: _jsx(CloseCircleOutlined, { style: { fontSize: 20, color: colors.error.main } }), style: Object.assign(Object.assign({}, baseConfig.style), { border: `1px solid ${colors.error.border}` }), autoClose: 6000 });
+    const errorConfig = Object.assign(Object.assign({}, baseConfig), { icon: (_jsx(CloseCircleOutlined, { style: { fontSize: 18, color: colors.semantic.error.main } })), style: Object.assign(Object.assign({}, baseConfig.style), { backgroundColor: colors.semantic.error.subtle, color: colors.semantic.error.main }), className: 'toast-error' });
     /**
-     * Warning notification configuration
+     * WARNING → warning colors
      */
-    const warningConfig = Object.assign(Object.assign({}, baseConfig), { icon: _jsx(ExclamationCircleOutlined, { style: { fontSize: 20, color: colors.warning.main } }), style: Object.assign(Object.assign({}, baseConfig.style), { border: `1px solid ${colors.warning.border}` }) });
+    const warningConfig = Object.assign(Object.assign({}, baseConfig), { icon: (_jsx(ExclamationCircleOutlined, { style: { fontSize: 18, color: colors.semantic.warning.main } })), style: Object.assign(Object.assign({}, baseConfig.style), { backgroundColor: colors.semantic.warning.subtle, color: colors.semantic.warning.main }), className: 'toast-warning' });
     /**
-     * Info notification configuration
+     * INFO → *white background*, blue accents only
+     * (no colored background)
      */
-    const infoConfig = Object.assign(Object.assign({}, baseConfig), { icon: _jsx(InfoCircleOutlined, { style: { fontSize: 20, color: colors.info.main } }), style: Object.assign(Object.assign({}, baseConfig.style), { border: `1px solid ${colors.info.border}` }) });
+    const infoConfig = Object.assign(Object.assign({}, baseConfig), { icon: (_jsx(InfoCircleOutlined, { style: { fontSize: 18, color: colors.text.primary } })), style: Object.assign(Object.assign({}, baseConfig.style), { backgroundColor: colors.surface.overlay, color: colors.text.primary }), className: 'toast-info' });
     /**
-     * Loading notification configuration
+     * LOADING (unchanged)
      */
-    const loadingConfig = Object.assign(Object.assign({}, baseConfig), { autoClose: false, closeButton: false });
+    const loadingConfig = Object.assign(Object.assign({}, baseConfig), { icon: (_jsx(LoadingOutlined, { style: { fontSize: 18, color: colors.neutral[4] } })), style: Object.assign(Object.assign({}, baseConfig.style), { backgroundColor: colors.surface.overlay, color: colors.text.primary }), autoClose: false, closeButton: false, hideProgressBar: true, className: 'toast-loading' });
     return {
         loadingConfig,
         infoConfig,
@@ -49,5 +55,6 @@ export const buildToastConfigs = (colors, constants) => {
         errorConfig,
         successConfig,
         baseConfig,
+        colors,
     };
 };

package/dist/features/notifications/toast-container.d.ts

@@ -1,9 +1,19 @@
 import React from 'react';
 import { ToastContainerProps as RTToastContainerProps } from 'react-toastify';
-export type TemboToastContainerProps = RTToastContainerProps;
+export interface TemboToastContainerProps extends Omit<RTToastContainerProps, 'closeButton' | 'hideProgressBar'> {
+    /**
+     * Show the X close button on each toast
+     * @default false
+     */
+    showCloseButton?: boolean;
+    /**
+     * Show the progress bar at the bottom of each toast
+     * @default false
+     */
+    showProgressBar?: boolean;
+}
 /**
- * Toast container that automatically initializes TemboNotify with current theme
- * Reinitializes when theme changes to respect color/constant overrides
+ * Toast container with Tembo styling
  */
 declare const TemboToastContainer: React.FC<TemboToastContainerProps>;
 export default TemboToastContainer;

package/dist/features/notifications/toast-container.js

@@ -1,18 +1,89 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect } from 'react';
-import { ToastContainer } from 'react-toastify';
-import { useTemboTheme } from '../../theme/index.js';
+import { ToastContainer, } from 'react-toastify';
 import { TemboNotify } from './tembo-notify.js';
+import { useNewTemboTheme } from '../../theme/theme-provider.js';
 /**
- * Toast container that automatically initializes TemboNotify with current theme
- * Reinitializes when theme changes to respect color/constant overrides
+ * Toast container with Tembo styling
  */
-const TemboToastContainer = (props) => {
-    const { colors, constants } = useTemboTheme();
-    // Initialize/update TemboNotify whenever theme changes
+const TemboToastContainer = (_a) => {
+    var { showCloseButton = false, showProgressBar = false } = _a, rest = __rest(_a, ["showCloseButton", "showProgressBar"]);
+    const { colors, constants } = useNewTemboTheme();
     useEffect(() => {
         TemboNotify.init(colors, constants);
     }, [colors, constants]);
-    return _jsx(ToastContainer, Object.assign({}, props));
+    return (_jsxs(_Fragment, { children: [_jsx(ToastContainer, Object.assign({ closeButton: showCloseButton, hideProgressBar: !showProgressBar }, rest)), _jsx("style", { children: `
+                .Toastify__toast {
+                    font-family: ${constants.typography.fontFamily};
+                    line-height: 1.5;
+                    display: flex;
+                    align-items: center; /* center icon + content */
+                }
+
+                .Toastify__toast-body {
+                    padding: 0;
+                    margin: 0;
+                    display: flex;
+                    align-items: flex-start;
+                }
+
+                .Toastify__toast-icon {
+                    width: 18px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    margin-inline-end: 6px; /* tighter spacing */
+                }
+
+                .Toastify__progress-bar {
+                    display: none;
+                }
+
+                .Toastify__close-button {
+                    opacity: 0.5;
+                    transition: opacity 0.2s ease;
+                }
+
+                .Toastify__close-button:hover {
+                    opacity: 1;
+                }
+
+                /* Force progress bar hidden in case someone enables it unintentionally */
+                .Toastify__progress-bar {
+                    display: none;
+                }
+
+                /* Smooth entrance animation */
+                @keyframes toastSlideIn {
+                    from {
+                        transform: translateX(110%);
+                        opacity: 0;
+                    }
+                    to {
+                        transform: translateX(0);
+                        opacity: 1;
+                    }
+                }
+
+                .Toastify__toast--top-right {
+                    animation: toastSlideIn 0.3s ease-out;
+                }
+
+                /* Optional: full-width mobile behaviour */
+                @media (max-width: 480px) {
+                    .Toastify__toast-container--top-right {
+                        right: 0;
+                        left: 0;
+                        padding: 0;
+                        width: 100vw;
+                    }
+
+                    .Toastify__toast {
+                        margin-bottom: 0;
+                        border-radius: 0;
+                    }
+                }
+            ` })] }));
 };
 export default TemboToastContainer;

package/dist/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("./theme-provider-Dqvy24OD.js"),r=require("@ebay/nice-modal-react"),t=require("react"),s=require("react-toastify");require("lodash");var i=require("./tembo-notify-D-uOV3t0.js");function o(e){return e&&e.__esModule?e:{default:e}}require("antd"),require("./InfoCircleOutlined-B7d2aRfV.js"),require("./ZoomOutOutlined-BY_CCwq7.js");var n=o(r);const u=r=>e.jsxRuntimeExports.jsx(n.default.Provider,{children:r.children}),c=r=>{const{colors:o,constants:n}=e.useTemboTheme();return t.useEffect(()=>{i.TemboNotify.init(o,n)},[o,n]),e.jsxRuntimeExports.jsx(s.ToastContainer,Object.assign({},r))};exports.TemboUIProviders=({children:r,colors:t,constants:s,themeOverrides:i})=>e.jsxRuntimeExports.jsx(e.TemboThemeProvider,{colors:t,constants:s,themeOverrides:i,children:e.jsxRuntimeExports.jsxs(u,{children:[r,e.jsxRuntimeExports.jsx(c,{})]})});
+"use strict";var n=require("./theme-provider-CCkR2IcZ.js"),e=require("@ebay/nice-modal-react"),t=require("tslib"),s=require("react"),i=require("react-toastify"),o=require("./tembo-notify-C09rXp6m.js");function r(n){return n&&n.__esModule?n:{default:n}}require("antd"),require("./InfoCircleOutlined-DR9DmuN-.js"),require("./CloseCircleOutlined-CMilRURi.js");var a=r(e);const l=e=>n.jsxRuntimeExports.jsx(a.default.Provider,{children:e.children}),d=e=>{var{showCloseButton:r=!1,showProgressBar:a=!1}=e,l=t.__rest(e,["showCloseButton","showProgressBar"]);const{colors:d,constants:c}=n.useNewTemboTheme();return s.useEffect(()=>{o.TemboNotify.init(d,c)},[d,c]),n.jsxRuntimeExports.jsxs(n.jsxRuntimeExports.Fragment,{children:[n.jsxRuntimeExports.jsx(i.ToastContainer,Object.assign({closeButton:r,hideProgressBar:!a},l)),n.jsxRuntimeExports.jsx("style",{children:`\n                .Toastify__toast {\n                    font-family: ${c.typography.fontFamily};\n                    line-height: 1.5;\n                    display: flex;\n                    align-items: center; /* center icon + content */\n                }\n\n                .Toastify__toast-body {\n                    padding: 0;\n                    margin: 0;\n                    display: flex;\n                    align-items: flex-start;\n                }\n\n                .Toastify__toast-icon {\n                    width: 18px;\n                    display: flex;\n                    align-items: center;\n                    justify-content: center;\n                    margin-inline-end: 6px; /* tighter spacing */\n                }\n\n                .Toastify__progress-bar {\n                    display: none;\n                }\n\n                .Toastify__close-button {\n                    opacity: 0.5;\n                    transition: opacity 0.2s ease;\n                }\n\n                .Toastify__close-button:hover {\n                    opacity: 1;\n                }\n\n                /* Force progress bar hidden in case someone enables it unintentionally */\n                .Toastify__progress-bar {\n                    display: none;\n                }\n\n                /* Smooth entrance animation */\n                @keyframes toastSlideIn {\n                    from {\n                        transform: translateX(110%);\n                        opacity: 0;\n                    }\n                    to {\n                        transform: translateX(0);\n                        opacity: 1;\n                    }\n                }\n\n                .Toastify__toast--top-right {\n                    animation: toastSlideIn 0.3s ease-out;\n                }\n\n                /* Optional: full-width mobile behaviour */\n                @media (max-width: 480px) {\n                    .Toastify__toast-container--top-right {\n                        right: 0;\n                        left: 0;\n                        padding: 0;\n                        width: 100vw;\n                    }\n\n                    .Toastify__toast {\n                        margin-bottom: 0;\n                        border-radius: 0;\n                    }\n                }\n            `})]})};exports.TemboUIProviders=({children:e,mode:t,antdThemeOverrides:s})=>n.jsxRuntimeExports.jsx(n.TemboThemeProvider,{mode:t,antdThemeOverrides:s,children:n.jsxRuntimeExports.jsxs(l,{children:[e,n.jsxRuntimeExports.jsx(d,{})]})});
 //# sourceMappingURL=index.cjs.js.map