@aivenio/aquarium 1.16.0 → 1.17.0

package/dist/system.cjs

@@ -3007,26 +3007,31 @@ var Tooltip = (_a) => {
     var _a2, _b2;
     (_a2 = props.onClick) == null ? void 0 : _a2.call(props, e);
     (_b2 = triggerProps.onClick) == null ? void 0 : _b2.call(triggerProps, e);
+    e.stopPropagation();
   };
   const handleMouseDown = (e) => {
     var _a2, _b2;
     (_a2 = props.onMouseDown) == null ? void 0 : _a2.call(props, e);
     (_b2 = triggerProps.onMouseDown) == null ? void 0 : _b2.call(triggerProps, e);
+    e.stopPropagation();
   };
   const handleMouseUp = (e) => {
     var _a2, _b2;
     (_a2 = props.onMouseUp) == null ? void 0 : _a2.call(props, e);
     (_b2 = triggerProps.onMouseUp) == null ? void 0 : _b2.call(triggerProps, e);
+    e.stopPropagation();
   };
   const handlePointerDown = (e) => {
     var _a2, _b2;
     (_a2 = props.onPointerDown) == null ? void 0 : _a2.call(props, e);
     (_b2 = triggerProps.onPointerDown) == null ? void 0 : _b2.call(triggerProps, e);
+    e.stopPropagation();
   };
   const handlePointerUp = (e) => {
     var _a2, _b2;
     (_a2 = props.onPointerUp) == null ? void 0 : _a2.call(props, e);
     (_b2 = triggerProps.onPointerUp) == null ? void 0 : _b2.call(triggerProps, e);
+    e.stopPropagation();
   };
   return /* @__PURE__ */ import_react10.default.createElement("div", __spreadProps(__spreadValues({
     className: tw(`${inline ? "inline-block" : "block"}`)
@@ -3657,6 +3662,7 @@ var Box = (_a) => {
     style: __spreadValues(__spreadValues({}, styles), style)
   }, rest));
 };
+Box.Flex = createSimpleComponent(Box, { display: "flex" }, "Box.Flex");
 var BorderBox = createSimpleComponent(
   Box,
   { className: "rounded border", borderColor: "grey-10" },
@@ -3943,7 +3949,7 @@ var asCrumb = (Component, displayName, options = { isActive: false }) => {
     }), /* @__PURE__ */ import_react23.default.createElement("span", {
       className: (0, import_classnames2.default)(
         tw("flex flex-row flex-nowrap items-center gap-x-3 ", {
-          "text-primary-80 underline underline-offset-2 hover:no-underline hover:text-primary-70": !options.isActive,
+          "text-primary-80 hover:text-primary-70": !options.isActive,
           "text-grey-90": options.isActive
         })
       )
@@ -5385,7 +5391,7 @@ var Container2 = ({ maxWidth = "xl", children }) => /* @__PURE__ */ import_react
 }, children);
 
 // src/molecules/DataList/DataList.tsx
-var import_react57 = __toESM(require("react"));
+var import_react58 = __toESM(require("react"));
 var import_compact = __toESM(require("lodash/compact"));
 var import_isFunction = __toESM(require("lodash/isFunction"));
 
@@ -5836,8 +5842,15 @@ var getDisabledItemKeys = (children) => {
   return keys.flat().filter((key) => key !== null);
 };
 
-// src/molecules/Template/Template.tsx
+// src/molecules/List/List.tsx
 var import_react52 = __toESM(require("react"));
+var List2 = ({ items, renderItem, container = import_react52.default.Fragment }) => {
+  const Component = container;
+  return /* @__PURE__ */ import_react52.default.createElement(Component, null, items.map(renderItem));
+};
+
+// src/molecules/Template/Template.tsx
+var import_react53 = __toESM(require("react"));
 var Template = ({
   children,
   columns,
@@ -5863,23 +5876,23 @@ var Template = ({
     rowGap,
     columnGap
   });
-  return /* @__PURE__ */ import_react52.default.createElement("div", {
+  return /* @__PURE__ */ import_react53.default.createElement("div", {
     style: __spreadValues({}, styles)
   }, children);
 };
 
 // src/atoms/DataList/DataList.tsx
-var import_react55 = __toESM(require("react"));
+var import_react56 = __toESM(require("react"));
 
 // src/atoms/Table/Table.tsx
-var import_react54 = __toESM(require("react"));
+var import_react55 = __toESM(require("react"));
 
 // src/atoms/RadioButton/RadioButton.tsx
-var import_react53 = __toESM(require("react"));
-var RadioButton = import_react53.default.forwardRef(
+var import_react54 = __toESM(require("react"));
+var RadioButton = import_react54.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { id, children, name, disabled = false, readOnly = false } = _b, props = __objRest(_b, ["id", "children", "name", "disabled", "readOnly"]);
-    return /* @__PURE__ */ import_react53.default.createElement("input", __spreadProps(__spreadValues({
+    return /* @__PURE__ */ import_react54.default.createElement("input", __spreadProps(__spreadValues({
       id,
       ref,
       type: "radio",
@@ -5905,29 +5918,29 @@ var RadioButton = import_react53.default.forwardRef(
 // src/atoms/Table/Table.tsx
 var import_chevronDown3 = __toESM(require_chevronDown());
 var import_chevronUp2 = __toESM(require_chevronUp());
-var HeadContext = import_react54.default.createContext(null);
+var HeadContext = import_react55.default.createContext(null);
 var tableClassNames = tw("w-full relative typography-default border-spacing-0");
 var Table = (_a) => {
   var _b = _a, { children, ariaLabel, className } = _b, rest = __objRest(_b, ["children", "ariaLabel", "className"]);
-  return /* @__PURE__ */ import_react54.default.createElement("table", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react55.default.createElement("table", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tableClassNames, className),
     "aria-label": ariaLabel
   }), children);
 };
 var TableHead = (_a) => {
   var _b = _a, { children, sticky } = _b, rest = __objRest(_b, ["children", "sticky"]);
-  return /* @__PURE__ */ import_react54.default.createElement("thead", __spreadValues({}, rest), /* @__PURE__ */ import_react54.default.createElement("tr", null, /* @__PURE__ */ import_react54.default.createElement(HeadContext.Provider, {
+  return /* @__PURE__ */ import_react55.default.createElement("thead", __spreadValues({}, rest), /* @__PURE__ */ import_react55.default.createElement("tr", null, /* @__PURE__ */ import_react55.default.createElement(HeadContext.Provider, {
     value: { children, sticky }
   }, children)));
 };
 var TableBody = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ import_react54.default.createElement("tbody", __spreadValues({}, rest), children);
+  return /* @__PURE__ */ import_react55.default.createElement("tbody", __spreadValues({}, rest), children);
 };
 var rowClassNames = tw("children:border-grey-10 group children:last:border-b-0 hover:bg-grey-0");
 var TableRow = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ import_react54.default.createElement("tr", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react55.default.createElement("tr", __spreadProps(__spreadValues({}, rest), {
     className: classNames(rowClassNames, className)
   }), children);
 };
@@ -5954,15 +5967,15 @@ var getHeadCellClassNames = (sticky = true, stickyColumn) => {
 };
 var TableCell = (_a) => {
   var _b = _a, { children, className, stickyColumn, align = "left" } = _b, rest = __objRest(_b, ["children", "className", "stickyColumn", "align"]);
-  const headContext = import_react54.default.useContext(HeadContext);
-  return headContext ? /* @__PURE__ */ import_react54.default.createElement("th", __spreadProps(__spreadValues({}, rest), {
+  const headContext = import_react55.default.useContext(HeadContext);
+  return headContext ? /* @__PURE__ */ import_react55.default.createElement("th", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       cellClassNames,
       getHeadCellClassNames(headContext.sticky, stickyColumn),
       getAlignClassNames(align),
       className
     )
-  }), children) : /* @__PURE__ */ import_react54.default.createElement("td", __spreadProps(__spreadValues({}, rest), {
+  }), children) : /* @__PURE__ */ import_react55.default.createElement("td", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       cellClassNames,
       getBodyCellClassNames(true, stickyColumn),
@@ -5973,11 +5986,11 @@ var TableCell = (_a) => {
 };
 var TableSelectCell = (_a) => {
   var _b = _a, { ariaLabel } = _b, props = __objRest(_b, ["ariaLabel"]);
-  return /* @__PURE__ */ import_react54.default.createElement(Table.Cell, {
+  return /* @__PURE__ */ import_react55.default.createElement(Table.Cell, {
     className: tw("leading-[0px]")
-  }, props.type === "radio" ? /* @__PURE__ */ import_react54.default.createElement(RadioButton, __spreadValues({
+  }, props.type === "radio" ? /* @__PURE__ */ import_react55.default.createElement(RadioButton, __spreadValues({
     "aria-label": ariaLabel
-  }, props)) : /* @__PURE__ */ import_react54.default.createElement(Checkbox, __spreadValues({
+  }, props)) : /* @__PURE__ */ import_react55.default.createElement(Checkbox, __spreadValues({
     "aria-label": ariaLabel
   }, props)));
 };
@@ -5987,39 +6000,39 @@ var getSortCellIconClassNames = (active) => {
 };
 var TableSortCell = (_a) => {
   var _b = _a, { children, direction = "none", onClick } = _b, rest = __objRest(_b, ["children", "direction", "onClick"]);
-  return /* @__PURE__ */ import_react54.default.createElement(Table.Cell, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react55.default.createElement(Table.Cell, __spreadProps(__spreadValues({}, rest), {
     "aria-sort": direction
-  }), /* @__PURE__ */ import_react54.default.createElement("span", {
+  }), /* @__PURE__ */ import_react55.default.createElement("span", {
     className: getSortCellButtonClassNames(rest.align),
     role: "button",
     tabIndex: -1,
     onClick
-  }, children, /* @__PURE__ */ import_react54.default.createElement("div", {
+  }, children, /* @__PURE__ */ import_react55.default.createElement("div", {
     "data-sort-icons": true,
     className: tw("flex flex-col", {
       "invisible group-hover:visible": direction === "none"
     })
-  }, /* @__PURE__ */ import_react54.default.createElement(InlineIcon, {
+  }, /* @__PURE__ */ import_react55.default.createElement(InlineIcon, {
     icon: import_chevronUp2.default,
     className: getSortCellIconClassNames(direction === "descending")
-  }), /* @__PURE__ */ import_react54.default.createElement(InlineIcon, {
+  }), /* @__PURE__ */ import_react55.default.createElement(InlineIcon, {
     icon: import_chevronDown3.default,
     className: getSortCellIconClassNames(direction === "ascending")
   }))));
 };
-var Item4 = ({ image, imageAlt, imageSize = 35, title, caption }) => /* @__PURE__ */ import_react54.default.createElement("div", {
+var Item4 = ({ image, imageAlt, imageSize = 35, title, caption }) => /* @__PURE__ */ import_react55.default.createElement("div", {
   className: tw("flex gap-4 items-center")
-}, image && /* @__PURE__ */ import_react54.default.createElement("img", {
+}, image && /* @__PURE__ */ import_react55.default.createElement("img", {
   src: image,
   alt: imageAlt,
   style: { width: imageSize, height: imageSize }
-}), /* @__PURE__ */ import_react54.default.createElement("div", null, title, caption && /* @__PURE__ */ import_react54.default.createElement(Typography2.Caption, null, caption)));
-Table.Head = import_react54.default.memo(TableHead);
-Table.Body = import_react54.default.memo(TableBody);
-Table.Row = import_react54.default.memo(TableRow);
-Table.Cell = import_react54.default.memo(TableCell);
-Table.SortCell = import_react54.default.memo(TableSortCell);
-Table.SelectCell = import_react54.default.memo(TableSelectCell);
+}), /* @__PURE__ */ import_react55.default.createElement("div", null, title, caption && /* @__PURE__ */ import_react55.default.createElement(Typography2.Caption, null, caption)));
+Table.Head = import_react55.default.memo(TableHead);
+Table.Body = import_react55.default.memo(TableBody);
+Table.Row = import_react55.default.memo(TableRow);
+Table.Cell = import_react55.default.memo(TableCell);
+Table.SortCell = import_react55.default.memo(TableSortCell);
+Table.SelectCell = import_react55.default.memo(TableSelectCell);
 
 // src/atoms/DataList/DataList.tsx
 var import_chevronDown4 = __toESM(require_chevronDown());
@@ -6031,7 +6044,7 @@ var getAlignClassNames2 = (align) => tw("flex items-center", {
 });
 var DataList = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ import_react55.default.createElement("div", __spreadValues({}, rest));
+  return /* @__PURE__ */ import_react56.default.createElement("div", __spreadValues({}, rest));
 };
 var HeadCell = (_a) => {
   var _b = _a, {
@@ -6045,7 +6058,7 @@ var HeadCell = (_a) => {
     "align",
     "stickyColumn"
   ]);
-  return /* @__PURE__ */ import_react55.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react56.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     role: "cell",
     className: classNames(
       cellClassNames,
@@ -6065,7 +6078,7 @@ var Cell = (_a) => {
     "align",
     "stickyColumn"
   ]);
-  return /* @__PURE__ */ import_react55.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react56.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     role: "cell",
     className: classNames(
       cellClassNames,
@@ -6078,31 +6091,31 @@ var Cell = (_a) => {
 };
 var Row = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ import_react55.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react56.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("contents group"), className),
     role: "row"
   }));
 };
 var SortCell = (_a) => {
   var _b = _a, { children, direction = "none", onClick, sticky } = _b, rest = __objRest(_b, ["children", "direction", "onClick", "sticky"]);
-  return /* @__PURE__ */ import_react55.default.createElement(HeadCell, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react56.default.createElement(HeadCell, __spreadProps(__spreadValues({}, rest), {
     "aria-sort": direction,
     role: "cell",
     sticky
-  }), /* @__PURE__ */ import_react55.default.createElement("span", {
+  }), /* @__PURE__ */ import_react56.default.createElement("span", {
     className: getSortCellButtonClassNames(rest.align),
     role: "button",
     tabIndex: -1,
     onClick
-  }, children, /* @__PURE__ */ import_react55.default.createElement("div", {
+  }, children, /* @__PURE__ */ import_react56.default.createElement("div", {
     "data-sort-icons": true,
     className: tw("flex flex-col", {
       "invisible group-hover:visible": direction === "none"
     })
-  }, /* @__PURE__ */ import_react55.default.createElement(InlineIcon, {
+  }, /* @__PURE__ */ import_react56.default.createElement(InlineIcon, {
     icon: import_chevronUp3.default,
     className: getSortCellIconClassNames(direction === "descending")
-  }), /* @__PURE__ */ import_react55.default.createElement(InlineIcon, {
+  }), /* @__PURE__ */ import_react56.default.createElement(InlineIcon, {
     icon: import_chevronDown4.default,
     className: getSortCellIconClassNames(direction === "ascending")
   }))));
@@ -6130,9 +6143,9 @@ var cellProps = (column) => ({
 var columnIsFieldColumn = (column) => Boolean(column && column.field);
 
 // src/utils/table/useTableSort.tsx
-var import_react56 = __toESM(require("react"));
+var import_react57 = __toESM(require("react"));
 var useTableSort = () => {
-  const [sort, setSort] = import_react56.default.useState();
+  const [sort, setSort] = import_react57.default.useState();
   const handleSortClick = (column) => {
     if (sort && sort.column.headerName === column.headerName) {
       if (sort.direction === "ascending") {
@@ -6169,6 +6182,7 @@ var DataList2 = ({
   rows,
   sticky,
   menu,
+  menuLabel = "Context menu",
   onAction
 }) => {
   const [sort, updateSort] = useTableSort();
@@ -6180,54 +6194,54 @@ var DataList2 = ({
     }),
     menu ? "auto" : void 0
   ]);
-  return /* @__PURE__ */ import_react57.default.createElement(Template, {
+  return /* @__PURE__ */ import_react58.default.createElement(Template, {
     columns: templateColumns
   }, columns.map(
-    (column) => columnIsFieldColumn(column) && column.sortable || column.sort ? /* @__PURE__ */ import_react57.default.createElement(DataList.SortCell, __spreadValues({
+    (column) => columnIsFieldColumn(column) && column.sortable || column.sort ? /* @__PURE__ */ import_react58.default.createElement(DataList.SortCell, __spreadValues({
       direction: sort && sort.column.headerName === column.headerName ? sort.direction : "none",
       onClick: () => updateSort(column),
       sticky
-    }, cellProps(column)), column.headerName) : /* @__PURE__ */ import_react57.default.createElement(DataList.HeadCell, __spreadProps(__spreadValues({}, cellProps(column)), {
+    }, cellProps(column)), column.headerName) : /* @__PURE__ */ import_react58.default.createElement(DataList.HeadCell, __spreadProps(__spreadValues({}, cellProps(column)), {
       sticky
     }), column.headerName)
-  ), menu && /* @__PURE__ */ import_react57.default.createElement(DataList.HeadCell, {
+  ), menu && /* @__PURE__ */ import_react58.default.createElement(DataList.HeadCell, {
     align: "right",
-    "aria-label": "Context menu"
-  }), /* @__PURE__ */ import_react57.default.createElement(List2, {
+    "aria-label": menuLabel
+  }), /* @__PURE__ */ import_react58.default.createElement(List2, {
     items: sortedRows,
-    renderItem: (row, index) => /* @__PURE__ */ import_react57.default.createElement(DataList.Row, {
+    renderItem: (row, index) => /* @__PURE__ */ import_react58.default.createElement(DataList.Row, {
       key: row.id
-    }, /* @__PURE__ */ import_react57.default.createElement(List2, {
+    }, /* @__PURE__ */ import_react58.default.createElement(List2, {
       items: columns,
-      renderItem: (column) => column.type === "status" ? /* @__PURE__ */ import_react57.default.createElement(DataList.Cell, __spreadValues({}, cellProps(column)), /* @__PURE__ */ import_react57.default.createElement(StatusChip, __spreadValues({
+      renderItem: (column) => column.type === "status" ? /* @__PURE__ */ import_react58.default.createElement(DataList.Cell, __spreadValues({}, cellProps(column)), /* @__PURE__ */ import_react58.default.createElement(StatusChip, __spreadValues({
         dense: true
-      }, column.status(row, index, sortedRows)))) : column.type === "action" ? /* @__PURE__ */ import_react57.default.createElement(DataList.Cell, __spreadValues({}, cellProps(column)), /* @__PURE__ */ import_react57.default.createElement(Button.Secondary, __spreadValues({
+      }, column.status(row, index, sortedRows)))) : column.type === "action" ? /* @__PURE__ */ import_react58.default.createElement(DataList.Cell, __spreadValues({}, cellProps(column)), /* @__PURE__ */ import_react58.default.createElement(Button.Secondary, __spreadValues({
         dense: true
-      }, renameProperty("text", "children", column.action(row, index, sortedRows))))) : column.type === "custom" ? /* @__PURE__ */ import_react57.default.createElement(DataList.Cell, __spreadValues({}, cellProps(column)), column.UNSAFE_render(row, index, sortedRows)) : column.type === "item" ? /* @__PURE__ */ import_react57.default.createElement(DataList.Cell, __spreadValues({}, cellProps(column)), /* @__PURE__ */ import_react57.default.createElement(Item4, __spreadValues({}, column.item(row, index, sortedRows)))) : /* @__PURE__ */ import_react57.default.createElement(DataList.Cell, __spreadValues({}, cellProps(column)), column.formatter ? column.formatter(row[column.field], row, index, sortedRows) : row[column.field])
-    }), menu && /* @__PURE__ */ import_react57.default.createElement(DataList.Cell, {
+      }, renameProperty("text", "children", column.action(row, index, sortedRows))))) : column.type === "custom" ? /* @__PURE__ */ import_react58.default.createElement(DataList.Cell, __spreadValues({}, cellProps(column)), column.UNSAFE_render(row, index, sortedRows)) : column.type === "item" ? /* @__PURE__ */ import_react58.default.createElement(DataList.Cell, __spreadValues({}, cellProps(column)), /* @__PURE__ */ import_react58.default.createElement(Item4, __spreadValues({}, column.item(row, index, sortedRows)))) : /* @__PURE__ */ import_react58.default.createElement(DataList.Cell, __spreadValues({}, cellProps(column)), column.formatter ? column.formatter(row[column.field], row, index, sortedRows) : row[column.field])
+    }), menu && /* @__PURE__ */ import_react58.default.createElement(DataList.Cell, {
       align: "right"
-    }, /* @__PURE__ */ import_react57.default.createElement(DropdownMenu2, {
+    }, /* @__PURE__ */ import_react58.default.createElement(DropdownMenu2, {
       onAction: (action) => onAction == null ? void 0 : onAction(action, row, index)
-    }, /* @__PURE__ */ import_react57.default.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ import_react57.default.createElement(Button.Icon, {
-      "aria-label": "menu",
+    }, /* @__PURE__ */ import_react58.default.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ import_react58.default.createElement(Button.Icon, {
+      "aria-label": menuLabel,
       icon: import_more.default
     })), (0, import_isFunction.default)(menu) ? menu(row, index) : menu)))
   }));
 };
 
 // src/molecules/DataTable/DataTable.tsx
-var import_react60 = __toESM(require("react"));
+var import_react61 = __toESM(require("react"));
 var import_compact2 = __toESM(require("lodash/compact"));
 var import_isFunction2 = __toESM(require("lodash/isFunction"));
 
 // src/molecules/Table/Table.tsx
-var import_react59 = __toESM(require("react"));
+var import_react60 = __toESM(require("react"));
 
 // src/utils/table/useScrollTarget.ts
-var import_react58 = __toESM(require("react"));
+var import_react59 = __toESM(require("react"));
 var useScrollTarget = (callback) => {
-  const targetRef = import_react58.default.useRef(null);
-  import_react58.default.useLayoutEffect(() => {
+  const targetRef = import_react59.default.useRef(null);
+  import_react59.default.useLayoutEffect(() => {
     const observer = new IntersectionObserver((entries) => entries[0].isIntersecting && callback && callback(), {
       root: null,
       rootMargin: `0px 0px 200px 0px`
@@ -6245,12 +6259,12 @@ var Table2 = (_a) => {
   var _b = _a, { children, onPrev, onNext } = _b, rest = __objRest(_b, ["children", "onPrev", "onNext"]);
   const bottomRef = useScrollTarget(onNext);
   const topRef = useScrollTarget(onPrev);
-  return /* @__PURE__ */ import_react59.default.createElement("div", {
+  return /* @__PURE__ */ import_react60.default.createElement("div", {
     className: "relative w-full"
-  }, /* @__PURE__ */ import_react59.default.createElement("div", {
+  }, /* @__PURE__ */ import_react60.default.createElement("div", {
     ref: topRef,
     className: tw("absolute top-0 h-1 w-full left-0 bg-transparent")
-  }), /* @__PURE__ */ import_react59.default.createElement(Table, __spreadValues({}, rest), children), /* @__PURE__ */ import_react59.default.createElement("div", {
+  }), /* @__PURE__ */ import_react60.default.createElement(Table, __spreadValues({}, rest), children), /* @__PURE__ */ import_react60.default.createElement("div", {
     ref: bottomRef,
     className: tw("absolute bottom-0 h-1 w-full left-0 bg-transparent")
   }));
@@ -6272,6 +6286,7 @@ var DataTable = (_a) => {
     layout = "auto",
     sticky,
     menu,
+    menuLabel = "Context menu",
     onAction
   } = _b, rest = __objRest(_b, [
     "columns",
@@ -6280,59 +6295,60 @@ var DataTable = (_a) => {
     "layout",
     "sticky",
     "menu",
+    "menuLabel",
     "onAction"
   ]);
   const [sort, updateSort] = useTableSort();
   const sortedRows = sortRowsBy(rows, sort);
-  return /* @__PURE__ */ import_react60.default.createElement(Table2, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react61.default.createElement(Table2, __spreadProps(__spreadValues({}, rest), {
     className: tw({
       "whitespace-nowrap": noWrap,
       "table-auto": layout === "auto",
       "table-fixed": layout === "fixed"
     })
-  }), /* @__PURE__ */ import_react60.default.createElement(Table2.Head, {
+  }), /* @__PURE__ */ import_react61.default.createElement(Table2.Head, {
     sticky
   }, (0, import_compact2.default)([
     ...columns.map(
-      (column) => columnIsFieldColumn(column) && column.sortable || column.sort ? /* @__PURE__ */ import_react60.default.createElement(Table2.SortCell, __spreadValues({
+      (column) => columnIsFieldColumn(column) && column.sortable || column.sort ? /* @__PURE__ */ import_react61.default.createElement(Table2.SortCell, __spreadValues({
         direction: sort && sort.column.headerName === column.headerName ? sort.direction : "none",
         onClick: () => updateSort(column),
         style: { width: column.width },
         "aria-label": column.headerInvisible ? column.headerName : void 0
-      }, cellProps(column)), !column.headerInvisible && column.headerName) : /* @__PURE__ */ import_react60.default.createElement(Table2.Cell, __spreadProps(__spreadValues({}, cellProps(column)), {
+      }, cellProps(column)), !column.headerInvisible && column.headerName) : /* @__PURE__ */ import_react61.default.createElement(Table2.Cell, __spreadProps(__spreadValues({}, cellProps(column)), {
         style: { width: column.width },
         "aria-label": column.headerInvisible ? column.headerName : void 0
       }), !column.headerInvisible && column.headerName)
     ),
-    menu ? /* @__PURE__ */ import_react60.default.createElement(Table2.Cell, {
+    menu ? /* @__PURE__ */ import_react61.default.createElement(Table2.Cell, {
       key: "__contextMenu",
       align: "right",
-      "aria-label": "Context menu"
+      "aria-label": menuLabel
     }) : null
-  ])), /* @__PURE__ */ import_react60.default.createElement(Table2.Body, null, /* @__PURE__ */ import_react60.default.createElement(List2, {
+  ])), /* @__PURE__ */ import_react61.default.createElement(Table2.Body, null, /* @__PURE__ */ import_react61.default.createElement(List2, {
     items: sortedRows,
-    renderItem: (row, index) => /* @__PURE__ */ import_react60.default.createElement(Table2.Row, {
+    renderItem: (row, index) => /* @__PURE__ */ import_react61.default.createElement(Table2.Row, {
       key: row.id
-    }, /* @__PURE__ */ import_react60.default.createElement(List2, {
+    }, /* @__PURE__ */ import_react61.default.createElement(List2, {
       items: columns,
-      renderItem: (column) => column.type === "status" ? /* @__PURE__ */ import_react60.default.createElement(Table2.Cell, __spreadValues({}, cellProps(column)), /* @__PURE__ */ import_react60.default.createElement(StatusChip, __spreadValues({
+      renderItem: (column) => column.type === "status" ? /* @__PURE__ */ import_react61.default.createElement(Table2.Cell, __spreadValues({}, cellProps(column)), /* @__PURE__ */ import_react61.default.createElement(StatusChip, __spreadValues({
         dense: true
-      }, column.status(row, index, sortedRows)))) : column.type === "action" ? /* @__PURE__ */ import_react60.default.createElement(Table2.Cell, __spreadValues({}, cellProps(column)), /* @__PURE__ */ import_react60.default.createElement(Button.Secondary, __spreadValues({
+      }, column.status(row, index, sortedRows)))) : column.type === "action" ? /* @__PURE__ */ import_react61.default.createElement(Table2.Cell, __spreadValues({}, cellProps(column)), /* @__PURE__ */ import_react61.default.createElement(Button.Secondary, __spreadValues({
         dense: true
-      }, renameProperty("text", "children", column.action(row, index, sortedRows))))) : column.type === "custom" ? /* @__PURE__ */ import_react60.default.createElement(Table2.Cell, __spreadValues({}, cellProps(column)), column.UNSAFE_render(row, index, sortedRows)) : column.type === "item" ? /* @__PURE__ */ import_react60.default.createElement(Table2.Cell, __spreadValues({}, cellProps(column)), /* @__PURE__ */ import_react60.default.createElement(Item4, __spreadValues({}, column.item(row, index, sortedRows)))) : /* @__PURE__ */ import_react60.default.createElement(Table2.Cell, __spreadValues({}, cellProps(column)), column.formatter ? column.formatter(row[column.field], row, index, sortedRows) : row[column.field])
-    }), menu && /* @__PURE__ */ import_react60.default.createElement(Table2.Cell, {
+      }, renameProperty("text", "children", column.action(row, index, sortedRows))))) : column.type === "custom" ? /* @__PURE__ */ import_react61.default.createElement(Table2.Cell, __spreadValues({}, cellProps(column)), column.UNSAFE_render(row, index, sortedRows)) : column.type === "item" ? /* @__PURE__ */ import_react61.default.createElement(Table2.Cell, __spreadValues({}, cellProps(column)), /* @__PURE__ */ import_react61.default.createElement(Item4, __spreadValues({}, column.item(row, index, sortedRows)))) : /* @__PURE__ */ import_react61.default.createElement(Table2.Cell, __spreadValues({}, cellProps(column)), column.formatter ? column.formatter(row[column.field], row, index, sortedRows) : row[column.field])
+    }), menu && /* @__PURE__ */ import_react61.default.createElement(Table2.Cell, {
       align: "right"
-    }, /* @__PURE__ */ import_react60.default.createElement(DropdownMenu2, {
+    }, /* @__PURE__ */ import_react61.default.createElement(DropdownMenu2, {
       onAction: (action) => onAction == null ? void 0 : onAction(action, row, index)
-    }, /* @__PURE__ */ import_react60.default.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ import_react60.default.createElement(Button.Icon, {
-      "aria-label": "menu",
+    }, /* @__PURE__ */ import_react61.default.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ import_react61.default.createElement(Button.Icon, {
+      "aria-label": menuLabel,
       icon: import_more2.default
     })), (0, import_isFunction2.default)(menu) ? menu(row, index) : menu)))
   })));
 };
 
 // src/molecules/Dialog/Dialog.tsx
-var import_react62 = __toESM(require("react"));
+var import_react63 = __toESM(require("react"));
 var import_dialog = require("@react-aria/dialog");
 var import_overlays6 = require("@react-aria/overlays");
 var import_utils8 = require("@react-aria/utils");
@@ -6359,10 +6375,10 @@ var DIALOG_ICONS_AND_COLORS = {
 };
 
 // src/atoms/Modal/Modal.tsx
-var import_react61 = __toESM(require("react"));
+var import_react62 = __toESM(require("react"));
 var Modal = (_a) => {
   var _b = _a, { children, className, open } = _b, rest = __objRest(_b, ["children", "className", "open"]);
-  return open ? /* @__PURE__ */ import_react61.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return open ? /* @__PURE__ */ import_react62.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       tw("inset-0 overflow-y-auto z-modal flex justify-center items-center fixed py-7"),
       className
@@ -6371,14 +6387,14 @@ var Modal = (_a) => {
 };
 Modal.BackDrop = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ import_react61.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react62.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("-z-10 fixed min-w-full min-h-full bg-navyBlue-100 opacity-70"), className)
   }));
 };
-Modal.Dialog = import_react61.default.forwardRef(
+Modal.Dialog = import_react62.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { children, className, size = "sm" } = _b, rest = __objRest(_b, ["children", "className", "size"]);
-    return /* @__PURE__ */ import_react61.default.createElement("div", __spreadProps(__spreadValues({
+    return /* @__PURE__ */ import_react62.default.createElement("div", __spreadProps(__spreadValues({
       ref,
       "aria-modal": "true"
     }, rest), {
@@ -6396,31 +6412,31 @@ Modal.Dialog = import_react61.default.forwardRef(
 );
 Modal.Header = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ import_react61.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react62.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("px-7 py-6 gap-3 flex items-center"), className)
   }), children);
 };
 Modal.HeaderImage = (_a) => {
   var _b = _a, { backgroundImage, className } = _b, rest = __objRest(_b, ["backgroundImage", "className"]);
   const common = tw("h-[120px] min-h-[120px] w-full ");
-  return backgroundImage ? /* @__PURE__ */ import_react61.default.createElement("img", __spreadProps(__spreadValues({
+  return backgroundImage ? /* @__PURE__ */ import_react62.default.createElement("img", __spreadProps(__spreadValues({
     "aria-hidden": true,
     src: backgroundImage != null ? backgroundImage : void 0
   }, rest), {
     className: classNames(common, tw("object-cover"), className)
-  })) : /* @__PURE__ */ import_react61.default.createElement("div", {
+  })) : /* @__PURE__ */ import_react62.default.createElement("div", {
     className: classNames(common, tw("bg-grey-5"), className)
   });
 };
 Modal.CloseButtonContainer = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ import_react61.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react62.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("absolute top-[20px] right-[28px]"), className)
   }));
 };
 Modal.Title = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ import_react61.default.createElement(Typography, __spreadValues({
+  return /* @__PURE__ */ import_react62.default.createElement(Typography, __spreadValues({
     htmlTag: "h2",
     variant: "subheading",
     color: "grey-90",
@@ -6429,51 +6445,51 @@ Modal.Title = (_a) => {
 };
 Modal.Subtitle = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ import_react61.default.createElement(Typography, __spreadValues({
+  return /* @__PURE__ */ import_react62.default.createElement(Typography, __spreadValues({
     variant: "small",
     color: "grey-60"
   }, rest), children);
 };
 Modal.TitleContainer = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ import_react61.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react62.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("flex flex-col grow gap-2"), className)
   }), children);
 };
 Modal.Body = (_a) => {
   var _b = _a, { children, className, noFooter = false, maxHeight, style } = _b, rest = __objRest(_b, ["children", "className", "noFooter", "maxHeight", "style"]);
-  return /* @__PURE__ */ import_react61.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react62.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("px-7 grow overflow-y-auto", { "pb-6": noFooter }), className),
     style: __spreadValues({ maxHeight }, style)
   }), children);
 };
 Modal.Footer = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ import_react61.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react62.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("px-7 py-6"), className)
   }), children);
 };
 Modal.Actions = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ import_react61.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react62.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("flex gap-4 justify-end"), className)
   }), children);
 };
 
 // src/molecules/Dialog/Dialog.tsx
 var Dialog = (props) => {
-  const ref = import_react62.default.useRef(null);
+  const ref = import_react63.default.useRef(null);
   const state = (0, import_overlays7.useOverlayTriggerState)({ isOpen: props.open });
   const { modalProps, underlayProps } = (0, import_overlays6.useModalOverlay)({}, state, ref);
   if (!state.isOpen) {
     return null;
   }
-  return /* @__PURE__ */ import_react62.default.createElement(import_overlays6.Overlay, null, /* @__PURE__ */ import_react62.default.createElement(Modal, {
+  return /* @__PURE__ */ import_react63.default.createElement(import_overlays6.Overlay, null, /* @__PURE__ */ import_react63.default.createElement(Modal, {
     open: true
-  }, /* @__PURE__ */ import_react62.default.createElement(Modal.BackDrop, __spreadValues({}, underlayProps)), /* @__PURE__ */ import_react62.default.createElement(Modal.Dialog, __spreadValues({
+  }, /* @__PURE__ */ import_react63.default.createElement(Modal.BackDrop, __spreadValues({}, underlayProps)), /* @__PURE__ */ import_react63.default.createElement(Modal.Dialog, __spreadValues({
     ref,
     size: "sm"
-  }, modalProps), /* @__PURE__ */ import_react62.default.createElement(DialogWrapper, __spreadValues({}, props)))));
+  }, modalProps), /* @__PURE__ */ import_react63.default.createElement(DialogWrapper, __spreadValues({}, props)))));
 };
 var DialogWrapper = ({
   title,
@@ -6482,36 +6498,36 @@ var DialogWrapper = ({
   primaryAction,
   secondaryAction
 }) => {
-  const ref = import_react62.default.useRef(null);
+  const ref = import_react63.default.useRef(null);
   const labelledBy = (0, import_utils8.useId)();
   const describedBy = (0, import_utils8.useId)();
   const { dialogProps } = (0, import_dialog.useDialog)(
     { "role": "alertdialog", "aria-labelledby": labelledBy, "aria-describedby": describedBy },
     ref
   );
-  return /* @__PURE__ */ import_react62.default.createElement("div", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ import_react63.default.createElement("div", __spreadProps(__spreadValues({
     ref
   }, dialogProps), {
     className: tw("outline-none")
-  }), /* @__PURE__ */ import_react62.default.createElement(Modal.Header, null, /* @__PURE__ */ import_react62.default.createElement(Icon, {
+  }), /* @__PURE__ */ import_react63.default.createElement(Modal.Header, null, /* @__PURE__ */ import_react63.default.createElement(Icon, {
     icon: DIALOG_ICONS_AND_COLORS[type].icon,
     color: DIALOG_ICONS_AND_COLORS[type].color,
     fontSize: 20
-  }), /* @__PURE__ */ import_react62.default.createElement(Modal.Title, {
+  }), /* @__PURE__ */ import_react63.default.createElement(Modal.Title, {
     id: labelledBy,
     variant: "large-strong",
     color: DIALOG_ICONS_AND_COLORS[type].color
-  }, title)), /* @__PURE__ */ import_react62.default.createElement(Modal.Body, {
+  }, title)), /* @__PURE__ */ import_react63.default.createElement(Modal.Body, {
     id: describedBy
-  }, children), /* @__PURE__ */ import_react62.default.createElement(Modal.Footer, null, /* @__PURE__ */ import_react62.default.createElement(Modal.Actions, null, secondaryAction && /* @__PURE__ */ import_react62.default.createElement(Button.Ghost, __spreadValues({
+  }, children), /* @__PURE__ */ import_react63.default.createElement(Modal.Footer, null, /* @__PURE__ */ import_react63.default.createElement(Modal.Actions, null, secondaryAction && /* @__PURE__ */ import_react63.default.createElement(Button.Ghost, __spreadValues({
     key: secondaryAction.text
-  }, (0, import_omit7.default)(secondaryAction, "text")), secondaryAction.text), /* @__PURE__ */ import_react62.default.createElement(Button.Secondary, __spreadValues({
+  }, (0, import_omit7.default)(secondaryAction, "text")), secondaryAction.text), /* @__PURE__ */ import_react63.default.createElement(Button.Secondary, __spreadValues({
     key: primaryAction.text
   }, (0, import_omit7.default)(primaryAction, "text")), primaryAction.text))));
 };
 
 // src/molecules/Divider/Divider.tsx
-var import_react63 = __toESM(require("react"));
+var import_react64 = __toESM(require("react"));
 var sizeClasses = {
   horizontal: {
     1: "h-1px",
@@ -6533,7 +6549,7 @@ var sizeClasses = {
 var Divider2 = (_a) => {
   var _b = _a, { direction = "horizontal", size = 1 } = _b, props = __objRest(_b, ["direction", "size"]);
   const sizeClass = sizeClasses[direction][size];
-  return /* @__PURE__ */ import_react63.default.createElement("div", __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ import_react64.default.createElement("div", __spreadProps(__spreadValues({}, props), {
     className: tw(`bg-grey-5 ${sizeClass}`, {
       "block w-full": direction === "horizontal",
       "inline-block h-full": direction === "vertical"
@@ -6542,22 +6558,22 @@ var Divider2 = (_a) => {
 };
 
 // src/molecules/Dropdown/Dropdown.tsx
-var import_react67 = __toESM(require("react"));
+var import_react68 = __toESM(require("react"));
 
 // src/molecules/Popover/Popover.tsx
-var import_react66 = __toESM(require("react"));
+var import_react67 = __toESM(require("react"));
 var import_interactions3 = require("@react-aria/interactions");
 var import_overlays8 = require("@react-aria/overlays");
 var import_utils9 = require("@react-aria/utils");
 var import_overlays9 = require("@react-stately/overlays");
 
 // src/molecules/Popover/Dialog.tsx
-var import_react64 = __toESM(require("react"));
+var import_react65 = __toESM(require("react"));
 var import_dialog2 = require("@react-aria/dialog");
 var Dialog2 = ({ children }) => {
-  const ref = import_react64.default.useRef(null);
+  const ref = import_react65.default.useRef(null);
   const { dialogProps } = (0, import_dialog2.useDialog)({}, ref);
-  return /* @__PURE__ */ import_react64.default.createElement("div", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ import_react65.default.createElement("div", __spreadProps(__spreadValues({
     ref
   }, dialogProps), {
     className: tw("outline-none")
@@ -6565,10 +6581,10 @@ var Dialog2 = ({ children }) => {
 };
 
 // src/molecules/Popover/PopoverContext.tsx
-var import_react65 = require("react");
-var PopoverContext = (0, import_react65.createContext)(null);
+var import_react66 = require("react");
+var PopoverContext = (0, import_react66.createContext)(null);
 var usePopoverContext = () => {
-  const ctx = (0, import_react65.useContext)(PopoverContext);
+  const ctx = (0, import_react66.useContext)(PopoverContext);
   if (ctx === null) {
     throw new Error("PopoverContext was used outside of provider.");
   }
@@ -6588,24 +6604,24 @@ var Popover2 = (props) => {
     crossOffset,
     shouldFlip
   } = props;
-  const triggerRef = (0, import_react66.useRef)(null);
+  const triggerRef = (0, import_react67.useRef)(null);
   const state = (0, import_overlays9.useOverlayTriggerState)(props);
   const { triggerProps, overlayProps } = (0, import_overlays8.useOverlayTrigger)({ type: type != null ? type : "dialog" }, state, triggerRef);
-  return /* @__PURE__ */ import_react66.default.createElement(PopoverContext.Provider, {
+  return /* @__PURE__ */ import_react67.default.createElement(PopoverContext.Provider, {
     value: {
       state
     }
-  }, import_react66.default.Children.map(props.children, (child) => {
+  }, import_react67.default.Children.map(props.children, (child) => {
     if (isComponentType(child, Popover2.Trigger)) {
-      return /* @__PURE__ */ import_react66.default.createElement(import_interactions3.PressResponder, __spreadValues({
+      return /* @__PURE__ */ import_react67.default.createElement(import_interactions3.PressResponder, __spreadValues({
         ref: triggerRef
-      }, triggerProps), /* @__PURE__ */ import_react66.default.createElement(PopoverTriggerWrapper, {
+      }, triggerProps), /* @__PURE__ */ import_react67.default.createElement(PopoverTriggerWrapper, {
         "data-testid": props["data-testid"],
         "aria-controls": id
       }, child.props.children));
     }
     if (isComponentType(child, Popover2.Panel)) {
-      return state.isOpen && /* @__PURE__ */ import_react66.default.createElement(PopoverOverlay, __spreadValues({
+      return state.isOpen && /* @__PURE__ */ import_react67.default.createElement(PopoverOverlay, __spreadValues({
         triggerRef: targetRef != null ? targetRef : triggerRef,
         state,
         placement,
@@ -6616,7 +6632,7 @@ var Popover2 = (props) => {
         offset,
         crossOffset,
         shouldFlip
-      }, overlayProps), containFocus ? /* @__PURE__ */ import_react66.default.createElement(Dialog2, null, child.props.children) : child.props.children);
+      }, overlayProps), containFocus ? /* @__PURE__ */ import_react67.default.createElement(Dialog2, null, child.props.children) : child.props.children);
     }
     throw new Error("Invalid children element type");
   }));
@@ -6635,7 +6651,7 @@ var asPopoverButton = (Component, displayName) => {
       state.close();
       onClick == null ? void 0 : onClick(e);
     };
-    return /* @__PURE__ */ import_react66.default.createElement(Component, __spreadProps(__spreadValues({}, props), {
+    return /* @__PURE__ */ import_react67.default.createElement(Component, __spreadProps(__spreadValues({}, props), {
       onClick: handleClick
     }));
   };
@@ -6647,10 +6663,10 @@ Popover2.Button = PopoverButton;
 var PopoverTriggerWrapper = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
   var _a2;
-  const ref = (0, import_react66.useRef)(null);
-  const trigger = import_react66.default.Children.only(children);
+  const ref = (0, import_react67.useRef)(null);
+  const trigger = import_react67.default.Children.only(children);
   const { pressProps } = (0, import_interactions3.usePress)(__spreadProps(__spreadValues({}, rest), { ref }));
-  return import_react66.default.cloneElement(trigger, __spreadProps(__spreadValues({
+  return import_react67.default.cloneElement(trigger, __spreadProps(__spreadValues({
     "ref": ref
   }, (0, import_utils9.mergeProps)(pressProps, trigger.props)), {
     "aria-controls": (_a2 = rest["aria-controls"]) != null ? _a2 : pressProps["aria-controls"]
@@ -6659,10 +6675,10 @@ var PopoverTriggerWrapper = (_a) => {
 
 // src/molecules/Dropdown/Dropdown.tsx
 var Dropdown = ({ children, content, placement = "bottom-left" }) => {
-  return /* @__PURE__ */ import_react67.default.createElement(Popover2, {
+  return /* @__PURE__ */ import_react68.default.createElement(Popover2, {
     type: "menu",
     placement
-  }, /* @__PURE__ */ import_react67.default.createElement(Popover2.Trigger, null, children), /* @__PURE__ */ import_react67.default.createElement(Popover2.Panel, null, content));
+  }, /* @__PURE__ */ import_react68.default.createElement(Popover2.Trigger, null, children), /* @__PURE__ */ import_react68.default.createElement(Popover2.Panel, null, content));
 };
 var DropdownMenu3 = ({
   title,
@@ -6671,26 +6687,26 @@ var DropdownMenu3 = ({
   triggerId,
   setClose = () => void 0
 }) => {
-  const menuRef = import_react67.default.useRef(null);
-  import_react67.default.useEffect(() => {
+  const menuRef = import_react68.default.useRef(null);
+  import_react68.default.useEffect(() => {
     const id = setTimeout(() => {
       var _a, _b, _c;
       return (_c = (_b = (_a = menuRef.current) == null ? void 0 : _a.children) == null ? void 0 : _b[0]) == null ? void 0 : _c.focus();
     });
     return () => clearTimeout(id);
   }, [menuRef.current]);
-  return /* @__PURE__ */ import_react67.default.createElement("div", {
+  return /* @__PURE__ */ import_react68.default.createElement("div", {
     style: { minWidth: "250px" },
     className: tw("py-3 bg-white")
-  }, !!title && /* @__PURE__ */ import_react67.default.createElement("div", {
+  }, !!title && /* @__PURE__ */ import_react68.default.createElement("div", {
     className: tw("px-4 py-4 text-left text-grey-100 typography-default-strong")
-  }, title), /* @__PURE__ */ import_react67.default.createElement("ol", {
+  }, title), /* @__PURE__ */ import_react68.default.createElement("ol", {
     role: "menu",
     ref: menuRef,
     id: contentId,
     "aria-labelledby": triggerId
-  }, import_react67.default.Children.map(children, (child) => {
-    return import_react67.default.cloneElement(child, { setClose });
+  }, import_react68.default.Children.map(children, (child) => {
+    return import_react68.default.cloneElement(child, { setClose });
   })));
 };
 var DropdownItem = (_a) => {
@@ -6745,10 +6761,10 @@ var DropdownItem = (_a) => {
       handleSelect();
     }
   };
-  const itemContent = /* @__PURE__ */ import_react67.default.createElement("div", {
+  const itemContent = /* @__PURE__ */ import_react68.default.createElement("div", {
     className: tw("py-3 px-4")
   }, children);
-  return /* @__PURE__ */ import_react67.default.createElement("li", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ import_react68.default.createElement("li", __spreadProps(__spreadValues({
     role: "menuitem",
     tabIndex: -1,
     onClick: handleClick,
@@ -6759,11 +6775,11 @@ var DropdownItem = (_a) => {
       "text-grey-10 cursor-not-allowed": disabled,
       "text-primary-70 hover:text-primary-80": color === "danger" && !disabled
     })
-  }), tooltip ? /* @__PURE__ */ import_react67.default.createElement(Tooltip, {
+  }), tooltip ? /* @__PURE__ */ import_react68.default.createElement(Tooltip, {
     content: tooltip,
     placement: tooltipPlacement,
     inline: false
-  }, /* @__PURE__ */ import_react67.default.createElement("div", {
+  }, /* @__PURE__ */ import_react68.default.createElement("div", {
     tabIndex: 0,
     className: tw("grow")
   }, itemContent)) : itemContent);
@@ -6772,11 +6788,11 @@ Dropdown.Menu = DropdownMenu3;
 Dropdown.Item = DropdownItem;
 
 // src/molecules/EmptyState/EmptyState.tsx
-var import_react69 = __toESM(require("react"));
+var import_react70 = __toESM(require("react"));
 var import_omit8 = __toESM(require("lodash/omit"));
 
 // src/molecules/Flexbox/FlexboxItem.tsx
-var import_react68 = __toESM(require("react"));
+var import_react69 = __toESM(require("react"));
 var FlexboxItem = Tailwindify(
   ({ htmlTag = "div", className, style, children, display, flex, grow, shrink, order, alignSelf }) => {
     const hookStyle = useStyle({
@@ -6788,7 +6804,7 @@ var FlexboxItem = Tailwindify(
       alignSelf
     });
     const HtmlElement = htmlTag;
-    return /* @__PURE__ */ import_react68.default.createElement(HtmlElement, {
+    return /* @__PURE__ */ import_react69.default.createElement(HtmlElement, {
       style: __spreadValues(__spreadValues({}, hookStyle), style),
       className
     }, children);
@@ -6846,7 +6862,7 @@ var EmptyState = ({
   borderStyle = "dashed"
 }) => {
   const template = layoutStyle(layout);
-  return /* @__PURE__ */ import_react69.default.createElement(Box, {
+  return /* @__PURE__ */ import_react70.default.createElement(Box, {
     className: classNames(
       tw("rounded", {
         "border border-dashed": borderStyle === "dashed",
@@ -6858,38 +6874,38 @@ var EmptyState = ({
     backgroundColor: "transparent",
     borderColor: "grey-10",
     padding: "9"
-  }, /* @__PURE__ */ import_react69.default.createElement(Flexbox, {
+  }, /* @__PURE__ */ import_react70.default.createElement(Flexbox, {
     direction: template.layout,
     justifyContent: template.justifyContent,
     alignItems: template.layout === "row" ? "center" : template.alignItems,
     colGap: "l5",
     rowGap: "8"
-  }, image && /* @__PURE__ */ import_react69.default.createElement(FlexboxItem, null, /* @__PURE__ */ import_react69.default.createElement("img", {
+  }, image && /* @__PURE__ */ import_react70.default.createElement(FlexboxItem, null, /* @__PURE__ */ import_react70.default.createElement("img", {
     src: image,
     alt: imageAlt,
     style: { width: imageWidth ? `${imageWidth}px` : void 0, height: "auto" }
-  })), /* @__PURE__ */ import_react69.default.createElement(Flexbox, {
+  })), /* @__PURE__ */ import_react70.default.createElement(Flexbox, {
     style: { maxWidth: "610px" },
     direction: "column",
     justifyContent: template.justifyContent,
     alignItems: template.alignItems
-  }, /* @__PURE__ */ import_react69.default.createElement(Typography2, {
+  }, /* @__PURE__ */ import_react70.default.createElement(Typography2, {
     variant: "heading",
     htmlTag: "h2"
-  }, title), (description || children) && /* @__PURE__ */ import_react69.default.createElement(Box, {
+  }, title), (description || children) && /* @__PURE__ */ import_react70.default.createElement(Box, {
     marginTop: "5"
-  }, /* @__PURE__ */ import_react69.default.createElement(Typography2, {
+  }, /* @__PURE__ */ import_react70.default.createElement(Typography2, {
     variant: "default",
     color: "grey-60"
-  }, children || description)), (secondaryAction || primaryAction) && /* @__PURE__ */ import_react69.default.createElement(Flexbox, {
+  }, children || description)), (secondaryAction || primaryAction) && /* @__PURE__ */ import_react70.default.createElement(Flexbox, {
     marginTop: "7",
     gap: "4",
     justifyContent: "center",
     alignItems: "center",
     wrap: "wrap"
-  }, primaryAction && /* @__PURE__ */ import_react69.default.createElement(Button.Primary, __spreadValues({}, (0, import_omit8.default)(primaryAction, "text")), primaryAction.text), secondaryAction && /* @__PURE__ */ import_react69.default.createElement(Button.Secondary, __spreadValues({}, (0, import_omit8.default)(secondaryAction, "text")), secondaryAction.text)), footer && /* @__PURE__ */ import_react69.default.createElement(Box, {
+  }, primaryAction && /* @__PURE__ */ import_react70.default.createElement(Button.Primary, __spreadValues({}, (0, import_omit8.default)(primaryAction, "text")), primaryAction.text), secondaryAction && /* @__PURE__ */ import_react70.default.createElement(Button.Secondary, __spreadValues({}, (0, import_omit8.default)(secondaryAction, "text")), secondaryAction.text)), footer && /* @__PURE__ */ import_react70.default.createElement(Box, {
     marginTop: "7"
-  }, /* @__PURE__ */ import_react69.default.createElement(Typography2, {
+  }, /* @__PURE__ */ import_react70.default.createElement(Typography2, {
     htmlTag: "div",
     variant: "small",
     color: "grey-60"
@@ -6897,7 +6913,7 @@ var EmptyState = ({
 };
 
 // src/molecules/Grid/GridItem.tsx
-var import_react70 = __toESM(require("react"));
+var import_react71 = __toESM(require("react"));
 var GridItem = Tailwindify(
   ({
     htmlTag = "div",
@@ -6928,7 +6944,7 @@ var GridItem = Tailwindify(
       gridRowEnd: rowEnd
     });
     const HtmlElement = htmlTag;
-    return /* @__PURE__ */ import_react70.default.createElement(HtmlElement, {
+    return /* @__PURE__ */ import_react71.default.createElement(HtmlElement, {
       style: __spreadValues(__spreadValues({}, hookStyle), style),
       className
     }, children);
@@ -6936,7 +6952,7 @@ var GridItem = Tailwindify(
 );
 
 // src/molecules/LineClamp/LineClamp.tsx
-var import_react71 = __toESM(require("react"));
+var import_react72 = __toESM(require("react"));
 var LineClamp2 = ({
   lines,
   children,
@@ -6945,10 +6961,10 @@ var LineClamp2 = ({
   collapseLabel,
   onClampedChange
 }) => {
-  const ref = import_react71.default.useRef(null);
-  const [clamped, setClamped] = import_react71.default.useState(true);
-  const [isClampingEnabled, setClampingEnabled] = import_react71.default.useState(false);
-  import_react71.default.useEffect(() => {
+  const ref = import_react72.default.useRef(null);
+  const [clamped, setClamped] = import_react72.default.useState(true);
+  const [isClampingEnabled, setClampingEnabled] = import_react72.default.useState(false);
+  import_react72.default.useEffect(() => {
     var _a, _b;
     const el = ref.current;
     setClampingEnabled(((_a = el == null ? void 0 : el.scrollHeight) != null ? _a : 0) > ((_b = el == null ? void 0 : el.clientHeight) != null ? _b : 0));
@@ -6957,38 +6973,31 @@ var LineClamp2 = ({
     setClamped(!clamped);
     onClampedChange == null ? void 0 : onClampedChange(!clamped);
   };
-  return /* @__PURE__ */ import_react71.default.createElement("div", null, /* @__PURE__ */ import_react71.default.createElement(LineClamp, {
+  return /* @__PURE__ */ import_react72.default.createElement("div", null, /* @__PURE__ */ import_react72.default.createElement(LineClamp, {
     ref,
     lines,
     clamped,
     wordBreak
-  }, children), expandLabel && isClampingEnabled && /* @__PURE__ */ import_react71.default.createElement(Button.Ghost, {
+  }, children), expandLabel && isClampingEnabled && /* @__PURE__ */ import_react72.default.createElement(Button.Ghost, {
     dense: true,
     onClick: handleClampedChange
   }, clamped ? expandLabel : collapseLabel));
 };
 
 // src/molecules/Link/Link.tsx
-var import_react73 = __toESM(require("react"));
+var import_react74 = __toESM(require("react"));
 
 // src/atoms/Link/Link.tsx
-var import_react72 = __toESM(require("react"));
+var import_react73 = __toESM(require("react"));
 var Link = (_a) => {
   var _b = _a, { children, className } = _b, props = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ import_react72.default.createElement("a", __spreadValues({
+  return /* @__PURE__ */ import_react73.default.createElement("a", __spreadValues({
     className: classNames(className, linkStyle)
   }, props), children);
 };
 
 // src/molecules/Link/Link.tsx
-var Link2 = (props) => /* @__PURE__ */ import_react73.default.createElement(Link, __spreadValues({}, props));
-
-// src/molecules/List/List.tsx
-var import_react74 = __toESM(require("react"));
-var List2 = ({ items, renderItem, container = import_react74.default.Fragment }) => {
-  const Component = container;
-  return /* @__PURE__ */ import_react74.default.createElement(Component, null, items.map(renderItem));
-};
+var Link2 = (props) => /* @__PURE__ */ import_react74.default.createElement(Link, __spreadValues({}, props));
 
 // src/molecules/ListItem/ListItem.tsx
 var import_react75 = __toESM(require("react"));
@@ -7316,7 +7325,7 @@ var Modal2 = (_a) => {
   const ref = import_react77.default.useRef(null);
   const state = (0, import_overlays11.useOverlayTriggerState)({ isOpen: open, onOpenChange: (isOpen) => !isOpen && onClose() });
   const { modalProps, underlayProps } = (0, import_overlays10.useModalOverlay)(
-    { isDismissable: true, isKeyboardDismissDisabled: !closeOnEsc },
+    { isDismissable: false, isKeyboardDismissDisabled: !closeOnEsc },
     state,
     ref
   );
@@ -7398,22 +7407,31 @@ var InputChip = import_react78.default.forwardRef(
         _onClick == null ? void 0 : _onClick(e);
       }
     };
-    return /* @__PURE__ */ import_react78.default.createElement("div", __spreadValues({
-      ref,
-      role: "button",
-      className: classNames(className, "inline-flex align-middle mx-1 px-2 py-1 items-center rounded-sm break-all", {
+    return /* @__PURE__ */ import_react78.default.createElement("div", {
+      className: classNames(className, "inline-flex align-middle mx-1 items-stretch rounded-sm break-all", {
         "bg-error-0 ": invalid,
-        "bg-grey-0": !invalid && !disabled,
-        "cursor-default": readOnly,
-        "bg-grey-5 pointer-events-none": disabled
-      }),
-      onClick
-    }, props), /* @__PURE__ */ import_react78.default.createElement(Typography2, {
+        "bg-grey-0 ": !invalid && !disabled,
+        "bg-grey-5": disabled
+      })
+    }, /* @__PURE__ */ import_react78.default.createElement("div", {
+      className: tw("px-2 py-1")
+    }, /* @__PURE__ */ import_react78.default.createElement(Typography2, {
       variant: "small",
       color: invalid ? "error-80" : disabled ? "grey-40" : "grey-70"
-    }, children), !readOnly && /* @__PURE__ */ import_react78.default.createElement("div", null, /* @__PURE__ */ import_react78.default.createElement(Icon, {
+    }, children)), !readOnly && /* @__PURE__ */ import_react78.default.createElement("div", __spreadProps(__spreadValues({
+      ref
+    }, props), {
+      onClick,
+      className: tw("flex items-center p-1", {
+        "pointer-events-none": !!disabled,
+        "hover:bg-error-10 focus:bg-error-20": invalid,
+        "hover:bg-grey-10 focus:bg-grey-20": !invalid && !disabled
+      }),
+      role: "button",
+      "aria-label": `Remove ${children}`
+    }), /* @__PURE__ */ import_react78.default.createElement(Icon, {
       icon: import_smallCross.default,
-      className: tw("ml-2", {
+      className: tw({
         "text-error-70": invalid,
         "text-grey-70": !invalid
       })
@@ -8004,12 +8022,15 @@ var Footer = (_a) => {
   }));
 };
 var Section2 = (_a) => {
-  var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
+  var _b = _a, { title, className } = _b, rest = __objRest(_b, ["title", "className"]);
   return /* @__PURE__ */ import_react82.default.createElement("li", {
-    role: "presentation"
-  }, /* @__PURE__ */ import_react82.default.createElement("ul", __spreadProps(__spreadValues({}, rest), {
+    role: "presentation",
+    className: tw("py-5")
+  }, title && /* @__PURE__ */ import_react82.default.createElement("div", {
+    className: classNames(className, "py-2 px-6 text-grey-40 uppercase cursor-default typography-caption")
+  }, title), /* @__PURE__ */ import_react82.default.createElement("ul", __spreadProps(__spreadValues({}, rest), {
     role: "group",
-    className: classNames(tw(" py-5 flex flex-col"), className)
+    className: classNames(tw("flex flex-col"), className)
   })));
 };
 var Divider3 = (_a) => {
@@ -8116,7 +8137,9 @@ var PageHeader2 = ({
   chips = [],
   breadcrumbs
 }) => {
-  return /* @__PURE__ */ import_react85.default.createElement(PageHeader, null, /* @__PURE__ */ import_react85.default.createElement(PageHeader.Container, null, breadcrumbs && /* @__PURE__ */ import_react85.default.createElement(Breadcrumbs, null, breadcrumbs), /* @__PURE__ */ import_react85.default.createElement(Flexbox, {
+  return /* @__PURE__ */ import_react85.default.createElement(PageHeader, null, /* @__PURE__ */ import_react85.default.createElement(PageHeader.Container, null, breadcrumbs && /* @__PURE__ */ import_react85.default.createElement(Box, {
+    marginBottom: image ? "3" : void 0
+  }, /* @__PURE__ */ import_react85.default.createElement(Breadcrumbs, null, breadcrumbs)), /* @__PURE__ */ import_react85.default.createElement(Flexbox, {
     gap: "5"
   }, image && /* @__PURE__ */ import_react85.default.createElement("img", {
     src: image,