npm - toastify-pro - Versions diffs - 1.1.0 → 1.3.0 - Mend

toastify-pro 1.1.0 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/README.md +475 -45
package/assets/site/site.webmanifest +1 -1
package/dist/toastify-pro.esm.js +1059 -68
package/dist/toastify-pro.esm.js.map +1 -0
package/dist/toastify-pro.umd.js +1062 -72
package/dist/toastify-pro.umd.js.map +1 -0
package/dist/toastify-pro.umd.min.js +24 -1
package/dist/toastify-pro.umd.min.js.map +1 -0
package/package.json +6 -5
package/src/toastify-pro.js +1057 -67

package/README.md CHANGED Viewed

@@ -18,12 +18,18 @@
 - 🚀 **Lightweight** - Minimal bundle size with zero dependencies
 - 🎨 **6 Built-in Themes** - Success, Error, Info, Warning, Dark, and Light themes
-- 📱 **Flexible Positioning** - 6 different position options
-- ⚡ **Smooth Animations** - CSS transitions with fade and slide effects
+- 🎯 **Interactive Confirmation Dialogs** - Perfect replacement for SweetAlert with dark/light themes only
+- 📱 **7 Flexible Positions** - Including new center position ideal for confirmations
+- ⚡ **Apple-Style Animations** - Smooth AirDrop-inspired entrance and car-swipe exit effects
 - 🔧 **Framework Agnostic** - Works with React, Vue, Angular, or vanilla JS
 - 🎯 **Auto-dismiss** - Configurable timeout with manual close option
+- 📝 **Description Support** - Optional secondary text for detailed messages
 - 🌈 **Easy Customization** - Simple API with sensible defaults
-- ♿ **Accessible** - Clean HTML structure with proper styling
+- ♿ **Accessible** - Clean HTML structure with proper ARIA support
+- 🎨 **Custom SVG Icons** - Beautiful vector icons for each toast type
+- ✨ **Modern Design** - Glassmorphism effects with backdrop blur
+- � **Perfect Callback Handling** - No double execution, conflict-free patterns
+- ❌ **Close Button** - Interactive close buttons for confirmation dialogs
 ## 🚀 Quick Start
@@ -36,7 +42,7 @@ npm install toastify-pro
 #### CDN (Browser)
 ```html
-<script src="https://cdn.jsdelivr.net/npm/toastify-pro@1.1.0/dist/toastify-pro.umd.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/toastify-pro/dist/toastify-pro.umd.min.js"></script>
 ```
 ### 🔨 Basic Usage
@@ -54,6 +60,36 @@ toast.warning('Please check your input');
 toast.info('New update available');
 toast.dark('Dark themed message');
 toast.light('Light themed message');
+// Show toasts with descriptions
+toast.success('Success!', 'Your changes have been saved successfully.');
+toast.error('Error occurred!', 'Please check your network connection and try again.');
+toast.info('New feature!', 'Check out our latest updates in the dashboard.');
+// 🆕 NEW: Confirmation dialogs
+toast.conf('Delete this item?', (confirmed) => {
+    if (confirmed) {
+        toast.success('Item deleted successfully!');
+    } else {
+        toast.info('Delete cancelled');
+    }
+});
+// Confirmation with description
+toast.conf('Are you sure?', 'This action cannot be undone.', (confirmed) => {
+    console.log('User confirmed:', confirmed);
+});
+// Advanced confirmation options
+toast.conf('Save changes?', {
+    description: 'Your changes will be permanently saved.',
+    confirmText: 'Save',
+    cancelText: 'Discard',
+    theme: 'light', // 'dark' (default) or 'light'
+    position: 'center', // Default for confirmations
+    onConfirm: () => console.log('Confirmed!'),
+    onCancel: () => console.log('Cancelled!')
+});
 ```
 #### With CDN
@@ -62,10 +98,11 @@ toast.light('Light themed message');
 <html>
 <head>
     <title>Toastify Pro Example</title>
-    <script src="https://cdn.jsdelivr.net/npm/toastify-pro@1.1.0/dist/toastify-pro.umd.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/toastify-pro/dist/toastify-pro.umd.min.js"></script>
 </head>
 <body>
     <button onclick="showToast()">Show Toast</button>
+    <button onclick="showConfirmation()">Show Confirmation</button>
     <script>
         const toast = new ToastifyPro();
@@ -84,6 +121,29 @@ toast.light('Light themed message');
                 allowClose: true
             });
         }
+        // 🆕 NEW: Confirmation dialogs
+        function showConfirmation() {
+            toast.conf('Delete this item?', 'This action cannot be undone.', (confirmed) => {
+                if (confirmed) {
+                    toast.success('Item deleted!');
+                } else {
+                    toast.info('Delete cancelled');
+                }
+            });
+        }
+        function showAdvancedConfirmation() {
+            toast.conf('Save document?', {
+                description: 'All your changes will be saved permanently.',
+                confirmText: 'Save Now',
+                cancelText: 'Cancel',
+                theme: 'light',
+                position: 'center'
+            }, (confirmed) => {
+                console.log('User decision:', confirmed);
+            });
+        }
     </script>
 </body>
 </html>
@@ -109,6 +169,7 @@ const toast = new ToastifyPro({
 - `bottom-left` - Bottom left corner
 - `bottom-right` - Bottom right corner
 - `bottom-center` - Bottom center (default)
+- `center` - Perfect center of screen (ideal for confirmations)
 ### Methods
@@ -118,52 +179,159 @@ Main method to display a toast notification.
 toast.show('Custom message', 'success', {
     timeout: 5000,      // Override default timeout
     allowClose: false,  // Hide close button for this toast
-    maxLength: 50       // Override message length limit
+    maxLength: 50,      // Override message length limit
+    description: 'Additional details about the message' // Optional description
 });
 ```
-#### `toast.success(message, options)`
-Display a success toast with green background.
+#### Enhanced Toast Methods with Description Support
+All toast methods now support description as a second parameter or in options:
+#### `toast.success(message, options|description)`
+Display a success toast with green background and checkmark icon.
 ```javascript
 toast.success('Data saved successfully!');
 toast.success('Upload complete!', { timeout: 2000 });
+toast.success('Success!', 'Your changes have been saved.'); // With description
 ```
-#### `toast.error(message, options)`
-Display an error toast with red background.
+#### `toast.error(message, options|description)`
+Display an error toast with red background and error icon.
 ```javascript
 toast.error('Failed to save data!');
 toast.error('Network error occurred!', { allowClose: false });
+toast.error('Error!', 'Please check your connection and try again.'); // With description
 ```
-#### `toast.warning(message, options)`
-Display a warning toast with orange background.
+#### `toast.warning(message, options|description)`
+Display a warning toast with orange background and warning icon.
 ```javascript
 toast.warning('Please verify your input');
 toast.warning('Session expires in 5 minutes', { timeout: 10000 });
+toast.warning('Warning!', 'This action cannot be undone.'); // With description
 ```
-#### `toast.info(message, options)`
-Display an info toast with blue background.
+#### `toast.info(message, options|description)`
+Display an info toast with blue background and info icon.
 ```javascript
 toast.info('New feature available!');
 toast.info('Check your email for verification', { timeout: 0 }); // No auto-dismiss
+toast.info('Info', 'Here are some helpful tips for you.'); // With description
 ```
-#### `toast.dark(message, options)`
-Display a dark themed toast.
+#### `toast.dark(message, options|description)`
+Display a dark themed toast with star icon.
 ```javascript
 toast.dark('Dark mode enabled');
 toast.dark('Processing in background...', { allowClose: false });
+toast.dark('Dark Mode', 'Switched to elegant dark theme.'); // With description
 ```
-#### `toast.light(message, options)`
-Display a light themed toast with dark text.
+#### `toast.light(message, options|description)`
+Display a light themed toast with dark text and calendar icon.
 ```javascript
 toast.light('Light theme activated');
 toast.light('Settings updated', { timeout: 2000 });
+toast.light('Light Mode', 'Switched to clean light theme.'); // With description
+```
+#### 🆕 `toast.conf(message, descriptionOrCallback, callback)`
+Display an interactive confirmation dialog with confirm/cancel buttons.
+**Features:**
+- 🎯 **Center positioning** (default) for maximum attention
+- ✖️ **Close button** in top-right corner (acts as cancel)
+- 🎨 **Simple theming** - Dark (default) or Light themes only
+- 📱 **Responsive** design for mobile devices
+- ⚡ **No auto-dismiss** - requires user interaction
+**Theme Options:**
+- `theme: 'dark'` (default) - Dark theme with elegant styling
+- `theme: 'light'` or `theme: 'white'` - Clean light theme with dark text
+```javascript
+// Simple confirmation with callback
+toast.conf('Delete this item?', (confirmed) => {
+    if (confirmed) {
+        console.log('User confirmed');
+    } else {
+        console.log('User cancelled');
+    }
+});
+// Confirmation with description
+toast.conf('Are you sure?', 'This action cannot be undone.', (confirmed) => {
+    handleUserChoice(confirmed);
+});
+// Advanced confirmation with full options
+toast.conf('Save changes?', {
+    description: 'Your changes will be permanently saved to the server.',
+    confirmText: 'Save Now',        // Custom confirm button text
+    cancelText: 'Discard',          // Custom cancel button text
+    theme: 'light',                 // Theme: 'dark' (default) or 'light'
+    position: 'center',             // Position (defaults to 'center' for confirmations)
+    onConfirm: () => saveData(),    // Alternative callback approach
+    onCancel: () => discardChanges()
+});
+// Real-world example: Delete confirmation
+function deleteItem(itemId) {
+    toast.conf('Delete item?',
+        'This will permanently remove the item from your account.',
+        (confirmed) => {
+            if (confirmed) {
+                // Perform deletion
+                deleteFromServer(itemId);
+                toast.success('Item deleted successfully!');
+            } else {
+                toast.info('Delete cancelled');
+            }
+        }
+    );
+}
+// Form save confirmation
+function handleFormSubmit() {
+    toast.conf('Save changes?', {
+        description: 'Your form data will be submitted and cannot be edited later.',
+        confirmText: 'Submit',
+        cancelText: 'Keep Editing',
+        theme: 'dark', // Default theme, can be 'light'
+        position: 'center'
+    }, (confirmed) => {
+        if (confirmed) {
+            submitForm();
+        }
+    });
+}
 ```
+### 🆕 Enhanced Features
+#### Custom SVG Icons
+Each toast type includes beautiful vector icons that scale perfectly:
+- **Success**: ✓ Checkmark circle icon
+- **Error**: ✗ X circle icon
+- **Warning**: ⚠ Triangle warning icon
+- **Info**: ℹ Info circle icon
+- **Dark**: ★ Star icon
+- **Light**: ☀ Calendar icon
+#### Position-Aware Car Swipe Animations
+Toasts automatically exit with position-aware animations:
+- `carSwipeBottom` - For bottom positioned toasts (swipes down)
+- `carSwipeTop` - For top positioned toasts (swipes up)
+- `carSwipeLeft` - For left positioned toasts (swipes left)
+- `carSwipeRight` - For right positioned toasts (swipes right)
+- `carSwipeCenter` - For center positioned toasts (swipes down)
+#### POP UP Entrance Animation
+All toasts use the `airdropPop` entrance animation with:
+- 4-stage rotation and scaling effects
+- Professional iOS-inspired timing
+- Smooth cubic-bezier transitions
 ## 🎨 Customization
 ### Global Configuration
@@ -184,6 +352,16 @@ toast.error('Critical error!', { timeout: 0 });
 // Quick notification
 toast.success('Saved!', { timeout: 1000 });
+// Toast with description - object format
+toast.info('Update Available', {
+    description: 'Version 2.0 is now available with new features and improvements.',
+    timeout: 8000,
+    allowClose: true
+});
+// Toast with description - simple format
+toast.success('Welcome!', 'Thanks for joining our platform. Explore the features!');
 // Long message with close button
 toast.info('This is a very long message that might be truncated', {
     maxLength: 200,
@@ -244,11 +422,55 @@ function App() {
     const handleError = () => {
         toast?.error('Something went wrong in React!');
     };
+    const handleWithDescription = () => {
+        toast?.info('New Feature!', 'Check out our latest React integration updates.');
+    };
+    // 🆕 NEW: Confirmation dialog examples
+    const handleDelete = () => {
+        toast?.conf('Delete item?', 'This action cannot be undone.', (confirmed) => {
+            if (confirmed) {
+                // Perform deletion logic
+                console.log('Deleting item...');
+                toast?.success('Item deleted successfully!');
+            } else {
+                toast?.info('Delete cancelled');
+            }
+        });
+    };
+    const handleLogout = () => {
+        toast?.conf('Sign out?', {
+            description: 'You will need to sign in again to access your account.',
+            confirmText: 'Sign Out',
+            cancelText: 'Stay Signed In',
+            theme: 'dark',
+            position: 'center'
+        }, (confirmed) => {
+            if (confirmed) {
+                // Logout logic
+                window.location.href = '/login';
+            }
+        });
+    };
+    const handleIconDemo = () => {
+        // Showcase different icons with descriptions
+        toast?.success('✓ Success Icon', 'Beautiful checkmark with green theme');
+        setTimeout(() => toast?.error('✗ Error Icon', 'Clear error indication with red theme'), 500);
+        setTimeout(() => toast?.warning('⚠ Warning Icon', 'Alert triangle with orange theme'), 1000);
+        setTimeout(() => toast?.info('ℹ Info Icon', 'Information circle with blue theme'), 1500);
+    };
     return (
         <div>
             <button onClick={handleSuccess}>Show Success</button>
             <button onClick={handleError}>Show Error</button>
+            <button onClick={handleWithDescription}>Show with Description</button>
+            <button onClick={handleIconDemo}>Demo All Icons</button>
+            <button onClick={handleDelete}>Delete with Confirmation</button>
+            <button onClick={handleLogout}>Logout Confirmation</button>
         </div>
     );
 }
@@ -263,6 +485,8 @@ export default App;
         <button @click="showSuccess">Show Success</button>
         <button @click="showError">Show Error</button>
         <button @click="showCustom">Show Custom</button>
+        <button @click="showConfirmation">Show Confirmation</button>
+        <button @click="showDeleteConfirmation">Delete Item</button>
     </div>
 </template>
@@ -294,6 +518,38 @@ export default {
                 timeout: 6000,
                 allowClose: true
             });
+        },
+        // 🆕 NEW: Confirmation methods
+        showConfirmation() {
+            this.toast.conf('Save changes?', (confirmed) => {
+                if (confirmed) {
+                    this.saveData();
+                } else {
+                    this.toast.info('Changes not saved');
+                }
+            });
+        },
+        showDeleteConfirmation() {
+            this.toast.conf('Delete this item?', {
+                description: 'This action cannot be undone and will remove all associated data.',
+                confirmText: 'Delete',
+                cancelText: 'Keep',
+                theme: 'dark',
+                position: 'center'
+            }, (confirmed) => {
+                if (confirmed) {
+                    this.deleteItem();
+                    this.toast.success('Item deleted successfully!');
+                }
+            });
+        },
+        saveData() {
+            // Save logic here
+            this.toast.success('Data saved successfully!');
+        },
+        deleteItem() {
+            // Delete logic here
+            console.log('Item deleted');
         }
     }
 };
@@ -311,6 +567,8 @@ import ToastifyPro from 'toastify-pro';
         <button (click)="showSuccess()">Show Success</button>
         <button (click)="showError()">Show Error</button>
         <button (click)="showInfo()">Show Info</button>
+        <button (click)="showConfirmation()">Show Confirmation</button>
+        <button (click)="showLogoutConfirmation()">Logout</button>
     `
 })
 export class ToastExampleComponent implements OnInit {
@@ -337,6 +595,41 @@ export class ToastExampleComponent implements OnInit {
             timeout: 5000
         });
     }
+    // 🆕 NEW: Confirmation methods
+    showConfirmation() {
+        this.toast.conf('Save document?', 'All changes will be saved permanently.', (confirmed: boolean) => {
+            if (confirmed) {
+                this.saveDocument();
+            } else {
+                this.toast.info('Save cancelled');
+            }
+        });
+    }
+    showLogoutConfirmation() {
+        this.toast.conf('Sign out?', {
+            description: 'You will be logged out of your account.',
+            confirmText: 'Sign Out',
+            cancelText: 'Cancel',
+            theme: 'light',
+            position: 'center'
+        }, (confirmed: boolean) => {
+            if (confirmed) {
+                this.logout();
+            }
+        });
+    }
+    private saveDocument() {
+        // Save logic
+        this.toast.success('Document saved successfully!');
+    }
+    private logout() {
+        // Logout logic
+        this.toast.success('Logged out successfully!');
+    }
 }
 ```
@@ -349,30 +642,157 @@ const toast = new ToastifyPro({
     allowClose: true
 });
-// Form submission example
+// Form submission example with confirmation
 document.getElementById('submitForm').addEventListener('click', async function() {
-    try {
-        // Simulate API call
-        const response = await fetch('/api/submit', { method: 'POST' });
-        if (response.ok) {
-            toast.success('Form submitted successfully!');
-        } else {
-            toast.error('Failed to submit form');
+    toast.conf('Submit form?', 'Your data will be sent to the server.', async (confirmed) => {
+        if (confirmed) {
+            try {
+                // Simulate API call
+                const response = await fetch('/api/submit', { method: 'POST' });
+                if (response.ok) {
+                    toast.success('Form submitted successfully!', 'Your data has been processed and saved.');
+                } else {
+                    toast.error('Failed to submit form', 'Please check your inputs and try again.');
+                }
+            } catch (error) {
+                toast.error('Network error occurred', 'Check your connection and retry.');
+            }
         }
-    } catch (error) {
-        toast.error('Network error occurred');
-    }
+    });
 });
-// Multiple toast types
+// Delete confirmation example
+function deleteItem(itemId) {
+    toast.conf('Delete this item?', {
+        description: 'This action cannot be undone and will permanently remove all associated data.',
+        confirmText: 'Delete',
+        cancelText: 'Keep',
+        theme: 'dark',
+        position: 'center'
+    }, (confirmed) => {
+        if (confirmed) {
+            // Perform deletion
+            console.log('Deleting item:', itemId);
+            toast.success('Item deleted!', 'The item has been permanently removed.');
+        } else {
+            toast.info('Delete cancelled', 'Your item is safe.');
+        }
+    });
+}
+// File upload with confirmation and progress
+function handleFileUpload() {
+    toast.conf('Upload file?', 'The file will be uploaded to your account.', (confirmed) => {
+        if (confirmed) {
+            toast.info('Uploading...', 'Please wait while we process your file.');
+            // Simulate upload completion
+            setTimeout(() => {
+                toast.success('Upload complete!', 'Your file has been uploaded successfully.');
+            }, 3000);
+        }
+    });
+}
+// Logout confirmation
+function logout() {
+    toast.conf('Sign out?', {
+        description: 'You will need to sign in again to access your account.',
+        confirmText: 'Sign Out',
+        cancelText: 'Stay Signed In',
+        theme: 'light'
+    }, (confirmed) => {
+        if (confirmed) {
+            window.location.href = '/login';
+        }
+    });
+}
+// Multiple toast types with descriptions
 function showAllTypes() {
-    toast.success('Success message');
-    setTimeout(() => toast.error('Error message'), 500);
-    setTimeout(() => toast.warning('Warning message'), 1000);
-    setTimeout(() => toast.info('Info message'), 1500);
-    setTimeout(() => toast.dark('Dark message'), 2000);
-    setTimeout(() => toast.light('Light message'), 2500);
+    toast.success('Success!', 'Operation completed successfully');
+    setTimeout(() => toast.error('Error!', 'Something went wrong'), 500);
+    setTimeout(() => toast.warning('Warning!', 'Please review this action'), 1000);
+    setTimeout(() => toast.info('Info', 'Here is some helpful information'), 1500);
+    setTimeout(() => toast.dark('Dark Mode', 'Elegant dark notification'), 2000);
+    setTimeout(() => toast.light('Light Mode', 'Clean light notification'), 2500);
+}
+// Showcase new enhanced features including confirmations
+function demoEnhancedFeatures() {
+    // SVG Icons demo
+    toast.success('✓ Beautiful Icons', 'Each type has its own vector icon that scales perfectly');
+    // Car swipe animation (automatic based on position)
+    setTimeout(() => {
+        toast.info('🚗 Car Swipe Exit', 'Watch the position-aware exit animation');
+    }, 1000);
+    // Apple AirDrop entrance (automatic)
+    setTimeout(() => {
+        toast.warning('📱 AirDrop Style', 'iOS-inspired entrance with rotation effects');
+    }, 2000);
+    // Glassmorphism design
+    setTimeout(() => {
+        toast.dark('✨ Glassmorphism', 'Modern backdrop blur with translucent design');
+    }, 3000);
+    // 🆕 Confirmation dialog demo
+    setTimeout(() => {
+        toast.conf('Try confirmation?', 'Experience the new interactive dialog feature.', (confirmed) => {
+            if (confirmed) {
+                toast.success('🎉 Confirmation works!', 'You can now create interactive dialogs easily.');
+            } else {
+                toast.info('No problem!', 'Confirmation dialogs are optional.');
+            }
+        });
+    }, 4000);
+}
+// Advanced confirmation examples
+function advancedConfirmationExamples() {
+    // Settings reset confirmation
+    toast.conf('Reset all settings?', {
+        description: 'This will restore all settings to their default values.',
+        confirmText: 'Reset',
+        cancelText: 'Cancel',
+        theme: 'dark',
+        position: 'center'
+    }, (confirmed) => {
+        if (confirmed) {
+            // Reset settings logic
+            toast.success('Settings reset!', 'All settings have been restored to defaults.');
+        }
+    });
+}
+// Advanced usage with all new features
+function advancedExample() {
+    // Progress indication with confirmation first
+    toast.conf('Start processing?', {
+        description: 'This will upload your file to the server and may take a few minutes.',
+        confirmText: 'Start',
+        cancelText: 'Later',
+        theme: 'light'
+    }, (confirmed) => {
+        if (confirmed) {
+            toast.info('Processing...', {
+                description: 'Please wait while we upload your file to the server',
+                timeout: 0, // No auto-dismiss
+                allowClose: true
+            });
+            // Simulate progress completion
+            setTimeout(() => {
+                toast.success('Upload Complete!', {
+                    description: 'Your file has been uploaded successfully with all metadata',
+                    timeout: 5000
+                });
+            }, 3000);
+        }
+    });
 }
 ```
@@ -393,17 +813,27 @@ function showAllTypes() {
 | `timeout` | number | `3000` | Auto-dismiss time (0 = no auto-dismiss) |
 | `allowClose` | boolean | `true` | Show close button |
 | `maxLength` | number | `100` | Maximum message length |
+| `description` | string | `undefined` | Optional secondary text for detailed information |
 ## 🎨 Available Themes
-| Theme | Background | Text Color | Use Case |
-|-------|------------|------------|----------|
-| `success` | Green | White | Success messages |
-| `error` | Red | White | Error messages |
-| `warning` | Orange | White | Warning messages |
-| `info` | Blue | White | Information messages |
-| `dark` | Dark Gray | White | General purpose |
-| `light` | Light Gray | Black | Light theme compatibility |
+| Theme | Background | Text Color | Icon | Use Case |
+|-------|------------|------------|------|----------|
+| `success` | Green | White | ✓ Checkmark | Success messages |
+| `error` | Red | White | ✗ X Circle | Error messages |
+| `warning` | Orange | White | ⚠ Triangle | Warning messages |
+| `info` | Blue | White | ℹ Info Circle | Information messages |
+| `dark` | Dark Gray | White | ★ Star | General purpose |
+| `light` | Light Gray | Black | ☀ Calendar | Light theme compatibility |
+### 🆕 Enhanced Visual Features
+- **Custom SVG Icons**: Each theme includes beautiful vector icons that are crisp at any resolution
+- **Glassmorphism Design**: Modern backdrop-filter blur effects with translucent backgrounds
+- **Car Swipe Animations**: Position-aware exit animations that swipe toasts in natural directions
+- **POP UP Entrance**: Professional iOS-inspired entrance with 4-stage rotation and scaling
+- **Progress Bar**: Animated progress bar with shimmer effects showing remaining time
+- **Responsive Design**: Mobile-first approach that adapts to all screen sizes
 ## 📄 License

package/assets/site/site.webmanifest CHANGED Viewed

@@ -53,7 +53,7 @@
       "purpose": "any"
     },
     {
-      "src": "/assets/icons/favicon.ico",
+      "src": "https://abhipotter.github.io/toastify-pro/assets/icons/favicon.ico",
       "sizes": "150x150",
       "type": "image/png",
       "purpose": "any"