@aivenio/aquarium 1.46.0 → 1.48.0

package/dist/system.mjs

@@ -4622,7 +4622,7 @@ __export(molecules_exports, {
   Avatar: () => Avatar,
   AvatarStack: () => AvatarStack,
   Badge: () => Badge,
-  Banner: () => Banner2,
+  Banner: () => Banner4,
   BorderBox: () => BorderBox,
   Box: () => Box,
   Breadcrumbs: () => Breadcrumbs,
@@ -4749,8 +4749,8 @@ import {
 
 // src/utils/tailwind.ts
 import originalClassNames from "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) {
@@ -4894,14 +4894,13 @@ var Group = React2.forwardRef((_a, ref) => {
 });
 var Item = React2.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__ */ React2.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
       })
     }, props), /* @__PURE__ */ React2.createElement("span", {
       className: tw("grow flex gap-x-3")
@@ -4957,8 +4956,8 @@ var Select = {
 };
 
 // src/molecules/Alert/Alert.tsx
-import React18 from "react";
-import { useId } from "@react-aria/utils";
+import React19 from "react";
+import { useId as useId2 } from "@react-aria/utils";
 import omit from "lodash/omit";
 
 // src/molecules/Button/Button.tsx
@@ -6924,8 +6923,9 @@ var SecondaryDropdownButton = React15.forwardRef((props, ref) => /* @__PURE__ */
 SecondaryDropdownButton.displayName = "Button.SecondaryDropdown";
 Button.SecondaryDropdown = SecondaryDropdownButton;
 
-// src/atoms/Alert/Alert.tsx
+// src/molecules/Typography/Typography.tsx
 import React17 from "react";
+import classNames3 from "classnames";
 
 // src/atoms/Typography/Typography.tsx
 var import_resolveTheme = __toESM(require_resolveTheme());
@@ -6960,7 +6960,148 @@ var Typography = (_a) => {
   }, rest), children);
 };
 
+// src/molecules/Typography/Typography.tsx
+var Typography2 = (props) => /* @__PURE__ */ React17.createElement(Typography, __spreadValues({}, props));
+Typography2.displayName = "Typography";
+Typography2.LargeHeading = (_a) => {
+  var _b = _a, { htmlTag = "h1" } = _b, props = __objRest(_b, ["htmlTag"]);
+  return /* @__PURE__ */ React17.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__ */ React17.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__ */ React17.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__ */ React17.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__ */ React17.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__ */ React17.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__ */ React17.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__ */ React17.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__ */ React17.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__ */ React17.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__ */ React17.createElement("strong", __spreadValues({
+    className: classNames3(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__ */ React17.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__ */ React17.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__ */ React17.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__ */ React17.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__ */ React17.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__ */ React17.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+    htmlTag,
+    variant: "small-strong"
+  }));
+};
+Typography2.SmallTextBold.displayName = "Typography.SmallTextBold";
+
 // src/atoms/Alert/Alert.tsx
+import React18 from "react";
+import { useId } from "@react-aria/utils";
 var import_cross2 = __toESM(require_cross());
 var import_error2 = __toESM(require_error());
 var import_infoSign2 = __toESM(require_infoSign());
@@ -6996,7 +7137,7 @@ var Alert = (_a) => {
     "type",
     "dense"
   ]);
-  return /* @__PURE__ */ React17.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React18.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", {
@@ -7013,7 +7154,7 @@ var Alert = (_a) => {
 };
 Alert.Title = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React17.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React18.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
     variant: "default-strong",
     color: "grey-80",
     className: classNames(tw("col-start-2"), className)
@@ -7021,7 +7162,7 @@ Alert.Title = (_a) => {
 };
 Alert.Description = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React17.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React18.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
     variant: "small",
     color: "grey-60",
     className: classNames(tw("col-start-2"), className)
@@ -7029,15 +7170,15 @@ Alert.Description = (_a) => {
 };
 Alert.Actions = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React17.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React18.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__ */ React17.createElement("div", {
+  return /* @__PURE__ */ React18.createElement("div", {
     className: tw("h-[20px] col-start-1 row-start-1", { "self-start": !dense })
-  }, /* @__PURE__ */ React17.createElement(Icon, __spreadProps(__spreadValues({}, rest), {
+  }, /* @__PURE__ */ React18.createElement(Icon, __spreadProps(__spreadValues({}, rest), {
     icon: alertTypes[type].icon,
     color: alertTypes[type].color,
     fontSize: 20
@@ -7045,19 +7186,129 @@ Alert.Icon = (_a) => {
 };
 Alert.Dismiss = (_a) => {
   var _b = _a, { type } = _b, rest = __objRest(_b, ["type"]);
-  return /* @__PURE__ */ React17.createElement("div", {
+  return /* @__PURE__ */ React18.createElement("div", {
     className: tw("h-[20px] col-start-3 row-start-1")
-  }, /* @__PURE__ */ React17.createElement(IconButton, __spreadProps(__spreadValues({}, rest), {
+  }, /* @__PURE__ */ React18.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__ */ React18.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__ */ React18.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__ */ React18.createElement("div", {
+    className: tw("h-[20px] absolute right-4 top-[18px]")
+  }, /* @__PURE__ */ React18.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 = useId();
+  return /* @__PURE__ */ React18.createElement("svg", __spreadValues({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 120,
+    height: 48,
+    fill: "none"
+  }, props), /* @__PURE__ */ React18.createElement("g", {
+    clipPath: `url(#${clipPathId})`
+  }, /* @__PURE__ */ React18.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__ */ React18.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__ */ React18.createElement("defs", null, /* @__PURE__ */ React18.createElement("clipPath", {
+    id: clipPathId
+  }, /* @__PURE__ */ React18.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 = useId();
+  return /* @__PURE__ */ React18.createElement("svg", __spreadValues({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 120,
+    height: 48,
+    fill: "none"
+  }, props), /* @__PURE__ */ React18.createElement("g", {
+    clipPath: `url(#${clipPathId})`
+  }, /* @__PURE__ */ React18.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__ */ React18.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__ */ React18.createElement("defs", null, /* @__PURE__ */ React18.createElement("clipPath", {
+    id: clipPathId
+  }, /* @__PURE__ */ React18.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__ */ React19.createElement(Alert.Actions, null, !isLink(action) && /* @__PURE__ */ React19.createElement(Button.Ghost, __spreadValues({
+  dense
+}, omit(action, "text")), action.text), isLink(action) && /* @__PURE__ */ React19.createElement(Button.ExternalLink, __spreadValues({
+  dense,
+  kind: "ghost"
+}, omit(action, "text")), action.text));
 var Alert2 = ({
   description,
   type,
@@ -7066,36 +7317,51 @@ var Alert2 = ({
   children,
   action
 }) => {
-  const descriptionID = useId();
-  const titleID = useId();
-  return /* @__PURE__ */ React18.createElement(Alert, {
+  const descriptionID = useId2();
+  const titleID = useId2();
+  return /* @__PURE__ */ React19.createElement(Alert, {
     className: "Aquarium-Alert",
     type,
     dense: Boolean(title),
     "aria-describedby": descriptionID,
     "aria-labelledby": title ? titleID : void 0
-  }, /* @__PURE__ */ React18.createElement(Alert.Icon, {
+  }, /* @__PURE__ */ React19.createElement(Alert.Icon, {
     type,
     dense: Boolean(title)
-  }), title && /* @__PURE__ */ React18.createElement(Alert.Title, {
+  }), title && /* @__PURE__ */ React19.createElement(Alert.Title, {
     id: titleID
-  }, title), /* @__PURE__ */ React18.createElement(Alert.Description, {
+  }, title), /* @__PURE__ */ React19.createElement(Alert.Description, {
     id: descriptionID
-  }, children || description), action && /* @__PURE__ */ React18.createElement(Alert.Actions, null, !isLink(action) && /* @__PURE__ */ React18.createElement(Button.Ghost, __spreadValues({
-    dense: true
-  }, omit(action, "text")), action.text), isLink(action) && /* @__PURE__ */ React18.createElement(Button.ExternalLink, __spreadValues({
-    dense: true,
-    kind: "ghost"
-  }, omit(action, "text")), action.text)), onDismiss && /* @__PURE__ */ React18.createElement(Alert.Dismiss, {
+  }, children || description), renderActions(action, true), onDismiss && /* @__PURE__ */ React19.createElement(Alert.Dismiss, {
     onClick: onDismiss
   }));
 };
+var Banner2 = ({ type, title, children, action, onDismiss }) => {
+  const descriptionID = useId2();
+  const titleID = useId2();
+  return /* @__PURE__ */ React19.createElement(Alert.Banner, {
+    className: "Aquarium-Alert.Banner",
+    type,
+    "aria-describedby": descriptionID,
+    "aria-labelledby": title ? titleID : void 0
+  }, /* @__PURE__ */ React19.createElement(Alert.Banner.Content, null, /* @__PURE__ */ React19.createElement(Typography2.Default, null, /* @__PURE__ */ React19.createElement(Typography2.Strong, null, title), children && " ", children), renderActions(action)), /* @__PURE__ */ React19.createElement(Alert.Banner.IllustrationLeft, {
+    type,
+    className: "absolute left-0 top-0 bottom-0 h-full z-0"
+  }), /* @__PURE__ */ React19.createElement(Alert.Banner.IllustrationRight, {
+    type,
+    className: "absolute right-0 top-0 bottom-0 h-full z-0"
+  }), onDismiss && /* @__PURE__ */ React19.createElement(Alert.Banner.Dismiss, {
+    onClick: onDismiss
+  }));
+};
+Alert2.Banner = Banner2;
+Alert2.Banner.displayName = "Alert.Banner";
 
 // src/molecules/Avatar/Avatar.tsx
-import React20 from "react";
+import React21 from "react";
 
 // src/molecules/Skeleton/Skeleton.tsx
-import React19 from "react";
+import React20 from "react";
 import isNumber from "lodash/isNumber";
 import isUndefined7 from "lodash/isUndefined";
 var Skeleton = (_a) => {
@@ -7120,7 +7386,7 @@ var Skeleton = (_a) => {
     width: isNumber(width) ? `${width}px` : width,
     height: isNumber(height) ? `${height}px` : height
   };
-  return /* @__PURE__ */ React19.createElement("div", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React20.createElement("div", __spreadProps(__spreadValues({
     "aria-label": "Loading..."
   }, rest), {
     style: __spreadValues(__spreadValues({}, styles), style),
@@ -7140,22 +7406,24 @@ var Skeleton = (_a) => {
 };
 
 // src/molecules/Avatar/Avatar.tsx
-var AvatarStack = ({ images }) => /* @__PURE__ */ React20.createElement(Box, {
+var AvatarStack = ({ images }) => /* @__PURE__ */ React21.createElement(Box, {
   display: "flex",
   className: tw("[&>*:not(:first-child)]:-ml-3")
 }, images.map(
-  (image, index) => image ? /* @__PURE__ */ React20.createElement(Avatar, {
+  (image, index) => image ? /* @__PURE__ */ React21.createElement(Avatar, {
     key: image != null ? image : index,
-    image
-  }) : /* @__PURE__ */ React20.createElement(Avatar.Skeleton, {
+    image,
+    imageAlt: ""
+  }) : /* @__PURE__ */ React21.createElement(Avatar.Skeleton, {
     key: image != null ? image : index
   })
 ));
-var Avatar = ({ image }) => /* @__PURE__ */ React20.createElement("img", {
+var Avatar = ({ image, imageAlt = "" }) => /* @__PURE__ */ React21.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__ */ React20.createElement(Skeleton, {
+var AvatarSkeleton = () => /* @__PURE__ */ React21.createElement(Skeleton, {
   height: 32,
   width: 32,
   className: tw("rounded-full")
@@ -7164,12 +7432,12 @@ Avatar.Skeleton = AvatarSkeleton;
 Avatar.Skeleton.displayName = "Avatar.Skeleton";
 
 // src/molecules/Badge/Badge.tsx
-import React21 from "react";
+import React22 from "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__ */ React21.createElement("span", __spreadProps(__spreadValues({}, rest), {
+    return /* @__PURE__ */ React22.createElement("span", __spreadProps(__spreadValues({}, rest), {
       className: classNames(
         tw("inline-block text-center", {
           "rounded-full": type === "default" || type === "chip",
@@ -7184,7 +7452,7 @@ var createBadge = (type, displayName) => {
         }),
         "Aquarium-Badge"
       )
-    }), /* @__PURE__ */ React21.createElement("span", {
+    }), /* @__PURE__ */ React22.createElement("span", {
       className: classNames(
         textClassname,
         tw("inline-block", {
@@ -7195,7 +7463,7 @@ var createBadge = (type, displayName) => {
     }, valueStr));
   };
   Component.displayName = displayName;
-  Component.Skeleton = () => /* @__PURE__ */ React21.createElement(Skeleton, {
+  Component.Skeleton = () => /* @__PURE__ */ React22.createElement(Skeleton, {
     height: 16,
     width: 16,
     display: "inline-block",
@@ -7205,15 +7473,15 @@ var createBadge = (type, displayName) => {
   return Component;
 };
 var NotificationBadge = ({ children, top = "-2px", right = "-2px" }) => {
-  return /* @__PURE__ */ React21.createElement("div", {
+  return /* @__PURE__ */ React22.createElement("div", {
     className: tw("relative inline-flex")
-  }, children, /* @__PURE__ */ React21.createElement("span", {
+  }, children, /* @__PURE__ */ React22.createElement("span", {
     style: { top, right },
     className: tw("absolute rounded-full w-[6px] h-[6px] bg-error-70")
   }));
 };
 var DotBadge = ({ dense = false }) => {
-  return /* @__PURE__ */ React21.createElement("span", {
+  return /* @__PURE__ */ React22.createElement("span", {
     className: tw("rounded-full bg-current", {
       "w-[6px] h-[6px]": dense,
       "w-[9px] h-[9px]": !dense
@@ -7229,16 +7497,16 @@ var TabBadge = createBadge("tab", "TabBadge");
 var ChipBadge = createBadge("chip", "ChipBadge");
 
 // src/molecules/Banner/Banner.tsx
-import React23 from "react";
+import React24 from "react";
 import omit2 from "lodash/omit";
 
 // src/atoms/Banner/Banner.tsx
-import React22 from "react";
+import React23 from "react";
 var spacing = {
   spacingAroundBanner: "p-6",
   omitSpacingAroundBanner: "-6"
 };
-var Banner = (_a) => {
+var Banner3 = (_a) => {
   var _b = _a, {
     children,
     className,
@@ -7250,7 +7518,7 @@ var Banner = (_a) => {
     "layout",
     "variant"
   ]);
-  return /* @__PURE__ */ React22.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React23.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       className,
       tw(`rounded flex justify-between gap-7 flex-nowrap ${spacing.spacingAroundBanner}`, {
@@ -7261,9 +7529,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__ */ React22.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React23.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
     variant: "subheading",
     color: "grey-100",
     className: classNames(
@@ -7274,16 +7542,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__ */ React22.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React23.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__ */ React22.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React23.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       className,
       tw("flex w-full", {
@@ -7293,24 +7561,24 @@ Banner.ContentContainer = (_a) => {
     )
   }), children);
 };
-Banner.ImageContainer = (_a) => {
+Banner3.ImageContainer = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ React22.createElement(Box, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React23.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__ */ React22.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React23.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__ */ React22.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React23.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       className,
       tw({ "self-start": layout === "vertical", "self-center": layout === "horizontal" })
@@ -7320,40 +7588,41 @@ Banner.DismissContainer = (_a) => {
 
 // src/molecules/Banner/Banner.tsx
 var import_cross3 = __toESM(require_cross());
-var BannerImageSkeleton = () => /* @__PURE__ */ React23.createElement(Skeleton, {
+var BannerImageSkeleton = () => /* @__PURE__ */ React24.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__ */ React23.createElement(Banner, {
+    return /* @__PURE__ */ React24.createElement(Banner3, {
       className: "Aquarium-Banner",
       layout,
       variant
-    }, /* @__PURE__ */ React23.createElement(Banner.ContentContainer, {
+    }, /* @__PURE__ */ React24.createElement(Banner3.ContentContainer, {
       layout
-    }, /* @__PURE__ */ React23.createElement(Banner.Title, {
+    }, /* @__PURE__ */ React24.createElement(Banner3.Title, {
       layout
-    }, title), /* @__PURE__ */ React23.createElement(Banner.Description, {
+    }, title), /* @__PURE__ */ React24.createElement(Banner3.Description, {
       flexGrow: isDismissable ? false : true
-    }, children || description), action && /* @__PURE__ */ React23.createElement(Banner.Actions, {
+    }, children || description), action && /* @__PURE__ */ React24.createElement(Banner3.Actions, {
       layout
-    }, !isLink(action) && /* @__PURE__ */ React23.createElement(Button.Ghost, __spreadValues({
+    }, !isLink(action) && /* @__PURE__ */ React24.createElement(Button.Ghost, __spreadValues({
       dense: true
-    }, omit2(action, "text")), action.text), isLink(action) && /* @__PURE__ */ React23.createElement(Button.ExternalLink, __spreadValues({
+    }, omit2(action, "text")), action.text), isLink(action) && /* @__PURE__ */ React24.createElement(Button.ExternalLink, __spreadValues({
       dense: true,
       kind: "ghost"
-    }, omit2(action, "text")), action.text))), (props.layout === "vertical" || props.layout === void 0) && props.image !== void 0 && /* @__PURE__ */ React23.createElement(Banner.ImageContainer, null, props.image ? /* @__PURE__ */ React23.createElement("img", {
+    }, omit2(action, "text")), action.text))), (props.layout === "vertical" || props.layout === void 0) && props.image !== void 0 && /* @__PURE__ */ React24.createElement(Banner3.ImageContainer, null, props.image ? /* @__PURE__ */ React24.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__ */ React23.createElement(BannerImageSkeleton, null)), isDismissable && /* @__PURE__ */ React23.createElement(Banner.DismissContainer, {
+    }) : /* @__PURE__ */ React24.createElement(BannerImageSkeleton, null)), isDismissable && /* @__PURE__ */ React24.createElement(Banner3.DismissContainer, {
       layout
-    }, /* @__PURE__ */ React23.createElement(Button.Icon, {
+    }, /* @__PURE__ */ React24.createElement(Button.Icon, {
       type: "button",
       tooltip: "Dismiss",
       icon: import_cross3.default,
@@ -7363,36 +7632,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
-import React24 from "react";
-import classNames3 from "classnames";
+import React25 from "react";
+import classNames4 from "classnames";
 var import_slash2 = __toESM(require_slash());
 var Breadcrumbs = (props) => {
   const { children, className } = props;
-  const crumbs = React24.Children.toArray(children).filter(
+  const crumbs = React25.Children.toArray(children).filter(
     (c) => Boolean(c)
   );
-  return /* @__PURE__ */ React24.createElement("nav", {
-    className: classNames3("Aquarium-Breadcrumbs", className),
+  return /* @__PURE__ */ React25.createElement("nav", {
+    className: classNames4("Aquarium-Breadcrumbs", className),
     "aria-label": "Breadcrumbs"
-  }, /* @__PURE__ */ React24.createElement("ol", {
+  }, /* @__PURE__ */ React25.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__ */ React24.createElement("li", {
+    return /* @__PURE__ */ React25.createElement("li", {
       key: index,
       className: tw("flex flex-row items-center")
-    }, !!index && /* @__PURE__ */ React24.createElement(Icon, {
+    }, !!index && /* @__PURE__ */ React25.createElement(Icon, {
       "aria-hidden": true,
       className: tw("mx-2 text-grey-30"),
       icon: import_slash2.default
-    }), !isLast && crumb, isLast && /* @__PURE__ */ React24.createElement(ActiveCrumb, {
+    }), !isLast && crumb, isLast && /* @__PURE__ */ React25.createElement(ActiveCrumb, {
       "aria-disabled": true,
       "aria-current": "page",
       icon: crumb.props.icon
@@ -7400,20 +7669,20 @@ var Breadcrumbs = (props) => {
   })));
 };
 var asCrumb = (Component, displayName, options = { isActive: false }) => {
-  const Crumb2 = React24.forwardRef((_a, ref) => {
+  const Crumb2 = React25.forwardRef((_a, ref) => {
     var _b = _a, { icon, children } = _b, rest = __objRest(_b, ["icon", "children"]);
-    return /* @__PURE__ */ React24.createElement(Component, __spreadProps(__spreadValues({
+    return /* @__PURE__ */ React25.createElement(Component, __spreadProps(__spreadValues({
       ref
     }, rest), {
       role: "link"
-    }), /* @__PURE__ */ React24.createElement("span", {
-      className: classNames3(
+    }), /* @__PURE__ */ React25.createElement("span", {
+      className: classNames4(
         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__ */ React24.createElement(Icon, {
+    }, icon && /* @__PURE__ */ React25.createElement(Icon, {
       icon
     }), children));
   });
@@ -7429,16 +7698,16 @@ import React32, { useRef as useRef3 } from "react";
 import { useButton as useButton2 } from "@react-aria/button";
 
 // src/molecules/Chip/Chip.tsx
-import React26 from "react";
-import classNames4 from "classnames";
+import React27 from "react";
+import classNames5 from "classnames";
 import isNumber2 from "lodash/isNumber";
 
 // src/atoms/Chip/Chip.tsx
-import React25 from "react";
-var Container = React25.forwardRef(
+import React26 from "react";
+var Container = React26.forwardRef(
   (_a, ref) => {
     var _b = _a, { dense = false, className, children } = _b, rest = __objRest(_b, ["dense", "className", "children"]);
-    return /* @__PURE__ */ React25.createElement("span", __spreadValues({
+    return /* @__PURE__ */ React26.createElement("span", __spreadValues({
       ref,
       className: classNames(
         tw("inline-flex items-center rounded-sm transition whitespace-nowrap", {
@@ -7492,184 +7761,68 @@ var Chip2 = (_a) => {
     "badge",
     "onClose"
   ]);
-  return /* @__PURE__ */ React26.createElement(Chip.Container, __spreadValues({
+  return /* @__PURE__ */ React27.createElement(Chip.Container, __spreadValues({
     dense,
-    className: classNames4(
+    className: classNames5(
       "Aquarium-Chip",
       tw({
         "bg-grey-0 text-grey-70": !locked,
         "bg-grey-5 text-grey-40": locked
       })
     )
-  }, rest), icon && /* @__PURE__ */ React26.createElement(InlineIcon, {
+  }, rest), icon && /* @__PURE__ */ React27.createElement(InlineIcon, {
     icon
-  }), text, isNumber2(badge) && /* @__PURE__ */ React26.createElement(ChipBadge, {
+  }), text, isNumber2(badge) && /* @__PURE__ */ React27.createElement(ChipBadge, {
     dense,
     value: badge,
     textClassname: tw("text-grey-50")
-  }), onClose && /* @__PURE__ */ React26.createElement(InlineIcon, {
+  }), onClose && /* @__PURE__ */ React27.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__ */ React26.createElement(InlineIcon, {
+  }), locked && /* @__PURE__ */ React27.createElement(InlineIcon, {
     icon: import_lock2.default
   }));
 };
-var ChipSkeleton = ({ dense = false, width = dense ? 34 : 56 }) => /* @__PURE__ */ React26.createElement(Skeleton, {
+var ChipSkeleton = ({ dense = false, width = dense ? 34 : 56 }) => /* @__PURE__ */ React27.createElement(Skeleton, {
   width,
   height: dense ? 20 : 28
 });
 Chip2.Skeleton = ChipSkeleton;
 Chip2.Skeleton.displayName = "Chip.Skeleton";
-var StatusChip = React26.forwardRef(
+var StatusChip = React27.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__ */ React26.createElement(Chip.Container, __spreadProps(__spreadValues({
+    return /* @__PURE__ */ React27.createElement(Chip.Container, __spreadProps(__spreadValues({
       ref,
       role: "status",
       "aria-label": text ? text.toString() : void 0,
       dense
     }, rest), {
       className: getStatusClassNames(status)
-    }), badge === true && /* @__PURE__ */ React26.createElement(Badge.Dot, {
+    }), badge === true && /* @__PURE__ */ React27.createElement(Badge.Dot, {
       dense
-    }), icon && /* @__PURE__ */ React26.createElement(InlineIcon, {
+    }), icon && /* @__PURE__ */ React27.createElement(InlineIcon, {
       icon
-    }), text, badge && typeof badge === "number" && /* @__PURE__ */ React26.createElement(Badge, {
+    }), text, badge && typeof badge === "number" && /* @__PURE__ */ React27.createElement(Badge, {
       dense,
       value: badge
     }));
   }
 );
-var ChipContainer = ({ dense, children }) => /* @__PURE__ */ React26.createElement("div", {
+var ChipContainer = ({ dense, children }) => /* @__PURE__ */ React27.createElement("div", {
   className: tw("flex items-center", {
     "gap-x-3": !dense,
     "gap-x-2": Boolean(dense)
   })
-}, React26.Children.map(
+}, React27.Children.map(
   children,
-  (child) => isComponentType(child, Chip2) || isComponentType(child, StatusChip) || isComponentType(child, ChipSkeleton) ? React26.cloneElement(child, { dense }) : void 0
+  (child) => isComponentType(child, Chip2) || isComponentType(child, StatusChip) || isComponentType(child, ChipSkeleton) ? React27.cloneElement(child, { dense }) : void 0
 ));
 
-// src/molecules/Typography/Typography.tsx
-import React27 from "react";
-var Typography2 = (props) => /* @__PURE__ */ React27.createElement(Typography, __spreadValues({}, props));
-Typography2.LargeHeading = (_a) => {
-  var _b = _a, { htmlTag = "h1" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ React27.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__ */ React27.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__ */ React27.createElement(Typography, __spreadProps(__spreadValues({}, props), {
-    htmlTag,
-    variant: "subheading"
-  }));
-};
-Typography2.LargeStrong = (_a) => {
-  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ React27.createElement(Typography, __spreadProps(__spreadValues({}, props), {
-    htmlTag,
-    variant: "large-strong"
-  }));
-};
-Typography2.Large = (_a) => {
-  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ React27.createElement(Typography, __spreadProps(__spreadValues({}, props), {
-    htmlTag,
-    variant: "large"
-  }));
-};
-Typography2.DefaultStrong = (_a) => {
-  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ React27.createElement(Typography, __spreadProps(__spreadValues({}, props), {
-    htmlTag,
-    variant: "default-strong"
-  }));
-};
-Typography2.Default = (_a) => {
-  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ React27.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__ */ React27.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__ */ React27.createElement(Typography, __spreadProps(__spreadValues({}, props), {
-    htmlTag,
-    variant: "small-strong"
-  }));
-};
-Typography2.Small = (_a) => {
-  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ React27.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__ */ React27.createElement(Typography, __spreadProps(__spreadValues({}, props), {
-    htmlTag,
-    variant: "caption"
-  }));
-};
-Typography2.LargeText = (_a) => {
-  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ React27.createElement(Typography, __spreadProps(__spreadValues({}, props), {
-    htmlTag,
-    variant: "large-strong"
-  }));
-};
-Typography2.MediumText = (_a) => {
-  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ React27.createElement(Typography, __spreadProps(__spreadValues({}, props), {
-    htmlTag,
-    variant: "default-strong"
-  }));
-};
-Typography2.Text = (_a) => {
-  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ React27.createElement(Typography, __spreadProps(__spreadValues({}, props), {
-    htmlTag,
-    variant: "default"
-  }));
-};
-Typography2.SmallText = (_a) => {
-  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ React27.createElement(Typography, __spreadProps(__spreadValues({}, props), {
-    htmlTag,
-    variant: "small"
-  }));
-};
-Typography2.SmallTextBold = (_a) => {
-  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ React27.createElement(Typography, __spreadProps(__spreadValues({}, props), {
-    htmlTag,
-    variant: "small-strong"
-  }));
-};
-
 // src/atoms/Card/Card.tsx
 import React29 from "react";
 import isNumber3 from "lodash/isNumber";
@@ -7891,7 +8044,7 @@ var Card2 = ({
   chips = [],
   icons = [],
   image,
-  imageAlt,
+  imageAlt = "",
   imageHeight,
   color,
   action,
@@ -7997,7 +8150,7 @@ CardImage.Skeleton = CardImageSkeleton;
 
 // src/molecules/Carousel/Carousel.tsx
 import React33, { useEffect as useEffect4, useLayoutEffect, useRef as useRef4, useState as useState2 } from "react";
-import classNames5 from "classnames";
+import classNames6 from "classnames";
 var import_chevronLeft2 = __toESM(require_chevronLeft());
 var import_chevronRight2 = __toESM(require_chevronRight());
 var Carousel = ({
@@ -8059,7 +8212,7 @@ var Carousel = ({
     }
   };
   return items.length > 0 ? /* @__PURE__ */ React33.createElement("div", {
-    className: classNames5("Aquarium-Carousel", tw("w-full flex flex-col")),
+    className: classNames6("Aquarium-Carousel", tw("w-full flex flex-col")),
     ref: containerRef
   }, containerRef !== null && /* @__PURE__ */ React33.createElement("ul", {
     ref: scrollbarContainerRef,
@@ -8256,7 +8409,7 @@ Checkbox2.Skeleton.displayName = "Checkbox.Skeleton";
 
 // src/molecules/CheckboxGroup/CheckboxGroup.tsx
 import React43, { useState as useState3 } from "react";
-import { useId as useId2 } from "@react-aria/utils";
+import { useId as useId3 } from "@react-aria/utils";
 
 // src/atoms/InputGroup/InputGroup.tsx
 import React38 from "react";
@@ -8417,7 +8570,7 @@ var FormControl = ({ className, inline, children }) => {
 
 // src/utils/form/HelperText/HelperText.tsx
 import React41 from "react";
-import classNames6 from "classnames";
+import classNames7 from "classnames";
 import isNumber4 from "lodash/isNumber";
 
 // src/utils/form/CharCounter/CharCounter.tsx
@@ -8473,7 +8626,7 @@ var HelperText = ({
   })));
 };
 var Skeleton2 = ({ className, children }) => /* @__PURE__ */ React41.createElement("div", {
-  className: classNames6(className, "h-[25px]")
+  className: classNames7(className, "h-[25px]")
 }, children);
 HelperText.Skeleton = Skeleton2;
 HelperText.Skeleton.displayName = "HelperText.Skeleton";
@@ -8636,7 +8789,7 @@ var CheckboxGroup = (_a) => {
   if (value !== void 0 && value !== selectedItems) {
     setSelectedItems(value);
   }
-  const errorMessageId = useId2();
+  const errorMessageId = useId3();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const labelControlProps = getLabelControlProps(props);
   const handleChange = (e) => {
@@ -8713,7 +8866,7 @@ var ChoiceChip = (_a) => {
 // src/molecules/Combobox/Combobox.tsx
 import React47, { useEffect as useEffect6, useRef as useRef5, useState as useState5 } from "react";
 import { ariaHideOutside } from "@react-aria/overlays";
-import { useId as useId3 } from "@react-aria/utils";
+import { useId as useId4 } from "@react-aria/utils";
 import { useCombobox } from "downshift";
 import omit4 from "lodash/omit";
 import { matchSorter } from "match-sorter";
@@ -8979,9 +9132,9 @@ var Combobox = (_a) => {
     "emptyState"
   ]);
   var _a2;
-  const defaultId = useId3();
+  const defaultId = useId4();
   const id = (_a2 = props.id) != null ? _a2 : defaultId;
-  const errorMessageId = useId3();
+  const errorMessageId = useId4();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const labelControlProps = getLabelControlProps(props);
   const baseProps = omit4(props, Object.keys(labelControlProps));
@@ -9039,7 +9192,7 @@ import omit6 from "lodash/omit";
 
 // src/molecules/Input/Input.tsx
 import React50, { forwardRef, useEffect as useEffect7, useImperativeHandle, useState as useState6 } from "react";
-import { useId as useId4 } from "@react-aria/utils";
+import { useId as useId5 } from "@react-aria/utils";
 import omit5 from "lodash/omit";
 import toString from "lodash/toString";
 
@@ -9160,9 +9313,9 @@ var Input2 = React50.forwardRef((_a, ref) => {
       setValue(controlledValue);
     }
   }, [controlledValue]);
-  const defaultId = useId4();
+  const defaultId = useId5();
   const id = (_c = props.id) != null ? _c : defaultId;
-  const errorMessageId = useId4();
+  const errorMessageId = useId5();
   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 = omit5(props, Object.keys(labelControlProps));
@@ -9333,7 +9486,9 @@ var DropdownMenu2 = (_a) => {
   return /* @__PURE__ */ React52.createElement("div", null, /* @__PURE__ */ React52.createElement(PressResponder, __spreadValues({
     ref: triggerRef,
     onPress: () => state.toggle()
-  }, omit6(menuTriggerProps, "id")), /* @__PURE__ */ React52.createElement(TriggerWrapper, null, trigger.props.children)), state.isOpen && /* @__PURE__ */ React52.createElement(PopoverOverlay, {
+  }, omit6(menuTriggerProps, ["id", "aria-expanded"])), /* @__PURE__ */ React52.createElement(TriggerWrapper, {
+    "aria-expanded": menuTriggerProps["aria-expanded"]
+  }, trigger.props.children)), state.isOpen && /* @__PURE__ */ React52.createElement(PopoverOverlay, {
     className: "Aquarium-DropdownMenu",
     triggerRef,
     state,
@@ -9504,7 +9659,7 @@ import clamp from "lodash/clamp";
 
 // src/molecules/Select/Select.tsx
 import React53, { useRef as useRef6, useState as useState7 } from "react";
-import { useId as useId5 } from "@react-aria/utils";
+import { useId as useId6 } from "@react-aria/utils";
 import { useSelect } from "downshift";
 import defaults from "lodash/defaults";
 import isArray from "lodash/isArray";
@@ -9702,9 +9857,9 @@ var Select2 = (_a) => {
     "options"
   ]);
   var _a2;
-  const defaultId = useId5();
+  const defaultId = useId6();
   const id = (_a2 = props.id) != null ? _a2 : defaultId;
-  const errorMessageId = useId5();
+  const errorMessageId = useId6();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const labelProps = getLabelControlProps(props);
   const baseProps = omit7(props, Object.keys(labelProps));
@@ -9772,6 +9927,7 @@ var Pagination = ({
   }, "Items per page "), /* @__PURE__ */ React54.createElement("div", {
     className: tw("max-w-[70px]")
   }, /* @__PURE__ */ React54.createElement(SelectBase, {
+    "aria-label": "Items per page",
     options: pageSizes.map((size) => size.toString()),
     value: pageSize.toString(),
     onChange: (size) => {
@@ -9802,6 +9958,7 @@ var Pagination = ({
   }, /* @__PURE__ */ React54.createElement(Typography2.Small, {
     color: "grey-60"
   }, "Page")), /* @__PURE__ */ React54.createElement(InputBase, {
+    "aria-label": "Page",
     className: classNames(tw("text-center max-w-[40px]"), "no-arrows"),
     type: "number",
     min: 1,
@@ -9901,7 +10058,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({
@@ -9917,6 +10075,7 @@ var Template = ({
     columnGap
   });
   return /* @__PURE__ */ React56.createElement("div", {
+    role,
     className,
     style: __spreadValues({}, styles)
   }, children);
@@ -10063,11 +10222,14 @@ var TableSortCell = (_a) => {
     className: getSortCellIconClassNames(direction === "ascending")
   }))));
 };
+var Caption = ({ children }) => /* @__PURE__ */ React58.createElement(Typography2.Caption, {
+  htmlTag: "caption"
+}, children);
 var Item4 = ({ image, imageAlt, imageSize = 35, title, caption }) => /* @__PURE__ */ React58.createElement("div", {
   className: tw("flex gap-4 items-center")
 }, image && /* @__PURE__ */ React58.createElement("img", {
   src: image,
-  alt: imageAlt,
+  alt: imageAlt != null ? imageAlt : "",
   style: { width: imageSize, height: imageSize }
 }), /* @__PURE__ */ React58.createElement("div", null, title, caption && /* @__PURE__ */ React58.createElement(Typography2.Caption, null, caption)));
 Table.Head = React58.memo(TableHead);
@@ -10076,6 +10238,7 @@ Table.Row = React58.memo(TableRow);
 Table.Cell = React58.memo(TableCell);
 Table.SortCell = React58.memo(TableSortCell);
 Table.SelectCell = React58.memo(TableSelectCell);
+Table.Caption = Caption;
 
 // src/atoms/DataList/DataList.tsx
 var import_chevronDown5 = __toESM(require_chevronDown());
@@ -10101,8 +10264,9 @@ var HeadCell = (_a) => {
     "align",
     "stickyColumn"
   ]);
-  return /* @__PURE__ */ React59.createElement("div", __spreadProps(__spreadValues({}, rest), {
-    role: "cell",
+  return /* @__PURE__ */ React59.createElement("div", __spreadProps(__spreadValues({
+    role: "cell"
+  }, rest), {
     className: classNames(
       cellClassNames,
       getHeadCellClassNames(sticky, stickyColumn),
@@ -10158,7 +10322,7 @@ var SortCell = (_a) => {
   var _b = _a, { children, direction = "none", onClick, sticky } = _b, rest = __objRest(_b, ["children", "direction", "onClick", "sticky"]);
   return /* @__PURE__ */ React59.createElement(HeadCell, __spreadProps(__spreadValues({}, rest), {
     "aria-sort": direction,
-    role: "cell",
+    role: "columnheader",
     sticky
   }), /* @__PURE__ */ React59.createElement("span", {
     className: getSortCellButtonClassNames(rest.align),
@@ -10208,8 +10372,8 @@ var columnIsFieldColumn = (column) => Boolean(column && column.field);
 
 // src/utils/table/useTableSort.tsx
 import React60 from "react";
-var useTableSort = () => {
-  const [sort, setSort] = React60.useState();
+var useTableSort = (defaultSort) => {
+  const [sort, setSort] = React60.useState(defaultSort);
   const handleSortClick = (column) => {
     if (sort && sort.column.headerName === column.headerName) {
       if (sort.direction === "ascending") {
@@ -10245,7 +10409,7 @@ var import_more2 = __toESM(require_more());
 // src/molecules/Accordion/Accordion.tsx
 import React63, { createContext as createContext2, useContext as useContext3, useState as useState9 } from "react";
 import { Icon as Icon2 } from "@iconify/react";
-import { useId as useId6 } from "@react-aria/utils";
+import { useId as useId7 } from "@react-aria/utils";
 import { animated as animated3, useSpring as useSpring2 } from "@react-spring/web";
 import isUndefined8 from "lodash/isUndefined";
 
@@ -10384,10 +10548,12 @@ var AccordionPanel = (_a) => {
       duration: 150
     }
   });
-  return /* @__PURE__ */ React63.createElement(animated3.div, __spreadProps(__spreadValues({}, rest), {
-    role: "region",
+  return /* @__PURE__ */ React63.createElement(animated3.div, __spreadProps(__spreadValues({
+    role: "region"
+  }, rest), {
     id: `${id}-content`,
     "aria-labelledby": `${id}-summary`,
+    "aria-hidden": !isOpen ? "true" : void 0,
     style
   }), /* @__PURE__ */ React63.createElement("div", {
     ref
@@ -10412,7 +10578,7 @@ var AccordionSummary = (_a) => {
 };
 var AccordionContainer = (_a) => {
   var _b = _a, { children, panelId } = _b, rest = __objRest(_b, ["children", "panelId"]);
-  const generatedId = useId6();
+  const generatedId = useId7();
   return /* @__PURE__ */ React63.createElement(PanelContext.Provider, {
     value: panelId != null ? panelId : generatedId
   }, /* @__PURE__ */ React63.createElement("div", __spreadValues({}, rest), children, /* @__PURE__ */ React63.createElement(Divider2, null)));
@@ -10434,13 +10600,14 @@ import React64 from "react";
 var DataListSkeleton = ({ columns = ["1", "2", "2", 52], rows = 5 }) => {
   const columnsAmount = [...Array(typeof columns === "number" ? columns : columns.length).keys()];
   return /* @__PURE__ */ React64.createElement(Template, {
+    role: "table",
     columns
-  }, columnsAmount.map((_, index) => /* @__PURE__ */ React64.createElement(DataList.HeadCell, {
+  }, /* @__PURE__ */ React64.createElement(DataList.Row, null, columnsAmount.map((_, index) => /* @__PURE__ */ React64.createElement(DataList.HeadCell, {
     key: index
   }, /* @__PURE__ */ React64.createElement(Skeleton, {
     width: "100%",
     height: 17.5
-  }))), /* @__PURE__ */ React64.createElement(List2, {
+  })))), /* @__PURE__ */ React64.createElement(List2, {
     items: [...Array(rows).keys()],
     renderItem: (item) => /* @__PURE__ */ React64.createElement(DataList.Row, {
       key: item
@@ -10474,9 +10641,13 @@ var DataList2 = ({
   disabled,
   getGroupRow,
   onGroupToggled,
-  expandedGroupIds
+  expandedGroupIds,
+  defaultSort
 }) => {
-  const [sort, updateSort] = useTableSort();
+  var _a;
+  const defaultSortedColumn = columns.find((c) => c.headerName === (defaultSort == null ? void 0 : defaultSort.headerName));
+  const initialSortState = defaultSortedColumn ? { column: defaultSortedColumn, direction: (_a = defaultSort == null ? void 0 : defaultSort.direction) != null ? _a : "ascending" } : void 0;
+  const [sort, updateSort] = useTableSort(initialSortState);
   const sortedRows = sortRowsBy(rows, sort);
   const groups = group ? isFunction(group) ? group(sortedRows) : groupBy2(sortedRows, group) : void 0;
   const groupKeys = groups ? Object.keys(groups) : void 0;
@@ -10485,21 +10656,25 @@ var DataList2 = ({
   const templateColumns = compact([
     isCollapsible ? 50 : void 0,
     ...columns.map((column) => {
-      var _a;
-      return (_a = column.width) != null ? _a : "auto";
+      var _a2;
+      return (_a2 = column.width) != null ? _a2 : "auto";
     }),
     menu ? "auto" : void 0
   ]);
   const PaginationFooter = React65.useCallback(
     ({ children }) => /* @__PURE__ */ React65.createElement("div", {
-      style: { gridColumn: "1 / -1" }
-    }, children),
+      style: { gridColumn: "1 / -1" },
+      role: "row"
+    }, /* @__PURE__ */ React65.createElement("div", {
+      role: "cell"
+    }, children)),
     []
   );
   return /* @__PURE__ */ React65.createElement(Template, {
     className: "Aquarium-DataList",
-    columns: templateColumns
-  }, isCollapsible && /* @__PURE__ */ React65.createElement(DataList.HeadCell, {
+    columns: templateColumns,
+    role: "table"
+  }, /* @__PURE__ */ React65.createElement(DataList.Row, null, isCollapsible && /* @__PURE__ */ React65.createElement(DataList.HeadCell, {
     align: "left"
   }), columns.map((column) => {
     const content = column.headerTooltip ? /* @__PURE__ */ React65.createElement(Tooltip, {
@@ -10516,7 +10691,7 @@ var DataList2 = ({
   }), menu && /* @__PURE__ */ React65.createElement(DataList.HeadCell, {
     align: "right",
     "aria-label": menuAriaLabel
-  }, menuHeaderName), groups && groupKeys ? /* @__PURE__ */ React65.createElement(List2, {
+  }, menuHeaderName)), groups && groupKeys ? /* @__PURE__ */ React65.createElement(List2, {
     items: sortGroupKeys(groupKeys),
     renderItem: (key) => {
       const groupContent = /* @__PURE__ */ React65.createElement(List2, {
@@ -10581,10 +10756,13 @@ var DataList2 = ({
         key: row.id,
         openPanelId: expandedGroupIds ? expandedGroupIds.find((id) => id === row.id) || null : void 0
       }, content, /* @__PURE__ */ React65.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__ */ React65.createElement("div", {
+        role: "cell"
+      }, details))) : content;
     }
   }));
 };
@@ -10698,6 +10876,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());
@@ -10715,7 +10894,8 @@ var DataTable = (_a) => {
     onAction,
     onMenuOpenChange,
     pagination,
-    disabled
+    disabled,
+    defaultSort
   } = _b, rest = __objRest(_b, [
     "columns",
     "rows",
@@ -10729,9 +10909,13 @@ var DataTable = (_a) => {
     "onAction",
     "onMenuOpenChange",
     "pagination",
-    "disabled"
+    "disabled",
+    "defaultSort"
   ]);
-  const [sort, updateSort] = useTableSort();
+  var _a2;
+  const defaultSortedColumn = columns.find((c) => c.headerName === (defaultSort == null ? void 0 : defaultSort.headerName));
+  const initialSortState = defaultSortedColumn ? { column: defaultSortedColumn, direction: (_a2 = defaultSort == null ? void 0 : defaultSort.direction) != null ? _a2 : "ascending" } : void 0;
+  const [sort, updateSort] = useTableSort(initialSortState);
   const sortedRows = sortRowsBy(rows, sort);
   const amountOfColumns = columns.length + (menu ? 1 : 0);
   const PaginationFooter = React68.useCallback(
@@ -10778,8 +10962,8 @@ var DataTable = (_a) => {
     pagination,
     items: sortedRows,
     renderItem: (row, index) => {
-      var _a2;
-      const isRowDisabled = (_a2 = disabled == null ? void 0 : disabled(row, index, sortedRows)) != null ? _a2 : false;
+      var _a3;
+      const isRowDisabled = (_a3 = disabled == null ? void 0 : disabled(row, index, sortedRows)) != null ? _a3 : false;
       return /* @__PURE__ */ React68.createElement(Table2.Row, {
         key: row.id,
         disabled: isRowDisabled
@@ -10847,7 +11031,7 @@ DataTable.Skeleton = DataListSkeleton;
 import React70 from "react";
 import { useDialog } from "@react-aria/dialog";
 import { Overlay as Overlay2, useModalOverlay } from "@react-aria/overlays";
-import { useId as useId7 } from "@react-aria/utils";
+import { useId as useId8 } from "@react-aria/utils";
 import { useOverlayTriggerState as useOverlayTriggerState2 } from "@react-stately/overlays";
 import omit8 from "lodash/omit";
 
@@ -10996,8 +11180,8 @@ var DialogWrapper = ({
   secondaryAction
 }) => {
   const ref = React70.useRef(null);
-  const labelledBy = useId7();
-  const describedBy = useId7();
+  const labelledBy = useId8();
+  const describedBy = useId8();
   const { dialogProps } = useDialog(
     { "role": "alertdialog", "aria-labelledby": labelledBy, "aria-describedby": describedBy },
     ref
@@ -11034,7 +11218,8 @@ import { PressResponder as PressResponder2, usePress as usePress2 } from "@react
 import { useOverlayTrigger } from "@react-aria/overlays";
 import { mergeProps as mergeProps3 } from "@react-aria/utils";
 import { useOverlayTriggerState as useOverlayTriggerState3 } from "@react-stately/overlays";
-import classNames7 from "classnames";
+import classNames8 from "classnames";
+import omit9 from "lodash/omit";
 
 // src/molecules/Popover/Dialog.tsx
 import React71 from "react";
@@ -11084,9 +11269,10 @@ var Popover2 = (props) => {
     if (isComponentType(child, Popover2.Trigger)) {
       return /* @__PURE__ */ React72.createElement(PressResponder2, __spreadValues({
         ref: triggerRef
-      }, triggerProps), /* @__PURE__ */ React72.createElement(PopoverTriggerWrapper, {
+      }, omit9(triggerProps, "aria-expanded")), /* @__PURE__ */ React72.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)) {
@@ -11097,7 +11283,7 @@ var Popover2 = (props) => {
         isNonModal: !containFocus,
         autoFocus: !containFocus,
         isKeyboardDismissDisabled,
-        className: classNames7("Aquarium-Popover", child.props.className),
+        className: classNames8("Aquarium-Popover", child.props.className),
         offset,
         crossOffset,
         shouldFlip
@@ -11456,7 +11642,7 @@ var LineClamp2 = ({
 
 // src/molecules/Link/Link.tsx
 import React79 from "react";
-import classNames8 from "classnames";
+import classNames9 from "classnames";
 
 // src/atoms/Link/Link.tsx
 import React78 from "react";
@@ -11471,7 +11657,7 @@ var Link = (_a) => {
 var Link2 = (_a) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ React79.createElement(Link, __spreadValues({
-    className: classNames8("Aquarium-Link", className)
+    className: classNames9("Aquarium-Link", className)
   }, props));
 };
 
@@ -11488,6 +11674,7 @@ var ListItem = ({ name, icon, active = false }) => {
     className: `px-4 py-2 rounded-full ${active ? "bg-grey-5" : "hover:bg-grey-0"}`
   }, /* @__PURE__ */ React80.createElement("img", {
     src: icon,
+    alt: "",
     className: "inline mr-4",
     height: 28,
     width: 28
@@ -11498,10 +11685,10 @@ var ListItem = ({ name, icon, active = false }) => {
 import React82 from "react";
 import { useDialog as useDialog3 } from "@react-aria/dialog";
 import { Overlay as Overlay3, useModalOverlay as useModalOverlay2 } from "@react-aria/overlays";
-import { useId as useId8 } from "@react-aria/utils";
+import { useId as useId9 } from "@react-aria/utils";
 import { useOverlayTriggerState as useOverlayTriggerState4 } from "@react-stately/overlays";
 import castArray from "lodash/castArray";
-import omit9 from "lodash/omit";
+import omit10 from "lodash/omit";
 
 // src/molecules/Tabs/Tabs.tsx
 import React81, { useEffect as useEffect9, useLayoutEffect as useLayoutEffect2, useRef as useRef8, useState as useState10 } from "react";
@@ -11828,8 +12015,8 @@ var Modal2 = (_a) => {
 var ModalWrapper = React82.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 = useId8();
-    const describedBy = useId8();
+    const labelledBy = useId9();
+    const describedBy = useId9();
     const { dialogProps } = useDialog3(
       { "role": "dialog", "aria-labelledby": labelledBy, "aria-describedby": describedBy },
       ref
@@ -11859,7 +12046,7 @@ var ModalWrapper = React82.forwardRef(
       }, action), text);
     }), primaryAction && /* @__PURE__ */ React82.createElement(Button.Primary, __spreadValues({
       key: primaryAction.text
-    }, omit9(primaryAction, "text")), primaryAction.text))));
+    }, omit10(primaryAction, "text")), primaryAction.text))));
   }
 );
 var ModalTabs = createTabsComponent(
@@ -11875,10 +12062,10 @@ var ModalTabs = createTabsComponent(
 
 // src/molecules/MultiInput/MultiInput.tsx
 import React84, { useEffect as useEffect10, useRef as useRef9, useState as useState11 } from "react";
-import { useId as useId9 } from "@react-aria/utils";
+import { useId as useId10 } from "@react-aria/utils";
 import castArray2 from "lodash/castArray";
 import identity from "lodash/identity";
-import omit10 from "lodash/omit";
+import omit11 from "lodash/omit";
 
 // src/molecules/MultiInput/InputChip.tsx
 import React83 from "react";
@@ -12105,12 +12292,12 @@ var MultiInput = (props) => {
     var _a2;
     setValue((_a2 = props.value) != null ? _a2 : []);
   }, [JSON.stringify(props.value)]);
-  const defaultId = useId9();
+  const defaultId = useId10();
   const id = (_e = (_d = props.id) != null ? _d : props.name) != null ? _e : defaultId;
-  const errorMessageId = useId9();
+  const errorMessageId = useId10();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const labelControlProps = getLabelControlProps(props);
-  const baseProps = omit10(props, Object.keys(labelControlProps));
+  const baseProps = omit11(props, Object.keys(labelControlProps));
   return /* @__PURE__ */ React84.createElement(LabelControl, __spreadProps(__spreadValues({
     id: `${id}-label`,
     htmlFor: `${id}-input`,
@@ -12138,11 +12325,11 @@ MultiInput.Skeleton.displayName = "MultiInput.Skeleton";
 // src/molecules/MultiSelect/MultiSelect.tsx
 import React85, { useEffect as useEffect11, useRef as useRef10, useState as useState12 } from "react";
 import { ariaHideOutside as ariaHideOutside2 } from "@react-aria/overlays";
-import { useId as useId10 } from "@react-aria/utils";
+import { useId as useId11 } from "@react-aria/utils";
 import { useCombobox as useCombobox2, useMultipleSelection } from "downshift";
 import isEqual from "lodash/isEqual";
 import isNil2 from "lodash/isNil";
-import omit11 from "lodash/omit";
+import omit12 from "lodash/omit";
 import omitBy from "lodash/omitBy";
 import { matchSorter as matchSorter2 } from "match-sorter";
 var MultiSelectBase = (_a) => {
@@ -12365,12 +12552,12 @@ var MultiSelect = (_a) => {
     "emptyState"
   ]);
   var _a2;
-  const defaultId = useId10();
+  const defaultId = useId11();
   const id = (_a2 = props.id) != null ? _a2 : defaultId;
-  const errorMessageId = useId10();
+  const errorMessageId = useId11();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const labelControlProps = getLabelControlProps(props);
-  const baseProps = omit11(props, Object.keys(labelControlProps));
+  const baseProps = omit12(props, Object.keys(labelControlProps));
   return /* @__PURE__ */ React85.createElement(LabelControl, __spreadProps(__spreadValues({
     id: `${id}-label`,
     htmlFor: `${id}-input`,
@@ -12391,8 +12578,8 @@ MultiSelect.Skeleton.displayName = "MultiSelect.Skeleton";
 
 // src/molecules/NativeSelect/NativeSelect.tsx
 import React86 from "react";
-import { useId as useId11 } from "@react-aria/utils";
-import omit12 from "lodash/omit";
+import { useId as useId12 } from "@react-aria/utils";
+import omit13 from "lodash/omit";
 import uniqueId from "lodash/uniqueId";
 var import_caretDown2 = __toESM(require_caretDown());
 var NativeSelectBase = React86.forwardRef(
@@ -12453,12 +12640,12 @@ var NativeSelect = React86.forwardRef(
   (_a, ref) => {
     var _b = _a, { readOnly } = _b, props = __objRest(_b, ["readOnly"]);
     var _a2;
-    const defaultId = useId11();
+    const defaultId = useId12();
     const id = (_a2 = props.id) != null ? _a2 : defaultId;
-    const errorMessageId = useId11();
+    const errorMessageId = useId12();
     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 = omit12(props, Object.keys(labelControlProps));
+    const baseProps = omit13(props, Object.keys(labelControlProps));
     return /* @__PURE__ */ React86.createElement(LabelControl, __spreadProps(__spreadValues({
       id: `${id}-label`,
       htmlFor: id,
@@ -12494,7 +12681,7 @@ NativeSelect.Skeleton.displayName = "NativeSelect.Skeleton";
 
 // src/molecules/Navigation/Navigation.tsx
 import React88 from "react";
-import classNames9 from "classnames";
+import classNames10 from "classnames";
 
 // src/atoms/Navigation/Navigation.tsx
 import React87 from "react";
@@ -12504,7 +12691,7 @@ var Navigation = (_a) => {
     className: classNames(tw("bg-grey-0 h-full"))
   }, /* @__PURE__ */ React87.createElement("ul", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("flex flex-col h-full"), className),
-    role: "menu"
+    role: "menubar"
   }), children));
 };
 var Header = (_a) => {
@@ -12566,7 +12753,7 @@ Navigation.Divider = Divider3;
 var Navigation2 = (_a) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ React88.createElement(Navigation, __spreadValues({
-    className: classNames9("Aquarium-Navigation", className)
+    className: classNames10("Aquarium-Navigation", className)
   }, props));
 };
 var Item6 = (_a) => {
@@ -12674,7 +12861,7 @@ var CommonPageHeader = ({
     gap: "5"
   }, image && /* @__PURE__ */ React90.createElement("img", {
     src: image,
-    alt: imageAlt,
+    alt: imageAlt != null ? imageAlt : "",
     className: tw("w-[56px] h-[56px]")
   }), /* @__PURE__ */ React90.createElement(PageHeader.TitleContainer, null, /* @__PURE__ */ React90.createElement(PageHeader.Title, {
     isSubHeader
@@ -12702,7 +12889,7 @@ PageHeader2.SubHeader.displayName = "PageHeader.SubHeader";
 
 // src/molecules/PopoverDialog/PopoverDialog.tsx
 import React92 from "react";
-import omit13 from "lodash/omit";
+import omit14 from "lodash/omit";
 
 // src/atoms/PopoverDialog/PopoverDialog.tsx
 import React91 from "react";
@@ -12757,11 +12944,11 @@ var PopoverDialog2 = ({ placement, open, title, secondaryAction, primaryAction,
         kind: "secondary-ghost",
         key: secondaryAction.text,
         dense: true
-      }, omit13(secondaryAction, "text")), secondaryAction.text), /* @__PURE__ */ React92.createElement(Popover2.Button, __spreadValues({
+      }, omit14(secondaryAction, "text")), secondaryAction.text), /* @__PURE__ */ React92.createElement(Popover2.Button, __spreadValues({
         kind: "ghost",
         key: primaryAction.text,
         dense: true
-      }, omit13(primaryAction, "text")), primaryAction.text))));
+      }, omit14(primaryAction, "text")), primaryAction.text))));
     }
     return child;
   };
@@ -12909,7 +13096,7 @@ RadioButton2.Skeleton.displayName = "RadioButton.Skeleton";
 
 // src/molecules/RadioButtonGroup/RadioButtonGroup.tsx
 import React96 from "react";
-import { useId as useId12 } from "@react-aria/utils";
+import { useId as useId13 } from "@react-aria/utils";
 var isRadioButton = (c) => {
   return React96.isValidElement(c) && c.type === RadioButton2;
 };
@@ -12935,7 +13122,7 @@ var RadioButtonGroup = (_a) => {
   ]);
   var _a2;
   const [value, setValue] = React96.useState((_a2 = _value != null ? _value : defaultValue) != null ? _a2 : "");
-  const errorMessageId = useId12();
+  const errorMessageId = useId13();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const labelControlProps = getLabelControlProps(props);
   if (_value !== void 0 && _value !== value) {
@@ -12990,7 +13177,7 @@ RadioButtonGroup.Skeleton.displayName = "RadioButtonGroup.Skeleton";
 
 // src/molecules/Section/Section.tsx
 import React101 from "react";
-import { useId as useId13 } from "@react-aria/utils";
+import { useId as useId14 } from "@react-aria/utils";
 import { animated as animated4, useSpring as useSpring3 } from "@react-spring/web";
 import castArray4 from "lodash/castArray";
 import isUndefined9 from "lodash/isUndefined";
@@ -13137,10 +13324,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__ */ React100.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);
@@ -13228,23 +13415,26 @@ var Section4 = (props) => {
     },
     immediate: !_collapsible
   }), { transform, backgroundColor } = _f, spring = __objRest(_f, ["transform", "backgroundColor"]);
-  const toggleId = useId13();
-  const regionId = useId13();
+  const toggleId = useId14();
+  const regionId = useId14();
+  const titleId = useId14();
   return /* @__PURE__ */ React101.createElement(Section3, {
     "aria-label": title,
     className: "Aquarium-Section"
   }, title && /* @__PURE__ */ React101.createElement(React101.Fragment, null, /* @__PURE__ */ React101.createElement(Section3.Header, {
-    collapsible: _collapsible
+    expanded: _collapsible && !isCollapsed
   }, /* @__PURE__ */ React101.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__ */ React101.createElement(animated4.div, {
     style: { transform }
-  }, /* @__PURE__ */ React101.createElement(Section3.Toggle, null)), /* @__PURE__ */ React101.createElement(Section3.Title, null, /* @__PURE__ */ React101.createElement(LineClamp2, {
+  }, /* @__PURE__ */ React101.createElement(Section3.Toggle, null)), /* @__PURE__ */ React101.createElement(Section3.Title, {
+    id: titleId
+  }, /* @__PURE__ */ React101.createElement(LineClamp2, {
     lines: 1
   }, title), props.tag && /* @__PURE__ */ React101.createElement(TagLabel, __spreadValues({}, props.tag)), props.badge && /* @__PURE__ */ React101.createElement(Chip2, {
     text: props.badge
@@ -13260,12 +13450,14 @@ var Section4 = (props) => {
   }, /* @__PURE__ */ React101.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ React101.createElement(Button.Icon, {
     "aria-label": menuAriaLabel,
     icon: import_more5.default
-  })), menu)), props.actions && castArray4(props.actions).filter(Boolean).map((action) => renderAction({ kind: "secondary", action })), props.switch && /* @__PURE__ */ React101.createElement(Switch2, __spreadValues({}, props.switch)), props.select && /* @__PURE__ */ React101.createElement(SelectBase, __spreadValues({}, props.select)))), /* @__PURE__ */ React101.createElement(animated4.div, {
+  })), menu)), props.actions && castArray4(props.actions).filter(Boolean).map((action) => renderAction({ kind: "secondary", action })), props.switch && /* @__PURE__ */ React101.createElement(Switch2, __spreadValues({}, props.switch)), props.select && /* @__PURE__ */ React101.createElement(SelectBase, __spreadValues({
+    "aria-labelledby": titleId
+  }, props.select)))), /* @__PURE__ */ React101.createElement(animated4.div, {
     className: tw(`h-[1px]`),
     style: { backgroundColor }
   })), /* @__PURE__ */ React101.createElement(animated4.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__ */ React101.createElement("div", {
@@ -13486,7 +13678,7 @@ Stepper2.Step = Step2;
 
 // src/molecules/SwitchGroup/SwitchGroup.tsx
 import React105, { useState as useState13 } from "react";
-import { useId as useId14 } from "@react-aria/utils";
+import { useId as useId15 } from "@react-aria/utils";
 var SwitchGroup = (_a) => {
   var _b = _a, {
     value,
@@ -13508,7 +13700,7 @@ var SwitchGroup = (_a) => {
   if (value !== void 0 && value !== selectedItems) {
     setSelectedItems(value);
   }
-  const errorMessageId = useId14();
+  const errorMessageId = useId15();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const labelControlProps = getLabelControlProps(props);
   const handleChange = (e) => {
@@ -13552,8 +13744,8 @@ SwitchGroup.Skeleton.displayName = "SwitchGroup.Skeleton";
 
 // src/molecules/Textarea/Textarea.tsx
 import React106, { useState as useState14 } from "react";
-import { useId as useId15 } from "@react-aria/utils";
-import omit14 from "lodash/omit";
+import { useId as useId16 } from "@react-aria/utils";
+import omit15 from "lodash/omit";
 import toString2 from "lodash/toString";
 var TextareaBase = React106.forwardRef(
   (_a, ref) => {
@@ -13572,12 +13764,12 @@ TextareaBase.Skeleton = () => /* @__PURE__ */ React106.createElement(Skeleton, {
 var Textarea = React106.forwardRef((props, ref) => {
   var _a, _b, _c;
   const [value, setValue] = useState14((_b = (_a = props.value) != null ? _a : props.defaultValue) != null ? _b : "");
-  const defaultId = useId15();
+  const defaultId = useId16();
   const id = (_c = props.id) != null ? _c : defaultId;
-  const errorMessageId = useId15();
+  const errorMessageId = useId16();
   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 = omit14(props, Object.keys(labelControlProps));
+  const baseProps = omit15(props, Object.keys(labelControlProps));
   return /* @__PURE__ */ React106.createElement(LabelControl, __spreadProps(__spreadValues({
     id: `${id}-label`,
     htmlFor: id,
@@ -13863,7 +14055,7 @@ export {
   Avatar,
   AvatarStack,
   Badge,
-  Banner2 as Banner,
+  Banner4 as Banner,
   BorderBox,
   Box,
   Breadcrumbs,