@aivenio/aquarium 1.67.0 → 1.68.0

package/dist/system.cjs

@@ -4711,7 +4711,7 @@ var require_warningSign = __commonJS({
   "src/icons/warningSign.js"(exports) {
     "use strict";
     var data = {
-      "body": '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11 8.25v3.667m0 3.666h.009M9.731 3.567 2.19 16.59c-.418.723-.627 1.084-.596 1.38a.917.917 0 00.372.646c.241.176.659.176 1.493.176h15.08c.834 0 1.251 0 1.492-.176a.917.917 0 00.373-.646c.03-.296-.178-.657-.596-1.38l-7.54-13.023c-.417-.72-.625-1.08-.897-1.2a.917.917 0 00-.745 0c-.271.12-.48.48-.896 1.2Z"/>',
+      "body": '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11 8.25v3.667M11 16l.009-1.5M9.73 3.567 2.191 16.59c-.418.723-.627 1.084-.596 1.38a.917.917 0 00.372.646c.241.176.659.176 1.493.176h15.08c.834 0 1.251 0 1.492-.176a.917.917 0 00.373-.646c.03-.296-.178-.657-.596-1.38l-7.54-13.023c-.417-.72-.625-1.08-.897-1.2a.917.917 0 00-.745 0c-.272.12-.48.48-.897 1.2Z"/>',
       "left": 0,
       "top": 0,
       "width": 22,
@@ -5009,8 +5009,8 @@ var import_react2 = require("@iconify/react");
 
 // src/utils/tailwind.ts
 var import_classnames = __toESM(require("classnames"));
-function cleanClassNames(classNames11) {
-  const tokens = classNames11.split(/\s+/);
+function cleanClassNames(classNames12) {
+  const tokens = classNames12.split(/\s+/);
   return tokens.filter((item) => item).join(" ");
 }
 function tw(classesOrModifiers1, classesOrModifiers2, classesOrModifiers3, classesOrModifiers4, classesOrModifiers5, classesOrModifiers6, classesOrModifiers7, classesOrModifiers8, classesOrModifiers9, classesOrModifiers10) {
@@ -6225,8 +6225,8 @@ var Box = (_a) => {
   const styles = useStyle({
     padding,
     display,
-    color,
-    borderColor: borderColor ? tailwind_theme_default.backgroundColor[borderColor] : "",
+    color: color ? tailwind_theme_default.textColor[color] : "",
+    borderColor: borderColor ? tailwind_theme_default.borderColor[borderColor] : "",
     borderRadius,
     borderWidth,
     justifyContent,
@@ -6268,11 +6268,7 @@ var FlexBox = (props) => /* @__PURE__ */ import_react7.default.createElement(Box
 }, props));
 FlexBox.displayName = "Box.Flex";
 Box.Flex = FlexBox;
-var BorderBox = createSimpleComponent(
-  Box,
-  { className: "rounded border", borderColor: "grey-10" },
-  "BorderBox"
-);
+var BorderBox = createSimpleComponent(Box, { className: "rounded border", borderColor: "muted" }, "BorderBox");
 
 // src/molecules/Spacing/Spacing.tsx
 var Spacing = (_a) => {
@@ -7232,7 +7228,7 @@ var COLOR_CLASSNAMES = {
   "ghost": ghostButtonStyle,
   "text": linkStyle,
   "secondary-ghost": tw(
-    "text-grey-60 active:text-muted focus-visible:text-intense hover:text-intense disabled:text-inactive"
+    "text-default active:text-muted focus-visible:text-intense hover:text-intense disabled:text-inactive"
   )
 };
 var LoadingSpinner = ({ size = "20px" }) => {
@@ -7687,7 +7683,7 @@ Alert.Title = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
   return /* @__PURE__ */ import_react22.default.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
     variant: "default-strong",
-    color: "grey-80",
+    color: "intense",
     className: classNames(tw("col-start-2"), className)
   }), children);
 };
@@ -7695,7 +7691,7 @@ Alert.Description = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
   return /* @__PURE__ */ import_react22.default.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
     variant: "small",
-    color: "grey-60",
+    color: "default",
     className: classNames(tw("col-start-2"), className)
   }), children);
 };
@@ -8071,7 +8067,7 @@ Banner3.Title = (_a) => {
   var _b = _a, { children, className, layout } = _b, rest = __objRest(_b, ["children", "className", "layout"]);
   return /* @__PURE__ */ import_react27.default.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
     variant: "subheading",
-    color: "grey-100",
+    color: "intense",
     className: classNames(
       className,
       tw({
@@ -8306,7 +8302,7 @@ var Chip2 = (_a) => {
       "Aquarium-Chip",
       tw({
         "bg-muted text-default": !locked,
-        "bg-grey-5 text-inactive": locked
+        "bg-muted text-inactive": locked
       })
     )
   }, rest), icon && /* @__PURE__ */ import_react32.default.createElement(InlineIcon, {
@@ -8442,7 +8438,13 @@ var Label = (props) => {
   }), children);
 };
 var ColorHighlight = (_a) => {
-  var _b = _a, { color, className } = _b, rest = __objRest(_b, ["color", "className"]);
+  var _b = _a, {
+    color,
+    className
+  } = _b, rest = __objRest(_b, [
+    "color",
+    "className"
+  ]);
   return /* @__PURE__ */ import_react34.default.createElement(Box, __spreadProps(__spreadValues({}, rest), {
     backgroundColor: color,
     className: classNames(tw("h-1 w-full absolute top-0 left-0 right-0"), className)
@@ -8492,7 +8494,7 @@ Card.Content = Content;
 Card.Actions = Actions;
 Card.ImageContainer = ImageContainer;
 Card.Image = Image;
-Card.ColorHiglight = ColorHighlight;
+Card.ColorHighlight = ColorHighlight;
 var isCardTitleComponent = (c) => {
   return import_react34.default.isValidElement(c) && c.type === Card.Title;
 };
@@ -8745,7 +8747,7 @@ var CompactCard = ({
     disabled
   };
   const checkableElement = isRadioButton2 ? /* @__PURE__ */ import_react41.default.createElement(RadioButton, __spreadValues({}, inputProps)) : checkable ? /* @__PURE__ */ import_react41.default.createElement(Checkbox, __spreadValues({}, inputProps)) : void 0;
-  const commonContent = /* @__PURE__ */ import_react41.default.createElement(import_react41.default.Fragment, null, color && /* @__PURE__ */ import_react41.default.createElement(Card.ColorHiglight, {
+  const commonContent = /* @__PURE__ */ import_react41.default.createElement(import_react41.default.Fragment, null, color && /* @__PURE__ */ import_react41.default.createElement(Card.ColorHighlight, {
     color
   }), chipElements ? /* @__PURE__ */ import_react41.default.createElement(CardInputWrapper, {
     input: checkableElement
@@ -8759,7 +8761,7 @@ var CompactCard = ({
   }, !chipElements ? /* @__PURE__ */ import_react41.default.createElement(CardInputWrapper, {
     input: checkableElement
   }, getTitleContent({ title, clampTitle })) : getTitleContent({ title, clampTitle }), /* @__PURE__ */ import_react41.default.createElement(Typography2.Caption, {
-    color: "grey-70"
+    color: "default"
   }, children))));
   const commonProps = {
     fullWidth,
@@ -8894,7 +8896,7 @@ var Card2 = ({
     disabled
   };
   const checkableElement = isRadioButton2 ? /* @__PURE__ */ import_react42.default.createElement(RadioButton, __spreadValues({}, inputProps)) : checkable ? /* @__PURE__ */ import_react42.default.createElement(Checkbox, __spreadValues({}, inputProps)) : void 0;
-  const commonContent = /* @__PURE__ */ import_react42.default.createElement(import_react42.default.Fragment, null, color && /* @__PURE__ */ import_react42.default.createElement(Card.ColorHiglight, {
+  const commonContent = /* @__PURE__ */ import_react42.default.createElement(import_react42.default.Fragment, null, color && /* @__PURE__ */ import_react42.default.createElement(Card.ColorHighlight, {
     color
   }), chipElements && /* @__PURE__ */ import_react42.default.createElement(CardInputWrapper, {
     input: checkableElement
@@ -8903,7 +8905,7 @@ var Card2 = ({
   }, iconElements) : iconElements, imageElement, /* @__PURE__ */ import_react42.default.createElement(Card.Content, null, !chipElements && !iconElements ? /* @__PURE__ */ import_react42.default.createElement(CardInputWrapper, {
     input: checkableElement
   }, getTitleContent({ title, clampTitle })) : getTitleContent({ title, clampTitle }), /* @__PURE__ */ import_react42.default.createElement(Typography2.Caption, {
-    color: "grey-70"
+    color: "default"
   }, children || description)));
   const commonProps = {
     fullWidth,
@@ -9142,7 +9144,7 @@ var ControlLabel = (_a) => {
   }, rest), rtl ? labelEl : children, rtl ? children : labelEl, caption && /* @__PURE__ */ import_react44.default.createElement(Typography2, {
     className: tw({ "col-start-2": !rtl }),
     variant: "caption",
-    color: disabled ? "grey-40" : "grey-50"
+    color: disabled ? "inactive" : "default"
   }, caption));
 };
 
@@ -9649,8 +9651,8 @@ var ChoiceChip = (_a) => {
     className: classNames(
       "Aquarium-ChoiceChip",
       tw("inline-flex items-center border rounded-sm transition whitespace-nowrap cursor-pointer", {
-        "bg-body border-default text-grey-60": !selected,
-        "bg-muted border-grey-100 text-intense": selected,
+        "bg-body border-default text-default": !selected,
+        "bg-muted border-intense text-intense": selected,
         "typography-small py-2 px-3 gap-x-3": !dense,
         "typography-caption py-1 px-2 gap-x-2": Boolean(dense)
       })
@@ -9985,7 +9987,7 @@ var Container2 = ({ maxWidth = "xl", children }) => /* @__PURE__ */ import_react
 }, children);
 
 // src/molecules/DataList/DataList.tsx
-var import_react79 = __toESM(require("react"));
+var import_react80 = __toESM(require("react"));
 var import_utils15 = require("@react-stately/utils");
 var import_castArray2 = __toESM(require("lodash/castArray"));
 var import_compact = __toESM(require("lodash/compact"));
@@ -10160,7 +10162,7 @@ var AccordionSummary = (_a) => {
     padding: "4",
     id: `${id}-summary`
   }, rest), /* @__PURE__ */ import_react60.default.createElement(Typography2, null, title), /* @__PURE__ */ import_react60.default.createElement(Typography2.Small, {
-    color: "grey-40"
+    color: "muted"
   }, description), toggle);
 };
 var AccordionContainer = (_a) => {
@@ -10625,7 +10627,7 @@ var Pagination = ({
     alignItems: "center",
     gap: "4"
   }, /* @__PURE__ */ import_react65.default.createElement(Typography2.Small, {
-    color: "grey-50"
+    color: "muted"
   }, "Items per page "), /* @__PURE__ */ import_react65.default.createElement("div", {
     className: tw("max-w-[70px]")
   }, /* @__PURE__ */ import_react65.default.createElement(SelectBase, {
@@ -10658,7 +10660,7 @@ var Pagination = ({
   }), /* @__PURE__ */ import_react65.default.createElement(Box, {
     paddingX: "4"
   }, /* @__PURE__ */ import_react65.default.createElement(Typography2.Small, {
-    color: "grey-60"
+    color: "default"
   }, "Page")), /* @__PURE__ */ import_react65.default.createElement(InputBase, {
     "aria-label": "Page",
     className: classNames(tw("text-center max-w-[40px]"), "no-arrows"),
@@ -10680,7 +10682,7 @@ var Pagination = ({
   }), /* @__PURE__ */ import_react65.default.createElement(Box, {
     paddingX: "4"
   }, /* @__PURE__ */ import_react65.default.createElement(Typography2.Small, {
-    color: "grey-60"
+    color: "default"
   }, "of ", totalPages)), /* @__PURE__ */ import_react65.default.createElement(Button.Icon, {
     "aria-label": "Next",
     onClick: () => onPageChange(currentPage + 1),
@@ -10834,7 +10836,7 @@ var List = (_a) => {
     icon: import_loading3.default,
     className: tw("text-muted")
   }), /* @__PURE__ */ import_react68.default.createElement(Typography2.Small, {
-    color: "grey-70"
+    color: "default"
   }, loadingIndicator)), pagination && /* @__PURE__ */ import_react68.default.createElement(Pagination, __spreadValues(__spreadValues({}, paginationState), paginationProps))));
 };
 
@@ -10846,7 +10848,7 @@ var import_react69 = __toESM(require("react"));
 var import_chevronDown4 = __toESM(require_chevronDown());
 var import_chevronUp3 = __toESM(require_chevronUp());
 var HeadContext = import_react69.default.createContext(null);
-var tableClassNames = tw("w-full relative typography-default border-spacing-0");
+var tableClassNames = tw("w-full relative typography-default border-spacing-0 border-separate");
 var Table = (_a) => {
   var _b = _a, { children, ariaLabel, className } = _b, rest = __objRest(_b, ["children", "ariaLabel", "className"]);
   return /* @__PURE__ */ import_react69.default.createElement("table", __spreadProps(__spreadValues({}, rest), {
@@ -10894,25 +10896,29 @@ var getHeadCellClassNames = (sticky = true, stickyColumn) => {
     })
   ) : common;
 };
-var TableCell = (_a) => {
-  var _b = _a, { children, className, stickyColumn, align = "left" } = _b, rest = __objRest(_b, ["children", "className", "stickyColumn", "align"]);
-  const headContext = import_react69.default.useContext(HeadContext);
-  return headContext ? /* @__PURE__ */ import_react69.default.createElement("th", __spreadProps(__spreadValues({}, rest), {
-    className: classNames(
-      cellClassNames,
-      getHeadCellClassNames(headContext.sticky, stickyColumn),
-      getAlignClassNames(align),
-      className
-    )
-  }), children) : /* @__PURE__ */ import_react69.default.createElement("td", __spreadProps(__spreadValues({}, rest), {
-    className: classNames(
-      cellClassNames,
-      getBodyCellClassNames(true, stickyColumn),
-      getAlignClassNames(align),
-      className
-    )
-  }), children);
-};
+var TableCell = import_react69.default.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { children, className, stickyColumn, align = "left" } = _b, rest = __objRest(_b, ["children", "className", "stickyColumn", "align"]);
+    const headContext = import_react69.default.useContext(HeadContext);
+    return headContext ? /* @__PURE__ */ import_react69.default.createElement("th", __spreadProps(__spreadValues({}, rest), {
+      ref,
+      className: classNames(
+        cellClassNames,
+        getHeadCellClassNames(headContext.sticky, stickyColumn),
+        getAlignClassNames(align),
+        className
+      )
+    }), children) : /* @__PURE__ */ import_react69.default.createElement("td", __spreadProps(__spreadValues({}, rest), {
+      ref,
+      className: classNames(
+        cellClassNames,
+        getBodyCellClassNames(true, stickyColumn),
+        getAlignClassNames(align),
+        className
+      )
+    }), children);
+  }
+);
 var TableSelectCell = (_a) => {
   var _b = _a, { ariaLabel } = _b, props = __objRest(_b, ["ariaLabel"]);
   return /* @__PURE__ */ import_react69.default.createElement(Table.Cell, {
@@ -10927,28 +10933,31 @@ var getSortCellButtonClassNames = (align) => tw("group flex items-center gap-x-4
 var getSortCellIconClassNames = (active) => {
   return tw("text-[9px]", active ? "text-default" : "text-inactive");
 };
-var TableSortCell = (_a) => {
-  var _b = _a, { children, direction = "none", onClick } = _b, rest = __objRest(_b, ["children", "direction", "onClick"]);
-  return /* @__PURE__ */ import_react69.default.createElement(Table.Cell, __spreadProps(__spreadValues({}, rest), {
-    "aria-sort": direction
-  }), /* @__PURE__ */ import_react69.default.createElement("span", {
-    className: getSortCellButtonClassNames(rest.align),
-    role: "button",
-    tabIndex: -1,
-    onClick
-  }, children, /* @__PURE__ */ import_react69.default.createElement("div", {
-    "data-sort-icons": true,
-    className: tw("flex flex-col", {
-      "invisible group-hover:visible": direction === "none"
-    })
-  }, /* @__PURE__ */ import_react69.default.createElement(InlineIcon, {
-    icon: import_chevronUp3.default,
-    className: getSortCellIconClassNames(direction === "ascending")
-  }), /* @__PURE__ */ import_react69.default.createElement(InlineIcon, {
-    icon: import_chevronDown4.default,
-    className: getSortCellIconClassNames(direction === "descending")
-  }))));
-};
+var TableSortCell = import_react69.default.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { children, direction = "none", onClick } = _b, rest = __objRest(_b, ["children", "direction", "onClick"]);
+    return /* @__PURE__ */ import_react69.default.createElement(Table.Cell, __spreadProps(__spreadValues({}, rest), {
+      "aria-sort": direction,
+      ref
+    }), /* @__PURE__ */ import_react69.default.createElement("span", {
+      className: getSortCellButtonClassNames(rest.align),
+      role: "button",
+      tabIndex: -1,
+      onClick
+    }, children, /* @__PURE__ */ import_react69.default.createElement("div", {
+      "data-sort-icons": true,
+      className: tw("flex flex-col", {
+        "invisible group-hover:visible": direction === "none"
+      })
+    }, /* @__PURE__ */ import_react69.default.createElement(InlineIcon, {
+      icon: import_chevronUp3.default,
+      className: getSortCellIconClassNames(direction === "ascending")
+    }), /* @__PURE__ */ import_react69.default.createElement(InlineIcon, {
+      icon: import_chevronDown4.default,
+      className: getSortCellIconClassNames(direction === "descending")
+    }))));
+  }
+);
 var Caption = ({ children }) => /* @__PURE__ */ import_react69.default.createElement(Typography2.Caption, {
   htmlTag: "caption"
 }, children);
@@ -11140,6 +11149,98 @@ DataList.Toolbar = {
   SelectionCount: ToolbarSelectionCount
 };
 
+// src/utils/stickyStyles.tsx
+var import_react71 = __toESM(require("react"));
+var import_web4 = require("@react-spring/web");
+var import_throttle = __toESM(require("lodash/throttle"));
+function useStickyStyles(scrollProgress, axis, { borderColor, boxShadowColor }) {
+  const { startValue, endValue } = (0, import_react71.useMemo)(() => {
+    if (scrollProgress === null) {
+      return { startValue: 0, endValue: 0 };
+    }
+    const startValue2 = scrollProgress;
+    const endValue2 = 1 - scrollProgress;
+    return { startValue: startValue2, endValue: endValue2 };
+  }, [scrollProgress]);
+  const springStyles = (0, import_web4.useSpring)({
+    borderColorStart: `rgba(${borderColor}, ${startValue})`,
+    borderColorEnd: `rgba(${borderColor}, ${endValue})`,
+    boxShadowColorStart: `rgba(${boxShadowColor}, ${Math.min(startValue / 0.3, 0.1)})`,
+    boxShadowColorEnd: `rgba(${boxShadowColor}, ${Math.min(endValue / 0.3, 0.1)})`
+  });
+  return axis === "horizontal" ? {
+    left: {
+      borderRight: springStyles.borderColorStart.to(
+        (borderColor2) => `${Math.min(startValue / 0.3, 1)}px solid ${borderColor2}`
+      ),
+      boxShadow: springStyles.boxShadowColorStart.to((boxShadowColor2) => `${boxShadowColor2} 7px 0px 5px 0px`)
+    },
+    right: {
+      borderLeft: springStyles.borderColorEnd.to(
+        (borderColor2) => `${Math.min(endValue / 0.3, 1)}px solid ${borderColor2}`
+      ),
+      boxShadow: springStyles.boxShadowColorEnd.to((boxShadowColor2) => `${boxShadowColor2} -7px 0px 5px 0px`)
+    }
+  } : {
+    top: {
+      borderBottom: springStyles.borderColorStart.to(
+        (borderColor2) => `${Math.min(startValue / 0.3, 1)}px solid ${borderColor2}`
+      ),
+      boxShadow: springStyles.boxShadowColorStart.to((boxShadowColor2) => `${boxShadowColor2} 0px 7px 5px 0px`)
+    },
+    bottom: {
+      borderTop: springStyles.borderColorEnd.to(
+        (borderColor2) => `${Math.min(endValue / 0.3, 1)}px solid ${borderColor2}`
+      ),
+      boxShadow: springStyles.boxShadowColorEnd.to((boxShadowColor2) => `${boxShadowColor2} 0px -7px 5px 0px`)
+    }
+  };
+}
+function useScrollProgress({ containerRef, skip }) {
+  const [scrollState, setScrollState] = (0, import_react71.useState)(null);
+  const throttledSetScrollState = (0, import_throttle.default)(({ scrollX, scrollXProgress }) => {
+    setScrollState({ scrollX, scrollXProgress });
+  }, 50);
+  (0, import_web4.useScroll)({
+    container: containerRef,
+    onChange: ({ value: { scrollX, scrollXProgress } }) => {
+      throttledSetScrollState({ scrollX, scrollXProgress });
+    },
+    default: {
+      immediate: true
+    },
+    pause: skip
+  });
+  const isContainerUnscrollable = scrollState && scrollState.scrollX === 0 && (scrollState == null ? void 0 : scrollState.scrollXProgress) === 1;
+  if (!scrollState || isContainerUnscrollable) {
+    return null;
+  }
+  return scrollState.scrollXProgress;
+}
+function createAnimatedCell({
+  cellElement,
+  stickyStyles,
+  stickyColumn
+}) {
+  if (!stickyColumn || !stickyStyles) {
+    return cellElement;
+  }
+  const AnimatedCell = (0, import_web4.animated)(cellElement.type);
+  return /* @__PURE__ */ import_react71.default.createElement(AnimatedCell, __spreadProps(__spreadValues({}, cellElement.props), {
+    key: cellElement.key,
+    style: __spreadValues(__spreadValues({}, cellElement.props.style), stickyStyles[stickyColumn])
+  }), cellElement.props.children);
+}
+function useScrollStyles({
+  containerRef,
+  skip = false,
+  direction = "horizontal",
+  options = { borderColor: "210, 210, 214", boxShadowColor: "58, 58, 68" }
+}) {
+  const scrollXProgress = useScrollProgress({ containerRef, skip });
+  return useStickyStyles(scrollXProgress, direction, options);
+}
+
 // src/utils/table/types.ts
 var import_isArray2 = __toESM(require("lodash/isArray"));
 var areRowsGrouped = (rows) => {
@@ -11175,11 +11276,11 @@ function isOnSortChangedDirection(value) {
 }
 
 // src/utils/table/useTableSort.tsx
-var import_react71 = __toESM(require("react"));
+var import_react72 = __toESM(require("react"));
 var getDefaultSort = (props) => "defaultSort" in props ? props.defaultSort : "column" in props && "direction" in props && Object.keys(props).length === 2 ? { column: props.column, direction: props.direction } : void 0;
 var useTableSort = (props) => {
   const onSortChanged = props && "onSortChanged" in props ? props.onSortChanged : void 0;
-  const [sort, setSort] = import_react71.default.useState(props && getDefaultSort(props));
+  const [sort, setSort] = import_react72.default.useState(props && getDefaultSort(props));
   const setSortAndEmitOnSortChangedEvent = (sort2) => {
     setSort(sort2);
     if (onSortChanged) {
@@ -11220,11 +11321,11 @@ var sortRowsBy = (rows, sort) => {
 };
 
 // src/molecules/DataList/DataListComponents.tsx
-var import_react74 = __toESM(require("react"));
+var import_react75 = __toESM(require("react"));
 var import_isFunction = __toESM(require("lodash/isFunction"));
 
 // src/molecules/DropdownMenu/DropdownMenu.tsx
-var import_react73 = __toESM(require("react"));
+var import_react74 = __toESM(require("react"));
 var import_i18n = require("@react-aria/i18n");
 var import_interactions2 = require("@react-aria/interactions");
 var import_menu2 = require("@react-aria/menu");
@@ -11236,12 +11337,12 @@ var import_tree = require("@react-stately/tree");
 var import_omit7 = __toESM(require("lodash/omit"));
 
 // src/atoms/DropdownMenu/DropdownMenu.tsx
-var import_react72 = __toESM(require("react"));
+var import_react73 = __toESM(require("react"));
 var import_tick5 = __toESM(require_tick());
-var DropdownMenu = import_react72.default.forwardRef(
+var DropdownMenu = import_react73.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { minHeight, maxHeight = "100%", minWidth = "125px", maxWidth, className, children } = _b, props = __objRest(_b, ["minHeight", "maxHeight", "minWidth", "maxWidth", "className", "children"]);
-    return /* @__PURE__ */ import_react72.default.createElement("div", __spreadValues({
+    return /* @__PURE__ */ import_react73.default.createElement("div", __spreadValues({
       ref,
       style: { minHeight, maxHeight, minWidth, maxWidth },
       className: classNames(
@@ -11251,35 +11352,35 @@ var DropdownMenu = import_react72.default.forwardRef(
     }, props), children);
   }
 );
-var ContentContainer = ({ children }) => /* @__PURE__ */ import_react72.default.createElement("div", {
+var ContentContainer = ({ children }) => /* @__PURE__ */ import_react73.default.createElement("div", {
   className: tw("p-3 overflow-y-auto overflow-x-hidden")
 }, children);
 DropdownMenu.ContentContainer = ContentContainer;
-var List2 = import_react72.default.forwardRef(
+var List2 = import_react73.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { children, className } = _b, props = __objRest(_b, ["children", "className"]);
-    return /* @__PURE__ */ import_react72.default.createElement("ul", __spreadValues({
+    return /* @__PURE__ */ import_react73.default.createElement("ul", __spreadValues({
       ref,
       className: classNames(className, "outline-none ring-0")
     }, props), children);
   }
 );
 DropdownMenu.List = List2;
-var Group2 = import_react72.default.forwardRef(
+var Group2 = import_react73.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, title, titleProps, children } = _b, props = __objRest(_b, ["className", "title", "titleProps", "children"]);
-    return /* @__PURE__ */ import_react72.default.createElement("li", __spreadValues({
+    return /* @__PURE__ */ import_react73.default.createElement("li", __spreadValues({
       ref
-    }, props), title && /* @__PURE__ */ import_react72.default.createElement("div", __spreadValues({
+    }, props), title && /* @__PURE__ */ import_react73.default.createElement("div", __spreadValues({
       className: classNames(className, "p-3 text-inactive uppercase cursor-default typography-caption")
     }, titleProps), title), children);
   }
 );
 DropdownMenu.Group = Group2;
-var Item3 = import_react72.default.forwardRef(
+var Item3 = import_react73.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { kind, highlighted, selected, className, icon, showNotification = false, children } = _b, props = __objRest(_b, ["kind", "highlighted", "selected", "className", "icon", "showNotification", "children"]);
-    return /* @__PURE__ */ import_react72.default.createElement("li", __spreadValues({
+    return /* @__PURE__ */ import_react73.default.createElement("li", __spreadValues({
       ref,
       className: classNames(className, "flex items-center gap-x-3 p-3 outline-none", {
         "cursor-pointer hover:bg-muted": !props.disabled,
@@ -11287,32 +11388,32 @@ var Item3 = import_react72.default.forwardRef(
         "text-primary-intense": kind === "action",
         "text-inactive cursor-not-allowed": props.disabled
       })
-    }, props), icon && showNotification && /* @__PURE__ */ import_react72.default.createElement(Badge.Notification, null, /* @__PURE__ */ import_react72.default.createElement(InlineIcon, {
+    }, props), icon && showNotification && /* @__PURE__ */ import_react73.default.createElement(Badge.Notification, null, /* @__PURE__ */ import_react73.default.createElement(InlineIcon, {
       icon
-    })), icon && !showNotification && /* @__PURE__ */ import_react72.default.createElement(InlineIcon, {
+    })), icon && !showNotification && /* @__PURE__ */ import_react73.default.createElement(InlineIcon, {
       icon
-    }), /* @__PURE__ */ import_react72.default.createElement("span", {
+    }), /* @__PURE__ */ import_react73.default.createElement("span", {
       className: tw("grow")
-    }, children), selected && /* @__PURE__ */ import_react72.default.createElement(InlineIcon, {
+    }, children), selected && /* @__PURE__ */ import_react73.default.createElement(InlineIcon, {
       icon: import_tick5.default
     }));
   }
 );
 DropdownMenu.Item = Item3;
-var Description = ({ disabled, children }) => /* @__PURE__ */ import_react72.default.createElement(Typography2.Caption, {
-  color: disabled ? "grey-20" : "grey-40"
+var Description = ({ disabled, children }) => /* @__PURE__ */ import_react73.default.createElement(Typography2.Caption, {
+  color: disabled ? "inactive" : "muted"
 }, children);
 DropdownMenu.Description = Description;
 var Separator = (_a) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ import_react72.default.createElement("li", __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ import_react73.default.createElement("li", __spreadProps(__spreadValues({}, props), {
     className: classNames(className, tw("m-3 block bg-default h-[1px]"))
   }));
 };
 DropdownMenu.Separator = Separator;
 var EmptyStateContainer2 = (_a) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ import_react72.default.createElement("div", __spreadValues({
+  return /* @__PURE__ */ import_react73.default.createElement("div", __spreadValues({
     className: classNames(tw("border border-dashed border-default p-3"), className)
   }, props), children);
 };
@@ -11374,23 +11475,23 @@ var DropdownMenu2 = (_a) => {
     "footer",
     "children"
   ]);
-  const triggerRef = import_react73.default.useRef(null);
+  const triggerRef = import_react74.default.useRef(null);
   const [trigger, items] = extractTriggerAndItems(children);
   const state = (0, import_menu3.useMenuTriggerState)(props);
   const { menuTriggerProps, menuProps } = (0, import_menu2.useMenuTrigger)({}, state, triggerRef);
-  return /* @__PURE__ */ import_react73.default.createElement("div", null, /* @__PURE__ */ import_react73.default.createElement(import_interactions2.PressResponder, __spreadValues({
+  return /* @__PURE__ */ import_react74.default.createElement("div", null, /* @__PURE__ */ import_react74.default.createElement(import_interactions2.PressResponder, __spreadValues({
     ref: triggerRef,
     onPress: () => state.toggle()
-  }, (0, import_omit7.default)(menuTriggerProps, ["id", "aria-expanded"])), /* @__PURE__ */ import_react73.default.createElement(TriggerWrapper, {
+  }, (0, import_omit7.default)(menuTriggerProps, ["id", "aria-expanded"])), /* @__PURE__ */ import_react74.default.createElement(TriggerWrapper, {
     "aria-expanded": menuTriggerProps["aria-expanded"],
     disabled
-  }, trigger.props.children)), state.isOpen && /* @__PURE__ */ import_react73.default.createElement(PopoverOverlay, {
+  }, trigger.props.children)), state.isOpen && /* @__PURE__ */ import_react74.default.createElement(PopoverOverlay, {
     className: "Aquarium-DropdownMenu",
     triggerRef,
     state,
     placement,
     focusable: false
-  }, /* @__PURE__ */ import_react73.default.createElement(MenuWrapper, __spreadValues({
+  }, /* @__PURE__ */ import_react74.default.createElement(MenuWrapper, __spreadValues({
     onAction,
     selectionMode,
     selection,
@@ -11418,13 +11519,13 @@ DropdownMenu2.Section = import_collections.Section;
 DropdownMenu2.Section.displayName = "DropdownMenu.Section";
 var TriggerWrapper = (_a) => {
   var _b = _a, { children, disabled } = _b, props = __objRest(_b, ["children", "disabled"]);
-  const ref = import_react73.default.useRef(null);
+  const ref = import_react74.default.useRef(null);
   const { pressProps } = (0, import_interactions2.usePress)(__spreadProps(__spreadValues({}, props), { isDisabled: disabled, ref }));
-  const trigger = import_react73.default.Children.only(children);
-  if (!trigger || !import_react73.default.isValidElement(trigger)) {
+  const trigger = import_react74.default.Children.only(children);
+  if (!trigger || !import_react74.default.isValidElement(trigger)) {
     throw new Error("<DropdownMenu.Trigger> must have valid child");
   }
-  return import_react73.default.cloneElement(trigger, __spreadValues({ ref }, (0, import_utils11.mergeProps)(pressProps, props)));
+  return import_react74.default.cloneElement(trigger, __spreadValues({ ref }, (0, import_utils11.mergeProps)(pressProps, props)));
 };
 var isSectionNode = (item) => item.type === "section";
 var isItemNode = (item) => item.type === "item";
@@ -11450,7 +11551,7 @@ var MenuWrapper = (_a) => {
     "header",
     "footer"
   ]);
-  const ref = import_react73.default.useRef(null);
+  const ref = import_react74.default.useRef(null);
   const disabledKeys = getDisabledItemKeys(props.children);
   const state = (0, import_tree.useTreeState)(__spreadValues({
     disabledKeys,
@@ -11458,40 +11559,40 @@ var MenuWrapper = (_a) => {
   }, props));
   const { menuProps } = (0, import_menu2.useMenu)(props, state, ref);
   const { contains } = (0, import_i18n.useFilter)({ sensitivity: "base" });
-  const [search, setSearch] = import_react73.default.useState("");
-  const searchInputRef = import_react73.default.useRef(null);
-  const filteredCollection = import_react73.default.useMemo(
+  const [search, setSearch] = import_react74.default.useState("");
+  const searchInputRef = import_react74.default.useRef(null);
+  const filteredCollection = import_react74.default.useMemo(
     () => searchable ? filterCollection(state.collection, search, contains) : state.collection,
     [searchable, state.collection, search, contains]
   );
-  import_react73.default.useEffect(() => {
+  import_react74.default.useEffect(() => {
     var _a2;
     if (searchable) {
       (_a2 = searchInputRef.current) == null ? void 0 : _a2.focus();
     }
   }, [searchable]);
-  return /* @__PURE__ */ import_react73.default.createElement(DropdownMenu, {
+  return /* @__PURE__ */ import_react74.default.createElement(DropdownMenu, {
     minWidth,
     maxWidth,
     minHeight,
     maxHeight
-  }, header, /* @__PURE__ */ import_react73.default.createElement(DropdownMenu.ContentContainer, null, searchable && /* @__PURE__ */ import_react73.default.createElement(SearchInput, {
+  }, header, /* @__PURE__ */ import_react74.default.createElement(DropdownMenu.ContentContainer, null, searchable && /* @__PURE__ */ import_react74.default.createElement(SearchInput, {
     "aria-label": "search",
     value: search,
     onChange: (e) => setSearch(e.target.value),
     className: tw("mb-5"),
     ref: searchInputRef
-  }), filteredCollection.size === 0 && emptyState && /* @__PURE__ */ import_react73.default.createElement(DropdownMenu.EmptyStateContainer, null, emptyState), /* @__PURE__ */ import_react73.default.createElement(DropdownMenu.List, __spreadValues({
+  }), filteredCollection.size === 0 && emptyState && /* @__PURE__ */ import_react74.default.createElement(DropdownMenu.EmptyStateContainer, null, emptyState), /* @__PURE__ */ import_react74.default.createElement(DropdownMenu.List, __spreadValues({
     ref
   }, menuProps), Array.from(filteredCollection).map((item) => {
     if (isSectionNode(item)) {
-      return /* @__PURE__ */ import_react73.default.createElement(SectionWrapper, {
+      return /* @__PURE__ */ import_react74.default.createElement(SectionWrapper, {
         key: item.key,
         section: item,
         state
       });
     } else if (isItemNode(item)) {
-      return /* @__PURE__ */ import_react73.default.createElement(ItemWrapper, {
+      return /* @__PURE__ */ import_react74.default.createElement(ItemWrapper, {
         key: item.key,
         item,
         state
@@ -11500,14 +11601,14 @@ var MenuWrapper = (_a) => {
   }))), footer);
 };
 var ItemWrapper = ({ item, state }) => {
-  const ref = import_react73.default.useRef(null);
+  const ref = import_react74.default.useRef(null);
   const { menuItemProps, descriptionProps, isSelected, isFocused, isDisabled } = (0, import_menu2.useMenuItem)(
     { key: item.key, closeOnSelect: item.props.closeOnSelect, ["aria-label"]: item["aria-label"] },
     state,
     ref
   );
   const { icon, description, kind = "default", showNotification = false } = item.props;
-  return /* @__PURE__ */ import_react73.default.createElement(DropdownMenu.Item, __spreadProps(__spreadValues({
+  return /* @__PURE__ */ import_react74.default.createElement(DropdownMenu.Item, __spreadProps(__spreadValues({
     ref
   }, menuItemProps), {
     kind,
@@ -11516,7 +11617,7 @@ var ItemWrapper = ({ item, state }) => {
     disabled: isDisabled,
     icon,
     showNotification
-  }), item.rendered, description && /* @__PURE__ */ import_react73.default.createElement(DropdownMenu.Description, __spreadValues({
+  }), item.rendered, description && /* @__PURE__ */ import_react74.default.createElement(DropdownMenu.Description, __spreadValues({
     disabled: isDisabled
   }, descriptionProps), description));
 };
@@ -11528,24 +11629,24 @@ var SectionWrapper = ({ section, state }) => {
   const { separatorProps } = (0, import_separator.useSeparator)({
     elementType: "li"
   });
-  return /* @__PURE__ */ import_react73.default.createElement(import_react73.default.Fragment, null, section.key !== state.collection.getFirstKey() && /* @__PURE__ */ import_react73.default.createElement(DropdownMenu.Separator, __spreadValues({}, separatorProps)), /* @__PURE__ */ import_react73.default.createElement(DropdownMenu.Group, __spreadValues({
+  return /* @__PURE__ */ import_react74.default.createElement(import_react74.default.Fragment, null, section.key !== state.collection.getFirstKey() && /* @__PURE__ */ import_react74.default.createElement(DropdownMenu.Separator, __spreadValues({}, separatorProps)), /* @__PURE__ */ import_react74.default.createElement(DropdownMenu.Group, __spreadValues({
     title: section.rendered,
     titleProps: headingProps
-  }, itemProps), /* @__PURE__ */ import_react73.default.createElement("ul", __spreadValues({}, groupProps), Array.from(section.childNodes).map((node) => /* @__PURE__ */ import_react73.default.createElement(ItemWrapper, {
+  }, itemProps), /* @__PURE__ */ import_react74.default.createElement("ul", __spreadValues({}, groupProps), Array.from(section.childNodes).map((node) => /* @__PURE__ */ import_react74.default.createElement(ItemWrapper, {
     key: node.key,
     item: node,
     state
   })))));
 };
 var extractTriggerAndItems = (children) => {
-  const [trigger, items] = import_react73.default.Children.toArray(children);
+  const [trigger, items] = import_react74.default.Children.toArray(children);
   if (!isComponentType(trigger, MenuTrigger) || !isComponentType(items, MenuItems)) {
     throw new Error("<DropdownMenu> must have <DropdownMenu.Trigger> and <DropdownMenu.Items> defined");
   }
   return [trigger, items];
 };
 var getDisabledItemKeys = (children) => {
-  const keys = import_react73.default.Children.map(children, (child) => {
+  const keys = import_react74.default.Children.map(children, (child) => {
     var _a, _b;
     if (!child || typeof child === "function") {
       return null;
@@ -11586,13 +11687,13 @@ var DataListRowMenu = ({
     return null;
   }
   const menuContent = (0, import_isFunction.default)(menu) ? menu(row, index) : menu;
-  return /* @__PURE__ */ import_react74.default.createElement(DataList.Cell, {
+  return /* @__PURE__ */ import_react75.default.createElement(DataList.Cell, {
     align: "right"
-  }, menuContent && /* @__PURE__ */ import_react74.default.createElement(DropdownMenu2, {
+  }, menuContent && /* @__PURE__ */ import_react75.default.createElement(DropdownMenu2, {
     placement: defaultContextualMenuPlacement,
     onAction: (action) => onAction == null ? void 0 : onAction(action, row, index),
     onOpenChange: onMenuOpenChange
-  }, /* @__PURE__ */ import_react74.default.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ import_react74.default.createElement(Button.Icon, {
+  }, /* @__PURE__ */ import_react75.default.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ import_react75.default.createElement(Button.Icon, {
     "aria-label": menuAriaLabel,
     icon: import_more2.default
   })), menuContent));
@@ -11607,22 +11708,30 @@ var DataListRow = ({
   disabled,
   renderFirstColumn,
   additionalRowProps = () => ({}),
-  additionalColumnProps = () => ({})
+  additionalColumnProps = () => ({}),
+  stickyStyles
 }) => {
   var _a;
   const isRowDisabled = (_a = disabled == null ? void 0 : disabled(row, index, rows)) != null ? _a : false;
-  return /* @__PURE__ */ import_react74.default.createElement(DataList.Row, __spreadValues({
+  return /* @__PURE__ */ import_react75.default.createElement(DataList.Row, __spreadValues({
     key: row.id,
     disabled: isRowDisabled,
     active
-  }, additionalRowProps(row, index, rows)), renderFirstColumn == null ? void 0 : renderFirstColumn(row, index, rows), /* @__PURE__ */ import_react74.default.createElement(List, {
+  }, additionalRowProps(row, index, rows)), renderFirstColumn == null ? void 0 : renderFirstColumn(row, index, rows), /* @__PURE__ */ import_react75.default.createElement(List, {
     items: columns,
-    renderItem: (column, columnIndex) => /* @__PURE__ */ import_react74.default.createElement(DataList.Cell, __spreadValues(__spreadValues({}, cellProps(column)), additionalColumnProps(column, columnIndex, columns, row)), /* @__PURE__ */ import_react74.default.createElement(DataListCell, {
-      column,
-      row,
-      index,
-      rows
-    }))
+    renderItem: (column, columnIndex) => {
+      const cell = /* @__PURE__ */ import_react75.default.createElement(DataList.Cell, __spreadValues(__spreadValues({}, cellProps(column)), additionalColumnProps(column, columnIndex, columns, row)), /* @__PURE__ */ import_react75.default.createElement(DataListCell, {
+        column,
+        row,
+        index,
+        rows
+      }));
+      return createAnimatedCell({
+        cellElement: cell,
+        stickyStyles,
+        stickyColumn: cellProps(column).stickyColumn
+      });
+    }
   }), menu);
 };
 var DEFAULT_CONTENT = "";
@@ -11638,7 +11747,7 @@ var DataListCell = ({
     case "status": {
       const status = column.status(row, index, rows);
       if (status) {
-        cellContent = /* @__PURE__ */ import_react74.default.createElement(StatusChip, __spreadValues({
+        cellContent = /* @__PURE__ */ import_react75.default.createElement(StatusChip, __spreadValues({
           dense: true
         }, status));
       }
@@ -11647,7 +11756,7 @@ var DataListCell = ({
     case "action": {
       const action = renameProperty("text", "children", column.action(row, index, rows));
       if (action) {
-        cellContent = /* @__PURE__ */ import_react74.default.createElement(Button.Secondary, __spreadValues({
+        cellContent = /* @__PURE__ */ import_react75.default.createElement(Button.Secondary, __spreadValues({
           dense: true
         }, action));
       }
@@ -11660,7 +11769,7 @@ var DataListCell = ({
     case "item": {
       const item = column.item(row, index, rows);
       if (item) {
-        cellContent = /* @__PURE__ */ import_react74.default.createElement(Item2, __spreadValues({}, item));
+        cellContent = /* @__PURE__ */ import_react75.default.createElement(Item2, __spreadValues({}, item));
       }
       break;
     }
@@ -11672,17 +11781,17 @@ var DataListCell = ({
       }
       break;
   }
-  return column.tooltip ? /* @__PURE__ */ import_react74.default.createElement(Tooltip, __spreadValues({}, column.tooltip(row, index, rows)), cellContent) : /* @__PURE__ */ import_react74.default.createElement(import_react74.default.Fragment, null, cellContent);
+  return column.tooltip ? /* @__PURE__ */ import_react75.default.createElement(Tooltip, __spreadValues({}, column.tooltip(row, index, rows)), cellContent) : /* @__PURE__ */ import_react75.default.createElement(import_react75.default.Fragment, null, cellContent);
 };
 
 // src/molecules/DataList/DataListContext.tsx
-var import_react75 = require("react");
-var DataListContext = (0, import_react75.createContext)({
+var import_react76 = require("react");
+var DataListContext = (0, import_react76.createContext)({
   rows: [],
   selectedRows: void 0
 });
 var useDataListContext = () => {
-  const ctx = (0, import_react75.useContext)(DataListContext);
+  const ctx = (0, import_react76.useContext)(DataListContext);
   if (!ctx) {
     throw new Error("DataListContext was used outside of provider.");
   }
@@ -11690,7 +11799,7 @@ var useDataListContext = () => {
 };
 
 // src/molecules/DataList/DataListGroup.tsx
-var import_react76 = __toESM(require("react"));
+var import_react77 = __toESM(require("react"));
 var import_isFunction2 = __toESM(require("lodash/isFunction"));
 var import_infoSign3 = __toESM(require_infoSign());
 
@@ -11703,8 +11812,8 @@ var INDENTATION = 28;
 var sortGroupKeys = (groupKeys) => [...groupKeys].sort((a) => a === "undefined" ? -1 : 1);
 var getDefaultRowCheckboxLabel = () => "Select row";
 var getDefaultGroupCheckboxLabel = (key) => `Select ${key}`;
-var renderDefaultGroupName = (key) => /* @__PURE__ */ import_react76.default.createElement(import_react76.default.Fragment, null, "Group: ", /* @__PURE__ */ import_react76.default.createElement("b", null, key));
-var renderDefaultEmptyGroup = () => /* @__PURE__ */ import_react76.default.createElement(DataList.EmptyGroup, {
+var renderDefaultGroupName = (key) => /* @__PURE__ */ import_react77.default.createElement(import_react77.default.Fragment, null, "Group: ", /* @__PURE__ */ import_react77.default.createElement("b", null, key));
+var renderDefaultEmptyGroup = () => /* @__PURE__ */ import_react77.default.createElement(DataList.EmptyGroup, {
   icon: import_infoSign3.default
 }, "This group is empty");
 var DataListGroup = (_a) => {
@@ -11741,28 +11850,28 @@ var DataListGroup = (_a) => {
   const hasCustomRowForGroup = (0, import_isFunction2.default)(getGroupRow);
   if (!areRowsGrouped(groups)) {
     if (groups.length === 0 && groupKey && groupKey !== "undefined") {
-      return /* @__PURE__ */ import_react76.default.createElement(DataList.Row, null, selectable && /* @__PURE__ */ import_react76.default.createElement(DataList.Cell, null), /* @__PURE__ */ import_react76.default.createElement(DataList.Cell, {
+      return /* @__PURE__ */ import_react77.default.createElement(DataList.Row, null, selectable && /* @__PURE__ */ import_react77.default.createElement(DataList.Cell, null), /* @__PURE__ */ import_react77.default.createElement(DataList.Cell, {
         style: { paddingLeft: `${2 + GAP + level * INDENTATION}px`, gridColumn: `${selectable ? 2 : 1} / -1` }
-      }, /* @__PURE__ */ import_react76.default.createElement(Typography, {
+      }, /* @__PURE__ */ import_react77.default.createElement(Typography, {
         variant: "small",
         color: "muted"
       }, renderEmptyGroup(groupKey))));
     }
-    return /* @__PURE__ */ import_react76.default.createElement(List, {
+    return /* @__PURE__ */ import_react77.default.createElement(List, {
       items: groups,
       renderItem: (row, index) => {
         var _a2;
         const isChecked = (_a2 = selectedRows == null ? void 0 : selectedRows.includes(row.id)) != null ? _a2 : false;
         const isDisabled = disabled == null ? void 0 : disabled(row, index, rows);
         const isSelectionDisabled = selectionDisabled(row, index, rows);
-        return /* @__PURE__ */ import_react76.default.createElement(DataListRow, {
+        return /* @__PURE__ */ import_react77.default.createElement(DataListRow, {
           key: row.id,
           columns,
           row,
           index,
           rows,
           active: selectable && isChecked,
-          menu: /* @__PURE__ */ import_react76.default.createElement(DataListRowMenu, {
+          menu: /* @__PURE__ */ import_react77.default.createElement(DataListRowMenu, {
             row,
             index,
             menu,
@@ -11780,7 +11889,7 @@ var DataListGroup = (_a) => {
             }
           } : {},
           renderFirstColumn: (row2, index2) => {
-            return /* @__PURE__ */ import_react76.default.createElement(import_react76.default.Fragment, null, selectable && /* @__PURE__ */ import_react76.default.createElement(DataList.Cell, null, /* @__PURE__ */ import_react76.default.createElement(Checkbox, {
+            return /* @__PURE__ */ import_react77.default.createElement(import_react77.default.Fragment, null, selectable && /* @__PURE__ */ import_react77.default.createElement(DataList.Cell, null, /* @__PURE__ */ import_react77.default.createElement(Checkbox, {
               "aria-label": getRowCheckboxLabel(row2, index2, isChecked, rows),
               onChange: onSelectionChange(row2.id),
               checked: isChecked,
@@ -11794,13 +11903,13 @@ var DataListGroup = (_a) => {
   if (!groupKeys) {
     return null;
   }
-  return /* @__PURE__ */ import_react76.default.createElement(List, {
+  return /* @__PURE__ */ import_react77.default.createElement(List, {
     items: sortGroupKeys(groupKeys),
     renderItem: (key, index) => {
       var _a2, _b2;
       const group = groups[key];
       if (key === "undefined" || key === void 0) {
-        return /* @__PURE__ */ import_react76.default.createElement(DataListGroup, __spreadProps(__spreadValues({
+        return /* @__PURE__ */ import_react77.default.createElement(DataListGroup, __spreadProps(__spreadValues({
           key: "undefined",
           groupKey: "undefined",
           level
@@ -11813,57 +11922,57 @@ var DataListGroup = (_a) => {
       const nestedSelectedIds = (_b2 = selectedRows == null ? void 0 : selectedRows.filter((id) => nestedRowIds.includes(id))) != null ? _b2 : [];
       const allSelected = nestedRowIds.length === nestedSelectedIds.length;
       const isChecked = nestedSelectedIds.length > 0;
-      return /* @__PURE__ */ import_react76.default.createElement(Accordion, {
+      return /* @__PURE__ */ import_react77.default.createElement(Accordion, {
         key,
         openPanelId
-      }, hasCustomRowForGroup && /* @__PURE__ */ import_react76.default.createElement(DataList.Row, {
+      }, hasCustomRowForGroup && /* @__PURE__ */ import_react77.default.createElement(DataList.Row, {
         active: !!openPanelId || selectable && isChecked
-      }, selectable && /* @__PURE__ */ import_react76.default.createElement(DataList.Cell, null, /* @__PURE__ */ import_react76.default.createElement(Checkbox, {
+      }, selectable && /* @__PURE__ */ import_react77.default.createElement(DataList.Cell, null, /* @__PURE__ */ import_react77.default.createElement(Checkbox, {
         "aria-label": getGroupCheckboxLabel(key, group, index, isChecked, rows),
         checked: isChecked,
         indeterminate: isChecked && !allSelected,
         disabled: group.length === 0,
         onChange: onSelectionChange(nestedRowIds)
-      })), /* @__PURE__ */ import_react76.default.createElement(List, {
+      })), /* @__PURE__ */ import_react77.default.createElement(List, {
         items: columns,
-        renderItem: (column, idx) => /* @__PURE__ */ import_react76.default.createElement(DataList.Cell, __spreadProps(__spreadValues({}, cellProps(column)), {
+        renderItem: (column, idx) => /* @__PURE__ */ import_react77.default.createElement(DataList.Cell, __spreadProps(__spreadValues({}, cellProps(column)), {
           className: tw("gap-3"),
           style: idx === 0 ? { paddingLeft: `${GAP + level * INDENTATION}px` } : void 0
-        }), idx === 0 && /* @__PURE__ */ import_react76.default.createElement(Accordion.Toggle, {
+        }), idx === 0 && /* @__PURE__ */ import_react77.default.createElement(Accordion.Toggle, {
           panelId: key,
           onChange: onGroupToggled
-        }), /* @__PURE__ */ import_react76.default.createElement(DataListCell, {
+        }), /* @__PURE__ */ import_react77.default.createElement(DataListCell, {
           column,
           row: getGroupRow(key, group),
           index: -1,
           rows: []
         }))
-      }), /* @__PURE__ */ import_react76.default.createElement(DataListRowMenu, {
+      }), /* @__PURE__ */ import_react77.default.createElement(DataListRowMenu, {
         row: getGroupRow(key, group),
         index: -1,
         menu,
         onAction,
         onMenuOpenChange,
         menuAriaLabel
-      })), !hasCustomRowForGroup && /* @__PURE__ */ import_react76.default.createElement(DataList.Row, {
+      })), !hasCustomRowForGroup && /* @__PURE__ */ import_react77.default.createElement(DataList.Row, {
         active: !!openPanelId || selectable && isChecked
-      }, selectable && /* @__PURE__ */ import_react76.default.createElement(DataList.Cell, null, /* @__PURE__ */ import_react76.default.createElement(Checkbox, {
+      }, selectable && /* @__PURE__ */ import_react77.default.createElement(DataList.Cell, null, /* @__PURE__ */ import_react77.default.createElement(Checkbox, {
         "aria-label": getGroupCheckboxLabel(key, group, index, isChecked, rows),
         checked: isChecked,
         indeterminate: isChecked && !allSelected,
         disabled: group.length === 0,
         onChange: onSelectionChange(nestedRowIds)
-      })), /* @__PURE__ */ import_react76.default.createElement(DataList.Cell, {
+      })), /* @__PURE__ */ import_react77.default.createElement(DataList.Cell, {
         className: tw("gap-3"),
         style: { paddingLeft: `${GAP + level * INDENTATION}px`, gridColumn: `${selectable ? 2 : 1} / -1` }
-      }, /* @__PURE__ */ import_react76.default.createElement(Accordion.Toggle, {
+      }, /* @__PURE__ */ import_react77.default.createElement(Accordion.Toggle, {
         panelId: key,
         onChange: onGroupToggled
-      }), renderGroupName(key, group))), /* @__PURE__ */ import_react76.default.createElement(DataList.Row, {
+      }), renderGroupName(key, group))), /* @__PURE__ */ import_react77.default.createElement(DataList.Row, {
         subgroup: true
-      }, /* @__PURE__ */ import_react76.default.createElement(Accordion.UnanimatedPanel, {
+      }, /* @__PURE__ */ import_react77.default.createElement(Accordion.UnanimatedPanel, {
         panelId: key
-      }, /* @__PURE__ */ import_react76.default.createElement(DataListGroup, __spreadProps(__spreadValues({
+      }, /* @__PURE__ */ import_react77.default.createElement(DataListGroup, __spreadProps(__spreadValues({
         key,
         groupKey: key,
         level: level + 1
@@ -11875,26 +11984,26 @@ var DataListGroup = (_a) => {
 };
 
 // src/molecules/DataList/DataListSkeleton.tsx
-var import_react77 = __toESM(require("react"));
+var import_react78 = __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_react77.default.createElement(Template, {
+  return /* @__PURE__ */ import_react78.default.createElement(Template, {
     role: "table",
     columns
-  }, /* @__PURE__ */ import_react77.default.createElement(DataList.Row, null, columnsAmount.map((_, index) => /* @__PURE__ */ import_react77.default.createElement(DataList.HeadCell, {
+  }, /* @__PURE__ */ import_react78.default.createElement(DataList.Row, null, columnsAmount.map((_, index) => /* @__PURE__ */ import_react78.default.createElement(DataList.HeadCell, {
     key: index
-  }, /* @__PURE__ */ import_react77.default.createElement(Skeleton, {
+  }, /* @__PURE__ */ import_react78.default.createElement(Skeleton, {
     width: "100%",
     height: 17.5
-  })))), /* @__PURE__ */ import_react77.default.createElement(List, {
+  })))), /* @__PURE__ */ import_react78.default.createElement(List, {
     items: [...Array(rows).keys()],
-    renderItem: (item) => /* @__PURE__ */ import_react77.default.createElement(DataList.Row, {
+    renderItem: (item) => /* @__PURE__ */ import_react78.default.createElement(DataList.Row, {
       key: item
-    }, /* @__PURE__ */ import_react77.default.createElement(List, {
+    }, /* @__PURE__ */ import_react78.default.createElement(List, {
       items: columnsAmount,
-      renderItem: (key) => /* @__PURE__ */ import_react77.default.createElement(DataList.Cell, {
+      renderItem: (key) => /* @__PURE__ */ import_react78.default.createElement(DataList.Cell, {
         key
-      }, /* @__PURE__ */ import_react77.default.createElement(Skeleton, {
+      }, /* @__PURE__ */ import_react78.default.createElement(Skeleton, {
         width: "100%",
         height: 17.5
       }))
@@ -11903,7 +12012,7 @@ var DataListSkeleton = ({ columns = ["1", "2", "2", 52], rows = 5 }) => {
 };
 
 // src/molecules/DataList/DataListToolbar.tsx
-var import_react78 = __toESM(require("react"));
+var import_react79 = __toESM(require("react"));
 var import_castArray = __toESM(require("lodash/castArray"));
 var DataListToolbar = ({
   actions: _actions,
@@ -11916,19 +12025,19 @@ var DataListToolbar = ({
   var _a;
   const { selectedRows } = useDataListContext();
   const actions = (0, import_castArray.default)(_actions).filter(Boolean);
-  return /* @__PURE__ */ import_react78.default.createElement(DataList.Toolbar.Container, {
+  return /* @__PURE__ */ import_react79.default.createElement(DataList.Toolbar.Container, {
     sticky
-  }, /* @__PURE__ */ import_react78.default.createElement(DataList.Toolbar.Group, null, /* @__PURE__ */ import_react78.default.createElement(DataList.Toolbar.SelectionCount, null, (_a = selectedRows == null ? void 0 : selectedRows.length) != null ? _a : 0, " selected")), actions.length > 0 && /* @__PURE__ */ import_react78.default.createElement(DataList.Toolbar.Group, null, /* @__PURE__ */ import_react78.default.createElement(DataList.Toolbar.Actions, null, actions.map(
+  }, /* @__PURE__ */ import_react79.default.createElement(DataList.Toolbar.Group, null, /* @__PURE__ */ import_react79.default.createElement(DataList.Toolbar.SelectionCount, null, (_a = selectedRows == null ? void 0 : selectedRows.length) != null ? _a : 0, " selected")), actions.length > 0 && /* @__PURE__ */ import_react79.default.createElement(DataList.Toolbar.Group, null, /* @__PURE__ */ import_react79.default.createElement(DataList.Toolbar.Actions, null, actions.map(
     (action) => renderAction({
       kind: "ghost",
       dense: true,
       action: __spreadProps(__spreadValues({}, action), { onClick: () => action.onClick(selectedRows != null ? selectedRows : []) })
     })
-  ))), menu && /* @__PURE__ */ import_react78.default.createElement(DataList.Toolbar.Group, null, /* @__PURE__ */ import_react78.default.createElement(DropdownMenu2, {
+  ))), menu && /* @__PURE__ */ import_react79.default.createElement(DataList.Toolbar.Group, null, /* @__PURE__ */ import_react79.default.createElement(DropdownMenu2, {
     placement: defaultContextualMenuPlacement,
     onAction: (key) => onAction == null ? void 0 : onAction(key, selectedRows != null ? selectedRows : []),
     onOpenChange: onMenuOpenChange
-  }, /* @__PURE__ */ import_react78.default.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ import_react78.default.createElement(Button.GhostDropdown, {
+  }, /* @__PURE__ */ import_react79.default.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ import_react79.default.createElement(Button.GhostDropdown, {
     dense: true
   }, menuLabel)), menu)));
 };
@@ -11996,6 +12105,9 @@ var DataList2 = (_a) => {
     "toolbar"
   ]);
   var _a2, _b2;
+  const containerRef = (0, import_react80.useRef)(null);
+  const hasStickyColumns = columns.some((column) => column.sticky);
+  const stickyStyles = useScrollStyles({ containerRef, skip: !hasStickyColumns });
   const [selected, setSelected] = (0, import_utils15.useControlledState)(
     selectedRows,
     defaultSelectedRows,
@@ -12018,11 +12130,11 @@ var DataList2 = (_a) => {
     }),
     menu ? "fit-content(28px)" : void 0
   ]);
-  const PaginationFooter = import_react79.default.useCallback(
-    ({ children }) => /* @__PURE__ */ import_react79.default.createElement("div", {
+  const PaginationFooter = import_react80.default.useCallback(
+    ({ children }) => /* @__PURE__ */ import_react80.default.createElement("div", {
       style: { gridColumn: "1 / -1" },
       role: "row"
-    }, /* @__PURE__ */ import_react79.default.createElement("div", {
+    }, /* @__PURE__ */ import_react80.default.createElement("div", {
       role: "cell"
     }, children)),
     []
@@ -12041,21 +12153,24 @@ var DataList2 = (_a) => {
     allRows.map((row, index) => (disabled == null ? void 0 : disabled(row, index, sortedRows)) ? void 0 : row.id)
   );
   const allRowsSelected = totalSelected >= allEnabledRowIds.length;
-  return /* @__PURE__ */ import_react79.default.createElement(DataListContext.Provider, {
+  return /* @__PURE__ */ import_react80.default.createElement(DataListContext.Provider, {
     value: {
       rows: (0, import_isArray3.default)(rows) ? sortedRows : rows,
       selectedRows: selected
     }
-  }, /* @__PURE__ */ import_react79.default.createElement(Template, {
+  }, /* @__PURE__ */ import_react80.default.createElement("div", {
+    className: "relative w-full overflow-x-auto",
+    ref: containerRef
+  }, /* @__PURE__ */ import_react80.default.createElement(Template, {
     className: "Aquarium-DataList",
     columns: templateColumns,
     role: "table"
-  }, !hideHeader && /* @__PURE__ */ import_react79.default.createElement(import_react79.default.Fragment, null, /* @__PURE__ */ import_react79.default.createElement(DataList.Row, {
+  }, !hideHeader && /* @__PURE__ */ import_react80.default.createElement(import_react80.default.Fragment, null, /* @__PURE__ */ import_react80.default.createElement(DataList.Row, {
     header: true
-  }, selectable && /* @__PURE__ */ import_react79.default.createElement(DataList.HeadCell, {
+  }, selectable && /* @__PURE__ */ import_react80.default.createElement(DataList.HeadCell, {
     align: "left",
     sticky
-  }, /* @__PURE__ */ import_react79.default.createElement(Checkbox, {
+  }, /* @__PURE__ */ import_react80.default.createElement(Checkbox, {
     "aria-label": "Select all rows",
     indeterminate: totalSelected > 0 && totalSelected < allRows.length,
     checked: totalSelected > 0,
@@ -12066,36 +12181,41 @@ var DataList2 = (_a) => {
         setSelected([]);
       }
     }
-  })), isCollapsible && /* @__PURE__ */ import_react79.default.createElement(DataList.HeadCell, {
+  })), isCollapsible && /* @__PURE__ */ import_react80.default.createElement(DataList.HeadCell, {
     align: "left",
     sticky
   }), columns.map((column) => {
-    const content = column.headerTooltip ? /* @__PURE__ */ import_react79.default.createElement(Tooltip, {
+    const content = column.headerTooltip ? /* @__PURE__ */ import_react80.default.createElement(Tooltip, {
       placement: column.headerTooltip.placement,
       content: column.headerTooltip.content
     }, column.headerName) : column.headerName;
-    const headerContentAndIcon = column.icon ? /* @__PURE__ */ import_react79.default.createElement(Box.Flex, {
+    const headerContentAndIcon = column.icon ? /* @__PURE__ */ import_react80.default.createElement(Box.Flex, {
       flexDirection: "row",
       gap: "3",
       alignItems: "center"
-    }, /* @__PURE__ */ import_react79.default.createElement(InlineIcon, {
+    }, /* @__PURE__ */ import_react80.default.createElement(InlineIcon, {
       icon: column.icon,
       height: "22",
       color: "default",
       "aria-hidden": true
     }), content) : content;
-    return columnIsFieldColumn(column) && column.sortable || column.sort ? /* @__PURE__ */ import_react79.default.createElement(DataList.SortCell, __spreadValues({
+    const cell = columnIsFieldColumn(column) && column.sortable || column.sort ? /* @__PURE__ */ import_react80.default.createElement(DataList.SortCell, __spreadValues({
       direction: sort && sort.column.headerName === column.headerName ? sort.direction : "none",
       onClick: () => updateSort(column),
       sticky
-    }, cellProps(column)), headerContentAndIcon) : /* @__PURE__ */ import_react79.default.createElement(DataList.HeadCell, __spreadProps(__spreadValues({}, cellProps(column)), {
+    }, cellProps(column)), headerContentAndIcon) : /* @__PURE__ */ import_react80.default.createElement(DataList.HeadCell, __spreadProps(__spreadValues({}, cellProps(column)), {
       sticky
     }), headerContentAndIcon);
-  }), menu && /* @__PURE__ */ import_react79.default.createElement(DataList.HeadCell, {
+    return createAnimatedCell({
+      cellElement: cell,
+      stickyStyles,
+      stickyColumn: cellProps(column).stickyColumn
+    });
+  }), menu && /* @__PURE__ */ import_react80.default.createElement(DataList.HeadCell, {
     align: "right",
     "aria-label": menuAriaLabel,
     sticky
-  }, menuHeaderName)), toolbar), groups && /* @__PURE__ */ import_react79.default.createElement(DataListGroup, {
+  }, menuHeaderName)), toolbar), groups && /* @__PURE__ */ import_react80.default.createElement(DataListGroup, {
     columns,
     disabled,
     getGroupRow,
@@ -12117,7 +12237,7 @@ var DataList2 = (_a) => {
     groups,
     groupKey: void 0,
     level: 0
-  }), !groups && /* @__PURE__ */ import_react79.default.createElement(List, __spreadProps(__spreadValues({}, rest), {
+  }), !groups && /* @__PURE__ */ import_react80.default.createElement(List, __spreadProps(__spreadValues({}, rest), {
     paginationContainer: PaginationFooter,
     items: sortedRows,
     renderItem: (row, index) => {
@@ -12126,14 +12246,15 @@ var DataList2 = (_a) => {
       const isChecked = (_a3 = selected == null ? void 0 : selected.includes(row.id)) != null ? _a3 : false;
       const isSelectionDisabled = selectionDisabled == null ? void 0 : selectionDisabled(row, index, sortedRows);
       const isDisabled = disabled == null ? void 0 : disabled(row, index, sortedRows);
-      const content = /* @__PURE__ */ import_react79.default.createElement(DataListRow, {
+      const content = /* @__PURE__ */ import_react80.default.createElement(DataListRow, {
         key: row.id,
         columns,
         row,
         index,
         rows: sortedRows,
         active: selectable && isChecked,
-        menu: /* @__PURE__ */ import_react79.default.createElement(DataListRowMenu, {
+        stickyStyles,
+        menu: /* @__PURE__ */ import_react80.default.createElement(DataListRowMenu, {
           row,
           index,
           menu,
@@ -12149,12 +12270,12 @@ var DataList2 = (_a) => {
           } : {};
         },
         renderFirstColumn: (row2, index2) => {
-          return /* @__PURE__ */ import_react79.default.createElement(import_react79.default.Fragment, null, selectable && /* @__PURE__ */ import_react79.default.createElement(DataList.Cell, null, /* @__PURE__ */ import_react79.default.createElement(Checkbox, {
+          return /* @__PURE__ */ import_react80.default.createElement(import_react80.default.Fragment, null, selectable && /* @__PURE__ */ import_react80.default.createElement(DataList.Cell, null, /* @__PURE__ */ import_react80.default.createElement(Checkbox, {
             "aria-label": getRowCheckboxLabel(row2, index2, isChecked, sortedRows),
             onChange: handleSelectionChange(row2.id),
             checked: isChecked,
             disabled: isDisabled || isSelectionDisabled
-          })), rowDetails !== void 0 && /* @__PURE__ */ import_react79.default.createElement(DataList.Cell, null, details && /* @__PURE__ */ import_react79.default.createElement(Accordion.Toggle, {
+          })), rowDetails !== void 0 && /* @__PURE__ */ import_react80.default.createElement(DataList.Cell, null, details && /* @__PURE__ */ import_react80.default.createElement(Accordion.Toggle, {
             panelId: row2.id.toString(),
             onChange: onGroupToggled
           })));
@@ -12163,36 +12284,37 @@ var DataList2 = (_a) => {
       if (!details) {
         return content;
       }
-      return /* @__PURE__ */ import_react79.default.createElement(Accordion, {
+      return /* @__PURE__ */ import_react80.default.createElement(Accordion, {
         key: row.id,
         openPanelId: expandedGroupIds ? expandedGroupIds.find((id) => id === row.id) || null : void 0
-      }, content, /* @__PURE__ */ import_react79.default.createElement(Accordion.Panel, {
+      }, content, /* @__PURE__ */ import_react80.default.createElement(Accordion.Panel, {
         role: "row",
         panelId: row.id.toString(),
         className: tw("col-span-full bg-muted border-b border-default"),
         "aria-label": `row ${row.id.toString()} details`
-      }, /* @__PURE__ */ import_react79.default.createElement("div", {
+      }, /* @__PURE__ */ import_react80.default.createElement("div", {
         role: "cell"
       }, details)));
     }
-  }))));
+  })))));
 };
 DataList2.Skeleton = DataListSkeleton;
 DataList2.Toolbar = DataListToolbar;
 
 // src/molecules/DataTable/DataTable.tsx
-var import_react82 = __toESM(require("react"));
+var import_react83 = __toESM(require("react"));
+var import_classnames8 = __toESM(require("classnames"));
 var import_compact2 = __toESM(require("lodash/compact"));
 var import_isFunction4 = __toESM(require("lodash/isFunction"));
 
 // src/molecules/Table/Table.tsx
-var import_react81 = __toESM(require("react"));
+var import_react82 = __toESM(require("react"));
 
 // src/utils/table/useScrollTarget.ts
-var import_react80 = __toESM(require("react"));
+var import_react81 = __toESM(require("react"));
 var useScrollTarget = (callback) => {
-  const targetRef = import_react80.default.useRef(null);
-  import_react80.default.useLayoutEffect(() => {
+  const targetRef = import_react81.default.useRef(null);
+  import_react81.default.useLayoutEffect(() => {
     const observer = new IntersectionObserver((entries) => entries[0].isIntersecting && callback && callback(), {
       root: null,
       rootMargin: `0px 0px 200px 0px`
@@ -12210,12 +12332,12 @@ var Table2 = (_a) => {
   var _b = _a, { children, onPrev, onNext } = _b, rest = __objRest(_b, ["children", "onPrev", "onNext"]);
   const bottomRef = useScrollTarget(onNext);
   const topRef = useScrollTarget(onPrev);
-  return /* @__PURE__ */ import_react81.default.createElement("div", {
+  return /* @__PURE__ */ import_react82.default.createElement("div", {
     className: classNames("Aquarium-Table", tw("relative w-full"))
-  }, /* @__PURE__ */ import_react81.default.createElement("div", {
+  }, /* @__PURE__ */ import_react82.default.createElement("div", {
     ref: topRef,
     className: tw("absolute top-0 h-1 w-full left-0 bg-transparent")
-  }), /* @__PURE__ */ import_react81.default.createElement(Table, __spreadValues({}, rest), children), /* @__PURE__ */ import_react81.default.createElement("div", {
+  }), /* @__PURE__ */ import_react82.default.createElement(Table, __spreadValues({}, rest), children), /* @__PURE__ */ import_react82.default.createElement("div", {
     ref: bottomRef,
     className: tw("absolute bottom-0 h-1 w-full left-0 bg-transparent")
   }));
@@ -12269,6 +12391,9 @@ var DataTable = (_a) => {
     "onPrev"
   ]);
   var _a2;
+  const containerRef = (0, import_react83.useRef)(null);
+  const hasStickyColumns = columns.some((column) => column.sticky);
+  const stickyStyles = useScrollStyles({ containerRef, skip: !hasStickyColumns });
   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(
@@ -12276,17 +12401,20 @@ var DataTable = (_a) => {
   );
   const sortedRows = sortRowsBy(rows, sort);
   const amountOfColumns = columns.length + (menu ? 1 : 0);
-  const PaginationFooter = import_react82.default.useCallback(
-    ({ children }) => /* @__PURE__ */ import_react82.default.createElement("tfoot", null, /* @__PURE__ */ import_react82.default.createElement("tr", null, /* @__PURE__ */ import_react82.default.createElement("td", {
+  const PaginationFooter = import_react83.default.useCallback(
+    ({ children }) => /* @__PURE__ */ import_react83.default.createElement("tfoot", null, /* @__PURE__ */ import_react83.default.createElement("tr", null, /* @__PURE__ */ import_react83.default.createElement("td", {
       colSpan: amountOfColumns
     }, children))),
     [amountOfColumns]
   );
-  return /* @__PURE__ */ import_react82.default.createElement(Table2, {
+  return /* @__PURE__ */ import_react83.default.createElement("div", {
+    className: "relative w-full overflow-x-auto",
+    ref: containerRef
+  }, /* @__PURE__ */ import_react83.default.createElement(Table2, {
     ariaLabel,
     onNext,
     onPrev,
-    className: classNames(
+    className: (0, import_classnames8.default)(
       "Aquarium-DataTable",
       tw({
         "whitespace-nowrap": noWrap,
@@ -12294,40 +12422,45 @@ var DataTable = (_a) => {
         "table-fixed": layout === "fixed"
       })
     )
-  }, /* @__PURE__ */ import_react82.default.createElement(Table2.Head, {
+  }, /* @__PURE__ */ import_react83.default.createElement(Table2.Head, {
     sticky
   }, (0, import_compact2.default)([
     ...columns.map((column) => {
-      const content = column.headerTooltip && !column.headerInvisible ? /* @__PURE__ */ import_react82.default.createElement(Tooltip, {
+      const content = column.headerTooltip && !column.headerInvisible ? /* @__PURE__ */ import_react83.default.createElement(Tooltip, {
         placement: column.headerTooltip.placement,
         content: column.headerTooltip.content
       }, column.headerName) : !column.headerInvisible && column.headerName;
-      const headerContentAndIcon = !column.headerInvisible && column.icon ? /* @__PURE__ */ import_react82.default.createElement(Box.Flex, {
+      const headerContentAndIcon = !column.headerInvisible && column.icon ? /* @__PURE__ */ import_react83.default.createElement(Box.Flex, {
         flexDirection: "row",
         gap: "3",
         alignItems: "center"
-      }, /* @__PURE__ */ import_react82.default.createElement(InlineIcon, {
+      }, /* @__PURE__ */ import_react83.default.createElement(InlineIcon, {
         icon: column.icon,
         height: "22",
         color: "default",
         "aria-hidden": true
       }), content) : content;
-      return columnIsFieldColumn(column) && column.sortable || column.sort ? /* @__PURE__ */ import_react82.default.createElement(Table2.SortCell, __spreadValues({
+      const cell = columnIsFieldColumn(column) && column.sortable || column.sort ? /* @__PURE__ */ import_react83.default.createElement(Table2.SortCell, __spreadValues({
         direction: sort && sort.column.headerName === column.headerName ? sort.direction : "none",
         onClick: () => updateSort(column),
         style: { width: column.width },
         "aria-label": column.headerInvisible ? column.headerName : void 0
-      }, cellProps(column)), headerContentAndIcon) : /* @__PURE__ */ import_react82.default.createElement(Table2.Cell, __spreadProps(__spreadValues({}, cellProps(column)), {
+      }, cellProps(column)), headerContentAndIcon) : /* @__PURE__ */ import_react83.default.createElement(Table2.Cell, __spreadProps(__spreadValues({}, cellProps(column)), {
         style: { width: column.width },
         "aria-label": column.headerInvisible ? column.headerName : void 0
       }), headerContentAndIcon);
+      return createAnimatedCell({
+        cellElement: cell,
+        stickyStyles,
+        stickyColumn: cellProps(column).stickyColumn
+      });
     }),
-    menu ? /* @__PURE__ */ import_react82.default.createElement(Table2.Cell, {
+    menu ? /* @__PURE__ */ import_react83.default.createElement(Table2.Cell, {
       key: "__contextMenu",
       align: "right",
       "aria-label": menuAriaLabel
     }, menuHeaderName) : null
-  ])), /* @__PURE__ */ import_react82.default.createElement(List, __spreadProps(__spreadValues({
+  ])), /* @__PURE__ */ import_react83.default.createElement(List, __spreadProps(__spreadValues({
     container: Table2.Body,
     paginationContainer: PaginationFooter
   }, rest), {
@@ -12335,15 +12468,21 @@ var DataTable = (_a) => {
     renderItem: (row, index) => {
       var _a3;
       const isRowDisabled = (_a3 = disabled == null ? void 0 : disabled(row, index, sortedRows)) != null ? _a3 : false;
-      return /* @__PURE__ */ import_react82.default.createElement(Table2.Row, {
+      return /* @__PURE__ */ import_react83.default.createElement(Table2.Row, {
         key: row.id,
         disabled: isRowDisabled
-      }, /* @__PURE__ */ import_react82.default.createElement(List, {
+      }, /* @__PURE__ */ import_react83.default.createElement(List, {
         items: columns,
-        renderItem: (column) => /* @__PURE__ */ import_react82.default.createElement(Table2.Cell, __spreadValues({}, cellProps(column)), renderCell(column, row, index, sortedRows))
+        renderItem: (column) => {
+          return createAnimatedCell({
+            cellElement: /* @__PURE__ */ import_react83.default.createElement(Table2.Cell, __spreadValues({}, cellProps(column)), renderCell(column, row, index, sortedRows)),
+            stickyStyles,
+            stickyColumn: cellProps(column).stickyColumn
+          });
+        }
       }), renderRowMenu(row, index, { menu, menuAriaLabel, onAction, onMenuOpenChange }));
     }
-  })));
+  }))));
 };
 var renderRowMenu = (row, index, {
   menu,
@@ -12353,13 +12492,13 @@ var renderRowMenu = (row, index, {
 }) => {
   if (menu) {
     const menuContent = (0, import_isFunction4.default)(menu) ? menu(row, index) : menu;
-    return /* @__PURE__ */ import_react82.default.createElement(Table2.Cell, {
+    return /* @__PURE__ */ import_react83.default.createElement(Table2.Cell, {
       align: "right"
-    }, menuContent && /* @__PURE__ */ import_react82.default.createElement(DropdownMenu2, {
+    }, menuContent && /* @__PURE__ */ import_react83.default.createElement(DropdownMenu2, {
       placement: defaultContextualMenuPlacement,
       onAction: (action) => onAction == null ? void 0 : onAction(action, row, index),
       onOpenChange: onMenuOpenChange
-    }, /* @__PURE__ */ import_react82.default.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ import_react82.default.createElement(Button.Icon, {
+    }, /* @__PURE__ */ import_react83.default.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ import_react83.default.createElement(Button.Icon, {
       "aria-label": menuAriaLabel,
       icon: import_more3.default
     })), menuContent));
@@ -12372,14 +12511,14 @@ var renderCell = (column, row, index, rows) => {
   if (column.type === "status") {
     const status = column.status(row, index, rows);
     if (status) {
-      cellContent = /* @__PURE__ */ import_react82.default.createElement(StatusChip, __spreadValues({
+      cellContent = /* @__PURE__ */ import_react83.default.createElement(StatusChip, __spreadValues({
         dense: true
       }, status));
     }
   } else if (column.type === "action") {
     const action = renameProperty("text", "children", column.action(row, index, rows));
     if (action) {
-      cellContent = /* @__PURE__ */ import_react82.default.createElement(Button.Secondary, __spreadValues({
+      cellContent = /* @__PURE__ */ import_react83.default.createElement(Button.Secondary, __spreadValues({
         dense: true
       }, action));
     }
@@ -12388,19 +12527,19 @@ var renderCell = (column, row, index, rows) => {
   } else if (column.type === "item") {
     const item = column.item(row, index, rows);
     if (item) {
-      cellContent = /* @__PURE__ */ import_react82.default.createElement(Item2, __spreadValues({}, item));
+      cellContent = /* @__PURE__ */ import_react83.default.createElement(Item2, __spreadValues({}, item));
     }
   } else if (column.formatter) {
     cellContent = column.formatter(row[column.field], row, index, rows);
   } else {
     cellContent = row[column.field];
   }
-  return column.tooltip ? /* @__PURE__ */ import_react82.default.createElement(Tooltip, __spreadValues({}, column.tooltip(row, index, rows)), cellContent) : cellContent;
+  return column.tooltip ? /* @__PURE__ */ import_react83.default.createElement(Tooltip, __spreadValues({}, column.tooltip(row, index, rows)), cellContent) : cellContent;
 };
 DataTable.Skeleton = DataListSkeleton;
 
 // src/molecules/Dialog/Dialog.tsx
-var import_react84 = __toESM(require("react"));
+var import_react85 = __toESM(require("react"));
 var import_dialog = require("@react-aria/dialog");
 var import_overlays6 = require("@react-aria/overlays");
 var import_utils19 = require("@react-aria/utils");
@@ -12427,7 +12566,7 @@ var DIALOG_ICONS_AND_COLORS = {
 };
 
 // src/atoms/Modal/Modal.tsx
-var import_react83 = __toESM(require("react"));
+var import_react84 = __toESM(require("react"));
 var Modal = (_a) => {
   var _b = _a, {
     children,
@@ -12440,7 +12579,7 @@ var Modal = (_a) => {
     "className",
     "open"
   ]);
-  return open ? /* @__PURE__ */ import_react83.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return open ? /* @__PURE__ */ import_react84.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       tw("inset-0 overflow-y-auto z-modal fixed"),
       {
@@ -12452,11 +12591,11 @@ var Modal = (_a) => {
 };
 Modal.BackDrop = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ import_react83.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react84.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("-z-10 fixed min-w-full min-h-full bg-primary-intense opacity-60"), className)
   }));
 };
-Modal.Dialog = import_react83.default.forwardRef(
+Modal.Dialog = import_react84.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { kind = "dialog", children, className, size = "sm" } = _b, rest = __objRest(_b, ["kind", "children", "className", "size"]);
     const commonClasses = tw("bg-popover-content max-h-full flex flex-col");
@@ -12470,7 +12609,7 @@ Modal.Dialog = import_react83.default.forwardRef(
       "w-[560px]": size === "md",
       "w-[1080px]": size === "full"
     });
-    return /* @__PURE__ */ import_react83.default.createElement("div", __spreadProps(__spreadValues({
+    return /* @__PURE__ */ import_react84.default.createElement("div", __spreadProps(__spreadValues({
       ref,
       "aria-modal": "true"
     }, rest), {
@@ -12480,34 +12619,34 @@ Modal.Dialog = import_react83.default.forwardRef(
 );
 Modal.Header = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ import_react83.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react84.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("pl-7 pr-[64px] py-6 gap-3 flex items-center"), className)
   }), children);
 };
 Modal.HeaderImage = (_a) => {
   var _b = _a, { backgroundImage, className } = _b, rest = __objRest(_b, ["backgroundImage", "className"]);
   const common = tw("h-[120px] min-h-[120px] w-full ");
-  return backgroundImage ? /* @__PURE__ */ import_react83.default.createElement("img", __spreadProps(__spreadValues({
+  return backgroundImage ? /* @__PURE__ */ import_react84.default.createElement("img", __spreadProps(__spreadValues({
     "aria-hidden": true,
     src: backgroundImage != null ? backgroundImage : void 0
   }, rest), {
     className: classNames(common, tw("object-cover"), className)
-  })) : /* @__PURE__ */ import_react83.default.createElement("div", {
+  })) : /* @__PURE__ */ import_react84.default.createElement("div", {
     className: classNames(common, tw("bg-default"), className)
   });
 };
 Modal.CloseButtonContainer = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ import_react83.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react84.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("absolute top-[24px] right-[28px]"), className)
   }));
 };
 Modal.Title = (_a) => {
   var _b = _a, { kind = "dialog", children, className } = _b, rest = __objRest(_b, ["kind", "children", "className"]);
-  return /* @__PURE__ */ import_react83.default.createElement(Typography, __spreadValues({
+  return /* @__PURE__ */ import_react84.default.createElement(Typography, __spreadValues({
     htmlTag: "h2",
     variant: "subheading",
-    color: "grey-90",
+    color: "intense",
     className: classNames(
       tw({
         "text-ellipsis overflow-x-hidden whitespace-nowrap": kind === "drawer"
@@ -12518,40 +12657,40 @@ Modal.Title = (_a) => {
 };
 Modal.Subtitle = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ import_react83.default.createElement(Typography, __spreadValues({
+  return /* @__PURE__ */ import_react84.default.createElement(Typography, __spreadValues({
     variant: "small",
-    color: "grey-60"
+    color: "default"
   }, rest), children);
 };
 Modal.TitleContainer = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ import_react83.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react84.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("flex flex-col grow"), className)
   }), children);
 };
 Modal.Body = (_a) => {
   var _b = _a, { children, className, noFooter = false, maxHeight, style } = _b, rest = __objRest(_b, ["children", "className", "noFooter", "maxHeight", "style"]);
-  return /* @__PURE__ */ import_react83.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react84.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("px-7 grow overflow-y-auto", { "pb-6": noFooter }), className),
     style: __spreadValues({ maxHeight }, style)
   }), children);
 };
 Modal.Footer = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ import_react83.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react84.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("px-7 py-6"), className)
   }), children);
 };
 Modal.Actions = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ import_react83.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react84.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("flex gap-4 justify-end"), className)
   }), children);
 };
 
 // src/molecules/Dialog/Dialog.tsx
 var Dialog = (props) => {
-  const ref = import_react84.default.useRef(null);
+  const ref = import_react85.default.useRef(null);
   const { open, onClose } = props;
   const state = (0, import_overlays7.useOverlayTriggerState)({ isOpen: open, onOpenChange: (isOpen) => !isOpen && (onClose == null ? void 0 : onClose()) });
   const { modalProps, underlayProps } = (0, import_overlays6.useModalOverlay)(
@@ -12562,13 +12701,13 @@ var Dialog = (props) => {
   if (!state.isOpen) {
     return null;
   }
-  return /* @__PURE__ */ import_react84.default.createElement(import_overlays6.Overlay, null, /* @__PURE__ */ import_react84.default.createElement(Modal, {
+  return /* @__PURE__ */ import_react85.default.createElement(import_overlays6.Overlay, null, /* @__PURE__ */ import_react85.default.createElement(Modal, {
     className: "Aquarium-Dialog",
     open: true
-  }, /* @__PURE__ */ import_react84.default.createElement(Modal.BackDrop, __spreadValues({}, underlayProps)), /* @__PURE__ */ import_react84.default.createElement(Modal.Dialog, __spreadValues({
+  }, /* @__PURE__ */ import_react85.default.createElement(Modal.BackDrop, __spreadValues({}, underlayProps)), /* @__PURE__ */ import_react85.default.createElement(Modal.Dialog, __spreadValues({
     ref,
     size: "sm"
-  }, modalProps), /* @__PURE__ */ import_react84.default.createElement(DialogWrapper, __spreadValues({}, props)))));
+  }, modalProps), /* @__PURE__ */ import_react85.default.createElement(DialogWrapper, __spreadValues({}, props)))));
 };
 var DialogWrapper = ({
   title,
@@ -12577,7 +12716,7 @@ var DialogWrapper = ({
   primaryAction,
   secondaryAction
 }) => {
-  const ref = import_react84.default.useRef(null);
+  const ref = import_react85.default.useRef(null);
   const labelledBy = (0, import_utils19.useId)();
   const describedBy = (0, import_utils19.useId)();
   const { dialogProps } = (0, import_dialog.useDialog)(
@@ -12588,52 +12727,52 @@ var DialogWrapper = ({
     },
     ref
   );
-  return /* @__PURE__ */ import_react84.default.createElement("div", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ import_react85.default.createElement("div", __spreadProps(__spreadValues({
     ref
   }, dialogProps), {
     className: tw("outline-none")
-  }), /* @__PURE__ */ import_react84.default.createElement(Modal.Header, {
+  }), /* @__PURE__ */ import_react85.default.createElement(Modal.Header, {
     className: tw("icon-stroke-2")
-  }, /* @__PURE__ */ import_react84.default.createElement(Icon, {
+  }, /* @__PURE__ */ import_react85.default.createElement(Icon, {
     icon: DIALOG_ICONS_AND_COLORS[type].icon,
     color: DIALOG_ICONS_AND_COLORS[type].color,
     fontSize: 20
-  }), /* @__PURE__ */ import_react84.default.createElement(Modal.Title, {
+  }), /* @__PURE__ */ import_react85.default.createElement(Modal.Title, {
     id: labelledBy,
     variant: "large",
     color: DIALOG_ICONS_AND_COLORS[type].color
-  }, title)), /* @__PURE__ */ import_react84.default.createElement(Modal.Body, {
+  }, title)), /* @__PURE__ */ import_react85.default.createElement(Modal.Body, {
     id: describedBy
-  }, /* @__PURE__ */ import_react84.default.createElement(Typography2.Default, null, children)), /* @__PURE__ */ import_react84.default.createElement(Modal.Footer, null, /* @__PURE__ */ import_react84.default.createElement(Modal.Actions, null, secondaryAction && /* @__PURE__ */ import_react84.default.createElement(Button.Ghost, __spreadValues({
+  }, /* @__PURE__ */ import_react85.default.createElement(Typography2.Default, null, children)), /* @__PURE__ */ import_react85.default.createElement(Modal.Footer, null, /* @__PURE__ */ import_react85.default.createElement(Modal.Actions, null, secondaryAction && /* @__PURE__ */ import_react85.default.createElement(Button.Ghost, __spreadValues({
     key: secondaryAction.text
-  }, (0, import_omit8.default)(secondaryAction, "text")), secondaryAction.text), /* @__PURE__ */ import_react84.default.createElement(Button.Secondary, __spreadValues({
+  }, (0, import_omit8.default)(secondaryAction, "text")), secondaryAction.text), /* @__PURE__ */ import_react85.default.createElement(Button.Secondary, __spreadValues({
     key: primaryAction.text
   }, (0, import_omit8.default)(primaryAction, "text")), primaryAction.text))));
 };
 
 // src/molecules/Drawer/Drawer.tsx
-var import_react86 = __toESM(require("react"));
+var import_react87 = __toESM(require("react"));
 var import_react_stately = require("react-stately");
 var import_dialog2 = require("@react-aria/dialog");
 var import_overlays8 = require("@react-aria/overlays");
 var import_utils20 = require("@react-aria/utils");
-var import_web4 = require("@react-spring/web");
+var import_web5 = require("@react-spring/web");
 var import_castArray3 = __toESM(require("lodash/castArray"));
 var import_omit9 = __toESM(require("lodash/omit"));
 
 // src/molecules/Tabs/Tabs.tsx
-var import_react85 = __toESM(require("react"));
+var import_react86 = __toESM(require("react"));
 var import_isNumber5 = __toESM(require("lodash/isNumber"));
 var import_kebabCase = __toESM(require("lodash/kebabCase"));
 var import_chevronLeft4 = __toESM(require_chevronLeft());
 var import_chevronRight4 = __toESM(require_chevronRight());
 var import_warningSign4 = __toESM(require_warningSign());
 var isTabComponent = (c) => {
-  return import_react85.default.isValidElement(c) && (c.type === Tab || c.type === ModalTab);
+  return import_react86.default.isValidElement(c) && (c.type === Tab || c.type === ModalTab);
 };
-var Tab = import_react85.default.forwardRef(
+var Tab = import_react86.default.forwardRef(
   ({ className, id, title, children }, ref) => {
-    return /* @__PURE__ */ import_react85.default.createElement("div", {
+    return /* @__PURE__ */ import_react86.default.createElement("div", {
       ref,
       id: `${id != null ? id : (0, import_kebabCase.default)(title)}-panel`,
       className,
@@ -12645,14 +12784,14 @@ var Tab = import_react85.default.forwardRef(
 );
 var TabContainer = (_a) => {
   var _b = _a, { className, children } = _b, rest = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ import_react85.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react86.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames("py-6 z-0", className)
   }), children);
 };
 var ModalTab = Tab;
 var ModalTabContainer = TabContainer;
 var asTabItem = (Component, displayName, { defaultUnderlineHidden } = {}) => {
-  const Tab2 = import_react85.default.forwardRef(
+  const Tab2 = import_react86.default.forwardRef(
     (_a, ref) => {
       var _b = _a, {
         id,
@@ -12684,17 +12823,17 @@ var asTabItem = (Component, displayName, { defaultUnderlineHidden } = {}) => {
       const _id = id != null ? id : (0, import_kebabCase.default)(title);
       let statusIcon = void 0;
       if (status === "warning") {
-        statusIcon = /* @__PURE__ */ import_react85.default.createElement(InlineIcon, {
+        statusIcon = /* @__PURE__ */ import_react86.default.createElement(InlineIcon, {
           icon: import_warningSign4.default,
           color: selected ? void 0 : "warning-default"
         });
       } else if (status === "error") {
-        statusIcon = /* @__PURE__ */ import_react85.default.createElement(InlineIcon, {
+        statusIcon = /* @__PURE__ */ import_react86.default.createElement(InlineIcon, {
           icon: import_warningSign4.default,
           color: selected ? void 0 : "danger-default"
         });
       }
-      const tab = /* @__PURE__ */ import_react85.default.createElement(Component, __spreadValues({
+      const tab = /* @__PURE__ */ import_react86.default.createElement(Component, __spreadValues({
         ref,
         id: `${_id}-tab`,
         onClick: () => !disabled && onSelected(value != null ? value : index),
@@ -12711,29 +12850,29 @@ var asTabItem = (Component, displayName, { defaultUnderlineHidden } = {}) => {
         "aria-selected": selected,
         "aria-controls": `${_id}-panel`,
         tabIndex: disabled ? void 0 : 0
-      }, rest), /* @__PURE__ */ import_react85.default.createElement(Typography2, {
+      }, rest), /* @__PURE__ */ import_react86.default.createElement(Typography2, {
         htmlTag: "div",
         variant: "small-strong",
-        color: selected ? "primary-80" : disabled ? "grey-20" : "current",
+        color: selected ? "primary-default" : disabled ? "default" : "current",
         className: tw("inline-flex items-center gap-3")
-      }, showNotification ? /* @__PURE__ */ import_react85.default.createElement(Badge.Notification, {
+      }, showNotification ? /* @__PURE__ */ import_react86.default.createElement(Badge.Notification, {
         right: "-4px",
         top: "3px"
-      }, /* @__PURE__ */ import_react85.default.createElement("span", {
+      }, /* @__PURE__ */ import_react86.default.createElement("span", {
         className: tw("whitespace-nowrap")
-      }, title)) : /* @__PURE__ */ import_react85.default.createElement("span", {
+      }, title)) : /* @__PURE__ */ import_react86.default.createElement("span", {
         className: tw("whitespace-nowrap")
-      }, title), (0, import_isNumber5.default)(badge) && /* @__PURE__ */ import_react85.default.createElement(Typography2, {
+      }, title), (0, import_isNumber5.default)(badge) && /* @__PURE__ */ import_react86.default.createElement(Typography2, {
         htmlTag: "span",
         variant: "small",
-        color: selected ? "primary-80" : "grey-5",
+        color: selected ? "primary-intense" : "grey-5",
         className: "leading-none"
-      }, /* @__PURE__ */ import_react85.default.createElement(TabBadge, {
+      }, /* @__PURE__ */ import_react86.default.createElement(TabBadge, {
         kind: "filled",
         value: badge,
         textClassname: classNames({ "text-white": selected, "text-muted": !selected })
       })), statusIcon));
-      return tooltip ? /* @__PURE__ */ import_react85.default.createElement(Tooltip, {
+      return tooltip ? /* @__PURE__ */ import_react86.default.createElement(Tooltip, {
         content: tooltip
       }, tab) : tab;
     }
@@ -12747,20 +12886,20 @@ var createTabsComponent = (TabComponent, TabItemComponent, displayName, renderCh
   const Tabs2 = (props) => {
     var _a, _b;
     const { className, value, defaultValue, onChange, children } = props;
-    const childArr = import_react85.default.Children.toArray(children);
+    const childArr = import_react86.default.Children.toArray(children);
     const firstTab = childArr[0];
     const firstTabValue = isTabComponent(firstTab) ? firstTab.props.value : -1;
-    const [selected, setSelected] = (0, import_react85.useState)((_b = (_a = value != null ? value : defaultValue) != null ? _a : firstTabValue) != null ? _b : 0);
-    const [leftCaret, showLeftCaret] = (0, import_react85.useState)(false);
-    const [rightCaret, showRightCaret] = (0, import_react85.useState)(false);
-    const parentRef = (0, import_react85.useRef)(null);
-    const containerRef = (0, import_react85.useRef)(null);
-    const tabsRef = (0, import_react85.useRef)(null);
+    const [selected, setSelected] = (0, import_react86.useState)((_b = (_a = value != null ? value : defaultValue) != null ? _a : firstTabValue) != null ? _b : 0);
+    const [leftCaret, showLeftCaret] = (0, import_react86.useState)(false);
+    const [rightCaret, showRightCaret] = (0, import_react86.useState)(false);
+    const parentRef = (0, import_react86.useRef)(null);
+    const containerRef = (0, import_react86.useRef)(null);
+    const tabsRef = (0, import_react86.useRef)(null);
     const revealSelectedTab = ({ smooth }) => {
       var _a2, _b2;
       const container = containerRef.current;
       const tabs = tabsRef.current;
-      const values = import_react85.default.Children.map(
+      const values = import_react86.default.Children.map(
         children,
         (tab, i) => {
           var _a3;
@@ -12794,15 +12933,15 @@ var createTabsComponent = (TabComponent, TabItemComponent, displayName, renderCh
       showLeftCaret(hasLeftCaret);
       showRightCaret(hasRightCaret);
     };
-    (0, import_react85.useEffect)(() => {
+    (0, import_react86.useEffect)(() => {
       if (value === void 0) {
         return;
       }
       updateCarets();
       setSelected(value);
       revealSelectedTab({ smooth: value !== selected });
-    }, [value, import_react85.default.Children.count(children)]);
-    (0, import_react85.useLayoutEffect)(() => {
+    }, [value, import_react86.default.Children.count(children)]);
+    (0, import_react86.useLayoutEffect)(() => {
       var _a2;
       updateCarets();
       (_a2 = containerRef.current) == null ? void 0 : _a2.addEventListener("scroll", updateCarets);
@@ -12865,27 +13004,27 @@ var createTabsComponent = (TabComponent, TabItemComponent, displayName, renderCh
     const handleSelected = (key) => {
       (onChange != null ? onChange : setSelected)(key);
     };
-    import_react85.default.Children.forEach(children, (c) => {
+    import_react86.default.Children.forEach(children, (c) => {
       if (c && !isTabComponent(c)) {
         throw new Error("<Tabs> can only have <Tabs.Tab> components as children");
       }
     });
-    return /* @__PURE__ */ import_react85.default.createElement("div", {
+    return /* @__PURE__ */ import_react86.default.createElement("div", {
       ref: parentRef,
       className: classNames("Aquarium-Tabs", tw("h-full"), className)
-    }, /* @__PURE__ */ import_react85.default.createElement("div", {
+    }, /* @__PURE__ */ import_react86.default.createElement("div", {
       className: tw("relative flex items-center border-b-2 border-default")
-    }, /* @__PURE__ */ import_react85.default.createElement("div", {
+    }, /* @__PURE__ */ import_react86.default.createElement("div", {
       ref: containerRef,
       className: tw("overflow-y-auto scrollbar-hide mb-[-2px] h-auto")
-    }, /* @__PURE__ */ import_react85.default.createElement("div", {
+    }, /* @__PURE__ */ import_react86.default.createElement("div", {
       ref: tabsRef,
       role: "tablist",
       "aria-label": "tabs",
       className: tw("inline-flex items-center cursor-pointer font-normal h-full")
-    }, import_react85.default.Children.map(
+    }, import_react86.default.Children.map(
       children,
-      (tab, index) => tab ? /* @__PURE__ */ import_react85.default.createElement(TabItemComponent, __spreadProps(__spreadValues({
+      (tab, index) => tab ? /* @__PURE__ */ import_react86.default.createElement(TabItemComponent, __spreadProps(__spreadValues({
         key: tab.props.value
       }, tab.props), {
         index,
@@ -12893,20 +13032,20 @@ var createTabsComponent = (TabComponent, TabItemComponent, displayName, renderCh
         onKeyDown: handleKeyDown,
         onSelected: handleSelected
       })) : void 0
-    ))), leftCaret && /* @__PURE__ */ import_react85.default.createElement("div", {
+    ))), leftCaret && /* @__PURE__ */ import_react86.default.createElement("div", {
       className: tw("absolute left-0 bg-gradient-to-r from-white via-white z-20 py-3 pr-4")
-    }, /* @__PURE__ */ import_react85.default.createElement("div", {
+    }, /* @__PURE__ */ import_react86.default.createElement("div", {
       onClick: () => handleScrollToNext("left"),
       className: tw("hover:bg-muted p-2 leading-none cursor-pointer")
-    }, /* @__PURE__ */ import_react85.default.createElement(InlineIcon, {
+    }, /* @__PURE__ */ import_react86.default.createElement(InlineIcon, {
       icon: import_chevronLeft4.default
-    }))), rightCaret && /* @__PURE__ */ import_react85.default.createElement("div", {
+    }))), rightCaret && /* @__PURE__ */ import_react86.default.createElement("div", {
       onClick: () => handleScrollToNext("right"),
       className: tw("absolute right-0 bg-gradient-to-l from-white via-white z-20 py-3 pl-4")
-    }, /* @__PURE__ */ import_react85.default.createElement("div", {
+    }, /* @__PURE__ */ import_react86.default.createElement("div", {
       onClick: () => handleScrollToNext("right"),
       className: tw("hover:bg-muted p-2 leading-none cursor-pointer")
-    }, /* @__PURE__ */ import_react85.default.createElement(InlineIcon, {
+    }, /* @__PURE__ */ import_react86.default.createElement(InlineIcon, {
       icon: import_chevronRight4.default
     })))), renderChildren(children, selected, props));
   };
@@ -12914,15 +13053,15 @@ var createTabsComponent = (TabComponent, TabItemComponent, displayName, renderCh
   Tabs2.Tab = TabComponent;
   return Tabs2;
 };
-var Tabs = createTabsComponent(Tab, TabItem, "Tabs", (children, selected) => /* @__PURE__ */ import_react85.default.createElement(TabContainer, null, children.find(
+var Tabs = createTabsComponent(Tab, TabItem, "Tabs", (children, selected) => /* @__PURE__ */ import_react86.default.createElement(TabContainer, null, children.find(
   (node, index) => (node == null ? void 0 : node.props.value) === selected || index === selected
 )));
 
 // src/molecules/Drawer/Drawer.tsx
 var import_cross6 = __toESM(require_cross());
 var import_more4 = __toESM(require_more());
-var AnimatedBackDrop = (0, import_web4.animated)(Modal.BackDrop);
-var AnimatedDialog = (0, import_web4.animated)(Modal.Dialog);
+var AnimatedBackDrop = (0, import_web5.animated)(Modal.BackDrop);
+var AnimatedDialog = (0, import_web5.animated)(Modal.Dialog);
 var WIDTHS = {
   sm: 360,
   md: 560,
@@ -12931,8 +13070,8 @@ var WIDTHS = {
 var Drawer = (_a) => {
   var _b = _a, { open, closeOnEsc = true } = _b, props = __objRest(_b, ["open", "closeOnEsc"]);
   const { onClose, size = "sm", portalContainer } = props;
-  const [hidden, setHidden] = import_react86.default.useState(!open);
-  const ref = import_react86.default.useRef(null);
+  const [hidden, setHidden] = import_react87.default.useState(!open);
+  const ref = import_react87.default.useRef(null);
   const state = (0, import_react_stately.useOverlayTriggerState)({ isOpen: !hidden, onOpenChange: (isOpen) => !isOpen && onClose() });
   if (open && hidden) {
     setHidden(!open);
@@ -12942,7 +13081,7 @@ var Drawer = (_a) => {
     state,
     ref
   );
-  const { opacity, right } = (0, import_web4.useSpring)({
+  const { opacity, right } = (0, import_web5.useSpring)({
     right: open ? "0px" : `-${WIDTHS[size]}px`,
     opacity: open ? 0.6 : 0,
     config: {
@@ -12959,21 +13098,21 @@ var Drawer = (_a) => {
   if (!state.isOpen) {
     return null;
   }
-  return /* @__PURE__ */ import_react86.default.createElement(import_overlays8.Overlay, {
+  return /* @__PURE__ */ import_react87.default.createElement(import_overlays8.Overlay, {
     portalContainer
-  }, /* @__PURE__ */ import_react86.default.createElement(Modal, {
+  }, /* @__PURE__ */ import_react87.default.createElement(Modal, {
     kind: "drawer",
     className: "Aquarium-Drawer overflow-x-hidden",
     open: true
-  }, /* @__PURE__ */ import_react86.default.createElement(AnimatedBackDrop, __spreadValues({
+  }, /* @__PURE__ */ import_react87.default.createElement(AnimatedBackDrop, __spreadValues({
     style: { opacity }
-  }, underlayProps)), /* @__PURE__ */ import_react86.default.createElement(DrawerWrapper, __spreadProps(__spreadValues(__spreadValues({
+  }, underlayProps)), /* @__PURE__ */ import_react87.default.createElement(DrawerWrapper, __spreadProps(__spreadValues(__spreadValues({
     ref
   }, props), modalProps), {
     spring: { right }
   }))));
 };
-var DrawerWrapper = import_react86.default.forwardRef(
+var DrawerWrapper = import_react87.default.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       title,
@@ -13010,76 +13149,76 @@ var DrawerWrapper = import_react86.default.forwardRef(
       ref
     );
     const dialogSize = size === "lg" ? "full" : size;
-    const childElements = import_react86.default.Children.toArray(children).filter(import_react86.default.isValidElement);
+    const childElements = import_react87.default.Children.toArray(children).filter(import_react87.default.isValidElement);
     const onlyChild = childElements.length === 1 ? childElements[0] : null;
     const hasTabs = isComponentType(onlyChild, Tabs);
-    return /* @__PURE__ */ import_react86.default.createElement(AnimatedDialog, __spreadProps(__spreadValues(__spreadValues({
+    return /* @__PURE__ */ import_react87.default.createElement(AnimatedDialog, __spreadProps(__spreadValues(__spreadValues({
       ref,
       kind: "drawer",
       "aria-modal": "true",
       size: dialogSize
     }, props), dialogProps), {
       style: { position: "fixed", right: spring.right }
-    }), /* @__PURE__ */ import_react86.default.createElement(Modal.CloseButtonContainer, null, /* @__PURE__ */ import_react86.default.createElement(Button.Icon, {
+    }), /* @__PURE__ */ import_react87.default.createElement(Modal.CloseButtonContainer, null, /* @__PURE__ */ import_react87.default.createElement(Button.Icon, {
       "aria-label": "Close",
       icon: import_cross6.default,
       onClick: onClose
-    })), /* @__PURE__ */ import_react86.default.createElement(Modal.Header, {
+    })), /* @__PURE__ */ import_react87.default.createElement(Modal.Header, {
       className: tw({ "pb-3": hasTabs })
-    }, /* @__PURE__ */ import_react86.default.createElement(Modal.Title, {
+    }, /* @__PURE__ */ import_react87.default.createElement(Modal.Title, {
       id: labelledBy,
       kind: "drawer"
-    }, title)), hasTabs ? /* @__PURE__ */ import_react86.default.createElement(DrawerTabs, __spreadProps(__spreadValues({}, onlyChild.props), {
+    }, title)), hasTabs ? /* @__PURE__ */ import_react87.default.createElement(DrawerTabs, __spreadProps(__spreadValues({}, onlyChild.props), {
       className: tw("[&>div:first-child]:px-5 grow flex flex-col overflow-y-auto")
-    })) : /* @__PURE__ */ import_react86.default.createElement(Modal.Body, {
+    })) : /* @__PURE__ */ import_react87.default.createElement(Modal.Body, {
       id: describedBy,
       tabIndex: 0,
       noFooter: !(secondaryActions || primaryAction)
-    }, children), (secondaryActions || primaryAction) && /* @__PURE__ */ import_react86.default.createElement(Modal.Footer, null, /* @__PURE__ */ import_react86.default.createElement(Modal.Actions, {
+    }, children), (secondaryActions || primaryAction) && /* @__PURE__ */ import_react87.default.createElement(Modal.Footer, null, /* @__PURE__ */ import_react87.default.createElement(Modal.Actions, {
       className: size === "sm" ? tw("flex-col") : void 0
-    }, size !== "sm" && menu && /* @__PURE__ */ import_react86.default.createElement(Box.Flex, {
+    }, size !== "sm" && menu && /* @__PURE__ */ import_react87.default.createElement(Box.Flex, {
       alignItems: "center"
-    }, /* @__PURE__ */ import_react86.default.createElement(DropdownMenu2, {
+    }, /* @__PURE__ */ import_react87.default.createElement(DropdownMenu2, {
       onAction: (action) => onAction == null ? void 0 : onAction(action),
       onOpenChange: onMenuOpenChange
-    }, /* @__PURE__ */ import_react86.default.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ import_react86.default.createElement(Button.Icon, {
+    }, /* @__PURE__ */ import_react87.default.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ import_react87.default.createElement(Button.Icon, {
       "aria-label": (_a2 = menuAriaLabel != null ? menuAriaLabel : menuLabel) != null ? _a2 : "Context menu",
       icon: import_more4.default
     })), menu)), secondaryActions && (0, import_castArray3.default)(secondaryActions).filter(Boolean).map((_b2) => {
       var _c = _b2, { text } = _c, action = __objRest(_c, ["text"]);
-      return /* @__PURE__ */ import_react86.default.createElement(Button.Secondary, __spreadValues({
+      return /* @__PURE__ */ import_react87.default.createElement(Button.Secondary, __spreadValues({
         key: text
       }, action), text);
-    }), primaryAction && /* @__PURE__ */ import_react86.default.createElement(Button.Primary, __spreadValues({
+    }), primaryAction && /* @__PURE__ */ import_react87.default.createElement(Button.Primary, __spreadValues({
       key: primaryAction.text
     }, (0, import_omit9.default)(primaryAction, "text")), primaryAction.text))));
   }
 );
-var DrawerTabs = createTabsComponent(ModalTab, TabItem, "DrawerTabs", (children, selected) => /* @__PURE__ */ import_react86.default.createElement(Modal.Body, {
+var DrawerTabs = createTabsComponent(ModalTab, TabItem, "DrawerTabs", (children, selected) => /* @__PURE__ */ import_react87.default.createElement(Modal.Body, {
   className: tw("h-full")
-}, /* @__PURE__ */ import_react86.default.createElement(ModalTabContainer, null, children.find(
+}, /* @__PURE__ */ import_react87.default.createElement(ModalTabContainer, null, children.find(
   (node, index) => (node == null ? void 0 : node.props.value) === selected || index === selected
 ))));
 
 // src/molecules/Dropdown/Dropdown.tsx
-var import_react90 = __toESM(require("react"));
+var import_react91 = __toESM(require("react"));
 
 // src/molecules/Popover/Popover.tsx
-var import_react89 = __toESM(require("react"));
+var import_react90 = __toESM(require("react"));
 var import_interactions3 = require("@react-aria/interactions");
 var import_overlays9 = require("@react-aria/overlays");
 var import_utils22 = require("@react-aria/utils");
 var import_overlays10 = require("@react-stately/overlays");
-var import_classnames8 = __toESM(require("classnames"));
+var import_classnames9 = __toESM(require("classnames"));
 var import_omit10 = __toESM(require("lodash/omit"));
 
 // src/molecules/Popover/Dialog.tsx
-var import_react87 = __toESM(require("react"));
+var import_react88 = __toESM(require("react"));
 var import_dialog3 = require("@react-aria/dialog");
 var Dialog2 = ({ children }) => {
-  const ref = import_react87.default.useRef(null);
+  const ref = import_react88.default.useRef(null);
   const { dialogProps } = (0, import_dialog3.useDialog)({}, ref);
-  return /* @__PURE__ */ import_react87.default.createElement("div", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ import_react88.default.createElement("div", __spreadProps(__spreadValues({
     ref
   }, dialogProps), {
     className: tw("outline-none")
@@ -13087,10 +13226,10 @@ var Dialog2 = ({ children }) => {
 };
 
 // src/molecules/Popover/PopoverContext.tsx
-var import_react88 = require("react");
-var PopoverContext = (0, import_react88.createContext)(null);
+var import_react89 = require("react");
+var PopoverContext = (0, import_react89.createContext)(null);
 var usePopoverContext = () => {
-  const ctx = (0, import_react88.useContext)(PopoverContext);
+  const ctx = (0, import_react89.useContext)(PopoverContext);
   if (ctx === null) {
     throw new Error("PopoverContext was used outside of provider.");
   }
@@ -13110,36 +13249,36 @@ var Popover2 = (props) => {
     crossOffset,
     shouldFlip
   } = props;
-  const triggerRef = (0, import_react89.useRef)(null);
+  const triggerRef = (0, import_react90.useRef)(null);
   const state = (0, import_overlays10.useOverlayTriggerState)(props);
   const { triggerProps, overlayProps } = (0, import_overlays9.useOverlayTrigger)({ type: type != null ? type : "dialog" }, state, triggerRef);
-  return /* @__PURE__ */ import_react89.default.createElement(PopoverContext.Provider, {
+  return /* @__PURE__ */ import_react90.default.createElement(PopoverContext.Provider, {
     value: {
       state
     }
-  }, import_react89.default.Children.map(props.children, (child) => {
+  }, import_react90.default.Children.map(props.children, (child) => {
     if (isComponentType(child, Popover2.Trigger)) {
-      return /* @__PURE__ */ import_react89.default.createElement(import_interactions3.PressResponder, __spreadValues({
+      return /* @__PURE__ */ import_react90.default.createElement(import_interactions3.PressResponder, __spreadValues({
         ref: triggerRef
-      }, (0, import_omit10.default)(triggerProps, "aria-expanded")), /* @__PURE__ */ import_react89.default.createElement(PopoverTriggerWrapper, {
+      }, (0, import_omit10.default)(triggerProps, "aria-expanded")), /* @__PURE__ */ import_react90.default.createElement(PopoverTriggerWrapper, {
         "data-testid": props["data-testid"],
         "aria-controls": id,
         "aria-expanded": triggerProps["aria-expanded"]
       }, child.props.children));
     }
     if (isComponentType(child, Popover2.Panel)) {
-      return state.isOpen && /* @__PURE__ */ import_react89.default.createElement(PopoverOverlay, __spreadValues({
+      return state.isOpen && /* @__PURE__ */ import_react90.default.createElement(PopoverOverlay, __spreadValues({
         triggerRef: targetRef != null ? targetRef : triggerRef,
         state,
         placement,
         isNonModal: !containFocus,
         autoFocus: !containFocus,
         isKeyboardDismissDisabled,
-        className: (0, import_classnames8.default)("Aquarium-Popover", child.props.className),
+        className: (0, import_classnames9.default)("Aquarium-Popover", child.props.className),
         offset,
         crossOffset,
         shouldFlip
-      }, overlayProps), containFocus ? /* @__PURE__ */ import_react89.default.createElement(Dialog2, null, child.props.children) : child.props.children);
+      }, overlayProps), containFocus ? /* @__PURE__ */ import_react90.default.createElement(Dialog2, null, child.props.children) : child.props.children);
     }
     throw new Error("Invalid children element type");
   }));
@@ -13158,7 +13297,7 @@ var asPopoverButton = (Component, displayName) => {
       state.close();
       onClick == null ? void 0 : onClick(e);
     };
-    return /* @__PURE__ */ import_react89.default.createElement(Component, __spreadProps(__spreadValues({}, props), {
+    return /* @__PURE__ */ import_react90.default.createElement(Component, __spreadProps(__spreadValues({}, props), {
       onClick: handleClick
     }));
   };
@@ -13170,10 +13309,10 @@ Popover2.Button = PopoverButton;
 var PopoverTriggerWrapper = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
   var _a2;
-  const ref = (0, import_react89.useRef)(null);
-  const trigger = import_react89.default.Children.only(children);
+  const ref = (0, import_react90.useRef)(null);
+  const trigger = import_react90.default.Children.only(children);
   const { pressProps } = (0, import_interactions3.usePress)(__spreadProps(__spreadValues({}, rest), { ref }));
-  return import_react89.default.cloneElement(trigger, __spreadProps(__spreadValues({
+  return import_react90.default.cloneElement(trigger, __spreadProps(__spreadValues({
     "ref": ref
   }, (0, import_utils22.mergeProps)(pressProps, trigger.props)), {
     "aria-controls": (_a2 = rest["aria-controls"]) != null ? _a2 : pressProps["aria-controls"]
@@ -13182,10 +13321,10 @@ var PopoverTriggerWrapper = (_a) => {
 
 // src/molecules/Dropdown/Dropdown.tsx
 var Dropdown = ({ children, content, placement = "bottom-left" }) => {
-  return /* @__PURE__ */ import_react90.default.createElement(Popover2, {
+  return /* @__PURE__ */ import_react91.default.createElement(Popover2, {
     type: "menu",
     placement
-  }, /* @__PURE__ */ import_react90.default.createElement(Popover2.Trigger, null, children), /* @__PURE__ */ import_react90.default.createElement(Popover2.Panel, {
+  }, /* @__PURE__ */ import_react91.default.createElement(Popover2.Trigger, null, children), /* @__PURE__ */ import_react91.default.createElement(Popover2.Panel, {
     className: "Aquarium-Dropdown"
   }, content));
 };
@@ -13196,26 +13335,26 @@ var DropdownMenu3 = ({
   triggerId,
   setClose = () => void 0
 }) => {
-  const menuRef = import_react90.default.useRef(null);
-  import_react90.default.useEffect(() => {
+  const menuRef = import_react91.default.useRef(null);
+  import_react91.default.useEffect(() => {
     const id = setTimeout(() => {
       var _a, _b, _c;
       return (_c = (_b = (_a = menuRef.current) == null ? void 0 : _a.children) == null ? void 0 : _b[0]) == null ? void 0 : _c.focus();
     });
     return () => clearTimeout(id);
   }, [menuRef.current]);
-  return /* @__PURE__ */ import_react90.default.createElement("div", {
+  return /* @__PURE__ */ import_react91.default.createElement("div", {
     style: { minWidth: "250px" },
     className: tw("py-3 bg-popover-content")
-  }, !!title && /* @__PURE__ */ import_react90.default.createElement("div", {
+  }, !!title && /* @__PURE__ */ import_react91.default.createElement("div", {
     className: tw("px-4 py-4 text-left text-intense typography-default-strong")
-  }, title), /* @__PURE__ */ import_react90.default.createElement("ol", {
+  }, title), /* @__PURE__ */ import_react91.default.createElement("ol", {
     role: "menu",
     ref: menuRef,
     id: contentId,
     "aria-labelledby": triggerId
-  }, import_react90.default.Children.map(children, (child) => {
-    return import_react90.default.cloneElement(child, { setClose });
+  }, import_react91.default.Children.map(children, (child) => {
+    return import_react91.default.cloneElement(child, { setClose });
   })));
 };
 var DropdownItem = (_a) => {
@@ -13270,10 +13409,10 @@ var DropdownItem = (_a) => {
       handleSelect();
     }
   };
-  const itemContent = /* @__PURE__ */ import_react90.default.createElement("div", {
+  const itemContent = /* @__PURE__ */ import_react91.default.createElement("div", {
     className: tw("py-3 px-4")
   }, children);
-  return /* @__PURE__ */ import_react90.default.createElement("li", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ import_react91.default.createElement("li", __spreadProps(__spreadValues({
     role: "menuitem",
     tabIndex: -1,
     onClick: handleClick,
@@ -13284,11 +13423,11 @@ var DropdownItem = (_a) => {
       "text-inactive cursor-not-allowed": disabled,
       "text-primary-default hover:text-primary-intense": color === "danger" && !disabled
     })
-  }), tooltip ? /* @__PURE__ */ import_react90.default.createElement(Tooltip, {
+  }), tooltip ? /* @__PURE__ */ import_react91.default.createElement(Tooltip, {
     content: tooltip,
     placement: tooltipPlacement,
     inline: false
-  }, /* @__PURE__ */ import_react90.default.createElement("div", {
+  }, /* @__PURE__ */ import_react91.default.createElement("div", {
     tabIndex: 0,
     className: tw("grow")
   }, itemContent)) : itemContent);
@@ -13297,7 +13436,7 @@ Dropdown.Menu = DropdownMenu3;
 Dropdown.Item = DropdownItem;
 
 // src/molecules/EmptyState/EmptyState.tsx
-var import_react91 = __toESM(require("react"));
+var import_react92 = __toESM(require("react"));
 var EmptyStateLayout = /* @__PURE__ */ ((EmptyStateLayout2) => {
   EmptyStateLayout2["Vertical"] = "vertical";
   EmptyStateLayout2["Horizontal"] = "horizontal";
@@ -13354,7 +13493,7 @@ var EmptyState = ({
   fullHeight = isVerticalLayout(layout) ? true : false
 }) => {
   const template = layoutStyle(layout);
-  return /* @__PURE__ */ import_react91.default.createElement(Box, {
+  return /* @__PURE__ */ import_react92.default.createElement(Box, {
     className: classNames(
       "Aquarium-EmptyState",
       tw("rounded p-[56px]", {
@@ -13366,40 +13505,40 @@ var EmptyState = ({
       })
     ),
     backgroundColor: "transparent",
-    borderColor: "grey-10"
-  }, /* @__PURE__ */ import_react91.default.createElement(Box.Flex, {
+    borderColor: "default"
+  }, /* @__PURE__ */ import_react92.default.createElement(Box.Flex, {
     style: { gap: "56px" },
     flexDirection: template.layout,
     justifyContent: template.justifyContent,
     alignItems: template.layout === "row" ? "center" : template.alignItems,
     height: fullHeight ? "full" : void 0
-  }, image && /* @__PURE__ */ import_react91.default.createElement("img", {
+  }, image && /* @__PURE__ */ import_react92.default.createElement("img", {
     src: image,
     alt: imageAlt,
     style: { width: imageWidth ? `${imageWidth}px` : void 0, height: "auto" }
-  }), /* @__PURE__ */ import_react91.default.createElement(Box.Flex, {
+  }), /* @__PURE__ */ import_react92.default.createElement(Box.Flex, {
     flexDirection: "column",
     justifyContent: template.justifyContent,
     alignItems: template.alignItems
-  }, /* @__PURE__ */ import_react91.default.createElement(Typography2.Heading, {
+  }, /* @__PURE__ */ import_react92.default.createElement(Typography2.Heading, {
     htmlTag: "h2"
-  }, title), (description || children) && /* @__PURE__ */ import_react91.default.createElement(Box, {
+  }, title), (description || children) && /* @__PURE__ */ import_react92.default.createElement(Box, {
     marginTop: "5"
-  }, /* @__PURE__ */ import_react91.default.createElement(Typography2.Default, null, children || description)), (secondaryAction || primaryAction) && /* @__PURE__ */ import_react91.default.createElement(Box.Flex, {
+  }, /* @__PURE__ */ import_react92.default.createElement(Typography2.Default, null, children || description)), (secondaryAction || primaryAction) && /* @__PURE__ */ import_react92.default.createElement(Box.Flex, {
     marginTop: "7",
     gap: "4",
     justifyContent: "center",
     alignItems: "center",
     flexWrap: "wrap"
-  }, primaryAction && renderAction({ kind: "primary", action: primaryAction }), secondaryAction && renderAction({ kind: "secondary", action: secondaryAction })), footer && /* @__PURE__ */ import_react91.default.createElement(Box, {
+  }, primaryAction && renderAction({ kind: "primary", action: primaryAction }), secondaryAction && renderAction({ kind: "secondary", action: secondaryAction })), footer && /* @__PURE__ */ import_react92.default.createElement(Box, {
     marginTop: "5"
-  }, /* @__PURE__ */ import_react91.default.createElement(Typography2.Small, {
-    color: "grey-60"
+  }, /* @__PURE__ */ import_react92.default.createElement(Typography2.Small, {
+    color: "default"
   }, footer)))));
 };
 
 // src/molecules/Flexbox/FlexboxItem.tsx
-var import_react92 = __toESM(require("react"));
+var import_react93 = __toESM(require("react"));
 var FlexboxItem = Tailwindify(
   ({ htmlTag = "div", className, style, children, display, flex, grow, shrink, order, alignSelf }) => {
     const hookStyle = useStyle({
@@ -13411,7 +13550,7 @@ var FlexboxItem = Tailwindify(
       alignSelf
     });
     const HtmlElement = htmlTag;
-    return /* @__PURE__ */ import_react92.default.createElement(HtmlElement, {
+    return /* @__PURE__ */ import_react93.default.createElement(HtmlElement, {
       style: __spreadValues(__spreadValues({}, hookStyle), style),
       className
     }, children);
@@ -13419,7 +13558,7 @@ var FlexboxItem = Tailwindify(
 );
 
 // src/molecules/Grid/GridItem.tsx
-var import_react93 = __toESM(require("react"));
+var import_react94 = __toESM(require("react"));
 var GridItem2 = Tailwindify(
   ({
     htmlTag = "div",
@@ -13450,7 +13589,7 @@ var GridItem2 = Tailwindify(
       gridRowEnd: rowEnd
     });
     const HtmlElement = htmlTag;
-    return /* @__PURE__ */ import_react93.default.createElement(HtmlElement, {
+    return /* @__PURE__ */ import_react94.default.createElement(HtmlElement, {
       style: __spreadValues(__spreadValues({}, hookStyle), style),
       className
     }, children);
@@ -13458,7 +13597,7 @@ var GridItem2 = Tailwindify(
 );
 
 // src/molecules/LineClamp/LineClamp.tsx
-var import_react94 = __toESM(require("react"));
+var import_react95 = __toESM(require("react"));
 var LineClamp2 = ({
   lines,
   children,
@@ -13467,10 +13606,10 @@ var LineClamp2 = ({
   collapseLabel,
   onClampedChange
 }) => {
-  const ref = import_react94.default.useRef(null);
-  const [clamped, setClamped] = import_react94.default.useState(true);
-  const [isClampingEnabled, setClampingEnabled] = import_react94.default.useState(false);
-  import_react94.default.useEffect(() => {
+  const ref = import_react95.default.useRef(null);
+  const [clamped, setClamped] = import_react95.default.useState(true);
+  const [isClampingEnabled, setClampingEnabled] = import_react95.default.useState(false);
+  import_react95.default.useEffect(() => {
     var _a, _b;
     const el = ref.current;
     setClampingEnabled(((_a = el == null ? void 0 : el.scrollHeight) != null ? _a : 0) > ((_b = el == null ? void 0 : el.clientHeight) != null ? _b : 0));
@@ -13479,28 +13618,28 @@ var LineClamp2 = ({
     setClamped(!clamped);
     onClampedChange == null ? void 0 : onClampedChange(!clamped);
   };
-  return /* @__PURE__ */ import_react94.default.createElement("div", {
+  return /* @__PURE__ */ import_react95.default.createElement("div", {
     className: "Aquarium-LineClamp"
-  }, /* @__PURE__ */ import_react94.default.createElement(LineClamp, {
+  }, /* @__PURE__ */ import_react95.default.createElement(LineClamp, {
     ref,
     lines,
     clamped,
     wordBreak
-  }, children), expandLabel && isClampingEnabled && /* @__PURE__ */ import_react94.default.createElement(Button.Ghost, {
+  }, children), expandLabel && isClampingEnabled && /* @__PURE__ */ import_react95.default.createElement(Button.Ghost, {
     dense: true,
     onClick: handleClampedChange
   }, clamped ? expandLabel : collapseLabel));
 };
 
 // src/molecules/Link/Link.tsx
-var import_react96 = __toESM(require("react"));
-var import_classnames9 = __toESM(require("classnames"));
+var import_react97 = __toESM(require("react"));
+var import_classnames10 = __toESM(require("classnames"));
 
 // src/atoms/Link/Link.tsx
-var import_react95 = __toESM(require("react"));
+var import_react96 = __toESM(require("react"));
 var Link = (_a) => {
   var _b = _a, { children, className } = _b, props = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ import_react95.default.createElement("a", __spreadValues({
+  return /* @__PURE__ */ import_react96.default.createElement("a", __spreadValues({
     className: classNames(className, linkStyle)
   }, props), children);
 };
@@ -13508,27 +13647,27 @@ var Link = (_a) => {
 // src/molecules/Link/Link.tsx
 var Link2 = (_a) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ import_react96.default.createElement(Link, __spreadValues({
-    className: (0, import_classnames9.default)("Aquarium-Link", className)
+  return /* @__PURE__ */ import_react97.default.createElement(Link, __spreadValues({
+    className: (0, import_classnames10.default)("Aquarium-Link", className)
   }, props));
 };
 
 // src/molecules/List/useStaticInfiniteList.ts
-var import_react97 = __toESM(require("react"));
+var import_react98 = __toESM(require("react"));
 var useStaticInfiniteList = ({
   items,
   pageSize,
   autoReset = true
 }) => {
-  const [currentPage, setCurrentPage] = import_react97.default.useState(1);
+  const [currentPage, setCurrentPage] = import_react98.default.useState(1);
   const numberOfVisible = currentPage * pageSize;
-  const next = import_react97.default.useCallback(() => {
+  const next = import_react98.default.useCallback(() => {
     setCurrentPage((page) => page + 1);
   }, [setCurrentPage]);
-  const reset = import_react97.default.useCallback(() => {
+  const reset = import_react98.default.useCallback(() => {
     setCurrentPage(1);
   }, [setCurrentPage]);
-  import_react97.default.useEffect(() => {
+  import_react98.default.useEffect(() => {
     if (autoReset) {
       setCurrentPage(1);
     }
@@ -13543,17 +13682,17 @@ var useStaticInfiniteList = ({
 };
 
 // src/molecules/ListItem/ListItem.tsx
-var import_react98 = __toESM(require("react"));
+var import_react99 = __toESM(require("react"));
 var ListItem = ({ name, icon, active = false }) => {
-  return /* @__PURE__ */ import_react98.default.createElement(Box.Flex, {
+  return /* @__PURE__ */ import_react99.default.createElement(Box.Flex, {
     className: "Aquarium-ListItem",
     alignItems: "center"
-  }, /* @__PURE__ */ import_react98.default.createElement(Typography2, {
+  }, /* @__PURE__ */ import_react99.default.createElement(Typography2, {
     variant: active ? "small-strong" : "small",
-    color: "grey-70",
+    color: "default",
     htmlTag: "span",
     className: `px-4 py-2 rounded-full ${active ? "bg-default" : "hover:bg-muted"}`
-  }, /* @__PURE__ */ import_react98.default.createElement("img", {
+  }, /* @__PURE__ */ import_react99.default.createElement("img", {
     src: icon,
     alt: "",
     className: "inline mr-4",
@@ -13563,7 +13702,7 @@ var ListItem = ({ name, icon, active = false }) => {
 };
 
 // src/molecules/Modal/Modal.tsx
-var import_react99 = __toESM(require("react"));
+var import_react100 = __toESM(require("react"));
 var import_dialog4 = require("@react-aria/dialog");
 var import_overlays11 = require("@react-aria/overlays");
 var import_utils24 = require("@react-aria/utils");
@@ -13574,7 +13713,7 @@ var import_cross7 = __toESM(require_cross());
 var Modal2 = (_a) => {
   var _b = _a, { closeOnEsc = true } = _b, props = __objRest(_b, ["closeOnEsc"]);
   const { open, onClose, size, portalContainer } = props;
-  const ref = import_react99.default.useRef(null);
+  const ref = import_react100.default.useRef(null);
   const state = (0, import_overlays12.useOverlayTriggerState)({ isOpen: open, onOpenChange: (isOpen) => !isOpen && onClose() });
   const { modalProps, underlayProps } = (0, import_overlays11.useModalOverlay)(
     { isDismissable: false, isKeyboardDismissDisabled: !closeOnEsc },
@@ -13584,17 +13723,17 @@ var Modal2 = (_a) => {
   if (!state.isOpen) {
     return null;
   }
-  return /* @__PURE__ */ import_react99.default.createElement(import_overlays11.Overlay, {
+  return /* @__PURE__ */ import_react100.default.createElement(import_overlays11.Overlay, {
     portalContainer
-  }, /* @__PURE__ */ import_react99.default.createElement(Modal, {
+  }, /* @__PURE__ */ import_react100.default.createElement(Modal, {
     className: "Aquarium-Modal",
     open: true
-  }, /* @__PURE__ */ import_react99.default.createElement(Modal.BackDrop, __spreadValues({}, underlayProps)), /* @__PURE__ */ import_react99.default.createElement(ModalWrapper, __spreadValues(__spreadValues({
+  }, /* @__PURE__ */ import_react100.default.createElement(Modal.BackDrop, __spreadValues({}, underlayProps)), /* @__PURE__ */ import_react100.default.createElement(ModalWrapper, __spreadValues(__spreadValues({
     ref,
     size
   }, props), modalProps))));
 };
-var ModalWrapper = import_react99.default.forwardRef(
+var ModalWrapper = import_react100.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_utils24.useId)();
@@ -13603,30 +13742,30 @@ var ModalWrapper = import_react99.default.forwardRef(
       { "role": "dialog", "aria-labelledby": labelledBy, "aria-describedby": describedBy },
       ref
     );
-    return /* @__PURE__ */ import_react99.default.createElement(Modal.Dialog, __spreadProps(__spreadValues(__spreadValues({
+    return /* @__PURE__ */ import_react100.default.createElement(Modal.Dialog, __spreadProps(__spreadValues(__spreadValues({
       ref
     }, props), dialogProps), {
       tabIndex: -1
-    }), /* @__PURE__ */ import_react99.default.createElement(Modal.CloseButtonContainer, null, /* @__PURE__ */ import_react99.default.createElement(IconButton, {
+    }), /* @__PURE__ */ import_react100.default.createElement(Modal.CloseButtonContainer, null, /* @__PURE__ */ import_react100.default.createElement(IconButton, {
       "aria-label": "Close",
       icon: import_cross7.default,
       onClick: onClose
-    })), headerImage !== void 0 && /* @__PURE__ */ import_react99.default.createElement(Modal.HeaderImage, {
+    })), headerImage !== void 0 && /* @__PURE__ */ import_react100.default.createElement(Modal.HeaderImage, {
       backgroundImage: headerImage
-    }), /* @__PURE__ */ import_react99.default.createElement(Modal.Header, {
+    }), /* @__PURE__ */ import_react100.default.createElement(Modal.Header, {
       className: tw({ "pb-3": isComponentType(children, ModalTabs) })
-    }, /* @__PURE__ */ import_react99.default.createElement(Modal.TitleContainer, null, /* @__PURE__ */ import_react99.default.createElement(Modal.Title, {
+    }, /* @__PURE__ */ import_react100.default.createElement(Modal.TitleContainer, null, /* @__PURE__ */ import_react100.default.createElement(Modal.Title, {
       id: labelledBy
-    }, title), subtitle && /* @__PURE__ */ import_react99.default.createElement(Modal.Subtitle, null, subtitle))), isComponentType(children, ModalTabs) ? import_react99.default.cloneElement(children, { className: tw("[&>div:first-child]:px-5 grow") }) : /* @__PURE__ */ import_react99.default.createElement(Modal.Body, {
+    }, title), subtitle && /* @__PURE__ */ import_react100.default.createElement(Modal.Subtitle, null, subtitle))), isComponentType(children, ModalTabs) ? import_react100.default.cloneElement(children, { className: tw("[&>div:first-child]:px-5 grow") }) : /* @__PURE__ */ import_react100.default.createElement(Modal.Body, {
       id: describedBy,
       tabIndex: 0,
       noFooter: !(secondaryActions || primaryAction)
-    }, children), (secondaryActions || primaryAction) && /* @__PURE__ */ import_react99.default.createElement(Modal.Footer, null, /* @__PURE__ */ import_react99.default.createElement(Modal.Actions, null, secondaryActions && (0, import_castArray4.default)(secondaryActions).filter(Boolean).map((_a2) => {
+    }, children), (secondaryActions || primaryAction) && /* @__PURE__ */ import_react100.default.createElement(Modal.Footer, null, /* @__PURE__ */ import_react100.default.createElement(Modal.Actions, null, secondaryActions && (0, import_castArray4.default)(secondaryActions).filter(Boolean).map((_a2) => {
       var _b2 = _a2, { text } = _b2, action = __objRest(_b2, ["text"]);
-      return /* @__PURE__ */ import_react99.default.createElement(Button.Secondary, __spreadValues({
+      return /* @__PURE__ */ import_react100.default.createElement(Button.Secondary, __spreadValues({
         key: text
       }, action), text);
-    }), primaryAction && /* @__PURE__ */ import_react99.default.createElement(Button.Primary, __spreadValues({
+    }), primaryAction && /* @__PURE__ */ import_react100.default.createElement(Button.Primary, __spreadValues({
       key: primaryAction.text
     }, (0, import_omit11.default)(primaryAction, "text")), primaryAction.text))));
   }
@@ -13635,24 +13774,24 @@ var ModalTabs = createTabsComponent(
   ModalTab,
   TabItem,
   "ModalTabs",
-  (children, selected, props) => /* @__PURE__ */ import_react99.default.createElement(Modal.Body, {
+  (children, selected, props) => /* @__PURE__ */ import_react100.default.createElement(Modal.Body, {
     maxHeight: props.maxHeight
-  }, /* @__PURE__ */ import_react99.default.createElement(ModalTabContainer, null, children.find(
+  }, /* @__PURE__ */ import_react100.default.createElement(ModalTabContainer, null, children.find(
     (node, index) => (node == null ? void 0 : node.props.value) === selected || index === selected
   )))
 );
 
 // src/molecules/MultiInput/MultiInput.tsx
-var import_react101 = __toESM(require("react"));
+var import_react102 = __toESM(require("react"));
 var import_utils26 = require("@react-aria/utils");
 var import_castArray5 = __toESM(require("lodash/castArray"));
 var import_identity = __toESM(require("lodash/identity"));
 var import_omit12 = __toESM(require("lodash/omit"));
 
 // src/molecules/MultiInput/InputChip.tsx
-var import_react100 = __toESM(require("react"));
+var import_react101 = __toESM(require("react"));
 var import_smallCross2 = __toESM(require_smallCross());
-var InputChip = import_react100.default.forwardRef(
+var InputChip = import_react101.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { invalid = false, disabled, readOnly, className, onClick: _onClick, children } = _b, props = __objRest(_b, ["invalid", "disabled", "readOnly", "className", "onClick", "children"]);
     const onClick = (e) => {
@@ -13660,18 +13799,18 @@ var InputChip = import_react100.default.forwardRef(
         _onClick == null ? void 0 : _onClick(e);
       }
     };
-    return /* @__PURE__ */ import_react100.default.createElement("div", {
+    return /* @__PURE__ */ import_react101.default.createElement("div", {
       className: classNames(className, "inline-flex align-middle mx-1 items-stretch rounded-sm break-all", {
         "bg-status-danger ": invalid,
         "bg-muted ": !invalid && !disabled,
         "bg-default": disabled
       })
-    }, /* @__PURE__ */ import_react100.default.createElement("div", {
+    }, /* @__PURE__ */ import_react101.default.createElement("div", {
       className: tw("px-2 py-1")
-    }, /* @__PURE__ */ import_react100.default.createElement(Typography2, {
+    }, /* @__PURE__ */ import_react101.default.createElement(Typography2, {
       variant: "small",
-      color: invalid ? "error-80" : disabled ? "grey-40" : "grey-70"
-    }, children)), !readOnly && /* @__PURE__ */ import_react100.default.createElement("div", __spreadProps(__spreadValues({
+      color: invalid ? "warning-default" : disabled ? "inactive" : "default"
+    }, children)), !readOnly && /* @__PURE__ */ import_react101.default.createElement("div", __spreadProps(__spreadValues({
       ref
     }, props), {
       onClick,
@@ -13682,7 +13821,7 @@ var InputChip = import_react100.default.forwardRef(
       }),
       role: "button",
       "aria-label": `Remove ${String(children)}`
-    }), !disabled && /* @__PURE__ */ import_react100.default.createElement(Icon, {
+    }), !disabled && /* @__PURE__ */ import_react101.default.createElement(Icon, {
       icon: import_smallCross2.default,
       className: tw({
         "text-danger-default": invalid,
@@ -13740,11 +13879,11 @@ var MultiInputBase = (_a) => {
     "valid"
   ]);
   var _a2;
-  const inputRef = (0, import_react101.useRef)(null);
-  const [items, setItems] = (0, import_react101.useState)((_a2 = value != null ? value : defaultValue) != null ? _a2 : []);
-  const [hasFocus, setFocus] = (0, import_react101.useState)(false);
+  const inputRef = (0, import_react102.useRef)(null);
+  const [items, setItems] = (0, import_react102.useState)((_a2 = value != null ? value : defaultValue) != null ? _a2 : []);
+  const [hasFocus, setFocus] = (0, import_react102.useState)(false);
   const keyCodes = [delimiter !== "enter" ? " " : null, delimiter !== "space" ? "Enter" : null].filter(import_identity.default);
-  (0, import_react101.useEffect)(() => {
+  (0, import_react102.useEffect)(() => {
     const requiresUpdate = value !== void 0 || defaultValue === void 0;
     if (requiresUpdate && JSON.stringify(value) !== JSON.stringify(items)) {
       setItems(value != null ? value : []);
@@ -13823,7 +13962,7 @@ var MultiInputBase = (_a) => {
   };
   const renderChips = () => items == null ? void 0 : items.map((item, index) => {
     var _a3;
-    return /* @__PURE__ */ import_react101.default.createElement(InputChip, {
+    return /* @__PURE__ */ import_react102.default.createElement(InputChip, {
       key: `${itemToString(item)}.${index}`,
       invalid: !((_a3 = isItemValid == null ? void 0 : isItemValid(item, index)) != null ? _a3 : true),
       readOnly,
@@ -13834,13 +13973,13 @@ var MultiInputBase = (_a) => {
       }
     }, itemToString(item));
   });
-  return /* @__PURE__ */ import_react101.default.createElement("div", {
+  return /* @__PURE__ */ import_react102.default.createElement("div", {
     className: "Aquarium-MultiInputBase"
-  }, /* @__PURE__ */ import_react101.default.createElement(Select.InputContainer, {
+  }, /* @__PURE__ */ import_react102.default.createElement(Select.InputContainer, {
     variant: disabled ? "disabled" : !valid ? "error" : readOnly ? "readOnly" : hasFocus ? "focused" : "default"
-  }, /* @__PURE__ */ import_react101.default.createElement("div", {
+  }, /* @__PURE__ */ import_react102.default.createElement("div", {
     className: "grow inline-flex flex-row flex-wrap gap-y-2"
-  }, inline && renderChips(), /* @__PURE__ */ import_react101.default.createElement(Select.Input, __spreadProps(__spreadValues({
+  }, inline && renderChips(), /* @__PURE__ */ import_react102.default.createElement(Select.Input, __spreadProps(__spreadValues({
     ref: inputRef,
     id: id != null ? id : name,
     name,
@@ -13858,19 +13997,19 @@ var MultiInputBase = (_a) => {
     onFocus: handleFocus,
     onBlur: handleBlur,
     autoComplete: "off"
-  }))), endAdornment && /* @__PURE__ */ import_react101.default.createElement(InputAdornment, null, endAdornment)), !inline && /* @__PURE__ */ import_react101.default.createElement("div", {
+  }))), endAdornment && /* @__PURE__ */ import_react102.default.createElement(InputAdornment, null, endAdornment)), !inline && /* @__PURE__ */ import_react102.default.createElement("div", {
     className: tw("flex flex-row flex-wrap gap-y-2 mt-2")
   }, renderChips()));
 };
-var BaseMultiInputSkeleton = () => /* @__PURE__ */ import_react101.default.createElement(Skeleton, {
+var BaseMultiInputSkeleton = () => /* @__PURE__ */ import_react102.default.createElement(Skeleton, {
   height: 38
 });
 MultiInputBase.Skeleton = BaseMultiInputSkeleton;
 var MultiInput = (props) => {
   var _a, _b, _c, _d, _e;
   const maxLength = (_a = props.maxLength) != null ? _a : props.max;
-  const [value, setValue] = (0, import_react101.useState)((_c = (_b = props.value) != null ? _b : props.defaultValue) != null ? _c : []);
-  (0, import_react101.useEffect)(() => {
+  const [value, setValue] = (0, import_react102.useState)((_c = (_b = props.value) != null ? _b : props.defaultValue) != null ? _c : []);
+  (0, import_react102.useEffect)(() => {
     var _a2;
     setValue((_a2 = props.value) != null ? _a2 : []);
   }, [JSON.stringify(props.value)]);
@@ -13880,7 +14019,7 @@ var MultiInput = (props) => {
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const labelControlProps = getLabelControlProps(props);
   const baseProps = (0, import_omit12.default)(props, Object.keys(labelControlProps));
-  return /* @__PURE__ */ import_react101.default.createElement(LabelControl, __spreadProps(__spreadValues({
+  return /* @__PURE__ */ import_react102.default.createElement(LabelControl, __spreadProps(__spreadValues({
     id: `${id}-label`,
     htmlFor: `${id}-input`,
     messageId: errorMessageId
@@ -13888,7 +14027,7 @@ var MultiInput = (props) => {
     length: value.length,
     maxLength,
     className: "Aquarium-MultiInput"
-  }), /* @__PURE__ */ import_react101.default.createElement(MultiInputBase, __spreadProps(__spreadValues(__spreadValues({}, baseProps), errorProps), {
+  }), /* @__PURE__ */ import_react102.default.createElement(MultiInputBase, __spreadProps(__spreadValues(__spreadValues({}, baseProps), errorProps), {
     id: `${id}-input`,
     onChange: (value2) => {
       var _a2;
@@ -13900,12 +14039,12 @@ var MultiInput = (props) => {
     valid: props.valid
   })));
 };
-var MultiInputSkeleton = () => /* @__PURE__ */ import_react101.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react101.default.createElement(MultiInputBase.Skeleton, null));
+var MultiInputSkeleton = () => /* @__PURE__ */ import_react102.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react102.default.createElement(MultiInputBase.Skeleton, null));
 MultiInput.Skeleton = MultiInputSkeleton;
 MultiInput.Skeleton.displayName = "MultiInput.Skeleton";
 
 // src/molecules/MultiSelect/MultiSelect.tsx
-var import_react102 = __toESM(require("react"));
+var import_react103 = __toESM(require("react"));
 var import_overlays13 = require("@react-aria/overlays");
 var import_utils27 = require("@react-aria/utils");
 var import_downshift3 = require("downshift");
@@ -13971,12 +14110,12 @@ var MultiSelectBase = (_a) => {
     "children"
   ]);
   var _a2;
-  const popoverRef = (0, import_react102.useRef)(null);
-  const targetRef = (0, import_react102.useRef)(null);
-  const menuRef = (0, import_react102.useRef)(null);
-  const inputRef = (0, import_react102.useRef)(null);
-  const [inputValue, setInputValue] = (0, import_react102.useState)("");
-  const [hasFocus, setFocus] = (0, import_react102.useState)(false);
+  const popoverRef = (0, import_react103.useRef)(null);
+  const targetRef = (0, import_react103.useRef)(null);
+  const menuRef = (0, import_react103.useRef)(null);
+  const inputRef = (0, import_react103.useRef)(null);
+  const [inputValue, setInputValue] = (0, import_react103.useState)("");
+  const [hasFocus, setFocus] = (0, import_react103.useState)(false);
   const { selectedItems, addSelectedItem, removeSelectedItem, getDropdownProps, getSelectedItemProps } = (0, import_downshift3.useMultipleSelection)(
     (0, import_omitBy.default)(
       {
@@ -14060,21 +14199,21 @@ var MultiSelectBase = (_a) => {
     toggle: toggleMenu,
     setOpen: (isOpen2) => isOpen2 ? openMenu() : closeMenu()
   };
-  (0, import_react102.useEffect)(() => {
+  (0, import_react103.useEffect)(() => {
     if (state.isOpen && inputRef.current && popoverRef.current) {
       return (0, import_overlays13.ariaHideOutside)([inputRef.current, popoverRef.current]);
     }
   }, [state.isOpen, inputRef, popoverRef]);
-  const renderItem = (item, index) => /* @__PURE__ */ import_react102.default.createElement(Select.Item, __spreadValues({
+  const renderItem = (item, index) => /* @__PURE__ */ import_react103.default.createElement(Select.Item, __spreadValues({
     key: itemToString(item),
     highlighted: index === highlightedIndex,
     selected: selectedItems.includes(item)
   }, getItemProps({ item, index })), renderOption(item));
-  const renderGroup = (group) => group.options.length ? /* @__PURE__ */ import_react102.default.createElement(import_react102.default.Fragment, {
+  const renderGroup = (group) => group.options.length ? /* @__PURE__ */ import_react103.default.createElement(import_react103.default.Fragment, {
     key: group.label
-  }, /* @__PURE__ */ import_react102.default.createElement(Select.Group, null, group.label), group.options.map((opt) => renderItem(opt, flattenedOptions.indexOf(opt)))) : null;
+  }, /* @__PURE__ */ import_react103.default.createElement(Select.Group, null, group.label), group.options.map((opt) => renderItem(opt, flattenedOptions.indexOf(opt)))) : null;
   const renderChips = () => {
-    return selectedItems.map((selectedItem, index) => /* @__PURE__ */ import_react102.default.createElement(InputChip, __spreadProps(__spreadValues({
+    return selectedItems.map((selectedItem, index) => /* @__PURE__ */ import_react103.default.createElement(InputChip, __spreadProps(__spreadValues({
       key: `${itemToString(selectedItem)}.chip`,
       className: tw("mx-0"),
       disabled,
@@ -14092,14 +14231,14 @@ var MultiSelectBase = (_a) => {
     getDropdownProps({ ref: inputRef, disabled: disabled || readOnly, value: inputValue })
   );
   const menuProps = getMenuProps({ ref: menuRef }, { suppressRefError: !isOpen });
-  return /* @__PURE__ */ import_react102.default.createElement("div", {
+  return /* @__PURE__ */ import_react103.default.createElement("div", {
     className: classNames("Aquarium-MultiSelectBase", tw("relative"))
-  }, /* @__PURE__ */ import_react102.default.createElement(Select.InputContainer, {
+  }, /* @__PURE__ */ import_react103.default.createElement(Select.InputContainer, {
     ref: targetRef,
     variant: disabled ? "disabled" : !valid ? "error" : readOnly ? "readOnly" : hasFocus ? "focused" : "default"
-  }, /* @__PURE__ */ import_react102.default.createElement("div", {
+  }, /* @__PURE__ */ import_react103.default.createElement("div", {
     className: "grow inline-flex flex-row flex-wrap gap-2"
-  }, !hideChips && inline && renderChips(), /* @__PURE__ */ import_react102.default.createElement(Select.Input, __spreadProps(__spreadValues(__spreadValues({
+  }, !hideChips && inline && renderChips(), /* @__PURE__ */ import_react103.default.createElement(Select.Input, __spreadProps(__spreadValues(__spreadValues({
     name,
     placeholder: selectedItems.length === 0 && !readOnly ? placeholder : ""
   }, inputProps), props), {
@@ -14118,12 +14257,12 @@ var MultiSelectBase = (_a) => {
       setFocus(false);
       (_a3 = inputProps.onBlur) == null ? void 0 : _a3.call(inputProps, e);
     }
-  }))), !readOnly && /* @__PURE__ */ import_react102.default.createElement(Select.Toggle, __spreadValues({
+  }))), !readOnly && /* @__PURE__ */ import_react103.default.createElement(Select.Toggle, __spreadValues({
     hasFocus,
     isOpen
-  }, getToggleButtonProps({ disabled })))), !hideChips && !inline && /* @__PURE__ */ import_react102.default.createElement("div", {
+  }, getToggleButtonProps({ disabled })))), !hideChips && !inline && /* @__PURE__ */ import_react103.default.createElement("div", {
     className: tw("flex flex-row flex-wrap gap-2 mt-2")
-  }, renderChips()), isOpen && /* @__PURE__ */ import_react102.default.createElement(PopoverOverlay, {
+  }, renderChips()), isOpen && /* @__PURE__ */ import_react103.default.createElement(PopoverOverlay, {
     ref: popoverRef,
     triggerRef: targetRef,
     state,
@@ -14131,13 +14270,13 @@ var MultiSelectBase = (_a) => {
     shouldFlip: true,
     isNonModal: true,
     style: { width: (_a2 = targetRef.current) == null ? void 0 : _a2.offsetWidth }
-  }, /* @__PURE__ */ import_react102.default.createElement(Select.Menu, __spreadValues({
+  }, /* @__PURE__ */ import_react103.default.createElement(Select.Menu, __spreadValues({
     maxHeight
-  }, menuProps), hasNoResults && /* @__PURE__ */ import_react102.default.createElement(Select.NoResults, null, emptyState), filteredOptions.map(
+  }, menuProps), hasNoResults && /* @__PURE__ */ import_react103.default.createElement(Select.NoResults, null, emptyState), filteredOptions.map(
     (option, index) => isOptionGroup(option) ? renderGroup(option) : renderItem(option, index)
   ))));
 };
-var MultiSelectBaseSkeleton = () => /* @__PURE__ */ import_react102.default.createElement(Skeleton, {
+var MultiSelectBaseSkeleton = () => /* @__PURE__ */ import_react103.default.createElement(Skeleton, {
   height: 38
 });
 MultiSelectBase.Skeleton = MultiSelectBaseSkeleton;
@@ -14158,13 +14297,13 @@ var MultiSelect = (_a) => {
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const labelControlProps = getLabelControlProps(props);
   const baseProps = (0, import_omit13.default)(props, Object.keys(labelControlProps));
-  return /* @__PURE__ */ import_react102.default.createElement(LabelControl, __spreadProps(__spreadValues({
+  return /* @__PURE__ */ import_react103.default.createElement(LabelControl, __spreadProps(__spreadValues({
     id: `${id}-label`,
     htmlFor: `${id}-input`,
     messageId: errorMessageId
   }, labelControlProps), {
     className: "Aquarium-MultiSelect"
-  }), /* @__PURE__ */ import_react102.default.createElement(MultiSelectBase, __spreadProps(__spreadValues(__spreadValues({}, baseProps), errorProps), {
+  }), /* @__PURE__ */ import_react103.default.createElement(MultiSelectBase, __spreadProps(__spreadValues(__spreadValues({}, baseProps), errorProps), {
     id,
     options,
     emptyState,
@@ -14172,17 +14311,17 @@ var MultiSelect = (_a) => {
     valid: props.valid
   })));
 };
-var MultiSelectSkeleton = () => /* @__PURE__ */ import_react102.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react102.default.createElement(MultiSelectBase.Skeleton, null));
+var MultiSelectSkeleton = () => /* @__PURE__ */ import_react103.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react103.default.createElement(MultiSelectBase.Skeleton, null));
 MultiSelect.Skeleton = MultiSelectSkeleton;
 MultiSelect.Skeleton.displayName = "MultiSelect.Skeleton";
 
 // src/molecules/NativeSelect/NativeSelect.tsx
-var import_react103 = __toESM(require("react"));
+var import_react104 = __toESM(require("react"));
 var import_utils28 = require("@react-aria/utils");
 var import_omit14 = __toESM(require("lodash/omit"));
 var import_uniqueId = __toESM(require("lodash/uniqueId"));
 var import_caretDown2 = __toESM(require_caretDown());
-var NativeSelectBase = import_react103.default.forwardRef(
+var NativeSelectBase = import_react104.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { children, disabled = false, required = false, valid = true, readOnly = false } = _b, props = __objRest(_b, ["children", "disabled", "required", "valid", "readOnly"]);
     const placeholderValue = (0, import_uniqueId.default)("default_value_for_placeholder");
@@ -14199,16 +14338,16 @@ var NativeSelectBase = import_react103.default.forwardRef(
         (_b2 = props.onBlur) == null ? void 0 : _b2.call(props, event);
       }
     };
-    return /* @__PURE__ */ import_react103.default.createElement("span", {
+    return /* @__PURE__ */ import_react104.default.createElement("span", {
       className: classNames("Aquarium-NativeSelectBase", tw("relative block"))
-    }, !readOnly && /* @__PURE__ */ import_react103.default.createElement("span", {
+    }, !readOnly && /* @__PURE__ */ import_react104.default.createElement("span", {
       className: tw(
         "absolute right-0 inset-y-0 mr-4 text-inactive flex ml-3 pointer-events-none typography-default-strong mt-4"
       )
-    }, /* @__PURE__ */ import_react103.default.createElement(Icon, {
+    }, /* @__PURE__ */ import_react104.default.createElement(Icon, {
       icon: import_caretDown2.default,
       "data-testid": "icon-dropdown"
-    })), /* @__PURE__ */ import_react103.default.createElement("select", __spreadProps(__spreadValues({
+    })), /* @__PURE__ */ import_react104.default.createElement("select", __spreadProps(__spreadValues({
       ref,
       disabled: disabled || readOnly,
       required
@@ -14227,16 +14366,16 @@ var NativeSelectBase = import_react103.default.forwardRef(
         ),
         props.className
       )
-    }), props.placeholder && /* @__PURE__ */ import_react103.default.createElement("option", {
+    }), props.placeholder && /* @__PURE__ */ import_react104.default.createElement("option", {
       value: placeholderValue,
       disabled: true
     }, props.placeholder), children));
   }
 );
-NativeSelectBase.Skeleton = () => /* @__PURE__ */ import_react103.default.createElement(Skeleton, {
+NativeSelectBase.Skeleton = () => /* @__PURE__ */ import_react104.default.createElement(Skeleton, {
   height: 38
 });
-var NativeSelect = import_react103.default.forwardRef(
+var NativeSelect = import_react104.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { readOnly } = _b, props = __objRest(_b, ["readOnly"]);
     var _a2;
@@ -14246,13 +14385,13 @@ var NativeSelect = import_react103.default.forwardRef(
     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_omit14.default)(props, Object.keys(labelControlProps));
-    return /* @__PURE__ */ import_react103.default.createElement(LabelControl, __spreadProps(__spreadValues({
+    return /* @__PURE__ */ import_react104.default.createElement(LabelControl, __spreadProps(__spreadValues({
       id: `${id}-label`,
       htmlFor: id,
       messageId: errorMessageId
     }, labelControlProps), {
       className: "Aquarium-NativeSelect"
-    }), /* @__PURE__ */ import_react103.default.createElement(NativeSelectBase, __spreadProps(__spreadValues(__spreadValues({
+    }), /* @__PURE__ */ import_react104.default.createElement(NativeSelectBase, __spreadProps(__spreadValues(__spreadValues({
       ref
     }, baseProps), errorProps), {
       id,
@@ -14266,63 +14405,63 @@ var NativeSelect = import_react103.default.forwardRef(
   }
 );
 NativeSelect.displayName = "NativeSelect";
-var Option = import_react103.default.forwardRef((_a, ref) => {
+var Option = import_react104.default.forwardRef((_a, ref) => {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ import_react103.default.createElement("option", __spreadValues({
+  return /* @__PURE__ */ import_react104.default.createElement("option", __spreadValues({
     ref
   }, props), children);
 });
 Option.displayName = "Option";
-var NativeSelectSkeleton = () => /* @__PURE__ */ import_react103.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react103.default.createElement(NativeSelectBase.Skeleton, null), /* @__PURE__ */ import_react103.default.createElement("div", {
+var NativeSelectSkeleton = () => /* @__PURE__ */ import_react104.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react104.default.createElement(NativeSelectBase.Skeleton, null), /* @__PURE__ */ import_react104.default.createElement("div", {
   style: { height: "1px" }
 }));
 NativeSelect.Skeleton = NativeSelectSkeleton;
 NativeSelect.Skeleton.displayName = "NativeSelect.Skeleton";
 
 // src/molecules/Navigation/Navigation.tsx
-var import_react105 = __toESM(require("react"));
-var import_classnames10 = __toESM(require("classnames"));
+var import_react106 = __toESM(require("react"));
+var import_classnames11 = __toESM(require("classnames"));
 
 // src/atoms/Navigation/Navigation.tsx
-var import_react104 = __toESM(require("react"));
+var import_react105 = __toESM(require("react"));
 var Navigation = (_a) => {
   var _b = _a, { className, children } = _b, rest = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ import_react104.default.createElement("nav", {
+  return /* @__PURE__ */ import_react105.default.createElement("nav", {
     className: classNames(tw("bg-muted h-full"))
-  }, /* @__PURE__ */ import_react104.default.createElement("ul", __spreadProps(__spreadValues({}, rest), {
+  }, /* @__PURE__ */ import_react105.default.createElement("ul", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("flex flex-col h-full"), className),
     role: "menubar"
   }), children));
 };
 var Header = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ import_react104.default.createElement("li", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react105.default.createElement("li", __spreadProps(__spreadValues({}, rest), {
     role: "presentation",
     className: classNames(tw("px-6 py-5"), className)
   }));
 };
 var Footer = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ import_react104.default.createElement("li", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react105.default.createElement("li", __spreadProps(__spreadValues({}, rest), {
     role: "presentation",
     className: classNames(tw("px-6 py-5 mt-auto"), className)
   }));
 };
 var Section2 = (_a) => {
   var _b = _a, { title, className } = _b, rest = __objRest(_b, ["title", "className"]);
-  return /* @__PURE__ */ import_react104.default.createElement("li", {
+  return /* @__PURE__ */ import_react105.default.createElement("li", {
     role: "presentation",
     className: tw("py-5")
-  }, title && /* @__PURE__ */ import_react104.default.createElement("div", {
+  }, title && /* @__PURE__ */ import_react105.default.createElement("div", {
     className: classNames(className, "py-2 px-6 text-inactive uppercase cursor-default typography-caption")
-  }, title), /* @__PURE__ */ import_react104.default.createElement("ul", __spreadProps(__spreadValues({}, rest), {
+  }, title), /* @__PURE__ */ import_react105.default.createElement("ul", __spreadProps(__spreadValues({}, rest), {
     role: "group",
     className: classNames(tw("flex flex-col"), className)
   })));
 };
 var Divider3 = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ import_react104.default.createElement("li", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ import_react105.default.createElement("li", __spreadProps(__spreadValues({
     role: "separator"
   }, rest), {
     className: classNames(tw("border-t-2 border-muted"), className)
@@ -14330,13 +14469,13 @@ var Divider3 = (_a) => {
 };
 var Item5 = (_a) => {
   var _b = _a, { className, active } = _b, rest = __objRest(_b, ["className", "active"]);
-  return /* @__PURE__ */ import_react104.default.createElement("li", {
+  return /* @__PURE__ */ import_react105.default.createElement("li", {
     role: "presentation"
-  }, /* @__PURE__ */ import_react104.default.createElement("a", __spreadProps(__spreadValues({}, rest), {
+  }, /* @__PURE__ */ import_react105.default.createElement("a", __spreadProps(__spreadValues({}, rest), {
     role: "menuitem",
     className: classNames(
       tw("py-3 px-6 hover:bg-default cursor-pointer flex gap-4 items-center typography-small focusable", {
-        "text-grey-60": !active,
+        "text-default": !active,
         "text-primary-intense": !!active
       }),
       className
@@ -14352,8 +14491,8 @@ Navigation.Divider = Divider3;
 // src/molecules/Navigation/Navigation.tsx
 var Navigation2 = (_a) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ import_react105.default.createElement(Navigation, __spreadValues({
-    className: (0, import_classnames10.default)("Aquarium-Navigation", className)
+  return /* @__PURE__ */ import_react106.default.createElement(Navigation, __spreadValues({
+    className: (0, import_classnames11.default)("Aquarium-Navigation", className)
   }, props));
 };
 var Item6 = (_a) => {
@@ -14366,11 +14505,11 @@ var Item6 = (_a) => {
     "icon",
     "showNotification"
   ]);
-  return /* @__PURE__ */ import_react105.default.createElement(Navigation.Item, __spreadValues({}, rest), icon && showNotification && /* @__PURE__ */ import_react105.default.createElement(Badge.Notification, null, /* @__PURE__ */ import_react105.default.createElement(InlineIcon, {
+  return /* @__PURE__ */ import_react106.default.createElement(Navigation.Item, __spreadValues({}, rest), icon && showNotification && /* @__PURE__ */ import_react106.default.createElement(Badge.Notification, null, /* @__PURE__ */ import_react106.default.createElement(InlineIcon, {
     icon,
     width: "20px",
     height: "20px"
-  })), icon && !showNotification && /* @__PURE__ */ import_react105.default.createElement(InlineIcon, {
+  })), icon && !showNotification && /* @__PURE__ */ import_react106.default.createElement(InlineIcon, {
     icon,
     width: "20px",
     height: "20px"
@@ -14383,52 +14522,52 @@ Navigation2.Header = Navigation.Header;
 Navigation2.Section = Navigation.Section;
 
 // src/molecules/PageHeader/PageHeader.tsx
-var import_react107 = __toESM(require("react"));
+var import_react108 = __toESM(require("react"));
 var import_castArray6 = __toESM(require("lodash/castArray"));
 
 // src/atoms/PageHeader/PageHeader.tsx
-var import_react106 = __toESM(require("react"));
+var import_react107 = __toESM(require("react"));
 var PageHeader = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ import_react106.default.createElement("div", __spreadValues({
+  return /* @__PURE__ */ import_react107.default.createElement("div", __spreadValues({
     className: classNames(tw("flex flex-row gap-4 pb-6"), className)
   }, rest), children);
 };
 PageHeader.Container = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ import_react106.default.createElement("div", __spreadValues({
+  return /* @__PURE__ */ import_react107.default.createElement("div", __spreadValues({
     className: classNames(tw("flex flex-col grow gap-0"), className)
   }, rest), children);
 };
 PageHeader.TitleContainer = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ import_react106.default.createElement("div", __spreadValues({
+  return /* @__PURE__ */ import_react107.default.createElement("div", __spreadValues({
     className: classNames(tw("flex flex-col justify-center gap-2"), className)
   }, rest), children);
 };
 PageHeader.Title = (_a) => {
   var _b = _a, { isSubHeader = false, children } = _b, rest = __objRest(_b, ["isSubHeader", "children"]);
-  return /* @__PURE__ */ import_react106.default.createElement(Typography2, __spreadProps(__spreadValues({}, rest), {
-    color: "grey-100",
+  return /* @__PURE__ */ import_react107.default.createElement(Typography2, __spreadProps(__spreadValues({}, rest), {
+    color: "intense",
     variant: isSubHeader ? "subheading" : "heading",
     htmlTag: isSubHeader ? "h2" : "h1"
   }), children);
 };
 PageHeader.Subtitle = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ import_react106.default.createElement(Typography2.Small, __spreadProps(__spreadValues({}, rest), {
-    color: "grey-70"
+  return /* @__PURE__ */ import_react107.default.createElement(Typography2.Small, __spreadProps(__spreadValues({}, rest), {
+    color: "default"
   }), children);
 };
 PageHeader.Chips = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ import_react106.default.createElement("div", __spreadValues({
+  return /* @__PURE__ */ import_react107.default.createElement("div", __spreadValues({
     className: classNames(tw("flex gap-3"), className)
   }, rest), children);
 };
 PageHeader.Actions = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ import_react106.default.createElement("div", __spreadValues({
+  return /* @__PURE__ */ import_react107.default.createElement("div", __spreadValues({
     className: classNames(tw("flex flex-row gap-4 self-start"), className)
   }, rest), children);
 };
@@ -14452,64 +14591,64 @@ var CommonPageHeader = ({
   onMenuOpenChange,
   isSubHeader = false
 }) => {
-  return /* @__PURE__ */ import_react107.default.createElement(PageHeader, {
+  return /* @__PURE__ */ import_react108.default.createElement(PageHeader, {
     className: "Aquarium-PageHeader"
-  }, /* @__PURE__ */ import_react107.default.createElement(PageHeader.Container, null, breadcrumbs && /* @__PURE__ */ import_react107.default.createElement(Box, {
+  }, /* @__PURE__ */ import_react108.default.createElement(PageHeader.Container, null, breadcrumbs && /* @__PURE__ */ import_react108.default.createElement(Box, {
     marginBottom: "3"
-  }, /* @__PURE__ */ import_react107.default.createElement(Breadcrumbs, null, breadcrumbs)), /* @__PURE__ */ import_react107.default.createElement(Spacing, {
+  }, /* @__PURE__ */ import_react108.default.createElement(Breadcrumbs, null, breadcrumbs)), /* @__PURE__ */ import_react108.default.createElement(Spacing, {
     row: true,
     gap: "5"
-  }, image && /* @__PURE__ */ import_react107.default.createElement("img", {
+  }, image && /* @__PURE__ */ import_react108.default.createElement("img", {
     src: image,
     alt: imageAlt != null ? imageAlt : "",
     className: tw("w-[56px] h-[56px]")
-  }), /* @__PURE__ */ import_react107.default.createElement(PageHeader.TitleContainer, null, /* @__PURE__ */ import_react107.default.createElement(PageHeader.Title, {
+  }), /* @__PURE__ */ import_react108.default.createElement(PageHeader.TitleContainer, null, /* @__PURE__ */ import_react108.default.createElement(PageHeader.Title, {
     isSubHeader
-  }, title), chips.length > 0 && /* @__PURE__ */ import_react107.default.createElement(PageHeader.Chips, null, chips.map((chip) => /* @__PURE__ */ import_react107.default.createElement(Chip2, {
+  }, title), chips.length > 0 && /* @__PURE__ */ import_react108.default.createElement(PageHeader.Chips, null, chips.map((chip) => /* @__PURE__ */ import_react108.default.createElement(Chip2, {
     key: chip,
     dense: true,
     text: chip
-  }))), subtitle && /* @__PURE__ */ import_react107.default.createElement(PageHeader.Subtitle, null, subtitle)))), (secondaryActions || primaryAction || secondaryAction || menu) && /* @__PURE__ */ import_react107.default.createElement(PageHeader.Actions, null, menu && /* @__PURE__ */ import_react107.default.createElement(Box.Flex, {
+  }))), subtitle && /* @__PURE__ */ import_react108.default.createElement(PageHeader.Subtitle, null, subtitle)))), (secondaryActions || primaryAction || secondaryAction || menu) && /* @__PURE__ */ import_react108.default.createElement(PageHeader.Actions, null, menu && /* @__PURE__ */ import_react108.default.createElement(Box.Flex, {
     alignItems: "center"
-  }, /* @__PURE__ */ import_react107.default.createElement(DropdownMenu2, {
+  }, /* @__PURE__ */ import_react108.default.createElement(DropdownMenu2, {
     placement: defaultContextualMenuPlacement,
     onAction: (action) => onAction == null ? void 0 : onAction(action),
     onOpenChange: onMenuOpenChange
-  }, /* @__PURE__ */ import_react107.default.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ import_react107.default.createElement(Button.Icon, {
+  }, /* @__PURE__ */ import_react108.default.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ import_react108.default.createElement(Button.Icon, {
     "aria-label": menuAriaLabel,
     icon: import_more5.default
   })), menu)), secondaryActions && (0, import_castArray6.default)(secondaryActions).filter(Boolean).map((secondaryAction2) => renderAction({ kind: "secondary", action: secondaryAction2 })), primaryAction && renderAction({ kind: "primary", action: primaryAction })));
 };
-var PageHeader2 = (props) => /* @__PURE__ */ import_react107.default.createElement(CommonPageHeader, __spreadValues({}, props));
+var PageHeader2 = (props) => /* @__PURE__ */ import_react108.default.createElement(CommonPageHeader, __spreadValues({}, props));
 PageHeader2.displayName = "PageHeader";
-var SubHeader = (props) => /* @__PURE__ */ import_react107.default.createElement(CommonPageHeader, __spreadProps(__spreadValues({}, props), {
+var SubHeader = (props) => /* @__PURE__ */ import_react108.default.createElement(CommonPageHeader, __spreadProps(__spreadValues({}, props), {
   isSubHeader: true
 }));
 PageHeader2.SubHeader = SubHeader;
 PageHeader2.SubHeader.displayName = "PageHeader.SubHeader";
 
 // src/molecules/PopoverDialog/PopoverDialog.tsx
-var import_react109 = __toESM(require("react"));
+var import_react110 = __toESM(require("react"));
 var import_omit15 = __toESM(require("lodash/omit"));
 
 // src/atoms/PopoverDialog/PopoverDialog.tsx
-var import_react108 = __toESM(require("react"));
+var import_react109 = __toESM(require("react"));
 var Header2 = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ import_react108.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react109.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("p-5 gap-3 flex items-center"), className)
   }), children);
 };
 var Title2 = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ import_react108.default.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react109.default.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
     htmlTag: "h1",
     variant: "small-strong"
   }), children);
 };
 var Body = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ import_react108.default.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react109.default.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
     htmlTag: "div",
     variant: "caption",
     className: classNames(tw("px-5 overflow-y-auto"), className)
@@ -14517,13 +14656,13 @@ var Body = (_a) => {
 };
 var Footer2 = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ import_react108.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react109.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("p-5"), className)
   }), children);
 };
 var Actions2 = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ import_react108.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react109.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("flex gap-4"), className)
   }), children);
 };
@@ -14539,13 +14678,13 @@ var PopoverDialog = {
 var PopoverDialog2 = ({ placement, open, title, secondaryAction, primaryAction, children }) => {
   const wrapPromptWithBody = (child) => {
     if (isComponentType(child, PopoverDialog2.Prompt)) {
-      return /* @__PURE__ */ import_react109.default.createElement(Popover2.Panel, {
+      return /* @__PURE__ */ import_react110.default.createElement(Popover2.Panel, {
         className: classNames("Aquarium-PopoverDialog", tw("max-w-[300px]"))
-      }, /* @__PURE__ */ import_react109.default.createElement(PopoverDialog.Header, null, /* @__PURE__ */ import_react109.default.createElement(PopoverDialog.Title, null, title)), child, /* @__PURE__ */ import_react109.default.createElement(PopoverDialog.Footer, null, /* @__PURE__ */ import_react109.default.createElement(PopoverDialog.Actions, null, secondaryAction && /* @__PURE__ */ import_react109.default.createElement(Popover2.Button, __spreadValues({
+      }, /* @__PURE__ */ import_react110.default.createElement(PopoverDialog.Header, null, /* @__PURE__ */ import_react110.default.createElement(PopoverDialog.Title, null, title)), child, /* @__PURE__ */ import_react110.default.createElement(PopoverDialog.Footer, null, /* @__PURE__ */ import_react110.default.createElement(PopoverDialog.Actions, null, secondaryAction && /* @__PURE__ */ import_react110.default.createElement(Popover2.Button, __spreadValues({
         kind: "secondary-ghost",
         key: secondaryAction.text,
         dense: true
-      }, (0, import_omit15.default)(secondaryAction, "text")), secondaryAction.text), /* @__PURE__ */ import_react109.default.createElement(Popover2.Button, __spreadValues({
+      }, (0, import_omit15.default)(secondaryAction, "text")), secondaryAction.text), /* @__PURE__ */ import_react110.default.createElement(Popover2.Button, __spreadValues({
         kind: "ghost",
         key: primaryAction.text,
         dense: true
@@ -14553,15 +14692,15 @@ var PopoverDialog2 = ({ placement, open, title, secondaryAction, primaryAction,
     }
     return child;
   };
-  return /* @__PURE__ */ import_react109.default.createElement(Popover2, {
+  return /* @__PURE__ */ import_react110.default.createElement(Popover2, {
     type: "dialog",
     isOpen: open,
     placement,
     containFocus: true
-  }, import_react109.default.Children.map(children, wrapPromptWithBody));
+  }, import_react110.default.Children.map(children, wrapPromptWithBody));
 };
 PopoverDialog2.Trigger = Popover2.Trigger;
-var Prompt = ({ children }) => /* @__PURE__ */ import_react109.default.createElement(PopoverDialog.Body, null, children);
+var Prompt = ({ children }) => /* @__PURE__ */ import_react110.default.createElement(PopoverDialog.Body, null, children);
 Prompt.displayName = "PopoverDialog.Prompt";
 PopoverDialog2.Prompt = Prompt;
 
@@ -14570,14 +14709,14 @@ var import_react_dom = require("react-dom");
 var Portal = ({ children, to }) => (0, import_react_dom.createPortal)(children, to);
 
 // src/molecules/ProgressBar/ProgressBar.tsx
-var import_react111 = __toESM(require("react"));
+var import_react112 = __toESM(require("react"));
 
 // src/atoms/ProgressBar/ProgressBar.tsx
-var import_react110 = __toESM(require("react"));
+var import_react111 = __toESM(require("react"));
 var import_clamp3 = __toESM(require("lodash/clamp"));
 var ProgressBar = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ import_react110.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react111.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("relative flex items-center w-full bg-muted h-2 rounded-full overflow-hidden"), className)
   }), children);
 };
@@ -14590,7 +14729,7 @@ var STATUS_COLORS = {
 ProgressBar.Indicator = (_a) => {
   var _b = _a, { min, max, value, "aria-label": ariaLabel, status, className } = _b, rest = __objRest(_b, ["min", "max", "value", "aria-label", "status", "className"]);
   const completedPercentage = (0, import_clamp3.default)((value - min) / (max - min) * 100, 0, 100);
-  return /* @__PURE__ */ import_react110.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react111.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       tw("h-2 rounded-full transition-all ease-in-out delay-150"),
       STATUS_COLORS[status],
@@ -14606,11 +14745,11 @@ ProgressBar.Indicator = (_a) => {
 };
 ProgressBar.Labels = (_a) => {
   var _b = _a, { children, startLabel, endLabel, className } = _b, rest = __objRest(_b, ["children", "startLabel", "endLabel", "className"]);
-  return /* @__PURE__ */ import_react110.default.createElement("div", {
+  return /* @__PURE__ */ import_react111.default.createElement("div", {
     className: classNames(tw("flex flex-row"), className)
-  }, /* @__PURE__ */ import_react110.default.createElement("span", __spreadProps(__spreadValues({}, rest), {
+  }, /* @__PURE__ */ import_react111.default.createElement("span", __spreadProps(__spreadValues({}, rest), {
     className: tw("grow text-default typography-caption")
-  }), startLabel), /* @__PURE__ */ import_react110.default.createElement("span", __spreadProps(__spreadValues({}, rest), {
+  }), startLabel), /* @__PURE__ */ import_react111.default.createElement("span", __spreadProps(__spreadValues({}, rest), {
     className: tw("grow text-default typography-caption text-right")
   }), endLabel));
 };
@@ -14628,7 +14767,7 @@ var ProgressBar2 = (props) => {
   if (min > max) {
     throw new Error("`min` value provided to `ProgressBar` is greater than `max` value.");
   }
-  const progress = /* @__PURE__ */ import_react111.default.createElement(ProgressBar, null, /* @__PURE__ */ import_react111.default.createElement(ProgressBar.Indicator, {
+  const progress = /* @__PURE__ */ import_react112.default.createElement(ProgressBar, null, /* @__PURE__ */ import_react112.default.createElement(ProgressBar.Indicator, {
     status: value === max ? completedStatus : progresStatus,
     min,
     max,
@@ -14638,15 +14777,15 @@ var ProgressBar2 = (props) => {
   if (props.dense) {
     return progress;
   }
-  return /* @__PURE__ */ import_react111.default.createElement("div", {
+  return /* @__PURE__ */ import_react112.default.createElement("div", {
     className: "Aquarium-ProgressBar"
-  }, progress, /* @__PURE__ */ import_react111.default.createElement(ProgressBar.Labels, {
+  }, progress, /* @__PURE__ */ import_react112.default.createElement(ProgressBar.Labels, {
     className: tw("py-2"),
     startLabel: props.startLabel,
     endLabel: props.endLabel
   }));
 };
-var ProgressBarSkeleton = () => /* @__PURE__ */ import_react111.default.createElement(Skeleton, {
+var ProgressBarSkeleton = () => /* @__PURE__ */ import_react112.default.createElement(Skeleton, {
   height: 4,
   display: "block"
 });
@@ -14654,13 +14793,13 @@ ProgressBar2.Skeleton = ProgressBarSkeleton;
 ProgressBar2.Skeleton.displayName = "ProgressBar.Skeleton";
 
 // src/molecules/RadioButton/RadioButton.tsx
-var import_react112 = __toESM(require("react"));
-var RadioButton2 = import_react112.default.forwardRef(
+var import_react113 = __toESM(require("react"));
+var RadioButton2 = import_react113.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { name, id, readOnly = false, disabled = false, caption, children, "aria-label": ariaLabel } = _b, props = __objRest(_b, ["name", "id", "readOnly", "disabled", "caption", "children", "aria-label"]);
     var _a2;
     const isChecked = (_a2 = props.checked) != null ? _a2 : props.defaultChecked;
-    return !readOnly || isChecked ? /* @__PURE__ */ import_react112.default.createElement(ControlLabel, {
+    return !readOnly || isChecked ? /* @__PURE__ */ import_react113.default.createElement(ControlLabel, {
       htmlFor: id,
       label: children,
       "aria-label": ariaLabel,
@@ -14669,7 +14808,7 @@ var RadioButton2 = import_react112.default.forwardRef(
       disabled,
       style: { gap: "0 8px" },
       className: "Aquarium-RadioButton"
-    }, !readOnly && /* @__PURE__ */ import_react112.default.createElement(RadioButton, __spreadProps(__spreadValues({
+    }, !readOnly && /* @__PURE__ */ import_react113.default.createElement(RadioButton, __spreadProps(__spreadValues({
       id,
       ref,
       name
@@ -14680,12 +14819,12 @@ var RadioButton2 = import_react112.default.forwardRef(
   }
 );
 RadioButton2.displayName = "RadioButton";
-var RadioButtonSkeleton = () => /* @__PURE__ */ import_react112.default.createElement("div", {
+var RadioButtonSkeleton = () => /* @__PURE__ */ import_react113.default.createElement("div", {
   className: tw("flex gap-3")
-}, /* @__PURE__ */ import_react112.default.createElement(Skeleton, {
+}, /* @__PURE__ */ import_react113.default.createElement(Skeleton, {
   height: 20,
   width: 20
-}), /* @__PURE__ */ import_react112.default.createElement(Skeleton, {
+}), /* @__PURE__ */ import_react113.default.createElement(Skeleton, {
   height: 20,
   width: 150
 }));
@@ -14693,10 +14832,10 @@ RadioButton2.Skeleton = RadioButtonSkeleton;
 RadioButton2.Skeleton.displayName = "RadioButton.Skeleton";
 
 // src/molecules/RadioButtonGroup/RadioButtonGroup.tsx
-var import_react113 = __toESM(require("react"));
+var import_react114 = __toESM(require("react"));
 var import_utils30 = require("@react-aria/utils");
 var isRadioButton = (c) => {
-  return import_react113.default.isValidElement(c) && c.type === RadioButton2;
+  return import_react114.default.isValidElement(c) && c.type === RadioButton2;
 };
 var RadioButtonGroup = (_a) => {
   var _b = _a, {
@@ -14719,7 +14858,7 @@ var RadioButtonGroup = (_a) => {
     "children"
   ]);
   var _a2;
-  const [value, setValue] = import_react113.default.useState((_a2 = _value != null ? _value : defaultValue) != null ? _a2 : "");
+  const [value, setValue] = import_react114.default.useState((_a2 = _value != null ? _value : defaultValue) != null ? _a2 : "");
   const errorMessageId = (0, import_utils30.useId)();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const labelControlProps = getLabelControlProps(props);
@@ -14730,14 +14869,14 @@ var RadioButtonGroup = (_a) => {
     setValue(e.target.value);
     onChange == null ? void 0 : onChange(e.target.value);
   };
-  const content = import_react113.default.Children.map(children, (c) => {
+  const content = import_react114.default.Children.map(children, (c) => {
     var _a3, _b2, _c;
     if (!isRadioButton(c)) {
       return null;
     }
     const defaultChecked = defaultValue === void 0 ? void 0 : c.props.value === defaultValue;
     const checked = value === void 0 ? void 0 : c.props.value === value;
-    return import_react113.default.cloneElement(c, {
+    return import_react114.default.cloneElement(c, {
       name,
       defaultChecked: (_a3 = c.props.defaultChecked) != null ? _a3 : defaultChecked,
       checked: (_b2 = c.props.checked) != null ? _b2 : checked,
@@ -14746,13 +14885,13 @@ var RadioButtonGroup = (_a) => {
       readOnly
     });
   });
-  return /* @__PURE__ */ import_react113.default.createElement(LabelControl, __spreadProps(__spreadValues(__spreadValues({
+  return /* @__PURE__ */ import_react114.default.createElement(LabelControl, __spreadProps(__spreadValues(__spreadValues({
     fieldset: true
   }, labelControlProps), errorProps), {
     className: "Aquarium-RadioButtonGroup"
-  }), cols && /* @__PURE__ */ import_react113.default.createElement(InputGroup, {
+  }), cols && /* @__PURE__ */ import_react114.default.createElement(InputGroup, {
     cols
-  }, content), !cols && /* @__PURE__ */ import_react113.default.createElement(Flexbox, {
+  }, content), !cols && /* @__PURE__ */ import_react114.default.createElement(Flexbox, {
     direction,
     alignItems: "flex-start",
     colGap: "8",
@@ -14761,12 +14900,12 @@ var RadioButtonGroup = (_a) => {
   }, content));
 };
 var RadioButtonGroupSkeleton = ({ direction = "row", options = 2 }) => {
-  return /* @__PURE__ */ import_react113.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react113.default.createElement("div", {
+  return /* @__PURE__ */ import_react114.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react114.default.createElement("div", {
     className: tw("flex flex-wrap", {
       "flex-row gap-8": direction === "row",
       "flex-col gap-2": direction === "column"
     })
-  }, Array.from({ length: options }).map((_, key) => /* @__PURE__ */ import_react113.default.createElement(RadioButton2.Skeleton, {
+  }, Array.from({ length: options }).map((_, key) => /* @__PURE__ */ import_react114.default.createElement(RadioButton2.Skeleton, {
     key
   }))));
 };
@@ -14774,24 +14913,24 @@ RadioButtonGroup.Skeleton = RadioButtonGroupSkeleton;
 RadioButtonGroup.Skeleton.displayName = "RadioButtonGroup.Skeleton";
 
 // src/molecules/Section/Section.tsx
-var import_react118 = __toESM(require("react"));
+var import_react119 = __toESM(require("react"));
 var import_utils31 = require("@react-aria/utils");
-var import_web5 = require("@react-spring/web");
+var import_web6 = require("@react-spring/web");
 var import_castArray7 = __toESM(require("lodash/castArray"));
 var import_isUndefined9 = __toESM(require("lodash/isUndefined"));
 
 // src/molecules/Switch/Switch.tsx
-var import_react115 = __toESM(require("react"));
+var import_react116 = __toESM(require("react"));
 
 // src/atoms/Switch/Switch.tsx
-var import_react114 = __toESM(require("react"));
+var import_react115 = __toESM(require("react"));
 var import_ban2 = __toESM(require_ban());
-var Switch = import_react114.default.forwardRef(
+var Switch = import_react115.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { id, children, name, disabled = false, readOnly = false } = _b, props = __objRest(_b, ["id", "children", "name", "disabled", "readOnly"]);
-    return /* @__PURE__ */ import_react114.default.createElement("span", {
+    return /* @__PURE__ */ import_react115.default.createElement("span", {
       className: tw("relative inline-flex justify-center items-center self-center group")
-    }, /* @__PURE__ */ import_react114.default.createElement("input", __spreadProps(__spreadValues({
+    }, /* @__PURE__ */ import_react115.default.createElement("input", __spreadProps(__spreadValues({
       id,
       ref,
       type: "checkbox",
@@ -14810,7 +14949,7 @@ var Switch = import_react114.default.forwardRef(
       ),
       readOnly,
       disabled
-    })), /* @__PURE__ */ import_react114.default.createElement("span", {
+    })), /* @__PURE__ */ import_react115.default.createElement("span", {
       className: tw(
         "pointer-events-none rounded-full absolute inline-flex justify-center items-center transition duration-300 h-4 w-4 transform peer-checked/switch:translate-x-5",
         "bg-white left-2 peer-checked/switch:left-1 text-inactive peer-checked/switch:text-primary-muted",
@@ -14818,7 +14957,7 @@ var Switch = import_react114.default.forwardRef(
           "shadow-4dp": !disabled
         }
       )
-    }, disabled && /* @__PURE__ */ import_react114.default.createElement(Icon, {
+    }, disabled && /* @__PURE__ */ import_react115.default.createElement(Icon, {
       icon: import_ban2.default,
       width: "10px",
       height: "10px"
@@ -14827,7 +14966,7 @@ var Switch = import_react114.default.forwardRef(
 );
 
 // src/molecules/Switch/Switch.tsx
-var Switch2 = import_react115.default.forwardRef(
+var Switch2 = import_react116.default.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       id,
@@ -14850,7 +14989,7 @@ var Switch2 = import_react115.default.forwardRef(
     ]);
     var _a2;
     const isChecked = (_a2 = props.checked) != null ? _a2 : props.defaultChecked;
-    return !readOnly || isChecked ? /* @__PURE__ */ import_react115.default.createElement(ControlLabel, {
+    return !readOnly || isChecked ? /* @__PURE__ */ import_react116.default.createElement(ControlLabel, {
       htmlFor: id,
       label: children,
       "aria-label": ariaLabel,
@@ -14860,7 +14999,7 @@ var Switch2 = import_react115.default.forwardRef(
       style: { gap: "0 8px" },
       labelPlacement,
       className: "Aquarium-Switch"
-    }, !readOnly && /* @__PURE__ */ import_react115.default.createElement(Switch, __spreadProps(__spreadValues({
+    }, !readOnly && /* @__PURE__ */ import_react116.default.createElement(Switch, __spreadProps(__spreadValues({
       id,
       ref,
       name
@@ -14871,12 +15010,12 @@ var Switch2 = import_react115.default.forwardRef(
   }
 );
 Switch2.displayName = "Switch";
-var SwitchSkeleton = () => /* @__PURE__ */ import_react115.default.createElement("div", {
+var SwitchSkeleton = () => /* @__PURE__ */ import_react116.default.createElement("div", {
   className: tw("flex gap-3")
-}, /* @__PURE__ */ import_react115.default.createElement(Skeleton, {
+}, /* @__PURE__ */ import_react116.default.createElement(Skeleton, {
   height: 20,
   width: 35
-}), /* @__PURE__ */ import_react115.default.createElement(Skeleton, {
+}), /* @__PURE__ */ import_react116.default.createElement(Skeleton, {
   height: 20,
   width: 150
 }));
@@ -14884,7 +15023,7 @@ Switch2.Skeleton = SwitchSkeleton;
 Switch2.Skeleton.displayName = "Switch.Skeleton ";
 
 // src/molecules/TagLabel/TagLabel.tsx
-var import_react116 = __toESM(require("react"));
+var import_react117 = __toESM(require("react"));
 var getVariantClassNames = (variant = "primary") => {
   switch (variant) {
     case "danger":
@@ -14898,7 +15037,7 @@ var getVariantClassNames = (variant = "primary") => {
 };
 var TagLabel = (_a) => {
   var _b = _a, { title, dense = false, variant } = _b, rest = __objRest(_b, ["title", "dense", "variant"]);
-  return /* @__PURE__ */ import_react116.default.createElement("span", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react117.default.createElement("span", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       "Aquarium-TagLabel",
       getVariantClassNames(variant),
@@ -14911,11 +15050,11 @@ var TagLabel = (_a) => {
 };
 
 // src/atoms/Section/Section.tsx
-var import_react117 = __toESM(require("react"));
+var import_react118 = __toESM(require("react"));
 var import_caretUp2 = __toESM(require_caretUp());
 var Section3 = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ import_react117.default.createElement(Box, __spreadValues({
+  return /* @__PURE__ */ import_react118.default.createElement(Box, __spreadValues({
     component: "section",
     borderColor: "grey-5",
     borderWidth: "1px"
@@ -14923,7 +15062,7 @@ var Section3 = (_a) => {
 };
 Section3.Header = (_a) => {
   var _b = _a, { children, className, expanded } = _b, rest = __objRest(_b, ["children", "className", "expanded"]);
-  return /* @__PURE__ */ import_react117.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react118.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       tw("px-6 flex gap-5 justify-between items-center h-[72px]", { "bg-muted": expanded }),
       className
@@ -14932,45 +15071,45 @@ Section3.Header = (_a) => {
 };
 Section3.TitleContainer = (_a) => {
   var _b = _a, { children, className, collapsible } = _b, rest = __objRest(_b, ["children", "className", "collapsible"]);
-  return /* @__PURE__ */ import_react117.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react118.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       tw("grow grid grid-cols-[auto_1fr] gap-x-3 items-center", { "cursor-pointer": collapsible }),
       className
     )
   }), children);
 };
-Section3.Toggle = (props) => /* @__PURE__ */ import_react117.default.createElement(Icon, __spreadProps(__spreadValues({}, props), {
+Section3.Toggle = (props) => /* @__PURE__ */ import_react118.default.createElement(Icon, __spreadProps(__spreadValues({}, props), {
   icon: import_caretUp2.default,
   height: 22,
   width: 22
 }));
 Section3.Title = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ import_react117.default.createElement(Typography2.Large, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react118.default.createElement(Typography2.Large, __spreadProps(__spreadValues({}, rest), {
     htmlTag: "h2",
-    color: "black",
+    color: "intense",
     className: "flex gap-3 items-center"
   }), children);
 };
 Section3.Subtitle = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ import_react117.default.createElement(Typography2.Small, __spreadProps(__spreadValues({}, rest), {
-    color: "grey-70"
+  return /* @__PURE__ */ import_react118.default.createElement(Typography2.Small, __spreadProps(__spreadValues({}, rest), {
+    color: "default"
   }), children);
 };
 Section3.Actions = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ import_react117.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react118.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("flex gap-4 justify-end"), className)
   }), children);
 };
 Section3.Body = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ import_react117.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react118.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("p-6"), className)
-  }), /* @__PURE__ */ import_react117.default.createElement(Typography, {
+  }), /* @__PURE__ */ import_react118.default.createElement(Typography, {
     htmlTag: "div",
-    color: "grey-70"
+    color: "default"
   }, children));
 };
 
@@ -14982,7 +15121,7 @@ var Section4 = (props) => {
   const _collapsible = title ? (_a = props.collapsible) != null ? _a : false : false;
   const _collapsed = title ? props.collapsed : void 0;
   const _defaultCollapsed = title ? (_b = props.defaultCollapsed) != null ? _b : false : false;
-  const [isCollapsed, setCollapsed] = import_react118.default.useState(_collapsed != null ? _collapsed : _defaultCollapsed);
+  const [isCollapsed, setCollapsed] = import_react119.default.useState(_collapsed != null ? _collapsed : _defaultCollapsed);
   const [ref, { height }] = useMeasure();
   const menu = title ? (_c = props.menu) != null ? _c : void 0 : void 0;
   const menuAriaLabel = title ? (_e = (_d = props.menuAriaLabel) != null ? _d : props.menuLabel) != null ? _e : "Context menu" : void 0;
@@ -15003,7 +15142,7 @@ var Section4 = (props) => {
     }
   };
   const targetHeight = isCollapsed ? "0px" : `${height != null ? height : 0}px`;
-  const _f = (0, import_web5.useSpring)({
+  const _f = (0, import_web6.useSpring)({
     height: height !== null ? targetHeight : void 0,
     opacity: isCollapsed ? 0 : 1,
     transform: `rotate(${isCollapsed ? 90 : 180}deg)`,
@@ -15017,61 +15156,61 @@ var Section4 = (props) => {
   const regionId = (0, import_utils31.useId)();
   const titleId = (0, import_utils31.useId)();
   const hasTabs = isComponentType(children, Tabs);
-  return /* @__PURE__ */ import_react118.default.createElement(Section3, {
+  return /* @__PURE__ */ import_react119.default.createElement(Section3, {
     "aria-label": title,
     className: "Aquarium-Section"
-  }, title && /* @__PURE__ */ import_react118.default.createElement(import_react118.default.Fragment, null, /* @__PURE__ */ import_react118.default.createElement(Section3.Header, {
+  }, title && /* @__PURE__ */ import_react119.default.createElement(import_react119.default.Fragment, null, /* @__PURE__ */ import_react119.default.createElement(Section3.Header, {
     expanded: _collapsible && !isCollapsed
-  }, /* @__PURE__ */ import_react118.default.createElement(Section3.TitleContainer, {
+  }, /* @__PURE__ */ import_react119.default.createElement(Section3.TitleContainer, {
     role: _collapsible ? "button" : void 0,
     id: toggleId,
     collapsible: _collapsible,
     onClick: handleTitleClick,
     "aria-expanded": _collapsible ? !isCollapsed : void 0,
     "aria-controls": _collapsible ? regionId : void 0
-  }, _collapsible && /* @__PURE__ */ import_react118.default.createElement(import_web5.animated.div, {
+  }, _collapsible && /* @__PURE__ */ import_react119.default.createElement(import_web6.animated.div, {
     style: { transform }
-  }, /* @__PURE__ */ import_react118.default.createElement(Section3.Toggle, null)), /* @__PURE__ */ import_react118.default.createElement(Section3.Title, {
+  }, /* @__PURE__ */ import_react119.default.createElement(Section3.Toggle, null)), /* @__PURE__ */ import_react119.default.createElement(Section3.Title, {
     id: titleId
-  }, /* @__PURE__ */ import_react118.default.createElement(LineClamp2, {
+  }, /* @__PURE__ */ import_react119.default.createElement(LineClamp2, {
     lines: 1
-  }, title), props.tag && /* @__PURE__ */ import_react118.default.createElement(TagLabel, __spreadValues({}, props.tag)), props.badge && /* @__PURE__ */ import_react118.default.createElement(Chip2, {
+  }, title), props.tag && /* @__PURE__ */ import_react119.default.createElement(TagLabel, __spreadValues({}, props.tag)), props.badge && /* @__PURE__ */ import_react119.default.createElement(Chip2, {
     text: props.badge
-  }), props.chip && /* @__PURE__ */ import_react118.default.createElement(StatusChip, __spreadValues({}, props.chip))), subtitle && /* @__PURE__ */ import_react118.default.createElement(Section3.Subtitle, {
+  }), props.chip && /* @__PURE__ */ import_react119.default.createElement(StatusChip, __spreadValues({}, props.chip))), subtitle && /* @__PURE__ */ import_react119.default.createElement(Section3.Subtitle, {
     className: tw("row-start-2", { "col-start-2": _collapsible })
-  }, /* @__PURE__ */ import_react118.default.createElement(LineClamp2, {
+  }, /* @__PURE__ */ import_react119.default.createElement(LineClamp2, {
     lines: 1
-  }, subtitle))), !isCollapsed && /* @__PURE__ */ import_react118.default.createElement(Section3.Actions, null, menu && /* @__PURE__ */ import_react118.default.createElement(Box.Flex, {
+  }, subtitle))), !isCollapsed && /* @__PURE__ */ import_react119.default.createElement(Section3.Actions, null, menu && /* @__PURE__ */ import_react119.default.createElement(Box.Flex, {
     alignItems: "center"
-  }, /* @__PURE__ */ import_react118.default.createElement(DropdownMenu2, {
+  }, /* @__PURE__ */ import_react119.default.createElement(DropdownMenu2, {
     onAction: (action) => onAction == null ? void 0 : onAction(action),
     onOpenChange: onMenuOpenChange,
     placement: defaultContextualMenuPlacement
-  }, /* @__PURE__ */ import_react118.default.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ import_react118.default.createElement(Button.Icon, {
+  }, /* @__PURE__ */ import_react119.default.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ import_react119.default.createElement(Button.Icon, {
     "aria-label": menuAriaLabel,
     icon: import_more6.default
-  })), menu)), props.actions && (0, import_castArray7.default)(props.actions).filter(Boolean).map((action) => renderAction({ kind: "secondary", action })), props.switch && /* @__PURE__ */ import_react118.default.createElement(Switch2, __spreadValues({}, props.switch)), props.select && /* @__PURE__ */ import_react118.default.createElement(SelectBase, __spreadValues({
+  })), menu)), props.actions && (0, import_castArray7.default)(props.actions).filter(Boolean).map((action) => renderAction({ kind: "secondary", action })), props.switch && /* @__PURE__ */ import_react119.default.createElement(Switch2, __spreadValues({}, props.switch)), props.select && /* @__PURE__ */ import_react119.default.createElement(SelectBase, __spreadValues({
     "aria-labelledby": titleId
-  }, props.select)))), !hasTabs && /* @__PURE__ */ import_react118.default.createElement(import_web5.animated.div, {
+  }, props.select)))), !hasTabs && /* @__PURE__ */ import_react119.default.createElement(import_web6.animated.div, {
     className: tw(`h-[1px]`),
     style: { backgroundColor }
-  })), /* @__PURE__ */ import_react118.default.createElement(import_web5.animated.div, {
+  })), /* @__PURE__ */ import_react119.default.createElement(import_web6.animated.div, {
     id: regionId,
     "aria-hidden": _collapsible ? isCollapsed ? true : void 0 : void 0,
     style: spring,
     className: tw({ "overflow-hidden": _collapsible })
-  }, /* @__PURE__ */ import_react118.default.createElement("div", {
+  }, /* @__PURE__ */ import_react119.default.createElement("div", {
     ref
-  }, hasTabs ? /* @__PURE__ */ import_react118.default.createElement(SectionTabs, __spreadProps(__spreadValues({}, children.props), {
+  }, hasTabs ? /* @__PURE__ */ import_react119.default.createElement(SectionTabs, __spreadProps(__spreadValues({}, children.props), {
     className: tw("[&>div:first-child]:px-3 grow flex flex-col overflow-y-auto", { "mt-4": _collapsible })
-  })) : /* @__PURE__ */ import_react118.default.createElement(Section3.Body, null, children))));
+  })) : /* @__PURE__ */ import_react119.default.createElement(Section3.Body, null, children))));
 };
-var SectionTabs = createTabsComponent(ModalTab, TabItem, "SectionTabs", (children, selected) => /* @__PURE__ */ import_react118.default.createElement(Section3.Body, null, children.find(
+var SectionTabs = createTabsComponent(ModalTab, TabItem, "SectionTabs", (children, selected) => /* @__PURE__ */ import_react119.default.createElement(Section3.Body, null, children.find(
   (node, index) => (node == null ? void 0 : node.props.value) === selected || index === selected
 )));
 
 // src/molecules/SegmentedControl/SegmentedControl.tsx
-var import_react119 = __toESM(require("react"));
+var import_react120 = __toESM(require("react"));
 var SegmentedControl = (_a) => {
   var _b = _a, {
     children,
@@ -15088,7 +15227,7 @@ var SegmentedControl = (_a) => {
     "selected",
     "className"
   ]);
-  return /* @__PURE__ */ import_react119.default.createElement("li", null, /* @__PURE__ */ import_react119.default.createElement("button", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ import_react120.default.createElement("li", null, /* @__PURE__ */ import_react120.default.createElement("button", __spreadProps(__spreadValues({
     type: "button"
   }, rest), {
     className: classNames(
@@ -15122,12 +15261,12 @@ var SegmentedControlGroup = (_a) => {
     "border border-default text-muted": variant === "outlined",
     "bg-muted": variant === "raised"
   });
-  return /* @__PURE__ */ import_react119.default.createElement("ul", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react120.default.createElement("ul", __spreadProps(__spreadValues({}, rest), {
     "aria-label": ariaLabel,
     className: classNames("Aquarium-SegmentedControl", classes2, className)
-  }), import_react119.default.Children.map(
+  }), import_react120.default.Children.map(
     children,
-    (child) => import_react119.default.cloneElement(child, {
+    (child) => import_react120.default.cloneElement(child, {
       dense,
       variant,
       onClick: () => onChange(child.props.value),
@@ -15165,14 +15304,14 @@ var getCommonClassNames = (dense, selected) => tw(
 );
 
 // src/molecules/Stepper/Stepper.tsx
-var import_react121 = __toESM(require("react"));
+var import_react122 = __toESM(require("react"));
 
 // src/atoms/Stepper/Stepper.tsx
-var import_react120 = __toESM(require("react"));
+var import_react121 = __toESM(require("react"));
 var import_tick6 = __toESM(require_tick());
 var Stepper = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ import_react120.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react121.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(className)
   }));
 };
@@ -15186,7 +15325,7 @@ var ConnectorContainer = (_a) => {
     "completed",
     "dense"
   ]);
-  return /* @__PURE__ */ import_react120.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react121.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       tw("absolute w-full -left-1/2", {
         "top-[3px] px-[14px]": Boolean(dense),
@@ -15198,7 +15337,7 @@ var ConnectorContainer = (_a) => {
 };
 var Connector = (_a) => {
   var _b = _a, { children, className, completed, dense } = _b, rest = __objRest(_b, ["children", "className", "completed", "dense"]);
-  return /* @__PURE__ */ import_react120.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react121.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       tw("w-full", {
         "bg-intense": !completed,
@@ -15212,7 +15351,7 @@ var Connector = (_a) => {
 };
 var Step = (_a) => {
   var _b = _a, { className, state } = _b, rest = __objRest(_b, ["className", "state"]);
-  return /* @__PURE__ */ import_react120.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react121.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       tw("flex flex-col items-center relative text-center", {
         "text-intense": state !== "inactive",
@@ -15223,8 +15362,8 @@ var Step = (_a) => {
   }));
 };
 var getClassNames = (state) => tw("h-[32px] w-[32px] border-2", {
-  "border-grey-90 bg-body": state === "active",
-  "border-default bg-body": state === "inactive",
+  "border-intense": state === "active",
+  "border-default": state === "inactive",
   "text-white bg-success-default border-success-intense": state === "completed"
 });
 var getDenseClassNames = (state) => tw("h-[8px] w-[8px]", {
@@ -15234,13 +15373,13 @@ var getDenseClassNames = (state) => tw("h-[8px] w-[8px]", {
 });
 var Indicator = (_a) => {
   var _b = _a, { children, className, state, dense } = _b, rest = __objRest(_b, ["children", "className", "state", "dense"]);
-  return /* @__PURE__ */ import_react120.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react121.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       tw("rounded-full flex justify-center items-center mx-2 mb-3"),
       dense ? getDenseClassNames(state) : getClassNames(state),
       className
     )
-  }), state === "completed" ? /* @__PURE__ */ import_react120.default.createElement(InlineIcon, {
+  }), state === "completed" ? /* @__PURE__ */ import_react121.default.createElement(InlineIcon, {
     icon: import_tick6.default
   }) : dense ? null : children);
 };
@@ -15251,26 +15390,26 @@ Stepper.ConnectorContainer = ConnectorContainer;
 
 // src/molecules/Stepper/Stepper.tsx
 var Stepper2 = ({ children, activeIndex, dense }) => {
-  const steps = import_react121.default.Children.count(children);
-  return /* @__PURE__ */ import_react121.default.createElement(Stepper, {
+  const steps = import_react122.default.Children.count(children);
+  return /* @__PURE__ */ import_react122.default.createElement(Stepper, {
     role: "list",
     className: "Aquarium-Stepper"
-  }, /* @__PURE__ */ import_react121.default.createElement(Template, {
+  }, /* @__PURE__ */ import_react122.default.createElement(Template, {
     columns: steps
-  }, import_react121.default.Children.map(children, (child, index) => {
+  }, import_react122.default.Children.map(children, (child, index) => {
     if (!isComponentType(child, Step2)) {
       throw new Error("<Stepper> can only have <Stepper.Step> components as children");
     } else {
       const state = index > activeIndex ? "inactive" : index === activeIndex ? "active" : "completed";
-      return /* @__PURE__ */ import_react121.default.createElement(Stepper.Step, {
+      return /* @__PURE__ */ import_react122.default.createElement(Stepper.Step, {
         state,
         "aria-current": state === "active" ? "step" : false,
         role: "listitem"
-      }, index > 0 && index <= steps && /* @__PURE__ */ import_react121.default.createElement(Stepper.ConnectorContainer, {
+      }, index > 0 && index <= steps && /* @__PURE__ */ import_react122.default.createElement(Stepper.ConnectorContainer, {
         dense
-      }, /* @__PURE__ */ import_react121.default.createElement(Stepper.ConnectorContainer.Connector, {
+      }, /* @__PURE__ */ import_react122.default.createElement(Stepper.ConnectorContainer.Connector, {
         completed: state === "completed" || state === "active"
-      })), /* @__PURE__ */ import_react121.default.createElement(Stepper.Step.Indicator, {
+      })), /* @__PURE__ */ import_react122.default.createElement(Stepper.Step.Indicator, {
         state,
         dense
       }, index + 1), child.props.children);
@@ -15283,7 +15422,7 @@ Step2.displayName = "Stepper.Step";
 Stepper2.Step = Step2;
 
 // src/molecules/SwitchGroup/SwitchGroup.tsx
-var import_react122 = __toESM(require("react"));
+var import_react123 = __toESM(require("react"));
 var import_utils34 = require("@react-aria/utils");
 var SwitchGroup = (_a) => {
   var _b = _a, {
@@ -15302,7 +15441,7 @@ var SwitchGroup = (_a) => {
     "children"
   ]);
   var _a2;
-  const [selectedItems, setSelectedItems] = (0, import_react122.useState)((_a2 = value != null ? value : defaultValue) != null ? _a2 : []);
+  const [selectedItems, setSelectedItems] = (0, import_react123.useState)((_a2 = value != null ? value : defaultValue) != null ? _a2 : []);
   if (value !== void 0 && value !== selectedItems) {
     setSelectedItems(value);
   }
@@ -15315,13 +15454,13 @@ var SwitchGroup = (_a) => {
     setSelectedItems(updated);
     onChange == null ? void 0 : onChange(updated);
   };
-  return /* @__PURE__ */ import_react122.default.createElement(LabelControl, __spreadProps(__spreadValues(__spreadValues({
+  return /* @__PURE__ */ import_react123.default.createElement(LabelControl, __spreadProps(__spreadValues(__spreadValues({
     fieldset: true
   }, labelControlProps), errorProps), {
     className: "Aquarium-SwitchGroup"
-  }), /* @__PURE__ */ import_react122.default.createElement(InputGroup, {
+  }), /* @__PURE__ */ import_react123.default.createElement(InputGroup, {
     cols
-  }, import_react122.default.Children.map(children, (c) => {
+  }, import_react123.default.Children.map(children, (c) => {
     var _a3, _b2, _c, _d;
     if (!isComponentType(c, Switch2)) {
       return null;
@@ -15329,7 +15468,7 @@ var SwitchGroup = (_a) => {
     const str = (_a3 = c.props.value) == null ? void 0 : _a3.toString();
     const defaultChecked = defaultValue === void 0 ? void 0 : str !== void 0 && defaultValue.includes(str);
     const checked = value === void 0 ? void 0 : str !== void 0 && value.includes(str);
-    return import_react122.default.cloneElement(c, {
+    return import_react123.default.cloneElement(c, {
       defaultChecked: (_b2 = c.props.defaultChecked) != null ? _b2 : defaultChecked,
       checked: (_c = c.props.checked) != null ? _c : checked,
       onChange: (_d = c.props.onChange) != null ? _d : handleChange,
@@ -15339,9 +15478,9 @@ var SwitchGroup = (_a) => {
   })));
 };
 var SwitchGroupSkeleton = ({ options = 2 }) => {
-  return /* @__PURE__ */ import_react122.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react122.default.createElement("div", {
+  return /* @__PURE__ */ import_react123.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react123.default.createElement("div", {
     className: tw("flex flex-wrap flex-col gap-2")
-  }, Array.from({ length: options }).map((_, key) => /* @__PURE__ */ import_react122.default.createElement(Switch2.Skeleton, {
+  }, Array.from({ length: options }).map((_, key) => /* @__PURE__ */ import_react123.default.createElement(Switch2.Skeleton, {
     key
   }))));
 };
@@ -15349,14 +15488,14 @@ SwitchGroup.Skeleton = SwitchGroupSkeleton;
 SwitchGroup.Skeleton.displayName = "SwitchGroup.Skeleton";
 
 // src/molecules/Textarea/Textarea.tsx
-var import_react123 = __toESM(require("react"));
+var import_react124 = __toESM(require("react"));
 var import_utils36 = require("@react-aria/utils");
 var import_omit16 = __toESM(require("lodash/omit"));
 var import_toString2 = __toESM(require("lodash/toString"));
-var TextareaBase = import_react123.default.forwardRef(
+var TextareaBase = import_react124.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { readOnly = false, valid = true } = _b, props = __objRest(_b, ["readOnly", "valid"]);
-    return /* @__PURE__ */ import_react123.default.createElement("textarea", __spreadProps(__spreadValues({
+    return /* @__PURE__ */ import_react124.default.createElement("textarea", __spreadProps(__spreadValues({
       ref
     }, props), {
       readOnly,
@@ -15364,26 +15503,26 @@ var TextareaBase = import_react123.default.forwardRef(
     }));
   }
 );
-TextareaBase.Skeleton = () => /* @__PURE__ */ import_react123.default.createElement(Skeleton, {
+TextareaBase.Skeleton = () => /* @__PURE__ */ import_react124.default.createElement(Skeleton, {
   height: 58
 });
-var Textarea = import_react123.default.forwardRef((props, ref) => {
+var Textarea = import_react124.default.forwardRef((props, ref) => {
   var _a, _b, _c;
-  const [value, setValue] = (0, import_react123.useState)((_b = (_a = props.value) != null ? _a : props.defaultValue) != null ? _b : "");
+  const [value, setValue] = (0, import_react124.useState)((_b = (_a = props.value) != null ? _a : props.defaultValue) != null ? _b : "");
   const defaultId = (0, import_utils36.useId)();
   const id = (_c = props.id) != null ? _c : defaultId;
   const errorMessageId = (0, import_utils36.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_omit16.default)(props, Object.keys(labelControlProps));
-  return /* @__PURE__ */ import_react123.default.createElement(LabelControl, __spreadProps(__spreadValues({
+  return /* @__PURE__ */ import_react124.default.createElement(LabelControl, __spreadProps(__spreadValues({
     id: `${id}-label`,
     htmlFor: id,
     messageId: errorMessageId,
     length: value !== void 0 ? (0, import_toString2.default)(value).length : void 0
   }, labelControlProps), {
     className: "Aquarium-Textarea"
-  }), /* @__PURE__ */ import_react123.default.createElement(TextareaBase, __spreadProps(__spreadValues(__spreadValues({
+  }), /* @__PURE__ */ import_react124.default.createElement(TextareaBase, __spreadProps(__spreadValues(__spreadValues({
     ref
   }, baseProps), errorProps), {
     id,
@@ -15400,48 +15539,48 @@ var Textarea = import_react123.default.forwardRef((props, ref) => {
   })));
 });
 Textarea.displayName = "Textarea";
-var TextAreaSkeleton = () => /* @__PURE__ */ import_react123.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react123.default.createElement(TextareaBase.Skeleton, null));
+var TextAreaSkeleton = () => /* @__PURE__ */ import_react124.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react124.default.createElement(TextareaBase.Skeleton, null));
 Textarea.Skeleton = TextAreaSkeleton;
 Textarea.Skeleton.displayName = "Textarea.Skeleton";
 
 // src/molecules/Timeline/Timeline.tsx
-var import_react125 = __toESM(require("react"));
+var import_react126 = __toESM(require("react"));
 
 // src/atoms/Timeline/Timeline.tsx
-var import_react124 = __toESM(require("react"));
+var import_react125 = __toESM(require("react"));
 var Timeline = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ import_react124.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react125.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("grid grid-cols-[16px_1fr] gap-x-4"), className)
   }));
 };
 var Content2 = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ import_react124.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react125.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("pb-6"), className)
   }));
 };
 var Separator2 = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ import_react124.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react125.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("flex items-center justify-center h-5 w-5"), className)
   }));
 };
 var LineContainer = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ import_react124.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react125.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("flex justify-center py-1"), className)
   }));
 };
 var Line = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ import_react124.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react125.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("w-1 bg-default h-full justify-self-center"), className)
   }));
 };
 var Dot = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ import_react124.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react125.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("bg-intense h-[6px] w-[6px] rounded"), className)
   }));
 };
@@ -15456,54 +15595,54 @@ var import_error5 = __toESM(require_error());
 var import_time2 = __toESM(require_time());
 var import_warningSign5 = __toESM(require_warningSign());
 var TimelineItem = () => null;
-var Timeline2 = ({ children }) => /* @__PURE__ */ import_react125.default.createElement("div", {
+var Timeline2 = ({ children }) => /* @__PURE__ */ import_react126.default.createElement("div", {
   className: "Aquarium-Timeline"
-}, import_react125.default.Children.map(children, (item) => {
+}, import_react126.default.Children.map(children, (item) => {
   if (!isComponentType(item, TimelineItem)) {
     throw new Error("<Timeline> can only have <Timeline.Item> components as children");
   } else {
     const { props, key } = item;
-    return /* @__PURE__ */ import_react125.default.createElement(Timeline, {
+    return /* @__PURE__ */ import_react126.default.createElement(Timeline, {
       key: key != null ? key : props.title
-    }, /* @__PURE__ */ import_react125.default.createElement(Timeline.Separator, null, props.variant === "error" ? /* @__PURE__ */ import_react125.default.createElement(Icon, {
+    }, /* @__PURE__ */ import_react126.default.createElement(Timeline.Separator, null, props.variant === "error" ? /* @__PURE__ */ import_react126.default.createElement(Icon, {
       icon: import_error5.default,
       color: "danger-default"
-    }) : props.variant === "warning" ? /* @__PURE__ */ import_react125.default.createElement(Icon, {
+    }) : props.variant === "warning" ? /* @__PURE__ */ import_react126.default.createElement(Icon, {
       icon: import_warningSign5.default,
       color: "warning-default"
-    }) : props.variant === "info" ? /* @__PURE__ */ import_react125.default.createElement(Icon, {
+    }) : props.variant === "info" ? /* @__PURE__ */ import_react126.default.createElement(Icon, {
       icon: import_time2.default,
       color: "info-default"
-    }) : /* @__PURE__ */ import_react125.default.createElement(Timeline.Separator.Dot, null)), /* @__PURE__ */ import_react125.default.createElement(Typography2.Caption, {
-      color: "grey-50"
-    }, props.title), /* @__PURE__ */ import_react125.default.createElement(Timeline.LineContainer, null, /* @__PURE__ */ import_react125.default.createElement(Timeline.LineContainer.Line, null)), /* @__PURE__ */ import_react125.default.createElement(Timeline.Content, null, /* @__PURE__ */ import_react125.default.createElement(Typography2.Small, null, props.children)));
+    }) : /* @__PURE__ */ import_react126.default.createElement(Timeline.Separator.Dot, null)), /* @__PURE__ */ import_react126.default.createElement(Typography2.Caption, {
+      color: "muted"
+    }, props.title), /* @__PURE__ */ import_react126.default.createElement(Timeline.LineContainer, null, /* @__PURE__ */ import_react126.default.createElement(Timeline.LineContainer.Line, null)), /* @__PURE__ */ import_react126.default.createElement(Timeline.Content, null, /* @__PURE__ */ import_react126.default.createElement(Typography2.Small, null, props.children)));
   }
 }));
-var TimelineItemSkeleton = () => /* @__PURE__ */ import_react125.default.createElement(Timeline, null, /* @__PURE__ */ import_react125.default.createElement(Timeline.Separator, null, /* @__PURE__ */ import_react125.default.createElement(Skeleton, {
+var TimelineItemSkeleton = () => /* @__PURE__ */ import_react126.default.createElement(Timeline, null, /* @__PURE__ */ import_react126.default.createElement(Timeline.Separator, null, /* @__PURE__ */ import_react126.default.createElement(Skeleton, {
   width: 6,
   height: 6,
   rounded: true
-})), /* @__PURE__ */ import_react125.default.createElement(Skeleton, {
+})), /* @__PURE__ */ import_react126.default.createElement(Skeleton, {
   height: 12,
   width: 120
-}), /* @__PURE__ */ import_react125.default.createElement(Timeline.LineContainer, null, /* @__PURE__ */ import_react125.default.createElement(Skeleton, {
+}), /* @__PURE__ */ import_react126.default.createElement(Timeline.LineContainer, null, /* @__PURE__ */ import_react126.default.createElement(Skeleton, {
   width: 2,
   height: "100%"
-})), /* @__PURE__ */ import_react125.default.createElement(Timeline.Content, null, /* @__PURE__ */ import_react125.default.createElement(Box, {
+})), /* @__PURE__ */ import_react126.default.createElement(Timeline.Content, null, /* @__PURE__ */ import_react126.default.createElement(Box, {
   display: "flex",
   flexDirection: "column",
   gap: "3"
-}, /* @__PURE__ */ import_react125.default.createElement(Skeleton, {
+}, /* @__PURE__ */ import_react126.default.createElement(Skeleton, {
   height: 32,
   width: "100%"
-}), /* @__PURE__ */ import_react125.default.createElement(Skeleton, {
+}), /* @__PURE__ */ import_react126.default.createElement(Skeleton, {
   height: 32,
   width: "73%"
-}), /* @__PURE__ */ import_react125.default.createElement(Skeleton, {
+}), /* @__PURE__ */ import_react126.default.createElement(Skeleton, {
   height: 32,
   width: "80%"
 }))));
-var TimelineSkeleton = ({ items = 3 }) => /* @__PURE__ */ import_react125.default.createElement("div", null, Array.from({ length: items }).map((_, key) => /* @__PURE__ */ import_react125.default.createElement(TimelineItemSkeleton, {
+var TimelineSkeleton = ({ items = 3 }) => /* @__PURE__ */ import_react126.default.createElement("div", null, Array.from({ length: items }).map((_, key) => /* @__PURE__ */ import_react126.default.createElement(TimelineItemSkeleton, {
   key
 })));
 Timeline2.Item = TimelineItem;
@@ -15511,9 +15650,9 @@ Timeline2.Skeleton = TimelineSkeleton;
 Timeline2.Skeleton.displayName = "Timeline.Skeleton";
 
 // src/utils/table/useTableSelect.ts
-var import_react126 = __toESM(require("react"));
+var import_react127 = __toESM(require("react"));
 var useTableSelect = (data, { key }) => {
-  const [selected, setSelected] = import_react126.default.useState([]);
+  const [selected, setSelected] = import_react127.default.useState([]);
   const allSelected = selected.length === data.length;
   const isSelected = (dot) => selected.includes(dot[key]);
   const selectAll = () => setSelected(data.map((dot) => dot[key]));