npm - @genesislcap/foundation-zero - Versions diffs - 14.20.1-alpha-fd9d532.0 → 14.20.1 - Mend

@genesislcap/foundation-zero 14.20.1-alpha-fd9d532.0 → 14.20.1

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 (2) hide show

package/dist/custom-elements.json +1660 -1660
package/package.json +6 -6

package/dist/custom-elements.json CHANGED Viewed

@@ -751,6 +751,194 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/anchor/anchor.stories.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "meta",
+          "type": {
+            "text": "Meta"
+          },
+          "default": "{\n  title: 'Anchor',\n  component: 'zero-anchor',\n}"
+        },
+        {
+          "kind": "variable",
+          "name": "All",
+          "type": {
+            "text": "StoryObj"
+          },
+          "default": "{\n  args: {\n    anchorText: 'Rapid Anchor',\n    appearances: ZeroAppearanceValues,\n  },\n  ...StylesMapperTemplate,\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "meta",
+            "module": "src/anchor/anchor.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "All",
+          "declaration": {
+            "name": "All",
+            "module": "src/anchor/anchor.stories.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/anchor/anchor.styles.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "zeroAnchorStyles",
+          "return": {
+            "type": {
+              "text": "ElementStyles"
+            }
+          },
+          "parameters": [
+            {
+              "name": "context",
+              "type": {
+                "text": "ElementDefinitionContext"
+              }
+            },
+            {
+              "name": "definition",
+              "type": {
+                "text": "FoundationElementDefinition"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "zeroAnchorStyles",
+          "declaration": {
+            "name": "zeroAnchorStyles",
+            "module": "src/anchor/anchor.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/anchor/anchor.template.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "zeroAnchorTemplate",
+          "return": {
+            "type": {
+              "text": "ViewTemplate<Anchor>"
+            }
+          },
+          "parameters": [
+            {
+              "name": "context",
+              "type": {
+                "text": "ElementDefinitionContext"
+              }
+            },
+            {
+              "name": "definition",
+              "type": {
+                "text": "FoundationElementDefinition"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "zeroAnchorTemplate",
+          "declaration": {
+            "name": "zeroAnchorTemplate",
+            "module": "src/anchor/anchor.template.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/anchor/anchor.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "Anchor",
+          "superclass": {
+            "name": "FoundationAnchor",
+            "package": "@genesislcap/foundation-ui"
+          },
+          "tagName": "%%prefix%%-anchor",
+          "customElement": true
+        },
+        {
+          "kind": "variable",
+          "name": "zeroAnchor"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "Anchor",
+          "declaration": {
+            "name": "Anchor",
+            "module": "src/anchor/anchor.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "zeroAnchor",
+          "declaration": {
+            "name": "zeroAnchor",
+            "module": "src/anchor/anchor.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/anchor/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./anchor"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./anchor.styles"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./anchor.template"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/actions-menu/actions-menu.stories.ts",
@@ -1025,7 +1213,7 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/anchor/anchor.stories.ts",
+      "path": "src/breadcrumb/breadcrumb.stories.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -1033,15 +1221,15 @@
           "type": {
             "text": "Meta"
           },
-          "default": "{\n  title: 'Anchor',\n  component: 'zero-anchor',\n}"
+          "default": "{\n  title: 'Breadcrumb',\n  component: 'zero-breadcrumb',\n}"
         },
         {
           "kind": "variable",
-          "name": "All",
+          "name": "Primary",
           "type": {
             "text": "StoryObj"
           },
-          "default": "{\n  args: {\n    anchorText: 'Rapid Anchor',\n    appearances: ZeroAppearanceValues,\n  },\n  ...StylesMapperTemplate,\n}"
+          "default": "{\n  args: {\n    breadcrumbItemsText: 'Breadcrumb Item',\n    breadcrumbCurrentItemText: 'Current Page',\n  },\n  render: ({ breadcrumbItemsText, breadcrumbCurrentItemText }) =>\n    html`\n      <zero-breadcrumb>\n        <zero-breadcrumb-item href=\"#\">${breadcrumbItemsText} 1</zero-breadcrumb-item>\n        <zero-breadcrumb-item href=\"#\">${breadcrumbItemsText} 2</zero-breadcrumb-item>\n        <zero-breadcrumb-item>${breadcrumbCurrentItemText}</zero-breadcrumb-item>\n      </zero-breadcrumb>\n    `,\n}"
         }
       ],
       "exports": [
@@ -1050,26 +1238,26 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/anchor/anchor.stories.ts"
+            "module": "src/breadcrumb/breadcrumb.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "All",
+          "name": "Primary",
           "declaration": {
-            "name": "All",
-            "module": "src/anchor/anchor.stories.ts"
+            "name": "Primary",
+            "module": "src/breadcrumb/breadcrumb.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/anchor/anchor.styles.ts",
+      "path": "src/breadcrumb/breadcrumb.styles.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "zeroAnchorStyles",
+          "name": "zeroBreadcrumbStyles",
           "return": {
             "type": {
               "text": "ElementStyles"
@@ -1094,24 +1282,24 @@
       "exports": [
         {
           "kind": "js",
-          "name": "zeroAnchorStyles",
+          "name": "zeroBreadcrumbStyles",
           "declaration": {
-            "name": "zeroAnchorStyles",
-            "module": "src/anchor/anchor.styles.ts"
+            "name": "zeroBreadcrumbStyles",
+            "module": "src/breadcrumb/breadcrumb.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/anchor/anchor.template.ts",
+      "path": "src/breadcrumb/breadcrumb.template.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "zeroAnchorTemplate",
+          "name": "zeroBreadcrumbTemplate",
           "return": {
             "type": {
-              "text": "ViewTemplate<Anchor>"
+              "text": "ViewTemplate<Breadcrumb>"
             }
           },
           "parameters": [
@@ -1133,244 +1321,90 @@
       "exports": [
         {
           "kind": "js",
-          "name": "zeroAnchorTemplate",
+          "name": "zeroBreadcrumbTemplate",
           "declaration": {
-            "name": "zeroAnchorTemplate",
-            "module": "src/anchor/anchor.template.ts"
+            "name": "zeroBreadcrumbTemplate",
+            "module": "src/breadcrumb/breadcrumb.template.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/anchor/anchor.ts",
+      "path": "src/breadcrumb/breadcrumb.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "Anchor",
+          "name": "Breadcrumb",
           "superclass": {
-            "name": "FoundationAnchor",
+            "name": "FoundationBreadcrumb",
             "package": "@genesislcap/foundation-ui"
           },
-          "tagName": "%%prefix%%-anchor",
+          "tagName": "%%prefix%%-breadcrumb",
           "customElement": true
         },
         {
           "kind": "variable",
-          "name": "zeroAnchor"
+          "name": "zeroBreadcrumbShadowOptions",
+          "type": {
+            "text": "ShadowRootInit"
+          },
+          "default": "undefined"
+        },
+        {
+          "kind": "variable",
+          "name": "defaultBreadcrumbConfig",
+          "type": {
+            "text": "object"
+          },
+          "default": "{}"
+        },
+        {
+          "kind": "variable",
+          "name": "zeroBreadcrumb",
+          "description": "The zero Breadcrumb",
+          "privacy": "public"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "Anchor",
+          "name": "Breadcrumb",
           "declaration": {
-            "name": "Anchor",
-            "module": "src/anchor/anchor.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "zeroAnchor",
-          "declaration": {
-            "name": "zeroAnchor",
-            "module": "src/anchor/anchor.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/anchor/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./anchor"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./anchor.styles"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./anchor.template"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/badge/badge.stories.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "meta",
-          "type": {
-            "text": "Meta"
-          },
-          "default": "{\n  title: 'Badge',\n  component: 'zero-badge',\n}"
-        },
-        {
-          "kind": "variable",
-          "name": "All",
-          "type": {
-            "text": "StoryObj"
-          },
-          "default": "{\n  args: {\n    fillColors,\n    fontColors,\n    badgeText: 'Rapid Badge',\n  },\n  ...StylesMapperTemplate,\n}"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "meta",
-            "module": "src/badge/badge.stories.ts"
+            "name": "Breadcrumb",
+            "module": "src/breadcrumb/breadcrumb.ts"
           }
         },
         {
           "kind": "js",
-          "name": "All",
-          "declaration": {
-            "name": "All",
-            "module": "src/badge/badge.stories.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/badge/badge.styles.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "zeroBadgeStyles",
-          "return": {
-            "type": {
-              "text": "ElementStyles"
-            }
-          },
-          "parameters": [
-            {
-              "name": "context",
-              "type": {
-                "text": "ElementDefinitionContext"
-              }
-            },
-            {
-              "name": "definition",
-              "type": {
-                "text": "FoundationElementDefinition"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "zeroBadgeStyles",
-          "declaration": {
-            "name": "zeroBadgeStyles",
-            "module": "src/badge/badge.styles.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/badge/badge.template.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "zeroBadgeTemplate",
-          "return": {
-            "type": {
-              "text": "ViewTemplate<Badge>"
-            }
-          },
-          "parameters": [
-            {
-              "name": "context",
-              "type": {
-                "text": "ElementDefinitionContext"
-              }
-            },
-            {
-              "name": "definition",
-              "type": {
-                "text": "FoundationElementDefinition"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "zeroBadgeTemplate",
+          "name": "zeroBreadcrumbShadowOptions",
           "declaration": {
-            "name": "zeroBadgeTemplate",
-            "module": "src/badge/badge.template.ts"
+            "name": "zeroBreadcrumbShadowOptions",
+            "module": "src/breadcrumb/breadcrumb.ts"
           }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/badge/badge.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "Badge",
-          "superclass": {
-            "name": "FoundationBadge",
-            "package": "@genesislcap/foundation-ui"
-          },
-          "tagName": "%%prefix%%-badge",
-          "customElement": true
         },
-        {
-          "kind": "variable",
-          "name": "zeroBadge"
-        }
-      ],
-      "exports": [
         {
           "kind": "js",
-          "name": "Badge",
+          "name": "defaultBreadcrumbConfig",
           "declaration": {
-            "name": "Badge",
-            "module": "src/badge/badge.ts"
+            "name": "defaultBreadcrumbConfig",
+            "module": "src/breadcrumb/breadcrumb.ts"
           }
         },
         {
           "kind": "js",
-          "name": "zeroBadge",
+          "name": "zeroBreadcrumb",
           "declaration": {
-            "name": "zeroBadge",
-            "module": "src/badge/badge.ts"
+            "name": "zeroBreadcrumb",
+            "module": "src/breadcrumb/breadcrumb.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/badge/index.ts",
+      "path": "src/breadcrumb/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -1378,7 +1412,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./badge"
+            "package": "./breadcrumb.template"
           }
         },
         {
@@ -1386,7 +1420,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./badge.styles"
+            "package": "./breadcrumb.styles"
           }
         },
         {
@@ -1394,7 +1428,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./badge.template"
+            "package": "./breadcrumb"
           }
         }
       ]
@@ -1660,7 +1694,7 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/breadcrumb/breadcrumb.stories.ts",
+      "path": "src/badge/badge.stories.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -1668,15 +1702,15 @@
           "type": {
             "text": "Meta"
           },
-          "default": "{\n  title: 'Breadcrumb',\n  component: 'zero-breadcrumb',\n}"
+          "default": "{\n  title: 'Badge',\n  component: 'zero-badge',\n}"
         },
         {
           "kind": "variable",
-          "name": "Primary",
+          "name": "All",
           "type": {
             "text": "StoryObj"
           },
-          "default": "{\n  args: {\n    breadcrumbItemsText: 'Breadcrumb Item',\n    breadcrumbCurrentItemText: 'Current Page',\n  },\n  render: ({ breadcrumbItemsText, breadcrumbCurrentItemText }) =>\n    html`\n      <zero-breadcrumb>\n        <zero-breadcrumb-item href=\"#\">${breadcrumbItemsText} 1</zero-breadcrumb-item>\n        <zero-breadcrumb-item href=\"#\">${breadcrumbItemsText} 2</zero-breadcrumb-item>\n        <zero-breadcrumb-item>${breadcrumbCurrentItemText}</zero-breadcrumb-item>\n      </zero-breadcrumb>\n    `,\n}"
+          "default": "{\n  args: {\n    fillColors,\n    fontColors,\n    badgeText: 'Rapid Badge',\n  },\n  ...StylesMapperTemplate,\n}"
         }
       ],
       "exports": [
@@ -1685,26 +1719,26 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/breadcrumb/breadcrumb.stories.ts"
+            "module": "src/badge/badge.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "Primary",
+          "name": "All",
           "declaration": {
-            "name": "Primary",
-            "module": "src/breadcrumb/breadcrumb.stories.ts"
+            "name": "All",
+            "module": "src/badge/badge.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/breadcrumb/breadcrumb.styles.ts",
+      "path": "src/badge/badge.styles.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "zeroBreadcrumbStyles",
+          "name": "zeroBadgeStyles",
           "return": {
             "type": {
               "text": "ElementStyles"
@@ -1729,24 +1763,24 @@
       "exports": [
         {
           "kind": "js",
-          "name": "zeroBreadcrumbStyles",
+          "name": "zeroBadgeStyles",
           "declaration": {
-            "name": "zeroBreadcrumbStyles",
-            "module": "src/breadcrumb/breadcrumb.styles.ts"
+            "name": "zeroBadgeStyles",
+            "module": "src/badge/badge.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/breadcrumb/breadcrumb.template.ts",
+      "path": "src/badge/badge.template.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "zeroBreadcrumbTemplate",
+          "name": "zeroBadgeTemplate",
           "return": {
             "type": {
-              "text": "ViewTemplate<Breadcrumb>"
+              "text": "ViewTemplate<Badge>"
             }
           },
           "parameters": [
@@ -1768,238 +1802,56 @@
       "exports": [
         {
           "kind": "js",
-          "name": "zeroBreadcrumbTemplate",
+          "name": "zeroBadgeTemplate",
           "declaration": {
-            "name": "zeroBreadcrumbTemplate",
-            "module": "src/breadcrumb/breadcrumb.template.ts"
+            "name": "zeroBadgeTemplate",
+            "module": "src/badge/badge.template.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/breadcrumb/breadcrumb.ts",
+      "path": "src/badge/badge.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "Breadcrumb",
+          "name": "Badge",
           "superclass": {
-            "name": "FoundationBreadcrumb",
+            "name": "FoundationBadge",
             "package": "@genesislcap/foundation-ui"
           },
-          "tagName": "%%prefix%%-breadcrumb",
+          "tagName": "%%prefix%%-badge",
           "customElement": true
         },
         {
           "kind": "variable",
-          "name": "zeroBreadcrumbShadowOptions",
-          "type": {
-            "text": "ShadowRootInit"
-          },
-          "default": "undefined"
-        },
-        {
-          "kind": "variable",
-          "name": "defaultBreadcrumbConfig",
-          "type": {
-            "text": "object"
-          },
-          "default": "{}"
-        },
-        {
-          "kind": "variable",
-          "name": "zeroBreadcrumb",
-          "description": "The zero Breadcrumb",
-          "privacy": "public"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "Breadcrumb",
-          "declaration": {
-            "name": "Breadcrumb",
-            "module": "src/breadcrumb/breadcrumb.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "zeroBreadcrumbShadowOptions",
-          "declaration": {
-            "name": "zeroBreadcrumbShadowOptions",
-            "module": "src/breadcrumb/breadcrumb.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "defaultBreadcrumbConfig",
-          "declaration": {
-            "name": "defaultBreadcrumbConfig",
-            "module": "src/breadcrumb/breadcrumb.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "zeroBreadcrumb",
-          "declaration": {
-            "name": "zeroBreadcrumb",
-            "module": "src/breadcrumb/breadcrumb.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/breadcrumb/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./breadcrumb.template"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./breadcrumb.styles"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./breadcrumb"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/breadcrumb-item/breadcrumb-item.styles.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "zeroBreadcrumbItemStyles",
-          "return": {
-            "type": {
-              "text": "ElementStyles"
-            }
-          },
-          "parameters": [
-            {
-              "name": "context",
-              "type": {
-                "text": "ElementDefinitionContext"
-              }
-            },
-            {
-              "name": "definition",
-              "type": {
-                "text": "FoundationElementDefinition"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "zeroBreadcrumbItemStyles",
-          "declaration": {
-            "name": "zeroBreadcrumbItemStyles",
-            "module": "src/breadcrumb-item/breadcrumb-item.styles.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/breadcrumb-item/breadcrumb-item.template.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "zeroBreadcrumbItemTemplate",
-          "return": {
-            "type": {
-              "text": "ViewTemplate<BreadcrumbItem>"
-            }
-          },
-          "parameters": [
-            {
-              "name": "context",
-              "type": {
-                "text": "ElementDefinitionContext"
-              }
-            },
-            {
-              "name": "definition",
-              "type": {
-                "text": "FoundationElementDefinition"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "zeroBreadcrumbItemTemplate",
-          "declaration": {
-            "name": "zeroBreadcrumbItemTemplate",
-            "module": "src/breadcrumb-item/breadcrumb-item.template.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/breadcrumb-item/breadcrumb-item.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "BreadcrumbItem",
-          "superclass": {
-            "name": "FoundationBreadcrumbItem",
-            "package": "@genesislcap/foundation-ui"
-          }
-        },
-        {
-          "kind": "variable",
-          "name": "zeroBreadcrumbItem",
-          "description": "The zero Breadcrumb Item",
-          "privacy": "public"
+          "name": "zeroBadge"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "BreadcrumbItem",
+          "name": "Badge",
           "declaration": {
-            "name": "BreadcrumbItem",
-            "module": "src/breadcrumb-item/breadcrumb-item.ts"
+            "name": "Badge",
+            "module": "src/badge/badge.ts"
           }
         },
         {
           "kind": "js",
-          "name": "zeroBreadcrumbItem",
+          "name": "zeroBadge",
           "declaration": {
-            "name": "zeroBreadcrumbItem",
-            "module": "src/breadcrumb-item/breadcrumb-item.ts"
+            "name": "zeroBadge",
+            "module": "src/badge/badge.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/breadcrumb-item/index.ts",
+      "path": "src/badge/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -2007,7 +1859,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./breadcrumb-item.template"
+            "package": "./badge"
           }
         },
         {
@@ -2015,7 +1867,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./breadcrumb-item.styles"
+            "package": "./badge.styles"
           }
         },
         {
@@ -2023,7 +1875,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./breadcrumb-item"
+            "package": "./badge.template"
           }
         }
       ]
@@ -2234,51 +2086,11 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/card/card.stories.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "meta",
-          "type": {
-            "text": "Meta"
-          },
-          "default": "{\n  title: 'Card',\n  component: 'zero-card',\n}"
-        },
-        {
-          "kind": "variable",
-          "name": "Primary",
-          "type": {
-            "text": "StoryObj"
-          },
-          "default": "{\n  args: {\n    cardFillColor: '#2f353a',\n    cardHeading: 'Card 1',\n    cardText: 'This is a Rapid Card (and the only one with without extra fui elements!)',\n  },\n  render: ({ cardFillColor, cardHeading, cardText }) =>\n    html`\n      <div style=\"${wrapperStyle} --zero-card-fill-color:${cardFillColor};\">\n        <zero-card style=\"${cardStyle}\">\n          <h6>${cardHeading}</h6>\n          <span>${cardText}</span>\n        </zero-card>\n      </div>\n    `,\n}"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "meta",
-            "module": "src/card/card.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Primary",
-          "declaration": {
-            "name": "Primary",
-            "module": "src/card/card.stories.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/card/card.styles.ts",
+      "path": "src/breadcrumb-item/breadcrumb-item.styles.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "zeroCardStyles",
+          "name": "zeroBreadcrumbItemStyles",
           "return": {
             "type": {
               "text": "ElementStyles"
@@ -2303,24 +2115,24 @@
       "exports": [
         {
           "kind": "js",
-          "name": "zeroCardStyles",
+          "name": "zeroBreadcrumbItemStyles",
           "declaration": {
-            "name": "zeroCardStyles",
-            "module": "src/card/card.styles.ts"
+            "name": "zeroBreadcrumbItemStyles",
+            "module": "src/breadcrumb-item/breadcrumb-item.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/card/card.template.ts",
+      "path": "src/breadcrumb-item/breadcrumb-item.template.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "zeroCardTemplate",
+          "name": "zeroBreadcrumbItemTemplate",
           "return": {
             "type": {
-              "text": "ViewTemplate<Card>"
+              "text": "ViewTemplate<BreadcrumbItem>"
             }
           },
           "parameters": [
@@ -2342,10 +2154,198 @@
       "exports": [
         {
           "kind": "js",
-          "name": "zeroCardTemplate",
+          "name": "zeroBreadcrumbItemTemplate",
           "declaration": {
-            "name": "zeroCardTemplate",
-            "module": "src/card/card.template.ts"
+            "name": "zeroBreadcrumbItemTemplate",
+            "module": "src/breadcrumb-item/breadcrumb-item.template.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/breadcrumb-item/breadcrumb-item.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "BreadcrumbItem",
+          "superclass": {
+            "name": "FoundationBreadcrumbItem",
+            "package": "@genesislcap/foundation-ui"
+          }
+        },
+        {
+          "kind": "variable",
+          "name": "zeroBreadcrumbItem",
+          "description": "The zero Breadcrumb Item",
+          "privacy": "public"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BreadcrumbItem",
+          "declaration": {
+            "name": "BreadcrumbItem",
+            "module": "src/breadcrumb-item/breadcrumb-item.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "zeroBreadcrumbItem",
+          "declaration": {
+            "name": "zeroBreadcrumbItem",
+            "module": "src/breadcrumb-item/breadcrumb-item.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/breadcrumb-item/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./breadcrumb-item.template"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./breadcrumb-item.styles"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./breadcrumb-item"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/card/card.stories.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "meta",
+          "type": {
+            "text": "Meta"
+          },
+          "default": "{\n  title: 'Card',\n  component: 'zero-card',\n}"
+        },
+        {
+          "kind": "variable",
+          "name": "Primary",
+          "type": {
+            "text": "StoryObj"
+          },
+          "default": "{\n  args: {\n    cardFillColor: '#2f353a',\n    cardHeading: 'Card 1',\n    cardText: 'This is a Rapid Card (and the only one with without extra fui elements!)',\n  },\n  render: ({ cardFillColor, cardHeading, cardText }) =>\n    html`\n      <div style=\"${wrapperStyle} --zero-card-fill-color:${cardFillColor};\">\n        <zero-card style=\"${cardStyle}\">\n          <h6>${cardHeading}</h6>\n          <span>${cardText}</span>\n        </zero-card>\n      </div>\n    `,\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "meta",
+            "module": "src/card/card.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Primary",
+          "declaration": {
+            "name": "Primary",
+            "module": "src/card/card.stories.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/card/card.styles.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "zeroCardStyles",
+          "return": {
+            "type": {
+              "text": "ElementStyles"
+            }
+          },
+          "parameters": [
+            {
+              "name": "context",
+              "type": {
+                "text": "ElementDefinitionContext"
+              }
+            },
+            {
+              "name": "definition",
+              "type": {
+                "text": "FoundationElementDefinition"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "zeroCardStyles",
+          "declaration": {
+            "name": "zeroCardStyles",
+            "module": "src/card/card.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/card/card.template.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "zeroCardTemplate",
+          "return": {
+            "type": {
+              "text": "ViewTemplate<Card>"
+            }
+          },
+          "parameters": [
+            {
+              "name": "context",
+              "type": {
+                "text": "ElementDefinitionContext"
+              }
+            },
+            {
+              "name": "definition",
+              "type": {
+                "text": "FoundationElementDefinition"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "zeroCardTemplate",
+          "declaration": {
+            "name": "zeroCardTemplate",
+            "module": "src/card/card.template.ts"
           }
         }
       ]
@@ -3784,7 +3784,7 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/dialog/dialog.stories.ts",
+      "path": "src/divider/divider.stories.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -3792,7 +3792,7 @@
           "type": {
             "text": "Meta"
           },
-          "default": "{\n  title: 'Dialog',\n  component: 'zero-dialog',\n}"
+          "default": "{\n  title: 'Divider',\n  component: 'zero-divider',\n}"
         },
         {
           "kind": "variable",
@@ -3800,7 +3800,7 @@
           "type": {
             "text": "StoryObj"
           },
-          "default": "{\n  args: {\n    dialogMaxWidth: '557px',\n    dialogTitle: 'Dialog title',\n    dialogInitialText: 'Some text in a Zero Dialog',\n    dialogMainText: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis similique iste ab sed\n      voluptatem ut suscipit tenetur distinctio? Quo est debitis pariatur qui quisquam repudiandae\n      at atque et quibusdam rerum, reprehenderit sed laborum officiis distinctio dolorum\n      temporibus aperiam dolor consequatur perferendis aspernatur fugit repellendus asperiores,\n      voluptas illo? Voluptatum, atque quidem?`,\n    dialogCloseButtonText: 'Close this dialog',\n  },\n  render: ({\n    dialogMaxWidth,\n    dialogTitle,\n    dialogInitialText,\n    dialogMainText,\n    dialogCloseButtonText,\n  }) => html`\n    <zero-button @click=\"${showDialog}\">Show Zero Dialog</zero-button>\n    <zero-dialog style=\"--dialog-max-width: ${dialogMaxWidth};\">\n      <h5 slot=\"top\">${dialogTitle}</h5>\n      <p>${dialogInitialText}</p>\n      <p>${dialogMainText}</p>\n      <zero-divider slot=\"bottom\"></zero-divider>\n      <zero-button appearance=\"primary-gradient\" slot=\"bottom\" @click=\"${closeDialog}\">\n        ${dialogCloseButtonText}\n      </zero-button>\n    </zero-dialog>\n  `,\n}"
+          "default": "{\n  argTypes: {\n    orientation: {\n      control: 'select',\n      options: ['horizontal', 'vertical'],\n    },\n    role: {\n      control: 'select',\n      options: ['separator', 'presentation'],\n    },\n  },\n  args: {\n    orientation: 'horizontal',\n    role: 'separator',\n  },\n  render: ({ orientation, role }) =>\n    html`\n      <div\n        style=\"display: flex; justify-content:center; width: 100%; ${orientation === 'vertical'\n          ? 'flex-direction: row;'\n          : 'flex-direction: column;'}\"\n      >\n        <zero-button style=\"flex: 1;\"></zero-button>\n        <zero-divider orientation=\"${orientation}\" role=\"${role}\"></zero-divider>\n        <zero-button style=\"flex: 1;\"></zero-button>\n      </div>\n    `,\n}"
         }
       ],
       "exports": [
@@ -3809,7 +3809,7 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/dialog/dialog.stories.ts"
+            "module": "src/divider/divider.stories.ts"
           }
         },
         {
@@ -3817,357 +3817,131 @@
           "name": "Primary",
           "declaration": {
             "name": "Primary",
-            "module": "src/dialog/dialog.stories.ts"
+            "module": "src/divider/divider.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/dialog/dialog.styles.ts",
+      "path": "src/divider/divider.styles.ts",
       "declarations": [
         {
-          "kind": "variable",
-          "name": "zeroDialogStyles",
-          "default": "css`\n  ${foundationDialogStyles}\n  :host {\n    --dialog-background: ${neutralLayer2};\n  }\n\n  dialog {\n    position: fixed;\n    top: 0;\n    bottom: 0;\n    color: rgb(255 255 255 / 30%);\n    border-radius: calc(var(--control-corner-radius) * 1px);\n    border: 1px solid ${ColorHEX.lightGrey};\n    text-align: left;\n    line-height: normal;\n    box-shadow: 0 2px 15px 0 rgb(0 0 0 / 35%);\n  }\n\n  .top {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    color: ${ColorHEX.almostWhite};\n    margin-bottom: calc(var(--design-unit) * 2px);\n  }\n\n  .bottom {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: flex-end;\n    color: ${ColorHEX.almostWhite};\n  }\n\n  :host slot:first-of-type {\n    color: ${neutralForegroundRest};\n  }\n\n  ::slotted(zero-button) {\n    margin-top: calc(var(--design-unit) * 4px - 1px);\n  }\n\n  .content-wrapper {\n    min-width: var(--dialog-min-width);\n    min-height: var(--dialog-min-height);\n    height: fit-content;\n    width: fit-content;\n    max-width: var(--dialog-max-width);\n    max-height: var(--dialog-max-height);\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    align-items: stretch;\n  }\n\n  .close-icon:hover svg {\n    background-color: ${whiteWebRGBA(0.05)};\n  }\n\n  .close-icon:hover svg g path {\n    fill: ${whiteWebRGBA(1)};\n  }\n\n  .close-icon:active svg {\n    background-color: ${defaultDialogActiveBGColor};\n  }\n\n  .close-icon:active svg g path {\n    fill: ${whiteWebRGBA(0.33)};\n  }\n`"
+          "kind": "function",
+          "name": "zeroDividerStyles",
+          "return": {
+            "type": {
+              "text": "ElementStyles"
+            }
+          },
+          "parameters": [
+            {
+              "name": "context",
+              "type": {
+                "text": "ElementDefinitionContext"
+              }
+            },
+            {
+              "name": "definition",
+              "type": {
+                "text": "FoundationElementDefinition"
+              }
+            }
+          ]
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "zeroDialogStyles",
+          "name": "zeroDividerStyles",
           "declaration": {
-            "name": "zeroDialogStyles",
-            "module": "src/dialog/dialog.styles.ts"
+            "name": "zeroDividerStyles",
+            "module": "src/divider/divider.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/dialog/dialog.ts",
+      "path": "src/divider/divider.template.ts",
       "declarations": [
         {
-          "kind": "variable",
-          "name": "defaultDialogConfig",
-          "default": "foundationConfig"
-        },
-        {
-          "kind": "variable",
-          "name": "zeroDialogTemplate",
-          "default": "foundationDialogTemplate"
-        },
-        {
-          "kind": "variable",
-          "name": "zeroDialogShadowOptions",
-          "default": "foundationDialogShadowOptions"
-        },
-        {
-          "kind": "class",
-          "description": "",
-          "name": "Dialog",
-          "superclass": {
-            "name": "FoundationDialog",
-            "package": "@genesislcap/foundation-ui"
-          },
-          "tagName": "%%prefix%%-dialog",
-          "customElement": true,
-          "attributes": [
-            {
-              "name": "position",
-              "type": {
-                "text": "'centre' | 'left' | 'right'"
-              },
-              "default": "'centre'",
-              "fieldName": "position",
-              "inheritedFrom": {
-                "name": "DialogElement",
-                "module": "src/dialog/dialog.ts"
-              }
-            },
-            {
-              "name": "show-close-icon",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "true",
-              "description": "Whether or not to show the close icon",
-              "fieldName": "showCloseIcon",
-              "inheritedFrom": {
-                "name": "DialogElement",
-                "module": "src/dialog/dialog.ts"
-              }
+          "kind": "function",
+          "name": "zeroDividerTemplate",
+          "return": {
+            "type": {
+              "text": "ViewTemplate<Divider>"
             }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "mainElement",
-              "type": {
-                "text": "HTMLDialogElement"
-              },
-              "description": "A reference to the dialog element\nin the component Shadow DOM.",
-              "inheritedFrom": {
-                "name": "DialogElement",
-                "module": "src/dialog/dialog.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "position",
-              "type": {
-                "text": "'centre' | 'left' | 'right'"
-              },
-              "default": "'centre'",
-              "inheritedFrom": {
-                "name": "DialogElement",
-                "module": "src/dialog/dialog.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "showCloseIcon",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "true",
-              "description": "Whether or not to show the close icon",
-              "inheritedFrom": {
-                "name": "DialogElement",
-                "module": "src/dialog/dialog.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "onShowCallback",
-              "type": {
-                "text": "() => void"
-              },
-              "description": "Callback to run *before* HTMLDialogElement is shown",
-              "inheritedFrom": {
-                "name": "DialogElement",
-                "module": "src/dialog/dialog.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "onCloseCallback",
-              "type": {
-                "text": "() => void"
-              },
-              "description": "Callback to run *after* HTMLDialogElement is closed",
-              "inheritedFrom": {
-                "name": "DialogElement",
-                "module": "src/dialog/dialog.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "open",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Determine if the dialog is showing or closed.",
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "DialogElement",
-                "module": "src/dialog/dialog.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "show",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Show the HTMLDialogElement and its contents",
-              "inheritedFrom": {
-                "name": "DialogElement",
-                "module": "src/dialog/dialog.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "close",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Remove the HTMLDialogElement from display",
-              "inheritedFrom": {
-                "name": "DialogElement",
-                "module": "src/dialog/dialog.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "_presentation",
-              "type": {
-                "text": "ComponentPresentation | null | undefined"
-              },
-              "privacy": "private",
-              "default": "void 0",
-              "inheritedFrom": {
-                "name": "FoundationElement",
-                "module": "src/foundation-element/foundation-element.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "$presentation",
-              "type": {
-                "text": "ComponentPresentation | null"
-              },
-              "privacy": "public",
-              "description": "A property which resolves the ComponentPresentation instance\nfor the current component.",
-              "inheritedFrom": {
-                "name": "FoundationElement",
-                "module": "src/foundation-element/foundation-element.ts"
-              }
-            },
+          },
+          "parameters": [
             {
-              "kind": "field",
-              "name": "template",
+              "name": "context",
               "type": {
-                "text": "ElementViewTemplate | void | null"
-              },
-              "privacy": "public",
-              "description": "Sets the template of the element instance. When undefined,\nthe element will attempt to resolve the template from\nthe associated presentation or custom element definition.",
-              "inheritedFrom": {
-                "name": "FoundationElement",
-                "module": "src/foundation-element/foundation-element.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "templateChanged",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "inheritedFrom": {
-                "name": "FoundationElement",
-                "module": "src/foundation-element/foundation-element.ts"
+                "text": "ElementDefinitionContext"
               }
             },
             {
-              "kind": "field",
-              "name": "styles",
+              "name": "definition",
               "type": {
-                "text": "ElementStyles | void | null"
-              },
-              "privacy": "public",
-              "description": "Sets the default styles for the element instance. When undefined,\nthe element will attempt to resolve default styles from\nthe associated presentation or custom element definition.",
-              "inheritedFrom": {
-                "name": "FoundationElement",
-                "module": "src/foundation-element/foundation-element.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "stylesChanged",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "inheritedFrom": {
-                "name": "FoundationElement",
-                "module": "src/foundation-element/foundation-element.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "compose",
-              "privacy": "public",
-              "static": true,
-              "return": {
-                "type": {
-                  "text": "(\n        overrideDefinition?: OverrideFoundationElementDefinition<T>\n    ) => FoundationElementRegistry<T, K>"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "this",
-                  "type": {
-                    "text": "K"
-                  }
-                },
-                {
-                  "name": "elementDefinition",
-                  "type": {
-                    "text": "T"
-                  },
-                  "description": "The definition of the element to create the registry\nfunction for."
-                }
-              ],
-              "description": "Defines an element registry function with a set of element definition defaults.",
-              "inheritedFrom": {
-                "name": "FoundationElement",
-                "module": "src/foundation-element/foundation-element.ts"
+                "text": "FoundationElementDefinition"
               }
             }
           ]
-        },
-        {
-          "kind": "variable",
-          "name": "zeroDialog",
-          "description": "The Zero Dialog",
-          "privacy": "public"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "defaultDialogConfig",
+          "name": "zeroDividerTemplate",
           "declaration": {
-            "name": "defaultDialogConfig",
-            "module": "src/dialog/dialog.ts"
+            "name": "zeroDividerTemplate",
+            "module": "src/divider/divider.template.ts"
           }
-        },
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/divider/divider.ts",
+      "declarations": [
         {
-          "kind": "js",
-          "name": "zeroDialogTemplate",
-          "declaration": {
-            "name": "zeroDialogTemplate",
-            "module": "src/dialog/dialog.ts"
-          }
+          "kind": "class",
+          "description": "",
+          "name": "Divider",
+          "superclass": {
+            "name": "FoundationDivider",
+            "package": "@genesislcap/foundation-ui"
+          },
+          "tagName": "%%prefix%%-divider",
+          "customElement": true
         },
         {
-          "kind": "js",
-          "name": "zeroDialogShadowOptions",
-          "declaration": {
-            "name": "zeroDialogShadowOptions",
-            "module": "src/dialog/dialog.ts"
-          }
-        },
+          "kind": "variable",
+          "name": "zeroDivider"
+        }
+      ],
+      "exports": [
         {
           "kind": "js",
-          "name": "Dialog",
+          "name": "Divider",
           "declaration": {
-            "name": "Dialog",
-            "module": "src/dialog/dialog.ts"
+            "name": "Divider",
+            "module": "src/divider/divider.ts"
           }
         },
         {
           "kind": "js",
-          "name": "zeroDialog",
+          "name": "zeroDivider",
           "declaration": {
-            "name": "zeroDialog",
-            "module": "src/dialog/dialog.ts"
+            "name": "zeroDivider",
+            "module": "src/divider/divider.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/dialog/index.ts",
+      "path": "src/divider/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -4175,7 +3949,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./dialog"
+            "package": "./divider"
           }
         },
         {
@@ -4183,15 +3957,15 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./dialog.styles"
+            "package": "./divider.styles"
           }
         },
         {
           "kind": "js",
-          "name": "zeroDialogTemplate",
+          "name": "*",
           "declaration": {
-            "name": "foundationDialogTemplate",
-            "package": "@genesislcap/foundation-ui"
+            "name": "*",
+            "package": "./divider.template"
           }
         }
       ]
@@ -4363,195 +4137,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./disclosure"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./disclosure.styles"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./disclosure.template"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/divider/divider.stories.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "meta",
-          "type": {
-            "text": "Meta"
-          },
-          "default": "{\n  title: 'Divider',\n  component: 'zero-divider',\n}"
-        },
-        {
-          "kind": "variable",
-          "name": "Primary",
-          "type": {
-            "text": "StoryObj"
-          },
-          "default": "{\n  argTypes: {\n    orientation: {\n      control: 'select',\n      options: ['horizontal', 'vertical'],\n    },\n    role: {\n      control: 'select',\n      options: ['separator', 'presentation'],\n    },\n  },\n  args: {\n    orientation: 'horizontal',\n    role: 'separator',\n  },\n  render: ({ orientation, role }) =>\n    html`\n      <div\n        style=\"display: flex; justify-content:center; width: 100%; ${orientation === 'vertical'\n          ? 'flex-direction: row;'\n          : 'flex-direction: column;'}\"\n      >\n        <zero-button style=\"flex: 1;\"></zero-button>\n        <zero-divider orientation=\"${orientation}\" role=\"${role}\"></zero-divider>\n        <zero-button style=\"flex: 1;\"></zero-button>\n      </div>\n    `,\n}"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "meta",
-            "module": "src/divider/divider.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Primary",
-          "declaration": {
-            "name": "Primary",
-            "module": "src/divider/divider.stories.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/divider/divider.styles.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "zeroDividerStyles",
-          "return": {
-            "type": {
-              "text": "ElementStyles"
-            }
-          },
-          "parameters": [
-            {
-              "name": "context",
-              "type": {
-                "text": "ElementDefinitionContext"
-              }
-            },
-            {
-              "name": "definition",
-              "type": {
-                "text": "FoundationElementDefinition"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "zeroDividerStyles",
-          "declaration": {
-            "name": "zeroDividerStyles",
-            "module": "src/divider/divider.styles.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/divider/divider.template.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "zeroDividerTemplate",
-          "return": {
-            "type": {
-              "text": "ViewTemplate<Divider>"
-            }
-          },
-          "parameters": [
-            {
-              "name": "context",
-              "type": {
-                "text": "ElementDefinitionContext"
-              }
-            },
-            {
-              "name": "definition",
-              "type": {
-                "text": "FoundationElementDefinition"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "zeroDividerTemplate",
-          "declaration": {
-            "name": "zeroDividerTemplate",
-            "module": "src/divider/divider.template.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/divider/divider.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "Divider",
-          "superclass": {
-            "name": "FoundationDivider",
-            "package": "@genesislcap/foundation-ui"
-          },
-          "tagName": "%%prefix%%-divider",
-          "customElement": true
-        },
-        {
-          "kind": "variable",
-          "name": "zeroDivider"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "Divider",
-          "declaration": {
-            "name": "Divider",
-            "module": "src/divider/divider.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "zeroDivider",
-          "declaration": {
-            "name": "zeroDivider",
-            "module": "src/divider/divider.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/divider/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./divider"
+            "package": "./disclosure"
           }
         },
         {
@@ -4559,7 +4145,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./divider.styles"
+            "package": "./disclosure.styles"
           }
         },
         {
@@ -4567,14 +4153,14 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./divider.template"
+            "package": "./disclosure.template"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/dropdown-menu/dropdown-menu.stories.ts",
+      "path": "src/error-banner/error-banner.stories.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -4582,7 +4168,7 @@
           "type": {
             "text": "Meta"
           },
-          "default": "{\n  title: 'Dropdown Menu',\n  component: 'zero-dropdown-menu',\n}"
+          "default": "{\n  title: 'Error Banner',\n  component: 'zero-error-banner',\n}"
         },
         {
           "kind": "variable",
@@ -4590,7 +4176,7 @@
           "type": {
             "text": "StoryObj"
           },
-          "default": "{\n  args: {\n    items: zeroItems,\n    dropdownOpenerText: 'Dropdown menu',\n  },\n  render: ({ dropdownOpenerText, items }) =>\n    html`\n      <div>\n        <zero-dropdown-menu name=\"${dropdownOpenerText}\" .items=${items}></zero-dropdown-menu>\n      </div>\n    `,\n}"
+          "default": "{\n  args: {\n    errorText: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',\n  },\n  render: ({ errorText }) =>\n    html`\n      <div id=\"zero-banner\" style=\"width: 100%;\">\n        <zero-button @click=\"${() => showError(errorText)}\">Show Zero Error Banner</zero-button>\n      </div>\n    `,\n}"
         }
       ],
       "exports": [
@@ -4599,7 +4185,7 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/dropdown-menu/dropdown-menu.stories.ts"
+            "module": "src/error-banner/error-banner.stories.ts"
           }
         },
         {
@@ -4607,63 +4193,53 @@
           "name": "Primary",
           "declaration": {
             "name": "Primary",
-            "module": "src/dropdown-menu/dropdown-menu.stories.ts"
+            "module": "src/error-banner/error-banner.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/dropdown-menu/dropdown-menu.styles.ts",
+      "path": "src/error-banner/error-banner.template.ts",
       "declarations": [
         {
-          "kind": "function",
-          "name": "zeroDropdownMenuStyles",
-          "return": {
-            "type": {
-              "text": "ElementStyles"
-            }
+          "kind": "variable",
+          "name": "zeroErrorBannerTemplate",
+          "type": {
+            "text": "ViewTemplate<ErrorBanner>"
           },
-          "parameters": [
-            {
-              "name": "context",
-              "type": {
-                "text": "ElementDefinitionContext"
-              }
-            },
-            {
-              "name": "definition",
-              "type": {
-                "text": "FoundationElementDefinition"
-              }
-            }
-          ]
+          "default": "html`\n  <zero-banner ${ref('banner')}>\n    <div slot=\"content\">\n      <div>${(x) => x.error?.errorDetails || 'Place holder for error message'}</div>\n    </div>\n\n    <zero-button slot=\"action\" appearance=\"lightweight\" @click=${(x) => x.dismiss()}>\n      ${(x) => x.error?.config?.banner?.dismissingAction?.label || 'Ignore'}\n    </zero-button>\n\n    ${repeat(\n      (x) => x.error?.config?.banner.confirmingActions,\n      html`\n        <zero-button\n          slot=\"action\"\n          appearance=\"lightweight\"\n          @click=${(x, c) => {\n            x?.action();\n            c.parent.dismiss();\n          }}\n        >\n          ${(x) => x.label}\n        </zero-button>\n      `\n    )}\n  </zero-banner>\n`"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "zeroDropdownMenuStyles",
+          "name": "zeroErrorBannerTemplate",
           "declaration": {
-            "name": "zeroDropdownMenuStyles",
-            "module": "src/dropdown-menu/dropdown-menu.styles.ts"
+            "name": "zeroErrorBannerTemplate",
+            "module": "src/error-banner/error-banner.template.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/dropdown-menu/dropdown-menu.ts",
+      "path": "src/error-banner/error-banner.ts",
       "declarations": [
+        {
+          "kind": "variable",
+          "name": "zeroErrorBannerShadowOptions",
+          "default": "foundationErrorBannerShadowOptions"
+        },
         {
           "kind": "class",
           "description": "",
-          "name": "DropdownMenu",
+          "name": "ErrorBanner",
           "superclass": {
-            "name": "FoundationDropdownMenu",
+            "name": "FoundationErrorBanner",
             "package": "@genesislcap/foundation-ui"
           },
-          "tagName": "%%prefix%%-dropdown-menu",
+          "tagName": "%%prefix%%-error-banner",
           "customElement": true,
           "members": [
             {
@@ -4781,167 +4357,82 @@
         },
         {
           "kind": "variable",
-          "name": "zeroDropdownMenu",
-          "description": "The Zero Dropdown Menu",
+          "name": "zeroErrorBanner",
+          "description": "The Zero Banner",
           "privacy": "public"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "DropdownMenu",
-          "declaration": {
-            "name": "DropdownMenu",
-            "module": "src/dropdown-menu/dropdown-menu.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "zeroDropdownMenu",
-          "declaration": {
-            "name": "zeroDropdownMenu",
-            "module": "src/dropdown-menu/dropdown-menu.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/dropdown-menu/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./dropdown-menu"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./dropdown-menu.styles"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "zeroDropdownMenuTemplate",
-          "declaration": {
-            "name": "foundationDropdownMenuTemplate",
-            "package": "@genesislcap/foundation-ui"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "getDropdownMenuTemplate",
+          "name": "zeroErrorBannerShadowOptions",
           "declaration": {
-            "name": "getDropdownMenuTemplate",
-            "package": "@genesislcap/foundation-ui"
+            "name": "zeroErrorBannerShadowOptions",
+            "module": "src/error-banner/error-banner.ts"
           }
         },
         {
           "kind": "js",
-          "name": "extractMenuItems",
+          "name": "ErrorBanner",
           "declaration": {
-            "name": "extractMenuItems",
-            "package": "@genesislcap/foundation-ui"
+            "name": "ErrorBanner",
+            "module": "src/error-banner/error-banner.ts"
           }
         },
         {
           "kind": "js",
-          "name": "dropdownMenuBaseStyles",
+          "name": "zeroErrorBanner",
           "declaration": {
-            "name": "dropdownMenuBaseStyles",
-            "package": "@genesislcap/foundation-ui"
+            "name": "zeroErrorBanner",
+            "module": "src/error-banner/error-banner.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/error-banner/error-banner.stories.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "meta",
-          "type": {
-            "text": "Meta"
-          },
-          "default": "{\n  title: 'Error Banner',\n  component: 'zero-error-banner',\n}"
-        },
-        {
-          "kind": "variable",
-          "name": "Primary",
-          "type": {
-            "text": "StoryObj"
-          },
-          "default": "{\n  args: {\n    errorText: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',\n  },\n  render: ({ errorText }) =>\n    html`\n      <div id=\"zero-banner\" style=\"width: 100%;\">\n        <zero-button @click=\"${() => showError(errorText)}\">Show Zero Error Banner</zero-button>\n      </div>\n    `,\n}"
-        }
-      ],
+      "path": "src/error-banner/index.ts",
+      "declarations": [],
       "exports": [
         {
           "kind": "js",
-          "name": "default",
+          "name": "*",
           "declaration": {
-            "name": "meta",
-            "module": "src/error-banner/error-banner.stories.ts"
+            "name": "*",
+            "package": "./error-banner.template"
           }
         },
         {
           "kind": "js",
-          "name": "Primary",
+          "name": "*",
           "declaration": {
-            "name": "Primary",
-            "module": "src/error-banner/error-banner.stories.ts"
+            "name": "*",
+            "package": "./error-banner"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/error-banner/error-banner.template.ts",
+      "path": "src/error-boundary/error-boundary.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "zeroErrorBannerTemplate",
+          "name": "zeroErrorBoundaryShadowOptions",
           "type": {
-            "text": "ViewTemplate<ErrorBanner>"
+            "text": "ShadowRootInit"
           },
-          "default": "html`\n  <zero-banner ${ref('banner')}>\n    <div slot=\"content\">\n      <div>${(x) => x.error?.errorDetails || 'Place holder for error message'}</div>\n    </div>\n\n    <zero-button slot=\"action\" appearance=\"lightweight\" @click=${(x) => x.dismiss()}>\n      ${(x) => x.error?.config?.banner?.dismissingAction?.label || 'Ignore'}\n    </zero-button>\n\n    ${repeat(\n      (x) => x.error?.config?.banner.confirmingActions,\n      html`\n        <zero-button\n          slot=\"action\"\n          appearance=\"lightweight\"\n          @click=${(x, c) => {\n            x?.action();\n            c.parent.dismiss();\n          }}\n        >\n          ${(x) => x.label}\n        </zero-button>\n      `\n    )}\n  </zero-banner>\n`"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "zeroErrorBannerTemplate",
-          "declaration": {
-            "name": "zeroErrorBannerTemplate",
-            "module": "src/error-banner/error-banner.template.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/error-banner/error-banner.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "zeroErrorBannerShadowOptions",
-          "default": "foundationErrorBannerShadowOptions"
+          "default": "{\n  mode: 'open',\n  delegatesFocus: true,\n}"
         },
         {
           "kind": "class",
           "description": "",
-          "name": "ErrorBanner",
+          "name": "ErrorBoundary",
           "superclass": {
-            "name": "FoundationErrorBanner",
+            "name": "FoundationErrorBoundary",
             "package": "@genesislcap/foundation-ui"
           },
-          "tagName": "%%prefix%%-error-banner",
+          "tagName": "%%prefix%%-error-boundary",
           "customElement": true,
           "members": [
             {
@@ -5059,41 +4550,39 @@
         },
         {
           "kind": "variable",
-          "name": "zeroErrorBanner",
-          "description": "The Zero Banner",
-          "privacy": "public"
+          "name": "zeroErrorBoundary"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "zeroErrorBannerShadowOptions",
+          "name": "zeroErrorBoundaryShadowOptions",
           "declaration": {
-            "name": "zeroErrorBannerShadowOptions",
-            "module": "src/error-banner/error-banner.ts"
+            "name": "zeroErrorBoundaryShadowOptions",
+            "module": "src/error-boundary/error-boundary.ts"
           }
         },
         {
           "kind": "js",
-          "name": "ErrorBanner",
+          "name": "ErrorBoundary",
           "declaration": {
-            "name": "ErrorBanner",
-            "module": "src/error-banner/error-banner.ts"
+            "name": "ErrorBoundary",
+            "module": "src/error-boundary/error-boundary.ts"
           }
         },
         {
           "kind": "js",
-          "name": "zeroErrorBanner",
+          "name": "zeroErrorBoundary",
           "declaration": {
-            "name": "zeroErrorBanner",
-            "module": "src/error-banner/error-banner.ts"
+            "name": "zeroErrorBoundary",
+            "module": "src/error-boundary/error-boundary.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/error-banner/index.ts",
+      "path": "src/error-boundary/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -5101,40 +4590,64 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./error-banner.template"
+            "package": "./error-boundary"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/error-dialog/error-dialog.stories.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "meta",
+          "type": {
+            "text": "Meta"
+          },
+          "default": "{\n  title: 'Error Dialog',\n  component: 'zero-error-dialog',\n}"
+        },
+        {
+          "kind": "variable",
+          "name": "Primary",
+          "type": {
+            "text": "StoryObj"
+          },
+          "default": "{\n  args: {\n    errorText:\n      'Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet',\n  },\n  render: ({ errorText }) => html`\n    <zero-button @click=\"${() => showDialog(errorText)}\">Show Zero Dialog</zero-button>\n    <div id=\"error-dialog-container\"></div>\n  `,\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "meta",
+            "module": "src/error-dialog/error-dialog.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "*",
+          "name": "Primary",
           "declaration": {
-            "name": "*",
-            "package": "./error-banner"
+            "name": "Primary",
+            "module": "src/error-dialog/error-dialog.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/error-boundary/error-boundary.ts",
+      "path": "src/error-dialog/error-dialog.ts",
       "declarations": [
-        {
-          "kind": "variable",
-          "name": "zeroErrorBoundaryShadowOptions",
-          "type": {
-            "text": "ShadowRootInit"
-          },
-          "default": "{\n  mode: 'open',\n  delegatesFocus: true,\n}"
-        },
         {
           "kind": "class",
           "description": "",
-          "name": "ErrorBoundary",
+          "name": "ErrorDialog",
           "superclass": {
-            "name": "FoundationErrorBoundary",
+            "name": "FoundationErrorDialog",
             "package": "@genesislcap/foundation-ui"
           },
-          "tagName": "%%prefix%%-error-boundary",
+          "tagName": "%%prefix%%-error-dialog",
           "customElement": true,
           "members": [
             {
@@ -5252,39 +4765,33 @@
         },
         {
           "kind": "variable",
-          "name": "zeroErrorBoundary"
+          "name": "zeroErrorDialog",
+          "description": "The zero ErrorDialog",
+          "privacy": "public"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "zeroErrorBoundaryShadowOptions",
-          "declaration": {
-            "name": "zeroErrorBoundaryShadowOptions",
-            "module": "src/error-boundary/error-boundary.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "ErrorBoundary",
+          "name": "ErrorDialog",
           "declaration": {
-            "name": "ErrorBoundary",
-            "module": "src/error-boundary/error-boundary.ts"
+            "name": "ErrorDialog",
+            "module": "src/error-dialog/error-dialog.ts"
           }
         },
         {
           "kind": "js",
-          "name": "zeroErrorBoundary",
+          "name": "zeroErrorDialog",
           "declaration": {
-            "name": "zeroErrorBoundary",
-            "module": "src/error-boundary/error-boundary.ts"
+            "name": "zeroErrorDialog",
+            "module": "src/error-dialog/error-dialog.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/error-boundary/index.ts",
+      "path": "src/error-dialog/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -5292,14 +4799,14 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./error-boundary"
+            "package": "./error-dialog"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/error-dialog/error-dialog.stories.ts",
+      "path": "src/dropdown-menu/dropdown-menu.stories.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -5307,7 +4814,7 @@
           "type": {
             "text": "Meta"
           },
-          "default": "{\n  title: 'Error Dialog',\n  component: 'zero-error-dialog',\n}"
+          "default": "{\n  title: 'Dropdown Menu',\n  component: 'zero-dropdown-menu',\n}"
         },
         {
           "kind": "variable",
@@ -5315,7 +4822,7 @@
           "type": {
             "text": "StoryObj"
           },
-          "default": "{\n  args: {\n    errorText:\n      'Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet',\n  },\n  render: ({ errorText }) => html`\n    <zero-button @click=\"${() => showDialog(errorText)}\">Show Zero Dialog</zero-button>\n    <div id=\"error-dialog-container\"></div>\n  `,\n}"
+          "default": "{\n  args: {\n    items: zeroItems,\n    dropdownOpenerText: 'Dropdown menu',\n  },\n  render: ({ dropdownOpenerText, items }) =>\n    html`\n      <div>\n        <zero-dropdown-menu name=\"${dropdownOpenerText}\" .items=${items}></zero-dropdown-menu>\n      </div>\n    `,\n}"
         }
       ],
       "exports": [
@@ -5324,7 +4831,7 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/error-dialog/error-dialog.stories.ts"
+            "module": "src/dropdown-menu/dropdown-menu.stories.ts"
           }
         },
         {
@@ -5332,24 +4839,63 @@
           "name": "Primary",
           "declaration": {
             "name": "Primary",
-            "module": "src/error-dialog/error-dialog.stories.ts"
+            "module": "src/dropdown-menu/dropdown-menu.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/error-dialog/error-dialog.ts",
+      "path": "src/dropdown-menu/dropdown-menu.styles.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "zeroDropdownMenuStyles",
+          "return": {
+            "type": {
+              "text": "ElementStyles"
+            }
+          },
+          "parameters": [
+            {
+              "name": "context",
+              "type": {
+                "text": "ElementDefinitionContext"
+              }
+            },
+            {
+              "name": "definition",
+              "type": {
+                "text": "FoundationElementDefinition"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "zeroDropdownMenuStyles",
+          "declaration": {
+            "name": "zeroDropdownMenuStyles",
+            "module": "src/dropdown-menu/dropdown-menu.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/dropdown-menu/dropdown-menu.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "ErrorDialog",
+          "name": "DropdownMenu",
           "superclass": {
-            "name": "FoundationErrorDialog",
+            "name": "FoundationDropdownMenu",
             "package": "@genesislcap/foundation-ui"
           },
-          "tagName": "%%prefix%%-error-dialog",
+          "tagName": "%%prefix%%-dropdown-menu",
           "customElement": true,
           "members": [
             {
@@ -5467,33 +5013,33 @@
         },
         {
           "kind": "variable",
-          "name": "zeroErrorDialog",
-          "description": "The zero ErrorDialog",
+          "name": "zeroDropdownMenu",
+          "description": "The Zero Dropdown Menu",
           "privacy": "public"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "ErrorDialog",
+          "name": "DropdownMenu",
           "declaration": {
-            "name": "ErrorDialog",
-            "module": "src/error-dialog/error-dialog.ts"
+            "name": "DropdownMenu",
+            "module": "src/dropdown-menu/dropdown-menu.ts"
           }
         },
         {
           "kind": "js",
-          "name": "zeroErrorDialog",
+          "name": "zeroDropdownMenu",
           "declaration": {
-            "name": "zeroErrorDialog",
-            "module": "src/error-dialog/error-dialog.ts"
+            "name": "zeroDropdownMenu",
+            "module": "src/dropdown-menu/dropdown-menu.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/error-dialog/index.ts",
+      "path": "src/dropdown-menu/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -5501,14 +5047,54 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./error-dialog"
+            "package": "./dropdown-menu"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./dropdown-menu.styles"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "zeroDropdownMenuTemplate",
+          "declaration": {
+            "name": "foundationDropdownMenuTemplate",
+            "package": "@genesislcap/foundation-ui"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "getDropdownMenuTemplate",
+          "declaration": {
+            "name": "getDropdownMenuTemplate",
+            "package": "@genesislcap/foundation-ui"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "extractMenuItems",
+          "declaration": {
+            "name": "extractMenuItems",
+            "package": "@genesislcap/foundation-ui"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "dropdownMenuBaseStyles",
+          "declaration": {
+            "name": "dropdownMenuBaseStyles",
+            "package": "@genesislcap/foundation-ui"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/file-upload/file-upload.stories.ts",
+      "path": "src/dialog/dialog.stories.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -5516,7 +5102,7 @@
           "type": {
             "text": "Meta"
           },
-          "default": "{\n  title: 'File Upload',\n  component: 'zero-file-upload',\n}"
+          "default": "{\n  title: 'Dialog',\n  component: 'zero-dialog',\n}"
         },
         {
           "kind": "variable",
@@ -5524,7 +5110,7 @@
           "type": {
             "text": "StoryObj"
           },
-          "default": "{\n  render: () => html`\n    <div style=\"min-height: 300px;\">\n      <zero-file-upload label=\"Select Files\"></zero-file-upload>\n    </div>\n  `,\n}"
+          "default": "{\n  args: {\n    dialogMaxWidth: '557px',\n    dialogTitle: 'Dialog title',\n    dialogInitialText: 'Some text in a Zero Dialog',\n    dialogMainText: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis similique iste ab sed\n      voluptatem ut suscipit tenetur distinctio? Quo est debitis pariatur qui quisquam repudiandae\n      at atque et quibusdam rerum, reprehenderit sed laborum officiis distinctio dolorum\n      temporibus aperiam dolor consequatur perferendis aspernatur fugit repellendus asperiores,\n      voluptas illo? Voluptatum, atque quidem?`,\n    dialogCloseButtonText: 'Close this dialog',\n  },\n  render: ({\n    dialogMaxWidth,\n    dialogTitle,\n    dialogInitialText,\n    dialogMainText,\n    dialogCloseButtonText,\n  }) => html`\n    <zero-button @click=\"${showDialog}\">Show Zero Dialog</zero-button>\n    <zero-dialog style=\"--dialog-max-width: ${dialogMaxWidth};\">\n      <h5 slot=\"top\">${dialogTitle}</h5>\n      <p>${dialogInitialText}</p>\n      <p>${dialogMainText}</p>\n      <zero-divider slot=\"bottom\"></zero-divider>\n      <zero-button appearance=\"primary-gradient\" slot=\"bottom\" @click=\"${closeDialog}\">\n        ${dialogCloseButtonText}\n      </zero-button>\n    </zero-dialog>\n  `,\n}"
         }
       ],
       "exports": [
@@ -5533,7 +5119,7 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/file-upload/file-upload.stories.ts"
+            "module": "src/dialog/dialog.stories.ts"
           }
         },
         {
@@ -5541,78 +5127,191 @@
           "name": "Primary",
           "declaration": {
             "name": "Primary",
-            "module": "src/file-upload/file-upload.stories.ts"
+            "module": "src/dialog/dialog.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/file-upload/file-upload.styles.ts",
+      "path": "src/dialog/dialog.styles.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "zeroFileUploadStyles",
-          "default": "css`\n  ${foundationFileUploadStyles}\n  ::-webkit-scrollbar {\n    width: 12px;\n  }\n\n  ::-webkit-scrollbar-track {\n    background: rgb(31 33 38);\n  }\n\n  ::-webkit-scrollbar-thumb {\n    width: 8px;\n    border-radius: 10px;\n    box-shadow: inset 0 0 6px rgba(0 0 0 / 30%);\n    background-color: var(--neutral-color);\n    border: 3px solid rgb(31 33 38);\n  }\n`"
+          "name": "zeroDialogStyles",
+          "default": "css`\n  ${foundationDialogStyles}\n  :host {\n    --dialog-background: ${neutralLayer2};\n  }\n\n  dialog {\n    position: fixed;\n    top: 0;\n    bottom: 0;\n    color: rgb(255 255 255 / 30%);\n    border-radius: calc(var(--control-corner-radius) * 1px);\n    border: 1px solid ${ColorHEX.lightGrey};\n    text-align: left;\n    line-height: normal;\n    box-shadow: 0 2px 15px 0 rgb(0 0 0 / 35%);\n  }\n\n  .top {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    color: ${ColorHEX.almostWhite};\n    margin-bottom: calc(var(--design-unit) * 2px);\n  }\n\n  .bottom {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: flex-end;\n    color: ${ColorHEX.almostWhite};\n  }\n\n  :host slot:first-of-type {\n    color: ${neutralForegroundRest};\n  }\n\n  ::slotted(zero-button) {\n    margin-top: calc(var(--design-unit) * 4px - 1px);\n  }\n\n  .content-wrapper {\n    min-width: var(--dialog-min-width);\n    min-height: var(--dialog-min-height);\n    height: fit-content;\n    width: fit-content;\n    max-width: var(--dialog-max-width);\n    max-height: var(--dialog-max-height);\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    align-items: stretch;\n  }\n\n  .close-icon:hover svg {\n    background-color: ${whiteWebRGBA(0.05)};\n  }\n\n  .close-icon:hover svg g path {\n    fill: ${whiteWebRGBA(1)};\n  }\n\n  .close-icon:active svg {\n    background-color: ${defaultDialogActiveBGColor};\n  }\n\n  .close-icon:active svg g path {\n    fill: ${whiteWebRGBA(0.33)};\n  }\n`"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "zeroFileUploadStyles",
+          "name": "zeroDialogStyles",
           "declaration": {
-            "name": "zeroFileUploadStyles",
-            "module": "src/file-upload/file-upload.styles.ts"
+            "name": "zeroDialogStyles",
+            "module": "src/dialog/dialog.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/file-upload/file-upload.template.ts",
+      "path": "src/dialog/dialog.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "fileUploadTemplate",
-          "default": "html<FileUpload>`\n  ${getPrefixedFileUpload('zero')}\n`"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "fileUploadTemplate",
-          "declaration": {
-            "name": "fileUploadTemplate",
-            "module": "src/file-upload/file-upload.template.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/file-upload/file-upload.ts",
-      "declarations": [
+          "name": "defaultDialogConfig",
+          "default": "foundationConfig"
+        },
         {
           "kind": "variable",
-          "name": "defaultFileUploadConfig",
-          "default": "foundationConfig"
+          "name": "zeroDialogTemplate",
+          "default": "foundationDialogTemplate"
         },
         {
           "kind": "variable",
-          "name": "zeroFileUploadShadowOptions",
-          "default": "foundationFileUploadShadowOptions"
+          "name": "zeroDialogShadowOptions",
+          "default": "foundationDialogShadowOptions"
         },
         {
           "kind": "class",
           "description": "",
-          "name": "FileUpload",
+          "name": "Dialog",
           "superclass": {
-            "name": "FoundationFileUpload",
+            "name": "FoundationDialog",
             "package": "@genesislcap/foundation-ui"
           },
-          "tagName": "%%prefix%%-file-upload",
+          "tagName": "%%prefix%%-dialog",
           "customElement": true,
+          "attributes": [
+            {
+              "name": "position",
+              "type": {
+                "text": "'centre' | 'left' | 'right'"
+              },
+              "default": "'centre'",
+              "fieldName": "position",
+              "inheritedFrom": {
+                "name": "DialogElement",
+                "module": "src/dialog/dialog.ts"
+              }
+            },
+            {
+              "name": "show-close-icon",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Whether or not to show the close icon",
+              "fieldName": "showCloseIcon",
+              "inheritedFrom": {
+                "name": "DialogElement",
+                "module": "src/dialog/dialog.ts"
+              }
+            }
+          ],
           "members": [
+            {
+              "kind": "field",
+              "name": "mainElement",
+              "type": {
+                "text": "HTMLDialogElement"
+              },
+              "description": "A reference to the dialog element\nin the component Shadow DOM.",
+              "inheritedFrom": {
+                "name": "DialogElement",
+                "module": "src/dialog/dialog.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "position",
+              "type": {
+                "text": "'centre' | 'left' | 'right'"
+              },
+              "default": "'centre'",
+              "inheritedFrom": {
+                "name": "DialogElement",
+                "module": "src/dialog/dialog.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "showCloseIcon",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Whether or not to show the close icon",
+              "inheritedFrom": {
+                "name": "DialogElement",
+                "module": "src/dialog/dialog.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "onShowCallback",
+              "type": {
+                "text": "() => void"
+              },
+              "description": "Callback to run *before* HTMLDialogElement is shown",
+              "inheritedFrom": {
+                "name": "DialogElement",
+                "module": "src/dialog/dialog.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "onCloseCallback",
+              "type": {
+                "text": "() => void"
+              },
+              "description": "Callback to run *after* HTMLDialogElement is closed",
+              "inheritedFrom": {
+                "name": "DialogElement",
+                "module": "src/dialog/dialog.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Determine if the dialog is showing or closed.",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "DialogElement",
+                "module": "src/dialog/dialog.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "show",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Show the HTMLDialogElement and its contents",
+              "inheritedFrom": {
+                "name": "DialogElement",
+                "module": "src/dialog/dialog.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "close",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Remove the HTMLDialogElement from display",
+              "inheritedFrom": {
+                "name": "DialogElement",
+                "module": "src/dialog/dialog.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "_presentation",
@@ -5728,49 +5427,57 @@
         },
         {
           "kind": "variable",
-          "name": "zeroFileUpload",
-          "description": "The Zero FileUpload",
+          "name": "zeroDialog",
+          "description": "The Zero Dialog",
           "privacy": "public"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "defaultFileUploadConfig",
+          "name": "defaultDialogConfig",
           "declaration": {
-            "name": "defaultFileUploadConfig",
-            "module": "src/file-upload/file-upload.ts"
+            "name": "defaultDialogConfig",
+            "module": "src/dialog/dialog.ts"
           }
         },
         {
           "kind": "js",
-          "name": "zeroFileUploadShadowOptions",
+          "name": "zeroDialogTemplate",
           "declaration": {
-            "name": "zeroFileUploadShadowOptions",
-            "module": "src/file-upload/file-upload.ts"
+            "name": "zeroDialogTemplate",
+            "module": "src/dialog/dialog.ts"
           }
         },
         {
           "kind": "js",
-          "name": "FileUpload",
+          "name": "zeroDialogShadowOptions",
           "declaration": {
-            "name": "FileUpload",
-            "module": "src/file-upload/file-upload.ts"
+            "name": "zeroDialogShadowOptions",
+            "module": "src/dialog/dialog.ts"
           }
         },
         {
           "kind": "js",
-          "name": "zeroFileUpload",
+          "name": "Dialog",
           "declaration": {
-            "name": "zeroFileUpload",
-            "module": "src/file-upload/file-upload.ts"
+            "name": "Dialog",
+            "module": "src/dialog/dialog.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "zeroDialog",
+          "declaration": {
+            "name": "zeroDialog",
+            "module": "src/dialog/dialog.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/file-upload/index.ts",
+      "path": "src/dialog/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -5778,7 +5485,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./file-upload"
+            "package": "./dialog"
           }
         },
         {
@@ -5786,14 +5493,14 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./file-upload.styles"
+            "package": "./dialog.styles"
           }
         },
         {
           "kind": "js",
-          "name": "zeroFileUploadTemplate",
+          "name": "zeroDialogTemplate",
           "declaration": {
-            "name": "foundationFileUploadTemplate",
+            "name": "foundationDialogTemplate",
             "package": "@genesislcap/foundation-ui"
           }
         }
@@ -5801,7 +5508,7 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/filter/filter.stories.ts",
+      "path": "src/file-upload/file-upload.stories.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -5809,7 +5516,7 @@
           "type": {
             "text": "Meta"
           },
-          "default": "{\n  title: 'Filter',\n  component: 'zero-filter',\n}"
+          "default": "{\n  title: 'File Upload',\n  component: 'zero-file-upload',\n}"
         },
         {
           "kind": "variable",
@@ -5817,7 +5524,7 @@
           "type": {
             "text": "StoryObj"
           },
-          "default": "{\n  render: () =>\n    html`\n      <zero-filter type=\"text\" fieldName=\"SOME_TEXT_FIELD\"></zero-filter>\n      <zero-filter type=\"boolean\" fieldName=\"SOME_BOOLEAN_FIELD\"></zero-filter>\n      <zero-filter type=\"date\" fieldName=\"SOME_DATE_FIELD\"></zero-filter>\n      <zero-filter type=\"number\" fieldName=\"SOME_NUMERIC_FIELD\"></zero-filter>\n    `,\n}"
+          "default": "{\n  render: () => html`\n    <div style=\"min-height: 300px;\">\n      <zero-file-upload label=\"Select Files\"></zero-file-upload>\n    </div>\n  `,\n}"
         }
       ],
       "exports": [
@@ -5826,7 +5533,7 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/filter/filter.stories.ts"
+            "module": "src/file-upload/file-upload.stories.ts"
           }
         },
         {
@@ -5834,117 +5541,78 @@
           "name": "Primary",
           "declaration": {
             "name": "Primary",
-            "module": "src/filter/filter.stories.ts"
+            "module": "src/file-upload/file-upload.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/filter/filter.template.ts",
+      "path": "src/file-upload/file-upload.styles.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "zeroFilterTemplate",
-          "type": {
-            "text": "ViewTemplate<Filter>"
-          },
-          "default": "html`\n  <div class=\"filter-wrapper\">${(x) => selectTemplate(x)}</div>\n`"
+          "name": "zeroFileUploadStyles",
+          "default": "css`\n  ${foundationFileUploadStyles}\n  ::-webkit-scrollbar {\n    width: 12px;\n  }\n\n  ::-webkit-scrollbar-track {\n    background: rgb(31 33 38);\n  }\n\n  ::-webkit-scrollbar-thumb {\n    width: 8px;\n    border-radius: 10px;\n    box-shadow: inset 0 0 6px rgba(0 0 0 / 30%);\n    background-color: var(--neutral-color);\n    border: 3px solid rgb(31 33 38);\n  }\n`"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "zeroFilterTemplate",
-          "declaration": {
-            "name": "zeroFilterTemplate",
-            "module": "src/filter/filter.template.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/filter/filter.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "Filter",
-          "members": [
-            {
-              "kind": "field",
-              "name": "textFilterField",
-              "type": {
-                "text": "TextField"
-              },
-              "privacy": "public"
-            },
-            {
-              "kind": "field",
-              "name": "numFilterFieldMin",
-              "type": {
-                "text": "TextField"
-              },
-              "privacy": "public"
-            },
-            {
-              "kind": "field",
-              "name": "numFilterFieldMax",
-              "type": {
-                "text": "TextField"
-              },
-              "privacy": "public"
-            },
-            {
-              "kind": "field",
-              "name": "dateFilterFieldMin",
-              "type": {
-                "text": "TextField"
-              },
-              "privacy": "public"
-            },
-            {
-              "kind": "field",
-              "name": "dateFilterFieldMax",
-              "type": {
-                "text": "TextField"
-              },
-              "privacy": "public"
-            },
-            {
-              "kind": "field",
-              "name": "fieldName",
-              "type": {
-                "text": "string"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "type"
-            },
-            {
-              "kind": "field",
-              "name": "target",
-              "type": {
-                "text": "string"
-              },
-              "description": "Will be included in event emmissions.\nUsually set to the id of the target datasource.\nUsefull when we have multiple grids in the same page."
-            },
-            {
-              "kind": "field",
-              "name": "enumFilterOptions",
-              "type": {
-                "text": "any[]"
-              }
-            },
+          "name": "zeroFileUploadStyles",
+          "declaration": {
+            "name": "zeroFileUploadStyles",
+            "module": "src/file-upload/file-upload.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/file-upload/file-upload.template.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "fileUploadTemplate",
+          "default": "html<FileUpload>`\n  ${getPrefixedFileUpload('zero')}\n`"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "fileUploadTemplate",
+          "declaration": {
+            "name": "fileUploadTemplate",
+            "module": "src/file-upload/file-upload.template.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/file-upload/file-upload.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "defaultFileUploadConfig",
+          "default": "foundationConfig"
+        },
+        {
+          "kind": "variable",
+          "name": "zeroFileUploadShadowOptions",
+          "default": "foundationFileUploadShadowOptions"
+        },
+        {
+          "kind": "class",
+          "description": "",
+          "name": "FileUpload",
+          "superclass": {
+            "name": "FoundationFileUpload",
+            "package": "@genesislcap/foundation-ui"
+          },
+          "tagName": "%%prefix%%-file-upload",
+          "customElement": true,
+          "members": [
             {
               "kind": "field",
               "name": "_presentation",
@@ -6056,69 +5724,53 @@
                 "module": "src/foundation-element/foundation-element.ts"
               }
             }
-          ],
-          "attributes": [
-            {
-              "name": "fieldName",
-              "type": {
-                "text": "string"
-              },
-              "fieldName": "fieldName"
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "fieldName": "label"
-            },
-            {
-              "name": "type",
-              "fieldName": "type"
-            },
-            {
-              "name": "target",
-              "type": {
-                "text": "string"
-              },
-              "description": "Will be included in event emmissions.\nUsually set to the id of the target datasource.\nUsefull when we have multiple grids in the same page.",
-              "fieldName": "target"
-            }
-          ],
-          "superclass": {
-            "name": "FoundationFilter",
-            "package": "@genesislcap/foundation-ui"
-          },
-          "tagName": "%%prefix%%-filter",
-          "customElement": true
+          ]
         },
         {
           "kind": "variable",
-          "name": "zeroFilter"
+          "name": "zeroFileUpload",
+          "description": "The Zero FileUpload",
+          "privacy": "public"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "Filter",
+          "name": "defaultFileUploadConfig",
           "declaration": {
-            "name": "Filter",
-            "module": "src/filter/filter.ts"
+            "name": "defaultFileUploadConfig",
+            "module": "src/file-upload/file-upload.ts"
           }
         },
         {
           "kind": "js",
-          "name": "zeroFilter",
+          "name": "zeroFileUploadShadowOptions",
           "declaration": {
-            "name": "zeroFilter",
-            "module": "src/filter/filter.ts"
+            "name": "zeroFileUploadShadowOptions",
+            "module": "src/file-upload/file-upload.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FileUpload",
+          "declaration": {
+            "name": "FileUpload",
+            "module": "src/file-upload/file-upload.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "zeroFileUpload",
+          "declaration": {
+            "name": "zeroFileUpload",
+            "module": "src/file-upload/file-upload.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/filter/index.ts",
+      "path": "src/file-upload/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -6126,7 +5778,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./filter"
+            "package": "./file-upload"
           }
         },
         {
@@ -6134,14 +5786,14 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./filter.template"
+            "package": "./file-upload.styles"
           }
         },
         {
           "kind": "js",
-          "name": "zeroFilterStyles",
+          "name": "zeroFileUploadTemplate",
           "declaration": {
-            "name": "foundationFilterStyles",
+            "name": "foundationFileUploadTemplate",
             "package": "@genesislcap/foundation-ui"
           }
         }
@@ -6149,7 +5801,7 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/filter-bar/filter-bar.stories.ts",
+      "path": "src/filter/filter.stories.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -6157,7 +5809,7 @@
           "type": {
             "text": "Meta"
           },
-          "default": "{\n  title: 'Filter Bar',\n  component: 'zero-filter-bar',\n}"
+          "default": "{\n  title: 'Filter',\n  component: 'zero-filter',\n}"
         },
         {
           "kind": "variable",
@@ -6165,7 +5817,7 @@
           "type": {
             "text": "StoryObj"
           },
-          "default": "{\n  render: () =>\n    html`\n      <zero-filter-bar\n        resource=\"ALL_PROCESSES_STATUS\"\n        only=\"PROCESS_PORT, START_TIME, PROCESS_NAME, DATADUMP\"\n      ></zero-filter-bar>\n    `,\n}"
+          "default": "{\n  render: () =>\n    html`\n      <zero-filter type=\"text\" fieldName=\"SOME_TEXT_FIELD\"></zero-filter>\n      <zero-filter type=\"boolean\" fieldName=\"SOME_BOOLEAN_FIELD\"></zero-filter>\n      <zero-filter type=\"date\" fieldName=\"SOME_DATE_FIELD\"></zero-filter>\n      <zero-filter type=\"number\" fieldName=\"SOME_NUMERIC_FIELD\"></zero-filter>\n    `,\n}"
         }
       ],
       "exports": [
@@ -6174,7 +5826,7 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/filter-bar/filter-bar.stories.ts"
+            "module": "src/filter/filter.stories.ts"
           }
         },
         {
@@ -6182,143 +5834,116 @@
           "name": "Primary",
           "declaration": {
             "name": "Primary",
-            "module": "src/filter-bar/filter-bar.stories.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/filter-bar/filter-bar.styles.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "zeroFilterBarStyles",
-          "return": {
-            "type": {
-              "text": "ElementStyles"
-            }
-          },
-          "parameters": [
-            {
-              "name": "context",
-              "type": {
-                "text": "ElementDefinitionContext"
-              }
-            },
-            {
-              "name": "definition",
-              "type": {
-                "text": "FoundationElementDefinition"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "zeroFilterBarStyles",
-          "declaration": {
-            "name": "zeroFilterBarStyles",
-            "module": "src/filter-bar/filter-bar.styles.ts"
+            "module": "src/filter/filter.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/filter-bar/filter-bar.template.ts",
+      "path": "src/filter/filter.template.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "zeroFilterBarTemplate",
+          "name": "zeroFilterTemplate",
           "type": {
-            "text": "ViewTemplate<FilterBar>"
+            "text": "ViewTemplate<Filter>"
           },
-          "default": "html`\n  ${filterBarTemplate}\n`"
+          "default": "html`\n  <div class=\"filter-wrapper\">${(x) => selectTemplate(x)}</div>\n`"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "zeroFilterBarTemplate",
+          "name": "zeroFilterTemplate",
           "declaration": {
-            "name": "zeroFilterBarTemplate",
-            "module": "src/filter-bar/filter-bar.template.ts"
+            "name": "zeroFilterTemplate",
+            "module": "src/filter/filter.template.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/filter-bar/filter-bar.ts",
+      "path": "src/filter/filter.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "FilterBar",
+          "name": "Filter",
           "members": [
             {
               "kind": "field",
-              "name": "resource",
+              "name": "textFilterField",
               "type": {
-                "text": "string"
-              }
+                "text": "TextField"
+              },
+              "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "only",
+              "name": "numFilterFieldMin",
               "type": {
-                "text": "string"
+                "text": "TextField"
               },
-              "description": "Only generate filters for the specified fields, provided as a comma separated list.\nDefault behavior (if \"only\" is not set) is to generate filters for all fields based on metadata."
+              "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "labels",
+              "name": "numFilterFieldMax",
               "type": {
-                "text": "string"
+                "text": "TextField"
               },
-              "description": "Labels for the specified fields, to be used alongside \"only\" prop."
+              "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "target",
+              "name": "dateFilterFieldMin",
               "type": {
-                "text": "string"
+                "text": "TextField"
               },
-              "description": "Will be included in event emmissions.\nUsually set to the id of the target datasource.\nUsefull when we have multiple grids in the same page."
+              "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "ready",
+              "name": "dateFilterFieldMax",
               "type": {
-                "text": "boolean"
-              }
+                "text": "TextField"
+              },
+              "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "fields",
+              "name": "fieldName",
               "type": {
-                "text": "MetadataDetail[]"
+                "text": "string"
               }
             },
             {
               "kind": "field",
-              "name": "filterGrid",
+              "name": "label",
               "type": {
-                "text": "HTMLDivElement"
-              },
-              "privacy": "public"
+                "text": "string"
+              }
             },
             {
               "kind": "field",
-              "name": "collapsed",
+              "name": "type"
+            },
+            {
+              "kind": "field",
+              "name": "target",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "true"
+              "description": "Will be included in event emmissions.\nUsually set to the id of the target datasource.\nUsefull when we have multiple grids in the same page."
+            },
+            {
+              "kind": "field",
+              "name": "enumFilterOptions",
+              "type": {
+                "text": "any[]"
+              }
             },
             {
               "kind": "field",
@@ -6434,27 +6059,22 @@
           ],
           "attributes": [
             {
-              "name": "resource",
+              "name": "fieldName",
               "type": {
                 "text": "string"
               },
-              "fieldName": "resource"
+              "fieldName": "fieldName"
             },
             {
-              "name": "only",
+              "name": "label",
               "type": {
                 "text": "string"
               },
-              "description": "Only generate filters for the specified fields, provided as a comma separated list.\nDefault behavior (if \"only\" is not set) is to generate filters for all fields based on metadata.",
-              "fieldName": "only"
+              "fieldName": "label"
             },
             {
-              "name": "labels",
-              "type": {
-                "text": "string"
-              },
-              "description": "Labels for the specified fields, to be used alongside \"only\" prop.",
-              "fieldName": "labels"
+              "name": "type",
+              "fieldName": "type"
             },
             {
               "name": "target",
@@ -6466,41 +6086,39 @@
             }
           ],
           "superclass": {
-            "name": "FoundationFilterBar",
+            "name": "FoundationFilter",
             "package": "@genesislcap/foundation-ui"
           },
-          "tagName": "%%prefix%%-filter-bar",
+          "tagName": "%%prefix%%-filter",
           "customElement": true
         },
         {
           "kind": "variable",
-          "name": "zeroFilterBar",
-          "description": "The Zero Filter",
-          "privacy": "public"
+          "name": "zeroFilter"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "FilterBar",
+          "name": "Filter",
           "declaration": {
-            "name": "FilterBar",
-            "module": "src/filter-bar/filter-bar.ts"
+            "name": "Filter",
+            "module": "src/filter/filter.ts"
           }
         },
         {
           "kind": "js",
-          "name": "zeroFilterBar",
+          "name": "zeroFilter",
           "declaration": {
-            "name": "zeroFilterBar",
-            "module": "src/filter-bar/filter-bar.ts"
+            "name": "zeroFilter",
+            "module": "src/filter/filter.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/filter-bar/index.ts",
+      "path": "src/filter/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -6508,7 +6126,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./filter-bar.styles"
+            "package": "./filter"
           }
         },
         {
@@ -6516,15 +6134,15 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./filter-bar.template"
+            "package": "./filter.template"
           }
         },
         {
           "kind": "js",
-          "name": "*",
+          "name": "zeroFilterStyles",
           "declaration": {
-            "name": "*",
-            "package": "./filter-bar"
+            "name": "foundationFilterStyles",
+            "package": "@genesislcap/foundation-ui"
           }
         }
       ]
@@ -6843,59 +6461,244 @@
               }
             }
           ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "zeroFlipperTemplate",
-          "declaration": {
-            "name": "zeroFlipperTemplate",
-            "module": "src/flipper/flipper.template.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/flipper/flipper.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "Flipper",
-          "superclass": {
-            "name": "FoundationFlipper",
-            "package": "@genesislcap/foundation-ui"
-          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "zeroFlipperTemplate",
+          "declaration": {
+            "name": "zeroFlipperTemplate",
+            "module": "src/flipper/flipper.template.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/flipper/flipper.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "Flipper",
+          "superclass": {
+            "name": "FoundationFlipper",
+            "package": "@genesislcap/foundation-ui"
+          }
+        },
+        {
+          "kind": "variable",
+          "name": "zeroFlipper"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "Flipper",
+          "declaration": {
+            "name": "Flipper",
+            "module": "src/flipper/flipper.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "zeroFlipper",
+          "declaration": {
+            "name": "zeroFlipper",
+            "module": "src/flipper/flipper.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/flipper/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./flipper"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./flipper.styles"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./flipper.template"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/grid-layout-item/grid-layout-item.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "GridLayoutItem",
+          "superclass": {
+            "name": "FoundationGridLayoutItem",
+            "package": "@genesislcap/foundation-ui"
+          },
+          "tagName": "%%prefix%%-grid-layout-item",
+          "customElement": true,
+          "members": [
+            {
+              "kind": "field",
+              "name": "_presentation",
+              "type": {
+                "text": "ComponentPresentation | null | undefined"
+              },
+              "privacy": "private",
+              "default": "void 0",
+              "inheritedFrom": {
+                "name": "FoundationElement",
+                "module": "src/foundation-element/foundation-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "$presentation",
+              "type": {
+                "text": "ComponentPresentation | null"
+              },
+              "privacy": "public",
+              "description": "A property which resolves the ComponentPresentation instance\nfor the current component.",
+              "inheritedFrom": {
+                "name": "FoundationElement",
+                "module": "src/foundation-element/foundation-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "template",
+              "type": {
+                "text": "ElementViewTemplate | void | null"
+              },
+              "privacy": "public",
+              "description": "Sets the template of the element instance. When undefined,\nthe element will attempt to resolve the template from\nthe associated presentation or custom element definition.",
+              "inheritedFrom": {
+                "name": "FoundationElement",
+                "module": "src/foundation-element/foundation-element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "templateChanged",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "inheritedFrom": {
+                "name": "FoundationElement",
+                "module": "src/foundation-element/foundation-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "styles",
+              "type": {
+                "text": "ElementStyles | void | null"
+              },
+              "privacy": "public",
+              "description": "Sets the default styles for the element instance. When undefined,\nthe element will attempt to resolve default styles from\nthe associated presentation or custom element definition.",
+              "inheritedFrom": {
+                "name": "FoundationElement",
+                "module": "src/foundation-element/foundation-element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "stylesChanged",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "inheritedFrom": {
+                "name": "FoundationElement",
+                "module": "src/foundation-element/foundation-element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "compose",
+              "privacy": "public",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "(\n        overrideDefinition?: OverrideFoundationElementDefinition<T>\n    ) => FoundationElementRegistry<T, K>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "this",
+                  "type": {
+                    "text": "K"
+                  }
+                },
+                {
+                  "name": "elementDefinition",
+                  "type": {
+                    "text": "T"
+                  },
+                  "description": "The definition of the element to create the registry\nfunction for."
+                }
+              ],
+              "description": "Defines an element registry function with a set of element definition defaults.",
+              "inheritedFrom": {
+                "name": "FoundationElement",
+                "module": "src/foundation-element/foundation-element.ts"
+              }
+            }
+          ]
         },
         {
           "kind": "variable",
-          "name": "zeroFlipper"
+          "name": "zeroGridLayoutItem",
+          "description": "The Zero Grid Layout Item",
+          "privacy": "public"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "Flipper",
+          "name": "GridLayoutItem",
           "declaration": {
-            "name": "Flipper",
-            "module": "src/flipper/flipper.ts"
+            "name": "GridLayoutItem",
+            "module": "src/grid-layout-item/grid-layout-item.ts"
           }
         },
         {
           "kind": "js",
-          "name": "zeroFlipper",
+          "name": "zeroGridLayoutItem",
           "declaration": {
-            "name": "zeroFlipper",
-            "module": "src/flipper/flipper.ts"
+            "name": "zeroGridLayoutItem",
+            "module": "src/grid-layout-item/grid-layout-item.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/flipper/index.ts",
+      "path": "src/grid-layout-item/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -6903,30 +6706,22 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./flipper"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./flipper.styles"
+            "package": "./grid-layout-item"
           }
         },
         {
           "kind": "js",
-          "name": "*",
+          "name": "zeroGridLayoutItemTemplate",
           "declaration": {
-            "name": "*",
-            "package": "./flipper.template"
+            "name": "foundationGridLayoutItemTemplate",
+            "package": "@genesislcap/foundation-ui"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/flyout/flyout.stories.ts",
+      "path": "src/grid-layout/grid-layout.stories.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -6934,7 +6729,7 @@
           "type": {
             "text": "Meta"
           },
-          "default": "{\n  title: 'Flyout',\n  component: 'zero-flyout',\n}"
+          "default": "{\n  title: 'Grid Layout',\n  component: 'zero-grid-layout',\n}"
         },
         {
           "kind": "variable",
@@ -6942,7 +6737,7 @@
           "type": {
             "text": "StoryObj"
           },
-          "default": "{\n  argTypes: {\n    position: {\n      control: 'select',\n      options: ['left', 'right'],\n    },\n  },\n  args: {\n    position: 'right',\n    height: '500px',\n    flyoutWidth: '20%',\n  },\n  render: ({ position, height, flyoutWidth }) =>\n    html`\n      <div style=\"display: flex; height: ${height};\">\n        <zero-button @click=\"${openFlyout}\">Open Flyout</zero-button>\n\n        <style>\n          zero-flyout::part(flyout) {\n            width: ${flyoutWidth};\n          }\n        </style>\n        <zero-flyout position=\"${position}\" style=\"height: ${height};\">\n          <p slot=\"title\">Zero flyout</p>\n          <div slot=\"header\">\n            <p>Header</p>\n          </div>\n          <div class=\"container\">\n            <p>Flyout options</p>\n            <ul>\n              <li>0</li>\n              <li>1</li>\n              <li>2</li>\n              <li>3</li>\n              <li>4</li>\n              <li>5</li>\n            </ul>\n          </div>\n          <div slot=\"footer\">\n            <p>Footer</p>\n            <zero-button @click=\"${closeFlyout}\">Close Flyout</zero-button>\n          </div>\n        </zero-flyout>\n      </div>\n    `,\n}"
+          "default": "{\n  render: () => html`\n    <div style=\"${wrapperStyle}\">\n      <zero-card style=\"height: 200px; width: 100%;\">\n        <zero-grid-layout\n          class=\"spacing-2x\"\n          col-count=\"2\"\n          row-count=\"2\"\n          col-lg-count=\"4\"\n          row-lg-count=\"1\"\n          col-sm-count=\"1\"\n          row-sm-count=\"2\"\n        >\n          <zero-grid-layout-item\n            style=\"height: 100%; background-color: green;\"\n            col-lg-number=\"1\"\n            row-lg-number=\"1\"\n            width-lg=\"1\"\n            height-lg=\"1\"\n            col-md-number=\"1\"\n            row-md-number=\"1\"\n            width-md=\"1\"\n            height-md=\"1\"\n            col-sm-number=\"1\"\n            row-sm-number=\"1\"\n            width-sm=\"1\"\n            height-sm=\"1\"\n          ></zero-grid-layout-item>\n          <zero-grid-layout-item\n            style=\"height: 100%; background-color: red;\"\n            col-lg-number=\"3\"\n            row-lg-number=\"1\"\n            width-lg=\"2\"\n            height-lg=\"1\"\n            col-md-number=\"2\"\n            row-md-number=\"2\"\n            width-md=\"1\"\n            height-md=\"1\"\n            col-sm-number=\"1\"\n            row-sm-number=\"2\"\n            width-sm=\"1\"\n            height-sm=\"1\"\n          ></zero-grid-layout-item>\n        </zero-grid-layout>\n      </zero-card>\n\n      <zero-card style=\"height: 200px; width: 100%;\">\n        <zero-grid-layout row-count=\"2\" col-count=\"4\" class=\"spacing-2x\">\n          <zero-grid-layout-item\n            style=\"background-color: green;\"\n            col-number=\"1\"\n            row-number=\"1\"\n            width=\"1\"\n            height=\"2\"\n          ></zero-grid-layout-item>\n          <zero-grid-layout-item\n            style=\"background-color: red;\"\n            col-number=\"2\"\n            row-number=\"1\"\n            width=\"3\"\n            height=\"2\"\n          ></zero-grid-layout-item>\n        </zero-grid-layout>\n      </zero-card>\n\n      <zero-card style=\"height: 200px; width: 100%;\">\n        <zero-grid-layout row-count=\"2\" col-count=\"4\" class=\"spacing-2x\">\n          <zero-grid-layout-item\n            style=\"background-color: blue;\"\n            col-number=\"1\"\n            row-number=\"1\"\n            width=\"1\"\n            height=\"2\"\n          ></zero-grid-layout-item>\n          <zero-grid-layout-item\n            style=\"background-color: red;\"\n            col-number=\"2\"\n            row-number=\"1\"\n            width=\"2\"\n            height=\"2\"\n          ></zero-grid-layout-item>\n          <zero-grid-layout-item\n            style=\"background-color: green;\"\n            col-number=\"4\"\n            row-number=\"1\"\n            width=\"1\"\n            height=\"2\"\n          ></zero-grid-layout-item>\n        </zero-grid-layout>\n      </zero-card>\n\n      <zero-card style=\"height: 200px; width: 100%;\">\n        <zero-grid-layout row-count=\"3\" col-count=\"4\" class=\"spacing-2x\">\n          <zero-grid-layout-item\n            style=\"background-color: blue;\"\n            col-number=\"1\"\n            row-number=\"1\"\n            width=\"4\"\n            height=\"2\"\n          ></zero-grid-layout-item>\n          <zero-grid-layout-item\n            style=\"background-color: red;\"\n            col-number=\"1\"\n            row-number=\"3\"\n            width=\"3\"\n            height=\"1\"\n          ></zero-grid-layout-item>\n          <zero-grid-layout-item\n            style=\"background-color: yellow;\"\n            col-number=\"4\"\n            row-number=\"3\"\n            width=\"1\"\n            height=\"1\"\n          ></zero-grid-layout-item>\n        </zero-grid-layout>\n      </zero-card>\n\n      <zero-card style=\"height: 200px; width: 100%;\">\n        <zero-grid-layout row-count=\"4\" col-count=\"4\" class=\"spacing-2x\">\n          <zero-grid-layout-item\n            style=\"background-color: blue;\"\n            col-number=\"1\"\n            row-number=\"1\"\n            width=\"4\"\n            height=\"1\"\n          ></zero-grid-layout-item>\n          <zero-grid-layout-item\n            style=\"background-color: red;\"\n            col-number=\"1\"\n            row-number=\"2\"\n            width=\"1\"\n            height=\"2\"\n          ></zero-grid-layout-item>\n          <zero-grid-layout-item\n            style=\"background-color: yellow;\"\n            col-number=\"2\"\n            row-number=\"2\"\n            width=\"3\"\n            height=\"2\"\n          ></zero-grid-layout-item>\n          <zero-grid-layout-item\n            style=\"background-color: green;\"\n            col-number=\"1\"\n            row-number=\"4\"\n            width=\"4\"\n            height=\"1\"\n          ></zero-grid-layout-item>\n        </zero-grid-layout>\n      </zero-card>\n\n      <zero-card style=\"height: 200px; width: 100%;\">\n        <zero-grid-layout row-count=\"6\" col-count=\"6\" class=\"spacing-2x\">\n          <zero-grid-layout-item\n            style=\"background-color: blue;\"\n            col-number=\"1\"\n            row-number=\"1\"\n            width=\"2\"\n            height=\"6\"\n          ></zero-grid-layout-item>\n          <zero-grid-layout-item\n            style=\"background-color: red;\"\n            col-number=\"3\"\n            row-number=\"1\"\n            width=\"4\"\n            height=\"3\"\n          ></zero-grid-layout-item>\n          <zero-grid-layout-item\n            style=\"background-color: yellow;\"\n            col-number=\"3\"\n            row-number=\"4\"\n            width=\"2\"\n            height=\"3\"\n          ></zero-grid-layout-item>\n          <zero-grid-layout-item\n            style=\"background-color: yellow;\"\n            col-number=\"5\"\n            row-number=\"4\"\n            width=\"1\"\n            height=\"3\"\n          ></zero-grid-layout-item>\n          <zero-grid-layout-item\n            style=\"background-color: green;\"\n            col-number=\"6\"\n            row-number=\"4\"\n            width=\"1\"\n            height=\"3\"\n          ></zero-grid-layout-item>\n        </zero-grid-layout>\n      </zero-card>\n\n      <zero-card style=\"height: 200px; width: 100%;\">\n        <zero-grid-layout row-count=\"6\" col-count=\"6\" class=\"spacing-2x\">\n          <zero-grid-layout-item\n            style=\"background-color: blue;\"\n            col-number=\"1\"\n            row-number=\"1\"\n            width=\"1\"\n            height=\"6\"\n          ></zero-grid-layout-item>\n          <zero-grid-layout-item\n            style=\"background-color: red;\"\n            col-number=\"2\"\n            row-number=\"1\"\n            width=\"5\"\n            height=\"4\"\n          ></zero-grid-layout-item>\n          <zero-grid-layout-item\n            style=\"background-color: yellow;\"\n            col-number=\"2\"\n            row-number=\"5\"\n            width=\"5\"\n            height=\"2\"\n          ></zero-grid-layout-item>\n        </zero-grid-layout>\n      </zero-card>\n\n      <zero-card style=\"height: 200px; width: 100%;\">\n        <zero-grid-layout row-count=\"6\" col-count=\"6\" class=\"spacing-2x\">\n          <zero-grid-layout-item\n            style=\"background-color: blue;\"\n            col-number=\"1\"\n            row-number=\"1\"\n            width=\"1\"\n            height=\"6\"\n          ></zero-grid-layout-item>\n          <zero-grid-layout-item\n            style=\"background-color: red;\"\n            col-number=\"2\"\n            row-number=\"1\"\n            width=\"5\"\n            height=\"4\"\n          ></zero-grid-layout-item>\n          <zero-grid-layout-item\n            style=\"background-color: yellow;\"\n            col-number=\"2\"\n            row-number=\"5\"\n            width=\"5\"\n            height=\"2\"\n          ></zero-grid-layout-item>\n        </zero-grid-layout>\n      </zero-card>\n    </div>\n  `,\n}"
         }
       ],
       "exports": [
@@ -6951,7 +6746,7 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/flyout/flyout.stories.ts"
+            "module": "src/grid-layout/grid-layout.stories.ts"
           }
         },
         {
@@ -6959,55 +6754,24 @@
           "name": "Primary",
           "declaration": {
             "name": "Primary",
-            "module": "src/flyout/flyout.stories.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/flyout/flyout.styles.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "zeroFlyoutStyles",
-          "default": "css`\n  ${foundationFlyoutStyles}\n  div.flyout {\n    background-color: ${neutralLayer2};\n    border-color: ${neutralFillHover};\n    color: ${neutralForegroundRest};\n  }\n\n  :host([position='left']) div.flyout {\n    border-right-style: solid;\n    border-right-width: 1px;\n  }\n\n  :host([position='right']) div.flyout {\n    border-left-style: solid;\n    border-left-width: 1px;\n  }\n\n  div.exit {\n    cursor: pointer;\n    padding: 5px 8px;\n  }\n\n  div.exit:hover {\n    background-color: ${neutralFillHover};\n    border-radius: 3px;\n  }\n`"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "zeroFlyoutStyles",
-          "declaration": {
-            "name": "zeroFlyoutStyles",
-            "module": "src/flyout/flyout.styles.ts"
+            "module": "src/grid-layout/grid-layout.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/flyout/flyout.ts",
+      "path": "src/grid-layout/grid-layout.ts",
       "declarations": [
-        {
-          "kind": "variable",
-          "name": "defaultFlyoutConfig",
-          "default": "foundationConfig"
-        },
-        {
-          "kind": "variable",
-          "name": "zeroFlyoutShadowOptions",
-          "default": "foundationFlyoutShadowOptions"
-        },
         {
           "kind": "class",
           "description": "",
-          "name": "Flyout",
+          "name": "GridLayout",
           "superclass": {
-            "name": "FoundationFlyout",
+            "name": "FoundationGridLayout",
             "package": "@genesislcap/foundation-ui"
           },
-          "tagName": "%%prefix%%-flyout",
+          "tagName": "%%prefix%%-grid-layout",
           "customElement": true,
           "members": [
             {
@@ -7125,49 +6889,33 @@
         },
         {
           "kind": "variable",
-          "name": "zeroFlyout",
-          "description": "The Zero Flyout",
+          "name": "zeroGridLayout",
+          "description": "The Zero Grid Layout",
           "privacy": "public"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "defaultFlyoutConfig",
-          "declaration": {
-            "name": "defaultFlyoutConfig",
-            "module": "src/flyout/flyout.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "zeroFlyoutShadowOptions",
-          "declaration": {
-            "name": "zeroFlyoutShadowOptions",
-            "module": "src/flyout/flyout.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Flyout",
+          "name": "GridLayout",
           "declaration": {
-            "name": "Flyout",
-            "module": "src/flyout/flyout.ts"
+            "name": "GridLayout",
+            "module": "src/grid-layout/grid-layout.ts"
           }
         },
         {
           "kind": "js",
-          "name": "zeroFlyout",
+          "name": "zeroGridLayout",
           "declaration": {
-            "name": "zeroFlyout",
-            "module": "src/flyout/flyout.ts"
+            "name": "zeroGridLayout",
+            "module": "src/grid-layout/grid-layout.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/flyout/index.ts",
+      "path": "src/grid-layout/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -7175,30 +6923,14 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./flyout"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./flyout.styles"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "zeroFlyoutTemplate",
-          "declaration": {
-            "name": "foundationFlyoutTemplate",
-            "package": "@genesislcap/foundation-ui"
+            "package": "./grid-layout"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/grid-layout/grid-layout.stories.ts",
+      "path": "src/filter-bar/filter-bar.stories.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -7206,7 +6938,7 @@
           "type": {
             "text": "Meta"
           },
-          "default": "{\n  title: 'Grid Layout',\n  component: 'zero-grid-layout',\n}"
+          "default": "{\n  title: 'Filter Bar',\n  component: 'zero-filter-bar',\n}"
         },
         {
           "kind": "variable",
@@ -7214,7 +6946,7 @@
           "type": {
             "text": "StoryObj"
           },
-          "default": "{\n  render: () => html`\n    <div style=\"${wrapperStyle}\">\n      <zero-card style=\"height: 200px; width: 100%;\">\n        <zero-grid-layout\n          class=\"spacing-2x\"\n          col-count=\"2\"\n          row-count=\"2\"\n          col-lg-count=\"4\"\n          row-lg-count=\"1\"\n          col-sm-count=\"1\"\n          row-sm-count=\"2\"\n        >\n          <zero-grid-layout-item\n            style=\"height: 100%; background-color: green;\"\n            col-lg-number=\"1\"\n            row-lg-number=\"1\"\n            width-lg=\"1\"\n            height-lg=\"1\"\n            col-md-number=\"1\"\n            row-md-number=\"1\"\n            width-md=\"1\"\n            height-md=\"1\"\n            col-sm-number=\"1\"\n            row-sm-number=\"1\"\n            width-sm=\"1\"\n            height-sm=\"1\"\n          ></zero-grid-layout-item>\n          <zero-grid-layout-item\n            style=\"height: 100%; background-color: red;\"\n            col-lg-number=\"3\"\n            row-lg-number=\"1\"\n            width-lg=\"2\"\n            height-lg=\"1\"\n            col-md-number=\"2\"\n            row-md-number=\"2\"\n            width-md=\"1\"\n            height-md=\"1\"\n            col-sm-number=\"1\"\n            row-sm-number=\"2\"\n            width-sm=\"1\"\n            height-sm=\"1\"\n          ></zero-grid-layout-item>\n        </zero-grid-layout>\n      </zero-card>\n\n      <zero-card style=\"height: 200px; width: 100%;\">\n        <zero-grid-layout row-count=\"2\" col-count=\"4\" class=\"spacing-2x\">\n          <zero-grid-layout-item\n            style=\"background-color: green;\"\n            col-number=\"1\"\n            row-number=\"1\"\n            width=\"1\"\n            height=\"2\"\n          ></zero-grid-layout-item>\n          <zero-grid-layout-item\n            style=\"background-color: red;\"\n            col-number=\"2\"\n            row-number=\"1\"\n            width=\"3\"\n            height=\"2\"\n          ></zero-grid-layout-item>\n        </zero-grid-layout>\n      </zero-card>\n\n      <zero-card style=\"height: 200px; width: 100%;\">\n        <zero-grid-layout row-count=\"2\" col-count=\"4\" class=\"spacing-2x\">\n          <zero-grid-layout-item\n            style=\"background-color: blue;\"\n            col-number=\"1\"\n            row-number=\"1\"\n            width=\"1\"\n            height=\"2\"\n          ></zero-grid-layout-item>\n          <zero-grid-layout-item\n            style=\"background-color: red;\"\n            col-number=\"2\"\n            row-number=\"1\"\n            width=\"2\"\n            height=\"2\"\n          ></zero-grid-layout-item>\n          <zero-grid-layout-item\n            style=\"background-color: green;\"\n            col-number=\"4\"\n            row-number=\"1\"\n            width=\"1\"\n            height=\"2\"\n          ></zero-grid-layout-item>\n        </zero-grid-layout>\n      </zero-card>\n\n      <zero-card style=\"height: 200px; width: 100%;\">\n        <zero-grid-layout row-count=\"3\" col-count=\"4\" class=\"spacing-2x\">\n          <zero-grid-layout-item\n            style=\"background-color: blue;\"\n            col-number=\"1\"\n            row-number=\"1\"\n            width=\"4\"\n            height=\"2\"\n          ></zero-grid-layout-item>\n          <zero-grid-layout-item\n            style=\"background-color: red;\"\n            col-number=\"1\"\n            row-number=\"3\"\n            width=\"3\"\n            height=\"1\"\n          ></zero-grid-layout-item>\n          <zero-grid-layout-item\n            style=\"background-color: yellow;\"\n            col-number=\"4\"\n            row-number=\"3\"\n            width=\"1\"\n            height=\"1\"\n          ></zero-grid-layout-item>\n        </zero-grid-layout>\n      </zero-card>\n\n      <zero-card style=\"height: 200px; width: 100%;\">\n        <zero-grid-layout row-count=\"4\" col-count=\"4\" class=\"spacing-2x\">\n          <zero-grid-layout-item\n            style=\"background-color: blue;\"\n            col-number=\"1\"\n            row-number=\"1\"\n            width=\"4\"\n            height=\"1\"\n          ></zero-grid-layout-item>\n          <zero-grid-layout-item\n            style=\"background-color: red;\"\n            col-number=\"1\"\n            row-number=\"2\"\n            width=\"1\"\n            height=\"2\"\n          ></zero-grid-layout-item>\n          <zero-grid-layout-item\n            style=\"background-color: yellow;\"\n            col-number=\"2\"\n            row-number=\"2\"\n            width=\"3\"\n            height=\"2\"\n          ></zero-grid-layout-item>\n          <zero-grid-layout-item\n            style=\"background-color: green;\"\n            col-number=\"1\"\n            row-number=\"4\"\n            width=\"4\"\n            height=\"1\"\n          ></zero-grid-layout-item>\n        </zero-grid-layout>\n      </zero-card>\n\n      <zero-card style=\"height: 200px; width: 100%;\">\n        <zero-grid-layout row-count=\"6\" col-count=\"6\" class=\"spacing-2x\">\n          <zero-grid-layout-item\n            style=\"background-color: blue;\"\n            col-number=\"1\"\n            row-number=\"1\"\n            width=\"2\"\n            height=\"6\"\n          ></zero-grid-layout-item>\n          <zero-grid-layout-item\n            style=\"background-color: red;\"\n            col-number=\"3\"\n            row-number=\"1\"\n            width=\"4\"\n            height=\"3\"\n          ></zero-grid-layout-item>\n          <zero-grid-layout-item\n            style=\"background-color: yellow;\"\n            col-number=\"3\"\n            row-number=\"4\"\n            width=\"2\"\n            height=\"3\"\n          ></zero-grid-layout-item>\n          <zero-grid-layout-item\n            style=\"background-color: yellow;\"\n            col-number=\"5\"\n            row-number=\"4\"\n            width=\"1\"\n            height=\"3\"\n          ></zero-grid-layout-item>\n          <zero-grid-layout-item\n            style=\"background-color: green;\"\n            col-number=\"6\"\n            row-number=\"4\"\n            width=\"1\"\n            height=\"3\"\n          ></zero-grid-layout-item>\n        </zero-grid-layout>\n      </zero-card>\n\n      <zero-card style=\"height: 200px; width: 100%;\">\n        <zero-grid-layout row-count=\"6\" col-count=\"6\" class=\"spacing-2x\">\n          <zero-grid-layout-item\n            style=\"background-color: blue;\"\n            col-number=\"1\"\n            row-number=\"1\"\n            width=\"1\"\n            height=\"6\"\n          ></zero-grid-layout-item>\n          <zero-grid-layout-item\n            style=\"background-color: red;\"\n            col-number=\"2\"\n            row-number=\"1\"\n            width=\"5\"\n            height=\"4\"\n          ></zero-grid-layout-item>\n          <zero-grid-layout-item\n            style=\"background-color: yellow;\"\n            col-number=\"2\"\n            row-number=\"5\"\n            width=\"5\"\n            height=\"2\"\n          ></zero-grid-layout-item>\n        </zero-grid-layout>\n      </zero-card>\n\n      <zero-card style=\"height: 200px; width: 100%;\">\n        <zero-grid-layout row-count=\"6\" col-count=\"6\" class=\"spacing-2x\">\n          <zero-grid-layout-item\n            style=\"background-color: blue;\"\n            col-number=\"1\"\n            row-number=\"1\"\n            width=\"1\"\n            height=\"6\"\n          ></zero-grid-layout-item>\n          <zero-grid-layout-item\n            style=\"background-color: red;\"\n            col-number=\"2\"\n            row-number=\"1\"\n            width=\"5\"\n            height=\"4\"\n          ></zero-grid-layout-item>\n          <zero-grid-layout-item\n            style=\"background-color: yellow;\"\n            col-number=\"2\"\n            row-number=\"5\"\n            width=\"5\"\n            height=\"2\"\n          ></zero-grid-layout-item>\n        </zero-grid-layout>\n      </zero-card>\n    </div>\n  `,\n}"
+          "default": "{\n  render: () =>\n    html`\n      <zero-filter-bar\n        resource=\"ALL_PROCESSES_STATUS\"\n        only=\"PROCESS_PORT, START_TIME, PROCESS_NAME, DATADUMP\"\n      ></zero-filter-bar>\n    `,\n}"
         }
       ],
       "exports": [
@@ -7223,7 +6955,7 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/grid-layout/grid-layout.stories.ts"
+            "module": "src/filter-bar/filter-bar.stories.ts"
           }
         },
         {
@@ -7231,26 +6963,144 @@
           "name": "Primary",
           "declaration": {
             "name": "Primary",
-            "module": "src/grid-layout/grid-layout.stories.ts"
+            "module": "src/filter-bar/filter-bar.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/grid-layout/grid-layout.ts",
+      "path": "src/filter-bar/filter-bar.styles.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "zeroFilterBarStyles",
+          "return": {
+            "type": {
+              "text": "ElementStyles"
+            }
+          },
+          "parameters": [
+            {
+              "name": "context",
+              "type": {
+                "text": "ElementDefinitionContext"
+              }
+            },
+            {
+              "name": "definition",
+              "type": {
+                "text": "FoundationElementDefinition"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "zeroFilterBarStyles",
+          "declaration": {
+            "name": "zeroFilterBarStyles",
+            "module": "src/filter-bar/filter-bar.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/filter-bar/filter-bar.template.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "zeroFilterBarTemplate",
+          "type": {
+            "text": "ViewTemplate<FilterBar>"
+          },
+          "default": "html`\n  ${filterBarTemplate}\n`"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "zeroFilterBarTemplate",
+          "declaration": {
+            "name": "zeroFilterBarTemplate",
+            "module": "src/filter-bar/filter-bar.template.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/filter-bar/filter-bar.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "GridLayout",
-          "superclass": {
-            "name": "FoundationGridLayout",
-            "package": "@genesislcap/foundation-ui"
-          },
-          "tagName": "%%prefix%%-grid-layout",
-          "customElement": true,
+          "name": "FilterBar",
           "members": [
+            {
+              "kind": "field",
+              "name": "resource",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "only",
+              "type": {
+                "text": "string"
+              },
+              "description": "Only generate filters for the specified fields, provided as a comma separated list.\nDefault behavior (if \"only\" is not set) is to generate filters for all fields based on metadata."
+            },
+            {
+              "kind": "field",
+              "name": "labels",
+              "type": {
+                "text": "string"
+              },
+              "description": "Labels for the specified fields, to be used alongside \"only\" prop."
+            },
+            {
+              "kind": "field",
+              "name": "target",
+              "type": {
+                "text": "string"
+              },
+              "description": "Will be included in event emmissions.\nUsually set to the id of the target datasource.\nUsefull when we have multiple grids in the same page."
+            },
+            {
+              "kind": "field",
+              "name": "ready",
+              "type": {
+                "text": "boolean"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "fields",
+              "type": {
+                "text": "MetadataDetail[]"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "filterGrid",
+              "type": {
+                "text": "HTMLDivElement"
+              },
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "collapsed",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true"
+            },
             {
               "kind": "field",
               "name": "_presentation",
@@ -7362,37 +7212,76 @@
                 "module": "src/foundation-element/foundation-element.ts"
               }
             }
-          ]
+          ],
+          "attributes": [
+            {
+              "name": "resource",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "resource"
+            },
+            {
+              "name": "only",
+              "type": {
+                "text": "string"
+              },
+              "description": "Only generate filters for the specified fields, provided as a comma separated list.\nDefault behavior (if \"only\" is not set) is to generate filters for all fields based on metadata.",
+              "fieldName": "only"
+            },
+            {
+              "name": "labels",
+              "type": {
+                "text": "string"
+              },
+              "description": "Labels for the specified fields, to be used alongside \"only\" prop.",
+              "fieldName": "labels"
+            },
+            {
+              "name": "target",
+              "type": {
+                "text": "string"
+              },
+              "description": "Will be included in event emmissions.\nUsually set to the id of the target datasource.\nUsefull when we have multiple grids in the same page.",
+              "fieldName": "target"
+            }
+          ],
+          "superclass": {
+            "name": "FoundationFilterBar",
+            "package": "@genesislcap/foundation-ui"
+          },
+          "tagName": "%%prefix%%-filter-bar",
+          "customElement": true
         },
         {
           "kind": "variable",
-          "name": "zeroGridLayout",
-          "description": "The Zero Grid Layout",
+          "name": "zeroFilterBar",
+          "description": "The Zero Filter",
           "privacy": "public"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "GridLayout",
+          "name": "FilterBar",
           "declaration": {
-            "name": "GridLayout",
-            "module": "src/grid-layout/grid-layout.ts"
+            "name": "FilterBar",
+            "module": "src/filter-bar/filter-bar.ts"
           }
         },
         {
           "kind": "js",
-          "name": "zeroGridLayout",
+          "name": "zeroFilterBar",
           "declaration": {
-            "name": "zeroGridLayout",
-            "module": "src/grid-layout/grid-layout.ts"
+            "name": "zeroFilterBar",
+            "module": "src/filter-bar/filter-bar.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/grid-layout/index.ts",
+      "path": "src/filter-bar/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -7400,24 +7289,111 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./grid-layout"
+            "package": "./filter-bar.styles"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./filter-bar.template"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./filter-bar"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/grid-layout-item/grid-layout-item.ts",
+      "path": "src/flyout/flyout.stories.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "meta",
+          "type": {
+            "text": "Meta"
+          },
+          "default": "{\n  title: 'Flyout',\n  component: 'zero-flyout',\n}"
+        },
+        {
+          "kind": "variable",
+          "name": "Primary",
+          "type": {
+            "text": "StoryObj"
+          },
+          "default": "{\n  argTypes: {\n    position: {\n      control: 'select',\n      options: ['left', 'right'],\n    },\n  },\n  args: {\n    position: 'right',\n    height: '500px',\n    flyoutWidth: '20%',\n  },\n  render: ({ position, height, flyoutWidth }) =>\n    html`\n      <div style=\"display: flex; height: ${height};\">\n        <zero-button @click=\"${openFlyout}\">Open Flyout</zero-button>\n\n        <style>\n          zero-flyout::part(flyout) {\n            width: ${flyoutWidth};\n          }\n        </style>\n        <zero-flyout position=\"${position}\" style=\"height: ${height};\">\n          <p slot=\"title\">Zero flyout</p>\n          <div slot=\"header\">\n            <p>Header</p>\n          </div>\n          <div class=\"container\">\n            <p>Flyout options</p>\n            <ul>\n              <li>0</li>\n              <li>1</li>\n              <li>2</li>\n              <li>3</li>\n              <li>4</li>\n              <li>5</li>\n            </ul>\n          </div>\n          <div slot=\"footer\">\n            <p>Footer</p>\n            <zero-button @click=\"${closeFlyout}\">Close Flyout</zero-button>\n          </div>\n        </zero-flyout>\n      </div>\n    `,\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "meta",
+            "module": "src/flyout/flyout.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Primary",
+          "declaration": {
+            "name": "Primary",
+            "module": "src/flyout/flyout.stories.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/flyout/flyout.styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "zeroFlyoutStyles",
+          "default": "css`\n  ${foundationFlyoutStyles}\n  div.flyout {\n    background-color: ${neutralLayer2};\n    border-color: ${neutralFillHover};\n    color: ${neutralForegroundRest};\n  }\n\n  :host([position='left']) div.flyout {\n    border-right-style: solid;\n    border-right-width: 1px;\n  }\n\n  :host([position='right']) div.flyout {\n    border-left-style: solid;\n    border-left-width: 1px;\n  }\n\n  div.exit {\n    cursor: pointer;\n    padding: 5px 8px;\n  }\n\n  div.exit:hover {\n    background-color: ${neutralFillHover};\n    border-radius: 3px;\n  }\n`"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "zeroFlyoutStyles",
+          "declaration": {
+            "name": "zeroFlyoutStyles",
+            "module": "src/flyout/flyout.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/flyout/flyout.ts",
       "declarations": [
+        {
+          "kind": "variable",
+          "name": "defaultFlyoutConfig",
+          "default": "foundationConfig"
+        },
+        {
+          "kind": "variable",
+          "name": "zeroFlyoutShadowOptions",
+          "default": "foundationFlyoutShadowOptions"
+        },
         {
           "kind": "class",
           "description": "",
-          "name": "GridLayoutItem",
+          "name": "Flyout",
           "superclass": {
-            "name": "FoundationGridLayoutItem",
+            "name": "FoundationFlyout",
             "package": "@genesislcap/foundation-ui"
           },
-          "tagName": "%%prefix%%-grid-layout-item",
+          "tagName": "%%prefix%%-flyout",
           "customElement": true,
           "members": [
             {
@@ -7535,33 +7511,49 @@
         },
         {
           "kind": "variable",
-          "name": "zeroGridLayoutItem",
-          "description": "The Zero Grid Layout Item",
+          "name": "zeroFlyout",
+          "description": "The Zero Flyout",
           "privacy": "public"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "GridLayoutItem",
+          "name": "defaultFlyoutConfig",
           "declaration": {
-            "name": "GridLayoutItem",
-            "module": "src/grid-layout-item/grid-layout-item.ts"
+            "name": "defaultFlyoutConfig",
+            "module": "src/flyout/flyout.ts"
           }
         },
         {
           "kind": "js",
-          "name": "zeroGridLayoutItem",
+          "name": "zeroFlyoutShadowOptions",
           "declaration": {
-            "name": "zeroGridLayoutItem",
-            "module": "src/grid-layout-item/grid-layout-item.ts"
+            "name": "zeroFlyoutShadowOptions",
+            "module": "src/flyout/flyout.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Flyout",
+          "declaration": {
+            "name": "Flyout",
+            "module": "src/flyout/flyout.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "zeroFlyout",
+          "declaration": {
+            "name": "zeroFlyout",
+            "module": "src/flyout/flyout.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/grid-layout-item/index.ts",
+      "path": "src/flyout/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -7569,14 +7561,22 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./grid-layout-item"
+            "package": "./flyout"
           }
         },
         {
           "kind": "js",
-          "name": "zeroGridLayoutItemTemplate",
+          "name": "*",
           "declaration": {
-            "name": "foundationGridLayoutItemTemplate",
+            "name": "*",
+            "package": "./flyout.styles"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "zeroFlyoutTemplate",
+          "declaration": {
+            "name": "foundationFlyoutTemplate",
             "package": "@genesislcap/foundation-ui"
           }
         }