@aivenio/aquarium 1.33.0 → 1.35.0

package/dist/styles.css

@@ -1773,6 +1773,9 @@ input[type='number'].no-arrows {
 .p-2{
   padding: 4px;
 }
+.p-\[56px\]{
+  padding: 56px;
+}
 .p-1{
   padding: 2px;
 }

package/dist/styles_timescaledb.css

@@ -1772,6 +1772,9 @@ input[type='number'].no-arrows {
 .p-2{
   padding: 4px;
 }
+.p-\[56px\]{
+  padding: 56px;
+}
 .p-1{
   padding: 2px;
 }

package/dist/system.cjs

@@ -3563,7 +3563,7 @@ var require_loading = __commonJS({
   "src/icons/loading.js"(exports) {
     "use strict";
     var data = {
-      "body": '<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-width="2" transform="translate(1 1)"><circle cx="18" cy="18" r="18" stroke-opacity=".5"/><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName="transform" dur="1s" from="0 18 18" repeatCount="indefinite" to="360 18 18" type="rotate"/></path></g>',
+      "body": '<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-width="3" transform="translate(1 1)"><circle cx="18" cy="18" r="18" stroke-opacity=".5"/><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName="transform" dur="1s" from="0 18 18" repeatCount="indefinite" to="360 18 18" type="rotate"/></path></g>',
       "left": 0,
       "top": 0,
       "width": 38,
@@ -4646,6 +4646,22 @@ var require_stopwatch = __commonJS({
   }
 });
 
+// src/icons/superadmin.js
+var require_superadmin = __commonJS({
+  "src/icons/superadmin.js"(exports) {
+    "use strict";
+    var data = {
+      "body": '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11 14.208H6.875c-1.28 0-1.919 0-2.44.158a3.667 3.667 0 00-2.444 2.445c-.158.52-.158 1.16-.158 2.439M13.292 6.875a4.125 4.125 0 11-8.25 0 4.125 4.125 0 018.25 0Zm1.375 9.625 1.833 1.833 3.667-3.666"/>',
+      "left": 0,
+      "top": 0,
+      "width": 22,
+      "height": 22
+    };
+    exports.__esModule = true;
+    exports.default = data;
+  }
+});
+
 // src/icons/swapHorizontal.js
 var require_swapHorizontal = __commonJS({
   "src/icons/swapHorizontal.js"(exports) {
@@ -6536,6 +6552,7 @@ var import_smallTick = __toESM(require_smallTick());
 var import_speedometer = __toESM(require_speedometer());
 var import_stop = __toESM(require_stop());
 var import_stopwatch = __toESM(require_stopwatch());
+var import_superadmin = __toESM(require_superadmin());
 var import_swapHorizontal = __toESM(require_swapHorizontal());
 var import_swapVertical = __toESM(require_swapVertical());
 var import_tag = __toESM(require_tag());
@@ -9303,6 +9320,7 @@ var Container2 = ({ maxWidth = "xl", children }) => /* @__PURE__ */ import_react
   marginLeft: "auto",
   marginRight: "auto",
   width: "full",
+  height: "full",
   className: tw({
     "max-w-screen-xl": maxWidth === "xl",
     "max-w-screen-lg": maxWidth === "lg",
@@ -10519,7 +10537,9 @@ var DataList2 = ({
   rows: _rows,
   sticky,
   menu,
-  menuLabel = "Context menu",
+  menuLabel,
+  menuAriaLabel = menuLabel != null ? menuLabel : "Context menu",
+  menuHeaderName = "Actions",
   onAction,
   onMenuOpenChange,
   pagination: _pagination
@@ -10549,8 +10569,8 @@ var DataList2 = ({
     }), column.headerName)
   ), menu && /* @__PURE__ */ import_react67.default.createElement(DataList.HeadCell, {
     align: "right",
-    "aria-label": menuLabel
-  }), /* @__PURE__ */ import_react67.default.createElement(List2, {
+    "aria-label": menuAriaLabel
+  }, menuHeaderName), /* @__PURE__ */ import_react67.default.createElement(List2, {
     items: rows,
     renderItem: (row, index) => /* @__PURE__ */ import_react67.default.createElement(DataList.Row, {
       key: row.id
@@ -10567,7 +10587,7 @@ var DataList2 = ({
       onAction: (action) => onAction == null ? void 0 : onAction(action, row, index),
       onOpenChange: onMenuOpenChange
     }, /* @__PURE__ */ import_react67.default.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ import_react67.default.createElement(Button.Icon, {
-      "aria-label": menuLabel,
+      "aria-label": menuAriaLabel,
       icon: import_more2.default
     })), (0, import_isFunction.default)(menu) ? menu(row, index) : menu)))
   }));
@@ -10633,7 +10653,9 @@ var DataTable = (_a) => {
     layout = "auto",
     sticky,
     menu,
-    menuLabel = "Context menu",
+    menuLabel,
+    menuAriaLabel = menuLabel != null ? menuLabel : "Context menu",
+    menuHeaderName = "Actions",
     onAction,
     onMenuOpenChange,
     pagination: _pagination
@@ -10645,6 +10667,8 @@ var DataTable = (_a) => {
     "sticky",
     "menu",
     "menuLabel",
+    "menuAriaLabel",
+    "menuHeaderName",
     "onAction",
     "onMenuOpenChange",
     "pagination"
@@ -10680,8 +10704,8 @@ var DataTable = (_a) => {
     menu ? /* @__PURE__ */ import_react70.default.createElement(Table2.Cell, {
       key: "__contextMenu",
       align: "right",
-      "aria-label": menuLabel
-    }) : null
+      "aria-label": menuAriaLabel
+    }, menuHeaderName) : null
   ])), /* @__PURE__ */ import_react70.default.createElement(Table2.Body, null, /* @__PURE__ */ import_react70.default.createElement(List2, {
     items: rows,
     renderItem: (row, index) => /* @__PURE__ */ import_react70.default.createElement(Table2.Row, {
@@ -10699,7 +10723,7 @@ var DataTable = (_a) => {
       onAction: (action) => onAction == null ? void 0 : onAction(action, row, index),
       onOpenChange: onMenuOpenChange
     }, /* @__PURE__ */ import_react70.default.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ import_react70.default.createElement(Button.Icon, {
-      "aria-label": menuLabel,
+      "aria-label": menuAriaLabel,
       icon: import_more3.default
     })), (0, import_isFunction2.default)(menu) ? menu(row, index) : menu)))
   })));
@@ -11155,31 +11179,11 @@ Dropdown.Menu = DropdownMenu3;
 Dropdown.Item = DropdownItem;
 
 // src/molecules/EmptyState/EmptyState.tsx
-var import_react79 = __toESM(require("react"));
-var import_omit9 = __toESM(require("lodash/omit"));
-
-// src/molecules/Flexbox/FlexboxItem.tsx
 var import_react78 = __toESM(require("react"));
-var FlexboxItem = Tailwindify(
-  ({ htmlTag = "div", className, style, children, display, flex, grow, shrink, order, alignSelf }) => {
-    const hookStyle = useStyle({
-      display,
-      flex,
-      flexGrow: grow,
-      flexShrink: shrink,
-      order,
-      alignSelf
-    });
-    const HtmlElement = htmlTag;
-    return /* @__PURE__ */ import_react78.default.createElement(HtmlElement, {
-      style: __spreadValues(__spreadValues({}, hookStyle), style),
-      className
-    }, children);
-  }
-);
-
-// src/molecules/EmptyState/EmptyState.tsx
+var import_omit9 = __toESM(require("lodash/omit"));
 var EmptyStateLayout = /* @__PURE__ */ ((EmptyStateLayout2) => {
+  EmptyStateLayout2["Vertical"] = "vertical";
+  EmptyStateLayout2["Horizontal"] = "horizontal";
   EmptyStateLayout2["CenterVertical"] = "center-vertical";
   EmptyStateLayout2["LeftVertical"] = "left-vertical";
   EmptyStateLayout2["CenterHorizontal"] = "center-horizontal";
@@ -11195,6 +11199,7 @@ var layoutStyle = (layout) => {
         alignItems: "flex-start"
       };
     case "left-horizontal" /* LeftHorizontal */:
+    case "horizontal" /* Horizontal */:
       return {
         layout: "row",
         justifyContent: "flex-start",
@@ -11207,6 +11212,7 @@ var layoutStyle = (layout) => {
         alignItems: "flex-start"
       };
     case "center-vertical" /* CenterVertical */:
+    case "vertical" /* Vertical */:
     default:
       return {
         layout: "column",
@@ -11215,6 +11221,7 @@ var layoutStyle = (layout) => {
       };
   }
 };
+var isVerticalLayout = (layout) => layout === "vertical" /* Vertical */ || layout === "center-vertical" /* CenterVertical */;
 var EmptyState = ({
   title,
   image,
@@ -11225,65 +11232,81 @@ var EmptyState = ({
   primaryAction,
   secondaryAction,
   footer,
-  layout = "center-vertical" /* CenterVertical */,
-  borderStyle = "dashed"
+  layout = "vertical" /* Vertical */,
+  borderStyle = "dashed",
+  fullHeight = isVerticalLayout(layout) ? true : false
 }) => {
   const template = layoutStyle(layout);
-  return /* @__PURE__ */ import_react79.default.createElement(Box, {
+  return /* @__PURE__ */ import_react78.default.createElement(Box, {
     className: classNames(
       "Aquarium-EmptyState",
-      tw("rounded", {
+      tw("rounded p-[56px]", {
         "border border-dashed": borderStyle === "dashed",
         "border border-solid": borderStyle === "solid",
-        "text-left": layout !== "center-vertical" /* CenterVertical */,
-        "text-center": layout === "center-vertical" /* CenterVertical */
+        "text-left": !isVerticalLayout(layout),
+        "text-center": isVerticalLayout(layout),
+        "h-full": fullHeight
       })
     ),
     backgroundColor: "transparent",
-    borderColor: "grey-10",
-    padding: "9"
-  }, /* @__PURE__ */ import_react79.default.createElement(Flexbox, {
-    direction: template.layout,
+    borderColor: "grey-10"
+  }, /* @__PURE__ */ import_react78.default.createElement(Box.Flex, {
+    style: { gap: "56px" },
+    flexDirection: template.layout,
     justifyContent: template.justifyContent,
     alignItems: template.layout === "row" ? "center" : template.alignItems,
-    colGap: "l5",
-    rowGap: "8"
-  }, image && /* @__PURE__ */ import_react79.default.createElement(FlexboxItem, null, /* @__PURE__ */ import_react79.default.createElement("img", {
+    height: fullHeight ? "full" : void 0
+  }, image && /* @__PURE__ */ import_react78.default.createElement("img", {
     src: image,
     alt: imageAlt,
     style: { width: imageWidth ? `${imageWidth}px` : void 0, height: "auto" }
-  })), /* @__PURE__ */ import_react79.default.createElement(Flexbox, {
-    style: { maxWidth: "610px" },
-    direction: "column",
+  }), /* @__PURE__ */ import_react78.default.createElement(Box.Flex, {
+    flexDirection: "column",
     justifyContent: template.justifyContent,
     alignItems: template.alignItems
-  }, /* @__PURE__ */ import_react79.default.createElement(Typography2, {
-    variant: "heading",
+  }, /* @__PURE__ */ import_react78.default.createElement(Typography2.Heading, {
     htmlTag: "h2"
-  }, title), (description || children) && /* @__PURE__ */ import_react79.default.createElement(Box, {
+  }, title), (description || children) && /* @__PURE__ */ import_react78.default.createElement(Box, {
     marginTop: "5"
-  }, /* @__PURE__ */ import_react79.default.createElement(Typography2, {
-    variant: "default",
+  }, /* @__PURE__ */ import_react78.default.createElement(Typography2.Default, {
     color: "grey-60"
-  }, children || description)), (secondaryAction || primaryAction) && /* @__PURE__ */ import_react79.default.createElement(Flexbox, {
+  }, children || description)), (secondaryAction || primaryAction) && /* @__PURE__ */ import_react78.default.createElement(Box.Flex, {
     marginTop: "7",
     gap: "4",
     justifyContent: "center",
     alignItems: "center",
     wrap: "wrap"
-  }, primaryAction && /* @__PURE__ */ import_react79.default.createElement(import_react79.default.Fragment, null, !isLink(primaryAction) && /* @__PURE__ */ import_react79.default.createElement(Button.Primary, __spreadValues({}, (0, import_omit9.default)(primaryAction, "text")), primaryAction.text), isLink(primaryAction) && /* @__PURE__ */ import_react79.default.createElement(Button.ExternalLink, __spreadValues({
+  }, primaryAction && /* @__PURE__ */ import_react78.default.createElement(import_react78.default.Fragment, null, !isLink(primaryAction) && /* @__PURE__ */ import_react78.default.createElement(Button.Primary, __spreadValues({}, (0, import_omit9.default)(primaryAction, "text")), primaryAction.text), isLink(primaryAction) && /* @__PURE__ */ import_react78.default.createElement(Button.ExternalLink, __spreadValues({
     kind: "primary"
-  }, (0, import_omit9.default)(primaryAction, "text")), primaryAction.text)), secondaryAction && /* @__PURE__ */ import_react79.default.createElement(import_react79.default.Fragment, null, !isLink(secondaryAction) && /* @__PURE__ */ import_react79.default.createElement(Button.Secondary, __spreadValues({}, (0, import_omit9.default)(secondaryAction, "text")), secondaryAction.text), isLink(secondaryAction) && /* @__PURE__ */ import_react79.default.createElement(Button.ExternalLink, __spreadValues({
+  }, (0, import_omit9.default)(primaryAction, "text")), primaryAction.text)), secondaryAction && /* @__PURE__ */ import_react78.default.createElement(import_react78.default.Fragment, null, !isLink(secondaryAction) && /* @__PURE__ */ import_react78.default.createElement(Button.Secondary, __spreadValues({}, (0, import_omit9.default)(secondaryAction, "text")), secondaryAction.text), isLink(secondaryAction) && /* @__PURE__ */ import_react78.default.createElement(Button.ExternalLink, __spreadValues({
     kind: "secondary"
-  }, (0, import_omit9.default)(secondaryAction, "text")), secondaryAction.text))), footer && /* @__PURE__ */ import_react79.default.createElement(Box, {
-    marginTop: "7"
-  }, /* @__PURE__ */ import_react79.default.createElement(Typography2, {
-    htmlTag: "div",
-    variant: "small",
+  }, (0, import_omit9.default)(secondaryAction, "text")), secondaryAction.text))), footer && /* @__PURE__ */ import_react78.default.createElement(Box, {
+    marginTop: "5"
+  }, /* @__PURE__ */ import_react78.default.createElement(Typography2.Small, {
     color: "grey-60"
   }, footer)))));
 };
 
+// src/molecules/Flexbox/FlexboxItem.tsx
+var import_react79 = __toESM(require("react"));
+var FlexboxItem = Tailwindify(
+  ({ htmlTag = "div", className, style, children, display, flex, grow, shrink, order, alignSelf }) => {
+    const hookStyle = useStyle({
+      display,
+      flex,
+      flexGrow: grow,
+      flexShrink: shrink,
+      order,
+      alignSelf
+    });
+    const HtmlElement = htmlTag;
+    return /* @__PURE__ */ import_react79.default.createElement(HtmlElement, {
+      style: __spreadValues(__spreadValues({}, hookStyle), style),
+      className
+    }, children);
+  }
+);
+
 // src/molecules/Grid/GridItem.tsx
 var import_react80 = __toESM(require("react"));
 var GridItem = Tailwindify(

package/dist/system.mjs

@@ -3561,7 +3561,7 @@ var require_loading = __commonJS({
   "src/icons/loading.js"(exports) {
     "use strict";
     var data = {
-      "body": '<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-width="2" transform="translate(1 1)"><circle cx="18" cy="18" r="18" stroke-opacity=".5"/><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName="transform" dur="1s" from="0 18 18" repeatCount="indefinite" to="360 18 18" type="rotate"/></path></g>',
+      "body": '<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-width="3" transform="translate(1 1)"><circle cx="18" cy="18" r="18" stroke-opacity=".5"/><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName="transform" dur="1s" from="0 18 18" repeatCount="indefinite" to="360 18 18" type="rotate"/></path></g>',
       "left": 0,
       "top": 0,
       "width": 38,
@@ -4644,6 +4644,22 @@ var require_stopwatch = __commonJS({
   }
 });
 
+// src/icons/superadmin.js
+var require_superadmin = __commonJS({
+  "src/icons/superadmin.js"(exports) {
+    "use strict";
+    var data = {
+      "body": '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11 14.208H6.875c-1.28 0-1.919 0-2.44.158a3.667 3.667 0 00-2.444 2.445c-.158.52-.158 1.16-.158 2.439M13.292 6.875a4.125 4.125 0 11-8.25 0 4.125 4.125 0 018.25 0Zm1.375 9.625 1.833 1.833 3.667-3.666"/>',
+      "left": 0,
+      "top": 0,
+      "width": 22,
+      "height": 22
+    };
+    exports.__esModule = true;
+    exports.default = data;
+  }
+});
+
 // src/icons/swapHorizontal.js
 var require_swapHorizontal = __commonJS({
   "src/icons/swapHorizontal.js"(exports) {
@@ -6393,6 +6409,7 @@ var import_smallTick = __toESM(require_smallTick());
 var import_speedometer = __toESM(require_speedometer());
 var import_stop = __toESM(require_stop());
 var import_stopwatch = __toESM(require_stopwatch());
+var import_superadmin = __toESM(require_superadmin());
 var import_swapHorizontal = __toESM(require_swapHorizontal());
 var import_swapVertical = __toESM(require_swapVertical());
 var import_tag = __toESM(require_tag());
@@ -9160,6 +9177,7 @@ var Container2 = ({ maxWidth = "xl", children }) => /* @__PURE__ */ React47.crea
   marginLeft: "auto",
   marginRight: "auto",
   width: "full",
+  height: "full",
   className: tw({
     "max-w-screen-xl": maxWidth === "xl",
     "max-w-screen-lg": maxWidth === "lg",
@@ -10376,7 +10394,9 @@ var DataList2 = ({
   rows: _rows,
   sticky,
   menu,
-  menuLabel = "Context menu",
+  menuLabel,
+  menuAriaLabel = menuLabel != null ? menuLabel : "Context menu",
+  menuHeaderName = "Actions",
   onAction,
   onMenuOpenChange,
   pagination: _pagination
@@ -10406,8 +10426,8 @@ var DataList2 = ({
     }), column.headerName)
   ), menu && /* @__PURE__ */ React61.createElement(DataList.HeadCell, {
     align: "right",
-    "aria-label": menuLabel
-  }), /* @__PURE__ */ React61.createElement(List2, {
+    "aria-label": menuAriaLabel
+  }, menuHeaderName), /* @__PURE__ */ React61.createElement(List2, {
     items: rows,
     renderItem: (row, index) => /* @__PURE__ */ React61.createElement(DataList.Row, {
       key: row.id
@@ -10424,7 +10444,7 @@ var DataList2 = ({
       onAction: (action) => onAction == null ? void 0 : onAction(action, row, index),
       onOpenChange: onMenuOpenChange
     }, /* @__PURE__ */ React61.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ React61.createElement(Button.Icon, {
-      "aria-label": menuLabel,
+      "aria-label": menuAriaLabel,
       icon: import_more2.default
     })), isFunction(menu) ? menu(row, index) : menu)))
   }));
@@ -10490,7 +10510,9 @@ var DataTable = (_a) => {
     layout = "auto",
     sticky,
     menu,
-    menuLabel = "Context menu",
+    menuLabel,
+    menuAriaLabel = menuLabel != null ? menuLabel : "Context menu",
+    menuHeaderName = "Actions",
     onAction,
     onMenuOpenChange,
     pagination: _pagination
@@ -10502,6 +10524,8 @@ var DataTable = (_a) => {
     "sticky",
     "menu",
     "menuLabel",
+    "menuAriaLabel",
+    "menuHeaderName",
     "onAction",
     "onMenuOpenChange",
     "pagination"
@@ -10537,8 +10561,8 @@ var DataTable = (_a) => {
     menu ? /* @__PURE__ */ React64.createElement(Table2.Cell, {
       key: "__contextMenu",
       align: "right",
-      "aria-label": menuLabel
-    }) : null
+      "aria-label": menuAriaLabel
+    }, menuHeaderName) : null
   ])), /* @__PURE__ */ React64.createElement(Table2.Body, null, /* @__PURE__ */ React64.createElement(List2, {
     items: rows,
     renderItem: (row, index) => /* @__PURE__ */ React64.createElement(Table2.Row, {
@@ -10556,7 +10580,7 @@ var DataTable = (_a) => {
       onAction: (action) => onAction == null ? void 0 : onAction(action, row, index),
       onOpenChange: onMenuOpenChange
     }, /* @__PURE__ */ React64.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ React64.createElement(Button.Icon, {
-      "aria-label": menuLabel,
+      "aria-label": menuAriaLabel,
       icon: import_more3.default
     })), isFunction2(menu) ? menu(row, index) : menu)))
   })));
@@ -11012,31 +11036,11 @@ Dropdown.Menu = DropdownMenu3;
 Dropdown.Item = DropdownItem;
 
 // src/molecules/EmptyState/EmptyState.tsx
-import React72 from "react";
-import omit10 from "lodash/omit";
-
-// src/molecules/Flexbox/FlexboxItem.tsx
 import React71 from "react";
-var FlexboxItem = Tailwindify(
-  ({ htmlTag = "div", className, style, children, display, flex, grow, shrink, order, alignSelf }) => {
-    const hookStyle = useStyle({
-      display,
-      flex,
-      flexGrow: grow,
-      flexShrink: shrink,
-      order,
-      alignSelf
-    });
-    const HtmlElement = htmlTag;
-    return /* @__PURE__ */ React71.createElement(HtmlElement, {
-      style: __spreadValues(__spreadValues({}, hookStyle), style),
-      className
-    }, children);
-  }
-);
-
-// src/molecules/EmptyState/EmptyState.tsx
+import omit10 from "lodash/omit";
 var EmptyStateLayout = /* @__PURE__ */ ((EmptyStateLayout2) => {
+  EmptyStateLayout2["Vertical"] = "vertical";
+  EmptyStateLayout2["Horizontal"] = "horizontal";
   EmptyStateLayout2["CenterVertical"] = "center-vertical";
   EmptyStateLayout2["LeftVertical"] = "left-vertical";
   EmptyStateLayout2["CenterHorizontal"] = "center-horizontal";
@@ -11052,6 +11056,7 @@ var layoutStyle = (layout) => {
         alignItems: "flex-start"
       };
     case "left-horizontal" /* LeftHorizontal */:
+    case "horizontal" /* Horizontal */:
       return {
         layout: "row",
         justifyContent: "flex-start",
@@ -11064,6 +11069,7 @@ var layoutStyle = (layout) => {
         alignItems: "flex-start"
       };
     case "center-vertical" /* CenterVertical */:
+    case "vertical" /* Vertical */:
     default:
       return {
         layout: "column",
@@ -11072,6 +11078,7 @@ var layoutStyle = (layout) => {
       };
   }
 };
+var isVerticalLayout = (layout) => layout === "vertical" /* Vertical */ || layout === "center-vertical" /* CenterVertical */;
 var EmptyState = ({
   title,
   image,
@@ -11082,65 +11089,81 @@ var EmptyState = ({
   primaryAction,
   secondaryAction,
   footer,
-  layout = "center-vertical" /* CenterVertical */,
-  borderStyle = "dashed"
+  layout = "vertical" /* Vertical */,
+  borderStyle = "dashed",
+  fullHeight = isVerticalLayout(layout) ? true : false
 }) => {
   const template = layoutStyle(layout);
-  return /* @__PURE__ */ React72.createElement(Box, {
+  return /* @__PURE__ */ React71.createElement(Box, {
     className: classNames(
       "Aquarium-EmptyState",
-      tw("rounded", {
+      tw("rounded p-[56px]", {
         "border border-dashed": borderStyle === "dashed",
         "border border-solid": borderStyle === "solid",
-        "text-left": layout !== "center-vertical" /* CenterVertical */,
-        "text-center": layout === "center-vertical" /* CenterVertical */
+        "text-left": !isVerticalLayout(layout),
+        "text-center": isVerticalLayout(layout),
+        "h-full": fullHeight
       })
     ),
     backgroundColor: "transparent",
-    borderColor: "grey-10",
-    padding: "9"
-  }, /* @__PURE__ */ React72.createElement(Flexbox, {
-    direction: template.layout,
+    borderColor: "grey-10"
+  }, /* @__PURE__ */ React71.createElement(Box.Flex, {
+    style: { gap: "56px" },
+    flexDirection: template.layout,
     justifyContent: template.justifyContent,
     alignItems: template.layout === "row" ? "center" : template.alignItems,
-    colGap: "l5",
-    rowGap: "8"
-  }, image && /* @__PURE__ */ React72.createElement(FlexboxItem, null, /* @__PURE__ */ React72.createElement("img", {
+    height: fullHeight ? "full" : void 0
+  }, image && /* @__PURE__ */ React71.createElement("img", {
     src: image,
     alt: imageAlt,
     style: { width: imageWidth ? `${imageWidth}px` : void 0, height: "auto" }
-  })), /* @__PURE__ */ React72.createElement(Flexbox, {
-    style: { maxWidth: "610px" },
-    direction: "column",
+  }), /* @__PURE__ */ React71.createElement(Box.Flex, {
+    flexDirection: "column",
     justifyContent: template.justifyContent,
     alignItems: template.alignItems
-  }, /* @__PURE__ */ React72.createElement(Typography2, {
-    variant: "heading",
+  }, /* @__PURE__ */ React71.createElement(Typography2.Heading, {
     htmlTag: "h2"
-  }, title), (description || children) && /* @__PURE__ */ React72.createElement(Box, {
+  }, title), (description || children) && /* @__PURE__ */ React71.createElement(Box, {
     marginTop: "5"
-  }, /* @__PURE__ */ React72.createElement(Typography2, {
-    variant: "default",
+  }, /* @__PURE__ */ React71.createElement(Typography2.Default, {
     color: "grey-60"
-  }, children || description)), (secondaryAction || primaryAction) && /* @__PURE__ */ React72.createElement(Flexbox, {
+  }, children || description)), (secondaryAction || primaryAction) && /* @__PURE__ */ React71.createElement(Box.Flex, {
     marginTop: "7",
     gap: "4",
     justifyContent: "center",
     alignItems: "center",
     wrap: "wrap"
-  }, primaryAction && /* @__PURE__ */ React72.createElement(React72.Fragment, null, !isLink(primaryAction) && /* @__PURE__ */ React72.createElement(Button.Primary, __spreadValues({}, omit10(primaryAction, "text")), primaryAction.text), isLink(primaryAction) && /* @__PURE__ */ React72.createElement(Button.ExternalLink, __spreadValues({
+  }, primaryAction && /* @__PURE__ */ React71.createElement(React71.Fragment, null, !isLink(primaryAction) && /* @__PURE__ */ React71.createElement(Button.Primary, __spreadValues({}, omit10(primaryAction, "text")), primaryAction.text), isLink(primaryAction) && /* @__PURE__ */ React71.createElement(Button.ExternalLink, __spreadValues({
     kind: "primary"
-  }, omit10(primaryAction, "text")), primaryAction.text)), secondaryAction && /* @__PURE__ */ React72.createElement(React72.Fragment, null, !isLink(secondaryAction) && /* @__PURE__ */ React72.createElement(Button.Secondary, __spreadValues({}, omit10(secondaryAction, "text")), secondaryAction.text), isLink(secondaryAction) && /* @__PURE__ */ React72.createElement(Button.ExternalLink, __spreadValues({
+  }, omit10(primaryAction, "text")), primaryAction.text)), secondaryAction && /* @__PURE__ */ React71.createElement(React71.Fragment, null, !isLink(secondaryAction) && /* @__PURE__ */ React71.createElement(Button.Secondary, __spreadValues({}, omit10(secondaryAction, "text")), secondaryAction.text), isLink(secondaryAction) && /* @__PURE__ */ React71.createElement(Button.ExternalLink, __spreadValues({
     kind: "secondary"
-  }, omit10(secondaryAction, "text")), secondaryAction.text))), footer && /* @__PURE__ */ React72.createElement(Box, {
-    marginTop: "7"
-  }, /* @__PURE__ */ React72.createElement(Typography2, {
-    htmlTag: "div",
-    variant: "small",
+  }, omit10(secondaryAction, "text")), secondaryAction.text))), footer && /* @__PURE__ */ React71.createElement(Box, {
+    marginTop: "5"
+  }, /* @__PURE__ */ React71.createElement(Typography2.Small, {
     color: "grey-60"
   }, footer)))));
 };
 
+// src/molecules/Flexbox/FlexboxItem.tsx
+import React72 from "react";
+var FlexboxItem = Tailwindify(
+  ({ htmlTag = "div", className, style, children, display, flex, grow, shrink, order, alignSelf }) => {
+    const hookStyle = useStyle({
+      display,
+      flex,
+      flexGrow: grow,
+      flexShrink: shrink,
+      order,
+      alignSelf
+    });
+    const HtmlElement = htmlTag;
+    return /* @__PURE__ */ React72.createElement(HtmlElement, {
+      style: __spreadValues(__spreadValues({}, hookStyle), style),
+      className
+    }, children);
+  }
+);
+
 // src/molecules/Grid/GridItem.tsx
 import React73 from "react";
 var GridItem = Tailwindify(