@aivenio/aquarium 6.0.1 → 6.1.0

package/dist/atoms.cjs

@@ -38,6 +38,7 @@ __export(atoms_exports, {
   Checkbox: () => Checkbox,
   Chip: () => Chip,
   ChoiceChip: () => ChoiceChip,
+  CommandPalette: () => CommandPalette,
   DIALOG_ICONS_AND_COLORS: () => DIALOG_ICONS_AND_COLORS,
   DataList: () => DataList,
   Dialog: () => Dialog,
@@ -69,6 +70,10 @@ __export(atoms_exports, {
   bodyCellClasses: () => bodyCellClasses,
   buttonClasses: () => buttonClasses,
   cellClassNames: () => cellClassNames,
+  commandPaletteStyles: () => commandPaletteStyles,
+  dropdownMenuGroupStyles: () => dropdownMenuGroupStyles,
+  dropdownMenuItemStyles: () => dropdownMenuItemStyles,
+  dropdownMenuStyles: () => dropdownMenuStyles,
   getAlignClassNames: () => getAlignClassNames,
   getBodyCellClassNames: () => getBodyCellClassNames,
   getHeadCellClassNames: () => getHeadCellClassNames,
@@ -505,11 +510,11 @@ var warningSign_default = data15;
 // src/utils/constants.ts
 var import_tailwind_variants = require("tailwind-variants");
 var inputStyles = (0, import_tailwind_variants.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: "",
@@ -526,7 +531,7 @@ var inputStyles = (0, import_tailwind_variants.tv)({
   }
 });
 var focusRingStyle = (0, import_tailwind_variants.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 = (0, import_tailwind_variants.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"
@@ -3180,7 +3185,7 @@ var choiceChipClasses = (0, import_tailwind_variants10.tv)({
   },
   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: {
@@ -3203,6 +3208,7 @@ var ChoiceChip = ({
   name,
   value,
   disabled,
+  "aria-label": ariaLabel,
   ...rest
 }) => {
   const [selected, setSelected] = (0, import_utils2.useControlledState)(checked, defaultChecked, onChange);
@@ -3210,7 +3216,7 @@ var ChoiceChip = ({
   const handleChange = () => {
     setSelected(!selected);
   };
-  return /* @__PURE__ */ import_react30.default.createElement("label", { className: label(), ...rest }, /* @__PURE__ */ import_react30.default.createElement(
+  return /* @__PURE__ */ import_react30.default.createElement("label", { className: label(), "aria-label": ariaLabel, ...rest }, /* @__PURE__ */ import_react30.default.createElement(
     "input",
     {
       type: selectionMode,
@@ -3224,20 +3230,41 @@ var ChoiceChip = ({
   ), /* @__PURE__ */ import_react30.default.createElement("span", { className: chip() }, children));
 };
 
+// src/atoms/CommandPalette/CommandPalette.tsx
+var import_react31 = __toESM(require("react"));
+var import_tailwind_variants11 = require("tailwind-variants");
+var commandPaletteStyles = (0, import_tailwind_variants11.tv)({
+  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__ */ import_react31.default.createElement("div", { ...rest, className: emptyState({ className }) }, children || "No commands found.");
+};
+var CommandPalette = {
+  EmptyState
+};
+
 // src/atoms/DataList/DataList.tsx
-var import_react33 = __toESM(require("react"));
+var import_react34 = __toESM(require("react"));
 var import_clsx10 = require("clsx");
-var import_tailwind_variants13 = require("tailwind-variants");
+var import_tailwind_variants14 = require("tailwind-variants");
 
 // src/atoms/Table/Table.tsx
-var import_react32 = __toESM(require("react"));
+var import_react33 = __toESM(require("react"));
 var import_clsx9 = require("clsx");
-var import_tailwind_variants12 = require("tailwind-variants");
+var import_tailwind_variants13 = require("tailwind-variants");
 
 // src/atoms/RadioButton/RadioButton.tsx
-var import_react31 = __toESM(require("react"));
-var import_tailwind_variants11 = require("tailwind-variants");
-var radioButtonClasses = (0, import_tailwind_variants11.tv)({
+var import_react32 = __toESM(require("react"));
+var import_tailwind_variants12 = require("tailwind-variants");
+var radioButtonClasses = (0, import_tailwind_variants12.tv)({
   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: {
@@ -3246,8 +3273,8 @@ var radioButtonClasses = (0, import_tailwind_variants11.tv)({
     }
   }
 });
-var RadioButton = import_react31.default.forwardRef(
-  ({ id, children, name, disabled = false, readOnly = false, ...props }, ref) => /* @__PURE__ */ import_react31.default.createElement(
+var RadioButton = import_react32.default.forwardRef(
+  ({ id, children, name, disabled = false, readOnly = false, ...props }, ref) => /* @__PURE__ */ import_react32.default.createElement(
     "input",
     {
       id,
@@ -3263,19 +3290,19 @@ var RadioButton = import_react31.default.forwardRef(
 );
 
 // src/atoms/Table/Table.tsx
-var HeadContext = import_react32.default.createContext(null);
-var tableClasses = (0, import_tailwind_variants12.tv)({
+var HeadContext = import_react33.default.createContext(null);
+var tableClasses = (0, import_tailwind_variants13.tv)({
   base: "w-full relative typography-default border-spacing-0 border-separate"
 });
-var rowClassNamesBase = (0, import_tailwind_variants12.tv)({
+var rowClassNamesBase = (0, import_tailwind_variants13.tv)({
   base: "children:border-default group children:last:border-b-0 hover:bg-muted"
 });
 var rowClassNames = rowClassNamesBase();
-var cellClassNamesBase = (0, import_tailwind_variants12.tv)({
+var cellClassNamesBase = (0, import_tailwind_variants13.tv)({
   base: "px-4 border-b leading-[18px]"
 });
 var cellClassNames = cellClassNamesBase();
-var rowClasses = (0, import_tailwind_variants12.tv)({
+var rowClasses = (0, import_tailwind_variants13.tv)({
   extend: rowClassNamesBase,
   variants: {
     disabled: {
@@ -3284,7 +3311,7 @@ var rowClasses = (0, import_tailwind_variants12.tv)({
     }
   }
 });
-var bodyCellClasses = (0, import_tailwind_variants12.tv)({
+var bodyCellClasses = (0, import_tailwind_variants13.tv)({
   base: "py-5 typography-default",
   variants: {
     table: {
@@ -3298,7 +3325,7 @@ var bodyCellClasses = (0, import_tailwind_variants12.tv)({
     }
   }
 });
-var alignClasses = (0, import_tailwind_variants12.tv)({
+var alignClasses = (0, import_tailwind_variants13.tv)({
   variants: {
     align: {
       left: "",
@@ -3312,7 +3339,7 @@ var alignClasses = (0, import_tailwind_variants12.tv)({
     align: "undefined"
   }
 });
-var headCellClasses = (0, import_tailwind_variants12.tv)({
+var headCellClasses = (0, import_tailwind_variants13.tv)({
   base: "py-4 text-left border-muted text-muted whitespace-nowrap min-h-[40px] typography-small-strong",
   variants: {
     sticky: {
@@ -3338,7 +3365,7 @@ var headCellClasses = (0, import_tailwind_variants12.tv)({
     }
   ]
 });
-var sortCellButtonClasses = (0, import_tailwind_variants12.tv)({
+var sortCellButtonClasses = (0, import_tailwind_variants13.tv)({
   base: "group flex items-center gap-x-4 text-muted",
   variants: {
     align: {
@@ -3353,7 +3380,7 @@ var sortCellButtonClasses = (0, import_tailwind_variants12.tv)({
     align: "undefined"
   }
 });
-var sortCellIconClasses = (0, import_tailwind_variants12.tv)({
+var sortCellIconClasses = (0, import_tailwind_variants13.tv)({
   base: "text-[9px]",
   variants: {
     active: {
@@ -3362,7 +3389,7 @@ var sortCellIconClasses = (0, import_tailwind_variants12.tv)({
     }
   }
 });
-var sortCellIconsContainerClasses = (0, import_tailwind_variants12.tv)({
+var sortCellIconsContainerClasses = (0, import_tailwind_variants13.tv)({
   base: "flex flex-col",
   variants: {
     direction: {
@@ -3374,11 +3401,11 @@ var sortCellIconsContainerClasses = (0, import_tailwind_variants12.tv)({
   }
 });
 var Table = ({ children, ariaLabel, className, ...rest }) => {
-  return /* @__PURE__ */ import_react32.default.createElement("table", { ...rest, className: tableClasses({ className }), "aria-label": ariaLabel }, children);
+  return /* @__PURE__ */ import_react33.default.createElement("table", { ...rest, className: tableClasses({ className }), "aria-label": ariaLabel }, children);
 };
-var TableHead = ({ children, sticky, ...rest }) => /* @__PURE__ */ import_react32.default.createElement("thead", { ...rest }, /* @__PURE__ */ import_react32.default.createElement("tr", null, /* @__PURE__ */ import_react32.default.createElement(HeadContext.Provider, { value: { children, sticky } }, children)));
-var TableBody = ({ children, ...rest }) => /* @__PURE__ */ import_react32.default.createElement("tbody", { ...rest }, children);
-var TableRow = ({ children, className, disabled = false, ...rest }) => /* @__PURE__ */ import_react32.default.createElement(
+var TableHead = ({ children, sticky, ...rest }) => /* @__PURE__ */ import_react33.default.createElement("thead", { ...rest }, /* @__PURE__ */ import_react33.default.createElement("tr", null, /* @__PURE__ */ import_react33.default.createElement(HeadContext.Provider, { value: { children, sticky } }, children)));
+var TableBody = ({ children, ...rest }) => /* @__PURE__ */ import_react33.default.createElement("tbody", { ...rest }, children);
+var TableRow = ({ children, className, disabled = false, ...rest }) => /* @__PURE__ */ import_react33.default.createElement(
   "tr",
   {
     ...rest,
@@ -3390,10 +3417,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 = import_react32.default.forwardRef(
+var TableCell = import_react33.default.forwardRef(
   ({ children, className, stickyColumn, align = "left", ...rest }, ref) => {
-    const headContext = import_react32.default.useContext(HeadContext);
-    return headContext ? /* @__PURE__ */ import_react32.default.createElement(
+    const headContext = import_react33.default.useContext(HeadContext);
+    return headContext ? /* @__PURE__ */ import_react33.default.createElement(
       "th",
       {
         ...rest,
@@ -3406,7 +3433,7 @@ var TableCell = import_react32.default.forwardRef(
         )
       },
       children
-    ) : /* @__PURE__ */ import_react32.default.createElement(
+    ) : /* @__PURE__ */ import_react33.default.createElement(
       "td",
       {
         ...rest,
@@ -3423,25 +3450,25 @@ var TableCell = import_react32.default.forwardRef(
   }
 );
 var TableSelectCell = ({ ariaLabel, ...props }) => {
-  return /* @__PURE__ */ import_react32.default.createElement(Table.Cell, { className: "leading-[0px]" }, props.type === "radio" ? /* @__PURE__ */ import_react32.default.createElement(RadioButton, { "aria-label": ariaLabel, ...props }) : /* @__PURE__ */ import_react32.default.createElement(Checkbox, { "aria-label": ariaLabel, ...props }));
+  return /* @__PURE__ */ import_react33.default.createElement(Table.Cell, { className: "leading-[0px]" }, props.type === "radio" ? /* @__PURE__ */ import_react33.default.createElement(RadioButton, { "aria-label": ariaLabel, ...props }) : /* @__PURE__ */ import_react33.default.createElement(Checkbox, { "aria-label": ariaLabel, ...props }));
 };
 var getSortCellButtonClassNames = (align) => sortCellButtonClasses({ align });
 var getSortCellIconClassNames = (active) => sortCellIconClasses({ active });
-var TableSortCell = import_react32.default.forwardRef(
-  ({ children, direction = "none", onClick, ...rest }, ref) => /* @__PURE__ */ import_react32.default.createElement(Table.Cell, { ...rest, "aria-sort": direction, ref }, /* @__PURE__ */ import_react32.default.createElement("span", { className: getSortCellButtonClassNames(rest.align), role: "button", tabIndex: -1, onClick }, children, /* @__PURE__ */ import_react32.default.createElement("div", { "data-sort-icons": true, className: sortCellIconsContainerClasses({ direction }) }, /* @__PURE__ */ import_react32.default.createElement(InlineIcon2, { icon: chevronUp_default, className: getSortCellIconClassNames(direction === "ascending") }), /* @__PURE__ */ import_react32.default.createElement(InlineIcon2, { icon: chevronDown_default, className: getSortCellIconClassNames(direction === "descending") }))))
+var TableSortCell = import_react33.default.forwardRef(
+  ({ children, direction = "none", onClick, ...rest }, ref) => /* @__PURE__ */ import_react33.default.createElement(Table.Cell, { ...rest, "aria-sort": direction, ref }, /* @__PURE__ */ import_react33.default.createElement("span", { className: getSortCellButtonClassNames(rest.align), role: "button", tabIndex: -1, onClick }, children, /* @__PURE__ */ import_react33.default.createElement("div", { "data-sort-icons": true, className: sortCellIconsContainerClasses({ direction }) }, /* @__PURE__ */ import_react33.default.createElement(InlineIcon2, { icon: chevronUp_default, className: getSortCellIconClassNames(direction === "ascending") }), /* @__PURE__ */ import_react33.default.createElement(InlineIcon2, { icon: chevronDown_default, className: getSortCellIconClassNames(direction === "descending") }))))
 );
-var Caption = ({ children }) => /* @__PURE__ */ import_react32.default.createElement(Typography2.Small, { htmlTag: "caption" }, children);
-var Item = ({ image, imageAlt, imageSize = 35, title, caption }) => /* @__PURE__ */ import_react32.default.createElement("div", { className: "flex gap-4 items-center" }, image && /* @__PURE__ */ import_react32.default.createElement("img", { src: image, alt: imageAlt ?? "", style: { width: imageSize, height: imageSize } }), /* @__PURE__ */ import_react32.default.createElement("div", null, title, caption && /* @__PURE__ */ import_react32.default.createElement(Typography2.Small, null, caption)));
-Table.Head = import_react32.default.memo(TableHead);
-Table.Body = import_react32.default.memo(TableBody);
-Table.Row = import_react32.default.memo(TableRow);
-Table.Cell = import_react32.default.memo(TableCell);
-Table.SortCell = import_react32.default.memo(TableSortCell);
-Table.SelectCell = import_react32.default.memo(TableSelectCell);
+var Caption = ({ children }) => /* @__PURE__ */ import_react33.default.createElement(Typography2.Small, { htmlTag: "caption" }, children);
+var Item = ({ image, imageAlt, imageSize = 35, title, caption }) => /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex gap-4 items-center" }, image && /* @__PURE__ */ import_react33.default.createElement("img", { src: image, alt: imageAlt ?? "", style: { width: imageSize, height: imageSize } }), /* @__PURE__ */ import_react33.default.createElement("div", null, title, caption && /* @__PURE__ */ import_react33.default.createElement(Typography2.Small, null, caption)));
+Table.Head = import_react33.default.memo(TableHead);
+Table.Body = import_react33.default.memo(TableBody);
+Table.Row = import_react33.default.memo(TableRow);
+Table.Cell = import_react33.default.memo(TableCell);
+Table.SortCell = import_react33.default.memo(TableSortCell);
+Table.SelectCell = import_react33.default.memo(TableSelectCell);
 Table.Caption = Caption;
 
 // src/atoms/DataList/DataList.tsx
-var alignClasses2 = (0, import_tailwind_variants13.tv)({
+var alignClasses2 = (0, import_tailwind_variants14.tv)({
   base: "flex items-center",
   variants: {
     align: {
@@ -3456,10 +3483,10 @@ var alignClasses2 = (0, import_tailwind_variants13.tv)({
     align: "undefined"
   }
 });
-var treeLineClasses = (0, import_tailwind_variants13.tv)({
+var treeLineClasses = (0, import_tailwind_variants14.tv)({
   base: "flex justify-start h-full mx-4"
 });
-var treeLineInnerClasses = (0, import_tailwind_variants13.tv)({
+var treeLineInnerClasses = (0, import_tailwind_variants14.tv)({
   base: "border-l border-default border-dashed flex-1",
   variants: {
     isLast: {
@@ -3468,7 +3495,7 @@ var treeLineInnerClasses = (0, import_tailwind_variants13.tv)({
     }
   }
 });
-var rowClasses2 = (0, import_tailwind_variants13.tv)({
+var rowClasses2 = (0, import_tailwind_variants14.tv)({
   base: "contents",
   variants: {
     noDivider: {
@@ -3496,7 +3523,7 @@ var rowClasses2 = (0, import_tailwind_variants13.tv)({
     }
   ]
 });
-var subGroupSpacingClasses = (0, import_tailwind_variants13.tv)({
+var subGroupSpacingClasses = (0, import_tailwind_variants14.tv)({
   base: "col-span-full h-6 bg-muted border-default",
   variants: {
     divider: {
@@ -3505,7 +3532,7 @@ var subGroupSpacingClasses = (0, import_tailwind_variants13.tv)({
     }
   }
 });
-var sortCellIconsClasses = (0, import_tailwind_variants13.tv)({
+var sortCellIconsClasses = (0, import_tailwind_variants14.tv)({
   base: "flex flex-col",
   variants: {
     direction: {
@@ -3516,7 +3543,7 @@ var sortCellIconsClasses = (0, import_tailwind_variants13.tv)({
     }
   }
 });
-var toolbarContainerClasses = (0, import_tailwind_variants13.tv)({
+var toolbarContainerClasses = (0, import_tailwind_variants14.tv)({
   base: "col-span-full flex items-stretch py-4 px-l2 border-b border-muted",
   variants: {
     sticky: {
@@ -3525,27 +3552,27 @@ var toolbarContainerClasses = (0, import_tailwind_variants13.tv)({
     }
   }
 });
-var toolbarGroupClasses = (0, import_tailwind_variants13.tv)({
+var toolbarGroupClasses = (0, import_tailwind_variants14.tv)({
   base: "flex items-center px-l2 border-r-1 border-muted last:border-r-0"
 });
-var toolbarActionsClasses = (0, import_tailwind_variants13.tv)({
+var toolbarActionsClasses = (0, import_tailwind_variants14.tv)({
   base: "flex items-center gap-x-5"
 });
-var toolbarSelectionCountClasses = (0, import_tailwind_variants13.tv)({
+var toolbarSelectionCountClasses = (0, import_tailwind_variants14.tv)({
   base: "whitespace-nowrap"
 });
-var emptyGroupClasses = (0, import_tailwind_variants13.tv)({
+var emptyGroupClasses = (0, import_tailwind_variants14.tv)({
   base: "flex gap-3 items-center"
 });
-var DataList = ({ className, ...rest }) => /* @__PURE__ */ import_react33.default.createElement("div", { ...rest });
-var TreeLine = ({ className, style, isLast = false, ...rest }) => /* @__PURE__ */ import_react33.default.createElement("div", { ...rest, className: (0, import_clsx10.clsx)(treeLineClasses(), className) }, /* @__PURE__ */ import_react33.default.createElement("div", { className: treeLineInnerClasses({ isLast }) }), /* @__PURE__ */ import_react33.default.createElement("div", { className: "border-t border-default border-dashed self-center w-[18px]" }));
+var DataList = ({ className, ...rest }) => /* @__PURE__ */ import_react34.default.createElement("div", { ...rest });
+var TreeLine = ({ className, style, isLast = false, ...rest }) => /* @__PURE__ */ import_react34.default.createElement("div", { ...rest, className: (0, import_clsx10.clsx)(treeLineClasses(), className) }, /* @__PURE__ */ import_react34.default.createElement("div", { className: treeLineInnerClasses({ isLast }) }), /* @__PURE__ */ import_react34.default.createElement("div", { className: "border-t border-default border-dashed self-center w-[18px]" }));
 var HeadCell = ({
   className,
   sticky,
   align,
   stickyColumn,
   ...rest
-}) => /* @__PURE__ */ import_react33.default.createElement(
+}) => /* @__PURE__ */ import_react34.default.createElement(
   "div",
   {
     role: "columnheader",
@@ -3558,7 +3585,7 @@ var Cell = ({
   align,
   stickyColumn,
   ...rest
-}) => /* @__PURE__ */ import_react33.default.createElement(
+}) => /* @__PURE__ */ import_react34.default.createElement(
   "div",
   {
     ...rest,
@@ -3581,7 +3608,7 @@ var Row = ({
   noDivider = false,
   ...rest
 }) => {
-  return /* @__PURE__ */ import_react33.default.createElement(
+  return /* @__PURE__ */ import_react34.default.createElement(
     "div",
     {
       ...rest,
@@ -3599,9 +3626,9 @@ var Row = ({
     }
   );
 };
-var SubGroupSpacing = ({ className, divider = false, ...rest }) => /* @__PURE__ */ import_react33.default.createElement("span", { ...rest, "aria-hidden": true, className: (0, import_clsx10.clsx)(subGroupSpacingClasses({ divider }), className) });
-var SortCell = ({ children, direction = "none", onClick, sticky, ...rest }) => /* @__PURE__ */ import_react33.default.createElement(HeadCell, { ...rest, "aria-sort": direction, role: "columnheader", sticky }, /* @__PURE__ */ import_react33.default.createElement("span", { className: getSortCellButtonClassNames(rest.align), role: "button", tabIndex: -1, onClick }, children, /* @__PURE__ */ import_react33.default.createElement("div", { "data-sort-icons": true, className: sortCellIconsClasses({ direction }) }, /* @__PURE__ */ import_react33.default.createElement(InlineIcon2, { icon: chevronUp_default, className: getSortCellIconClassNames(direction === "ascending") }), /* @__PURE__ */ import_react33.default.createElement(InlineIcon2, { icon: chevronDown_default, className: getSortCellIconClassNames(direction === "descending") }))));
-var EmptyGroup = ({ icon, children }) => /* @__PURE__ */ import_react33.default.createElement("div", { className: emptyGroupClasses() }, icon && /* @__PURE__ */ import_react33.default.createElement(Icon2, { icon, width: 18 }), children);
+var SubGroupSpacing = ({ className, divider = false, ...rest }) => /* @__PURE__ */ import_react34.default.createElement("span", { ...rest, "aria-hidden": true, className: (0, import_clsx10.clsx)(subGroupSpacingClasses({ divider }), className) });
+var SortCell = ({ children, direction = "none", onClick, sticky, ...rest }) => /* @__PURE__ */ import_react34.default.createElement(HeadCell, { ...rest, "aria-sort": direction, role: "columnheader", sticky }, /* @__PURE__ */ import_react34.default.createElement("span", { className: getSortCellButtonClassNames(rest.align), role: "button", tabIndex: -1, onClick }, children, /* @__PURE__ */ import_react34.default.createElement("div", { "data-sort-icons": true, className: sortCellIconsClasses({ direction }) }, /* @__PURE__ */ import_react34.default.createElement(InlineIcon2, { icon: chevronUp_default, className: getSortCellIconClassNames(direction === "ascending") }), /* @__PURE__ */ import_react34.default.createElement(InlineIcon2, { icon: chevronDown_default, className: getSortCellIconClassNames(direction === "descending") }))));
+var EmptyGroup = ({ icon, children }) => /* @__PURE__ */ import_react34.default.createElement("div", { className: emptyGroupClasses() }, icon && /* @__PURE__ */ import_react34.default.createElement(Icon2, { icon, width: 18 }), children);
 DataList.EmptyGroup = EmptyGroup;
 DataList.EmptyGroup.displayName = "DataList.EmptyGroup";
 DataList.HeadCell = HeadCell;
@@ -3616,12 +3643,12 @@ DataList.Row = Row;
 DataList.Row.displayName = "DataList.Row";
 DataList.TreeLine = TreeLine;
 DataList.TreeLine.displayName = "DataList.TreeLine";
-var ToolbarContainer = ({ className, sticky = true, ...rest }) => /* @__PURE__ */ import_react33.default.createElement("div", { ...rest, role: "row", className: (0, import_clsx10.clsx)(toolbarContainerClasses({ sticky }), className) });
+var ToolbarContainer = ({ className, sticky = true, ...rest }) => /* @__PURE__ */ import_react34.default.createElement("div", { ...rest, role: "row", className: (0, import_clsx10.clsx)(toolbarContainerClasses({ sticky }), className) });
 ToolbarContainer.displayName = "DataList.Toolbar.Container";
-var ToolbarGroup = ({ className, ...rest }) => /* @__PURE__ */ import_react33.default.createElement("div", { role: "cell", ...rest, className: (0, import_clsx10.clsx)(toolbarGroupClasses(), className) });
+var ToolbarGroup = ({ className, ...rest }) => /* @__PURE__ */ import_react34.default.createElement("div", { role: "cell", ...rest, className: (0, import_clsx10.clsx)(toolbarGroupClasses(), className) });
 ToolbarGroup.displayName = "DataList.Toolbar.Group";
-var ToolbarSelectionCount = ({ className, ...rest }) => /* @__PURE__ */ import_react33.default.createElement(Typography, { variant: "default", color: "muted", className: (0, import_clsx10.clsx)(toolbarSelectionCountClasses(), className), ...rest });
-var ToolbarActions = ({ className, ...rest }) => /* @__PURE__ */ import_react33.default.createElement("div", { ...rest, className: (0, import_clsx10.clsx)(toolbarActionsClasses(), className) });
+var ToolbarSelectionCount = ({ className, ...rest }) => /* @__PURE__ */ import_react34.default.createElement(Typography, { variant: "default", color: "muted", className: (0, import_clsx10.clsx)(toolbarSelectionCountClasses(), className), ...rest });
+var ToolbarActions = ({ className, ...rest }) => /* @__PURE__ */ import_react34.default.createElement("div", { ...rest, className: (0, import_clsx10.clsx)(toolbarActionsClasses(), className) });
 ToolbarActions.displayName = "DataList.Toolbar.Actions";
 DataList.Toolbar = {
   Container: ToolbarContainer,
@@ -3631,7 +3658,7 @@ DataList.Toolbar = {
 };
 
 // src/atoms/Dialog/Dialog.tsx
-var import_react34 = __toESM(require("react"));
+var import_react35 = __toESM(require("react"));
 var import_react_aria_components = require("react-aria-components");
 
 // node_modules/tailwind-merge/dist/bundle-mjs.mjs
@@ -6110,7 +6137,7 @@ var DIALOG_ICONS_AND_COLORS = {
   }
 };
 var Dialog = (props) => {
-  return /* @__PURE__ */ import_react34.default.createElement(
+  return /* @__PURE__ */ import_react35.default.createElement(
     import_react_aria_components.Dialog,
     {
       ...props,
@@ -6120,20 +6147,20 @@ var Dialog = (props) => {
 };
 
 // src/atoms/DropdownMenu/DropdownMenu.tsx
-var import_react37 = __toESM(require("react"));
+var import_react38 = __toESM(require("react"));
 var import_react_aria_components2 = require("react-aria-components");
 var import_clsx12 = require("clsx");
-var import_tailwind_variants15 = require("tailwind-variants");
+var import_tailwind_variants16 = require("tailwind-variants");
 
 // src/molecules/Badge/Badge.tsx
-var import_react36 = __toESM(require("react"));
+var import_react37 = __toESM(require("react"));
 var import_clsx11 = require("clsx");
 
 // src/atoms/Skeleton/Skeleton.tsx
-var import_react35 = __toESM(require("react"));
+var import_react36 = __toESM(require("react"));
 var import_lodash_es8 = require("lodash-es");
-var import_tailwind_variants14 = require("tailwind-variants");
-var skeletonStyles = (0, import_tailwind_variants14.tv)({
+var import_tailwind_variants15 = require("tailwind-variants");
+var skeletonStyles = (0, import_tailwind_variants15.tv)({
   base: "bg-medium",
   variants: {
     hasHeight: {
@@ -6172,7 +6199,7 @@ var Skeleton = ({
     animate,
     className: ["Aquarium-Skeleton", className]
   });
-  return /* @__PURE__ */ import_react35.default.createElement("div", { "aria-label": "Loading...", ...rest, style: { ...styles, ...style }, role: "progressbar", className: classes });
+  return /* @__PURE__ */ import_react36.default.createElement("div", { "aria-label": "Loading...", ...rest, style: { ...styles, ...style }, role: "progressbar", className: classes });
 };
 
 // src/molecules/Badge/Badge.tsx
@@ -6180,7 +6207,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__ */ import_react36.default.createElement(
+    return /* @__PURE__ */ import_react37.default.createElement(
       "span",
       {
         ...rest,
@@ -6198,7 +6225,7 @@ var createBadge = (type, displayName) => {
           "Aquarium-Badge"
         )
       },
-      /* @__PURE__ */ import_react36.default.createElement(
+      /* @__PURE__ */ import_react37.default.createElement(
         "span",
         {
           className: (0, import_clsx11.clsx)(textClassname, "inline-block", {
@@ -6210,15 +6237,15 @@ var createBadge = (type, displayName) => {
     );
   };
   Component.displayName = displayName;
-  Component.Skeleton = () => /* @__PURE__ */ import_react36.default.createElement(Skeleton, { height: 16, width: 16, display: "inline-block", className: "rounded-full" });
+  Component.Skeleton = () => /* @__PURE__ */ import_react37.default.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__ */ import_react36.default.createElement("div", { ...props, className: (0, import_clsx11.clsx)("Aquarium-Badge.Notification relative inline-flex", className ?? "text-default") }, children, /* @__PURE__ */ import_react36.default.createElement("span", { style: { top, right }, className: "absolute rounded-full w-[6px] h-[6px] bg-danger-graphic" }));
+  return /* @__PURE__ */ import_react37.default.createElement("div", { ...props, className: (0, import_clsx11.clsx)("Aquarium-Badge.Notification relative inline-flex", className ?? "text-default") }, children, /* @__PURE__ */ import_react37.default.createElement("span", { style: { top, right }, className: "absolute rounded-full w-[6px] h-[6px] bg-danger-graphic" }));
 };
 var DotBadge = ({ dense = false, ...props }) => {
-  return /* @__PURE__ */ import_react36.default.createElement(
+  return /* @__PURE__ */ import_react37.default.createElement(
     "span",
     {
       ...props,
@@ -6238,17 +6265,17 @@ Badge.Dot.displayName = "Badge.Dot";
 var ChipBadge = createBadge("chip", "ChipBadge");
 
 // src/atoms/DropdownMenu/DropdownMenu.tsx
-var dropdownMenuStyles = (0, import_tailwind_variants15.tv)({
+var dropdownMenuStyles = (0, import_tailwind_variants16.tv)({
   base: "bg-overlay w-full flex flex-col overflow-x-hidden typography-default text-default"
 });
 var DropdownMenu = ({ className, children, ...props }) => {
-  return /* @__PURE__ */ import_react37.default.createElement(import_react_aria_components2.Menu, { className: dropdownMenuStyles({ className: ["Aquarium-DropdownMenu", className] }), ...props }, children);
+  return /* @__PURE__ */ import_react38.default.createElement(import_react_aria_components2.Menu, { className: dropdownMenuStyles({ className: ["Aquarium-DropdownMenu", className] }), ...props }, children);
 };
-var MenuContainer = ({ minHeight, maxHeight = "100%", minWidth = "125px", maxWidth, children }) => /* @__PURE__ */ import_react37.default.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__ */ import_react38.default.createElement("div", { style: { minHeight, maxHeight, minWidth, maxWidth }, className: "overflow-x-hidden flex flex-col" }, children);
 DropdownMenu.MenuContainer = MenuContainer;
-var ScrollableContentContainer = ({ children }) => /* @__PURE__ */ import_react37.default.createElement("div", { className: "p-3 overflow-y-auto overflow-x-hidden" }, children);
+var ScrollableContentContainer = ({ children }) => /* @__PURE__ */ import_react38.default.createElement("div", { className: "p-3 overflow-y-auto overflow-x-hidden" }, children);
 DropdownMenu.ScrollableContentContainer = ScrollableContentContainer;
-var dropdownMenuGroupStyles = (0, import_tailwind_variants15.tv)({
+var dropdownMenuGroupStyles = (0, import_tailwind_variants16.tv)({
   slots: {
     base: [
       '[&:not(:first-child)]:before:content-[""] [&:not(:first-child)]:before:block',
@@ -6259,10 +6286,10 @@ var dropdownMenuGroupStyles = (0, import_tailwind_variants15.tv)({
 });
 var Group = ({ className, title, titleProps, children, ...props }) => {
   const styles = dropdownMenuGroupStyles();
-  return /* @__PURE__ */ import_react37.default.createElement(import_react_aria_components2.MenuSection, { className: styles.base({ className: "Aquarium-DropdownMenu.Group" }), ...props }, title && /* @__PURE__ */ import_react37.default.createElement(import_react_aria_components2.Header, { className: styles.title(), ...titleProps }, title), /* @__PURE__ */ import_react37.default.createElement(import_react_aria_components2.Collection, null, children));
+  return /* @__PURE__ */ import_react38.default.createElement(import_react_aria_components2.MenuSection, { className: styles.base({ className: "Aquarium-DropdownMenu.Group" }), ...props }, title && /* @__PURE__ */ import_react38.default.createElement(import_react_aria_components2.Header, { className: styles.title(), ...titleProps }, title), /* @__PURE__ */ import_react38.default.createElement(import_react_aria_components2.Collection, null, children));
 };
 DropdownMenu.Group = Group;
-var dropdownMenuItemStyles = (0, import_tailwind_variants15.tv)({
+var dropdownMenuItemStyles = (0, import_tailwind_variants16.tv)({
   base: "group flex items-center gap-x-3 p-3 outline-none cursor-pointer",
   variants: {
     isDisabled: {
@@ -6298,29 +6325,29 @@ var Item2 = ({
   showNotification = false,
   disabled,
   ...props
-}) => /* @__PURE__ */ import_react37.default.createElement(
+}) => /* @__PURE__ */ import_react38.default.createElement(
   import_react_aria_components2.MenuItem,
   {
     className: (values) => dropdownMenuItemStyles({ ...values, kind, className: ["Aquarium-DropdownMenu.Item", className] }),
     isDisabled: disabled,
     ...props
   },
-  (0, import_react_aria_components2.composeRenderProps)(props.children, (children, { selectionMode, isSelected, isDisabled }) => /* @__PURE__ */ import_react37.default.createElement(import_react37.default.Fragment, null, icon && showNotification && /* @__PURE__ */ import_react37.default.createElement(Badge.Notification, null, /* @__PURE__ */ import_react37.default.createElement(InlineIcon2, { icon })), icon && !showNotification && /* @__PURE__ */ import_react37.default.createElement(InlineIcon2, { icon }), /* @__PURE__ */ import_react37.default.createElement("span", { className: "grow" }, children, description && /* @__PURE__ */ import_react37.default.createElement(Typography2.Small, { color: isDisabled ? "inactive" : "muted" }, description)), selectionMode !== "none" && isSelected && /* @__PURE__ */ import_react37.default.createElement(InlineIcon2, { icon: tick_default })))
+  (0, import_react_aria_components2.composeRenderProps)(props.children, (children, { selectionMode, isSelected, isDisabled }) => /* @__PURE__ */ import_react38.default.createElement(import_react38.default.Fragment, null, icon && showNotification && /* @__PURE__ */ import_react38.default.createElement(Badge.Notification, null, /* @__PURE__ */ import_react38.default.createElement(InlineIcon2, { icon })), icon && !showNotification && /* @__PURE__ */ import_react38.default.createElement(InlineIcon2, { icon }), /* @__PURE__ */ import_react38.default.createElement("span", { className: "grow" }, children, description && /* @__PURE__ */ import_react38.default.createElement(Typography2.Small, { color: isDisabled ? "inactive" : "muted" }, description)), selectionMode !== "none" && isSelected && /* @__PURE__ */ import_react38.default.createElement(InlineIcon2, { icon: tick_default })))
 );
 DropdownMenu.Item = Item2;
-var EmptyStateContainer = ({ className, children, ...props }) => /* @__PURE__ */ import_react37.default.createElement("div", { className: (0, import_clsx12.clsx)("border border-dashed border-default p-3", className), ...props }, children);
+var EmptyStateContainer = ({ className, children, ...props }) => /* @__PURE__ */ import_react38.default.createElement("div", { className: (0, import_clsx12.clsx)("border border-dashed border-default p-3", className), ...props }, children);
 DropdownMenu.EmptyStateContainer = EmptyStateContainer;
 
 // src/atoms/Filter/Filter.tsx
-var import_react38 = __toESM(require("react"));
+var import_react39 = __toESM(require("react"));
 var import_react_aria_components3 = require("react-aria-components");
 var import_clsx13 = require("clsx");
-var import_tailwind_variants16 = require("tailwind-variants");
+var import_tailwind_variants17 = require("tailwind-variants");
 var DATE_FORMAT_OPTIONS = {
   locale: "en-GB",
   options: { day: "numeric", month: "numeric", year: "numeric" }
 };
-var filterWrapper = (0, import_tailwind_variants16.tv)({
+var filterWrapper = (0, import_tailwind_variants17.tv)({
   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: {
@@ -6348,8 +6375,8 @@ var FilterTrigger = ({
   clearSelectionEnabled = true,
   ...props
 }) => {
-  const ariaDatePickerState = import_react38.default.useContext(import_react_aria_components3.DatePickerStateContext);
-  const ariaDateRangePickerState = import_react38.default.useContext(import_react_aria_components3.DateRangePickerStateContext);
+  const ariaDatePickerState = import_react39.default.useContext(import_react_aria_components3.DatePickerStateContext);
+  const ariaDateRangePickerState = import_react39.default.useContext(import_react_aria_components3.DateRangePickerStateContext);
   const isUsedInsideDatePicker = !!ariaDatePickerState?.value;
   const isUsedInsideDateRangePicker = !!ariaDateRangePickerState?.value.start && !!ariaDateRangePickerState.value.end;
   const onClearDatePickerRelated = () => {
@@ -6361,14 +6388,14 @@ var FilterTrigger = ({
   };
   const hasValue = !!value || isUsedInsideDatePicker || isUsedInsideDateRangePicker;
   const showClearButton = clearSelectionEnabled && (!!onClear && !!value || isUsedInsideDatePicker || isUsedInsideDateRangePicker);
-  return /* @__PURE__ */ import_react38.default.createElement(
+  return /* @__PURE__ */ import_react39.default.createElement(
     import_react_aria_components3.Group,
     {
       ...props,
       isInvalid: error,
       className: (renderProps) => filterWrapper({ ...renderProps, hasValue: hasValue || !!badge })
     },
-    /* @__PURE__ */ import_react38.default.createElement(import_react38.default.Fragment, null, /* @__PURE__ */ import_react38.default.createElement(
+    /* @__PURE__ */ import_react39.default.createElement(import_react39.default.Fragment, null, /* @__PURE__ */ import_react39.default.createElement(
       import_react_aria_components3.Button,
       {
         onPress: () => {
@@ -6380,7 +6407,7 @@ var FilterTrigger = ({
           "px-4": !showClearButton
         })
       },
-      /* @__PURE__ */ import_react38.default.createElement("div", { className: "flex items-center gap-3 divide-x divide-grey-20" }, /* @__PURE__ */ import_react38.default.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ import_react38.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ import_react38.default.createElement(InlineIcon2, { icon }), /* @__PURE__ */ import_react38.default.createElement(Typography2.Default, null, labelText)), badge && /* @__PURE__ */ import_react38.default.createElement(Typography2, { color: "primary-default", className: "flex items-center" }, /* @__PURE__ */ import_react38.default.createElement(Badge, { dense: true, value: badge }))), hasValue && /* @__PURE__ */ import_react38.default.createElement("div", { className: "pl-3" }, /* @__PURE__ */ import_react38.default.createElement(
+      /* @__PURE__ */ import_react39.default.createElement("div", { className: "flex items-center gap-3 divide-x divide-grey-20" }, /* @__PURE__ */ import_react39.default.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ import_react39.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ import_react39.default.createElement(InlineIcon2, { icon }), /* @__PURE__ */ import_react39.default.createElement(Typography2.Default, null, labelText)), badge && /* @__PURE__ */ import_react39.default.createElement(Typography2, { color: "primary-default", className: "flex items-center" }, /* @__PURE__ */ import_react39.default.createElement(Badge, { dense: true, value: badge }))), hasValue && /* @__PURE__ */ import_react39.default.createElement("div", { className: "pl-3" }, /* @__PURE__ */ import_react39.default.createElement(
         Typography2.Default,
         {
           className: (0, import_clsx13.clsx)("truncate", {
@@ -6391,10 +6418,10 @@ var FilterTrigger = ({
           color: error ? "danger-default" : "primary-default"
         },
         value,
-        isUsedInsideDatePicker && /* @__PURE__ */ import_react38.default.createElement(DateDisplay, { state: ariaDatePickerState }),
-        isUsedInsideDateRangePicker && /* @__PURE__ */ import_react38.default.createElement(DateDisplay, { state: ariaDateRangePickerState })
+        isUsedInsideDatePicker && /* @__PURE__ */ import_react39.default.createElement(DateDisplay, { state: ariaDatePickerState }),
+        isUsedInsideDateRangePicker && /* @__PURE__ */ import_react39.default.createElement(DateDisplay, { state: ariaDateRangePickerState })
       )))
-    ), showClearButton && /* @__PURE__ */ import_react38.default.createElement(
+    ), showClearButton && /* @__PURE__ */ import_react39.default.createElement(
       FilterClearButton,
       {
         onClear: () => {
@@ -6411,11 +6438,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__ */ import_react38.default.createElement(Box.Flex, { gap: "2" }, /* @__PURE__ */ import_react38.default.createElement("span", null, primary), secondary && /* @__PURE__ */ import_react38.default.createElement(import_react38.default.Fragment, null, /* @__PURE__ */ import_react38.default.createElement("span", { "aria-hidden": true, className: "text-muted" }, "-"), /* @__PURE__ */ import_react38.default.createElement("span", null, secondary)));
+  return /* @__PURE__ */ import_react39.default.createElement(Box.Flex, { gap: "2" }, /* @__PURE__ */ import_react39.default.createElement("span", null, primary), secondary && /* @__PURE__ */ import_react39.default.createElement(import_react39.default.Fragment, null, /* @__PURE__ */ import_react39.default.createElement("span", { "aria-hidden": true, className: "text-muted" }, "-"), /* @__PURE__ */ import_react39.default.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__ */ import_react38.default.createElement(
+  /* @__PURE__ */ import_react39.default.createElement(
     "button",
     {
       "aria-label": "Clear filter",
@@ -6430,7 +6457,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__ */ import_react38.default.createElement(InlineIcon2, { icon: cross_default })
+    /* @__PURE__ */ import_react39.default.createElement(InlineIcon2, { icon: cross_default })
   )
 );
 var Filter = () => null;
@@ -6438,14 +6465,14 @@ FilterTrigger.displayName = "Filter.Trigger";
 Filter.Trigger = FilterTrigger;
 
 // src/atoms/InputGroup/InputGroup.tsx
-var import_react41 = __toESM(require("react"));
+var import_react42 = __toESM(require("react"));
 
 // src/molecules/Grid/Grid.tsx
-var import_react40 = __toESM(require("react"));
+var import_react41 = __toESM(require("react"));
 var import_lodash_es10 = require("lodash-es");
 
 // src/molecules/Tailwindify/Tailwindify.tsx
-var import_react39 = __toESM(require("react"));
+var import_react40 = __toESM(require("react"));
 var import_lodash_es9 = require("lodash-es");
 function Tailwindify(Component) {
   return ({
@@ -6506,8 +6533,8 @@ function Tailwindify(Component) {
       ...otherProps,
       style: finalStyle
     };
-    const childrenWithProps = import_react39.default.Children.map(children, (child, index) => {
-      if (!import_react39.default.isValidElement(child)) {
+    const childrenWithProps = import_react40.default.Children.map(children, (child, index) => {
+      if (!import_react40.default.isValidElement(child)) {
         return child;
       }
       const isLastChild = index === children.length - 1;
@@ -6528,9 +6555,9 @@ function Tailwindify(Component) {
       }
       const childStyle = (0, import_lodash_es9.get)(child, ["props", "style"], {});
       const newProps = { ...childProps, style: { ...childStyle, ...additionalStyle } };
-      return import_react39.default.cloneElement(child, newProps);
+      return import_react40.default.cloneElement(child, newProps);
     });
-    return /* @__PURE__ */ import_react39.default.createElement(Component, { className, ...componentProps }, childrenWithProps);
+    return /* @__PURE__ */ import_react40.default.createElement(Component, { className, ...componentProps }, childrenWithProps);
   };
 }
 
@@ -6569,7 +6596,7 @@ var GridItem = Tailwindify(
       gridRowEnd: rowEnd
     });
     const HtmlElement = htmlTag;
-    return /* @__PURE__ */ import_react40.default.createElement(
+    return /* @__PURE__ */ import_react41.default.createElement(
       HtmlElement,
       {
         style: { ...hookStyle, ...style },
@@ -6581,7 +6608,7 @@ var GridItem = Tailwindify(
   }
 );
 var Grid = (props) => {
-  return /* @__PURE__ */ import_react40.default.createElement(GridComponent, { ...props });
+  return /* @__PURE__ */ import_react41.default.createElement(GridComponent, { ...props });
 };
 var GridComponent = Tailwindify(
   ({
@@ -6636,7 +6663,7 @@ var GridComponent = Tailwindify(
       gridRowEnd: rowEnd
     });
     const HtmlElement = htmlTag;
-    return /* @__PURE__ */ import_react40.default.createElement(
+    return /* @__PURE__ */ import_react41.default.createElement(
       HtmlElement,
       {
         style: { ...hookStyle, ...style },
@@ -6659,7 +6686,7 @@ var gridColumnStyles = {
   "auto": "auto-cols-fr"
 };
 var InputGroup = ({ cols = "1", children, ...rest }) => {
-  return /* @__PURE__ */ import_react41.default.createElement(
+  return /* @__PURE__ */ import_react42.default.createElement(
     Grid,
     {
       ...rest,
@@ -6674,9 +6701,9 @@ var InputGroup = ({ cols = "1", children, ...rest }) => {
 };
 
 // src/atoms/Modal/Modal.tsx
-var import_react42 = __toESM(require("react"));
-var import_tailwind_variants17 = require("tailwind-variants");
-var bodyMaskClasses = (0, import_tailwind_variants17.tv)({
+var import_react43 = __toESM(require("react"));
+var import_tailwind_variants18 = require("tailwind-variants");
+var bodyMaskClasses = (0, import_tailwind_variants18.tv)({
   variants: {
     position: {
       before: [
@@ -6708,7 +6735,7 @@ var bodyMaskClasses = (0, import_tailwind_variants17.tv)({
     }
   }
 });
-var modalStyles = (0, import_tailwind_variants17.tv)({
+var modalStyles = (0, import_tailwind_variants18.tv)({
   slots: {
     overlay: "inset-0 overflow-y-auto z-modal fixed",
     backdrop: "-z-10 fixed min-w-full min-h-full bg-backdrop",
@@ -6720,7 +6747,7 @@ var modalStyles = (0, import_tailwind_variants17.tv)({
     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" })
     ],
@@ -6844,59 +6871,59 @@ var Modal = ({
   ...rest
 }) => {
   const { overlay } = modalStyles({ kind });
-  return open ? /* @__PURE__ */ import_react42.default.createElement("div", { ...rest, className: overlay({ className }) }, children) : null;
+  return open ? /* @__PURE__ */ import_react43.default.createElement("div", { ...rest, className: overlay({ className }) }, children) : null;
 };
 Modal.BackDrop = ({ className, ...rest }) => {
   const { backdrop } = modalStyles();
-  return /* @__PURE__ */ import_react42.default.createElement("div", { ...rest, className: backdrop({ className }) });
+  return /* @__PURE__ */ import_react43.default.createElement("div", { ...rest, className: backdrop({ className }) });
 };
-Modal.Dialog = import_react42.default.forwardRef(
+Modal.Dialog = import_react43.default.forwardRef(
   ({ kind = "dialog", children, className, size = "md", isResponsive = true, ...rest }, ref) => {
     const { dialog } = modalStyles({ kind, size, isResponsive });
-    return /* @__PURE__ */ import_react42.default.createElement("div", { ref, "aria-modal": "true", ...rest, className: dialog({ className }) }, children);
+    return /* @__PURE__ */ import_react43.default.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__ */ import_react42.default.createElement("div", { ...rest, className: header({ className }) }, children);
+  return /* @__PURE__ */ import_react43.default.createElement("div", { ...rest, className: header({ className }) }, children);
 };
 Modal.HeaderImage = ({ backgroundImage, className, ...rest }) => {
   const { headerImage } = modalStyles({ backgroundImage: Boolean(backgroundImage) });
-  return backgroundImage ? /* @__PURE__ */ import_react42.default.createElement("img", { "aria-hidden": true, src: backgroundImage, ...rest, className: headerImage({ className }) }) : /* @__PURE__ */ import_react42.default.createElement("div", { className: headerImage({ className }) });
+  return backgroundImage ? /* @__PURE__ */ import_react43.default.createElement("img", { "aria-hidden": true, src: backgroundImage, ...rest, className: headerImage({ className }) }) : /* @__PURE__ */ import_react43.default.createElement("div", { className: headerImage({ className }) });
 };
 Modal.CloseButtonContainer = ({ className, ...rest }) => {
   const { closeButtonContainer } = modalStyles();
-  return /* @__PURE__ */ import_react42.default.createElement("div", { ...rest, className: closeButtonContainer({ className }) });
+  return /* @__PURE__ */ import_react43.default.createElement("div", { ...rest, className: closeButtonContainer({ className }) });
 };
 Modal.Title = ({ kind = "dialog", children, className, ...rest }) => {
   const { title } = modalStyles({ kind });
-  return /* @__PURE__ */ import_react42.default.createElement(Typography, { htmlTag: "h2", variant: "subheading", color: "intense", className: title({ className }), ...rest }, children);
+  return /* @__PURE__ */ import_react43.default.createElement(Typography, { htmlTag: "h2", variant: "subheading", color: "intense", className: title({ className }), ...rest }, children);
 };
 Modal.Subtitle = ({ children, className, ...rest }) => {
   const { subtitle } = modalStyles();
-  return /* @__PURE__ */ import_react42.default.createElement(Typography, { variant: "default", color: "muted", className: subtitle({ className }), ...rest }, children);
+  return /* @__PURE__ */ import_react43.default.createElement(Typography, { variant: "default", color: "muted", className: subtitle({ className }), ...rest }, children);
 };
 Modal.TitleContainer = ({ children, className, ...rest }) => {
   const { titleContainer: titleContainer2 } = modalStyles();
-  return /* @__PURE__ */ import_react42.default.createElement("div", { ...rest, className: titleContainer2({ className }) }, children);
+  return /* @__PURE__ */ import_react43.default.createElement("div", { ...rest, className: titleContainer2({ className }) }, children);
 };
 Modal.Body = ({ children, className, noFooter = false, maxHeight, style, size, ...rest }) => {
   const { body, bodyContent } = modalStyles({ size });
-  return /* @__PURE__ */ import_react42.default.createElement("div", { ...rest, className: body({ className }), style: { maxHeight, ...style } }, /* @__PURE__ */ import_react42.default.createElement("div", { className: bodyContent({ noFooter }) }, children));
+  return /* @__PURE__ */ import_react43.default.createElement("div", { ...rest, className: body({ className }), style: { maxHeight, ...style } }, /* @__PURE__ */ import_react43.default.createElement("div", { className: bodyContent({ noFooter }) }, children));
 };
 Modal.Footer = ({ children, className, ...rest }) => {
   const { footer } = modalStyles();
-  return /* @__PURE__ */ import_react42.default.createElement("div", { ...rest, className: footer({ className }) }, children);
+  return /* @__PURE__ */ import_react43.default.createElement("div", { ...rest, className: footer({ className }) }, children);
 };
 Modal.Actions = ({ children, className, ...rest }) => {
   const { actions: actions2 } = modalStyles();
-  return /* @__PURE__ */ import_react42.default.createElement("div", { ...rest, className: actions2({ className }) }, children);
+  return /* @__PURE__ */ import_react43.default.createElement("div", { ...rest, className: actions2({ className }) }, children);
 };
 
 // src/atoms/Navigation/Navigation.tsx
-var import_react43 = __toESM(require("react"));
-var import_tailwind_variants18 = require("tailwind-variants");
-var navigationClasses = (0, import_tailwind_variants18.tv)({
+var import_react44 = __toESM(require("react"));
+var import_tailwind_variants19 = require("tailwind-variants");
+var navigationClasses = (0, import_tailwind_variants19.tv)({
   slots: {
     nav: "bg-body h-full border-r border-muted",
     list: "flex flex-col h-full",
@@ -6933,35 +6960,35 @@ var Navigation = ({
   ...rest
 }) => {
   const { nav, list } = navigationClasses();
-  return /* @__PURE__ */ import_react43.default.createElement("nav", { className: nav(), "aria-label": ariaLabel }, /* @__PURE__ */ import_react43.default.createElement("ul", { ...rest, className: list({ className }), role: "menubar" }, children));
+  return /* @__PURE__ */ import_react44.default.createElement("nav", { className: nav(), "aria-label": ariaLabel }, /* @__PURE__ */ import_react44.default.createElement("ul", { ...rest, className: list({ className }), role: "menubar" }, children));
 };
 var Header = ({ className, ...rest }) => {
   const { header } = navigationClasses();
-  return /* @__PURE__ */ import_react43.default.createElement("li", { ...rest, role: "presentation", className: header({ className }) });
+  return /* @__PURE__ */ import_react44.default.createElement("li", { ...rest, role: "presentation", className: header({ className }) });
 };
 var Title2 = ({ className, ...props }) => {
   const { headerTitle } = navigationClasses();
-  return /* @__PURE__ */ import_react43.default.createElement(Typography, { variant: "small", className: headerTitle({ className }), ...props });
+  return /* @__PURE__ */ import_react44.default.createElement(Typography, { variant: "small", className: headerTitle({ className }), ...props });
 };
 var Subtitle = ({ className, ...props }) => {
   const { headerSubtitle } = navigationClasses();
-  return /* @__PURE__ */ import_react43.default.createElement(Typography, { variant: "default-strong", className: headerSubtitle({ className }), ...props });
+  return /* @__PURE__ */ import_react44.default.createElement(Typography, { variant: "default-strong", className: headerSubtitle({ className }), ...props });
 };
 var Footer = ({ className, ...rest }) => {
   const { footer } = navigationClasses();
-  return /* @__PURE__ */ import_react43.default.createElement("li", { ...rest, role: "presentation", className: footer({ className }) });
+  return /* @__PURE__ */ import_react44.default.createElement("li", { ...rest, role: "presentation", className: footer({ className }) });
 };
 var Section = ({ title, className, ...rest }) => {
   const { sectionContainer, sectionTitle, sectionList } = navigationClasses();
-  return /* @__PURE__ */ import_react43.default.createElement("li", { role: "presentation", className: sectionContainer() }, title && /* @__PURE__ */ import_react43.default.createElement("div", { className: sectionTitle({ className }) }, title), /* @__PURE__ */ import_react43.default.createElement("ul", { ...rest, role: "group", className: sectionList({ className }) }));
+  return /* @__PURE__ */ import_react44.default.createElement("li", { role: "presentation", className: sectionContainer() }, title && /* @__PURE__ */ import_react44.default.createElement("div", { className: sectionTitle({ className }) }, title), /* @__PURE__ */ import_react44.default.createElement("ul", { ...rest, role: "group", className: sectionList({ className }) }));
 };
 var Divider = ({ className, ...rest }) => {
   const { divider } = navigationClasses();
-  return /* @__PURE__ */ import_react43.default.createElement("li", { "aria-hidden": true, ...rest, className: divider({ className }) });
+  return /* @__PURE__ */ import_react44.default.createElement("li", { "aria-hidden": true, ...rest, className: divider({ className }) });
 };
 var Item3 = ({ className, active = false, ...rest }) => {
   const { itemContainer, itemAnchor } = navigationClasses({ active });
-  return /* @__PURE__ */ import_react43.default.createElement("li", { role: "presentation", className: itemContainer() }, /* @__PURE__ */ import_react43.default.createElement("a", { ...rest, role: "menuitem", className: itemAnchor({ className }) }));
+  return /* @__PURE__ */ import_react44.default.createElement("li", { role: "presentation", className: itemContainer() }, /* @__PURE__ */ import_react44.default.createElement("a", { ...rest, role: "menuitem", className: itemAnchor({ className }) }));
 };
 var Submenu = ({
   children,
@@ -6971,11 +6998,11 @@ var Submenu = ({
   ...rest
 }) => {
   const { submenuContainer, submenuAnchor, submenuList } = navigationClasses();
-  return /* @__PURE__ */ import_react43.default.createElement("li", { role: "presentation", className: submenuContainer() }, /* @__PURE__ */ import_react43.default.createElement("a", { role: "menuitem", "aria-haspopup": "true", href: "#", id, className: submenuAnchor({ className }), ...rest }, title), /* @__PURE__ */ import_react43.default.createElement("ul", { role: "menu", className: submenuList(), "aria-labelledby": id }, children));
+  return /* @__PURE__ */ import_react44.default.createElement("li", { role: "presentation", className: submenuContainer() }, /* @__PURE__ */ import_react44.default.createElement("a", { role: "menuitem", "aria-haspopup": "true", href: "#", id, className: submenuAnchor({ className }), ...rest }, title), /* @__PURE__ */ import_react44.default.createElement("ul", { role: "menu", className: submenuList(), "aria-labelledby": id }, children));
 };
 var SubmenuItem = ({ className, active, ...rest }) => {
   const { submenuItem } = navigationClasses();
-  return /* @__PURE__ */ import_react43.default.createElement(Navigation.Item, { ...rest, active, className: submenuItem({ className }) });
+  return /* @__PURE__ */ import_react44.default.createElement(Navigation.Item, { ...rest, active, className: submenuItem({ className }) });
 };
 Header.Title = Title2;
 Header.Subtitle = Subtitle;
@@ -6988,9 +7015,9 @@ Navigation.Submenu = Submenu;
 Navigation.Divider = Divider;
 
 // src/atoms/PageHeader/PageHeader.tsx
-var import_react44 = __toESM(require("react"));
-var import_tailwind_variants19 = require("tailwind-variants");
-var pageHeaderStyles = (0, import_tailwind_variants19.tv)({
+var import_react45 = __toESM(require("react"));
+var import_tailwind_variants20 = require("tailwind-variants");
+var pageHeaderStyles = (0, import_tailwind_variants20.tv)({
   slots: {
     base: "flex flex-row flex-wrap gap-4 pb-6",
     container: "flex flex-col flex-1 gap-3 basis-[--aquarium-screens-xs]",
@@ -7000,10 +7027,10 @@ var pageHeaderStyles = (0, import_tailwind_variants19.tv)({
   }
 });
 var { base, container, titleContainer, chips, actions } = pageHeaderStyles();
-var PageHeader = ({ children, className, ...rest }) => /* @__PURE__ */ import_react44.default.createElement("div", { className: base({ className }), ...rest }, children);
-PageHeader.Container = ({ children, className, ...rest }) => /* @__PURE__ */ import_react44.default.createElement("div", { className: container({ className }), ...rest }, children);
-PageHeader.TitleContainer = ({ children, className, ...rest }) => /* @__PURE__ */ import_react44.default.createElement("div", { className: titleContainer({ className }), ...rest }, children);
-PageHeader.Title = ({ isSubHeader = false, children, ...rest }) => /* @__PURE__ */ import_react44.default.createElement(
+var PageHeader = ({ children, className, ...rest }) => /* @__PURE__ */ import_react45.default.createElement("div", { className: base({ className }), ...rest }, children);
+PageHeader.Container = ({ children, className, ...rest }) => /* @__PURE__ */ import_react45.default.createElement("div", { className: container({ className }), ...rest }, children);
+PageHeader.TitleContainer = ({ children, className, ...rest }) => /* @__PURE__ */ import_react45.default.createElement("div", { className: titleContainer({ className }), ...rest }, children);
+PageHeader.Title = ({ isSubHeader = false, children, ...rest }) => /* @__PURE__ */ import_react45.default.createElement(
   Typography2,
   {
     ...rest,
@@ -7013,22 +7040,22 @@ PageHeader.Title = ({ isSubHeader = false, children, ...rest }) => /* @__PURE__
   },
   children
 );
-PageHeader.Subtitle = ({ children, ...rest }) => /* @__PURE__ */ import_react44.default.createElement(Typography2.Default, { ...rest, color: "default" }, children);
-PageHeader.Chips = ({ children, className, ...rest }) => /* @__PURE__ */ import_react44.default.createElement("div", { className: chips({ className }), ...rest }, children);
-PageHeader.Actions = ({ children, className, ...rest }) => /* @__PURE__ */ import_react44.default.createElement("div", { className: actions({ className }), ...rest }, children);
+PageHeader.Subtitle = ({ children, ...rest }) => /* @__PURE__ */ import_react45.default.createElement(Typography2.Default, { ...rest, color: "default" }, children);
+PageHeader.Chips = ({ children, className, ...rest }) => /* @__PURE__ */ import_react45.default.createElement("div", { className: chips({ className }), ...rest }, children);
+PageHeader.Actions = ({ children, className, ...rest }) => /* @__PURE__ */ import_react45.default.createElement("div", { className: actions({ className }), ...rest }, children);
 
 // src/atoms/Popover/Popover.tsx
-var import_react45 = __toESM(require("react"));
+var import_react46 = __toESM(require("react"));
 var import_react_aria_components4 = require("react-aria-components");
-var import_tailwind_variants20 = require("tailwind-variants");
-var popoverStyles = (0, import_tailwind_variants20.tv)({
+var import_tailwind_variants21 = require("tailwind-variants");
+var popoverStyles = (0, import_tailwind_variants21.tv)({
   // 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 = import_react45.default.forwardRef(
+var Popover = import_react46.default.forwardRef(
   ({ children, offset = 0, className, placement: _placement = "bottom-left", ...props }, ref) => {
     const placement = _placement.replace("-", " ");
-    return /* @__PURE__ */ import_react45.default.createElement(
+    return /* @__PURE__ */ import_react46.default.createElement(
       import_react_aria_components4.Popover,
       {
         ref,
@@ -7044,7 +7071,7 @@ var Popover = import_react45.default.forwardRef(
     );
   }
 );
-var PopoverArrow = () => /* @__PURE__ */ import_react45.default.createElement(import_react_aria_components4.OverlayArrow, { className: "group" }, /* @__PURE__ */ import_react45.default.createElement(
+var PopoverArrow = () => /* @__PURE__ */ import_react46.default.createElement(import_react_aria_components4.OverlayArrow, { className: "group" }, /* @__PURE__ */ import_react46.default.createElement(
   "svg",
   {
     width: 12,
@@ -7052,19 +7079,19 @@ var PopoverArrow = () => /* @__PURE__ */ import_react45.default.createElement(im
     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__ */ import_react45.default.createElement("path", { d: "M0 0 L6 6 L12 0" })
+  /* @__PURE__ */ import_react46.default.createElement("path", { d: "M0 0 L6 6 L12 0" })
 ));
 PopoverArrow.displayName = "Popover.Arrow";
 Popover.Arrow = PopoverArrow;
 
 // src/atoms/PopoverDialog/PopoverDialog.tsx
-var import_react46 = __toESM(require("react"));
+var import_react47 = __toESM(require("react"));
 var import_clsx14 = require("clsx");
-var Header2 = ({ children, className, ...rest }) => /* @__PURE__ */ import_react46.default.createElement("div", { ...rest, className: (0, import_clsx14.clsx)("p-5 gap-3 flex items-center", className) }, children);
-var Title3 = ({ children, className, ...rest }) => /* @__PURE__ */ import_react46.default.createElement(Typography, { ...rest, htmlTag: "h1", variant: "default-strong" }, children);
-var Body = ({ children, className, ...rest }) => /* @__PURE__ */ import_react46.default.createElement(Typography, { ...rest, htmlTag: "div", variant: "small", className: (0, import_clsx14.clsx)("px-5 overflow-y-auto", className) }, children);
-var Footer2 = ({ children, className, ...rest }) => /* @__PURE__ */ import_react46.default.createElement("div", { ...rest, className: (0, import_clsx14.clsx)("p-5", className) }, children);
-var Actions2 = ({ children, className, ...rest }) => /* @__PURE__ */ import_react46.default.createElement("div", { ...rest, className: (0, import_clsx14.clsx)("flex gap-4", className) }, children);
+var Header2 = ({ children, className, ...rest }) => /* @__PURE__ */ import_react47.default.createElement("div", { ...rest, className: (0, import_clsx14.clsx)("p-5 gap-3 flex items-center", className) }, children);
+var Title3 = ({ children, className, ...rest }) => /* @__PURE__ */ import_react47.default.createElement(Typography, { ...rest, htmlTag: "h1", variant: "default-strong" }, children);
+var Body = ({ children, className, ...rest }) => /* @__PURE__ */ import_react47.default.createElement(Typography, { ...rest, htmlTag: "div", variant: "small", className: (0, import_clsx14.clsx)("px-5 overflow-y-auto", className) }, children);
+var Footer2 = ({ children, className, ...rest }) => /* @__PURE__ */ import_react47.default.createElement("div", { ...rest, className: (0, import_clsx14.clsx)("p-5", className) }, children);
+var Actions2 = ({ children, className, ...rest }) => /* @__PURE__ */ import_react47.default.createElement("div", { ...rest, className: (0, import_clsx14.clsx)("flex gap-4", className) }, children);
 var PopoverDialog = {
   Header: Header2,
   Title: Title3,
@@ -7074,13 +7101,13 @@ var PopoverDialog = {
 };
 
 // src/atoms/ProgressBar/ProgressBar.tsx
-var import_react47 = __toESM(require("react"));
+var import_react48 = __toESM(require("react"));
 var import_lodash_es11 = require("lodash-es");
-var import_tailwind_variants21 = require("tailwind-variants");
-var progressBarClasses = (0, import_tailwind_variants21.tv)({
+var import_tailwind_variants22 = require("tailwind-variants");
+var progressBarClasses = (0, import_tailwind_variants22.tv)({
   base: "relative flex items-center w-full bg-muted h-2 rounded-full overflow-hidden"
 });
-var progressBarIndicatorClasses = (0, import_tailwind_variants21.tv)({
+var progressBarIndicatorClasses = (0, import_tailwind_variants22.tv)({
   base: "h-2 rounded-full transition-all ease-in-out delay-150",
   variants: {
     status: {
@@ -7091,13 +7118,13 @@ var progressBarIndicatorClasses = (0, import_tailwind_variants21.tv)({
     }
   }
 });
-var progressBarLabelsClasses = (0, import_tailwind_variants21.tv)({
+var progressBarLabelsClasses = (0, import_tailwind_variants22.tv)({
   base: "flex flex-row"
 });
-var ProgressBar = ({ children, className, ...rest }) => /* @__PURE__ */ import_react47.default.createElement("div", { ...rest, className: progressBarClasses({ className }) }, children);
+var ProgressBar = ({ children, className, ...rest }) => /* @__PURE__ */ import_react48.default.createElement("div", { ...rest, className: progressBarClasses({ className }) }, children);
 ProgressBar.Indicator = ({ min, max, value, "aria-label": ariaLabel, status, className, ...rest }) => {
   const completedPercentage = (0, import_lodash_es11.clamp)((value - min) / (max - min) * 100, 0, 100);
-  return /* @__PURE__ */ import_react47.default.createElement(
+  return /* @__PURE__ */ import_react48.default.createElement(
     "div",
     {
       ...rest,
@@ -7111,15 +7138,15 @@ ProgressBar.Indicator = ({ min, max, value, "aria-label": ariaLabel, status, cla
     }
   );
 };
-ProgressBar.Labels = ({ children, startLabel, endLabel, className, ...rest }) => /* @__PURE__ */ import_react47.default.createElement("div", { className: progressBarLabelsClasses({ className }) }, /* @__PURE__ */ import_react47.default.createElement("span", { ...rest, className: "grow text-default typography-small" }, startLabel), /* @__PURE__ */ import_react47.default.createElement("span", { ...rest, className: "grow text-default typography-small text-right" }, endLabel));
+ProgressBar.Labels = ({ children, startLabel, endLabel, className, ...rest }) => /* @__PURE__ */ import_react48.default.createElement("div", { className: progressBarLabelsClasses({ className }) }, /* @__PURE__ */ import_react48.default.createElement("span", { ...rest, className: "grow text-default typography-small" }, startLabel), /* @__PURE__ */ import_react48.default.createElement("span", { ...rest, className: "grow text-default typography-small text-right" }, endLabel));
 
 // src/atoms/Section/Section.tsx
-var import_react48 = __toESM(require("react"));
-var import_tailwind_variants22 = require("tailwind-variants");
-var sectionStyles = (0, import_tailwind_variants22.tv)({
+var import_react49 = __toESM(require("react"));
+var import_tailwind_variants23 = require("tailwind-variants");
+var sectionStyles = (0, import_tailwind_variants23.tv)({
   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"
@@ -7140,19 +7167,19 @@ var Section2 = ({
   ...rest
 }) => {
   const { base: base2 } = sectionStyles();
-  return /* @__PURE__ */ import_react48.default.createElement(Box, { component: "section", ...rest, className: base2({ className }) }, children);
+  return /* @__PURE__ */ import_react49.default.createElement(Box, { component: "section", ...rest, className: base2({ className }) }, children);
 };
 Section2.Header = ({ children, className, expanded, collapsible, ...rest }) => {
   const { header } = sectionStyles({ expanded, collapsible });
-  return /* @__PURE__ */ import_react48.default.createElement("div", { ...rest, className: header({ className }) }, children);
+  return /* @__PURE__ */ import_react49.default.createElement("div", { ...rest, className: header({ className }) }, children);
 };
-Section2.TitleContainer = import_react48.default.forwardRef(
+Section2.TitleContainer = import_react49.default.forwardRef(
   ({ children, className, collapsible, ...rest }, ref) => {
     const { titleContainer: titleContainer2 } = sectionStyles({ collapsible });
-    return /* @__PURE__ */ import_react48.default.createElement("div", { ...rest, ref, className: titleContainer2({ className }) }, children);
+    return /* @__PURE__ */ import_react49.default.createElement("div", { ...rest, ref, className: titleContainer2({ className }) }, children);
   }
 );
-Section2.Toggle = (props) => /* @__PURE__ */ import_react48.default.createElement(
+Section2.Toggle = (props) => /* @__PURE__ */ import_react49.default.createElement(
   Icon2,
   {
     ...props,
@@ -7165,20 +7192,20 @@ Section2.Toggle = (props) => /* @__PURE__ */ import_react48.default.createElemen
     })
   }
 );
-Section2.Title = ({ children, ...rest }) => /* @__PURE__ */ import_react48.default.createElement(Typography2.Large, { ...rest, htmlTag: "h2", color: "intense", className: "flex gap-3 items-center" }, children);
-Section2.Subtitle = ({ children, ...rest }) => /* @__PURE__ */ import_react48.default.createElement(Typography2.Small, { ...rest, color: "muted" }, children);
+Section2.Title = ({ children, ...rest }) => /* @__PURE__ */ import_react49.default.createElement(Typography2.Large, { ...rest, htmlTag: "h2", color: "intense", className: "flex gap-3 items-center" }, children);
+Section2.Subtitle = ({ children, ...rest }) => /* @__PURE__ */ import_react49.default.createElement(Typography2.Small, { ...rest, color: "muted" }, children);
 Section2.Actions = ({ children, className, ...rest }) => {
   const { actions: actions2 } = sectionStyles();
-  return /* @__PURE__ */ import_react48.default.createElement("div", { ...rest, className: actions2({ className }) }, children);
+  return /* @__PURE__ */ import_react49.default.createElement("div", { ...rest, className: actions2({ className }) }, children);
 };
 Section2.Body = ({ children, className, ...rest }) => {
   const { body } = sectionStyles();
-  return /* @__PURE__ */ import_react48.default.createElement("div", { ...rest, className: body({ className }) }, /* @__PURE__ */ import_react48.default.createElement(Typography, { htmlTag: "div", color: "default" }, children));
+  return /* @__PURE__ */ import_react49.default.createElement("div", { ...rest, className: body({ className }) }, /* @__PURE__ */ import_react49.default.createElement(Typography, { htmlTag: "div", color: "default" }, children));
 };
 
 // src/atoms/Select/Select.tsx
-var import_react49 = __toESM(require("react"));
-var import_tailwind_variants23 = require("tailwind-variants");
+var import_react50 = __toESM(require("react"));
+var import_tailwind_variants24 = require("tailwind-variants");
 function getOptionLabelBuiltin(option) {
   if (option === null) {
     return "";
@@ -7192,10 +7219,10 @@ function isOptionDisabledBuiltin(option) {
   return !!option.disabled;
 }
 var getValues = (children) => {
-  const values = import_react49.default.Children.map(children, (c) => c?.props?.value);
+  const values = import_react50.default.Children.map(children, (c) => c?.props?.value);
   return values?.filter((v) => v !== void 0 && v !== null) ?? [];
 };
-var inputContainerClasses = (0, import_tailwind_variants23.tv)({
+var inputContainerClasses = (0, import_tailwind_variants24.tv)({
   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: {
@@ -7207,7 +7234,7 @@ var inputContainerClasses = (0, import_tailwind_variants23.tv)({
     }
   }
 });
-var inputClasses = (0, import_tailwind_variants23.tv)({
+var inputClasses = (0, import_tailwind_variants24.tv)({
   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: {
@@ -7220,22 +7247,22 @@ var inputClasses = (0, import_tailwind_variants23.tv)({
     }
   }
 });
-var menuClasses = (0, import_tailwind_variants23.tv)({
+var menuClasses = (0, import_tailwind_variants24.tv)({
   base: "text-default bg-overlay overflow-y-auto"
 });
-var noResultsClasses = (0, import_tailwind_variants23.tv)({
+var noResultsClasses = (0, import_tailwind_variants24.tv)({
   base: "p-3 text-inactive typography-default"
 });
-var emptyStateContainerClasses = (0, import_tailwind_variants23.tv)({
+var emptyStateContainerClasses = (0, import_tailwind_variants24.tv)({
   base: "border border-dashed border-default m-4 p-6"
 });
-var dividerClasses = (0, import_tailwind_variants23.tv)({
+var dividerClasses = (0, import_tailwind_variants24.tv)({
   base: "border-b-1 border-muted mx-3 my-4"
 });
-var groupClasses = (0, import_tailwind_variants23.tv)({
+var groupClasses = (0, import_tailwind_variants24.tv)({
   base: "flex items-center gap-x-3 p-3 text-inactive uppercase cursor-default typography-small mt-4 first:mt-0"
 });
-var itemClasses = (0, import_tailwind_variants23.tv)({
+var itemClasses = (0, import_tailwind_variants24.tv)({
   base: "Aquarium-Select.Item flex items-center gap-x-3 p-3 typography-default",
   variants: {
     disabled: {
@@ -7248,7 +7275,7 @@ var itemClasses = (0, import_tailwind_variants23.tv)({
     }
   }
 });
-var actionItemClasses = (0, import_tailwind_variants23.tv)({
+var actionItemClasses = (0, import_tailwind_variants24.tv)({
   base: "flex items-center gap-x-3 typography-default",
   variants: {
     dense: {
@@ -7261,7 +7288,7 @@ var actionItemClasses = (0, import_tailwind_variants23.tv)({
     }
   }
 });
-var toggleClasses = (0, import_tailwind_variants23.tv)({
+var toggleClasses = (0, import_tailwind_variants24.tv)({
   base: "grow-0 leading-none",
   variants: {
     disabled: {
@@ -7270,10 +7297,10 @@ var toggleClasses = (0, import_tailwind_variants23.tv)({
     }
   }
 });
-var InputContainer = import_react49.default.forwardRef(
-  ({ variant = "default", className, ...props }, ref) => /* @__PURE__ */ import_react49.default.createElement("div", { ref, className: inputContainerClasses({ variant, className }), ...props })
+var InputContainer = import_react50.default.forwardRef(
+  ({ variant = "default", className, ...props }, ref) => /* @__PURE__ */ import_react50.default.createElement("div", { ref, className: inputContainerClasses({ variant, className }), ...props })
 );
-var Input = import_react49.default.forwardRef(({ className, required, ...props }, ref) => /* @__PURE__ */ import_react49.default.createElement(
+var Input = import_react50.default.forwardRef(({ className, required, ...props }, ref) => /* @__PURE__ */ import_react50.default.createElement(
   "input",
   {
     ref,
@@ -7283,24 +7310,24 @@ var Input = import_react49.default.forwardRef(({ className, required, ...props }
     ...props
   }
 ));
-var Menu = import_react49.default.forwardRef(
-  ({ maxHeight = "450px", className, children, ...props }, ref) => /* @__PURE__ */ import_react49.default.createElement("ul", { ref, style: { maxHeight }, className: menuClasses({ className }), ...props }, children)
+var Menu = import_react50.default.forwardRef(
+  ({ maxHeight = "450px", className, children, ...props }, ref) => /* @__PURE__ */ import_react50.default.createElement("ul", { ref, style: { maxHeight }, className: menuClasses({ className }), ...props }, children)
 );
-var NoResults = import_react49.default.forwardRef(
-  ({ className, children, ...rest }, ref) => /* @__PURE__ */ import_react49.default.createElement("li", { ref, ...rest, className: noResultsClasses({ className }) }, children)
+var NoResults = import_react50.default.forwardRef(
+  ({ className, children, ...rest }, ref) => /* @__PURE__ */ import_react50.default.createElement("li", { ref, ...rest, className: noResultsClasses({ className }) }, children)
 );
-var EmptyStateContainer2 = import_react49.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ import_react49.default.createElement("li", { ref, className: emptyStateContainerClasses({ className }), ...props }, children));
-var Divider2 = ({ className, ...props }) => /* @__PURE__ */ import_react49.default.createElement("div", { className: dividerClasses({ className }), ...props });
-var Group2 = import_react49.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ import_react49.default.createElement("li", { ref, className: groupClasses({ className }), ...props }, children));
+var EmptyStateContainer2 = import_react50.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ import_react50.default.createElement("li", { ref, className: emptyStateContainerClasses({ className }), ...props }, children));
+var Divider2 = ({ className, ...props }) => /* @__PURE__ */ import_react50.default.createElement("div", { className: dividerClasses({ className }), ...props });
+var Group2 = import_react50.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ import_react50.default.createElement("li", { ref, className: groupClasses({ className }), ...props }, children));
 var endAdornmentSize = { width: 14, height: 14 };
-var Item4 = import_react49.default.forwardRef(
+var Item4 = import_react50.default.forwardRef(
   ({ highlighted, selected, className, children, ...props }, ref) => {
     const isDisabled = Boolean(props["aria-disabled"]);
-    return /* @__PURE__ */ import_react49.default.createElement("li", { ref, className: itemClasses({ disabled: isDisabled, highlighted, className }), ...props }, /* @__PURE__ */ import_react49.default.createElement("span", { className: "grow flex gap-x-3" }, children), selected ? /* @__PURE__ */ import_react49.default.createElement(InlineIcon2, { icon: tick_default, ...endAdornmentSize }) : /* @__PURE__ */ import_react49.default.createElement("div", { style: endAdornmentSize }));
+    return /* @__PURE__ */ import_react50.default.createElement("li", { ref, className: itemClasses({ disabled: isDisabled, highlighted, className }), ...props }, /* @__PURE__ */ import_react50.default.createElement("span", { className: "grow flex gap-x-3" }, children), selected ? /* @__PURE__ */ import_react50.default.createElement(InlineIcon2, { icon: tick_default, ...endAdornmentSize }) : /* @__PURE__ */ import_react50.default.createElement("div", { style: endAdornmentSize }));
   }
 );
-var ActionItem = import_react49.default.forwardRef(
-  ({ className, dense = false, icon, onClick, children, ...props }, ref) => /* @__PURE__ */ import_react49.default.createElement(
+var ActionItem = import_react50.default.forwardRef(
+  ({ className, dense = false, icon, onClick, children, ...props }, ref) => /* @__PURE__ */ import_react50.default.createElement(
     "li",
     {
       ref,
@@ -7309,11 +7336,11 @@ var ActionItem = import_react49.default.forwardRef(
       className: actionItemClasses({ dense, disabled: props.disabled, className }),
       ...props
     },
-    icon && /* @__PURE__ */ import_react49.default.createElement(InlineIcon2, { icon }),
+    icon && /* @__PURE__ */ import_react50.default.createElement(InlineIcon2, { icon }),
     children
   )
 );
-var Toggle = import_react49.default.forwardRef(({ hasFocus, isOpen, ...props }, ref) => /* @__PURE__ */ import_react49.default.createElement(
+var Toggle = import_react50.default.forwardRef(({ hasFocus, isOpen, ...props }, ref) => /* @__PURE__ */ import_react50.default.createElement(
   "button",
   {
     ref,
@@ -7322,7 +7349,7 @@ var Toggle = import_react49.default.forwardRef(({ hasFocus, isOpen, ...props },
     ...props,
     className: toggleClasses({ disabled: props.disabled ?? false })
   },
-  /* @__PURE__ */ import_react49.default.createElement(
+  /* @__PURE__ */ import_react50.default.createElement(
     InlineIcon2,
     {
       color: props.disabled ? "inactive" : "default",
@@ -7344,9 +7371,9 @@ var Select = {
 };
 
 // src/atoms/Stepper/Stepper.tsx
-var import_react50 = __toESM(require("react"));
-var import_tailwind_variants24 = require("tailwind-variants");
-var connectorStyles = (0, import_tailwind_variants24.tv)({
+var import_react51 = __toESM(require("react"));
+var import_tailwind_variants25 = require("tailwind-variants");
+var connectorStyles = (0, import_tailwind_variants25.tv)({
   slots: {
     container: "absolute w-full -left-1/2",
     connector: "w-full"
@@ -7368,7 +7395,7 @@ var connectorStyles = (0, import_tailwind_variants24.tv)({
     }
   }
 });
-var stepStyles = (0, import_tailwind_variants24.tv)({
+var stepStyles = (0, import_tailwind_variants25.tv)({
   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"
@@ -7425,26 +7452,26 @@ var stepStyles = (0, import_tailwind_variants24.tv)({
     }
   ]
 });
-var Stepper = ({ className, ...rest }) => /* @__PURE__ */ import_react50.default.createElement("div", { ...rest, className });
+var Stepper = ({ className, ...rest }) => /* @__PURE__ */ import_react51.default.createElement("div", { ...rest, className });
 var ConnectorContainer = ({
   className,
   dense = false,
   ...rest
 }) => {
   const { container: container2 } = connectorStyles({ dense });
-  return /* @__PURE__ */ import_react50.default.createElement("div", { ...rest, className: container2({ className }) });
+  return /* @__PURE__ */ import_react51.default.createElement("div", { ...rest, className: container2({ className }) });
 };
 var Connector = ({ children, className, completed = false, dense = false, ...rest }) => {
   const { connector } = connectorStyles({ completed, dense });
-  return /* @__PURE__ */ import_react50.default.createElement("div", { ...rest, className: connector({ className }) });
+  return /* @__PURE__ */ import_react51.default.createElement("div", { ...rest, className: connector({ className }) });
 };
 var Step = ({ className, state, ...rest }) => {
   const { step } = stepStyles({ state });
-  return /* @__PURE__ */ import_react50.default.createElement("div", { ...rest, className: step({ className }) });
+  return /* @__PURE__ */ import_react51.default.createElement("div", { ...rest, className: step({ className }) });
 };
 var Indicator = ({ children, className, state, dense = false, ...rest }) => {
   const { indicator } = stepStyles({ state, dense });
-  return /* @__PURE__ */ import_react50.default.createElement("div", { ...rest, className: indicator({ className }) }, state === "completed" ? /* @__PURE__ */ import_react50.default.createElement(InlineIcon2, { icon: tick_default }) : dense ? null : children);
+  return /* @__PURE__ */ import_react51.default.createElement("div", { ...rest, className: indicator({ className }) }, state === "completed" ? /* @__PURE__ */ import_react51.default.createElement(InlineIcon2, { icon: tick_default }) : dense ? null : children);
 };
 Step.Indicator = Indicator;
 Stepper.Step = Step;
@@ -7452,9 +7479,9 @@ ConnectorContainer.Connector = Connector;
 Stepper.ConnectorContainer = ConnectorContainer;
 
 // src/atoms/Switch/Switch.tsx
-var import_react51 = __toESM(require("react"));
-var import_tailwind_variants25 = require("tailwind-variants");
-var switchStyles = (0, import_tailwind_variants25.tv)({
+var import_react52 = __toESM(require("react"));
+var import_tailwind_variants26 = require("tailwind-variants");
+var switchStyles = (0, import_tailwind_variants26.tv)({
   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",
@@ -7473,10 +7500,10 @@ var switchStyles = (0, import_tailwind_variants25.tv)({
     }
   }
 });
-var Switch = import_react51.default.forwardRef(
+var Switch = import_react52.default.forwardRef(
   ({ id, children, name, disabled = false, readOnly = false, ...props }, ref) => {
     const { wrapper, input, thumb } = switchStyles({ disabled });
-    return /* @__PURE__ */ import_react51.default.createElement("span", { className: wrapper() }, /* @__PURE__ */ import_react51.default.createElement(
+    return /* @__PURE__ */ import_react52.default.createElement("span", { className: wrapper() }, /* @__PURE__ */ import_react52.default.createElement(
       "input",
       {
         id,
@@ -7488,15 +7515,15 @@ var Switch = import_react51.default.forwardRef(
         readOnly,
         disabled
       }
-    ), /* @__PURE__ */ import_react51.default.createElement("span", { className: thumb() }, disabled && /* @__PURE__ */ import_react51.default.createElement(Icon2, { icon: ban_default, width: "10px", height: "10px" })));
+    ), /* @__PURE__ */ import_react52.default.createElement("span", { className: thumb() }, disabled && /* @__PURE__ */ import_react52.default.createElement(Icon2, { icon: ban_default, width: "10px", height: "10px" })));
   }
 );
 
 // src/atoms/VisuallyHidden/VisuallyHidden.tsx
-var import_react52 = __toESM(require("react"));
+var import_react53 = __toESM(require("react"));
 var import_visually_hidden = require("@react-aria/visually-hidden");
 var VisuallyHidden = (props) => {
-  return /* @__PURE__ */ import_react52.default.createElement(import_visually_hidden.VisuallyHidden, { ...props });
+  return /* @__PURE__ */ import_react53.default.createElement(import_visually_hidden.VisuallyHidden, { ...props });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -7508,6 +7535,7 @@ var VisuallyHidden = (props) => {
   Checkbox,
   Chip,
   ChoiceChip,
+  CommandPalette,
   DIALOG_ICONS_AND_COLORS,
   DataList,
   Dialog,
@@ -7539,6 +7567,10 @@ var VisuallyHidden = (props) => {
   bodyCellClasses,
   buttonClasses,
   cellClassNames,
+  commandPaletteStyles,
+  dropdownMenuGroupStyles,
+  dropdownMenuItemStyles,
+  dropdownMenuStyles,
   getAlignClassNames,
   getBodyCellClassNames,
   getHeadCellClassNames,