@aivenio/aquarium 1.47.0 → 1.48.1

package/dist/system.cjs

@@ -4621,7 +4621,7 @@ __export(system_exports, {
   Avatar: () => Avatar,
   AvatarStack: () => AvatarStack,
   Badge: () => Badge,
-  Banner: () => Banner2,
+  Banner: () => Banner4,
   BorderBox: () => BorderBox,
   Box: () => Box,
   Breadcrumbs: () => Breadcrumbs,
@@ -4769,7 +4769,7 @@ __export(molecules_exports, {
   Avatar: () => Avatar,
   AvatarStack: () => AvatarStack,
   Badge: () => Badge,
-  Banner: () => Banner2,
+  Banner: () => Banner4,
   BorderBox: () => BorderBox,
   Box: () => Box,
   Breadcrumbs: () => Breadcrumbs,
@@ -4893,8 +4893,8 @@ var import_react2 = require("@iconify/react");
 
 // src/utils/tailwind.ts
 var import_classnames = __toESM(require("classnames"));
-function cleanClassNames(classNames10) {
-  const tokens = classNames10.split(/\s+/);
+function cleanClassNames(classNames11) {
+  const tokens = classNames11.split(/\s+/);
   return tokens.filter((item) => item).join(" ");
 }
 function tw(classesOrModifiers1, classesOrModifiers2, classesOrModifiers3, classesOrModifiers4, classesOrModifiers5, classesOrModifiers6, classesOrModifiers7, classesOrModifiers8, classesOrModifiers9, classesOrModifiers10) {
@@ -5038,15 +5038,15 @@ var Group = import_react3.default.forwardRef((_a, ref) => {
 });
 var Item = import_react3.default.forwardRef(
   (_a, ref) => {
-    var _b = _a, { highlighted, selected, className, children } = _b, props = __objRest(_b, ["highlighted", "selected", "className", "children"]);
+    var _b = _a, { highlighted, selected, className, disabled, children } = _b, props = __objRest(_b, ["highlighted", "selected", "className", "disabled", "children"]);
     return /* @__PURE__ */ import_react3.default.createElement("li", __spreadValues({
       ref,
       className: classNames(className, "flex items-center gap-x-3 p-3 typography-small", {
-        "cursor-pointer": !props.disabled,
-        "bg-grey-0": highlighted,
-        "text-grey-20": props.disabled,
-        "hover:bg-grey-0": !props.disabled
-      })
+        "cursor-pointer hover:bg-grey-0": !disabled,
+        "cursor-not-allowed opacity-40 grayscale": disabled,
+        "bg-grey-0": highlighted
+      }),
+      "aria-disabled": disabled || void 0
     }, props), /* @__PURE__ */ import_react3.default.createElement("span", {
       className: tw("grow flex gap-x-3")
     }, children), selected && /* @__PURE__ */ import_react3.default.createElement(InlineIcon, {
@@ -5101,8 +5101,8 @@ var Select = {
 };
 
 // src/molecules/Alert/Alert.tsx
-var import_react22 = __toESM(require("react"));
-var import_utils2 = require("@react-aria/utils");
+var import_react23 = __toESM(require("react"));
+var import_utils3 = require("@react-aria/utils");
 var import_omit = __toESM(require("lodash/omit"));
 
 // src/molecules/Button/Button.tsx
@@ -7068,8 +7068,9 @@ var SecondaryDropdownButton = import_react19.default.forwardRef((props, ref) =>
 SecondaryDropdownButton.displayName = "Button.SecondaryDropdown";
 Button.SecondaryDropdown = SecondaryDropdownButton;
 
-// src/atoms/Alert/Alert.tsx
+// src/molecules/Typography/Typography.tsx
 var import_react21 = __toESM(require("react"));
+var import_classnames3 = __toESM(require("classnames"));
 
 // src/atoms/Typography/Typography.tsx
 var import_react20 = __toESM(require("react"));
@@ -7104,7 +7105,148 @@ var Typography = (_a) => {
   }, rest), children);
 };
 
+// src/molecules/Typography/Typography.tsx
+var Typography2 = (props) => /* @__PURE__ */ import_react21.default.createElement(Typography, __spreadValues({}, props));
+Typography2.displayName = "Typography";
+Typography2.LargeHeading = (_a) => {
+  var _b = _a, { htmlTag = "h1" } = _b, props = __objRest(_b, ["htmlTag"]);
+  return /* @__PURE__ */ import_react21.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+    htmlTag,
+    variant: "large-heading"
+  }));
+};
+Typography2.LargeHeading.displayName = "Typography.LargeHeading";
+Typography2.Heading = (_a) => {
+  var _b = _a, { htmlTag = "h1", fontWeight } = _b, props = __objRest(_b, ["htmlTag", "fontWeight"]);
+  return /* @__PURE__ */ import_react21.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+    htmlTag,
+    variant: "heading"
+  }));
+};
+Typography2.Heading.displayName = "Typography.Heading";
+Typography2.Subheading = (_a) => {
+  var _b = _a, { htmlTag = "h2", fontWeight } = _b, props = __objRest(_b, ["htmlTag", "fontWeight"]);
+  return /* @__PURE__ */ import_react21.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+    htmlTag,
+    variant: "subheading"
+  }));
+};
+Typography2.Subheading.displayName = "Typography.Subheading";
+Typography2.LargeStrong = (_a) => {
+  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
+  return /* @__PURE__ */ import_react21.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+    htmlTag,
+    variant: "large-strong"
+  }));
+};
+Typography2.LargeStrong.displayName = "Typography.LargeStrong";
+Typography2.Large = (_a) => {
+  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
+  return /* @__PURE__ */ import_react21.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+    htmlTag,
+    variant: "large"
+  }));
+};
+Typography2.Large.displayName = "Typography.Large";
+Typography2.DefaultStrong = (_a) => {
+  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
+  return /* @__PURE__ */ import_react21.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+    htmlTag,
+    variant: "default-strong"
+  }));
+};
+Typography2.DefaultStrong.displayName = "Typography.DefaultStrong";
+Typography2.Default = (_a) => {
+  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
+  return /* @__PURE__ */ import_react21.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+    htmlTag,
+    variant: "default"
+  }));
+};
+Typography2.Default.displayName = "Typography.Default";
+Typography2.Paragraph = (_a) => {
+  var _b = _a, { htmlTag = "p", fontWeight } = _b, props = __objRest(_b, ["htmlTag", "fontWeight"]);
+  return /* @__PURE__ */ import_react21.default.createElement(Typography2.Default, __spreadProps(__spreadValues({}, props), {
+    htmlTag
+  }));
+};
+Typography2.P = Typography2.Paragraph;
+Typography2.Paragraph.displayName = "Typography.Paragraph";
+Typography2.Small = (_a) => {
+  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
+  return /* @__PURE__ */ import_react21.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+    htmlTag,
+    variant: "small"
+  }));
+};
+Typography2.Small.displayName = "Typography.Small";
+Typography2.SmallStrong = (_a) => {
+  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
+  return /* @__PURE__ */ import_react21.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+    htmlTag,
+    variant: "small-strong"
+  }));
+};
+Typography2.SmallStrong.displayName = "Typography.SmallStrong";
+Typography2.Strong = (_a) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ import_react21.default.createElement("strong", __spreadValues({
+    className: (0, import_classnames3.default)(tw("font-semibold"), className)
+  }, props));
+};
+Typography2.Strong.displayName = "Typography.Strong";
+Typography2.Caption = (_a) => {
+  var _b = _a, { htmlTag = "div", fontWeight } = _b, props = __objRest(_b, ["htmlTag", "fontWeight"]);
+  return /* @__PURE__ */ import_react21.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+    htmlTag,
+    variant: "caption"
+  }));
+};
+Typography2.Caption.displayName = "Typography.Caption";
+Typography2.LargeText = (_a) => {
+  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
+  return /* @__PURE__ */ import_react21.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+    htmlTag,
+    variant: "large-strong"
+  }));
+};
+Typography2.LargeText.displayName = "Typography.LargeText";
+Typography2.MediumText = (_a) => {
+  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
+  return /* @__PURE__ */ import_react21.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+    htmlTag,
+    variant: "default-strong"
+  }));
+};
+Typography2.MediumText.displayName = "Typography.MediumText";
+Typography2.Text = (_a) => {
+  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
+  return /* @__PURE__ */ import_react21.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+    htmlTag,
+    variant: "default"
+  }));
+};
+Typography2.Text.displayName = "Typography.Text";
+Typography2.SmallText = (_a) => {
+  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
+  return /* @__PURE__ */ import_react21.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+    htmlTag,
+    variant: "small"
+  }));
+};
+Typography2.SmallText.displayName = "Typography.SmallText";
+Typography2.SmallTextBold = (_a) => {
+  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
+  return /* @__PURE__ */ import_react21.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+    htmlTag,
+    variant: "small-strong"
+  }));
+};
+Typography2.SmallTextBold.displayName = "Typography.SmallTextBold";
+
 // src/atoms/Alert/Alert.tsx
+var import_react22 = __toESM(require("react"));
+var import_utils2 = require("@react-aria/utils");
 var import_cross2 = __toESM(require_cross());
 var import_error2 = __toESM(require_error());
 var import_infoSign2 = __toESM(require_infoSign());
@@ -7140,7 +7282,7 @@ var Alert = (_a) => {
     "type",
     "dense"
   ]);
-  return /* @__PURE__ */ import_react21.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react22.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     role: type === "error" || type === "warning" ? "alert" : "status",
     className: classNames(
       tw("rounded grid grid-cols-[auto_1fr_auto] items-center gap-x-3 gap-y-2", {
@@ -7157,7 +7299,7 @@ var Alert = (_a) => {
 };
 Alert.Title = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ import_react21.default.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react22.default.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
     variant: "default-strong",
     color: "grey-80",
     className: classNames(tw("col-start-2"), className)
@@ -7165,7 +7307,7 @@ Alert.Title = (_a) => {
 };
 Alert.Description = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ import_react21.default.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react22.default.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
     variant: "small",
     color: "grey-60",
     className: classNames(tw("col-start-2"), className)
@@ -7173,15 +7315,15 @@ Alert.Description = (_a) => {
 };
 Alert.Actions = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ import_react21.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react22.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("flex gap-4 col-start-2"), className)
   }), children);
 };
 Alert.Icon = (_a) => {
   var _b = _a, { type, dense } = _b, rest = __objRest(_b, ["type", "dense"]);
-  return /* @__PURE__ */ import_react21.default.createElement("div", {
+  return /* @__PURE__ */ import_react22.default.createElement("div", {
     className: tw("h-[20px] col-start-1 row-start-1", { "self-start": !dense })
-  }, /* @__PURE__ */ import_react21.default.createElement(Icon, __spreadProps(__spreadValues({}, rest), {
+  }, /* @__PURE__ */ import_react22.default.createElement(Icon, __spreadProps(__spreadValues({}, rest), {
     icon: alertTypes[type].icon,
     color: alertTypes[type].color,
     fontSize: 20
@@ -7189,19 +7331,129 @@ Alert.Icon = (_a) => {
 };
 Alert.Dismiss = (_a) => {
   var _b = _a, { type } = _b, rest = __objRest(_b, ["type"]);
-  return /* @__PURE__ */ import_react21.default.createElement("div", {
+  return /* @__PURE__ */ import_react22.default.createElement("div", {
     className: tw("h-[20px] col-start-3 row-start-1")
-  }, /* @__PURE__ */ import_react21.default.createElement(IconButton, __spreadProps(__spreadValues({}, rest), {
+  }, /* @__PURE__ */ import_react22.default.createElement(Button.Icon, __spreadProps(__spreadValues({}, rest), {
+    UNSAFE_className: tw("-m-2"),
+    tooltip: "Dismiss",
+    icon: import_cross2.default
+  })));
+};
+var Banner = (_a) => {
+  var _b = _a, {
+    children,
+    className,
+    type
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "className",
+    "type"
+  ]);
+  return /* @__PURE__ */ import_react22.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+    role: type === "error" || type === "warning" ? "alert" : "status",
+    className: classNames(
+      tw("relative flex px-[60px] justify-center", {
+        "bg-error-5": type === "error",
+        "bg-primary-5": type === "information",
+        "bg-success-5": type === "success",
+        "bg-warning-5": type === "warning"
+      }),
+      className
+    )
+  }), children);
+};
+Alert.Banner = Banner;
+Alert.Banner.displayName = "Alert.Banner";
+Banner.Content = (_a) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ import_react22.default.createElement("div", __spreadValues({
+    className: classNames(
+      tw("flex flex-row flex-wrap gap-x-3 items-center justify-center py-3 text-center z-10"),
+      className
+    )
+  }, props));
+};
+Banner.Content.displayName = "Alert.Banner.Content";
+Banner.Dismiss = (_a) => {
+  var _b = _a, { type } = _b, rest = __objRest(_b, ["type"]);
+  return /* @__PURE__ */ import_react22.default.createElement("div", {
+    className: tw("h-[20px] absolute right-4 top-[18px]")
+  }, /* @__PURE__ */ import_react22.default.createElement(Button.Icon, __spreadProps(__spreadValues({}, rest), {
     UNSAFE_className: tw("-m-2"),
     tooltip: "Dismiss",
     icon: import_cross2.default
   })));
 };
+Banner.Dismiss.displayName = "Alert.Banner.Dismiss";
+var ILLUSTRATION_COLORS = {
+  information: { stroke: tw("stroke-primary-60"), fill: tw("fill-primary-10") },
+  success: { stroke: tw("stroke-success-40"), fill: tw("fill-success-10") },
+  warning: { stroke: tw("stroke-warning-100"), fill: tw("fill-warning-20") },
+  error: { stroke: tw("stroke-error-100"), fill: tw("fill-error-10") }
+};
+var IllustrationLeft = (_a) => {
+  var _b = _a, { type } = _b, props = __objRest(_b, ["type"]);
+  const clipPathId = (0, import_utils2.useId)();
+  return /* @__PURE__ */ import_react22.default.createElement("svg", __spreadValues({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 120,
+    height: 48,
+    fill: "none"
+  }, props), /* @__PURE__ */ import_react22.default.createElement("g", {
+    clipPath: `url(#${clipPathId})`
+  }, /* @__PURE__ */ import_react22.default.createElement("path", {
+    className: ILLUSTRATION_COLORS[type].fill,
+    d: "M25.68 105.063c-4.556 17.047 5.533 34.57 22.537 39.138 17.003 4.568 34.48-5.55 39.037-22.597L136.75-63.593c4.555-17.046-5.536-34.57-22.538-39.137-17.003-4.567-34.48 5.55-39.036 22.596L25.68 105.063Z"
+  }), /* @__PURE__ */ import_react22.default.createElement("path", {
+    className: ILLUSTRATION_COLORS[type].stroke,
+    strokeWidth: 2,
+    d: "M-71.39 445.432c-29.483-7.92-46.981-38.306-39.08-67.87l87.385-326.96c7.901-29.562 38.211-47.105 67.693-39.185 29.481 7.92 46.983 38.306 39.082 67.869l-87.385 326.96c-7.901 29.564-38.211 47.107-67.694 39.186Z"
+  })), /* @__PURE__ */ import_react22.default.createElement("defs", null, /* @__PURE__ */ import_react22.default.createElement("clipPath", {
+    id: clipPathId
+  }, /* @__PURE__ */ import_react22.default.createElement("path", {
+    fill: "#fff",
+    d: "M-38-23h188v200H-38z"
+  }))));
+};
+Banner.IllustrationLeft = IllustrationLeft;
+Banner.IllustrationLeft.displayName = "Alert.Banner.IllustrationLeft";
+var IllustrationRight = (_a) => {
+  var _b = _a, { type } = _b, props = __objRest(_b, ["type"]);
+  const clipPathId = (0, import_utils2.useId)();
+  return /* @__PURE__ */ import_react22.default.createElement("svg", __spreadValues({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 120,
+    height: 48,
+    fill: "none"
+  }, props), /* @__PURE__ */ import_react22.default.createElement("g", {
+    clipPath: `url(#${clipPathId})`
+  }, /* @__PURE__ */ import_react22.default.createElement("path", {
+    className: ILLUSTRATION_COLORS[type].fill,
+    d: "M114.341 71.088c11.599-20.12 4.741-45.834-15.32-57.433-20.06-11.6-45.727-4.691-57.326 15.43L-84.32 247.67c-11.599 20.119-4.739 45.835 15.321 57.433 20.06 11.599 45.726 4.69 57.325-15.429L114.341 71.088Z"
+  }), /* @__PURE__ */ import_react22.default.createElement("path", {
+    className: ILLUSTRATION_COLORS[type].stroke,
+    strokeWidth: 2.632,
+    d: "M353.696-328.567c34.785 20.113 46.681 64.704 26.564 99.599L157.785 156.939c-20.115 34.892-64.626 46.87-99.409 26.758-34.782-20.112-46.682-64.706-26.566-99.598l222.475-385.907c20.116-34.894 64.626-46.872 99.411-26.759Z"
+  })), /* @__PURE__ */ import_react22.default.createElement("defs", null, /* @__PURE__ */ import_react22.default.createElement("clipPath", {
+    id: clipPathId
+  }, /* @__PURE__ */ import_react22.default.createElement("path", {
+    fill: "#fff",
+    d: "m151.148 255.847-239.01-64.043 68.13-254.266L219.278 1.58z"
+  }))));
+};
+Banner.IllustrationRight = IllustrationRight;
+Banner.IllustrationRight.displayName = "Alert.Banner.IllustrationRight";
 
 // src/utils/link.ts
 var isLink = (action) => action.href !== void 0;
 
 // src/molecules/Alert/Alert.tsx
+var renderActions = (action, dense = false) => action && /* @__PURE__ */ import_react23.default.createElement(Alert.Actions, null, !isLink(action) && /* @__PURE__ */ import_react23.default.createElement(Button.Ghost, __spreadValues({
+  dense
+}, (0, import_omit.default)(action, "text")), action.text), isLink(action) && /* @__PURE__ */ import_react23.default.createElement(Button.ExternalLink, __spreadValues({
+  dense,
+  kind: "ghost"
+}, (0, import_omit.default)(action, "text")), action.text));
 var Alert2 = ({
   description,
   type,
@@ -7210,36 +7462,51 @@ var Alert2 = ({
   children,
   action
 }) => {
-  const descriptionID = (0, import_utils2.useId)();
-  const titleID = (0, import_utils2.useId)();
-  return /* @__PURE__ */ import_react22.default.createElement(Alert, {
+  const descriptionID = (0, import_utils3.useId)();
+  const titleID = (0, import_utils3.useId)();
+  return /* @__PURE__ */ import_react23.default.createElement(Alert, {
     className: "Aquarium-Alert",
     type,
     dense: Boolean(title),
     "aria-describedby": descriptionID,
     "aria-labelledby": title ? titleID : void 0
-  }, /* @__PURE__ */ import_react22.default.createElement(Alert.Icon, {
+  }, /* @__PURE__ */ import_react23.default.createElement(Alert.Icon, {
     type,
     dense: Boolean(title)
-  }), title && /* @__PURE__ */ import_react22.default.createElement(Alert.Title, {
+  }), title && /* @__PURE__ */ import_react23.default.createElement(Alert.Title, {
     id: titleID
-  }, title), /* @__PURE__ */ import_react22.default.createElement(Alert.Description, {
+  }, title), /* @__PURE__ */ import_react23.default.createElement(Alert.Description, {
     id: descriptionID
-  }, children || description), action && /* @__PURE__ */ import_react22.default.createElement(Alert.Actions, null, !isLink(action) && /* @__PURE__ */ import_react22.default.createElement(Button.Ghost, __spreadValues({
-    dense: true
-  }, (0, import_omit.default)(action, "text")), action.text), isLink(action) && /* @__PURE__ */ import_react22.default.createElement(Button.ExternalLink, __spreadValues({
-    dense: true,
-    kind: "ghost"
-  }, (0, import_omit.default)(action, "text")), action.text)), onDismiss && /* @__PURE__ */ import_react22.default.createElement(Alert.Dismiss, {
+  }, children || description), renderActions(action, true), onDismiss && /* @__PURE__ */ import_react23.default.createElement(Alert.Dismiss, {
     onClick: onDismiss
   }));
 };
+var Banner2 = ({ type, title, children, action, onDismiss }) => {
+  const descriptionID = (0, import_utils3.useId)();
+  const titleID = (0, import_utils3.useId)();
+  return /* @__PURE__ */ import_react23.default.createElement(Alert.Banner, {
+    className: "Aquarium-Alert.Banner",
+    type,
+    "aria-describedby": descriptionID,
+    "aria-labelledby": title ? titleID : void 0
+  }, /* @__PURE__ */ import_react23.default.createElement(Alert.Banner.Content, null, /* @__PURE__ */ import_react23.default.createElement(Typography2.Default, null, /* @__PURE__ */ import_react23.default.createElement(Typography2.Strong, null, title), children && " ", children), renderActions(action)), /* @__PURE__ */ import_react23.default.createElement(Alert.Banner.IllustrationLeft, {
+    type,
+    className: "absolute left-0 top-0 bottom-0 h-full z-0"
+  }), /* @__PURE__ */ import_react23.default.createElement(Alert.Banner.IllustrationRight, {
+    type,
+    className: "absolute right-0 top-0 bottom-0 h-full z-0"
+  }), onDismiss && /* @__PURE__ */ import_react23.default.createElement(Alert.Banner.Dismiss, {
+    onClick: onDismiss
+  }));
+};
+Alert2.Banner = Banner2;
+Alert2.Banner.displayName = "Alert.Banner";
 
 // src/molecules/Avatar/Avatar.tsx
-var import_react24 = __toESM(require("react"));
+var import_react25 = __toESM(require("react"));
 
 // src/molecules/Skeleton/Skeleton.tsx
-var import_react23 = __toESM(require("react"));
+var import_react24 = __toESM(require("react"));
 var import_isNumber = __toESM(require("lodash/isNumber"));
 var import_isUndefined7 = __toESM(require("lodash/isUndefined"));
 var Skeleton = (_a) => {
@@ -7264,7 +7531,7 @@ var Skeleton = (_a) => {
     width: (0, import_isNumber.default)(width) ? `${width}px` : width,
     height: (0, import_isNumber.default)(height) ? `${height}px` : height
   };
-  return /* @__PURE__ */ import_react23.default.createElement("div", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ import_react24.default.createElement("div", __spreadProps(__spreadValues({
     "aria-label": "Loading..."
   }, rest), {
     style: __spreadValues(__spreadValues({}, styles), style),
@@ -7284,22 +7551,24 @@ var Skeleton = (_a) => {
 };
 
 // src/molecules/Avatar/Avatar.tsx
-var AvatarStack = ({ images }) => /* @__PURE__ */ import_react24.default.createElement(Box, {
+var AvatarStack = ({ images }) => /* @__PURE__ */ import_react25.default.createElement(Box, {
   display: "flex",
   className: tw("[&>*:not(:first-child)]:-ml-3")
 }, images.map(
-  (image, index) => image ? /* @__PURE__ */ import_react24.default.createElement(Avatar, {
+  (image, index) => image ? /* @__PURE__ */ import_react25.default.createElement(Avatar, {
     key: image != null ? image : index,
-    image
-  }) : /* @__PURE__ */ import_react24.default.createElement(Avatar.Skeleton, {
+    image,
+    imageAlt: ""
+  }) : /* @__PURE__ */ import_react25.default.createElement(Avatar.Skeleton, {
     key: image != null ? image : index
   })
 ));
-var Avatar = ({ image }) => /* @__PURE__ */ import_react24.default.createElement("img", {
+var Avatar = ({ image, imageAlt = "" }) => /* @__PURE__ */ import_react25.default.createElement("img", {
   src: image,
-  className: classNames(tw("w-[32px] h-[32px]"), "Aquarium-Avatar")
+  className: classNames(tw("w-[32px] h-[32px]"), "Aquarium-Avatar"),
+  alt: imageAlt
 });
-var AvatarSkeleton = () => /* @__PURE__ */ import_react24.default.createElement(Skeleton, {
+var AvatarSkeleton = () => /* @__PURE__ */ import_react25.default.createElement(Skeleton, {
   height: 32,
   width: 32,
   className: tw("rounded-full")
@@ -7308,12 +7577,12 @@ Avatar.Skeleton = AvatarSkeleton;
 Avatar.Skeleton.displayName = "Avatar.Skeleton";
 
 // src/molecules/Badge/Badge.tsx
-var import_react25 = __toESM(require("react"));
+var import_react26 = __toESM(require("react"));
 var createBadge = (type, displayName) => {
   const Component = (props) => {
     const _a = props, { kind = "filled", value, textClassname, dense = false } = _a, rest = __objRest(_a, ["kind", "value", "textClassname", "dense"]);
     const valueStr = value.toString();
-    return /* @__PURE__ */ import_react25.default.createElement("span", __spreadProps(__spreadValues({}, rest), {
+    return /* @__PURE__ */ import_react26.default.createElement("span", __spreadProps(__spreadValues({}, rest), {
       className: classNames(
         tw("inline-block text-center", {
           "rounded-full": type === "default" || type === "chip",
@@ -7328,7 +7597,7 @@ var createBadge = (type, displayName) => {
         }),
         "Aquarium-Badge"
       )
-    }), /* @__PURE__ */ import_react25.default.createElement("span", {
+    }), /* @__PURE__ */ import_react26.default.createElement("span", {
       className: classNames(
         textClassname,
         tw("inline-block", {
@@ -7339,7 +7608,7 @@ var createBadge = (type, displayName) => {
     }, valueStr));
   };
   Component.displayName = displayName;
-  Component.Skeleton = () => /* @__PURE__ */ import_react25.default.createElement(Skeleton, {
+  Component.Skeleton = () => /* @__PURE__ */ import_react26.default.createElement(Skeleton, {
     height: 16,
     width: 16,
     display: "inline-block",
@@ -7349,15 +7618,15 @@ var createBadge = (type, displayName) => {
   return Component;
 };
 var NotificationBadge = ({ children, top = "-2px", right = "-2px" }) => {
-  return /* @__PURE__ */ import_react25.default.createElement("div", {
+  return /* @__PURE__ */ import_react26.default.createElement("div", {
     className: tw("relative inline-flex")
-  }, children, /* @__PURE__ */ import_react25.default.createElement("span", {
+  }, children, /* @__PURE__ */ import_react26.default.createElement("span", {
     style: { top, right },
     className: tw("absolute rounded-full w-[6px] h-[6px] bg-error-70")
   }));
 };
 var DotBadge = ({ dense = false }) => {
-  return /* @__PURE__ */ import_react25.default.createElement("span", {
+  return /* @__PURE__ */ import_react26.default.createElement("span", {
     className: tw("rounded-full bg-current", {
       "w-[6px] h-[6px]": dense,
       "w-[9px] h-[9px]": !dense
@@ -7373,16 +7642,16 @@ var TabBadge = createBadge("tab", "TabBadge");
 var ChipBadge = createBadge("chip", "ChipBadge");
 
 // src/molecules/Banner/Banner.tsx
-var import_react27 = __toESM(require("react"));
+var import_react28 = __toESM(require("react"));
 var import_omit2 = __toESM(require("lodash/omit"));
 
 // src/atoms/Banner/Banner.tsx
-var import_react26 = __toESM(require("react"));
+var import_react27 = __toESM(require("react"));
 var spacing = {
   spacingAroundBanner: "p-6",
   omitSpacingAroundBanner: "-6"
 };
-var Banner = (_a) => {
+var Banner3 = (_a) => {
   var _b = _a, {
     children,
     className,
@@ -7394,7 +7663,7 @@ var Banner = (_a) => {
     "layout",
     "variant"
   ]);
-  return /* @__PURE__ */ import_react26.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react27.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       className,
       tw(`rounded flex justify-between gap-7 flex-nowrap ${spacing.spacingAroundBanner}`, {
@@ -7405,9 +7674,9 @@ var Banner = (_a) => {
     )
   }), children);
 };
-Banner.Title = (_a) => {
+Banner3.Title = (_a) => {
   var _b = _a, { children, className, layout } = _b, rest = __objRest(_b, ["children", "className", "layout"]);
-  return /* @__PURE__ */ import_react26.default.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react27.default.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
     variant: "subheading",
     color: "grey-100",
     className: classNames(
@@ -7418,16 +7687,16 @@ Banner.Title = (_a) => {
     )
   }), children);
 };
-Banner.Description = (_a) => {
+Banner3.Description = (_a) => {
   var _b = _a, { flexGrow, children, className } = _b, rest = __objRest(_b, ["flexGrow", "children", "className"]);
-  return /* @__PURE__ */ import_react26.default.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react27.default.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
     variant: "default",
     className: classNames(className, tw({ "flex-grow": flexGrow }))
   }), children);
 };
-Banner.ContentContainer = (_a) => {
+Banner3.ContentContainer = (_a) => {
   var _b = _a, { layout, children, className } = _b, rest = __objRest(_b, ["layout", "children", "className"]);
-  return /* @__PURE__ */ import_react26.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react27.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       className,
       tw("flex w-full", {
@@ -7437,24 +7706,24 @@ Banner.ContentContainer = (_a) => {
     )
   }), children);
 };
-Banner.ImageContainer = (_a) => {
+Banner3.ImageContainer = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ import_react26.default.createElement(Box, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react27.default.createElement(Box, __spreadProps(__spreadValues({}, rest), {
     display: "inline-flex",
     alignItems: "center",
     margin: spacing.omitSpacingAroundBanner,
     marginLeft: "0"
   }), children);
 };
-Banner.Actions = (_a) => {
+Banner3.Actions = (_a) => {
   var _b = _a, { children, className, layout } = _b, rest = __objRest(_b, ["children", "className", "layout"]);
-  return /* @__PURE__ */ import_react26.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react27.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(className, tw("flex gap-4", { "mt-5": layout === "vertical" }))
   }), children);
 };
-Banner.DismissContainer = (_a) => {
+Banner3.DismissContainer = (_a) => {
   var _b = _a, { layout, children, className } = _b, rest = __objRest(_b, ["layout", "children", "className"]);
-  return /* @__PURE__ */ import_react26.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react27.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       className,
       tw({ "self-start": layout === "vertical", "self-center": layout === "horizontal" })
@@ -7464,40 +7733,41 @@ Banner.DismissContainer = (_a) => {
 
 // src/molecules/Banner/Banner.tsx
 var import_cross3 = __toESM(require_cross());
-var BannerImageSkeleton = () => /* @__PURE__ */ import_react27.default.createElement(Skeleton, {
+var BannerImageSkeleton = () => /* @__PURE__ */ import_react28.default.createElement(Skeleton, {
   width: 225,
   className: tw("h-full")
 });
 var createBanner = (displayName, opts = {}) => {
   const BannerComponent = (props) => {
+    var _a;
     const { title, description, layout: layoutProp, action, onDismiss, variant = "default", children } = props;
     const layout = opts.isOneLineBanner ? "horizontal" : layoutProp || "vertical";
     const isDismissable = onDismiss !== void 0;
-    return /* @__PURE__ */ import_react27.default.createElement(Banner, {
+    return /* @__PURE__ */ import_react28.default.createElement(Banner3, {
       className: "Aquarium-Banner",
       layout,
       variant
-    }, /* @__PURE__ */ import_react27.default.createElement(Banner.ContentContainer, {
+    }, /* @__PURE__ */ import_react28.default.createElement(Banner3.ContentContainer, {
       layout
-    }, /* @__PURE__ */ import_react27.default.createElement(Banner.Title, {
+    }, /* @__PURE__ */ import_react28.default.createElement(Banner3.Title, {
       layout
-    }, title), /* @__PURE__ */ import_react27.default.createElement(Banner.Description, {
+    }, title), /* @__PURE__ */ import_react28.default.createElement(Banner3.Description, {
       flexGrow: isDismissable ? false : true
-    }, children || description), action && /* @__PURE__ */ import_react27.default.createElement(Banner.Actions, {
+    }, children || description), action && /* @__PURE__ */ import_react28.default.createElement(Banner3.Actions, {
       layout
-    }, !isLink(action) && /* @__PURE__ */ import_react27.default.createElement(Button.Ghost, __spreadValues({
+    }, !isLink(action) && /* @__PURE__ */ import_react28.default.createElement(Button.Ghost, __spreadValues({
       dense: true
-    }, (0, import_omit2.default)(action, "text")), action.text), isLink(action) && /* @__PURE__ */ import_react27.default.createElement(Button.ExternalLink, __spreadValues({
+    }, (0, import_omit2.default)(action, "text")), action.text), isLink(action) && /* @__PURE__ */ import_react28.default.createElement(Button.ExternalLink, __spreadValues({
       dense: true,
       kind: "ghost"
-    }, (0, import_omit2.default)(action, "text")), action.text))), (props.layout === "vertical" || props.layout === void 0) && props.image !== void 0 && /* @__PURE__ */ import_react27.default.createElement(Banner.ImageContainer, null, props.image ? /* @__PURE__ */ import_react27.default.createElement("img", {
+    }, (0, import_omit2.default)(action, "text")), action.text))), (props.layout === "vertical" || props.layout === void 0) && props.image !== void 0 && /* @__PURE__ */ import_react28.default.createElement(Banner3.ImageContainer, null, props.image ? /* @__PURE__ */ import_react28.default.createElement("img", {
       src: props.image,
-      alt: props.imageAlt,
+      alt: (_a = props.imageAlt) != null ? _a : "",
       className: tw("bg-cover object-cover", { "w-full": !props.imageWidth }),
       style: { width: props.imageWidth, height: props.imageHeight }
-    }) : /* @__PURE__ */ import_react27.default.createElement(BannerImageSkeleton, null)), isDismissable && /* @__PURE__ */ import_react27.default.createElement(Banner.DismissContainer, {
+    }) : /* @__PURE__ */ import_react28.default.createElement(BannerImageSkeleton, null)), isDismissable && /* @__PURE__ */ import_react28.default.createElement(Banner3.DismissContainer, {
       layout
-    }, /* @__PURE__ */ import_react27.default.createElement(Button.Icon, {
+    }, /* @__PURE__ */ import_react28.default.createElement(Button.Icon, {
       type: "button",
       tooltip: "Dismiss",
       icon: import_cross3.default,
@@ -7507,36 +7777,36 @@ var createBanner = (displayName, opts = {}) => {
   BannerComponent.displayName = displayName;
   return BannerComponent;
 };
-var Banner2 = createBanner("Banner");
+var Banner4 = createBanner("Banner");
 var OneLineBannerBase = createBanner("OneLineBanner", {
   isOneLineBanner: true
 });
 var OneLineBanner = OneLineBannerBase;
 
 // src/molecules/Breadcrumbs/Breadcrumbs.tsx
-var import_react28 = __toESM(require("react"));
-var import_classnames3 = __toESM(require("classnames"));
+var import_react29 = __toESM(require("react"));
+var import_classnames4 = __toESM(require("classnames"));
 var import_slash2 = __toESM(require_slash());
 var Breadcrumbs = (props) => {
   const { children, className } = props;
-  const crumbs = import_react28.default.Children.toArray(children).filter(
+  const crumbs = import_react29.default.Children.toArray(children).filter(
     (c) => Boolean(c)
   );
-  return /* @__PURE__ */ import_react28.default.createElement("nav", {
-    className: (0, import_classnames3.default)("Aquarium-Breadcrumbs", className),
+  return /* @__PURE__ */ import_react29.default.createElement("nav", {
+    className: (0, import_classnames4.default)("Aquarium-Breadcrumbs", className),
     "aria-label": "Breadcrumbs"
-  }, /* @__PURE__ */ import_react28.default.createElement("ol", {
+  }, /* @__PURE__ */ import_react29.default.createElement("ol", {
     className: tw("flex flex-row flex-nowrap items-center typography-caption")
   }, crumbs.map((crumb, index) => {
     const isLast = index === crumbs.length - 1;
-    return /* @__PURE__ */ import_react28.default.createElement("li", {
+    return /* @__PURE__ */ import_react29.default.createElement("li", {
       key: index,
       className: tw("flex flex-row items-center")
-    }, !!index && /* @__PURE__ */ import_react28.default.createElement(Icon, {
+    }, !!index && /* @__PURE__ */ import_react29.default.createElement(Icon, {
       "aria-hidden": true,
       className: tw("mx-2 text-grey-30"),
       icon: import_slash2.default
-    }), !isLast && crumb, isLast && /* @__PURE__ */ import_react28.default.createElement(ActiveCrumb, {
+    }), !isLast && crumb, isLast && /* @__PURE__ */ import_react29.default.createElement(ActiveCrumb, {
       "aria-disabled": true,
       "aria-current": "page",
       icon: crumb.props.icon
@@ -7544,20 +7814,20 @@ var Breadcrumbs = (props) => {
   })));
 };
 var asCrumb = (Component, displayName, options = { isActive: false }) => {
-  const Crumb2 = import_react28.default.forwardRef((_a, ref) => {
+  const Crumb2 = import_react29.default.forwardRef((_a, ref) => {
     var _b = _a, { icon, children } = _b, rest = __objRest(_b, ["icon", "children"]);
-    return /* @__PURE__ */ import_react28.default.createElement(Component, __spreadProps(__spreadValues({
+    return /* @__PURE__ */ import_react29.default.createElement(Component, __spreadProps(__spreadValues({
       ref
     }, rest), {
       role: "link"
-    }), /* @__PURE__ */ import_react28.default.createElement("span", {
-      className: (0, import_classnames3.default)(
+    }), /* @__PURE__ */ import_react29.default.createElement("span", {
+      className: (0, import_classnames4.default)(
         tw("flex flex-row flex-nowrap items-center gap-x-3 whitespace-nowrap", {
           "text-primary-80 hover:text-primary-70 no-underline hover:underline": !options.isActive,
           "text-grey-90": options.isActive
         })
       )
-    }, icon && /* @__PURE__ */ import_react28.default.createElement(Icon, {
+    }, icon && /* @__PURE__ */ import_react29.default.createElement(Icon, {
       icon
     }), children));
   });
@@ -7573,16 +7843,16 @@ var import_react37 = __toESM(require("react"));
 var import_button2 = require("@react-aria/button");
 
 // src/molecules/Chip/Chip.tsx
-var import_react31 = __toESM(require("react"));
-var import_classnames4 = __toESM(require("classnames"));
+var import_react32 = __toESM(require("react"));
+var import_classnames5 = __toESM(require("classnames"));
 var import_isNumber2 = __toESM(require("lodash/isNumber"));
 
 // src/atoms/Chip/Chip.tsx
-var import_react29 = __toESM(require("react"));
-var Container = import_react29.default.forwardRef(
+var import_react30 = __toESM(require("react"));
+var Container = import_react30.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { dense = false, className, children } = _b, rest = __objRest(_b, ["dense", "className", "children"]);
-    return /* @__PURE__ */ import_react29.default.createElement("span", __spreadValues({
+    return /* @__PURE__ */ import_react30.default.createElement("span", __spreadValues({
       ref,
       className: classNames(
         tw("inline-flex items-center rounded-sm transition whitespace-nowrap", {
@@ -7599,8 +7869,8 @@ var Chip = {
 };
 
 // types/utils.ts
-var import_react30 = require("react");
-var isComponentType = (c, type) => (0, import_react30.isValidElement)(c) && c.type === type;
+var import_react31 = require("react");
+var isComponentType = (c, type) => (0, import_react31.isValidElement)(c) && c.type === type;
 
 // src/molecules/Chip/Chip.tsx
 var import_cross4 = __toESM(require_cross());
@@ -7636,184 +7906,68 @@ var Chip2 = (_a) => {
     "badge",
     "onClose"
   ]);
-  return /* @__PURE__ */ import_react31.default.createElement(Chip.Container, __spreadValues({
+  return /* @__PURE__ */ import_react32.default.createElement(Chip.Container, __spreadValues({
     dense,
-    className: (0, import_classnames4.default)(
+    className: (0, import_classnames5.default)(
       "Aquarium-Chip",
       tw({
         "bg-grey-0 text-grey-70": !locked,
         "bg-grey-5 text-grey-40": locked
       })
     )
-  }, rest), icon && /* @__PURE__ */ import_react31.default.createElement(InlineIcon, {
+  }, rest), icon && /* @__PURE__ */ import_react32.default.createElement(InlineIcon, {
     icon
-  }), text, (0, import_isNumber2.default)(badge) && /* @__PURE__ */ import_react31.default.createElement(ChipBadge, {
+  }), text, (0, import_isNumber2.default)(badge) && /* @__PURE__ */ import_react32.default.createElement(ChipBadge, {
     dense,
     value: badge,
     textClassname: tw("text-grey-50")
-  }), onClose && /* @__PURE__ */ import_react31.default.createElement(InlineIcon, {
+  }), onClose && /* @__PURE__ */ import_react32.default.createElement(InlineIcon, {
     role: "button",
     "aria-hidden": false,
     icon: import_cross4.default,
     className: tw({ "cursor-pointer": onClose !== void 0 }),
     onClick: () => onClose == null ? void 0 : onClose()
-  }), locked && /* @__PURE__ */ import_react31.default.createElement(InlineIcon, {
+  }), locked && /* @__PURE__ */ import_react32.default.createElement(InlineIcon, {
     icon: import_lock2.default
   }));
 };
-var ChipSkeleton = ({ dense = false, width = dense ? 34 : 56 }) => /* @__PURE__ */ import_react31.default.createElement(Skeleton, {
+var ChipSkeleton = ({ dense = false, width = dense ? 34 : 56 }) => /* @__PURE__ */ import_react32.default.createElement(Skeleton, {
   width,
   height: dense ? 20 : 28
 });
 Chip2.Skeleton = ChipSkeleton;
 Chip2.Skeleton.displayName = "Chip.Skeleton";
-var StatusChip = import_react31.default.forwardRef(
+var StatusChip = import_react32.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { icon: chipIcon, UNSAFE_icon, text, dense = false, status, badge } = _b, rest = __objRest(_b, ["icon", "UNSAFE_icon", "text", "dense", "status", "badge"]);
     const icon = chipIcon || UNSAFE_icon;
-    return /* @__PURE__ */ import_react31.default.createElement(Chip.Container, __spreadProps(__spreadValues({
+    return /* @__PURE__ */ import_react32.default.createElement(Chip.Container, __spreadProps(__spreadValues({
       ref,
       role: "status",
       "aria-label": text ? text.toString() : void 0,
       dense
     }, rest), {
       className: getStatusClassNames(status)
-    }), badge === true && /* @__PURE__ */ import_react31.default.createElement(Badge.Dot, {
+    }), badge === true && /* @__PURE__ */ import_react32.default.createElement(Badge.Dot, {
       dense
-    }), icon && /* @__PURE__ */ import_react31.default.createElement(InlineIcon, {
+    }), icon && /* @__PURE__ */ import_react32.default.createElement(InlineIcon, {
       icon
-    }), text, badge && typeof badge === "number" && /* @__PURE__ */ import_react31.default.createElement(Badge, {
+    }), text, badge && typeof badge === "number" && /* @__PURE__ */ import_react32.default.createElement(Badge, {
       dense,
       value: badge
     }));
   }
 );
-var ChipContainer = ({ dense, children }) => /* @__PURE__ */ import_react31.default.createElement("div", {
+var ChipContainer = ({ dense, children }) => /* @__PURE__ */ import_react32.default.createElement("div", {
   className: tw("flex items-center", {
     "gap-x-3": !dense,
     "gap-x-2": Boolean(dense)
   })
-}, import_react31.default.Children.map(
+}, import_react32.default.Children.map(
   children,
-  (child) => isComponentType(child, Chip2) || isComponentType(child, StatusChip) || isComponentType(child, ChipSkeleton) ? import_react31.default.cloneElement(child, { dense }) : void 0
+  (child) => isComponentType(child, Chip2) || isComponentType(child, StatusChip) || isComponentType(child, ChipSkeleton) ? import_react32.default.cloneElement(child, { dense }) : void 0
 ));
 
-// src/molecules/Typography/Typography.tsx
-var import_react32 = __toESM(require("react"));
-var Typography2 = (props) => /* @__PURE__ */ import_react32.default.createElement(Typography, __spreadValues({}, props));
-Typography2.LargeHeading = (_a) => {
-  var _b = _a, { htmlTag = "h1" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ import_react32.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
-    htmlTag,
-    variant: "large-heading"
-  }));
-};
-Typography2.Heading = (_a) => {
-  var _b = _a, { htmlTag = "h1", fontWeight } = _b, props = __objRest(_b, ["htmlTag", "fontWeight"]);
-  return /* @__PURE__ */ import_react32.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
-    htmlTag,
-    variant: "heading"
-  }));
-};
-Typography2.Subheading = (_a) => {
-  var _b = _a, { htmlTag = "h2", fontWeight } = _b, props = __objRest(_b, ["htmlTag", "fontWeight"]);
-  return /* @__PURE__ */ import_react32.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
-    htmlTag,
-    variant: "subheading"
-  }));
-};
-Typography2.LargeStrong = (_a) => {
-  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ import_react32.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
-    htmlTag,
-    variant: "large-strong"
-  }));
-};
-Typography2.Large = (_a) => {
-  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ import_react32.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
-    htmlTag,
-    variant: "large"
-  }));
-};
-Typography2.DefaultStrong = (_a) => {
-  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ import_react32.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
-    htmlTag,
-    variant: "default-strong"
-  }));
-};
-Typography2.Default = (_a) => {
-  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ import_react32.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
-    htmlTag,
-    variant: "default"
-  }));
-};
-Typography2.Paragraph = (_a) => {
-  var _b = _a, { htmlTag = "p", fontWeight } = _b, props = __objRest(_b, ["htmlTag", "fontWeight"]);
-  return /* @__PURE__ */ import_react32.default.createElement(Typography2.Default, __spreadProps(__spreadValues({}, props), {
-    htmlTag
-  }));
-};
-Typography2.P = Typography2.Paragraph;
-Typography2.SmallStrong = (_a) => {
-  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ import_react32.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
-    htmlTag,
-    variant: "small-strong"
-  }));
-};
-Typography2.Small = (_a) => {
-  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ import_react32.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
-    htmlTag,
-    variant: "small"
-  }));
-};
-Typography2.Caption = (_a) => {
-  var _b = _a, { htmlTag = "div", fontWeight } = _b, props = __objRest(_b, ["htmlTag", "fontWeight"]);
-  return /* @__PURE__ */ import_react32.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
-    htmlTag,
-    variant: "caption"
-  }));
-};
-Typography2.LargeText = (_a) => {
-  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ import_react32.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
-    htmlTag,
-    variant: "large-strong"
-  }));
-};
-Typography2.MediumText = (_a) => {
-  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ import_react32.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
-    htmlTag,
-    variant: "default-strong"
-  }));
-};
-Typography2.Text = (_a) => {
-  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ import_react32.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
-    htmlTag,
-    variant: "default"
-  }));
-};
-Typography2.SmallText = (_a) => {
-  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ import_react32.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
-    htmlTag,
-    variant: "small"
-  }));
-};
-Typography2.SmallTextBold = (_a) => {
-  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ import_react32.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
-    htmlTag,
-    variant: "small-strong"
-  }));
-};
-
 // src/atoms/Card/Card.tsx
 var import_react34 = __toESM(require("react"));
 var import_isNumber3 = __toESM(require("lodash/isNumber"));
@@ -8035,7 +8189,7 @@ var Card2 = ({
   chips = [],
   icons = [],
   image,
-  imageAlt,
+  imageAlt = "",
   imageHeight,
   color,
   action,
@@ -8141,7 +8295,7 @@ CardImage.Skeleton = CardImageSkeleton;
 
 // src/molecules/Carousel/Carousel.tsx
 var import_react38 = __toESM(require("react"));
-var import_classnames5 = __toESM(require("classnames"));
+var import_classnames6 = __toESM(require("classnames"));
 var import_chevronLeft2 = __toESM(require_chevronLeft());
 var import_chevronRight2 = __toESM(require_chevronRight());
 var Carousel = ({
@@ -8203,7 +8357,7 @@ var Carousel = ({
     }
   };
   return items.length > 0 ? /* @__PURE__ */ import_react38.default.createElement("div", {
-    className: (0, import_classnames5.default)("Aquarium-Carousel", tw("w-full flex flex-col")),
+    className: (0, import_classnames6.default)("Aquarium-Carousel", tw("w-full flex flex-col")),
     ref: containerRef
   }, containerRef !== null && /* @__PURE__ */ import_react38.default.createElement("ul", {
     ref: scrollbarContainerRef,
@@ -8400,7 +8554,7 @@ Checkbox2.Skeleton.displayName = "Checkbox.Skeleton";
 
 // src/molecules/CheckboxGroup/CheckboxGroup.tsx
 var import_react48 = __toESM(require("react"));
-var import_utils4 = require("@react-aria/utils");
+var import_utils5 = require("@react-aria/utils");
 
 // src/atoms/InputGroup/InputGroup.tsx
 var import_react43 = __toESM(require("react"));
@@ -8561,7 +8715,7 @@ var FormControl = ({ className, inline, children }) => {
 
 // src/utils/form/HelperText/HelperText.tsx
 var import_react46 = __toESM(require("react"));
-var import_classnames6 = __toESM(require("classnames"));
+var import_classnames7 = __toESM(require("classnames"));
 var import_isNumber4 = __toESM(require("lodash/isNumber"));
 
 // src/utils/form/CharCounter/CharCounter.tsx
@@ -8617,7 +8771,7 @@ var HelperText = ({
   })));
 };
 var Skeleton2 = ({ className, children }) => /* @__PURE__ */ import_react46.default.createElement("div", {
-  className: (0, import_classnames6.default)(className, "h-[25px]")
+  className: (0, import_classnames7.default)(className, "h-[25px]")
 }, children);
 HelperText.Skeleton = Skeleton2;
 HelperText.Skeleton.displayName = "HelperText.Skeleton";
@@ -8780,7 +8934,7 @@ var CheckboxGroup = (_a) => {
   if (value !== void 0 && value !== selectedItems) {
     setSelectedItems(value);
   }
-  const errorMessageId = (0, import_utils4.useId)();
+  const errorMessageId = (0, import_utils5.useId)();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const labelControlProps = getLabelControlProps(props);
   const handleChange = (e) => {
@@ -8857,7 +9011,7 @@ var ChoiceChip = (_a) => {
 // src/molecules/Combobox/Combobox.tsx
 var import_react52 = __toESM(require("react"));
 var import_overlays5 = require("@react-aria/overlays");
-var import_utils5 = require("@react-aria/utils");
+var import_utils6 = require("@react-aria/utils");
 var import_downshift = require("downshift");
 var import_omit4 = __toESM(require("lodash/omit"));
 var import_match_sorter = require("match-sorter");
@@ -9123,9 +9277,9 @@ var Combobox = (_a) => {
     "emptyState"
   ]);
   var _a2;
-  const defaultId = (0, import_utils5.useId)();
+  const defaultId = (0, import_utils6.useId)();
   const id = (_a2 = props.id) != null ? _a2 : defaultId;
-  const errorMessageId = (0, import_utils5.useId)();
+  const errorMessageId = (0, import_utils6.useId)();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const labelControlProps = getLabelControlProps(props);
   const baseProps = (0, import_omit4.default)(props, Object.keys(labelControlProps));
@@ -9175,7 +9329,7 @@ var import_i18n = require("@react-aria/i18n");
 var import_interactions2 = require("@react-aria/interactions");
 var import_menu2 = require("@react-aria/menu");
 var import_separator = require("@react-aria/separator");
-var import_utils7 = require("@react-aria/utils");
+var import_utils8 = require("@react-aria/utils");
 var import_collections = require("@react-stately/collections");
 var import_menu3 = require("@react-stately/menu");
 var import_tree = require("@react-stately/tree");
@@ -9183,7 +9337,7 @@ var import_omit6 = __toESM(require("lodash/omit"));
 
 // src/molecules/Input/Input.tsx
 var import_react55 = __toESM(require("react"));
-var import_utils6 = require("@react-aria/utils");
+var import_utils7 = require("@react-aria/utils");
 var import_omit5 = __toESM(require("lodash/omit"));
 var import_toString = __toESM(require("lodash/toString"));
 
@@ -9304,9 +9458,9 @@ var Input2 = import_react55.default.forwardRef((_a, ref) => {
       setValue(controlledValue);
     }
   }, [controlledValue]);
-  const defaultId = (0, import_utils6.useId)();
+  const defaultId = (0, import_utils7.useId)();
   const id = (_c = props.id) != null ? _c : defaultId;
-  const errorMessageId = (0, import_utils6.useId)();
+  const errorMessageId = (0, import_utils7.useId)();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const _d = getLabelControlProps(props), { "data-testid": dataTestId } = _d, labelControlProps = __objRest(_d, ["data-testid"]);
   const baseProps = (0, import_omit5.default)(props, Object.keys(labelControlProps));
@@ -9477,7 +9631,9 @@ var DropdownMenu2 = (_a) => {
   return /* @__PURE__ */ import_react57.default.createElement("div", null, /* @__PURE__ */ import_react57.default.createElement(import_interactions2.PressResponder, __spreadValues({
     ref: triggerRef,
     onPress: () => state.toggle()
-  }, (0, import_omit6.default)(menuTriggerProps, "id")), /* @__PURE__ */ import_react57.default.createElement(TriggerWrapper, null, trigger.props.children)), state.isOpen && /* @__PURE__ */ import_react57.default.createElement(PopoverOverlay, {
+  }, (0, import_omit6.default)(menuTriggerProps, ["id", "aria-expanded"])), /* @__PURE__ */ import_react57.default.createElement(TriggerWrapper, {
+    "aria-expanded": menuTriggerProps["aria-expanded"]
+  }, trigger.props.children)), state.isOpen && /* @__PURE__ */ import_react57.default.createElement(PopoverOverlay, {
     className: "Aquarium-DropdownMenu",
     triggerRef,
     state,
@@ -9515,7 +9671,7 @@ var TriggerWrapper = (_a) => {
   if (!trigger || !import_react57.default.isValidElement(trigger)) {
     throw new Error("<DropdownMenu.Trigger> must have valid child");
   }
-  return import_react57.default.cloneElement(trigger, __spreadValues({ ref }, (0, import_utils7.mergeProps)(pressProps, props)));
+  return import_react57.default.cloneElement(trigger, __spreadValues({ ref }, (0, import_utils8.mergeProps)(pressProps, props)));
 };
 var isSectionNode = (item) => item.type === "section";
 var isItemNode = (item) => item.type === "item";
@@ -9648,7 +9804,7 @@ var import_clamp = __toESM(require("lodash/clamp"));
 
 // src/molecules/Select/Select.tsx
 var import_react58 = __toESM(require("react"));
-var import_utils10 = require("@react-aria/utils");
+var import_utils11 = require("@react-aria/utils");
 var import_downshift2 = require("downshift");
 var import_defaults = __toESM(require("lodash/defaults"));
 var import_isArray = __toESM(require("lodash/isArray"));
@@ -9846,9 +10002,9 @@ var Select2 = (_a) => {
     "options"
   ]);
   var _a2;
-  const defaultId = (0, import_utils10.useId)();
+  const defaultId = (0, import_utils11.useId)();
   const id = (_a2 = props.id) != null ? _a2 : defaultId;
-  const errorMessageId = (0, import_utils10.useId)();
+  const errorMessageId = (0, import_utils11.useId)();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const labelProps = getLabelControlProps(props);
   const baseProps = (0, import_omit7.default)(props, Object.keys(labelProps));
@@ -9916,6 +10072,7 @@ var Pagination = ({
   }, "Items per page "), /* @__PURE__ */ import_react59.default.createElement("div", {
     className: tw("max-w-[70px]")
   }, /* @__PURE__ */ import_react59.default.createElement(SelectBase, {
+    "aria-label": "Items per page",
     options: pageSizes.map((size) => size.toString()),
     value: pageSize.toString(),
     onChange: (size) => {
@@ -9946,6 +10103,7 @@ var Pagination = ({
   }, /* @__PURE__ */ import_react59.default.createElement(Typography2.Small, {
     color: "grey-60"
   }, "Page")), /* @__PURE__ */ import_react59.default.createElement(InputBase, {
+    "aria-label": "Page",
     className: classNames(tw("text-center max-w-[40px]"), "no-arrows"),
     type: "number",
     min: 1,
@@ -10045,7 +10203,8 @@ var Template = ({
   columnGap,
   rowGap,
   fullHeight,
-  className
+  className,
+  role
 }) => {
   const gridTemplateColumns = typeof columns === "number" ? "1fr ".repeat(columns) : columns.map((column) => typeof column === "number" ? `${column}px` : column === "auto" ? column : `${column}fr`).join(" ");
   const styles = useStyle({
@@ -10061,6 +10220,7 @@ var Template = ({
     columnGap
   });
   return /* @__PURE__ */ import_react62.default.createElement("div", {
+    role,
     className,
     style: __spreadValues({}, styles)
   }, children);
@@ -10207,11 +10367,14 @@ var TableSortCell = (_a) => {
     className: getSortCellIconClassNames(direction === "ascending")
   }))));
 };
+var Caption = ({ children }) => /* @__PURE__ */ import_react64.default.createElement(Typography2.Caption, {
+  htmlTag: "caption"
+}, children);
 var Item4 = ({ image, imageAlt, imageSize = 35, title, caption }) => /* @__PURE__ */ import_react64.default.createElement("div", {
   className: tw("flex gap-4 items-center")
 }, image && /* @__PURE__ */ import_react64.default.createElement("img", {
   src: image,
-  alt: imageAlt,
+  alt: imageAlt != null ? imageAlt : "",
   style: { width: imageSize, height: imageSize }
 }), /* @__PURE__ */ import_react64.default.createElement("div", null, title, caption && /* @__PURE__ */ import_react64.default.createElement(Typography2.Caption, null, caption)));
 Table.Head = import_react64.default.memo(TableHead);
@@ -10220,6 +10383,7 @@ Table.Row = import_react64.default.memo(TableRow);
 Table.Cell = import_react64.default.memo(TableCell);
 Table.SortCell = import_react64.default.memo(TableSortCell);
 Table.SelectCell = import_react64.default.memo(TableSelectCell);
+Table.Caption = Caption;
 
 // src/atoms/DataList/DataList.tsx
 var import_chevronDown5 = __toESM(require_chevronDown());
@@ -10245,8 +10409,9 @@ var HeadCell = (_a) => {
     "align",
     "stickyColumn"
   ]);
-  return /* @__PURE__ */ import_react65.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
-    role: "cell",
+  return /* @__PURE__ */ import_react65.default.createElement("div", __spreadProps(__spreadValues({
+    role: "cell"
+  }, rest), {
     className: classNames(
       cellClassNames,
       getHeadCellClassNames(sticky, stickyColumn),
@@ -10302,7 +10467,7 @@ var SortCell = (_a) => {
   var _b = _a, { children, direction = "none", onClick, sticky } = _b, rest = __objRest(_b, ["children", "direction", "onClick", "sticky"]);
   return /* @__PURE__ */ import_react65.default.createElement(HeadCell, __spreadProps(__spreadValues({}, rest), {
     "aria-sort": direction,
-    role: "cell",
+    role: "columnheader",
     sticky
   }), /* @__PURE__ */ import_react65.default.createElement("span", {
     className: getSortCellButtonClassNames(rest.align),
@@ -10389,7 +10554,7 @@ var import_more2 = __toESM(require_more());
 // src/molecules/Accordion/Accordion.tsx
 var import_react69 = __toESM(require("react"));
 var import_react70 = require("@iconify/react");
-var import_utils11 = require("@react-aria/utils");
+var import_utils12 = require("@react-aria/utils");
 var import_web3 = require("@react-spring/web");
 var import_isUndefined8 = __toESM(require("lodash/isUndefined"));
 
@@ -10528,10 +10693,12 @@ var AccordionPanel = (_a) => {
       duration: 150
     }
   });
-  return /* @__PURE__ */ import_react69.default.createElement(import_web3.animated.div, __spreadProps(__spreadValues({}, rest), {
-    role: "region",
+  return /* @__PURE__ */ import_react69.default.createElement(import_web3.animated.div, __spreadProps(__spreadValues({
+    role: "region"
+  }, rest), {
     id: `${id}-content`,
     "aria-labelledby": `${id}-summary`,
+    "aria-hidden": !isOpen ? "true" : void 0,
     style
   }), /* @__PURE__ */ import_react69.default.createElement("div", {
     ref
@@ -10556,7 +10723,7 @@ var AccordionSummary = (_a) => {
 };
 var AccordionContainer = (_a) => {
   var _b = _a, { children, panelId } = _b, rest = __objRest(_b, ["children", "panelId"]);
-  const generatedId = (0, import_utils11.useId)();
+  const generatedId = (0, import_utils12.useId)();
   return /* @__PURE__ */ import_react69.default.createElement(PanelContext.Provider, {
     value: panelId != null ? panelId : generatedId
   }, /* @__PURE__ */ import_react69.default.createElement("div", __spreadValues({}, rest), children, /* @__PURE__ */ import_react69.default.createElement(Divider2, null)));
@@ -10578,13 +10745,14 @@ var import_react71 = __toESM(require("react"));
 var DataListSkeleton = ({ columns = ["1", "2", "2", 52], rows = 5 }) => {
   const columnsAmount = [...Array(typeof columns === "number" ? columns : columns.length).keys()];
   return /* @__PURE__ */ import_react71.default.createElement(Template, {
+    role: "table",
     columns
-  }, columnsAmount.map((_, index) => /* @__PURE__ */ import_react71.default.createElement(DataList.HeadCell, {
+  }, /* @__PURE__ */ import_react71.default.createElement(DataList.Row, null, columnsAmount.map((_, index) => /* @__PURE__ */ import_react71.default.createElement(DataList.HeadCell, {
     key: index
   }, /* @__PURE__ */ import_react71.default.createElement(Skeleton, {
     width: "100%",
     height: 17.5
-  }))), /* @__PURE__ */ import_react71.default.createElement(List2, {
+  })))), /* @__PURE__ */ import_react71.default.createElement(List2, {
     items: [...Array(rows).keys()],
     renderItem: (item) => /* @__PURE__ */ import_react71.default.createElement(DataList.Row, {
       key: item
@@ -10640,14 +10808,18 @@ var DataList2 = ({
   ]);
   const PaginationFooter = import_react72.default.useCallback(
     ({ children }) => /* @__PURE__ */ import_react72.default.createElement("div", {
-      style: { gridColumn: "1 / -1" }
-    }, children),
+      style: { gridColumn: "1 / -1" },
+      role: "row"
+    }, /* @__PURE__ */ import_react72.default.createElement("div", {
+      role: "cell"
+    }, children)),
     []
   );
   return /* @__PURE__ */ import_react72.default.createElement(Template, {
     className: "Aquarium-DataList",
-    columns: templateColumns
-  }, isCollapsible && /* @__PURE__ */ import_react72.default.createElement(DataList.HeadCell, {
+    columns: templateColumns,
+    role: "table"
+  }, /* @__PURE__ */ import_react72.default.createElement(DataList.Row, null, isCollapsible && /* @__PURE__ */ import_react72.default.createElement(DataList.HeadCell, {
     align: "left"
   }), columns.map((column) => {
     const content = column.headerTooltip ? /* @__PURE__ */ import_react72.default.createElement(Tooltip, {
@@ -10664,7 +10836,7 @@ var DataList2 = ({
   }), menu && /* @__PURE__ */ import_react72.default.createElement(DataList.HeadCell, {
     align: "right",
     "aria-label": menuAriaLabel
-  }, menuHeaderName), groups && groupKeys ? /* @__PURE__ */ import_react72.default.createElement(List2, {
+  }, menuHeaderName)), groups && groupKeys ? /* @__PURE__ */ import_react72.default.createElement(List2, {
     items: sortGroupKeys(groupKeys),
     renderItem: (key) => {
       const groupContent = /* @__PURE__ */ import_react72.default.createElement(List2, {
@@ -10729,10 +10901,13 @@ var DataList2 = ({
         key: row.id,
         openPanelId: expandedGroupIds ? expandedGroupIds.find((id) => id === row.id) || null : void 0
       }, content, /* @__PURE__ */ import_react72.default.createElement(Accordion.Panel, {
+        role: "row",
         panelId: row.id.toString(),
         className: tw("col-span-full bg-grey-0 border-b border-grey-10"),
         "aria-label": `row ${row.id.toString()} details`
-      }, details)) : content;
+      }, /* @__PURE__ */ import_react72.default.createElement("div", {
+        role: "cell"
+      }, details))) : content;
     }
   }));
 };
@@ -10846,6 +11021,7 @@ Table2.Row = Table.Row;
 Table2.Cell = Table.Cell;
 Table2.SortCell = Table.SortCell;
 Table2.SelectCell = Table.SelectCell;
+Table2.Caption = Table.Caption;
 
 // src/molecules/DataTable/DataTable.tsx
 var import_more3 = __toESM(require_more());
@@ -11000,7 +11176,7 @@ DataTable.Skeleton = DataListSkeleton;
 var import_react77 = __toESM(require("react"));
 var import_dialog = require("@react-aria/dialog");
 var import_overlays6 = require("@react-aria/overlays");
-var import_utils14 = require("@react-aria/utils");
+var import_utils15 = require("@react-aria/utils");
 var import_overlays7 = require("@react-stately/overlays");
 var import_omit8 = __toESM(require("lodash/omit"));
 
@@ -11149,8 +11325,8 @@ var DialogWrapper = ({
   secondaryAction
 }) => {
   const ref = import_react77.default.useRef(null);
-  const labelledBy = (0, import_utils14.useId)();
-  const describedBy = (0, import_utils14.useId)();
+  const labelledBy = (0, import_utils15.useId)();
+  const describedBy = (0, import_utils15.useId)();
   const { dialogProps } = (0, import_dialog.useDialog)(
     { "role": "alertdialog", "aria-labelledby": labelledBy, "aria-describedby": describedBy },
     ref
@@ -11185,9 +11361,10 @@ var import_react81 = __toESM(require("react"));
 var import_react80 = __toESM(require("react"));
 var import_interactions3 = require("@react-aria/interactions");
 var import_overlays8 = require("@react-aria/overlays");
-var import_utils15 = require("@react-aria/utils");
+var import_utils16 = require("@react-aria/utils");
 var import_overlays9 = require("@react-stately/overlays");
-var import_classnames7 = __toESM(require("classnames"));
+var import_classnames8 = __toESM(require("classnames"));
+var import_omit9 = __toESM(require("lodash/omit"));
 
 // src/molecules/Popover/Dialog.tsx
 var import_react78 = __toESM(require("react"));
@@ -11237,9 +11414,10 @@ var Popover2 = (props) => {
     if (isComponentType(child, Popover2.Trigger)) {
       return /* @__PURE__ */ import_react80.default.createElement(import_interactions3.PressResponder, __spreadValues({
         ref: triggerRef
-      }, triggerProps), /* @__PURE__ */ import_react80.default.createElement(PopoverTriggerWrapper, {
+      }, (0, import_omit9.default)(triggerProps, "aria-expanded")), /* @__PURE__ */ import_react80.default.createElement(PopoverTriggerWrapper, {
         "data-testid": props["data-testid"],
-        "aria-controls": id
+        "aria-controls": id,
+        "aria-expanded": triggerProps["aria-expanded"]
       }, child.props.children));
     }
     if (isComponentType(child, Popover2.Panel)) {
@@ -11250,7 +11428,7 @@ var Popover2 = (props) => {
         isNonModal: !containFocus,
         autoFocus: !containFocus,
         isKeyboardDismissDisabled,
-        className: (0, import_classnames7.default)("Aquarium-Popover", child.props.className),
+        className: (0, import_classnames8.default)("Aquarium-Popover", child.props.className),
         offset,
         crossOffset,
         shouldFlip
@@ -11290,7 +11468,7 @@ var PopoverTriggerWrapper = (_a) => {
   const { pressProps } = (0, import_interactions3.usePress)(__spreadProps(__spreadValues({}, rest), { ref }));
   return import_react80.default.cloneElement(trigger, __spreadProps(__spreadValues({
     "ref": ref
-  }, (0, import_utils15.mergeProps)(pressProps, trigger.props)), {
+  }, (0, import_utils16.mergeProps)(pressProps, trigger.props)), {
     "aria-controls": (_a2 = rest["aria-controls"]) != null ? _a2 : pressProps["aria-controls"]
   }));
 };
@@ -11609,7 +11787,7 @@ var LineClamp2 = ({
 
 // src/molecules/Link/Link.tsx
 var import_react87 = __toESM(require("react"));
-var import_classnames8 = __toESM(require("classnames"));
+var import_classnames9 = __toESM(require("classnames"));
 
 // src/atoms/Link/Link.tsx
 var import_react86 = __toESM(require("react"));
@@ -11624,7 +11802,7 @@ var Link = (_a) => {
 var Link2 = (_a) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ import_react87.default.createElement(Link, __spreadValues({
-    className: (0, import_classnames8.default)("Aquarium-Link", className)
+    className: (0, import_classnames9.default)("Aquarium-Link", className)
   }, props));
 };
 
@@ -11641,6 +11819,7 @@ var ListItem = ({ name, icon, active = false }) => {
     className: `px-4 py-2 rounded-full ${active ? "bg-grey-5" : "hover:bg-grey-0"}`
   }, /* @__PURE__ */ import_react88.default.createElement("img", {
     src: icon,
+    alt: "",
     className: "inline mr-4",
     height: 28,
     width: 28
@@ -11651,10 +11830,10 @@ var ListItem = ({ name, icon, active = false }) => {
 var import_react90 = __toESM(require("react"));
 var import_dialog3 = require("@react-aria/dialog");
 var import_overlays10 = require("@react-aria/overlays");
-var import_utils17 = require("@react-aria/utils");
+var import_utils18 = require("@react-aria/utils");
 var import_overlays11 = require("@react-stately/overlays");
 var import_castArray = __toESM(require("lodash/castArray"));
-var import_omit9 = __toESM(require("lodash/omit"));
+var import_omit10 = __toESM(require("lodash/omit"));
 
 // src/molecules/Tabs/Tabs.tsx
 var import_react89 = __toESM(require("react"));
@@ -11981,8 +12160,8 @@ var Modal2 = (_a) => {
 var ModalWrapper = import_react90.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { title, subtitle, headerImage, primaryAction, secondaryActions, children, onClose } = _b, props = __objRest(_b, ["title", "subtitle", "headerImage", "primaryAction", "secondaryActions", "children", "onClose"]);
-    const labelledBy = (0, import_utils17.useId)();
-    const describedBy = (0, import_utils17.useId)();
+    const labelledBy = (0, import_utils18.useId)();
+    const describedBy = (0, import_utils18.useId)();
     const { dialogProps } = (0, import_dialog3.useDialog)(
       { "role": "dialog", "aria-labelledby": labelledBy, "aria-describedby": describedBy },
       ref
@@ -12012,7 +12191,7 @@ var ModalWrapper = import_react90.default.forwardRef(
       }, action), text);
     }), primaryAction && /* @__PURE__ */ import_react90.default.createElement(Button.Primary, __spreadValues({
       key: primaryAction.text
-    }, (0, import_omit9.default)(primaryAction, "text")), primaryAction.text))));
+    }, (0, import_omit10.default)(primaryAction, "text")), primaryAction.text))));
   }
 );
 var ModalTabs = createTabsComponent(
@@ -12028,10 +12207,10 @@ var ModalTabs = createTabsComponent(
 
 // src/molecules/MultiInput/MultiInput.tsx
 var import_react92 = __toESM(require("react"));
-var import_utils19 = require("@react-aria/utils");
+var import_utils20 = require("@react-aria/utils");
 var import_castArray2 = __toESM(require("lodash/castArray"));
 var import_identity = __toESM(require("lodash/identity"));
-var import_omit10 = __toESM(require("lodash/omit"));
+var import_omit11 = __toESM(require("lodash/omit"));
 
 // src/molecules/MultiInput/InputChip.tsx
 var import_react91 = __toESM(require("react"));
@@ -12258,12 +12437,12 @@ var MultiInput = (props) => {
     var _a2;
     setValue((_a2 = props.value) != null ? _a2 : []);
   }, [JSON.stringify(props.value)]);
-  const defaultId = (0, import_utils19.useId)();
+  const defaultId = (0, import_utils20.useId)();
   const id = (_e = (_d = props.id) != null ? _d : props.name) != null ? _e : defaultId;
-  const errorMessageId = (0, import_utils19.useId)();
+  const errorMessageId = (0, import_utils20.useId)();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const labelControlProps = getLabelControlProps(props);
-  const baseProps = (0, import_omit10.default)(props, Object.keys(labelControlProps));
+  const baseProps = (0, import_omit11.default)(props, Object.keys(labelControlProps));
   return /* @__PURE__ */ import_react92.default.createElement(LabelControl, __spreadProps(__spreadValues({
     id: `${id}-label`,
     htmlFor: `${id}-input`,
@@ -12291,11 +12470,11 @@ MultiInput.Skeleton.displayName = "MultiInput.Skeleton";
 // src/molecules/MultiSelect/MultiSelect.tsx
 var import_react93 = __toESM(require("react"));
 var import_overlays12 = require("@react-aria/overlays");
-var import_utils20 = require("@react-aria/utils");
+var import_utils21 = require("@react-aria/utils");
 var import_downshift3 = require("downshift");
 var import_isEqual = __toESM(require("lodash/isEqual"));
 var import_isNil2 = __toESM(require("lodash/isNil"));
-var import_omit11 = __toESM(require("lodash/omit"));
+var import_omit12 = __toESM(require("lodash/omit"));
 var import_omitBy = __toESM(require("lodash/omitBy"));
 var import_match_sorter2 = require("match-sorter");
 var MultiSelectBase = (_a) => {
@@ -12518,12 +12697,12 @@ var MultiSelect = (_a) => {
     "emptyState"
   ]);
   var _a2;
-  const defaultId = (0, import_utils20.useId)();
+  const defaultId = (0, import_utils21.useId)();
   const id = (_a2 = props.id) != null ? _a2 : defaultId;
-  const errorMessageId = (0, import_utils20.useId)();
+  const errorMessageId = (0, import_utils21.useId)();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const labelControlProps = getLabelControlProps(props);
-  const baseProps = (0, import_omit11.default)(props, Object.keys(labelControlProps));
+  const baseProps = (0, import_omit12.default)(props, Object.keys(labelControlProps));
   return /* @__PURE__ */ import_react93.default.createElement(LabelControl, __spreadProps(__spreadValues({
     id: `${id}-label`,
     htmlFor: `${id}-input`,
@@ -12544,8 +12723,8 @@ MultiSelect.Skeleton.displayName = "MultiSelect.Skeleton";
 
 // src/molecules/NativeSelect/NativeSelect.tsx
 var import_react94 = __toESM(require("react"));
-var import_utils21 = require("@react-aria/utils");
-var import_omit12 = __toESM(require("lodash/omit"));
+var import_utils22 = require("@react-aria/utils");
+var import_omit13 = __toESM(require("lodash/omit"));
 var import_uniqueId = __toESM(require("lodash/uniqueId"));
 var import_caretDown2 = __toESM(require_caretDown());
 var NativeSelectBase = import_react94.default.forwardRef(
@@ -12606,12 +12785,12 @@ var NativeSelect = import_react94.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { readOnly } = _b, props = __objRest(_b, ["readOnly"]);
     var _a2;
-    const defaultId = (0, import_utils21.useId)();
+    const defaultId = (0, import_utils22.useId)();
     const id = (_a2 = props.id) != null ? _a2 : defaultId;
-    const errorMessageId = (0, import_utils21.useId)();
+    const errorMessageId = (0, import_utils22.useId)();
     const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
     const _b2 = getLabelControlProps(props), { "data-testid": dataTestId } = _b2, labelControlProps = __objRest(_b2, ["data-testid"]);
-    const baseProps = (0, import_omit12.default)(props, Object.keys(labelControlProps));
+    const baseProps = (0, import_omit13.default)(props, Object.keys(labelControlProps));
     return /* @__PURE__ */ import_react94.default.createElement(LabelControl, __spreadProps(__spreadValues({
       id: `${id}-label`,
       htmlFor: id,
@@ -12647,7 +12826,7 @@ NativeSelect.Skeleton.displayName = "NativeSelect.Skeleton";
 
 // src/molecules/Navigation/Navigation.tsx
 var import_react96 = __toESM(require("react"));
-var import_classnames9 = __toESM(require("classnames"));
+var import_classnames10 = __toESM(require("classnames"));
 
 // src/atoms/Navigation/Navigation.tsx
 var import_react95 = __toESM(require("react"));
@@ -12657,7 +12836,7 @@ var Navigation = (_a) => {
     className: classNames(tw("bg-grey-0 h-full"))
   }, /* @__PURE__ */ import_react95.default.createElement("ul", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("flex flex-col h-full"), className),
-    role: "menu"
+    role: "menubar"
   }), children));
 };
 var Header = (_a) => {
@@ -12719,7 +12898,7 @@ Navigation.Divider = Divider3;
 var Navigation2 = (_a) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ import_react96.default.createElement(Navigation, __spreadValues({
-    className: (0, import_classnames9.default)("Aquarium-Navigation", className)
+    className: (0, import_classnames10.default)("Aquarium-Navigation", className)
   }, props));
 };
 var Item6 = (_a) => {
@@ -12827,7 +13006,7 @@ var CommonPageHeader = ({
     gap: "5"
   }, image && /* @__PURE__ */ import_react98.default.createElement("img", {
     src: image,
-    alt: imageAlt,
+    alt: imageAlt != null ? imageAlt : "",
     className: tw("w-[56px] h-[56px]")
   }), /* @__PURE__ */ import_react98.default.createElement(PageHeader.TitleContainer, null, /* @__PURE__ */ import_react98.default.createElement(PageHeader.Title, {
     isSubHeader
@@ -12855,7 +13034,7 @@ PageHeader2.SubHeader.displayName = "PageHeader.SubHeader";
 
 // src/molecules/PopoverDialog/PopoverDialog.tsx
 var import_react100 = __toESM(require("react"));
-var import_omit13 = __toESM(require("lodash/omit"));
+var import_omit14 = __toESM(require("lodash/omit"));
 
 // src/atoms/PopoverDialog/PopoverDialog.tsx
 var import_react99 = __toESM(require("react"));
@@ -12910,11 +13089,11 @@ var PopoverDialog2 = ({ placement, open, title, secondaryAction, primaryAction,
         kind: "secondary-ghost",
         key: secondaryAction.text,
         dense: true
-      }, (0, import_omit13.default)(secondaryAction, "text")), secondaryAction.text), /* @__PURE__ */ import_react100.default.createElement(Popover2.Button, __spreadValues({
+      }, (0, import_omit14.default)(secondaryAction, "text")), secondaryAction.text), /* @__PURE__ */ import_react100.default.createElement(Popover2.Button, __spreadValues({
         kind: "ghost",
         key: primaryAction.text,
         dense: true
-      }, (0, import_omit13.default)(primaryAction, "text")), primaryAction.text))));
+      }, (0, import_omit14.default)(primaryAction, "text")), primaryAction.text))));
     }
     return child;
   };
@@ -13062,7 +13241,7 @@ RadioButton2.Skeleton.displayName = "RadioButton.Skeleton";
 
 // src/molecules/RadioButtonGroup/RadioButtonGroup.tsx
 var import_react104 = __toESM(require("react"));
-var import_utils23 = require("@react-aria/utils");
+var import_utils24 = require("@react-aria/utils");
 var isRadioButton = (c) => {
   return import_react104.default.isValidElement(c) && c.type === RadioButton2;
 };
@@ -13088,7 +13267,7 @@ var RadioButtonGroup = (_a) => {
   ]);
   var _a2;
   const [value, setValue] = import_react104.default.useState((_a2 = _value != null ? _value : defaultValue) != null ? _a2 : "");
-  const errorMessageId = (0, import_utils23.useId)();
+  const errorMessageId = (0, import_utils24.useId)();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const labelControlProps = getLabelControlProps(props);
   if (_value !== void 0 && _value !== value) {
@@ -13143,7 +13322,7 @@ RadioButtonGroup.Skeleton.displayName = "RadioButtonGroup.Skeleton";
 
 // src/molecules/Section/Section.tsx
 var import_react109 = __toESM(require("react"));
-var import_utils24 = require("@react-aria/utils");
+var import_utils25 = require("@react-aria/utils");
 var import_web4 = require("@react-spring/web");
 var import_castArray4 = __toESM(require("lodash/castArray"));
 var import_isUndefined9 = __toESM(require("lodash/isUndefined"));
@@ -13290,10 +13469,10 @@ var Section3 = (_a) => {
   }, rest), children);
 };
 Section3.Header = (_a) => {
-  var _b = _a, { children, className, collapsible } = _b, rest = __objRest(_b, ["children", "className", "collapsible"]);
+  var _b = _a, { children, className, expanded } = _b, rest = __objRest(_b, ["children", "className", "expanded"]);
   return /* @__PURE__ */ import_react108.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
-      tw("px-6 flex gap-5 justify-between items-center h-[72px]", { "bg-grey-0": collapsible }),
+      tw("px-6 flex gap-5 justify-between items-center h-[72px]", { "bg-grey-0": expanded }),
       className
     )
   }), children);
@@ -13381,23 +13560,26 @@ var Section4 = (props) => {
     },
     immediate: !_collapsible
   }), { transform, backgroundColor } = _f, spring = __objRest(_f, ["transform", "backgroundColor"]);
-  const toggleId = (0, import_utils24.useId)();
-  const regionId = (0, import_utils24.useId)();
+  const toggleId = (0, import_utils25.useId)();
+  const regionId = (0, import_utils25.useId)();
+  const titleId = (0, import_utils25.useId)();
   return /* @__PURE__ */ import_react109.default.createElement(Section3, {
     "aria-label": title,
     className: "Aquarium-Section"
   }, title && /* @__PURE__ */ import_react109.default.createElement(import_react109.default.Fragment, null, /* @__PURE__ */ import_react109.default.createElement(Section3.Header, {
-    collapsible: _collapsible
+    expanded: _collapsible && !isCollapsed
   }, /* @__PURE__ */ import_react109.default.createElement(Section3.TitleContainer, {
     role: _collapsible ? "button" : void 0,
     id: toggleId,
     collapsible: _collapsible,
     onClick: handleTitleClick,
-    "aria-expanded": !isCollapsed,
-    "aria-controls": regionId
+    "aria-expanded": _collapsible ? !isCollapsed : void 0,
+    "aria-controls": _collapsible ? regionId : void 0
   }, _collapsible && /* @__PURE__ */ import_react109.default.createElement(import_web4.animated.div, {
     style: { transform }
-  }, /* @__PURE__ */ import_react109.default.createElement(Section3.Toggle, null)), /* @__PURE__ */ import_react109.default.createElement(Section3.Title, null, /* @__PURE__ */ import_react109.default.createElement(LineClamp2, {
+  }, /* @__PURE__ */ import_react109.default.createElement(Section3.Toggle, null)), /* @__PURE__ */ import_react109.default.createElement(Section3.Title, {
+    id: titleId
+  }, /* @__PURE__ */ import_react109.default.createElement(LineClamp2, {
     lines: 1
   }, title), props.tag && /* @__PURE__ */ import_react109.default.createElement(TagLabel, __spreadValues({}, props.tag)), props.badge && /* @__PURE__ */ import_react109.default.createElement(Chip2, {
     text: props.badge
@@ -13413,12 +13595,14 @@ var Section4 = (props) => {
   }, /* @__PURE__ */ import_react109.default.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ import_react109.default.createElement(Button.Icon, {
     "aria-label": menuAriaLabel,
     icon: import_more5.default
-  })), menu)), props.actions && (0, import_castArray4.default)(props.actions).filter(Boolean).map((action) => renderAction({ kind: "secondary", action })), props.switch && /* @__PURE__ */ import_react109.default.createElement(Switch2, __spreadValues({}, props.switch)), props.select && /* @__PURE__ */ import_react109.default.createElement(SelectBase, __spreadValues({}, props.select)))), /* @__PURE__ */ import_react109.default.createElement(import_web4.animated.div, {
+  })), menu)), props.actions && (0, import_castArray4.default)(props.actions).filter(Boolean).map((action) => renderAction({ kind: "secondary", action })), props.switch && /* @__PURE__ */ import_react109.default.createElement(Switch2, __spreadValues({}, props.switch)), props.select && /* @__PURE__ */ import_react109.default.createElement(SelectBase, __spreadValues({
+    "aria-labelledby": titleId
+  }, props.select)))), /* @__PURE__ */ import_react109.default.createElement(import_web4.animated.div, {
     className: tw(`h-[1px]`),
     style: { backgroundColor }
   })), /* @__PURE__ */ import_react109.default.createElement(import_web4.animated.div, {
     id: regionId,
-    "aria-hidden": isCollapsed ? true : void 0,
+    "aria-hidden": _collapsible ? isCollapsed ? true : void 0 : void 0,
     style: spring,
     className: tw({ "overflow-hidden": _collapsible })
   }, /* @__PURE__ */ import_react109.default.createElement("div", {
@@ -13639,7 +13823,7 @@ Stepper2.Step = Step2;
 
 // src/molecules/SwitchGroup/SwitchGroup.tsx
 var import_react113 = __toESM(require("react"));
-var import_utils26 = require("@react-aria/utils");
+var import_utils27 = require("@react-aria/utils");
 var SwitchGroup = (_a) => {
   var _b = _a, {
     value,
@@ -13661,7 +13845,7 @@ var SwitchGroup = (_a) => {
   if (value !== void 0 && value !== selectedItems) {
     setSelectedItems(value);
   }
-  const errorMessageId = (0, import_utils26.useId)();
+  const errorMessageId = (0, import_utils27.useId)();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const labelControlProps = getLabelControlProps(props);
   const handleChange = (e) => {
@@ -13705,8 +13889,8 @@ SwitchGroup.Skeleton.displayName = "SwitchGroup.Skeleton";
 
 // src/molecules/Textarea/Textarea.tsx
 var import_react114 = __toESM(require("react"));
-var import_utils28 = require("@react-aria/utils");
-var import_omit14 = __toESM(require("lodash/omit"));
+var import_utils29 = require("@react-aria/utils");
+var import_omit15 = __toESM(require("lodash/omit"));
 var import_toString2 = __toESM(require("lodash/toString"));
 var TextareaBase = import_react114.default.forwardRef(
   (_a, ref) => {
@@ -13725,12 +13909,12 @@ TextareaBase.Skeleton = () => /* @__PURE__ */ import_react114.default.createElem
 var Textarea = import_react114.default.forwardRef((props, ref) => {
   var _a, _b, _c;
   const [value, setValue] = (0, import_react114.useState)((_b = (_a = props.value) != null ? _a : props.defaultValue) != null ? _b : "");
-  const defaultId = (0, import_utils28.useId)();
+  const defaultId = (0, import_utils29.useId)();
   const id = (_c = props.id) != null ? _c : defaultId;
-  const errorMessageId = (0, import_utils28.useId)();
+  const errorMessageId = (0, import_utils29.useId)();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const _d = getLabelControlProps(props), { "data-testid": dataTestId } = _d, labelControlProps = __objRest(_d, ["data-testid"]);
-  const baseProps = (0, import_omit14.default)(props, Object.keys(labelControlProps));
+  const baseProps = (0, import_omit15.default)(props, Object.keys(labelControlProps));
   return /* @__PURE__ */ import_react114.default.createElement(LabelControl, __spreadProps(__spreadValues({
     id: `${id}-label`,
     htmlFor: id,