npm - @getflip/swirl-components - Versions diffs - 0.209.0 → 0.211.0 - Mend

@getflip/swirl-components 0.209.0 → 0.211.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 (1476) hide show

package/components.json CHANGED Viewed

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2024-06-19T13:53:46",
+  "timestamp": "2024-07-09T16:31:22",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.18.1",
@@ -5173,7 +5173,8 @@
       "slots": [],
       "parts": [],
       "dependents": [
-        "swirl-modal"
+        "swirl-modal",
+        "swirl-thumbnail"
       ],
       "dependencies": [
         "swirl-stack"
@@ -5184,6 +5185,9 @@
         ],
         "swirl-modal": [
           "swirl-button-group"
+        ],
+        "swirl-thumbnail": [
+          "swirl-button-group"
         ]
       }
     },
@@ -14242,6 +14246,147 @@
         ]
       }
     },
+    {
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-aspect-ratio.tsx",
+      "encapsulation": "shadow",
+      "tag": "swirl-icon-aspect-ratio",
+      "docs": "",
+      "docsTags": [],
+      "usage": {},
+      "props": [
+        {
+          "name": "color",
+          "type": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+          "complexType": {
+            "original": "SwirlIconColor",
+            "resolved": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+            "references": {
+              "SwirlIconColor": {
+                "location": "import",
+                "path": "../swirl-icon",
+                "id": "src/components/swirl-icon/swirl-icon.tsx::SwirlIconColor"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "color",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "critical",
+              "type": "string"
+            },
+            {
+              "value": "default",
+              "type": "string"
+            },
+            {
+              "value": "disabled",
+              "type": "string"
+            },
+            {
+              "value": "highlight",
+              "type": "string"
+            },
+            {
+              "value": "info",
+              "type": "string"
+            },
+            {
+              "value": "on-action-primary",
+              "type": "string"
+            },
+            {
+              "value": "on-image",
+              "type": "string"
+            },
+            {
+              "value": "on-status",
+              "type": "string"
+            },
+            {
+              "value": "on-surface-highlight",
+              "type": "string"
+            },
+            {
+              "value": "on-surface-highlight-subdued",
+              "type": "string"
+            },
+            {
+              "value": "strong",
+              "type": "string"
+            },
+            {
+              "value": "success",
+              "type": "string"
+            },
+            {
+              "value": "warning",
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "size",
+          "type": "16 | 20 | 24 | 28",
+          "complexType": {
+            "original": "SwirlIconSize",
+            "resolved": "16 | 20 | 24 | 28",
+            "references": {
+              "SwirlIconSize": {
+                "location": "import",
+                "path": "../swirl-icon.types",
+                "id": "src/components/swirl-icon/swirl-icon.types.ts::SwirlIconSize"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "size",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "default": "24",
+          "values": [
+            {
+              "value": "16",
+              "type": "number"
+            },
+            {
+              "value": "20",
+              "type": "number"
+            },
+            {
+              "value": "24",
+              "type": "number"
+            },
+            {
+              "value": "28",
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [
+        {
+          "name": "icon",
+          "docs": ""
+        }
+      ],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
     {
       "filePath": "src/components/swirl-icon/icons/swirl-icon-attachment.tsx",
       "encapsulation": "shadow",
@@ -17268,9 +17413,9 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-dark-mode.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-crop.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-dark-mode",
+      "tag": "swirl-icon-crop",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -17409,9 +17554,9 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-date-range.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-dark-mode.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-date-range",
+      "tag": "swirl-icon-dark-mode",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -17550,9 +17695,9 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-delete.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-date-range.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-delete",
+      "tag": "swirl-icon-date-range",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -17691,9 +17836,9 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-description.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-delete.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-description",
+      "tag": "swirl-icon-delete",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -17832,9 +17977,9 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-desktop.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-description.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-desktop",
+      "tag": "swirl-icon-description",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -17973,9 +18118,9 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-directory.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-desktop.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-directory",
+      "tag": "swirl-icon-desktop",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -18114,9 +18259,9 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-directory-filled.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-directory.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-directory-filled",
+      "tag": "swirl-icon-directory",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -18255,9 +18400,9 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-discover.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-directory-filled.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-discover",
+      "tag": "swirl-icon-directory-filled",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -18396,9 +18541,9 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-dock-left.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-discover.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-dock-left",
+      "tag": "swirl-icon-discover",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -18532,20 +18677,14 @@
           "docs": ""
         }
       ],
-      "dependents": [
-        "swirl-shell-layout"
-      ],
+      "dependents": [],
       "dependencies": [],
-      "dependencyGraph": {
-        "swirl-shell-layout": [
-          "swirl-icon-dock-left"
-        ]
-      }
+      "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-dot.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-dock-left.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-dot",
+      "tag": "swirl-icon-dock-left",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -18679,14 +18818,20 @@
           "docs": ""
         }
       ],
-      "dependents": [],
+      "dependents": [
+        "swirl-shell-layout"
+      ],
       "dependencies": [],
-      "dependencyGraph": {}
+      "dependencyGraph": {
+        "swirl-shell-layout": [
+          "swirl-icon-dock-left"
+        ]
+      }
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-double-arrow-left.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-dot.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-double-arrow-left",
+      "tag": "swirl-icon-dot",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -18820,20 +18965,14 @@
           "docs": ""
         }
       ],
-      "dependents": [
-        "swirl-shell-layout"
-      ],
+      "dependents": [],
       "dependencies": [],
-      "dependencyGraph": {
-        "swirl-shell-layout": [
-          "swirl-icon-double-arrow-left"
-        ]
-      }
+      "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-double-arrow-right.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-double-arrow-left.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-double-arrow-right",
+      "tag": "swirl-icon-double-arrow-left",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -18967,14 +19106,20 @@
           "docs": ""
         }
       ],
-      "dependents": [],
+      "dependents": [
+        "swirl-shell-layout"
+      ],
       "dependencies": [],
-      "dependencyGraph": {}
+      "dependencyGraph": {
+        "swirl-shell-layout": [
+          "swirl-icon-double-arrow-left"
+        ]
+      }
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-download.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-double-arrow-right.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-download",
+      "tag": "swirl-icon-double-arrow-right",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -19113,9 +19258,9 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-drag-handle.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-download.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-drag-handle",
+      "tag": "swirl-icon-download",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -19249,24 +19394,165 @@
           "docs": ""
         }
       ],
-      "dependents": [
-        "swirl-option-list-item",
-        "swirl-resource-list-item"
-      ],
+      "dependents": [],
       "dependencies": [],
-      "dependencyGraph": {
-        "swirl-option-list-item": [
-          "swirl-icon-drag-handle"
-        ],
-        "swirl-resource-list-item": [
-          "swirl-icon-drag-handle"
-        ]
-      }
+      "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-edit.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-drag-handle.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-edit",
+      "tag": "swirl-icon-drag-handle",
+      "docs": "",
+      "docsTags": [],
+      "usage": {},
+      "props": [
+        {
+          "name": "color",
+          "type": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+          "complexType": {
+            "original": "SwirlIconColor",
+            "resolved": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+            "references": {
+              "SwirlIconColor": {
+                "location": "import",
+                "path": "../swirl-icon",
+                "id": "src/components/swirl-icon/swirl-icon.tsx::SwirlIconColor"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "color",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "critical",
+              "type": "string"
+            },
+            {
+              "value": "default",
+              "type": "string"
+            },
+            {
+              "value": "disabled",
+              "type": "string"
+            },
+            {
+              "value": "highlight",
+              "type": "string"
+            },
+            {
+              "value": "info",
+              "type": "string"
+            },
+            {
+              "value": "on-action-primary",
+              "type": "string"
+            },
+            {
+              "value": "on-image",
+              "type": "string"
+            },
+            {
+              "value": "on-status",
+              "type": "string"
+            },
+            {
+              "value": "on-surface-highlight",
+              "type": "string"
+            },
+            {
+              "value": "on-surface-highlight-subdued",
+              "type": "string"
+            },
+            {
+              "value": "strong",
+              "type": "string"
+            },
+            {
+              "value": "success",
+              "type": "string"
+            },
+            {
+              "value": "warning",
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "size",
+          "type": "16 | 20 | 24 | 28",
+          "complexType": {
+            "original": "SwirlIconSize",
+            "resolved": "16 | 20 | 24 | 28",
+            "references": {
+              "SwirlIconSize": {
+                "location": "import",
+                "path": "../swirl-icon.types",
+                "id": "src/components/swirl-icon/swirl-icon.types.ts::SwirlIconSize"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "size",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "default": "24",
+          "values": [
+            {
+              "value": "16",
+              "type": "number"
+            },
+            {
+              "value": "20",
+              "type": "number"
+            },
+            {
+              "value": "24",
+              "type": "number"
+            },
+            {
+              "value": "28",
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [
+        {
+          "name": "icon",
+          "docs": ""
+        }
+      ],
+      "dependents": [
+        "swirl-option-list-item",
+        "swirl-resource-list-item"
+      ],
+      "dependencies": [],
+      "dependencyGraph": {
+        "swirl-option-list-item": [
+          "swirl-icon-drag-handle"
+        ],
+        "swirl-resource-list-item": [
+          "swirl-icon-drag-handle"
+        ]
+      }
+    },
+    {
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-edit.tsx",
+      "encapsulation": "shadow",
+      "tag": "swirl-icon-edit",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -26553,9 +26839,9 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-more-horizontal.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-mic-off.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-more-horizontal",
+      "tag": "swirl-icon-mic-off",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -26694,9 +26980,9 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-more-vertikal.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-more-horizontal.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-more-vertikal",
+      "tag": "swirl-icon-more-horizontal",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -26830,20 +27116,14 @@
           "docs": ""
         }
       ],
-      "dependents": [
-        "swirl-lightbox"
-      ],
+      "dependents": [],
       "dependencies": [],
-      "dependencyGraph": {
-        "swirl-lightbox": [
-          "swirl-icon-more-vertikal"
-        ]
-      }
+      "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-news.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-more-vertikal.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-news",
+      "tag": "swirl-icon-more-vertikal",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -26977,14 +27257,20 @@
           "docs": ""
         }
       ],
-      "dependents": [],
+      "dependents": [
+        "swirl-lightbox"
+      ],
       "dependencies": [],
-      "dependencyGraph": {}
+      "dependencyGraph": {
+        "swirl-lightbox": [
+          "swirl-icon-more-vertikal"
+        ]
+      }
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-news-filled.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-news.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-news-filled",
+      "tag": "swirl-icon-news",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -27123,9 +27409,9 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-news-off.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-news-filled.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-news-off",
+      "tag": "swirl-icon-news-filled",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -27264,9 +27550,9 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-notifications.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-news-off.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-notifications",
+      "tag": "swirl-icon-news-off",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -27405,9 +27691,9 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-notifications-active.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-notifications.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-notifications-active",
+      "tag": "swirl-icon-notifications",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -27546,9 +27832,9 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-notifications-off.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-notifications-active.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-notifications-off",
+      "tag": "swirl-icon-notifications-active",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -27687,9 +27973,9 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-open-in-full.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-notifications-off.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-open-in-full",
+      "tag": "swirl-icon-notifications-off",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -27828,9 +28114,9 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-open-in-new.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-open-in-full.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-open-in-new",
+      "tag": "swirl-icon-open-in-full",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -27969,9 +28255,9 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-pause.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-open-in-new.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-pause",
+      "tag": "swirl-icon-open-in-new",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -28110,9 +28396,9 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-pause-circle.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-pause.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-pause-circle",
+      "tag": "swirl-icon-pause",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -28251,9 +28537,9 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-people-alt.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-pause-circle.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-people-alt",
+      "tag": "swirl-icon-pause-circle",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -28392,9 +28678,9 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-person.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-people-alt.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-person",
+      "tag": "swirl-icon-people-alt",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -28528,20 +28814,14 @@
           "docs": ""
         }
       ],
-      "dependents": [
-        "swirl-avatar"
-      ],
+      "dependents": [],
       "dependencies": [],
-      "dependencyGraph": {
-        "swirl-avatar": [
-          "swirl-icon-person"
-        ]
-      }
+      "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-person-off.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-person.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-person-off",
+      "tag": "swirl-icon-person",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -28675,14 +28955,20 @@
           "docs": ""
         }
       ],
-      "dependents": [],
+      "dependents": [
+        "swirl-avatar"
+      ],
       "dependencies": [],
-      "dependencyGraph": {}
+      "dependencyGraph": {
+        "swirl-avatar": [
+          "swirl-icon-person"
+        ]
+      }
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-phone.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-person-off.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-phone",
+      "tag": "swirl-icon-person-off",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -28821,9 +29107,150 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-photo-camera.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-phone.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-photo-camera",
+      "tag": "swirl-icon-phone",
+      "docs": "",
+      "docsTags": [],
+      "usage": {},
+      "props": [
+        {
+          "name": "color",
+          "type": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+          "complexType": {
+            "original": "SwirlIconColor",
+            "resolved": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+            "references": {
+              "SwirlIconColor": {
+                "location": "import",
+                "path": "../swirl-icon",
+                "id": "src/components/swirl-icon/swirl-icon.tsx::SwirlIconColor"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "color",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "critical",
+              "type": "string"
+            },
+            {
+              "value": "default",
+              "type": "string"
+            },
+            {
+              "value": "disabled",
+              "type": "string"
+            },
+            {
+              "value": "highlight",
+              "type": "string"
+            },
+            {
+              "value": "info",
+              "type": "string"
+            },
+            {
+              "value": "on-action-primary",
+              "type": "string"
+            },
+            {
+              "value": "on-image",
+              "type": "string"
+            },
+            {
+              "value": "on-status",
+              "type": "string"
+            },
+            {
+              "value": "on-surface-highlight",
+              "type": "string"
+            },
+            {
+              "value": "on-surface-highlight-subdued",
+              "type": "string"
+            },
+            {
+              "value": "strong",
+              "type": "string"
+            },
+            {
+              "value": "success",
+              "type": "string"
+            },
+            {
+              "value": "warning",
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "size",
+          "type": "16 | 20 | 24 | 28",
+          "complexType": {
+            "original": "SwirlIconSize",
+            "resolved": "16 | 20 | 24 | 28",
+            "references": {
+              "SwirlIconSize": {
+                "location": "import",
+                "path": "../swirl-icon.types",
+                "id": "src/components/swirl-icon/swirl-icon.types.ts::SwirlIconSize"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "size",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "default": "24",
+          "values": [
+            {
+              "value": "16",
+              "type": "number"
+            },
+            {
+              "value": "20",
+              "type": "number"
+            },
+            {
+              "value": "24",
+              "type": "number"
+            },
+            {
+              "value": "28",
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [
+        {
+          "name": "icon",
+          "docs": ""
+        }
+      ],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
+    {
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-photo-camera.tsx",
+      "encapsulation": "shadow",
+      "tag": "swirl-icon-photo-camera",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -29808,9 +30235,9 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-recieved.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-ratio-four-to-three.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-recieved",
+      "tag": "swirl-icon-ratio-four-to-three",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -29949,9 +30376,9 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-remove.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-ratio-freeform.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-remove",
+      "tag": "swirl-icon-ratio-freeform",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -30085,20 +30512,14 @@
           "docs": ""
         }
       ],
-      "dependents": [
-        "swirl-pdf-reader"
-      ],
+      "dependents": [],
       "dependencies": [],
-      "dependencyGraph": {
-        "swirl-pdf-reader": [
-          "swirl-icon-remove"
-        ]
-      }
+      "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-remove-moderator.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-ratio-sixteen-to-nine.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-remove-moderator",
+      "tag": "swirl-icon-ratio-sixteen-to-nine",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -30237,9 +30658,9 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-reply.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-ratio-square.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-reply",
+      "tag": "swirl-icon-ratio-square",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -30378,9 +30799,9 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-report.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-ratio-three-to-four.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-report",
+      "tag": "swirl-icon-ratio-three-to-four",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -30519,9 +30940,9 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-roadmap.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-ratio-three-to-two.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-roadmap",
+      "tag": "swirl-icon-ratio-three-to-two",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -30660,9 +31081,9 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-search.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-recieved.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-search",
+      "tag": "swirl-icon-recieved",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -30796,24 +31217,14 @@
           "docs": ""
         }
       ],
-      "dependents": [
-        "swirl-search",
-        "swirl-select"
-      ],
+      "dependents": [],
       "dependencies": [],
-      "dependencyGraph": {
-        "swirl-search": [
-          "swirl-icon-search"
-        ],
-        "swirl-select": [
-          "swirl-icon-search"
-        ]
-      }
+      "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-search-strong.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-remove.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-search-strong",
+      "tag": "swirl-icon-remove",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -30947,14 +31358,20 @@
           "docs": ""
         }
       ],
-      "dependents": [],
+      "dependents": [
+        "swirl-pdf-reader"
+      ],
       "dependencies": [],
-      "dependencyGraph": {}
+      "dependencyGraph": {
+        "swirl-pdf-reader": [
+          "swirl-icon-remove"
+        ]
+      }
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-secure.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-remove-moderator.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-secure",
+      "tag": "swirl-icon-remove-moderator",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -31093,9 +31510,9 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-send.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-reply.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-send",
+      "tag": "swirl-icon-reply",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -31234,9 +31651,9 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-settings.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-report.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-settings",
+      "tag": "swirl-icon-report",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -31375,9 +31792,9 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-short-text.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-roadmap.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-short-text",
+      "tag": "swirl-icon-roadmap",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -31516,9 +31933,9 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-simplify.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-rotate-left.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-simplify",
+      "tag": "swirl-icon-rotate-left",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -31657,9 +32074,9 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-spellcheck.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-rotate-right.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-spellcheck",
+      "tag": "swirl-icon-rotate-right",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -31798,9 +32215,9 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-stop.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-search.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-stop",
+      "tag": "swirl-icon-search",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -31934,14 +32351,24 @@
           "docs": ""
         }
       ],
-      "dependents": [],
+      "dependents": [
+        "swirl-search",
+        "swirl-select"
+      ],
       "dependencies": [],
-      "dependencyGraph": {}
+      "dependencyGraph": {
+        "swirl-search": [
+          "swirl-icon-search"
+        ],
+        "swirl-select": [
+          "swirl-icon-search"
+        ]
+      }
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-sync.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-search-strong.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-sync",
+      "tag": "swirl-icon-search-strong",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -32080,9 +32507,9 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-tasks.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-secure.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-tasks",
+      "tag": "swirl-icon-secure",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -32221,9 +32648,9 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-tasks-filled.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-send.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-tasks-filled",
+      "tag": "swirl-icon-send",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -32362,9 +32789,9 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-terminal.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-settings.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-terminal",
+      "tag": "swirl-icon-settings",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -32503,9 +32930,9 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-time.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-short-text.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-time",
+      "tag": "swirl-icon-short-text",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -32644,9 +33071,9 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-time-filled.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-simplify.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-time-filled",
+      "tag": "swirl-icon-simplify",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -32785,297 +33212,9 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-today.tsx",
-      "encapsulation": "shadow",
-      "tag": "swirl-icon-today",
-      "docs": "",
-      "docsTags": [],
-      "usage": {},
-      "props": [
-        {
-          "name": "color",
-          "type": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
-          "complexType": {
-            "original": "SwirlIconColor",
-            "resolved": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
-            "references": {
-              "SwirlIconColor": {
-                "location": "import",
-                "path": "../swirl-icon",
-                "id": "src/components/swirl-icon/swirl-icon.tsx::SwirlIconColor"
-              }
-            }
-          },
-          "mutable": false,
-          "attr": "color",
-          "reflectToAttr": false,
-          "docs": "",
-          "docsTags": [],
-          "values": [
-            {
-              "value": "critical",
-              "type": "string"
-            },
-            {
-              "value": "default",
-              "type": "string"
-            },
-            {
-              "value": "disabled",
-              "type": "string"
-            },
-            {
-              "value": "highlight",
-              "type": "string"
-            },
-            {
-              "value": "info",
-              "type": "string"
-            },
-            {
-              "value": "on-action-primary",
-              "type": "string"
-            },
-            {
-              "value": "on-image",
-              "type": "string"
-            },
-            {
-              "value": "on-status",
-              "type": "string"
-            },
-            {
-              "value": "on-surface-highlight",
-              "type": "string"
-            },
-            {
-              "value": "on-surface-highlight-subdued",
-              "type": "string"
-            },
-            {
-              "value": "strong",
-              "type": "string"
-            },
-            {
-              "value": "success",
-              "type": "string"
-            },
-            {
-              "value": "warning",
-              "type": "string"
-            }
-          ],
-          "optional": true,
-          "required": false
-        },
-        {
-          "name": "size",
-          "type": "16 | 20 | 24 | 28",
-          "complexType": {
-            "original": "SwirlIconSize",
-            "resolved": "16 | 20 | 24 | 28",
-            "references": {
-              "SwirlIconSize": {
-                "location": "import",
-                "path": "../swirl-icon.types",
-                "id": "src/components/swirl-icon/swirl-icon.types.ts::SwirlIconSize"
-              }
-            }
-          },
-          "mutable": false,
-          "attr": "size",
-          "reflectToAttr": false,
-          "docs": "",
-          "docsTags": [],
-          "default": "24",
-          "values": [
-            {
-              "value": "16",
-              "type": "number"
-            },
-            {
-              "value": "20",
-              "type": "number"
-            },
-            {
-              "value": "24",
-              "type": "number"
-            },
-            {
-              "value": "28",
-              "type": "number"
-            }
-          ],
-          "optional": false,
-          "required": false
-        }
-      ],
-      "methods": [],
-      "events": [],
-      "listeners": [],
-      "styles": [],
-      "slots": [],
-      "parts": [
-        {
-          "name": "icon",
-          "docs": ""
-        }
-      ],
-      "dependents": [
-        "swirl-date-input"
-      ],
-      "dependencies": [],
-      "dependencyGraph": {
-        "swirl-date-input": [
-          "swirl-icon-today"
-        ]
-      }
-    },
-    {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-today-filled.tsx",
-      "encapsulation": "shadow",
-      "tag": "swirl-icon-today-filled",
-      "docs": "",
-      "docsTags": [],
-      "usage": {},
-      "props": [
-        {
-          "name": "color",
-          "type": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
-          "complexType": {
-            "original": "SwirlIconColor",
-            "resolved": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
-            "references": {
-              "SwirlIconColor": {
-                "location": "import",
-                "path": "../swirl-icon",
-                "id": "src/components/swirl-icon/swirl-icon.tsx::SwirlIconColor"
-              }
-            }
-          },
-          "mutable": false,
-          "attr": "color",
-          "reflectToAttr": false,
-          "docs": "",
-          "docsTags": [],
-          "values": [
-            {
-              "value": "critical",
-              "type": "string"
-            },
-            {
-              "value": "default",
-              "type": "string"
-            },
-            {
-              "value": "disabled",
-              "type": "string"
-            },
-            {
-              "value": "highlight",
-              "type": "string"
-            },
-            {
-              "value": "info",
-              "type": "string"
-            },
-            {
-              "value": "on-action-primary",
-              "type": "string"
-            },
-            {
-              "value": "on-image",
-              "type": "string"
-            },
-            {
-              "value": "on-status",
-              "type": "string"
-            },
-            {
-              "value": "on-surface-highlight",
-              "type": "string"
-            },
-            {
-              "value": "on-surface-highlight-subdued",
-              "type": "string"
-            },
-            {
-              "value": "strong",
-              "type": "string"
-            },
-            {
-              "value": "success",
-              "type": "string"
-            },
-            {
-              "value": "warning",
-              "type": "string"
-            }
-          ],
-          "optional": true,
-          "required": false
-        },
-        {
-          "name": "size",
-          "type": "16 | 20 | 24 | 28",
-          "complexType": {
-            "original": "SwirlIconSize",
-            "resolved": "16 | 20 | 24 | 28",
-            "references": {
-              "SwirlIconSize": {
-                "location": "import",
-                "path": "../swirl-icon.types",
-                "id": "src/components/swirl-icon/swirl-icon.types.ts::SwirlIconSize"
-              }
-            }
-          },
-          "mutable": false,
-          "attr": "size",
-          "reflectToAttr": false,
-          "docs": "",
-          "docsTags": [],
-          "default": "24",
-          "values": [
-            {
-              "value": "16",
-              "type": "number"
-            },
-            {
-              "value": "20",
-              "type": "number"
-            },
-            {
-              "value": "24",
-              "type": "number"
-            },
-            {
-              "value": "28",
-              "type": "number"
-            }
-          ],
-          "optional": false,
-          "required": false
-        }
-      ],
-      "methods": [],
-      "events": [],
-      "listeners": [],
-      "styles": [],
-      "slots": [],
-      "parts": [
-        {
-          "name": "icon",
-          "docs": ""
-        }
-      ],
-      "dependents": [],
-      "dependencies": [],
-      "dependencyGraph": {}
-    },
-    {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-translate.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-spellcheck.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-translate",
+      "tag": "swirl-icon-spellcheck",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -33214,9 +33353,9 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-tree-structure.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-stop.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-tree-structure",
+      "tag": "swirl-icon-stop",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -33355,9 +33494,9 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-undo.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-sync.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-undo",
+      "tag": "swirl-icon-sync",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -33496,9 +33635,9 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-unlock-person.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-tasks.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-unlock-person",
+      "tag": "swirl-icon-tasks",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -33637,9 +33776,1425 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-user-add.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-tasks-filled.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-user-add",
+      "tag": "swirl-icon-tasks-filled",
+      "docs": "",
+      "docsTags": [],
+      "usage": {},
+      "props": [
+        {
+          "name": "color",
+          "type": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+          "complexType": {
+            "original": "SwirlIconColor",
+            "resolved": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+            "references": {
+              "SwirlIconColor": {
+                "location": "import",
+                "path": "../swirl-icon",
+                "id": "src/components/swirl-icon/swirl-icon.tsx::SwirlIconColor"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "color",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "critical",
+              "type": "string"
+            },
+            {
+              "value": "default",
+              "type": "string"
+            },
+            {
+              "value": "disabled",
+              "type": "string"
+            },
+            {
+              "value": "highlight",
+              "type": "string"
+            },
+            {
+              "value": "info",
+              "type": "string"
+            },
+            {
+              "value": "on-action-primary",
+              "type": "string"
+            },
+            {
+              "value": "on-image",
+              "type": "string"
+            },
+            {
+              "value": "on-status",
+              "type": "string"
+            },
+            {
+              "value": "on-surface-highlight",
+              "type": "string"
+            },
+            {
+              "value": "on-surface-highlight-subdued",
+              "type": "string"
+            },
+            {
+              "value": "strong",
+              "type": "string"
+            },
+            {
+              "value": "success",
+              "type": "string"
+            },
+            {
+              "value": "warning",
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "size",
+          "type": "16 | 20 | 24 | 28",
+          "complexType": {
+            "original": "SwirlIconSize",
+            "resolved": "16 | 20 | 24 | 28",
+            "references": {
+              "SwirlIconSize": {
+                "location": "import",
+                "path": "../swirl-icon.types",
+                "id": "src/components/swirl-icon/swirl-icon.types.ts::SwirlIconSize"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "size",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "default": "24",
+          "values": [
+            {
+              "value": "16",
+              "type": "number"
+            },
+            {
+              "value": "20",
+              "type": "number"
+            },
+            {
+              "value": "24",
+              "type": "number"
+            },
+            {
+              "value": "28",
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [
+        {
+          "name": "icon",
+          "docs": ""
+        }
+      ],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
+    {
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-terminal.tsx",
+      "encapsulation": "shadow",
+      "tag": "swirl-icon-terminal",
+      "docs": "",
+      "docsTags": [],
+      "usage": {},
+      "props": [
+        {
+          "name": "color",
+          "type": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+          "complexType": {
+            "original": "SwirlIconColor",
+            "resolved": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+            "references": {
+              "SwirlIconColor": {
+                "location": "import",
+                "path": "../swirl-icon",
+                "id": "src/components/swirl-icon/swirl-icon.tsx::SwirlIconColor"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "color",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "critical",
+              "type": "string"
+            },
+            {
+              "value": "default",
+              "type": "string"
+            },
+            {
+              "value": "disabled",
+              "type": "string"
+            },
+            {
+              "value": "highlight",
+              "type": "string"
+            },
+            {
+              "value": "info",
+              "type": "string"
+            },
+            {
+              "value": "on-action-primary",
+              "type": "string"
+            },
+            {
+              "value": "on-image",
+              "type": "string"
+            },
+            {
+              "value": "on-status",
+              "type": "string"
+            },
+            {
+              "value": "on-surface-highlight",
+              "type": "string"
+            },
+            {
+              "value": "on-surface-highlight-subdued",
+              "type": "string"
+            },
+            {
+              "value": "strong",
+              "type": "string"
+            },
+            {
+              "value": "success",
+              "type": "string"
+            },
+            {
+              "value": "warning",
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "size",
+          "type": "16 | 20 | 24 | 28",
+          "complexType": {
+            "original": "SwirlIconSize",
+            "resolved": "16 | 20 | 24 | 28",
+            "references": {
+              "SwirlIconSize": {
+                "location": "import",
+                "path": "../swirl-icon.types",
+                "id": "src/components/swirl-icon/swirl-icon.types.ts::SwirlIconSize"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "size",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "default": "24",
+          "values": [
+            {
+              "value": "16",
+              "type": "number"
+            },
+            {
+              "value": "20",
+              "type": "number"
+            },
+            {
+              "value": "24",
+              "type": "number"
+            },
+            {
+              "value": "28",
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [
+        {
+          "name": "icon",
+          "docs": ""
+        }
+      ],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
+    {
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-time.tsx",
+      "encapsulation": "shadow",
+      "tag": "swirl-icon-time",
+      "docs": "",
+      "docsTags": [],
+      "usage": {},
+      "props": [
+        {
+          "name": "color",
+          "type": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+          "complexType": {
+            "original": "SwirlIconColor",
+            "resolved": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+            "references": {
+              "SwirlIconColor": {
+                "location": "import",
+                "path": "../swirl-icon",
+                "id": "src/components/swirl-icon/swirl-icon.tsx::SwirlIconColor"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "color",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "critical",
+              "type": "string"
+            },
+            {
+              "value": "default",
+              "type": "string"
+            },
+            {
+              "value": "disabled",
+              "type": "string"
+            },
+            {
+              "value": "highlight",
+              "type": "string"
+            },
+            {
+              "value": "info",
+              "type": "string"
+            },
+            {
+              "value": "on-action-primary",
+              "type": "string"
+            },
+            {
+              "value": "on-image",
+              "type": "string"
+            },
+            {
+              "value": "on-status",
+              "type": "string"
+            },
+            {
+              "value": "on-surface-highlight",
+              "type": "string"
+            },
+            {
+              "value": "on-surface-highlight-subdued",
+              "type": "string"
+            },
+            {
+              "value": "strong",
+              "type": "string"
+            },
+            {
+              "value": "success",
+              "type": "string"
+            },
+            {
+              "value": "warning",
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "size",
+          "type": "16 | 20 | 24 | 28",
+          "complexType": {
+            "original": "SwirlIconSize",
+            "resolved": "16 | 20 | 24 | 28",
+            "references": {
+              "SwirlIconSize": {
+                "location": "import",
+                "path": "../swirl-icon.types",
+                "id": "src/components/swirl-icon/swirl-icon.types.ts::SwirlIconSize"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "size",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "default": "24",
+          "values": [
+            {
+              "value": "16",
+              "type": "number"
+            },
+            {
+              "value": "20",
+              "type": "number"
+            },
+            {
+              "value": "24",
+              "type": "number"
+            },
+            {
+              "value": "28",
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [
+        {
+          "name": "icon",
+          "docs": ""
+        }
+      ],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
+    {
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-time-filled.tsx",
+      "encapsulation": "shadow",
+      "tag": "swirl-icon-time-filled",
+      "docs": "",
+      "docsTags": [],
+      "usage": {},
+      "props": [
+        {
+          "name": "color",
+          "type": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+          "complexType": {
+            "original": "SwirlIconColor",
+            "resolved": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+            "references": {
+              "SwirlIconColor": {
+                "location": "import",
+                "path": "../swirl-icon",
+                "id": "src/components/swirl-icon/swirl-icon.tsx::SwirlIconColor"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "color",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "critical",
+              "type": "string"
+            },
+            {
+              "value": "default",
+              "type": "string"
+            },
+            {
+              "value": "disabled",
+              "type": "string"
+            },
+            {
+              "value": "highlight",
+              "type": "string"
+            },
+            {
+              "value": "info",
+              "type": "string"
+            },
+            {
+              "value": "on-action-primary",
+              "type": "string"
+            },
+            {
+              "value": "on-image",
+              "type": "string"
+            },
+            {
+              "value": "on-status",
+              "type": "string"
+            },
+            {
+              "value": "on-surface-highlight",
+              "type": "string"
+            },
+            {
+              "value": "on-surface-highlight-subdued",
+              "type": "string"
+            },
+            {
+              "value": "strong",
+              "type": "string"
+            },
+            {
+              "value": "success",
+              "type": "string"
+            },
+            {
+              "value": "warning",
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "size",
+          "type": "16 | 20 | 24 | 28",
+          "complexType": {
+            "original": "SwirlIconSize",
+            "resolved": "16 | 20 | 24 | 28",
+            "references": {
+              "SwirlIconSize": {
+                "location": "import",
+                "path": "../swirl-icon.types",
+                "id": "src/components/swirl-icon/swirl-icon.types.ts::SwirlIconSize"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "size",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "default": "24",
+          "values": [
+            {
+              "value": "16",
+              "type": "number"
+            },
+            {
+              "value": "20",
+              "type": "number"
+            },
+            {
+              "value": "24",
+              "type": "number"
+            },
+            {
+              "value": "28",
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [
+        {
+          "name": "icon",
+          "docs": ""
+        }
+      ],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
+    {
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-today.tsx",
+      "encapsulation": "shadow",
+      "tag": "swirl-icon-today",
+      "docs": "",
+      "docsTags": [],
+      "usage": {},
+      "props": [
+        {
+          "name": "color",
+          "type": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+          "complexType": {
+            "original": "SwirlIconColor",
+            "resolved": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+            "references": {
+              "SwirlIconColor": {
+                "location": "import",
+                "path": "../swirl-icon",
+                "id": "src/components/swirl-icon/swirl-icon.tsx::SwirlIconColor"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "color",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "critical",
+              "type": "string"
+            },
+            {
+              "value": "default",
+              "type": "string"
+            },
+            {
+              "value": "disabled",
+              "type": "string"
+            },
+            {
+              "value": "highlight",
+              "type": "string"
+            },
+            {
+              "value": "info",
+              "type": "string"
+            },
+            {
+              "value": "on-action-primary",
+              "type": "string"
+            },
+            {
+              "value": "on-image",
+              "type": "string"
+            },
+            {
+              "value": "on-status",
+              "type": "string"
+            },
+            {
+              "value": "on-surface-highlight",
+              "type": "string"
+            },
+            {
+              "value": "on-surface-highlight-subdued",
+              "type": "string"
+            },
+            {
+              "value": "strong",
+              "type": "string"
+            },
+            {
+              "value": "success",
+              "type": "string"
+            },
+            {
+              "value": "warning",
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "size",
+          "type": "16 | 20 | 24 | 28",
+          "complexType": {
+            "original": "SwirlIconSize",
+            "resolved": "16 | 20 | 24 | 28",
+            "references": {
+              "SwirlIconSize": {
+                "location": "import",
+                "path": "../swirl-icon.types",
+                "id": "src/components/swirl-icon/swirl-icon.types.ts::SwirlIconSize"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "size",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "default": "24",
+          "values": [
+            {
+              "value": "16",
+              "type": "number"
+            },
+            {
+              "value": "20",
+              "type": "number"
+            },
+            {
+              "value": "24",
+              "type": "number"
+            },
+            {
+              "value": "28",
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [
+        {
+          "name": "icon",
+          "docs": ""
+        }
+      ],
+      "dependents": [
+        "swirl-date-input"
+      ],
+      "dependencies": [],
+      "dependencyGraph": {
+        "swirl-date-input": [
+          "swirl-icon-today"
+        ]
+      }
+    },
+    {
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-today-filled.tsx",
+      "encapsulation": "shadow",
+      "tag": "swirl-icon-today-filled",
+      "docs": "",
+      "docsTags": [],
+      "usage": {},
+      "props": [
+        {
+          "name": "color",
+          "type": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+          "complexType": {
+            "original": "SwirlIconColor",
+            "resolved": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+            "references": {
+              "SwirlIconColor": {
+                "location": "import",
+                "path": "../swirl-icon",
+                "id": "src/components/swirl-icon/swirl-icon.tsx::SwirlIconColor"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "color",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "critical",
+              "type": "string"
+            },
+            {
+              "value": "default",
+              "type": "string"
+            },
+            {
+              "value": "disabled",
+              "type": "string"
+            },
+            {
+              "value": "highlight",
+              "type": "string"
+            },
+            {
+              "value": "info",
+              "type": "string"
+            },
+            {
+              "value": "on-action-primary",
+              "type": "string"
+            },
+            {
+              "value": "on-image",
+              "type": "string"
+            },
+            {
+              "value": "on-status",
+              "type": "string"
+            },
+            {
+              "value": "on-surface-highlight",
+              "type": "string"
+            },
+            {
+              "value": "on-surface-highlight-subdued",
+              "type": "string"
+            },
+            {
+              "value": "strong",
+              "type": "string"
+            },
+            {
+              "value": "success",
+              "type": "string"
+            },
+            {
+              "value": "warning",
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "size",
+          "type": "16 | 20 | 24 | 28",
+          "complexType": {
+            "original": "SwirlIconSize",
+            "resolved": "16 | 20 | 24 | 28",
+            "references": {
+              "SwirlIconSize": {
+                "location": "import",
+                "path": "../swirl-icon.types",
+                "id": "src/components/swirl-icon/swirl-icon.types.ts::SwirlIconSize"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "size",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "default": "24",
+          "values": [
+            {
+              "value": "16",
+              "type": "number"
+            },
+            {
+              "value": "20",
+              "type": "number"
+            },
+            {
+              "value": "24",
+              "type": "number"
+            },
+            {
+              "value": "28",
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [
+        {
+          "name": "icon",
+          "docs": ""
+        }
+      ],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
+    {
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-translate.tsx",
+      "encapsulation": "shadow",
+      "tag": "swirl-icon-translate",
+      "docs": "",
+      "docsTags": [],
+      "usage": {},
+      "props": [
+        {
+          "name": "color",
+          "type": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+          "complexType": {
+            "original": "SwirlIconColor",
+            "resolved": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+            "references": {
+              "SwirlIconColor": {
+                "location": "import",
+                "path": "../swirl-icon",
+                "id": "src/components/swirl-icon/swirl-icon.tsx::SwirlIconColor"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "color",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "critical",
+              "type": "string"
+            },
+            {
+              "value": "default",
+              "type": "string"
+            },
+            {
+              "value": "disabled",
+              "type": "string"
+            },
+            {
+              "value": "highlight",
+              "type": "string"
+            },
+            {
+              "value": "info",
+              "type": "string"
+            },
+            {
+              "value": "on-action-primary",
+              "type": "string"
+            },
+            {
+              "value": "on-image",
+              "type": "string"
+            },
+            {
+              "value": "on-status",
+              "type": "string"
+            },
+            {
+              "value": "on-surface-highlight",
+              "type": "string"
+            },
+            {
+              "value": "on-surface-highlight-subdued",
+              "type": "string"
+            },
+            {
+              "value": "strong",
+              "type": "string"
+            },
+            {
+              "value": "success",
+              "type": "string"
+            },
+            {
+              "value": "warning",
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "size",
+          "type": "16 | 20 | 24 | 28",
+          "complexType": {
+            "original": "SwirlIconSize",
+            "resolved": "16 | 20 | 24 | 28",
+            "references": {
+              "SwirlIconSize": {
+                "location": "import",
+                "path": "../swirl-icon.types",
+                "id": "src/components/swirl-icon/swirl-icon.types.ts::SwirlIconSize"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "size",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "default": "24",
+          "values": [
+            {
+              "value": "16",
+              "type": "number"
+            },
+            {
+              "value": "20",
+              "type": "number"
+            },
+            {
+              "value": "24",
+              "type": "number"
+            },
+            {
+              "value": "28",
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [
+        {
+          "name": "icon",
+          "docs": ""
+        }
+      ],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
+    {
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-tree-structure.tsx",
+      "encapsulation": "shadow",
+      "tag": "swirl-icon-tree-structure",
+      "docs": "",
+      "docsTags": [],
+      "usage": {},
+      "props": [
+        {
+          "name": "color",
+          "type": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+          "complexType": {
+            "original": "SwirlIconColor",
+            "resolved": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+            "references": {
+              "SwirlIconColor": {
+                "location": "import",
+                "path": "../swirl-icon",
+                "id": "src/components/swirl-icon/swirl-icon.tsx::SwirlIconColor"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "color",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "critical",
+              "type": "string"
+            },
+            {
+              "value": "default",
+              "type": "string"
+            },
+            {
+              "value": "disabled",
+              "type": "string"
+            },
+            {
+              "value": "highlight",
+              "type": "string"
+            },
+            {
+              "value": "info",
+              "type": "string"
+            },
+            {
+              "value": "on-action-primary",
+              "type": "string"
+            },
+            {
+              "value": "on-image",
+              "type": "string"
+            },
+            {
+              "value": "on-status",
+              "type": "string"
+            },
+            {
+              "value": "on-surface-highlight",
+              "type": "string"
+            },
+            {
+              "value": "on-surface-highlight-subdued",
+              "type": "string"
+            },
+            {
+              "value": "strong",
+              "type": "string"
+            },
+            {
+              "value": "success",
+              "type": "string"
+            },
+            {
+              "value": "warning",
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "size",
+          "type": "16 | 20 | 24 | 28",
+          "complexType": {
+            "original": "SwirlIconSize",
+            "resolved": "16 | 20 | 24 | 28",
+            "references": {
+              "SwirlIconSize": {
+                "location": "import",
+                "path": "../swirl-icon.types",
+                "id": "src/components/swirl-icon/swirl-icon.types.ts::SwirlIconSize"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "size",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "default": "24",
+          "values": [
+            {
+              "value": "16",
+              "type": "number"
+            },
+            {
+              "value": "20",
+              "type": "number"
+            },
+            {
+              "value": "24",
+              "type": "number"
+            },
+            {
+              "value": "28",
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [
+        {
+          "name": "icon",
+          "docs": ""
+        }
+      ],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
+    {
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-undo.tsx",
+      "encapsulation": "shadow",
+      "tag": "swirl-icon-undo",
+      "docs": "",
+      "docsTags": [],
+      "usage": {},
+      "props": [
+        {
+          "name": "color",
+          "type": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+          "complexType": {
+            "original": "SwirlIconColor",
+            "resolved": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+            "references": {
+              "SwirlIconColor": {
+                "location": "import",
+                "path": "../swirl-icon",
+                "id": "src/components/swirl-icon/swirl-icon.tsx::SwirlIconColor"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "color",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "critical",
+              "type": "string"
+            },
+            {
+              "value": "default",
+              "type": "string"
+            },
+            {
+              "value": "disabled",
+              "type": "string"
+            },
+            {
+              "value": "highlight",
+              "type": "string"
+            },
+            {
+              "value": "info",
+              "type": "string"
+            },
+            {
+              "value": "on-action-primary",
+              "type": "string"
+            },
+            {
+              "value": "on-image",
+              "type": "string"
+            },
+            {
+              "value": "on-status",
+              "type": "string"
+            },
+            {
+              "value": "on-surface-highlight",
+              "type": "string"
+            },
+            {
+              "value": "on-surface-highlight-subdued",
+              "type": "string"
+            },
+            {
+              "value": "strong",
+              "type": "string"
+            },
+            {
+              "value": "success",
+              "type": "string"
+            },
+            {
+              "value": "warning",
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "size",
+          "type": "16 | 20 | 24 | 28",
+          "complexType": {
+            "original": "SwirlIconSize",
+            "resolved": "16 | 20 | 24 | 28",
+            "references": {
+              "SwirlIconSize": {
+                "location": "import",
+                "path": "../swirl-icon.types",
+                "id": "src/components/swirl-icon/swirl-icon.types.ts::SwirlIconSize"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "size",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "default": "24",
+          "values": [
+            {
+              "value": "16",
+              "type": "number"
+            },
+            {
+              "value": "20",
+              "type": "number"
+            },
+            {
+              "value": "24",
+              "type": "number"
+            },
+            {
+              "value": "28",
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [
+        {
+          "name": "icon",
+          "docs": ""
+        }
+      ],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
+    {
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-unlock-person.tsx",
+      "encapsulation": "shadow",
+      "tag": "swirl-icon-unlock-person",
+      "docs": "",
+      "docsTags": [],
+      "usage": {},
+      "props": [
+        {
+          "name": "color",
+          "type": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+          "complexType": {
+            "original": "SwirlIconColor",
+            "resolved": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+            "references": {
+              "SwirlIconColor": {
+                "location": "import",
+                "path": "../swirl-icon",
+                "id": "src/components/swirl-icon/swirl-icon.tsx::SwirlIconColor"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "color",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "critical",
+              "type": "string"
+            },
+            {
+              "value": "default",
+              "type": "string"
+            },
+            {
+              "value": "disabled",
+              "type": "string"
+            },
+            {
+              "value": "highlight",
+              "type": "string"
+            },
+            {
+              "value": "info",
+              "type": "string"
+            },
+            {
+              "value": "on-action-primary",
+              "type": "string"
+            },
+            {
+              "value": "on-image",
+              "type": "string"
+            },
+            {
+              "value": "on-status",
+              "type": "string"
+            },
+            {
+              "value": "on-surface-highlight",
+              "type": "string"
+            },
+            {
+              "value": "on-surface-highlight-subdued",
+              "type": "string"
+            },
+            {
+              "value": "strong",
+              "type": "string"
+            },
+            {
+              "value": "success",
+              "type": "string"
+            },
+            {
+              "value": "warning",
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "size",
+          "type": "16 | 20 | 24 | 28",
+          "complexType": {
+            "original": "SwirlIconSize",
+            "resolved": "16 | 20 | 24 | 28",
+            "references": {
+              "SwirlIconSize": {
+                "location": "import",
+                "path": "../swirl-icon.types",
+                "id": "src/components/swirl-icon/swirl-icon.types.ts::SwirlIconSize"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "size",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "default": "24",
+          "values": [
+            {
+              "value": "16",
+              "type": "number"
+            },
+            {
+              "value": "20",
+              "type": "number"
+            },
+            {
+              "value": "24",
+              "type": "number"
+            },
+            {
+              "value": "28",
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [
+        {
+          "name": "icon",
+          "docs": ""
+        }
+      ],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
+    {
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-user-add.tsx",
+      "encapsulation": "shadow",
+      "tag": "swirl-icon-user-add",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -33780,7 +35335,148 @@
     {
       "filePath": "src/components/swirl-icon/icons/swirl-icon-user-assign.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-user-assign",
+      "tag": "swirl-icon-user-assign",
+      "docs": "",
+      "docsTags": [],
+      "usage": {},
+      "props": [
+        {
+          "name": "color",
+          "type": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+          "complexType": {
+            "original": "SwirlIconColor",
+            "resolved": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+            "references": {
+              "SwirlIconColor": {
+                "location": "import",
+                "path": "../swirl-icon",
+                "id": "src/components/swirl-icon/swirl-icon.tsx::SwirlIconColor"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "color",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "critical",
+              "type": "string"
+            },
+            {
+              "value": "default",
+              "type": "string"
+            },
+            {
+              "value": "disabled",
+              "type": "string"
+            },
+            {
+              "value": "highlight",
+              "type": "string"
+            },
+            {
+              "value": "info",
+              "type": "string"
+            },
+            {
+              "value": "on-action-primary",
+              "type": "string"
+            },
+            {
+              "value": "on-image",
+              "type": "string"
+            },
+            {
+              "value": "on-status",
+              "type": "string"
+            },
+            {
+              "value": "on-surface-highlight",
+              "type": "string"
+            },
+            {
+              "value": "on-surface-highlight-subdued",
+              "type": "string"
+            },
+            {
+              "value": "strong",
+              "type": "string"
+            },
+            {
+              "value": "success",
+              "type": "string"
+            },
+            {
+              "value": "warning",
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "size",
+          "type": "16 | 20 | 24 | 28",
+          "complexType": {
+            "original": "SwirlIconSize",
+            "resolved": "16 | 20 | 24 | 28",
+            "references": {
+              "SwirlIconSize": {
+                "location": "import",
+                "path": "../swirl-icon.types",
+                "id": "src/components/swirl-icon/swirl-icon.types.ts::SwirlIconSize"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "size",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "default": "24",
+          "values": [
+            {
+              "value": "16",
+              "type": "number"
+            },
+            {
+              "value": "20",
+              "type": "number"
+            },
+            {
+              "value": "24",
+              "type": "number"
+            },
+            {
+              "value": "28",
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [
+        {
+          "name": "icon",
+          "docs": ""
+        }
+      ],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
+    {
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-video-camera.tsx",
+      "encapsulation": "shadow",
+      "tag": "swirl-icon-video-camera",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -33919,9 +35615,9 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-video-camera.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-video-camera-off.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-video-camera",
+      "tag": "swirl-icon-video-camera-off",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -34201,156 +35897,444 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-visibility.tsx",
-      "encapsulation": "shadow",
-      "tag": "swirl-icon-visibility",
-      "docs": "",
-      "docsTags": [],
-      "usage": {},
-      "props": [
-        {
-          "name": "color",
-          "type": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
-          "complexType": {
-            "original": "SwirlIconColor",
-            "resolved": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
-            "references": {
-              "SwirlIconColor": {
-                "location": "import",
-                "path": "../swirl-icon",
-                "id": "src/components/swirl-icon/swirl-icon.tsx::SwirlIconColor"
-              }
-            }
-          },
-          "mutable": false,
-          "attr": "color",
-          "reflectToAttr": false,
-          "docs": "",
-          "docsTags": [],
-          "values": [
-            {
-              "value": "critical",
-              "type": "string"
-            },
-            {
-              "value": "default",
-              "type": "string"
-            },
-            {
-              "value": "disabled",
-              "type": "string"
-            },
-            {
-              "value": "highlight",
-              "type": "string"
-            },
-            {
-              "value": "info",
-              "type": "string"
-            },
-            {
-              "value": "on-action-primary",
-              "type": "string"
-            },
-            {
-              "value": "on-image",
-              "type": "string"
-            },
-            {
-              "value": "on-status",
-              "type": "string"
-            },
-            {
-              "value": "on-surface-highlight",
-              "type": "string"
-            },
-            {
-              "value": "on-surface-highlight-subdued",
-              "type": "string"
-            },
-            {
-              "value": "strong",
-              "type": "string"
-            },
-            {
-              "value": "success",
-              "type": "string"
-            },
-            {
-              "value": "warning",
-              "type": "string"
-            }
-          ],
-          "optional": true,
-          "required": false
-        },
-        {
-          "name": "size",
-          "type": "16 | 20 | 24 | 28",
-          "complexType": {
-            "original": "SwirlIconSize",
-            "resolved": "16 | 20 | 24 | 28",
-            "references": {
-              "SwirlIconSize": {
-                "location": "import",
-                "path": "../swirl-icon.types",
-                "id": "src/components/swirl-icon/swirl-icon.types.ts::SwirlIconSize"
-              }
-            }
-          },
-          "mutable": false,
-          "attr": "size",
-          "reflectToAttr": false,
-          "docs": "",
-          "docsTags": [],
-          "default": "24",
-          "values": [
-            {
-              "value": "16",
-              "type": "number"
-            },
-            {
-              "value": "20",
-              "type": "number"
-            },
-            {
-              "value": "24",
-              "type": "number"
-            },
-            {
-              "value": "28",
-              "type": "number"
-            }
-          ],
-          "optional": false,
-          "required": false
-        }
-      ],
-      "methods": [],
-      "events": [],
-      "listeners": [],
-      "styles": [],
-      "slots": [],
-      "parts": [
-        {
-          "name": "icon",
-          "docs": ""
-        }
-      ],
-      "dependents": [
-        "swirl-text-input"
-      ],
-      "dependencies": [],
-      "dependencyGraph": {
-        "swirl-text-input": [
-          "swirl-icon-visibility"
-        ]
-      }
-    },
-    {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-visibility-off.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-visibility.tsx",
+      "encapsulation": "shadow",
+      "tag": "swirl-icon-visibility",
+      "docs": "",
+      "docsTags": [],
+      "usage": {},
+      "props": [
+        {
+          "name": "color",
+          "type": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+          "complexType": {
+            "original": "SwirlIconColor",
+            "resolved": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+            "references": {
+              "SwirlIconColor": {
+                "location": "import",
+                "path": "../swirl-icon",
+                "id": "src/components/swirl-icon/swirl-icon.tsx::SwirlIconColor"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "color",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "critical",
+              "type": "string"
+            },
+            {
+              "value": "default",
+              "type": "string"
+            },
+            {
+              "value": "disabled",
+              "type": "string"
+            },
+            {
+              "value": "highlight",
+              "type": "string"
+            },
+            {
+              "value": "info",
+              "type": "string"
+            },
+            {
+              "value": "on-action-primary",
+              "type": "string"
+            },
+            {
+              "value": "on-image",
+              "type": "string"
+            },
+            {
+              "value": "on-status",
+              "type": "string"
+            },
+            {
+              "value": "on-surface-highlight",
+              "type": "string"
+            },
+            {
+              "value": "on-surface-highlight-subdued",
+              "type": "string"
+            },
+            {
+              "value": "strong",
+              "type": "string"
+            },
+            {
+              "value": "success",
+              "type": "string"
+            },
+            {
+              "value": "warning",
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "size",
+          "type": "16 | 20 | 24 | 28",
+          "complexType": {
+            "original": "SwirlIconSize",
+            "resolved": "16 | 20 | 24 | 28",
+            "references": {
+              "SwirlIconSize": {
+                "location": "import",
+                "path": "../swirl-icon.types",
+                "id": "src/components/swirl-icon/swirl-icon.types.ts::SwirlIconSize"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "size",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "default": "24",
+          "values": [
+            {
+              "value": "16",
+              "type": "number"
+            },
+            {
+              "value": "20",
+              "type": "number"
+            },
+            {
+              "value": "24",
+              "type": "number"
+            },
+            {
+              "value": "28",
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [
+        {
+          "name": "icon",
+          "docs": ""
+        }
+      ],
+      "dependents": [
+        "swirl-text-input"
+      ],
+      "dependencies": [],
+      "dependencyGraph": {
+        "swirl-text-input": [
+          "swirl-icon-visibility"
+        ]
+      }
+    },
+    {
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-visibility-off.tsx",
+      "encapsulation": "shadow",
+      "tag": "swirl-icon-visibility-off",
+      "docs": "",
+      "docsTags": [],
+      "usage": {},
+      "props": [
+        {
+          "name": "color",
+          "type": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+          "complexType": {
+            "original": "SwirlIconColor",
+            "resolved": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+            "references": {
+              "SwirlIconColor": {
+                "location": "import",
+                "path": "../swirl-icon",
+                "id": "src/components/swirl-icon/swirl-icon.tsx::SwirlIconColor"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "color",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "critical",
+              "type": "string"
+            },
+            {
+              "value": "default",
+              "type": "string"
+            },
+            {
+              "value": "disabled",
+              "type": "string"
+            },
+            {
+              "value": "highlight",
+              "type": "string"
+            },
+            {
+              "value": "info",
+              "type": "string"
+            },
+            {
+              "value": "on-action-primary",
+              "type": "string"
+            },
+            {
+              "value": "on-image",
+              "type": "string"
+            },
+            {
+              "value": "on-status",
+              "type": "string"
+            },
+            {
+              "value": "on-surface-highlight",
+              "type": "string"
+            },
+            {
+              "value": "on-surface-highlight-subdued",
+              "type": "string"
+            },
+            {
+              "value": "strong",
+              "type": "string"
+            },
+            {
+              "value": "success",
+              "type": "string"
+            },
+            {
+              "value": "warning",
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "size",
+          "type": "16 | 20 | 24 | 28",
+          "complexType": {
+            "original": "SwirlIconSize",
+            "resolved": "16 | 20 | 24 | 28",
+            "references": {
+              "SwirlIconSize": {
+                "location": "import",
+                "path": "../swirl-icon.types",
+                "id": "src/components/swirl-icon/swirl-icon.types.ts::SwirlIconSize"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "size",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "default": "24",
+          "values": [
+            {
+              "value": "16",
+              "type": "number"
+            },
+            {
+              "value": "20",
+              "type": "number"
+            },
+            {
+              "value": "24",
+              "type": "number"
+            },
+            {
+              "value": "28",
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [
+        {
+          "name": "icon",
+          "docs": ""
+        }
+      ],
+      "dependents": [
+        "swirl-text-input"
+      ],
+      "dependencies": [],
+      "dependencyGraph": {
+        "swirl-text-input": [
+          "swirl-icon-visibility-off"
+        ]
+      }
+    },
+    {
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-voice.tsx",
+      "encapsulation": "shadow",
+      "tag": "swirl-icon-voice",
+      "docs": "",
+      "docsTags": [],
+      "usage": {},
+      "props": [
+        {
+          "name": "color",
+          "type": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+          "complexType": {
+            "original": "SwirlIconColor",
+            "resolved": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+            "references": {
+              "SwirlIconColor": {
+                "location": "import",
+                "path": "../swirl-icon",
+                "id": "src/components/swirl-icon/swirl-icon.tsx::SwirlIconColor"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "color",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "critical",
+              "type": "string"
+            },
+            {
+              "value": "default",
+              "type": "string"
+            },
+            {
+              "value": "disabled",
+              "type": "string"
+            },
+            {
+              "value": "highlight",
+              "type": "string"
+            },
+            {
+              "value": "info",
+              "type": "string"
+            },
+            {
+              "value": "on-action-primary",
+              "type": "string"
+            },
+            {
+              "value": "on-image",
+              "type": "string"
+            },
+            {
+              "value": "on-status",
+              "type": "string"
+            },
+            {
+              "value": "on-surface-highlight",
+              "type": "string"
+            },
+            {
+              "value": "on-surface-highlight-subdued",
+              "type": "string"
+            },
+            {
+              "value": "strong",
+              "type": "string"
+            },
+            {
+              "value": "success",
+              "type": "string"
+            },
+            {
+              "value": "warning",
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "size",
+          "type": "16 | 20 | 24 | 28",
+          "complexType": {
+            "original": "SwirlIconSize",
+            "resolved": "16 | 20 | 24 | 28",
+            "references": {
+              "SwirlIconSize": {
+                "location": "import",
+                "path": "../swirl-icon.types",
+                "id": "src/components/swirl-icon/swirl-icon.types.ts::SwirlIconSize"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "size",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "default": "24",
+          "values": [
+            {
+              "value": "16",
+              "type": "number"
+            },
+            {
+              "value": "20",
+              "type": "number"
+            },
+            {
+              "value": "24",
+              "type": "number"
+            },
+            {
+              "value": "28",
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [
+        {
+          "name": "icon",
+          "docs": ""
+        }
+      ],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
+    {
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-warning.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-visibility-off",
+      "tag": "swirl-icon-warning",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -34485,19 +36469,19 @@
         }
       ],
       "dependents": [
-        "swirl-text-input"
+        "swirl-inline-notification"
       ],
       "dependencies": [],
       "dependencyGraph": {
-        "swirl-text-input": [
-          "swirl-icon-visibility-off"
+        "swirl-inline-notification": [
+          "swirl-icon-warning"
         ]
       }
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-voice.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-web-asset.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-voice",
+      "tag": "swirl-icon-web-asset",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -34636,9 +36620,9 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/swirl-icon/icons/swirl-icon-warning.tsx",
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-web-asset-off.tsx",
       "encapsulation": "shadow",
-      "tag": "swirl-icon-warning",
+      "tag": "swirl-icon-web-asset-off",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -34772,15 +36756,9 @@
           "docs": ""
         }
       ],
-      "dependents": [
-        "swirl-inline-notification"
-      ],
+      "dependents": [],
       "dependencies": [],
-      "dependencyGraph": {
-        "swirl-inline-notification": [
-          "swirl-icon-warning"
-        ]
-      }
+      "dependencyGraph": {}
     },
     {
       "filePath": "src/components/swirl-icon/icons/swirl-icon-work.tsx",
@@ -35900,7 +37878,11 @@
         ],
         "swirl-thumbnail": [
           "swirl-progress-indicator",
+          "swirl-button-group",
           "swirl-button"
+        ],
+        "swirl-button-group": [
+          "swirl-stack"
         ]
       }
     },
@@ -50236,6 +52218,50 @@
           "optional": false,
           "required": true
         },
+        {
+          "name": "editButtonIcon",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "edit-button-icon",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "default": "\"<swirl-icon-crop></swirl-icon-crop>\"",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "editButtonLabel",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "edit-button-label",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "default": "\"Edit\"",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "format",
           "type": "\"landscape\" | \"portrait\" | \"square\"",
@@ -50359,6 +52385,27 @@
           "optional": true,
           "required": false
         },
+        {
+          "name": "showEditButton",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "show-edit-button",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "showRemoveButton",
           "type": "boolean",
@@ -50382,10 +52429,10 @@
         },
         {
           "name": "size",
-          "type": "\"l\" | \"m\" | \"s\" | \"xl\"",
+          "type": "\"2xl\" | \"l\" | \"m\" | \"s\" | \"xl\"",
           "complexType": {
             "original": "SwirlThumbnailSize",
-            "resolved": "\"l\" | \"m\" | \"s\" | \"xl\"",
+            "resolved": "\"2xl\" | \"l\" | \"m\" | \"s\" | \"xl\"",
             "references": {
               "SwirlThumbnailSize": {
                 "location": "local",
@@ -50401,6 +52448,10 @@
           "docsTags": [],
           "default": "\"m\"",
           "values": [
+            {
+              "value": "2xl",
+              "type": "string"
+            },
             {
               "value": "l",
               "type": "string"
@@ -50466,6 +52517,25 @@
       ],
       "methods": [],
       "events": [
+        {
+          "event": "edit",
+          "detail": "MouseEvent",
+          "bubbles": true,
+          "complexType": {
+            "original": "MouseEvent",
+            "resolved": "MouseEvent",
+            "references": {
+              "MouseEvent": {
+                "location": "global",
+                "id": "global::MouseEvent"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "",
+          "docsTags": []
+        },
         {
           "event": "remove",
           "detail": "MouseEvent",
@@ -50495,13 +52565,18 @@
       ],
       "dependencies": [
         "swirl-progress-indicator",
+        "swirl-button-group",
         "swirl-button"
       ],
       "dependencyGraph": {
         "swirl-thumbnail": [
           "swirl-progress-indicator",
+          "swirl-button-group",
           "swirl-button"
         ],
+        "swirl-button-group": [
+          "swirl-stack"
+        ],
         "swirl-lightbox": [
           "swirl-thumbnail"
         ]
@@ -52258,7 +54333,7 @@
       "path": "src/components/swirl-thumbnail/swirl-thumbnail.tsx"
     },
     "src/components/swirl-thumbnail/swirl-thumbnail.tsx::SwirlThumbnailSize": {
-      "declaration": "export type SwirlThumbnailSize = \"s\" | \"m\" | \"l\" | \"xl\";",
+      "declaration": "export type SwirlThumbnailSize = \"s\" | \"m\" | \"l\" | \"xl\" | \"2xl\";",
       "docstring": "",
       "path": "src/components/swirl-thumbnail/swirl-thumbnail.tsx"
     },