@papernote/ui 1.14.1 → 2.0.1

package/dist/index.esm.js

@@ -1293,7 +1293,7 @@ const Textarea = forwardRef(({ label, helperText, validationState, validationMes
         }
     };
     return (jsxs("div", { className: "w-full", children: [label && (jsxs("label", { htmlFor: textareaId, className: "label", children: [label, props.required && jsx("span", { className: "text-error-500 ml-1", children: "*" })] })), jsxs("div", { className: "relative", children: [jsx("textarea", { ref: textareaRef, id: textareaId, value: value, maxLength: maxLength, rows: autoExpand ? minRows : rows, enterKeyHint: enterKeyHint, className: `
-              block w-full border rounded-lg text-ink-800 placeholder-ink-400
+              block w-full border rounded-lg text-ink-800 placeholder:text-ink-400
               bg-white bg-subtle-grain transition-all duration-200
               focus:outline-none focus:ring-2 ${getResizeClass()}
               disabled:bg-paper-100 disabled:text-ink-400 disabled:cursor-not-allowed disabled:opacity-60
@@ -5089,7 +5089,7 @@ function Modal({ isOpen, onClose, title, children, size = 'md', showCloseButton
         return createPortal(jsx(BottomSheet, { isOpen: isOpen, onClose: onClose, title: title, height: mobileHeight, showHandle: mobileShowHandle, showCloseButton: showCloseButton, children: children }), document.body);
     }
     // Render as standard modal on desktop
-    const modalContent = (jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4 bg-ink-900 bg-opacity-50 backdrop-blur-sm animate-fade-in", onMouseDown: handleBackdropMouseDown, onClick: handleBackdropClick, children: jsxs("div", { ref: modalRef, className: `${sizeClasses$a[size]} w-full bg-white bg-subtle-grain rounded-xl shadow-2xl border border-paper-200 ${getAnimationClass()}`, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, tabIndex: -1, children: [jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-b border-paper-200", children: [jsx("h3", { id: titleId, className: "text-lg font-medium text-ink-900", children: title }), showCloseButton && (jsx("button", { onClick: onClose, className: "text-ink-400 hover:text-ink-600 transition-colors", "aria-label": "Close modal", children: jsx(X, { className: "h-5 w-5" }) }))] }), jsx("div", { className: `px-6 py-4 ${scrollable || maxHeight ? 'overflow-y-auto' : ''}`, style: {
+    const modalContent = (jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4 bg-ink-900/50 backdrop-blur-sm animate-fade-in", onMouseDown: handleBackdropMouseDown, onClick: handleBackdropClick, children: jsxs("div", { ref: modalRef, className: `${sizeClasses$a[size]} w-full bg-white bg-subtle-grain rounded-xl shadow-2xl border border-paper-200 ${getAnimationClass()}`, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, tabIndex: -1, children: [jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-b border-paper-200", children: [jsx("h3", { id: titleId, className: "text-lg font-medium text-ink-900", children: title }), showCloseButton && (jsx("button", { onClick: onClose, className: "text-ink-400 hover:text-ink-600 transition-colors", "aria-label": "Close modal", children: jsx(X, { className: "h-5 w-5" }) }))] }), jsx("div", { className: `px-6 py-4 ${scrollable || maxHeight ? 'overflow-y-auto' : ''}`, style: {
                         maxHeight: maxHeight || (scrollable ? 'calc(100vh - 200px)' : undefined),
                     }, children: children })] }) }));
     return createPortal(modalContent, document.body);
@@ -6237,7 +6237,7 @@ function Drawer({ isOpen, onClose, title, children, placement = 'right', size =
     if (!isOpen)
         return null;
     const isHorizontal = placement === 'left' || placement === 'right';
-    return (jsxs("div", { className: "fixed inset-0 z-50 flex", children: [showOverlay && (jsx("div", { className: "fixed inset-0 bg-ink-900 bg-opacity-50 backdrop-blur-sm animate-fade-in", onClick: handleOverlayClick, "aria-hidden": "true" })), jsxs("div", { className: `
+    return (jsxs("div", { className: "fixed inset-0 z-50 flex", children: [showOverlay && (jsx("div", { className: "fixed inset-0 bg-ink-900/50 backdrop-blur-sm animate-fade-in", onClick: handleOverlayClick, "aria-hidden": "true" })), jsxs("div", { className: `
           fixed ${placementClasses[placement]}
           ${sizeClasses$9[placement][size]}
           bg-white border-paper-200 shadow-2xl
@@ -6790,10 +6790,10 @@ function CommandPalette({ commands, open, onOpenChange, placeholder = 'Type a co
     };
     if (!open)
         return null;
-    return createPortal(jsxs("div", { className: "fixed inset-0 z-50 flex items-start justify-center pt-[20vh] animate-fade-in", children: [jsx("div", { className: "absolute inset-0 bg-ink-900 bg-opacity-50 backdrop-blur-sm", onClick: () => onOpenChange(false) }), jsxs("div", { className: "relative w-full max-w-2xl mx-4 bg-white rounded-xl shadow-2xl border border-paper-200 overflow-hidden animate-scale-in", children: [jsxs("div", { className: "flex items-center gap-3 px-4 py-3 border-b border-paper-200", children: [jsx(Search, { className: "h-5 w-5 text-ink-400" }), jsx("input", { ref: inputRef, type: "text", value: searchQuery, onChange: (e) => {
+    return createPortal(jsxs("div", { className: "fixed inset-0 z-50 flex items-start justify-center pt-[20vh] animate-fade-in", children: [jsx("div", { className: "absolute inset-0 bg-ink-900/50 backdrop-blur-sm", onClick: () => onOpenChange(false) }), jsxs("div", { className: "relative w-full max-w-2xl mx-4 bg-white rounded-xl shadow-2xl border border-paper-200 overflow-hidden animate-scale-in", children: [jsxs("div", { className: "flex items-center gap-3 px-4 py-3 border-b border-paper-200", children: [jsx(Search, { className: "h-5 w-5 text-ink-400" }), jsx("input", { ref: inputRef, type: "text", value: searchQuery, onChange: (e) => {
                                     setSearchQuery(e.target.value);
                                     setSelectedIndex(0);
-                                }, placeholder: placeholder, className: "flex-1 text-base text-ink-900 placeholder-ink-400 bg-transparent border-none outline-none" }), trigger && (jsx("kbd", { className: "hidden sm:inline-block px-2 py-1 text-xs font-mono text-ink-500 bg-paper-100 border border-paper-300 rounded", children: trigger }))] }), jsx("div", { ref: listRef, className: "max-h-[400px] overflow-y-auto py-2", children: flatCommands.length === 0 ? (jsx("div", { className: "px-4 py-8 text-center text-sm text-ink-500", children: "No commands found" })) : (jsxs(Fragment, { children: [Object.entries(grouped).map(([groupName, groupCommands]) => (jsxs("div", { children: [jsx("div", { className: "px-4 py-1.5 text-xs font-semibold text-ink-500 uppercase tracking-wider", children: groupName }), groupCommands.map((command) => {
+                                }, placeholder: placeholder, className: "flex-1 text-base text-ink-900 placeholder:text-ink-400 bg-transparent border-none outline-none" }), trigger && (jsx("kbd", { className: "hidden sm:inline-block px-2 py-1 text-xs font-mono text-ink-500 bg-paper-100 border border-paper-300 rounded", children: trigger }))] }), jsx("div", { ref: listRef, className: "max-h-[400px] overflow-y-auto py-2", children: flatCommands.length === 0 ? (jsx("div", { className: "px-4 py-8 text-center text-sm text-ink-500", children: "No commands found" })) : (jsxs(Fragment, { children: [Object.entries(grouped).map(([groupName, groupCommands]) => (jsxs("div", { children: [jsx("div", { className: "px-4 py-1.5 text-xs font-semibold text-ink-500 uppercase tracking-wider", children: groupName }), groupCommands.map((command) => {
                                             const globalIndex = flatCommands.indexOf(command);
                                             const isSelected = globalIndex === selectedIndex;
                                             return (jsxs("button", { "data-index": globalIndex, onClick: () => executeCommand(command), onMouseEnter: () => setSelectedIndex(globalIndex), className: `
@@ -7735,7 +7735,7 @@ const PasswordInput = forwardRef(({ value, onChange, label, placeholder = 'Enter
     }, [value, requirements]);
     return (jsxs("div", { className: className, children: [label && (jsxs("label", { className: "block text-sm font-medium text-ink-900 mb-1.5", children: [label, required && jsx("span", { className: "text-error-500 ml-1", children: "*" })] })), jsxs("div", { className: "relative", children: [jsx("input", { ref: inputRef, type: showPassword ? 'text' : 'password', value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, disabled: disabled, className: `
             w-full px-3 py-2 pr-10
-            text-sm text-ink-900 placeholder-ink-400
+            text-sm text-ink-900 placeholder:text-ink-400
             bg-white border rounded-lg
             focus:outline-none focus:ring-2 focus:ring-accent-400 focus:border-accent-400
             disabled:bg-paper-100 disabled:cursor-not-allowed
@@ -7844,7 +7844,7 @@ const MaskedInput = forwardRef(({ value, onChange, maskType = 'phone', customMas
     };
     return (jsxs("div", { className: className, children: [label && (jsxs("label", { className: "block text-sm font-medium text-ink-900 mb-1.5", children: [label, required && jsx("span", { className: "text-error-500 ml-1", children: "*" })] })), jsx("input", { ref: inputRef, type: "text", value: displayValue, onChange: handleChange, onPaste: handlePaste, placeholder: getPlaceholder(), disabled: disabled, className: `
           w-full px-3 py-2
-          text-sm text-ink-900 placeholder-ink-400
+          text-sm text-ink-900 placeholder:text-ink-400
           bg-white border rounded-lg
           focus:outline-none focus:ring-2 focus:ring-accent-400 focus:border-accent-400
           disabled:bg-paper-100 disabled:cursor-not-allowed
@@ -8059,7 +8059,7 @@ const Autocomplete = forwardRef(({ value, onChange, options = [], onSearch, labe
                             }
                         }, placeholder: placeholder, disabled: disabled, className: `
             w-full pl-9 pr-9 py-2
-            text-sm text-ink-900 placeholder-ink-400
+            text-sm text-ink-900 placeholder:text-ink-400
             bg-white border rounded-lg
             focus:outline-none focus:ring-2 focus:ring-accent-400 focus:border-accent-400
             disabled:bg-paper-100 disabled:cursor-not-allowed
@@ -8619,7 +8619,7 @@ function MarkdownEditor({ value, onChange, label, placeholder = '# Start writing
                                             : 'text-ink-600 hover:bg-white/50'}
                 `, children: "Split" })] }))] }), showHelp && (jsxs("button", { type: "button", onClick: () => setShowHelpPanel(!showHelpPanel), className: "flex items-center gap-1 px-2 py-1 text-xs text-ink-600 hover:text-ink-900 transition-colors", children: [jsx(Info, { className: "h-3.5 w-3.5" }), "Markdown Help"] }))] }), showHelpPanel && (jsx("div", { className: "p-3 border border-b-0 border-paper-300 bg-accent-50 text-xs", children: jsx("div", { className: "grid grid-cols-2 gap-2", children: helpContent.map((item, index) => (jsxs("div", { className: "flex items-center gap-2", children: [jsx("code", { className: "px-2 py-0.5 bg-white rounded text-ink-900 font-mono", children: item.syntax }), jsx("span", { className: "text-ink-600", children: item.description })] }, index))) }) })), jsxs("div", { className: `flex border border-paper-300 rounded-b-lg overflow-hidden ${mode === 'split' ? '' : ''}`, children: [(mode === 'edit' || mode === 'split') && (jsx("div", { className: `${mode === 'split' ? 'w-1/2 border-r border-paper-300' : 'w-full'}`, children: jsx("textarea", { value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, disabled: disabled, className: `
                 w-full p-3 outline-none resize-none
-                text-sm text-ink-900 font-mono placeholder-ink-400
+                text-sm text-ink-900 font-mono placeholder:text-ink-400
                 ${disabled ? 'bg-paper-100 cursor-not-allowed' : 'bg-white'}
               `, style: { minHeight, maxHeight } }) })), (mode === 'preview' || mode === 'split') && (jsx("div", { className: `${mode === 'split' ? 'w-1/2' : 'w-full'} overflow-y-auto bg-white`, children: jsx("div", { className: "p-3 prose prose-sm max-w-none", style: { minHeight, maxHeight }, dangerouslySetInnerHTML: { __html: markdownToHtml(value) } }) }))] }), jsx("style", { children: `
         .prose h1 { font-size: 1.875rem; font-weight: 700; margin-bottom: 1rem; }
@@ -14329,7 +14329,7 @@ function SearchBar({ value, onChange, placeholder = 'Search...', className = '',
             onSearch(value);
         }
     };
-    return (jsxs("div", { className: `flex-1 max-w-2xl relative ${className}`, children: [jsx("div", { className: "absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none", children: jsx(Search, { className: "h-5 w-5 text-ink-400" }) }), jsx("input", { type: "text", value: value, onChange: (e) => onChange(e.target.value), onKeyDown: handleKeyDown, disabled: disabled, className: "block w-full pl-11 pr-4 py-3 border border-paper-300 rounded-lg leading-5 bg-white placeholder-ink-400 text-ink-800 focus:outline-none focus:placeholder-ink-300 focus:ring-2 focus:ring-accent-400 focus:border-accent-400 hover:border-paper-400 transition-all sm:text-sm disabled:bg-paper-100 disabled:cursor-not-allowed", placeholder: placeholder })] }));
+    return (jsxs("div", { className: `flex-1 max-w-2xl relative ${className}`, children: [jsx("div", { className: "absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none", children: jsx(Search, { className: "h-5 w-5 text-ink-400" }) }), jsx("input", { type: "text", value: value, onChange: (e) => onChange(e.target.value), onKeyDown: handleKeyDown, disabled: disabled, className: "block w-full pl-11 pr-4 py-3 border border-paper-300 rounded-lg leading-5 bg-white placeholder:text-ink-400 text-ink-800 focus:outline-none focus:placeholder:text-ink-300 focus:ring-2 focus:ring-accent-400 focus:border-accent-400 hover:border-paper-400 transition-all sm:text-sm disabled:bg-paper-100 disabled:cursor-not-allowed", placeholder: placeholder })] }));
 }
 
 function NotificationIndicator({ count = 0, onClick, className = '', maxCount = 99, variant = 'default', }) {
@@ -15701,7 +15701,7 @@ mobileView = 'auto', cardConfig, cardGap = 'md', cardClassName, }) {
                     })()] }, rowKey));
         });
     };
-    const tableContent = (jsxs("div", { className: `bg-white rounded-lg shadow border-2 ${borderColor} ${virtualized ? 'overflow-hidden' : 'overflow-x-auto overflow-y-visible'} ${className}`, style: { position: 'relative' }, children: [loading && data.length > 0 && (jsx("div", { className: "absolute inset-0 bg-white bg-opacity-75 flex items-center justify-center z-20", style: { backdropFilter: 'blur(2px)' }, children: jsxs("div", { className: "flex flex-col items-center gap-3", children: [jsx("div", { className: "loading-spinner", style: { width: '32px', height: '32px', borderWidth: '3px' } }), jsx("span", { className: "text-sm font-medium text-ink-600", children: "Loading..." })] }) })), jsxs("table", { className: `table-stable w-full ${bordered ? 'border-collapse' : ''}`, role: "grid", "aria-label": "Data table", "aria-rowcount": data.length, "aria-colcount": visibleColumns.length, children: [jsxs("colgroup", { children: [selectable && jsx("col", { className: "w-12" }), ((expandable || expandedRowConfig) && showExpandChevron) && jsx("col", { className: "w-10" }), allActions.length > 0 && jsx("col", { style: { width: '28px' } }), visibleColumns.map((column, index) => {
+    const tableContent = (jsxs("div", { className: `bg-white rounded-lg shadow border-2 ${borderColor} ${virtualized ? 'overflow-hidden' : 'overflow-x-auto overflow-y-visible'} ${className}`, style: { position: 'relative' }, children: [loading && data.length > 0 && (jsx("div", { className: "absolute inset-0 bg-white/75 flex items-center justify-center z-20", style: { backdropFilter: 'blur(2px)' }, children: jsxs("div", { className: "flex flex-col items-center gap-3", children: [jsx("div", { className: "loading-spinner", style: { width: '32px', height: '32px', borderWidth: '3px' } }), jsx("span", { className: "text-sm font-medium text-ink-600", children: "Loading..." })] }) })), jsxs("table", { className: `table-stable w-full ${bordered ? 'border-collapse' : ''}`, role: "grid", "aria-label": "Data table", "aria-rowcount": data.length, "aria-colcount": visibleColumns.length, children: [jsxs("colgroup", { children: [selectable && jsx("col", { className: "w-12" }), ((expandable || expandedRowConfig) && showExpandChevron) && jsx("col", { className: "w-10" }), allActions.length > 0 && jsx("col", { style: { width: '28px' } }), visibleColumns.map((column, index) => {
                                 const columnKey = String(column.key);
                                 const dynamicWidth = columnWidths[columnKey];
                                 return (jsx("col", { style: getColumnStyle(column, dynamicWidth) }, index));
@@ -15796,44 +15796,52 @@ function getAugmentedNamespace(n) {
  * (A1, A1:C5, ...)
  */
 
-let Collection$3 = class Collection {
+var collection;
+var hasRequiredCollection;
+
+function requireCollection () {
+	if (hasRequiredCollection) return collection;
+	hasRequiredCollection = 1;
+	class Collection {
 
-    constructor(data, refs) {
-        if (data == null && refs == null) {
-            this._data = [];
-            this._refs = [];
-        } else {
-            if (data.length !== refs.length)
-                throw Error('Collection: data length should match references length.');
-            this._data = data;
-            this._refs = refs;
-        }
-    }
+	    constructor(data, refs) {
+	        if (data == null && refs == null) {
+	            this._data = [];
+	            this._refs = [];
+	        } else {
+	            if (data.length !== refs.length)
+	                throw Error('Collection: data length should match references length.');
+	            this._data = data;
+	            this._refs = refs;
+	        }
+	    }
 
-    get data() {
-        return this._data;
-    }
+	    get data() {
+	        return this._data;
+	    }
 
-    get refs() {
-        return this._refs;
-    }
+	    get refs() {
+	        return this._refs;
+	    }
 
-    get length() {
-        return this._data.length;
-    }
+	    get length() {
+	        return this._data.length;
+	    }
 
-    /**
-     * Add data and references to this collection.
-     * @param {{}} obj - data
-     * @param {{}} ref - reference
-     */
-    add(obj, ref) {
-        this._data.push(obj);
-        this._refs.push(ref);
-    }
-};
+	    /**
+	     * Add data and references to this collection.
+	     * @param {{}} obj - data
+	     * @param {{}} ref - reference
+	     */
+	    add(obj, ref) {
+	        this._data.push(obj);
+	        this._refs.push(ref);
+	    }
+	}
 
-var collection = Collection$3;
+	collection = Collection;
+	return collection;
+}
 
 var helpers;
 var hasRequiredHelpers;
@@ -15842,7 +15850,7 @@ function requireHelpers () {
 	if (hasRequiredHelpers) return helpers;
 	hasRequiredHelpers = 1;
 	const FormulaError = requireError();
-	const Collection = collection;
+	const Collection = requireCollection();
 
 	const Types = {
 	    NUMBER: 0,
@@ -25496,7 +25504,7 @@ var engineering = EngineeringFunctions;
 
 const FormulaError$b = requireError();
 const {FormulaHelpers: FormulaHelpers$8, Types: Types$6, WildCard, Address: Address$3} = requireHelpers();
-const Collection$2 = collection;
+const Collection$2 = requireCollection();
 const H$5 = FormulaHelpers$8;
 
 const ReferenceFunctions$1 = {
@@ -37124,7 +37132,7 @@ var parsing = {
 const FormulaError$4 = requireError();
 const {Address: Address$1} = requireHelpers();
 const {Prefix: Prefix$1, Postfix: Postfix$1, Infix: Infix$1, Operators: Operators$1} = operators;
-const Collection$1 = collection;
+const Collection$1 = requireCollection();
 const MAX_ROW$1 = 1048576, MAX_COLUMN$1 = 16384;
 const {NotAllInputParsedException} = require$$4;
 
@@ -37886,7 +37894,7 @@ var hooks$1 = {
 const FormulaError$2 = requireError();
 const {FormulaHelpers: FormulaHelpers$1, Types, Address} = requireHelpers();
 const {Prefix, Postfix, Infix, Operators} = operators;
-const Collection = collection;
+const Collection = requireCollection();
 const MAX_ROW = 1048576, MAX_COLUMN = 16384;
 
 let Utils$1 = class Utils {
@@ -61931,7 +61939,7 @@ function AdminModal({ isOpen, onClose, title, subtitle, onSubmit, isSaving = fal
             onSubmit(formData);
         }
     };
-    return (jsx("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4 admin-modal-overlay", children: jsxs("div", { className: `bg-white rounded-lg w-full ${sizeClasses[size]} flex flex-col overflow-hidden shadow-2xl admin-modal-content`, style: { height: height }, children: [jsx("div", { className: "fixed inset-0 pointer-events-none admin-modal-sidebar-placeholder" }), jsxs("div", { className: "px-6 py-4 border-b", children: [jsx("h3", { className: "text-lg font-semibold", children: title }), subtitle && jsx("p", { className: "text-sm text-gray-500 mt-1", children: subtitle })] }), tabs.length > 1 && (jsx("div", { className: "border-b border-gray-200 bg-white", children: jsx("nav", { className: "-mb-px flex items-center px-6 admin-modal-tabs", "aria-label": "Tabs", children: tabs.map((tab, index) => (jsxs(React__default.Fragment, { children: [jsx("button", { type: "button", onClick: () => onTabChange(tab.id), className: `whitespace-nowrap border-b-2 py-3 px-4 text-sm font-medium transition-colors ${activeTabId === tab.id
+    return (jsx("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4 admin-modal-overlay", children: jsxs("div", { className: `bg-white rounded-lg w-full ${sizeClasses[size]} flex flex-col overflow-hidden shadow-2xl admin-modal-content`, style: { height: height }, children: [jsx("div", { className: "fixed inset-0 pointer-events-none admin-modal-sidebar-placeholder" }), jsxs("div", { className: "px-6 py-4 border-b", children: [jsx("h3", { className: "text-lg font-semibold", children: title }), subtitle && jsx("p", { className: "text-sm text-gray-500 mt-1", children: subtitle })] }), tabs.length > 1 && (jsx("div", { className: "border-b border-gray-200 bg-white", children: jsx("nav", { className: "-mb-px flex items-center px-6 admin-modal-tabs", "aria-label": "Tabs", children: tabs.map((tab, index) => (jsxs(React__default.Fragment, { children: [jsx("button", { type: "button", onClick: () => onTabChange(tab.id), className: `whitespace-nowrap border-b-2 py-3 px-4 text-sm font-medium transition-colors ${activeTabId === tab.id
                                         ? 'border-blue-500 text-blue-600'
                                         : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'}`, "aria-current": activeTabId === tab.id ? 'page' : undefined, children: tab.label }), index < tabs.length - 1 && (jsx("div", { className: "admin-modal-tab-separator" }))] }, tab.id))) }) })), onSubmit ? (jsx("form", { className: "flex-1 overflow-y-auto min-h-0 h-0 px-6 py-6 admin-modal-form", onSubmit: handleFormSubmit, id: formId, noValidate: true, children: activeTab?.content || children })) : (jsx("div", { className: "flex-1 overflow-y-auto min-h-0 h-0 px-6 py-6 admin-modal-content-area", children: activeTab?.content || children })), jsxs("div", { className: "px-6 py-4 border-t bg-gray-50 flex justify-between gap-3", children: [jsx("button", { type: "button", onClick: onClose, className: "px-4 py-2 text-sm text-gray-600 hover:text-gray-800", disabled: isSaving, children: "Cancel" }), jsxs("div", { className: "flex gap-3", children: [customFooterActions, onSubmit && (jsx("button", { type: "submit", form: formId, disabled: isSaving, className: "px-4 py-2 text-sm bg-primary-600 text-white rounded hover:bg-primary-700 disabled:opacity-50 disabled:cursor-not-allowed", children: isSaving ? 'Saving...' : 'Save Changes' }))] })] })] }) }));
 }
@@ -62152,7 +62160,7 @@ function NotificationBar({ notifications, onDismiss }) {
     }
     return (jsx("div", { className: "fixed top-4 right-4 z-50 space-y-3 max-w-md", children: notifications.map((notification) => {
             const IconComponent = getNotificationIcon(notification.type);
-            return (jsx("div", { className: `border-2 rounded-xl p-4 backdrop-blur-sm transform transition-all duration-300 ease-in-out animate-slide-in ${notificationStyles[notification.type]}`, children: jsxs("div", { className: "flex items-start space-x-3", children: [jsx("div", { className: `flex-shrink-0 p-1 rounded-full bg-white bg-opacity-50 ${iconStyles[notification.type]}`, children: jsx(IconComponent, { className: "h-5 w-5" }) }), jsxs("div", { className: "flex-1 min-w-0", children: [jsx("p", { className: "text-sm font-semibold mb-1 leading-tight", children: notification.title }), jsx("p", { className: "text-sm leading-relaxed opacity-90", children: notification.message })] }), notification.dismissible && onDismiss && (jsx("button", { onClick: () => onDismiss(notification.id), className: `flex-shrink-0 p-1.5 hover:bg-white hover:bg-opacity-60 rounded-full transition-all duration-200 ${iconStyles[notification.type]} hover:scale-110`, title: "Dismiss notification", children: jsx(X, { className: "h-4 w-4" }) }))] }) }, notification.id));
+            return (jsx("div", { className: `border-2 rounded-xl p-4 backdrop-blur-sm transform transition-all duration-300 ease-in-out animate-slide-in ${notificationStyles[notification.type]}`, children: jsxs("div", { className: "flex items-start space-x-3", children: [jsx("div", { className: `flex-shrink-0 p-1 rounded-full bg-white/50 ${iconStyles[notification.type]}`, children: jsx(IconComponent, { className: "h-5 w-5" }) }), jsxs("div", { className: "flex-1 min-w-0", children: [jsx("p", { className: "text-sm font-semibold mb-1 leading-tight", children: notification.title }), jsx("p", { className: "text-sm leading-relaxed opacity-90", children: notification.message })] }), notification.dismissible && onDismiss && (jsx("button", { onClick: () => onDismiss(notification.id), className: `flex-shrink-0 p-1.5 hover:bg-white/60 rounded-full transition-all duration-200 ${iconStyles[notification.type]} hover:scale-110`, title: "Dismiss notification", children: jsx(X, { className: "h-4 w-4" }) }))] }) }, notification.id));
         }) }));
 }