@aivenio/aquarium 6.0.1 → 6.1.0

package/dist/atoms.mjs

@@ -415,11 +415,11 @@ var warningSign_default = data15;
 // src/utils/constants.ts
 import { tv } from "tailwind-variants";
 var inputStyles = tv({
-  base: "block w-full rounded-sm typography-default text-default disabled:cursor-not-allowed disabled:border-default disabled:bg-medium disabled:text-inactive placeholder:text-inactive focus:outline-none",
+  base: "block w-full rounded typography-default text-default disabled:cursor-not-allowed disabled:border-default disabled:bg-medium disabled:text-inactive placeholder:text-inactive focus:outline-none",
   variants: {
     readOnly: {
       true: "border-none resize-none cursor-default bg-transparent",
-      false: "px-3 py-3 bg-transparent"
+      false: "px-3 py-3 bg-layer"
     },
     valid: {
       true: "",
@@ -436,7 +436,7 @@ var inputStyles = tv({
   }
 });
 var focusRingStyle = tv({
-  base: "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-action-focus focus-visible:ring-offset-body rounded-sm"
+  base: "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-action-focus focus-visible:ring-offset-body rounded"
 });
 var interactiveTextStyles = tv({
   base: "text-primary-default active:text-primary-active focus-visible:text-primary-active hover:text-primary-graphic disabled:text-inactive visited:text-primary-intense"
@@ -3093,7 +3093,7 @@ var choiceChipClasses = tv10({
   },
   variants: {
     selected: {
-      true: { chip: "text-default border-primary-default border-2" },
+      true: { chip: "text-default border-primary-default border-2 bg-primary-default" },
       false: { chip: "text-muted border-default m-[1px]" }
     },
     dense: {
@@ -3116,6 +3116,7 @@ var ChoiceChip = ({
   name,
   value,
   disabled,
+  "aria-label": ariaLabel,
   ...rest
 }) => {
   const [selected, setSelected] = useControlledState(checked, defaultChecked, onChange);
@@ -3123,7 +3124,7 @@ var ChoiceChip = ({
   const handleChange = () => {
     setSelected(!selected);
   };
-  return /* @__PURE__ */ React25.createElement("label", { className: label(), ...rest }, /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React25.createElement("label", { className: label(), "aria-label": ariaLabel, ...rest }, /* @__PURE__ */ React25.createElement(
     "input",
     {
       type: selectionMode,
@@ -3137,20 +3138,41 @@ var ChoiceChip = ({
   ), /* @__PURE__ */ React25.createElement("span", { className: chip() }, children));
 };
 
+// src/atoms/CommandPalette/CommandPalette.tsx
+import React26 from "react";
+import { tv as tv11 } from "tailwind-variants";
+var commandPaletteStyles = tv11({
+  slots: {
+    modal: "w-full max-w-[640px] mx-4",
+    dialog: "outline-none rounded max-h-[min(480px,60vh)] overflow-hidden",
+    searchContainer: "flex items-center gap-x-3 p-5 border-b border-muted",
+    searchInput: "outline-none grow bg-transparent [&::-webkit-search-cancel-button]:hidden",
+    itemIcon: "text-muted group-data-[focused]:text-default",
+    emptyState: "p-6 text-center text-muted typography-default"
+  }
+});
+var EmptyState = ({ className, children, ...rest }) => {
+  const { emptyState } = commandPaletteStyles();
+  return /* @__PURE__ */ React26.createElement("div", { ...rest, className: emptyState({ className }) }, children || "No commands found.");
+};
+var CommandPalette = {
+  EmptyState
+};
+
 // src/atoms/DataList/DataList.tsx
-import React28 from "react";
+import React29 from "react";
 import { clsx as clsx10 } from "clsx";
-import { tv as tv13 } from "tailwind-variants";
+import { tv as tv14 } from "tailwind-variants";
 
 // src/atoms/Table/Table.tsx
-import React27 from "react";
+import React28 from "react";
 import { clsx as clsx9 } from "clsx";
-import { tv as tv12 } from "tailwind-variants";
+import { tv as tv13 } from "tailwind-variants";
 
 // src/atoms/RadioButton/RadioButton.tsx
-import React26 from "react";
-import { tv as tv11 } from "tailwind-variants";
-var radioButtonClasses = tv11({
+import React27 from "react";
+import { tv as tv12 } from "tailwind-variants";
+var radioButtonClasses = tv12({
   base: "inline-flex justify-center items-center self-center appearance-none w-5 h-5 p-[3px] rounded-full border border-default outline-none focus:border-action-focus checked:bg-primary-inverse checked:shadow-bodyInset",
   variants: {
     disabled: {
@@ -3159,8 +3181,8 @@ var radioButtonClasses = tv11({
     }
   }
 });
-var RadioButton = React26.forwardRef(
-  ({ id, children, name, disabled = false, readOnly = false, ...props }, ref) => /* @__PURE__ */ React26.createElement(
+var RadioButton = React27.forwardRef(
+  ({ id, children, name, disabled = false, readOnly = false, ...props }, ref) => /* @__PURE__ */ React27.createElement(
     "input",
     {
       id,
@@ -3176,19 +3198,19 @@ var RadioButton = React26.forwardRef(
 );
 
 // src/atoms/Table/Table.tsx
-var HeadContext = React27.createContext(null);
-var tableClasses = tv12({
+var HeadContext = React28.createContext(null);
+var tableClasses = tv13({
   base: "w-full relative typography-default border-spacing-0 border-separate"
 });
-var rowClassNamesBase = tv12({
+var rowClassNamesBase = tv13({
   base: "children:border-default group children:last:border-b-0 hover:bg-muted"
 });
 var rowClassNames = rowClassNamesBase();
-var cellClassNamesBase = tv12({
+var cellClassNamesBase = tv13({
   base: "px-4 border-b leading-[18px]"
 });
 var cellClassNames = cellClassNamesBase();
-var rowClasses = tv12({
+var rowClasses = tv13({
   extend: rowClassNamesBase,
   variants: {
     disabled: {
@@ -3197,7 +3219,7 @@ var rowClasses = tv12({
     }
   }
 });
-var bodyCellClasses = tv12({
+var bodyCellClasses = tv13({
   base: "py-5 typography-default",
   variants: {
     table: {
@@ -3211,7 +3233,7 @@ var bodyCellClasses = tv12({
     }
   }
 });
-var alignClasses = tv12({
+var alignClasses = tv13({
   variants: {
     align: {
       left: "",
@@ -3225,7 +3247,7 @@ var alignClasses = tv12({
     align: "undefined"
   }
 });
-var headCellClasses = tv12({
+var headCellClasses = tv13({
   base: "py-4 text-left border-muted text-muted whitespace-nowrap min-h-[40px] typography-small-strong",
   variants: {
     sticky: {
@@ -3251,7 +3273,7 @@ var headCellClasses = tv12({
     }
   ]
 });
-var sortCellButtonClasses = tv12({
+var sortCellButtonClasses = tv13({
   base: "group flex items-center gap-x-4 text-muted",
   variants: {
     align: {
@@ -3266,7 +3288,7 @@ var sortCellButtonClasses = tv12({
     align: "undefined"
   }
 });
-var sortCellIconClasses = tv12({
+var sortCellIconClasses = tv13({
   base: "text-[9px]",
   variants: {
     active: {
@@ -3275,7 +3297,7 @@ var sortCellIconClasses = tv12({
     }
   }
 });
-var sortCellIconsContainerClasses = tv12({
+var sortCellIconsContainerClasses = tv13({
   base: "flex flex-col",
   variants: {
     direction: {
@@ -3287,11 +3309,11 @@ var sortCellIconsContainerClasses = tv12({
   }
 });
 var Table = ({ children, ariaLabel, className, ...rest }) => {
-  return /* @__PURE__ */ React27.createElement("table", { ...rest, className: tableClasses({ className }), "aria-label": ariaLabel }, children);
+  return /* @__PURE__ */ React28.createElement("table", { ...rest, className: tableClasses({ className }), "aria-label": ariaLabel }, children);
 };
-var TableHead = ({ children, sticky, ...rest }) => /* @__PURE__ */ React27.createElement("thead", { ...rest }, /* @__PURE__ */ React27.createElement("tr", null, /* @__PURE__ */ React27.createElement(HeadContext.Provider, { value: { children, sticky } }, children)));
-var TableBody = ({ children, ...rest }) => /* @__PURE__ */ React27.createElement("tbody", { ...rest }, children);
-var TableRow = ({ children, className, disabled = false, ...rest }) => /* @__PURE__ */ React27.createElement(
+var TableHead = ({ children, sticky, ...rest }) => /* @__PURE__ */ React28.createElement("thead", { ...rest }, /* @__PURE__ */ React28.createElement("tr", null, /* @__PURE__ */ React28.createElement(HeadContext.Provider, { value: { children, sticky } }, children)));
+var TableBody = ({ children, ...rest }) => /* @__PURE__ */ React28.createElement("tbody", { ...rest }, children);
+var TableRow = ({ children, className, disabled = false, ...rest }) => /* @__PURE__ */ React28.createElement(
   "tr",
   {
     ...rest,
@@ -3303,10 +3325,10 @@ var TableRow = ({ children, className, disabled = false, ...rest }) => /* @__PUR
 var getBodyCellClassNames = (table = true, stickyColumn) => bodyCellClasses({ table, stickyColumn });
 var getAlignClassNames = (align) => alignClasses({ align });
 var getHeadCellClassNames = (sticky = true, stickyColumn) => headCellClasses({ sticky, stickyColumn });
-var TableCell = React27.forwardRef(
+var TableCell = React28.forwardRef(
   ({ children, className, stickyColumn, align = "left", ...rest }, ref) => {
-    const headContext = React27.useContext(HeadContext);
-    return headContext ? /* @__PURE__ */ React27.createElement(
+    const headContext = React28.useContext(HeadContext);
+    return headContext ? /* @__PURE__ */ React28.createElement(
       "th",
       {
         ...rest,
@@ -3319,7 +3341,7 @@ var TableCell = React27.forwardRef(
         )
       },
       children
-    ) : /* @__PURE__ */ React27.createElement(
+    ) : /* @__PURE__ */ React28.createElement(
       "td",
       {
         ...rest,
@@ -3336,25 +3358,25 @@ var TableCell = React27.forwardRef(
   }
 );
 var TableSelectCell = ({ ariaLabel, ...props }) => {
-  return /* @__PURE__ */ React27.createElement(Table.Cell, { className: "leading-[0px]" }, props.type === "radio" ? /* @__PURE__ */ React27.createElement(RadioButton, { "aria-label": ariaLabel, ...props }) : /* @__PURE__ */ React27.createElement(Checkbox, { "aria-label": ariaLabel, ...props }));
+  return /* @__PURE__ */ React28.createElement(Table.Cell, { className: "leading-[0px]" }, props.type === "radio" ? /* @__PURE__ */ React28.createElement(RadioButton, { "aria-label": ariaLabel, ...props }) : /* @__PURE__ */ React28.createElement(Checkbox, { "aria-label": ariaLabel, ...props }));
 };
 var getSortCellButtonClassNames = (align) => sortCellButtonClasses({ align });
 var getSortCellIconClassNames = (active) => sortCellIconClasses({ active });
-var TableSortCell = React27.forwardRef(
-  ({ children, direction = "none", onClick, ...rest }, ref) => /* @__PURE__ */ React27.createElement(Table.Cell, { ...rest, "aria-sort": direction, ref }, /* @__PURE__ */ React27.createElement("span", { className: getSortCellButtonClassNames(rest.align), role: "button", tabIndex: -1, onClick }, children, /* @__PURE__ */ React27.createElement("div", { "data-sort-icons": true, className: sortCellIconsContainerClasses({ direction }) }, /* @__PURE__ */ React27.createElement(InlineIcon2, { icon: chevronUp_default, className: getSortCellIconClassNames(direction === "ascending") }), /* @__PURE__ */ React27.createElement(InlineIcon2, { icon: chevronDown_default, className: getSortCellIconClassNames(direction === "descending") }))))
+var TableSortCell = React28.forwardRef(
+  ({ children, direction = "none", onClick, ...rest }, ref) => /* @__PURE__ */ React28.createElement(Table.Cell, { ...rest, "aria-sort": direction, ref }, /* @__PURE__ */ React28.createElement("span", { className: getSortCellButtonClassNames(rest.align), role: "button", tabIndex: -1, onClick }, children, /* @__PURE__ */ React28.createElement("div", { "data-sort-icons": true, className: sortCellIconsContainerClasses({ direction }) }, /* @__PURE__ */ React28.createElement(InlineIcon2, { icon: chevronUp_default, className: getSortCellIconClassNames(direction === "ascending") }), /* @__PURE__ */ React28.createElement(InlineIcon2, { icon: chevronDown_default, className: getSortCellIconClassNames(direction === "descending") }))))
 );
-var Caption = ({ children }) => /* @__PURE__ */ React27.createElement(Typography2.Small, { htmlTag: "caption" }, children);
-var Item = ({ image, imageAlt, imageSize = 35, title, caption }) => /* @__PURE__ */ React27.createElement("div", { className: "flex gap-4 items-center" }, image && /* @__PURE__ */ React27.createElement("img", { src: image, alt: imageAlt ?? "", style: { width: imageSize, height: imageSize } }), /* @__PURE__ */ React27.createElement("div", null, title, caption && /* @__PURE__ */ React27.createElement(Typography2.Small, null, caption)));
-Table.Head = React27.memo(TableHead);
-Table.Body = React27.memo(TableBody);
-Table.Row = React27.memo(TableRow);
-Table.Cell = React27.memo(TableCell);
-Table.SortCell = React27.memo(TableSortCell);
-Table.SelectCell = React27.memo(TableSelectCell);
+var Caption = ({ children }) => /* @__PURE__ */ React28.createElement(Typography2.Small, { htmlTag: "caption" }, children);
+var Item = ({ image, imageAlt, imageSize = 35, title, caption }) => /* @__PURE__ */ React28.createElement("div", { className: "flex gap-4 items-center" }, image && /* @__PURE__ */ React28.createElement("img", { src: image, alt: imageAlt ?? "", style: { width: imageSize, height: imageSize } }), /* @__PURE__ */ React28.createElement("div", null, title, caption && /* @__PURE__ */ React28.createElement(Typography2.Small, null, caption)));
+Table.Head = React28.memo(TableHead);
+Table.Body = React28.memo(TableBody);
+Table.Row = React28.memo(TableRow);
+Table.Cell = React28.memo(TableCell);
+Table.SortCell = React28.memo(TableSortCell);
+Table.SelectCell = React28.memo(TableSelectCell);
 Table.Caption = Caption;
 
 // src/atoms/DataList/DataList.tsx
-var alignClasses2 = tv13({
+var alignClasses2 = tv14({
   base: "flex items-center",
   variants: {
     align: {
@@ -3369,10 +3391,10 @@ var alignClasses2 = tv13({
     align: "undefined"
   }
 });
-var treeLineClasses = tv13({
+var treeLineClasses = tv14({
   base: "flex justify-start h-full mx-4"
 });
-var treeLineInnerClasses = tv13({
+var treeLineInnerClasses = tv14({
   base: "border-l border-default border-dashed flex-1",
   variants: {
     isLast: {
@@ -3381,7 +3403,7 @@ var treeLineInnerClasses = tv13({
     }
   }
 });
-var rowClasses2 = tv13({
+var rowClasses2 = tv14({
   base: "contents",
   variants: {
     noDivider: {
@@ -3409,7 +3431,7 @@ var rowClasses2 = tv13({
     }
   ]
 });
-var subGroupSpacingClasses = tv13({
+var subGroupSpacingClasses = tv14({
   base: "col-span-full h-6 bg-muted border-default",
   variants: {
     divider: {
@@ -3418,7 +3440,7 @@ var subGroupSpacingClasses = tv13({
     }
   }
 });
-var sortCellIconsClasses = tv13({
+var sortCellIconsClasses = tv14({
   base: "flex flex-col",
   variants: {
     direction: {
@@ -3429,7 +3451,7 @@ var sortCellIconsClasses = tv13({
     }
   }
 });
-var toolbarContainerClasses = tv13({
+var toolbarContainerClasses = tv14({
   base: "col-span-full flex items-stretch py-4 px-l2 border-b border-muted",
   variants: {
     sticky: {
@@ -3438,27 +3460,27 @@ var toolbarContainerClasses = tv13({
     }
   }
 });
-var toolbarGroupClasses = tv13({
+var toolbarGroupClasses = tv14({
   base: "flex items-center px-l2 border-r-1 border-muted last:border-r-0"
 });
-var toolbarActionsClasses = tv13({
+var toolbarActionsClasses = tv14({
   base: "flex items-center gap-x-5"
 });
-var toolbarSelectionCountClasses = tv13({
+var toolbarSelectionCountClasses = tv14({
   base: "whitespace-nowrap"
 });
-var emptyGroupClasses = tv13({
+var emptyGroupClasses = tv14({
   base: "flex gap-3 items-center"
 });
-var DataList = ({ className, ...rest }) => /* @__PURE__ */ React28.createElement("div", { ...rest });
-var TreeLine = ({ className, style, isLast = false, ...rest }) => /* @__PURE__ */ React28.createElement("div", { ...rest, className: clsx10(treeLineClasses(), className) }, /* @__PURE__ */ React28.createElement("div", { className: treeLineInnerClasses({ isLast }) }), /* @__PURE__ */ React28.createElement("div", { className: "border-t border-default border-dashed self-center w-[18px]" }));
+var DataList = ({ className, ...rest }) => /* @__PURE__ */ React29.createElement("div", { ...rest });
+var TreeLine = ({ className, style, isLast = false, ...rest }) => /* @__PURE__ */ React29.createElement("div", { ...rest, className: clsx10(treeLineClasses(), className) }, /* @__PURE__ */ React29.createElement("div", { className: treeLineInnerClasses({ isLast }) }), /* @__PURE__ */ React29.createElement("div", { className: "border-t border-default border-dashed self-center w-[18px]" }));
 var HeadCell = ({
   className,
   sticky,
   align,
   stickyColumn,
   ...rest
-}) => /* @__PURE__ */ React28.createElement(
+}) => /* @__PURE__ */ React29.createElement(
   "div",
   {
     role: "columnheader",
@@ -3471,7 +3493,7 @@ var Cell = ({
   align,
   stickyColumn,
   ...rest
-}) => /* @__PURE__ */ React28.createElement(
+}) => /* @__PURE__ */ React29.createElement(
   "div",
   {
     ...rest,
@@ -3494,7 +3516,7 @@ var Row = ({
   noDivider = false,
   ...rest
 }) => {
-  return /* @__PURE__ */ React28.createElement(
+  return /* @__PURE__ */ React29.createElement(
     "div",
     {
       ...rest,
@@ -3512,9 +3534,9 @@ var Row = ({
     }
   );
 };
-var SubGroupSpacing = ({ className, divider = false, ...rest }) => /* @__PURE__ */ React28.createElement("span", { ...rest, "aria-hidden": true, className: clsx10(subGroupSpacingClasses({ divider }), className) });
-var SortCell = ({ children, direction = "none", onClick, sticky, ...rest }) => /* @__PURE__ */ React28.createElement(HeadCell, { ...rest, "aria-sort": direction, role: "columnheader", sticky }, /* @__PURE__ */ React28.createElement("span", { className: getSortCellButtonClassNames(rest.align), role: "button", tabIndex: -1, onClick }, children, /* @__PURE__ */ React28.createElement("div", { "data-sort-icons": true, className: sortCellIconsClasses({ direction }) }, /* @__PURE__ */ React28.createElement(InlineIcon2, { icon: chevronUp_default, className: getSortCellIconClassNames(direction === "ascending") }), /* @__PURE__ */ React28.createElement(InlineIcon2, { icon: chevronDown_default, className: getSortCellIconClassNames(direction === "descending") }))));
-var EmptyGroup = ({ icon, children }) => /* @__PURE__ */ React28.createElement("div", { className: emptyGroupClasses() }, icon && /* @__PURE__ */ React28.createElement(Icon2, { icon, width: 18 }), children);
+var SubGroupSpacing = ({ className, divider = false, ...rest }) => /* @__PURE__ */ React29.createElement("span", { ...rest, "aria-hidden": true, className: clsx10(subGroupSpacingClasses({ divider }), className) });
+var SortCell = ({ children, direction = "none", onClick, sticky, ...rest }) => /* @__PURE__ */ React29.createElement(HeadCell, { ...rest, "aria-sort": direction, role: "columnheader", sticky }, /* @__PURE__ */ React29.createElement("span", { className: getSortCellButtonClassNames(rest.align), role: "button", tabIndex: -1, onClick }, children, /* @__PURE__ */ React29.createElement("div", { "data-sort-icons": true, className: sortCellIconsClasses({ direction }) }, /* @__PURE__ */ React29.createElement(InlineIcon2, { icon: chevronUp_default, className: getSortCellIconClassNames(direction === "ascending") }), /* @__PURE__ */ React29.createElement(InlineIcon2, { icon: chevronDown_default, className: getSortCellIconClassNames(direction === "descending") }))));
+var EmptyGroup = ({ icon, children }) => /* @__PURE__ */ React29.createElement("div", { className: emptyGroupClasses() }, icon && /* @__PURE__ */ React29.createElement(Icon2, { icon, width: 18 }), children);
 DataList.EmptyGroup = EmptyGroup;
 DataList.EmptyGroup.displayName = "DataList.EmptyGroup";
 DataList.HeadCell = HeadCell;
@@ -3529,12 +3551,12 @@ DataList.Row = Row;
 DataList.Row.displayName = "DataList.Row";
 DataList.TreeLine = TreeLine;
 DataList.TreeLine.displayName = "DataList.TreeLine";
-var ToolbarContainer = ({ className, sticky = true, ...rest }) => /* @__PURE__ */ React28.createElement("div", { ...rest, role: "row", className: clsx10(toolbarContainerClasses({ sticky }), className) });
+var ToolbarContainer = ({ className, sticky = true, ...rest }) => /* @__PURE__ */ React29.createElement("div", { ...rest, role: "row", className: clsx10(toolbarContainerClasses({ sticky }), className) });
 ToolbarContainer.displayName = "DataList.Toolbar.Container";
-var ToolbarGroup = ({ className, ...rest }) => /* @__PURE__ */ React28.createElement("div", { role: "cell", ...rest, className: clsx10(toolbarGroupClasses(), className) });
+var ToolbarGroup = ({ className, ...rest }) => /* @__PURE__ */ React29.createElement("div", { role: "cell", ...rest, className: clsx10(toolbarGroupClasses(), className) });
 ToolbarGroup.displayName = "DataList.Toolbar.Group";
-var ToolbarSelectionCount = ({ className, ...rest }) => /* @__PURE__ */ React28.createElement(Typography, { variant: "default", color: "muted", className: clsx10(toolbarSelectionCountClasses(), className), ...rest });
-var ToolbarActions = ({ className, ...rest }) => /* @__PURE__ */ React28.createElement("div", { ...rest, className: clsx10(toolbarActionsClasses(), className) });
+var ToolbarSelectionCount = ({ className, ...rest }) => /* @__PURE__ */ React29.createElement(Typography, { variant: "default", color: "muted", className: clsx10(toolbarSelectionCountClasses(), className), ...rest });
+var ToolbarActions = ({ className, ...rest }) => /* @__PURE__ */ React29.createElement("div", { ...rest, className: clsx10(toolbarActionsClasses(), className) });
 ToolbarActions.displayName = "DataList.Toolbar.Actions";
 DataList.Toolbar = {
   Container: ToolbarContainer,
@@ -3544,7 +3566,7 @@ DataList.Toolbar = {
 };
 
 // src/atoms/Dialog/Dialog.tsx
-import React29 from "react";
+import React30 from "react";
 import { Dialog as AriaDialog } from "react-aria-components";
 
 // node_modules/tailwind-merge/dist/bundle-mjs.mjs
@@ -6023,7 +6045,7 @@ var DIALOG_ICONS_AND_COLORS = {
   }
 };
 var Dialog = (props) => {
-  return /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React30.createElement(
     AriaDialog,
     {
       ...props,
@@ -6033,7 +6055,7 @@ var Dialog = (props) => {
 };
 
 // src/atoms/DropdownMenu/DropdownMenu.tsx
-import React32 from "react";
+import React33 from "react";
 import {
   Collection as AriaCollection,
   composeRenderProps,
@@ -6043,17 +6065,17 @@ import {
   MenuSection as AriaMenuSection
 } from "react-aria-components";
 import { clsx as clsx12 } from "clsx";
-import { tv as tv15 } from "tailwind-variants";
+import { tv as tv16 } from "tailwind-variants";
 
 // src/molecules/Badge/Badge.tsx
-import React31 from "react";
+import React32 from "react";
 import { clsx as clsx11 } from "clsx";
 
 // src/atoms/Skeleton/Skeleton.tsx
-import React30 from "react";
+import React31 from "react";
 import { isNumber as isNumber3, isUndefined as isUndefined5 } from "lodash-es";
-import { tv as tv14 } from "tailwind-variants";
-var skeletonStyles = tv14({
+import { tv as tv15 } from "tailwind-variants";
+var skeletonStyles = tv15({
   base: "bg-medium",
   variants: {
     hasHeight: {
@@ -6092,7 +6114,7 @@ var Skeleton = ({
     animate,
     className: ["Aquarium-Skeleton", className]
   });
-  return /* @__PURE__ */ React30.createElement("div", { "aria-label": "Loading...", ...rest, style: { ...styles, ...style }, role: "progressbar", className: classes });
+  return /* @__PURE__ */ React31.createElement("div", { "aria-label": "Loading...", ...rest, style: { ...styles, ...style }, role: "progressbar", className: classes });
 };
 
 // src/molecules/Badge/Badge.tsx
@@ -6100,7 +6122,7 @@ var createBadge = (type, displayName) => {
   const Component = (props) => {
     const { kind = "filled", value, textClassname, dense = false, disabled = false, ...rest } = props;
     const valueStr = value.toString();
-    return /* @__PURE__ */ React31.createElement(
+    return /* @__PURE__ */ React32.createElement(
       "span",
       {
         ...rest,
@@ -6118,7 +6140,7 @@ var createBadge = (type, displayName) => {
           "Aquarium-Badge"
         )
       },
-      /* @__PURE__ */ React31.createElement(
+      /* @__PURE__ */ React32.createElement(
         "span",
         {
           className: clsx11(textClassname, "inline-block", {
@@ -6130,15 +6152,15 @@ var createBadge = (type, displayName) => {
     );
   };
   Component.displayName = displayName;
-  Component.Skeleton = () => /* @__PURE__ */ React31.createElement(Skeleton, { height: 16, width: 16, display: "inline-block", className: "rounded-full" });
+  Component.Skeleton = () => /* @__PURE__ */ React32.createElement(Skeleton, { height: 16, width: 16, display: "inline-block", className: "rounded-full" });
   Component.Skeleton.displayName = `${displayName}.Skeleton`;
   return Component;
 };
 var NotificationBadge = ({ children, top = "-2px", right = "-2px", className, ...props }) => {
-  return /* @__PURE__ */ React31.createElement("div", { ...props, className: clsx11("Aquarium-Badge.Notification relative inline-flex", className ?? "text-default") }, children, /* @__PURE__ */ React31.createElement("span", { style: { top, right }, className: "absolute rounded-full w-[6px] h-[6px] bg-danger-graphic" }));
+  return /* @__PURE__ */ React32.createElement("div", { ...props, className: clsx11("Aquarium-Badge.Notification relative inline-flex", className ?? "text-default") }, children, /* @__PURE__ */ React32.createElement("span", { style: { top, right }, className: "absolute rounded-full w-[6px] h-[6px] bg-danger-graphic" }));
 };
 var DotBadge = ({ dense = false, ...props }) => {
-  return /* @__PURE__ */ React31.createElement(
+  return /* @__PURE__ */ React32.createElement(
     "span",
     {
       ...props,
@@ -6158,17 +6180,17 @@ Badge.Dot.displayName = "Badge.Dot";
 var ChipBadge = createBadge("chip", "ChipBadge");
 
 // src/atoms/DropdownMenu/DropdownMenu.tsx
-var dropdownMenuStyles = tv15({
+var dropdownMenuStyles = tv16({
   base: "bg-overlay w-full flex flex-col overflow-x-hidden typography-default text-default"
 });
 var DropdownMenu = ({ className, children, ...props }) => {
-  return /* @__PURE__ */ React32.createElement(AriaMenu, { className: dropdownMenuStyles({ className: ["Aquarium-DropdownMenu", className] }), ...props }, children);
+  return /* @__PURE__ */ React33.createElement(AriaMenu, { className: dropdownMenuStyles({ className: ["Aquarium-DropdownMenu", className] }), ...props }, children);
 };
-var MenuContainer = ({ minHeight, maxHeight = "100%", minWidth = "125px", maxWidth, children }) => /* @__PURE__ */ React32.createElement("div", { style: { minHeight, maxHeight, minWidth, maxWidth }, className: "overflow-x-hidden flex flex-col" }, children);
+var MenuContainer = ({ minHeight, maxHeight = "100%", minWidth = "125px", maxWidth, children }) => /* @__PURE__ */ React33.createElement("div", { style: { minHeight, maxHeight, minWidth, maxWidth }, className: "overflow-x-hidden flex flex-col" }, children);
 DropdownMenu.MenuContainer = MenuContainer;
-var ScrollableContentContainer = ({ children }) => /* @__PURE__ */ React32.createElement("div", { className: "p-3 overflow-y-auto overflow-x-hidden" }, children);
+var ScrollableContentContainer = ({ children }) => /* @__PURE__ */ React33.createElement("div", { className: "p-3 overflow-y-auto overflow-x-hidden" }, children);
 DropdownMenu.ScrollableContentContainer = ScrollableContentContainer;
-var dropdownMenuGroupStyles = tv15({
+var dropdownMenuGroupStyles = tv16({
   slots: {
     base: [
       '[&:not(:first-child)]:before:content-[""] [&:not(:first-child)]:before:block',
@@ -6179,10 +6201,10 @@ var dropdownMenuGroupStyles = tv15({
 });
 var Group = ({ className, title, titleProps, children, ...props }) => {
   const styles = dropdownMenuGroupStyles();
-  return /* @__PURE__ */ React32.createElement(AriaMenuSection, { className: styles.base({ className: "Aquarium-DropdownMenu.Group" }), ...props }, title && /* @__PURE__ */ React32.createElement(AriaHeader, { className: styles.title(), ...titleProps }, title), /* @__PURE__ */ React32.createElement(AriaCollection, null, children));
+  return /* @__PURE__ */ React33.createElement(AriaMenuSection, { className: styles.base({ className: "Aquarium-DropdownMenu.Group" }), ...props }, title && /* @__PURE__ */ React33.createElement(AriaHeader, { className: styles.title(), ...titleProps }, title), /* @__PURE__ */ React33.createElement(AriaCollection, null, children));
 };
 DropdownMenu.Group = Group;
-var dropdownMenuItemStyles = tv15({
+var dropdownMenuItemStyles = tv16({
   base: "group flex items-center gap-x-3 p-3 outline-none cursor-pointer",
   variants: {
     isDisabled: {
@@ -6218,21 +6240,21 @@ var Item2 = ({
   showNotification = false,
   disabled,
   ...props
-}) => /* @__PURE__ */ React32.createElement(
+}) => /* @__PURE__ */ React33.createElement(
   AriaMenuItem,
   {
     className: (values) => dropdownMenuItemStyles({ ...values, kind, className: ["Aquarium-DropdownMenu.Item", className] }),
     isDisabled: disabled,
     ...props
   },
-  composeRenderProps(props.children, (children, { selectionMode, isSelected, isDisabled }) => /* @__PURE__ */ React32.createElement(React32.Fragment, null, icon && showNotification && /* @__PURE__ */ React32.createElement(Badge.Notification, null, /* @__PURE__ */ React32.createElement(InlineIcon2, { icon })), icon && !showNotification && /* @__PURE__ */ React32.createElement(InlineIcon2, { icon }), /* @__PURE__ */ React32.createElement("span", { className: "grow" }, children, description && /* @__PURE__ */ React32.createElement(Typography2.Small, { color: isDisabled ? "inactive" : "muted" }, description)), selectionMode !== "none" && isSelected && /* @__PURE__ */ React32.createElement(InlineIcon2, { icon: tick_default })))
+  composeRenderProps(props.children, (children, { selectionMode, isSelected, isDisabled }) => /* @__PURE__ */ React33.createElement(React33.Fragment, null, icon && showNotification && /* @__PURE__ */ React33.createElement(Badge.Notification, null, /* @__PURE__ */ React33.createElement(InlineIcon2, { icon })), icon && !showNotification && /* @__PURE__ */ React33.createElement(InlineIcon2, { icon }), /* @__PURE__ */ React33.createElement("span", { className: "grow" }, children, description && /* @__PURE__ */ React33.createElement(Typography2.Small, { color: isDisabled ? "inactive" : "muted" }, description)), selectionMode !== "none" && isSelected && /* @__PURE__ */ React33.createElement(InlineIcon2, { icon: tick_default })))
 );
 DropdownMenu.Item = Item2;
-var EmptyStateContainer = ({ className, children, ...props }) => /* @__PURE__ */ React32.createElement("div", { className: clsx12("border border-dashed border-default p-3", className), ...props }, children);
+var EmptyStateContainer = ({ className, children, ...props }) => /* @__PURE__ */ React33.createElement("div", { className: clsx12("border border-dashed border-default p-3", className), ...props }, children);
 DropdownMenu.EmptyStateContainer = EmptyStateContainer;
 
 // src/atoms/Filter/Filter.tsx
-import React33 from "react";
+import React34 from "react";
 import {
   Button as AriaButton,
   DatePickerStateContext as AriaDatePickerStateContext,
@@ -6240,12 +6262,12 @@ import {
   Group as AriaGroup
 } from "react-aria-components";
 import { clsx as clsx13 } from "clsx";
-import { tv as tv16 } from "tailwind-variants";
+import { tv as tv17 } from "tailwind-variants";
 var DATE_FORMAT_OPTIONS = {
   locale: "en-GB",
   options: { day: "numeric", month: "numeric", year: "numeric" }
 };
-var filterWrapper = tv16({
+var filterWrapper = tv17({
   base: "rounded-full inline-flex items-center pressed:border-action-focus justify-between outline-0 outline-none border border-dashed border-default text-default bg-transparent",
   variants: {
     isHovered: {
@@ -6273,8 +6295,8 @@ var FilterTrigger = ({
   clearSelectionEnabled = true,
   ...props
 }) => {
-  const ariaDatePickerState = React33.useContext(AriaDatePickerStateContext);
-  const ariaDateRangePickerState = React33.useContext(AriaDateRangePickerStateContext);
+  const ariaDatePickerState = React34.useContext(AriaDatePickerStateContext);
+  const ariaDateRangePickerState = React34.useContext(AriaDateRangePickerStateContext);
   const isUsedInsideDatePicker = !!ariaDatePickerState?.value;
   const isUsedInsideDateRangePicker = !!ariaDateRangePickerState?.value.start && !!ariaDateRangePickerState.value.end;
   const onClearDatePickerRelated = () => {
@@ -6286,14 +6308,14 @@ var FilterTrigger = ({
   };
   const hasValue = !!value || isUsedInsideDatePicker || isUsedInsideDateRangePicker;
   const showClearButton = clearSelectionEnabled && (!!onClear && !!value || isUsedInsideDatePicker || isUsedInsideDateRangePicker);
-  return /* @__PURE__ */ React33.createElement(
+  return /* @__PURE__ */ React34.createElement(
     AriaGroup,
     {
       ...props,
       isInvalid: error,
       className: (renderProps) => filterWrapper({ ...renderProps, hasValue: hasValue || !!badge })
     },
-    /* @__PURE__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement(
+    /* @__PURE__ */ React34.createElement(React34.Fragment, null, /* @__PURE__ */ React34.createElement(
       AriaButton,
       {
         onPress: () => {
@@ -6305,7 +6327,7 @@ var FilterTrigger = ({
           "px-4": !showClearButton
         })
       },
-      /* @__PURE__ */ React33.createElement("div", { className: "flex items-center gap-3 divide-x divide-grey-20" }, /* @__PURE__ */ React33.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React33.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React33.createElement(InlineIcon2, { icon }), /* @__PURE__ */ React33.createElement(Typography2.Default, null, labelText)), badge && /* @__PURE__ */ React33.createElement(Typography2, { color: "primary-default", className: "flex items-center" }, /* @__PURE__ */ React33.createElement(Badge, { dense: true, value: badge }))), hasValue && /* @__PURE__ */ React33.createElement("div", { className: "pl-3" }, /* @__PURE__ */ React33.createElement(
+      /* @__PURE__ */ React34.createElement("div", { className: "flex items-center gap-3 divide-x divide-grey-20" }, /* @__PURE__ */ React34.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React34.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React34.createElement(InlineIcon2, { icon }), /* @__PURE__ */ React34.createElement(Typography2.Default, null, labelText)), badge && /* @__PURE__ */ React34.createElement(Typography2, { color: "primary-default", className: "flex items-center" }, /* @__PURE__ */ React34.createElement(Badge, { dense: true, value: badge }))), hasValue && /* @__PURE__ */ React34.createElement("div", { className: "pl-3" }, /* @__PURE__ */ React34.createElement(
         Typography2.Default,
         {
           className: clsx13("truncate", {
@@ -6316,10 +6338,10 @@ var FilterTrigger = ({
           color: error ? "danger-default" : "primary-default"
         },
         value,
-        isUsedInsideDatePicker && /* @__PURE__ */ React33.createElement(DateDisplay, { state: ariaDatePickerState }),
-        isUsedInsideDateRangePicker && /* @__PURE__ */ React33.createElement(DateDisplay, { state: ariaDateRangePickerState })
+        isUsedInsideDatePicker && /* @__PURE__ */ React34.createElement(DateDisplay, { state: ariaDatePickerState }),
+        isUsedInsideDateRangePicker && /* @__PURE__ */ React34.createElement(DateDisplay, { state: ariaDateRangePickerState })
       )))
-    ), showClearButton && /* @__PURE__ */ React33.createElement(
+    ), showClearButton && /* @__PURE__ */ React34.createElement(
       FilterClearButton,
       {
         onClear: () => {
@@ -6336,11 +6358,11 @@ var isDateRangePickerState = (state) => {
 var DateDisplay = ({ state }) => {
   const primary = isDateRangePickerState(state) ? state.formatValue(DATE_FORMAT_OPTIONS.locale, DATE_FORMAT_OPTIONS.options)?.start : state.formatValue(DATE_FORMAT_OPTIONS.locale, DATE_FORMAT_OPTIONS.options);
   const secondary = isDateRangePickerState(state) ? state.formatValue(DATE_FORMAT_OPTIONS.locale, DATE_FORMAT_OPTIONS.options)?.end : void 0;
-  return /* @__PURE__ */ React33.createElement(Box.Flex, { gap: "2" }, /* @__PURE__ */ React33.createElement("span", null, primary), secondary && /* @__PURE__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement("span", { "aria-hidden": true, className: "text-muted" }, "-"), /* @__PURE__ */ React33.createElement("span", null, secondary)));
+  return /* @__PURE__ */ React34.createElement(Box.Flex, { gap: "2" }, /* @__PURE__ */ React34.createElement("span", null, primary), secondary && /* @__PURE__ */ React34.createElement(React34.Fragment, null, /* @__PURE__ */ React34.createElement("span", { "aria-hidden": true, className: "text-muted" }, "-"), /* @__PURE__ */ React34.createElement("span", null, secondary)));
 };
 var FilterClearButton = ({ onClear }) => (
   // using a native HTML <button> here instead of <Button slot={null} /> from react-aria because react-aria <DialogTrigger> doesn't support it as a child. If we used <Button slot={null}>, the popover would open simultaneously with the clear callback, which is unintended behavior. Interestingly, this issue doesn't occur in react-aria's <DatePicker>, but for consistency and to avoid conflicts here, we're sticking with a plain button.
-  /* @__PURE__ */ React33.createElement(
+  /* @__PURE__ */ React34.createElement(
     "button",
     {
       "aria-label": "Clear filter",
@@ -6355,7 +6377,7 @@ var FilterClearButton = ({ onClear }) => (
       },
       className: "py-[10px] pl-[6px] pr-4 inline-flex items-center hover:bg-medium focus:bg-medium outline-0 outline-none rounded-r-full"
     },
-    /* @__PURE__ */ React33.createElement(InlineIcon2, { icon: cross_default })
+    /* @__PURE__ */ React34.createElement(InlineIcon2, { icon: cross_default })
   )
 );
 var Filter = () => null;
@@ -6363,14 +6385,14 @@ FilterTrigger.displayName = "Filter.Trigger";
 Filter.Trigger = FilterTrigger;
 
 // src/atoms/InputGroup/InputGroup.tsx
-import React36 from "react";
+import React37 from "react";
 
 // src/molecules/Grid/Grid.tsx
-import React35 from "react";
+import React36 from "react";
 import { isEmpty, mapValues, pick } from "lodash-es";
 
 // src/molecules/Tailwindify/Tailwindify.tsx
-import React34 from "react";
+import React35 from "react";
 import { get as get2, isUndefined as isUndefined6 } from "lodash-es";
 function Tailwindify(Component) {
   return ({
@@ -6431,8 +6453,8 @@ function Tailwindify(Component) {
       ...otherProps,
       style: finalStyle
     };
-    const childrenWithProps = React34.Children.map(children, (child, index) => {
-      if (!React34.isValidElement(child)) {
+    const childrenWithProps = React35.Children.map(children, (child, index) => {
+      if (!React35.isValidElement(child)) {
         return child;
       }
       const isLastChild = index === children.length - 1;
@@ -6453,9 +6475,9 @@ function Tailwindify(Component) {
       }
       const childStyle = get2(child, ["props", "style"], {});
       const newProps = { ...childProps, style: { ...childStyle, ...additionalStyle } };
-      return React34.cloneElement(child, newProps);
+      return React35.cloneElement(child, newProps);
     });
-    return /* @__PURE__ */ React34.createElement(Component, { className, ...componentProps }, childrenWithProps);
+    return /* @__PURE__ */ React35.createElement(Component, { className, ...componentProps }, childrenWithProps);
   };
 }
 
@@ -6494,7 +6516,7 @@ var GridItem = Tailwindify(
       gridRowEnd: rowEnd
     });
     const HtmlElement = htmlTag;
-    return /* @__PURE__ */ React35.createElement(
+    return /* @__PURE__ */ React36.createElement(
       HtmlElement,
       {
         style: { ...hookStyle, ...style },
@@ -6506,7 +6528,7 @@ var GridItem = Tailwindify(
   }
 );
 var Grid = (props) => {
-  return /* @__PURE__ */ React35.createElement(GridComponent, { ...props });
+  return /* @__PURE__ */ React36.createElement(GridComponent, { ...props });
 };
 var GridComponent = Tailwindify(
   ({
@@ -6561,7 +6583,7 @@ var GridComponent = Tailwindify(
       gridRowEnd: rowEnd
     });
     const HtmlElement = htmlTag;
-    return /* @__PURE__ */ React35.createElement(
+    return /* @__PURE__ */ React36.createElement(
       HtmlElement,
       {
         style: { ...hookStyle, ...style },
@@ -6584,7 +6606,7 @@ var gridColumnStyles = {
   "auto": "auto-cols-fr"
 };
 var InputGroup = ({ cols = "1", children, ...rest }) => {
-  return /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React37.createElement(
     Grid,
     {
       ...rest,
@@ -6599,9 +6621,9 @@ var InputGroup = ({ cols = "1", children, ...rest }) => {
 };
 
 // src/atoms/Modal/Modal.tsx
-import React37 from "react";
-import { tv as tv17 } from "tailwind-variants";
-var bodyMaskClasses = tv17({
+import React38 from "react";
+import { tv as tv18 } from "tailwind-variants";
+var bodyMaskClasses = tv18({
   variants: {
     position: {
       before: [
@@ -6633,7 +6655,7 @@ var bodyMaskClasses = tv17({
     }
   }
 });
-var modalStyles = tv17({
+var modalStyles = tv18({
   slots: {
     overlay: "inset-0 overflow-y-auto z-modal fixed",
     backdrop: "-z-10 fixed min-w-full min-h-full bg-backdrop",
@@ -6645,7 +6667,7 @@ var modalStyles = tv17({
     subtitle: "max-w-[700px]",
     closeButtonContainer: "absolute top-[24px] right-[28px]",
     body: [
-      "grow overflow-y-auto text-default flex flex-col",
+      "grow overflow-y-auto text-default flex flex-col outline-none",
       bodyMaskClasses({ position: "before" }),
       bodyMaskClasses({ position: "after" })
     ],
@@ -6769,59 +6791,59 @@ var Modal = ({
   ...rest
 }) => {
   const { overlay } = modalStyles({ kind });
-  return open ? /* @__PURE__ */ React37.createElement("div", { ...rest, className: overlay({ className }) }, children) : null;
+  return open ? /* @__PURE__ */ React38.createElement("div", { ...rest, className: overlay({ className }) }, children) : null;
 };
 Modal.BackDrop = ({ className, ...rest }) => {
   const { backdrop } = modalStyles();
-  return /* @__PURE__ */ React37.createElement("div", { ...rest, className: backdrop({ className }) });
+  return /* @__PURE__ */ React38.createElement("div", { ...rest, className: backdrop({ className }) });
 };
-Modal.Dialog = React37.forwardRef(
+Modal.Dialog = React38.forwardRef(
   ({ kind = "dialog", children, className, size = "md", isResponsive = true, ...rest }, ref) => {
     const { dialog } = modalStyles({ kind, size, isResponsive });
-    return /* @__PURE__ */ React37.createElement("div", { ref, "aria-modal": "true", ...rest, className: dialog({ className }) }, children);
+    return /* @__PURE__ */ React38.createElement("div", { ref, "aria-modal": "true", ...rest, className: dialog({ className }) }, children);
   }
 );
 Modal.Header = ({ kind = "dialog", size = "md", children, className, ...rest }) => {
   const { header } = modalStyles({ kind, size });
-  return /* @__PURE__ */ React37.createElement("div", { ...rest, className: header({ className }) }, children);
+  return /* @__PURE__ */ React38.createElement("div", { ...rest, className: header({ className }) }, children);
 };
 Modal.HeaderImage = ({ backgroundImage, className, ...rest }) => {
   const { headerImage } = modalStyles({ backgroundImage: Boolean(backgroundImage) });
-  return backgroundImage ? /* @__PURE__ */ React37.createElement("img", { "aria-hidden": true, src: backgroundImage, ...rest, className: headerImage({ className }) }) : /* @__PURE__ */ React37.createElement("div", { className: headerImage({ className }) });
+  return backgroundImage ? /* @__PURE__ */ React38.createElement("img", { "aria-hidden": true, src: backgroundImage, ...rest, className: headerImage({ className }) }) : /* @__PURE__ */ React38.createElement("div", { className: headerImage({ className }) });
 };
 Modal.CloseButtonContainer = ({ className, ...rest }) => {
   const { closeButtonContainer } = modalStyles();
-  return /* @__PURE__ */ React37.createElement("div", { ...rest, className: closeButtonContainer({ className }) });
+  return /* @__PURE__ */ React38.createElement("div", { ...rest, className: closeButtonContainer({ className }) });
 };
 Modal.Title = ({ kind = "dialog", children, className, ...rest }) => {
   const { title } = modalStyles({ kind });
-  return /* @__PURE__ */ React37.createElement(Typography, { htmlTag: "h2", variant: "subheading", color: "intense", className: title({ className }), ...rest }, children);
+  return /* @__PURE__ */ React38.createElement(Typography, { htmlTag: "h2", variant: "subheading", color: "intense", className: title({ className }), ...rest }, children);
 };
 Modal.Subtitle = ({ children, className, ...rest }) => {
   const { subtitle } = modalStyles();
-  return /* @__PURE__ */ React37.createElement(Typography, { variant: "default", color: "muted", className: subtitle({ className }), ...rest }, children);
+  return /* @__PURE__ */ React38.createElement(Typography, { variant: "default", color: "muted", className: subtitle({ className }), ...rest }, children);
 };
 Modal.TitleContainer = ({ children, className, ...rest }) => {
   const { titleContainer: titleContainer2 } = modalStyles();
-  return /* @__PURE__ */ React37.createElement("div", { ...rest, className: titleContainer2({ className }) }, children);
+  return /* @__PURE__ */ React38.createElement("div", { ...rest, className: titleContainer2({ className }) }, children);
 };
 Modal.Body = ({ children, className, noFooter = false, maxHeight, style, size, ...rest }) => {
   const { body, bodyContent } = modalStyles({ size });
-  return /* @__PURE__ */ React37.createElement("div", { ...rest, className: body({ className }), style: { maxHeight, ...style } }, /* @__PURE__ */ React37.createElement("div", { className: bodyContent({ noFooter }) }, children));
+  return /* @__PURE__ */ React38.createElement("div", { ...rest, className: body({ className }), style: { maxHeight, ...style } }, /* @__PURE__ */ React38.createElement("div", { className: bodyContent({ noFooter }) }, children));
 };
 Modal.Footer = ({ children, className, ...rest }) => {
   const { footer } = modalStyles();
-  return /* @__PURE__ */ React37.createElement("div", { ...rest, className: footer({ className }) }, children);
+  return /* @__PURE__ */ React38.createElement("div", { ...rest, className: footer({ className }) }, children);
 };
 Modal.Actions = ({ children, className, ...rest }) => {
   const { actions: actions2 } = modalStyles();
-  return /* @__PURE__ */ React37.createElement("div", { ...rest, className: actions2({ className }) }, children);
+  return /* @__PURE__ */ React38.createElement("div", { ...rest, className: actions2({ className }) }, children);
 };
 
 // src/atoms/Navigation/Navigation.tsx
-import React38 from "react";
-import { tv as tv18 } from "tailwind-variants";
-var navigationClasses = tv18({
+import React39 from "react";
+import { tv as tv19 } from "tailwind-variants";
+var navigationClasses = tv19({
   slots: {
     nav: "bg-body h-full border-r border-muted",
     list: "flex flex-col h-full",
@@ -6858,35 +6880,35 @@ var Navigation = ({
   ...rest
 }) => {
   const { nav, list } = navigationClasses();
-  return /* @__PURE__ */ React38.createElement("nav", { className: nav(), "aria-label": ariaLabel }, /* @__PURE__ */ React38.createElement("ul", { ...rest, className: list({ className }), role: "menubar" }, children));
+  return /* @__PURE__ */ React39.createElement("nav", { className: nav(), "aria-label": ariaLabel }, /* @__PURE__ */ React39.createElement("ul", { ...rest, className: list({ className }), role: "menubar" }, children));
 };
 var Header = ({ className, ...rest }) => {
   const { header } = navigationClasses();
-  return /* @__PURE__ */ React38.createElement("li", { ...rest, role: "presentation", className: header({ className }) });
+  return /* @__PURE__ */ React39.createElement("li", { ...rest, role: "presentation", className: header({ className }) });
 };
 var Title2 = ({ className, ...props }) => {
   const { headerTitle } = navigationClasses();
-  return /* @__PURE__ */ React38.createElement(Typography, { variant: "small", className: headerTitle({ className }), ...props });
+  return /* @__PURE__ */ React39.createElement(Typography, { variant: "small", className: headerTitle({ className }), ...props });
 };
 var Subtitle = ({ className, ...props }) => {
   const { headerSubtitle } = navigationClasses();
-  return /* @__PURE__ */ React38.createElement(Typography, { variant: "default-strong", className: headerSubtitle({ className }), ...props });
+  return /* @__PURE__ */ React39.createElement(Typography, { variant: "default-strong", className: headerSubtitle({ className }), ...props });
 };
 var Footer = ({ className, ...rest }) => {
   const { footer } = navigationClasses();
-  return /* @__PURE__ */ React38.createElement("li", { ...rest, role: "presentation", className: footer({ className }) });
+  return /* @__PURE__ */ React39.createElement("li", { ...rest, role: "presentation", className: footer({ className }) });
 };
 var Section = ({ title, className, ...rest }) => {
   const { sectionContainer, sectionTitle, sectionList } = navigationClasses();
-  return /* @__PURE__ */ React38.createElement("li", { role: "presentation", className: sectionContainer() }, title && /* @__PURE__ */ React38.createElement("div", { className: sectionTitle({ className }) }, title), /* @__PURE__ */ React38.createElement("ul", { ...rest, role: "group", className: sectionList({ className }) }));
+  return /* @__PURE__ */ React39.createElement("li", { role: "presentation", className: sectionContainer() }, title && /* @__PURE__ */ React39.createElement("div", { className: sectionTitle({ className }) }, title), /* @__PURE__ */ React39.createElement("ul", { ...rest, role: "group", className: sectionList({ className }) }));
 };
 var Divider = ({ className, ...rest }) => {
   const { divider } = navigationClasses();
-  return /* @__PURE__ */ React38.createElement("li", { "aria-hidden": true, ...rest, className: divider({ className }) });
+  return /* @__PURE__ */ React39.createElement("li", { "aria-hidden": true, ...rest, className: divider({ className }) });
 };
 var Item3 = ({ className, active = false, ...rest }) => {
   const { itemContainer, itemAnchor } = navigationClasses({ active });
-  return /* @__PURE__ */ React38.createElement("li", { role: "presentation", className: itemContainer() }, /* @__PURE__ */ React38.createElement("a", { ...rest, role: "menuitem", className: itemAnchor({ className }) }));
+  return /* @__PURE__ */ React39.createElement("li", { role: "presentation", className: itemContainer() }, /* @__PURE__ */ React39.createElement("a", { ...rest, role: "menuitem", className: itemAnchor({ className }) }));
 };
 var Submenu = ({
   children,
@@ -6896,11 +6918,11 @@ var Submenu = ({
   ...rest
 }) => {
   const { submenuContainer, submenuAnchor, submenuList } = navigationClasses();
-  return /* @__PURE__ */ React38.createElement("li", { role: "presentation", className: submenuContainer() }, /* @__PURE__ */ React38.createElement("a", { role: "menuitem", "aria-haspopup": "true", href: "#", id, className: submenuAnchor({ className }), ...rest }, title), /* @__PURE__ */ React38.createElement("ul", { role: "menu", className: submenuList(), "aria-labelledby": id }, children));
+  return /* @__PURE__ */ React39.createElement("li", { role: "presentation", className: submenuContainer() }, /* @__PURE__ */ React39.createElement("a", { role: "menuitem", "aria-haspopup": "true", href: "#", id, className: submenuAnchor({ className }), ...rest }, title), /* @__PURE__ */ React39.createElement("ul", { role: "menu", className: submenuList(), "aria-labelledby": id }, children));
 };
 var SubmenuItem = ({ className, active, ...rest }) => {
   const { submenuItem } = navigationClasses();
-  return /* @__PURE__ */ React38.createElement(Navigation.Item, { ...rest, active, className: submenuItem({ className }) });
+  return /* @__PURE__ */ React39.createElement(Navigation.Item, { ...rest, active, className: submenuItem({ className }) });
 };
 Header.Title = Title2;
 Header.Subtitle = Subtitle;
@@ -6913,9 +6935,9 @@ Navigation.Submenu = Submenu;
 Navigation.Divider = Divider;
 
 // src/atoms/PageHeader/PageHeader.tsx
-import React39 from "react";
-import { tv as tv19 } from "tailwind-variants";
-var pageHeaderStyles = tv19({
+import React40 from "react";
+import { tv as tv20 } from "tailwind-variants";
+var pageHeaderStyles = tv20({
   slots: {
     base: "flex flex-row flex-wrap gap-4 pb-6",
     container: "flex flex-col flex-1 gap-3 basis-[--aquarium-screens-xs]",
@@ -6925,10 +6947,10 @@ var pageHeaderStyles = tv19({
   }
 });
 var { base, container, titleContainer, chips, actions } = pageHeaderStyles();
-var PageHeader = ({ children, className, ...rest }) => /* @__PURE__ */ React39.createElement("div", { className: base({ className }), ...rest }, children);
-PageHeader.Container = ({ children, className, ...rest }) => /* @__PURE__ */ React39.createElement("div", { className: container({ className }), ...rest }, children);
-PageHeader.TitleContainer = ({ children, className, ...rest }) => /* @__PURE__ */ React39.createElement("div", { className: titleContainer({ className }), ...rest }, children);
-PageHeader.Title = ({ isSubHeader = false, children, ...rest }) => /* @__PURE__ */ React39.createElement(
+var PageHeader = ({ children, className, ...rest }) => /* @__PURE__ */ React40.createElement("div", { className: base({ className }), ...rest }, children);
+PageHeader.Container = ({ children, className, ...rest }) => /* @__PURE__ */ React40.createElement("div", { className: container({ className }), ...rest }, children);
+PageHeader.TitleContainer = ({ children, className, ...rest }) => /* @__PURE__ */ React40.createElement("div", { className: titleContainer({ className }), ...rest }, children);
+PageHeader.Title = ({ isSubHeader = false, children, ...rest }) => /* @__PURE__ */ React40.createElement(
   Typography2,
   {
     ...rest,
@@ -6938,26 +6960,26 @@ PageHeader.Title = ({ isSubHeader = false, children, ...rest }) => /* @__PURE__
   },
   children
 );
-PageHeader.Subtitle = ({ children, ...rest }) => /* @__PURE__ */ React39.createElement(Typography2.Default, { ...rest, color: "default" }, children);
-PageHeader.Chips = ({ children, className, ...rest }) => /* @__PURE__ */ React39.createElement("div", { className: chips({ className }), ...rest }, children);
-PageHeader.Actions = ({ children, className, ...rest }) => /* @__PURE__ */ React39.createElement("div", { className: actions({ className }), ...rest }, children);
+PageHeader.Subtitle = ({ children, ...rest }) => /* @__PURE__ */ React40.createElement(Typography2.Default, { ...rest, color: "default" }, children);
+PageHeader.Chips = ({ children, className, ...rest }) => /* @__PURE__ */ React40.createElement("div", { className: chips({ className }), ...rest }, children);
+PageHeader.Actions = ({ children, className, ...rest }) => /* @__PURE__ */ React40.createElement("div", { className: actions({ className }), ...rest }, children);
 
 // src/atoms/Popover/Popover.tsx
-import React40 from "react";
+import React41 from "react";
 import {
   composeRenderProps as composeRenderProps2,
   OverlayArrow,
   Popover as AriaPopover
 } from "react-aria-components";
-import { tv as tv20 } from "tailwind-variants";
-var popoverStyles = tv20({
+import { tv as tv21 } from "tailwind-variants";
+var popoverStyles = tv21({
   // z-[101] ensures popover appears above modal (z-modal: 100)
   base: "rounded shadow-overlay bg-overlay mt-1 overflow-y-auto flex flex-col border border-default outline-none z-[101]"
 });
-var Popover = React40.forwardRef(
+var Popover = React41.forwardRef(
   ({ children, offset = 0, className, placement: _placement = "bottom-left", ...props }, ref) => {
     const placement = _placement.replace("-", " ");
-    return /* @__PURE__ */ React40.createElement(
+    return /* @__PURE__ */ React41.createElement(
       AriaPopover,
       {
         ref,
@@ -6973,7 +6995,7 @@ var Popover = React40.forwardRef(
     );
   }
 );
-var PopoverArrow = () => /* @__PURE__ */ React40.createElement(OverlayArrow, { className: "group" }, /* @__PURE__ */ React40.createElement(
+var PopoverArrow = () => /* @__PURE__ */ React41.createElement(OverlayArrow, { className: "group" }, /* @__PURE__ */ React41.createElement(
   "svg",
   {
     width: 12,
@@ -6981,19 +7003,19 @@ var PopoverArrow = () => /* @__PURE__ */ React40.createElement(OverlayArrow, { c
     viewBox: "0 0 12 12",
     className: "block fill-white stroke-1 stroke-black group-placement-bottom:rotate-180 group-placement-left:-rotate-90 group-placement-right:rotate-90"
   },
-  /* @__PURE__ */ React40.createElement("path", { d: "M0 0 L6 6 L12 0" })
+  /* @__PURE__ */ React41.createElement("path", { d: "M0 0 L6 6 L12 0" })
 ));
 PopoverArrow.displayName = "Popover.Arrow";
 Popover.Arrow = PopoverArrow;
 
 // src/atoms/PopoverDialog/PopoverDialog.tsx
-import React41 from "react";
+import React42 from "react";
 import { clsx as clsx14 } from "clsx";
-var Header2 = ({ children, className, ...rest }) => /* @__PURE__ */ React41.createElement("div", { ...rest, className: clsx14("p-5 gap-3 flex items-center", className) }, children);
-var Title3 = ({ children, className, ...rest }) => /* @__PURE__ */ React41.createElement(Typography, { ...rest, htmlTag: "h1", variant: "default-strong" }, children);
-var Body = ({ children, className, ...rest }) => /* @__PURE__ */ React41.createElement(Typography, { ...rest, htmlTag: "div", variant: "small", className: clsx14("px-5 overflow-y-auto", className) }, children);
-var Footer2 = ({ children, className, ...rest }) => /* @__PURE__ */ React41.createElement("div", { ...rest, className: clsx14("p-5", className) }, children);
-var Actions2 = ({ children, className, ...rest }) => /* @__PURE__ */ React41.createElement("div", { ...rest, className: clsx14("flex gap-4", className) }, children);
+var Header2 = ({ children, className, ...rest }) => /* @__PURE__ */ React42.createElement("div", { ...rest, className: clsx14("p-5 gap-3 flex items-center", className) }, children);
+var Title3 = ({ children, className, ...rest }) => /* @__PURE__ */ React42.createElement(Typography, { ...rest, htmlTag: "h1", variant: "default-strong" }, children);
+var Body = ({ children, className, ...rest }) => /* @__PURE__ */ React42.createElement(Typography, { ...rest, htmlTag: "div", variant: "small", className: clsx14("px-5 overflow-y-auto", className) }, children);
+var Footer2 = ({ children, className, ...rest }) => /* @__PURE__ */ React42.createElement("div", { ...rest, className: clsx14("p-5", className) }, children);
+var Actions2 = ({ children, className, ...rest }) => /* @__PURE__ */ React42.createElement("div", { ...rest, className: clsx14("flex gap-4", className) }, children);
 var PopoverDialog = {
   Header: Header2,
   Title: Title3,
@@ -7003,13 +7025,13 @@ var PopoverDialog = {
 };
 
 // src/atoms/ProgressBar/ProgressBar.tsx
-import React42 from "react";
+import React43 from "react";
 import { clamp } from "lodash-es";
-import { tv as tv21 } from "tailwind-variants";
-var progressBarClasses = tv21({
+import { tv as tv22 } from "tailwind-variants";
+var progressBarClasses = tv22({
   base: "relative flex items-center w-full bg-muted h-2 rounded-full overflow-hidden"
 });
-var progressBarIndicatorClasses = tv21({
+var progressBarIndicatorClasses = tv22({
   base: "h-2 rounded-full transition-all ease-in-out delay-150",
   variants: {
     status: {
@@ -7020,13 +7042,13 @@ var progressBarIndicatorClasses = tv21({
     }
   }
 });
-var progressBarLabelsClasses = tv21({
+var progressBarLabelsClasses = tv22({
   base: "flex flex-row"
 });
-var ProgressBar = ({ children, className, ...rest }) => /* @__PURE__ */ React42.createElement("div", { ...rest, className: progressBarClasses({ className }) }, children);
+var ProgressBar = ({ children, className, ...rest }) => /* @__PURE__ */ React43.createElement("div", { ...rest, className: progressBarClasses({ className }) }, children);
 ProgressBar.Indicator = ({ min, max, value, "aria-label": ariaLabel, status, className, ...rest }) => {
   const completedPercentage = clamp((value - min) / (max - min) * 100, 0, 100);
-  return /* @__PURE__ */ React42.createElement(
+  return /* @__PURE__ */ React43.createElement(
     "div",
     {
       ...rest,
@@ -7040,15 +7062,15 @@ ProgressBar.Indicator = ({ min, max, value, "aria-label": ariaLabel, status, cla
     }
   );
 };
-ProgressBar.Labels = ({ children, startLabel, endLabel, className, ...rest }) => /* @__PURE__ */ React42.createElement("div", { className: progressBarLabelsClasses({ className }) }, /* @__PURE__ */ React42.createElement("span", { ...rest, className: "grow text-default typography-small" }, startLabel), /* @__PURE__ */ React42.createElement("span", { ...rest, className: "grow text-default typography-small text-right" }, endLabel));
+ProgressBar.Labels = ({ children, startLabel, endLabel, className, ...rest }) => /* @__PURE__ */ React43.createElement("div", { className: progressBarLabelsClasses({ className }) }, /* @__PURE__ */ React43.createElement("span", { ...rest, className: "grow text-default typography-small" }, startLabel), /* @__PURE__ */ React43.createElement("span", { ...rest, className: "grow text-default typography-small text-right" }, endLabel));
 
 // src/atoms/Section/Section.tsx
-import React43 from "react";
-import { tv as tv22 } from "tailwind-variants";
-var sectionStyles = tv22({
+import React44 from "react";
+import { tv as tv23 } from "tailwind-variants";
+var sectionStyles = tv23({
   slots: {
     base: "border border-muted rounded-lg",
-    header: "px-5 py-3 flex gap-5 justify-between items-center",
+    header: "px-5 py-3 flex gap-5 justify-between items-center rounded-t-lg",
     titleContainer: "grow grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 items-center min-h-[38px]",
     actions: "flex gap-4 justify-end",
     body: "p-5 rounded-lg"
@@ -7069,19 +7091,19 @@ var Section2 = ({
   ...rest
 }) => {
   const { base: base2 } = sectionStyles();
-  return /* @__PURE__ */ React43.createElement(Box, { component: "section", ...rest, className: base2({ className }) }, children);
+  return /* @__PURE__ */ React44.createElement(Box, { component: "section", ...rest, className: base2({ className }) }, children);
 };
 Section2.Header = ({ children, className, expanded, collapsible, ...rest }) => {
   const { header } = sectionStyles({ expanded, collapsible });
-  return /* @__PURE__ */ React43.createElement("div", { ...rest, className: header({ className }) }, children);
+  return /* @__PURE__ */ React44.createElement("div", { ...rest, className: header({ className }) }, children);
 };
-Section2.TitleContainer = React43.forwardRef(
+Section2.TitleContainer = React44.forwardRef(
   ({ children, className, collapsible, ...rest }, ref) => {
     const { titleContainer: titleContainer2 } = sectionStyles({ collapsible });
-    return /* @__PURE__ */ React43.createElement("div", { ...rest, ref, className: titleContainer2({ className }) }, children);
+    return /* @__PURE__ */ React44.createElement("div", { ...rest, ref, className: titleContainer2({ className }) }, children);
   }
 );
-Section2.Toggle = (props) => /* @__PURE__ */ React43.createElement(
+Section2.Toggle = (props) => /* @__PURE__ */ React44.createElement(
   Icon2,
   {
     ...props,
@@ -7094,20 +7116,20 @@ Section2.Toggle = (props) => /* @__PURE__ */ React43.createElement(
     })
   }
 );
-Section2.Title = ({ children, ...rest }) => /* @__PURE__ */ React43.createElement(Typography2.Large, { ...rest, htmlTag: "h2", color: "intense", className: "flex gap-3 items-center" }, children);
-Section2.Subtitle = ({ children, ...rest }) => /* @__PURE__ */ React43.createElement(Typography2.Small, { ...rest, color: "muted" }, children);
+Section2.Title = ({ children, ...rest }) => /* @__PURE__ */ React44.createElement(Typography2.Large, { ...rest, htmlTag: "h2", color: "intense", className: "flex gap-3 items-center" }, children);
+Section2.Subtitle = ({ children, ...rest }) => /* @__PURE__ */ React44.createElement(Typography2.Small, { ...rest, color: "muted" }, children);
 Section2.Actions = ({ children, className, ...rest }) => {
   const { actions: actions2 } = sectionStyles();
-  return /* @__PURE__ */ React43.createElement("div", { ...rest, className: actions2({ className }) }, children);
+  return /* @__PURE__ */ React44.createElement("div", { ...rest, className: actions2({ className }) }, children);
 };
 Section2.Body = ({ children, className, ...rest }) => {
   const { body } = sectionStyles();
-  return /* @__PURE__ */ React43.createElement("div", { ...rest, className: body({ className }) }, /* @__PURE__ */ React43.createElement(Typography, { htmlTag: "div", color: "default" }, children));
+  return /* @__PURE__ */ React44.createElement("div", { ...rest, className: body({ className }) }, /* @__PURE__ */ React44.createElement(Typography, { htmlTag: "div", color: "default" }, children));
 };
 
 // src/atoms/Select/Select.tsx
-import React44 from "react";
-import { tv as tv23 } from "tailwind-variants";
+import React45 from "react";
+import { tv as tv24 } from "tailwind-variants";
 function getOptionLabelBuiltin(option) {
   if (option === null) {
     return "";
@@ -7121,10 +7143,10 @@ function isOptionDisabledBuiltin(option) {
   return !!option.disabled;
 }
 var getValues = (children) => {
-  const values = React44.Children.map(children, (c) => c?.props?.value);
+  const values = React45.Children.map(children, (c) => c?.props?.value);
   return values?.filter((v) => v !== void 0 && v !== null) ?? [];
 };
-var inputContainerClasses = tv23({
+var inputContainerClasses = tv24({
   base: "relative rounded typography-default-strong w-full flex flex-row items-center bg-body focus:outline-none focus-visible:border-action-focus group",
   variants: {
     variant: {
@@ -7136,7 +7158,7 @@ var inputContainerClasses = tv23({
     }
   }
 });
-var inputClasses = tv23({
+var inputClasses = tv24({
   base: "grow rounded border-0 focus:outline-none px-[1px] my-1 min-w-0 typography-default bg-transparent disabled:cursor-not-allowed disabled:bg-medium placeholder:text-inactive",
   variants: {
     disabled: {
@@ -7149,22 +7171,22 @@ var inputClasses = tv23({
     }
   }
 });
-var menuClasses = tv23({
+var menuClasses = tv24({
   base: "text-default bg-overlay overflow-y-auto"
 });
-var noResultsClasses = tv23({
+var noResultsClasses = tv24({
   base: "p-3 text-inactive typography-default"
 });
-var emptyStateContainerClasses = tv23({
+var emptyStateContainerClasses = tv24({
   base: "border border-dashed border-default m-4 p-6"
 });
-var dividerClasses = tv23({
+var dividerClasses = tv24({
   base: "border-b-1 border-muted mx-3 my-4"
 });
-var groupClasses = tv23({
+var groupClasses = tv24({
   base: "flex items-center gap-x-3 p-3 text-inactive uppercase cursor-default typography-small mt-4 first:mt-0"
 });
-var itemClasses = tv23({
+var itemClasses = tv24({
   base: "Aquarium-Select.Item flex items-center gap-x-3 p-3 typography-default",
   variants: {
     disabled: {
@@ -7177,7 +7199,7 @@ var itemClasses = tv23({
     }
   }
 });
-var actionItemClasses = tv23({
+var actionItemClasses = tv24({
   base: "flex items-center gap-x-3 typography-default",
   variants: {
     dense: {
@@ -7190,7 +7212,7 @@ var actionItemClasses = tv23({
     }
   }
 });
-var toggleClasses = tv23({
+var toggleClasses = tv24({
   base: "grow-0 leading-none",
   variants: {
     disabled: {
@@ -7199,10 +7221,10 @@ var toggleClasses = tv23({
     }
   }
 });
-var InputContainer = React44.forwardRef(
-  ({ variant = "default", className, ...props }, ref) => /* @__PURE__ */ React44.createElement("div", { ref, className: inputContainerClasses({ variant, className }), ...props })
+var InputContainer = React45.forwardRef(
+  ({ variant = "default", className, ...props }, ref) => /* @__PURE__ */ React45.createElement("div", { ref, className: inputContainerClasses({ variant, className }), ...props })
 );
-var Input = React44.forwardRef(({ className, required, ...props }, ref) => /* @__PURE__ */ React44.createElement(
+var Input = React45.forwardRef(({ className, required, ...props }, ref) => /* @__PURE__ */ React45.createElement(
   "input",
   {
     ref,
@@ -7212,24 +7234,24 @@ var Input = React44.forwardRef(({ className, required, ...props }, ref) => /* @_
     ...props
   }
 ));
-var Menu = React44.forwardRef(
-  ({ maxHeight = "450px", className, children, ...props }, ref) => /* @__PURE__ */ React44.createElement("ul", { ref, style: { maxHeight }, className: menuClasses({ className }), ...props }, children)
+var Menu = React45.forwardRef(
+  ({ maxHeight = "450px", className, children, ...props }, ref) => /* @__PURE__ */ React45.createElement("ul", { ref, style: { maxHeight }, className: menuClasses({ className }), ...props }, children)
 );
-var NoResults = React44.forwardRef(
-  ({ className, children, ...rest }, ref) => /* @__PURE__ */ React44.createElement("li", { ref, ...rest, className: noResultsClasses({ className }) }, children)
+var NoResults = React45.forwardRef(
+  ({ className, children, ...rest }, ref) => /* @__PURE__ */ React45.createElement("li", { ref, ...rest, className: noResultsClasses({ className }) }, children)
 );
-var EmptyStateContainer2 = React44.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React44.createElement("li", { ref, className: emptyStateContainerClasses({ className }), ...props }, children));
-var Divider2 = ({ className, ...props }) => /* @__PURE__ */ React44.createElement("div", { className: dividerClasses({ className }), ...props });
-var Group2 = React44.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React44.createElement("li", { ref, className: groupClasses({ className }), ...props }, children));
+var EmptyStateContainer2 = React45.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React45.createElement("li", { ref, className: emptyStateContainerClasses({ className }), ...props }, children));
+var Divider2 = ({ className, ...props }) => /* @__PURE__ */ React45.createElement("div", { className: dividerClasses({ className }), ...props });
+var Group2 = React45.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React45.createElement("li", { ref, className: groupClasses({ className }), ...props }, children));
 var endAdornmentSize = { width: 14, height: 14 };
-var Item4 = React44.forwardRef(
+var Item4 = React45.forwardRef(
   ({ highlighted, selected, className, children, ...props }, ref) => {
     const isDisabled = Boolean(props["aria-disabled"]);
-    return /* @__PURE__ */ React44.createElement("li", { ref, className: itemClasses({ disabled: isDisabled, highlighted, className }), ...props }, /* @__PURE__ */ React44.createElement("span", { className: "grow flex gap-x-3" }, children), selected ? /* @__PURE__ */ React44.createElement(InlineIcon2, { icon: tick_default, ...endAdornmentSize }) : /* @__PURE__ */ React44.createElement("div", { style: endAdornmentSize }));
+    return /* @__PURE__ */ React45.createElement("li", { ref, className: itemClasses({ disabled: isDisabled, highlighted, className }), ...props }, /* @__PURE__ */ React45.createElement("span", { className: "grow flex gap-x-3" }, children), selected ? /* @__PURE__ */ React45.createElement(InlineIcon2, { icon: tick_default, ...endAdornmentSize }) : /* @__PURE__ */ React45.createElement("div", { style: endAdornmentSize }));
   }
 );
-var ActionItem = React44.forwardRef(
-  ({ className, dense = false, icon, onClick, children, ...props }, ref) => /* @__PURE__ */ React44.createElement(
+var ActionItem = React45.forwardRef(
+  ({ className, dense = false, icon, onClick, children, ...props }, ref) => /* @__PURE__ */ React45.createElement(
     "li",
     {
       ref,
@@ -7238,11 +7260,11 @@ var ActionItem = React44.forwardRef(
       className: actionItemClasses({ dense, disabled: props.disabled, className }),
       ...props
     },
-    icon && /* @__PURE__ */ React44.createElement(InlineIcon2, { icon }),
+    icon && /* @__PURE__ */ React45.createElement(InlineIcon2, { icon }),
     children
   )
 );
-var Toggle = React44.forwardRef(({ hasFocus, isOpen, ...props }, ref) => /* @__PURE__ */ React44.createElement(
+var Toggle = React45.forwardRef(({ hasFocus, isOpen, ...props }, ref) => /* @__PURE__ */ React45.createElement(
   "button",
   {
     ref,
@@ -7251,7 +7273,7 @@ var Toggle = React44.forwardRef(({ hasFocus, isOpen, ...props }, ref) => /* @__P
     ...props,
     className: toggleClasses({ disabled: props.disabled ?? false })
   },
-  /* @__PURE__ */ React44.createElement(
+  /* @__PURE__ */ React45.createElement(
     InlineIcon2,
     {
       color: props.disabled ? "inactive" : "default",
@@ -7273,9 +7295,9 @@ var Select = {
 };
 
 // src/atoms/Stepper/Stepper.tsx
-import React45 from "react";
-import { tv as tv24 } from "tailwind-variants";
-var connectorStyles = tv24({
+import React46 from "react";
+import { tv as tv25 } from "tailwind-variants";
+var connectorStyles = tv25({
   slots: {
     container: "absolute w-full -left-1/2",
     connector: "w-full"
@@ -7297,7 +7319,7 @@ var connectorStyles = tv24({
     }
   }
 });
-var stepStyles = tv24({
+var stepStyles = tv25({
   slots: {
     step: "flex flex-col items-center relative text-center",
     indicator: "Aquarium-Stepper-Indicator rounded-full flex justify-center items-center mx-2 mb-3"
@@ -7354,26 +7376,26 @@ var stepStyles = tv24({
     }
   ]
 });
-var Stepper = ({ className, ...rest }) => /* @__PURE__ */ React45.createElement("div", { ...rest, className });
+var Stepper = ({ className, ...rest }) => /* @__PURE__ */ React46.createElement("div", { ...rest, className });
 var ConnectorContainer = ({
   className,
   dense = false,
   ...rest
 }) => {
   const { container: container2 } = connectorStyles({ dense });
-  return /* @__PURE__ */ React45.createElement("div", { ...rest, className: container2({ className }) });
+  return /* @__PURE__ */ React46.createElement("div", { ...rest, className: container2({ className }) });
 };
 var Connector = ({ children, className, completed = false, dense = false, ...rest }) => {
   const { connector } = connectorStyles({ completed, dense });
-  return /* @__PURE__ */ React45.createElement("div", { ...rest, className: connector({ className }) });
+  return /* @__PURE__ */ React46.createElement("div", { ...rest, className: connector({ className }) });
 };
 var Step = ({ className, state, ...rest }) => {
   const { step } = stepStyles({ state });
-  return /* @__PURE__ */ React45.createElement("div", { ...rest, className: step({ className }) });
+  return /* @__PURE__ */ React46.createElement("div", { ...rest, className: step({ className }) });
 };
 var Indicator = ({ children, className, state, dense = false, ...rest }) => {
   const { indicator } = stepStyles({ state, dense });
-  return /* @__PURE__ */ React45.createElement("div", { ...rest, className: indicator({ className }) }, state === "completed" ? /* @__PURE__ */ React45.createElement(InlineIcon2, { icon: tick_default }) : dense ? null : children);
+  return /* @__PURE__ */ React46.createElement("div", { ...rest, className: indicator({ className }) }, state === "completed" ? /* @__PURE__ */ React46.createElement(InlineIcon2, { icon: tick_default }) : dense ? null : children);
 };
 Step.Indicator = Indicator;
 Stepper.Step = Step;
@@ -7381,9 +7403,9 @@ ConnectorContainer.Connector = Connector;
 Stepper.ConnectorContainer = ConnectorContainer;
 
 // src/atoms/Switch/Switch.tsx
-import React46 from "react";
-import { tv as tv25 } from "tailwind-variants";
-var switchStyles = tv25({
+import React47 from "react";
+import { tv as tv26 } from "tailwind-variants";
+var switchStyles = tv26({
   slots: {
     wrapper: "relative inline-flex justify-center items-center self-center group",
     input: "appearance-none peer/switch rounded-full inline-block w-[34px] h-[20px] transition duration-300 outline-none focusable cursor-pointer disabled:cursor-not-allowed focus-visible:ring-action-focus",
@@ -7402,10 +7424,10 @@ var switchStyles = tv25({
     }
   }
 });
-var Switch = React46.forwardRef(
+var Switch = React47.forwardRef(
   ({ id, children, name, disabled = false, readOnly = false, ...props }, ref) => {
     const { wrapper, input, thumb } = switchStyles({ disabled });
-    return /* @__PURE__ */ React46.createElement("span", { className: wrapper() }, /* @__PURE__ */ React46.createElement(
+    return /* @__PURE__ */ React47.createElement("span", { className: wrapper() }, /* @__PURE__ */ React47.createElement(
       "input",
       {
         id,
@@ -7417,15 +7439,15 @@ var Switch = React46.forwardRef(
         readOnly,
         disabled
       }
-    ), /* @__PURE__ */ React46.createElement("span", { className: thumb() }, disabled && /* @__PURE__ */ React46.createElement(Icon2, { icon: ban_default, width: "10px", height: "10px" })));
+    ), /* @__PURE__ */ React47.createElement("span", { className: thumb() }, disabled && /* @__PURE__ */ React47.createElement(Icon2, { icon: ban_default, width: "10px", height: "10px" })));
   }
 );
 
 // src/atoms/VisuallyHidden/VisuallyHidden.tsx
-import React47 from "react";
+import React48 from "react";
 import { VisuallyHidden as AriaVisuallyHidden } from "@react-aria/visually-hidden";
 var VisuallyHidden = (props) => {
-  return /* @__PURE__ */ React47.createElement(AriaVisuallyHidden, { ...props });
+  return /* @__PURE__ */ React48.createElement(AriaVisuallyHidden, { ...props });
 };
 export {
   Alert,
@@ -7436,6 +7458,7 @@ export {
   Checkbox,
   Chip,
   ChoiceChip,
+  CommandPalette,
   DIALOG_ICONS_AND_COLORS,
   DataList,
   Dialog,
@@ -7467,6 +7490,10 @@ export {
   bodyCellClasses,
   buttonClasses,
   cellClassNames,
+  commandPaletteStyles,
+  dropdownMenuGroupStyles,
+  dropdownMenuItemStyles,
+  dropdownMenuStyles,
   getAlignClassNames,
   getBodyCellClassNames,
   getHeadCellClassNames,