@aivenio/aquarium 1.37.0 → 1.38.1

package/dist/system.cjs

@@ -1734,6 +1734,22 @@ var require_banCircle = __commonJS({
   }
 });
 
+// src/icons/ban.js
+var require_ban = __commonJS({
+  "src/icons/ban.js"(exports) {
+    "use strict";
+    var data = {
+      "body": '<g fill="none"><g clip-path="url(#svgIDa)"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m2.13 2.13 5.892 5.892m1.22-2.946a4.167 4.167 0 11-8.333 0 4.167 4.167 0 018.333 0Z"/></g><defs><clipPath id="svgIDa"><path fill="#fff" d="M0 0h10v10H0z"/></clipPath></defs></g>',
+      "left": 0,
+      "top": 0,
+      "width": 10,
+      "height": 10
+    };
+    exports.__esModule = true;
+    exports.default = data;
+  }
+});
+
 // src/icons/bankAccount.js
 var require_bankAccount = __commonJS({
   "src/icons/bankAccount.js"(exports) {
@@ -5024,7 +5040,7 @@ __export(system_exports, {
   FormControl: () => FormControl,
   GhostButton: () => GhostButton,
   Grid: () => Grid,
-  GridItem: () => GridItem,
+  GridItem: () => GridItem2,
   HelperText: () => HelperText,
   Icon: () => Icon,
   IconButton: () => IconButton,
@@ -5169,7 +5185,7 @@ __export(molecules_exports, {
   FlexboxItem: () => FlexboxItem,
   GhostButton: () => GhostButton,
   Grid: () => Grid,
-  GridItem: () => GridItem,
+  GridItem: () => GridItem2,
   Icon: () => Icon,
   IconButton: () => IconButton,
   IconExternalLinkButton: () => IconExternalLinkButton,
@@ -6367,6 +6383,7 @@ var import_attachment = __toESM(require_attachment());
 var import_automaticUpdates = __toESM(require_automaticUpdates());
 var import_badge = __toESM(require_badge());
 var import_banCircle = __toESM(require_banCircle());
+var import_ban = __toESM(require_ban());
 var import_bankAccount = __toESM(require_bankAccount());
 var import_blockedPerson = __toESM(require_blockedPerson());
 var import_book = __toESM(require_book());
@@ -7430,7 +7447,7 @@ var Typography = (_a) => {
     "fontWeight"
   ]);
   const HtmlElement = htmlTag;
-  const resolvedColorName = (0, import_isUndefined6.default)(color) || color === "current" ? "grey-80" : color;
+  const resolvedColorName = (0, import_isUndefined6.default)(color) || color === "current" ? "grey-70" : color;
   const style = useStyle({ fontWeight });
   return /* @__PURE__ */ import_react20.default.createElement(HtmlElement, __spreadValues({
     className: classNames(typographies[variant], `text-${resolvedColorName}`, className),
@@ -7724,7 +7741,6 @@ Banner.Description = (_a) => {
   var _b = _a, { flexGrow, children, className } = _b, rest = __objRest(_b, ["flexGrow", "children", "className"]);
   return /* @__PURE__ */ import_react26.default.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
     variant: "default",
-    color: "grey-90",
     className: classNames(className, tw({ "flex-grow": flexGrow }))
   }), children);
 };
@@ -8532,7 +8548,7 @@ var ControlLabel = (_a) => {
     "style",
     "className"
   ]);
-  const textClass = disabled ? "text-grey-40" : "text-grey-100";
+  const textClass = disabled ? "text-grey-40" : "text-grey-70";
   const rtl = labelPlacement === "left";
   const labelEl = label && /* @__PURE__ */ import_react38.default.createElement("span", {
     className: tw("typography-small self-center", { "text-right": rtl })
@@ -8670,7 +8686,66 @@ var import_react42 = __toESM(require("react"));
 
 // src/molecules/Grid/Grid.tsx
 var import_react41 = __toESM(require("react"));
-var Grid = Tailwindify(
+var import_isEmpty = __toESM(require("lodash/isEmpty"));
+var import_mapValues = __toESM(require("lodash/mapValues"));
+var import_pick = __toESM(require("lodash/pick"));
+var screenSizes = Object.keys(tailwind_theme_default.screens);
+var GridItem = Tailwindify(
+  (_a) => {
+    var _b = _a, {
+      htmlTag = "div",
+      className,
+      style,
+      children,
+      display,
+      justifySelf,
+      alignSelf,
+      placeSelf,
+      colStart,
+      colEnd,
+      rowSpan,
+      rowStart,
+      rowEnd
+    } = _b, props = __objRest(_b, [
+      "htmlTag",
+      "className",
+      "style",
+      "children",
+      "display",
+      "justifySelf",
+      "alignSelf",
+      "placeSelf",
+      "colStart",
+      "colEnd",
+      "rowSpan",
+      "rowStart",
+      "rowEnd"
+    ]);
+    const breakPointableProperties = (0, import_pick.default)(props, screenSizes);
+    const gridColumn = !(0, import_isEmpty.default)(breakPointableProperties) ? (0, import_mapValues.default)(breakPointableProperties, (value) => value === "full" ? "1 / -1" : value ? `span-${value}` : "auto") : void 0;
+    const hookStyle = useStyle({
+      display,
+      justifySelf,
+      alignSelf,
+      placeSelf,
+      gridColumn,
+      gridColumnStart: colStart,
+      gridColumnEnd: colEnd,
+      gridRow: rowSpan,
+      gridRowStart: rowStart,
+      gridRowEnd: rowEnd
+    });
+    const HtmlElement = htmlTag;
+    return /* @__PURE__ */ import_react41.default.createElement(HtmlElement, {
+      style: __spreadValues(__spreadValues({}, hookStyle), style),
+      className
+    }, children);
+  }
+);
+var Grid = (props) => {
+  return /* @__PURE__ */ import_react41.default.createElement(GridComponent, __spreadValues({}, props));
+};
+var GridComponent = Tailwindify(
   ({
     htmlTag = "div",
     className,
@@ -8728,6 +8803,7 @@ var Grid = Tailwindify(
     }, children);
   }
 );
+Grid.Item = GridItem;
 
 // src/atoms/InputGroup/InputGroup.tsx
 var gridColumnStyles = {
@@ -8801,13 +8877,13 @@ var HelperText = ({
     alignItems: "start",
     autoCols: "min",
     className: tw("mt-1 mb-3")
-  }, /* @__PURE__ */ import_react45.default.createElement(GridItem, {
+  }, /* @__PURE__ */ import_react45.default.createElement(GridItem2, {
     colStart: "1",
     colEnd: "2"
   }, hasError && /* @__PURE__ */ import_react45.default.createElement("p", {
     id: messageId,
     className: tw("text-error-50 block typography-caption")
-  }, helperText)), /* @__PURE__ */ import_react45.default.createElement(GridItem, {
+  }, helperText)), /* @__PURE__ */ import_react45.default.createElement(GridItem2, {
     colStart: "2",
     colEnd: "3",
     display: "flex"
@@ -8837,7 +8913,7 @@ var LabelText = ({
     className: tw("block mb-2")
   }, /* @__PURE__ */ import_react46.default.createElement("span", {
     className: tw("inline-flex items-center typography-small-strong", {
-      "text-grey-60": variant === "default",
+      "text-grey-70": variant === "default",
       "text-error-50": variant === "error",
       "text-grey-40": variant === "disabled"
     })
@@ -9165,6 +9241,7 @@ var ComboboxBase = (_a) => {
     options,
     optionKeys = ["label", "value"],
     noResults,
+    emptyState = noResults,
     optionToString: itemToString = getOptionLabelBuiltin,
     createOption,
     renderOption = (opt) => itemToString(opt),
@@ -9184,6 +9261,7 @@ var ComboboxBase = (_a) => {
     "options",
     "optionKeys",
     "noResults",
+    "emptyState",
     "optionToString",
     "createOption",
     "renderOption",
@@ -9299,7 +9377,7 @@ var ComboboxBase = (_a) => {
   }, /* @__PURE__ */ import_react51.default.createElement(Select.Menu, __spreadValues({
     ref: menuRef,
     maxHeight
-  }, menuProps), hasNoResults && /* @__PURE__ */ import_react51.default.createElement(Select.NoResults, null, noResults), inputItems.map((item, index) => /* @__PURE__ */ import_react51.default.createElement(Select.Item, __spreadValues({
+  }, menuProps), hasNoResults && /* @__PURE__ */ import_react51.default.createElement(Select.NoResults, null, emptyState), inputItems.map((item, index) => /* @__PURE__ */ import_react51.default.createElement(Select.Item, __spreadValues({
     key: itemToString(item),
     selected: item === selectedItem,
     highlighted: index === highlightedIndex
@@ -9312,10 +9390,12 @@ ComboboxBase.Skeleton = ComboboxBaseSkeleton;
 var Combobox = (_a) => {
   var _b = _a, {
     options,
-    noResults
+    noResults,
+    emptyState = noResults
   } = _b, props = __objRest(_b, [
     "options",
-    "noResults"
+    "noResults",
+    "emptyState"
   ]);
   var _a2;
   const id = (0, import_react51.useRef)((_a2 = props.id) != null ? _a2 : `combobox-${(0, import_uniqueId2.default)()}`);
@@ -9332,7 +9412,7 @@ var Combobox = (_a) => {
   }), /* @__PURE__ */ import_react51.default.createElement(ComboboxBase, __spreadProps(__spreadValues(__spreadValues({}, baseProps), errorProps), {
     id: id.current,
     options,
-    noResults,
+    emptyState,
     disabled: props.disabled,
     valid: props.valid
   })));
@@ -9361,7 +9441,6 @@ var Container2 = ({ maxWidth = "xl", children }) => /* @__PURE__ */ import_react
 var import_react67 = __toESM(require("react"));
 var import_compact = __toESM(require("lodash/compact"));
 var import_isFunction = __toESM(require("lodash/isFunction"));
-var import_isObject = __toESM(require("lodash/isObject"));
 
 // src/molecules/DropdownMenu/DropdownMenu.tsx
 var import_react56 = __toESM(require("react"));
@@ -9462,7 +9541,8 @@ var createInput = (displayName, opts = {}) => {
         readOnly,
         className: classNames(
           {
-            "pl-7": opts.adornment
+            "pl-7": opts.adornment,
+            "pr-7": opts.canReset || endAdornment
           },
           getCommonInputStyles({ readOnly, valid }),
           props.className
@@ -9817,22 +9897,15 @@ var getDisabledItemKeys = (children) => {
 };
 
 // src/molecules/List/List.tsx
-var import_react57 = __toESM(require("react"));
-var List2 = ({
-  items,
-  renderItem,
-  container = import_react57.default.Fragment
-}) => {
-  const Component = container;
-  return /* @__PURE__ */ import_react57.default.createElement(Component, null, items.map(renderItem));
-};
+var import_react60 = __toESM(require("react"));
+var import_isObject = __toESM(require("lodash/isObject"));
 
 // src/molecules/Pagination/Pagination.tsx
-var import_react59 = __toESM(require("react"));
+var import_react58 = __toESM(require("react"));
 var import_clamp = __toESM(require("lodash/clamp"));
 
 // src/molecules/Select/Select.tsx
-var import_react58 = __toESM(require("react"));
+var import_react57 = __toESM(require("react"));
 var import_downshift2 = require("downshift");
 var import_defaults = __toESM(require("lodash/defaults"));
 var import_isArray = __toESM(require("lodash/isArray"));
@@ -9848,10 +9921,10 @@ var hasOptionGroups = (val) => {
 };
 var defaultRenderOption = (item, props, { selectedItem }, { getOptionKey, getValue, optionToString = getOptionLabelBuiltin }) => {
   var _a, _b;
-  return /* @__PURE__ */ import_react58.default.createElement(Select.Item, __spreadValues({
+  return /* @__PURE__ */ import_react57.default.createElement(Select.Item, __spreadValues({
     key: (_b = (_a = getOptionKey == null ? void 0 : getOptionKey(item)) != null ? _a : getValue == null ? void 0 : getValue(item)) != null ? _b : optionToString(item),
     selected: item === selectedItem
-  }, props), hasIconProperty(item) && /* @__PURE__ */ import_react58.default.createElement(InlineIcon, {
+  }, props), hasIconProperty(item) && /* @__PURE__ */ import_react57.default.createElement(InlineIcon, {
     icon: item.icon
   }), optionToString(item));
 };
@@ -9922,9 +9995,9 @@ var _SelectBase = (props) => {
     "children",
     "labelWrapper"
   ]);
-  const [hasFocus, setFocus] = (0, import_react58.useState)(false);
-  const targetRef = (0, import_react58.useRef)(null);
-  const menuRef = (0, import_react58.useRef)(null);
+  const [hasFocus, setFocus] = (0, import_react57.useState)(false);
+  const targetRef = (0, import_react57.useRef)(null);
+  const menuRef = (0, import_react57.useRef)(null);
   const items = hasOptionGroups(options) ? options.flatMap((g) => g.options) : options;
   const findItemByValue = (val) => {
     if (val === null) {
@@ -9958,7 +10031,7 @@ var _SelectBase = (props) => {
     toggle: toggleMenu,
     setOpen: (isOpen2) => isOpen2 ? openMenu() : closeMenu()
   };
-  const renderItem = (item, index) => UNSAFE_renderOption(
+  const renderItem3 = (item, index) => UNSAFE_renderOption(
     item,
     __spreadValues({
       highlighted: index === highlightedIndex
@@ -9970,13 +10043,13 @@ var _SelectBase = (props) => {
     },
     withDefaults
   );
-  const renderGroup = (group) => /* @__PURE__ */ import_react58.default.createElement(import_react58.default.Fragment, {
+  const renderGroup = (group) => /* @__PURE__ */ import_react57.default.createElement(import_react57.default.Fragment, {
     key: group.label
-  }, /* @__PURE__ */ import_react58.default.createElement(Select.Group, null, group.label), group.options.map((opt) => renderItem(opt, items.indexOf(opt))));
-  const input = /* @__PURE__ */ import_react58.default.createElement(Select.InputContainer, __spreadProps(__spreadValues({}, getToggleButtonProps({ disabled: disabled || readOnly, ref: targetRef })), {
+  }, /* @__PURE__ */ import_react57.default.createElement(Select.Group, null, group.label), group.options.map((opt) => renderItem3(opt, items.indexOf(opt))));
+  const input = /* @__PURE__ */ import_react57.default.createElement(Select.InputContainer, __spreadProps(__spreadValues({}, getToggleButtonProps({ disabled: disabled || readOnly, ref: targetRef })), {
     variant: disabled ? "disabled" : !valid ? "error" : readOnly ? "readOnly" : hasFocus ? "focused" : "default",
     tabIndex: 0
-  }), /* @__PURE__ */ import_react58.default.createElement(Select.Input, __spreadProps(__spreadValues({
+  }), /* @__PURE__ */ import_react57.default.createElement(Select.Input, __spreadProps(__spreadValues({
     id,
     name
   }, rest), {
@@ -9988,26 +10061,26 @@ var _SelectBase = (props) => {
     tabIndex: -1,
     onFocus: () => setFocus(true),
     onBlur: () => setFocus(false)
-  })), !readOnly && /* @__PURE__ */ import_react58.default.createElement(Select.Toggle, {
+  })), !readOnly && /* @__PURE__ */ import_react57.default.createElement(Select.Toggle, {
     disabled,
     isOpen,
     tabIndex: -1
   }));
   const menuProps = getMenuProps({ ref: menuRef }, { suppressRefError: !isOpen });
-  return /* @__PURE__ */ import_react58.default.createElement("div", {
+  return /* @__PURE__ */ import_react57.default.createElement("div", {
     className: classNames("Aquarium-SelectBase", tw("relative"))
-  }, labelWrapper ? import_react58.default.cloneElement(labelWrapper, { children: input }) : input, isOpen && /* @__PURE__ */ import_react58.default.createElement(PopoverOverlay, {
+  }, labelWrapper ? import_react57.default.cloneElement(labelWrapper, { children: input }) : input, isOpen && /* @__PURE__ */ import_react57.default.createElement(PopoverOverlay, {
     state,
     triggerRef: targetRef,
     placement: "bottom-left",
     shouldFlip: true,
     style: { width: (_b = targetRef.current) == null ? void 0 : _b.offsetWidth }
-  }, /* @__PURE__ */ import_react58.default.createElement(Select.Menu, __spreadValues({
+  }, /* @__PURE__ */ import_react57.default.createElement(Select.Menu, __spreadValues({
     ref: menuRef,
     maxHeight
-  }, menuProps), options.length === 0 && /* @__PURE__ */ import_react58.default.createElement(Select.EmptyStateContainer, null, emptyState), options.length > 0 && !hasOptionGroups(options) && options.map(renderItem), options.length > 0 && hasOptionGroups(options) && options.map(renderGroup), actions.length > 0 && /* @__PURE__ */ import_react58.default.createElement(import_react58.default.Fragment, null, /* @__PURE__ */ import_react58.default.createElement(Select.Divider, {
+  }, menuProps), options.length === 0 && /* @__PURE__ */ import_react57.default.createElement(Select.EmptyStateContainer, null, emptyState), options.length > 0 && !hasOptionGroups(options) && options.map(renderItem3), options.length > 0 && hasOptionGroups(options) && options.map(renderGroup), actions.length > 0 && /* @__PURE__ */ import_react57.default.createElement(import_react57.default.Fragment, null, /* @__PURE__ */ import_react57.default.createElement(Select.Divider, {
     onMouseOver: () => setHighlightedIndex(-1)
-  }), actions.map((act, index) => /* @__PURE__ */ import_react58.default.createElement(Select.ActionItem, __spreadProps(__spreadValues({
+  }), actions.map((act, index) => /* @__PURE__ */ import_react57.default.createElement(Select.ActionItem, __spreadProps(__spreadValues({
     key: `${index}`
   }, act), {
     onMouseOver: () => setHighlightedIndex(-1),
@@ -10017,10 +10090,10 @@ var _SelectBase = (props) => {
     }
   }), act.label))))));
 };
-var SelectBase = (props) => /* @__PURE__ */ import_react58.default.createElement(_SelectBase, __spreadProps(__spreadValues({}, props), {
+var SelectBase = (props) => /* @__PURE__ */ import_react57.default.createElement(_SelectBase, __spreadProps(__spreadValues({}, props), {
   labelWrapper: void 0
 }));
-var SelectBaseSkeleton = () => /* @__PURE__ */ import_react58.default.createElement(Skeleton, {
+var SelectBaseSkeleton = () => /* @__PURE__ */ import_react57.default.createElement(Skeleton, {
   height: 38
 });
 SelectBase.Skeleton = SelectBaseSkeleton;
@@ -10031,28 +10104,28 @@ var Select2 = (_a) => {
     "options"
   ]);
   var _a2;
-  const id = (0, import_react58.useRef)((_a2 = props.id) != null ? _a2 : `select-${(0, import_uniqueId4.default)()}`);
+  const id = (0, import_react57.useRef)((_a2 = props.id) != null ? _a2 : `select-${(0, import_uniqueId4.default)()}`);
   const errorMessageId = (0, import_uniqueId4.default)();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const labelProps = getLabelControlProps(props);
   const baseProps = (0, import_omit7.default)(props, Object.keys(labelProps));
   const legacyError = labelProps.error !== void 0 && labelProps.valid === false;
   const variant = !labelProps.valid || legacyError ? "error" : labelProps.disabled ? "disabled" : "default";
-  const label = /* @__PURE__ */ import_react58.default.createElement(Label, __spreadValues({
+  const label = /* @__PURE__ */ import_react57.default.createElement(Label, __spreadValues({
     id: `${id.current}-label`,
     htmlFor: `${id.current}-input`,
     variant,
     messageId: errorMessageId
   }, labelProps));
-  return /* @__PURE__ */ import_react58.default.createElement(FormControl, {
+  return /* @__PURE__ */ import_react57.default.createElement(FormControl, {
     className: "Aquarium-Select"
-  }, /* @__PURE__ */ import_react58.default.createElement(_SelectBase, __spreadProps(__spreadValues(__spreadValues({}, baseProps), errorProps), {
+  }, /* @__PURE__ */ import_react57.default.createElement(_SelectBase, __spreadProps(__spreadValues(__spreadValues({}, baseProps), errorProps), {
     id: `${id.current}-input`,
     options,
     disabled: props.disabled,
     valid: props.valid,
     labelWrapper: label
-  })), /* @__PURE__ */ import_react58.default.createElement(HelperText, {
+  })), /* @__PURE__ */ import_react57.default.createElement(HelperText, {
     messageId: errorMessageId,
     error: !labelProps.valid,
     helperText: labelProps.helperText,
@@ -10061,7 +10134,7 @@ var Select2 = (_a) => {
     reserveSpaceForError: labelProps.reserveSpaceForError
   }));
 };
-var SelectSkeleton = () => /* @__PURE__ */ import_react58.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react58.default.createElement(SelectBase.Skeleton, null));
+var SelectSkeleton = () => /* @__PURE__ */ import_react57.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react57.default.createElement(SelectBase.Skeleton, null));
 Select2.Skeleton = SelectSkeleton;
 Select2.Skeleton.displayName = "Select.Skeleton";
 
@@ -10080,26 +10153,26 @@ var Pagination = ({
   pageSizes,
   onPageSizeChange
 }) => {
-  const [value, setValue] = import_react59.default.useState(currentPage);
-  import_react59.default.useEffect(() => {
+  const [value, setValue] = import_react58.default.useState(currentPage);
+  import_react58.default.useEffect(() => {
     setValue(currentPage);
   }, [currentPage]);
-  return /* @__PURE__ */ import_react59.default.createElement(Box, {
+  return /* @__PURE__ */ import_react58.default.createElement(Box, {
     className: classNames(
       "Aquarium-Pagination",
       tw({ "grid grid-cols-[200px_1fr_200px]": !!pageSizes, "flex flex-nowrap justify-center": !pageSizes })
     ),
     backgroundColor: "grey-0",
     padding: "4"
-  }, pageSizes && onPageSizeChange && typeof pageSize === "number" ? /* @__PURE__ */ import_react59.default.createElement(Box, {
+  }, pageSizes && onPageSizeChange && typeof pageSize === "number" ? /* @__PURE__ */ import_react58.default.createElement(Box, {
     display: "flex",
     alignItems: "center",
     gap: "4"
-  }, /* @__PURE__ */ import_react59.default.createElement(Typography2.Small, {
+  }, /* @__PURE__ */ import_react58.default.createElement(Typography2.Small, {
     color: "grey-50"
-  }, "Items per page "), /* @__PURE__ */ import_react59.default.createElement("div", {
+  }, "Items per page "), /* @__PURE__ */ import_react58.default.createElement("div", {
     className: tw("max-w-[70px]")
-  }, /* @__PURE__ */ import_react59.default.createElement(SelectBase, {
+  }, /* @__PURE__ */ import_react58.default.createElement(SelectBase, {
     options: pageSizes.map((size) => size.toString()),
     value: pageSize.toString(),
     onChange: (size) => {
@@ -10110,26 +10183,26 @@ var Pagination = ({
         }
       }
     }
-  }))) : /* @__PURE__ */ import_react59.default.createElement("div", null), /* @__PURE__ */ import_react59.default.createElement(Box, {
+  }))) : /* @__PURE__ */ import_react58.default.createElement("div", null), /* @__PURE__ */ import_react58.default.createElement(Box, {
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
     className: tw("grow")
-  }, /* @__PURE__ */ import_react59.default.createElement(Button.Icon, {
+  }, /* @__PURE__ */ import_react58.default.createElement(Button.Icon, {
     "aria-label": "First",
     onClick: () => onPageChange(1),
     icon: import_chevronBackward2.default,
     disabled: !hasPreviousPage
-  }), /* @__PURE__ */ import_react59.default.createElement(Button.Icon, {
+  }), /* @__PURE__ */ import_react58.default.createElement(Button.Icon, {
     "aria-label": "Previous",
     onClick: () => onPageChange(currentPage - 1),
     icon: import_chevronLeft3.default,
     disabled: !hasPreviousPage
-  }), /* @__PURE__ */ import_react59.default.createElement(Box, {
+  }), /* @__PURE__ */ import_react58.default.createElement(Box, {
     paddingX: "4"
-  }, /* @__PURE__ */ import_react59.default.createElement(Typography2.Small, {
+  }, /* @__PURE__ */ import_react58.default.createElement(Typography2.Small, {
     color: "grey-60"
-  }, "Page")), /* @__PURE__ */ import_react59.default.createElement(InputBase, {
+  }, "Page")), /* @__PURE__ */ import_react58.default.createElement(InputBase, {
     className: classNames(tw("text-center max-w-[40px]"), "no-arrows"),
     type: "number",
     min: 1,
@@ -10146,25 +10219,25 @@ var Pagination = ({
       const newPage = !isNaN(numberValue) ? (0, import_clamp.default)(numberValue, 1, totalPages) : 1;
       onPageChange(newPage);
     }
-  }), /* @__PURE__ */ import_react59.default.createElement(Box, {
+  }), /* @__PURE__ */ import_react58.default.createElement(Box, {
     paddingX: "4"
-  }, /* @__PURE__ */ import_react59.default.createElement(Typography2.Small, {
+  }, /* @__PURE__ */ import_react58.default.createElement(Typography2.Small, {
     color: "grey-60"
-  }, "of ", totalPages)), /* @__PURE__ */ import_react59.default.createElement(Button.Icon, {
+  }, "of ", totalPages)), /* @__PURE__ */ import_react58.default.createElement(Button.Icon, {
     "aria-label": "Next",
     onClick: () => onPageChange(currentPage + 1),
     icon: import_chevronRight3.default,
     disabled: !hasNextPage
-  }), /* @__PURE__ */ import_react59.default.createElement(Button.Icon, {
+  }), /* @__PURE__ */ import_react58.default.createElement(Button.Icon, {
     "aria-label": "Last",
     onClick: () => onPageChange(totalPages),
     icon: import_chevronForward2.default,
     disabled: !hasNextPage
-  })), pageSizes && /* @__PURE__ */ import_react59.default.createElement("div", null));
+  })), pageSizes && /* @__PURE__ */ import_react58.default.createElement("div", null));
 };
 
 // src/molecules/Pagination/usePagination.tsx
-var import_react60 = require("react");
+var import_react59 = require("react");
 var import_clamp2 = __toESM(require("lodash/clamp"));
 var initialState = {
   currentPage: 1,
@@ -10172,8 +10245,8 @@ var initialState = {
 };
 var getPageIndex = (currentPage, pageSize) => currentPage === 0 ? 0 : (currentPage - 1) * pageSize;
 var usePagination = (items, options) => {
-  const [currentPage, setCurrentPage] = (0, import_react60.useState)((options == null ? void 0 : options.initialPage) || initialState.currentPage);
-  const [pageSize, setPageSize] = (0, import_react60.useState)((options == null ? void 0 : options.initialPageSize) || initialState.pageSize);
+  const [currentPage, setCurrentPage] = (0, import_react59.useState)((options == null ? void 0 : options.initialPage) || initialState.currentPage);
+  const [pageSize, setPageSize] = (0, import_react59.useState)((options == null ? void 0 : options.initialPageSize) || initialState.pageSize);
   const totalPages = items.length > 0 ? Math.ceil(items.length / pageSize) : 1;
   const hasPreviousPage = currentPage > 1;
   const hasNextPage = currentPage < totalPages;
@@ -10183,7 +10256,7 @@ var usePagination = (items, options) => {
     setPageSize(pageSize2);
     setCurrentPage((0, import_clamp2.default)((options == null ? void 0 : options.initialPage) || initialState.currentPage, 1, newTotalPages));
   };
-  (0, import_react60.useEffect)(() => {
+  (0, import_react59.useEffect)(() => {
     setCurrentPage((0, import_clamp2.default)((options == null ? void 0 : options.initialPage) || initialState.currentPage, 1, totalPages));
   }, [items.length]);
   return [
@@ -10200,6 +10273,22 @@ var usePagination = (items, options) => {
   ];
 };
 
+// src/molecules/List/List.tsx
+var List2 = ({
+  items,
+  renderItem: renderItem3,
+  container = import_react60.default.Fragment,
+  paginationContainer = import_react60.default.Fragment,
+  pagination
+}) => {
+  const Component = container;
+  const PaginationComponent = paginationContainer;
+  const paginationProps = (0, import_isObject.default)(pagination) ? pagination : {};
+  const [paginatedItems, paginationState] = usePagination(items, paginationProps);
+  const listItems = pagination ? paginatedItems : items;
+  return /* @__PURE__ */ import_react60.default.createElement(import_react60.default.Fragment, null, /* @__PURE__ */ import_react60.default.createElement(Component, null, listItems.map(renderItem3)), pagination && /* @__PURE__ */ import_react60.default.createElement(PaginationComponent, null, /* @__PURE__ */ import_react60.default.createElement(Pagination, __spreadValues({}, paginationState))));
+};
+
 // src/molecules/Template/Template.tsx
 var import_react61 = __toESM(require("react"));
 var Template = ({
@@ -10561,7 +10650,7 @@ var DataListSkeleton = ({ columns = ["1", "2", "2", 52], rows = 5 }) => {
 // src/molecules/DataList/DataList.tsx
 var DataList2 = ({
   columns,
-  rows: _rows,
+  rows,
   sticky,
   menu,
   menuLabel,
@@ -10569,45 +10658,50 @@ var DataList2 = ({
   menuHeaderName = "Actions",
   onAction,
   onMenuOpenChange,
-  pagination: _pagination
+  pagination
 }) => {
   const [sort, updateSort] = useTableSort();
-  const sortedRows = sortRowsBy(_rows, sort);
-  const _a = (0, import_isObject.default)(_pagination) ? _pagination : {}, { initialPage, initialPageSize } = _a, paginationProps = __objRest(_a, ["initialPage", "initialPageSize"]);
-  const [paginatedItems, paginationState] = usePagination(sortedRows, { initialPage, initialPageSize });
-  const rows = _pagination ? paginatedItems : sortedRows;
+  const sortedRows = sortRowsBy(rows, sort);
   const templateColumns = (0, import_compact.default)([
     ...columns.map((column) => {
-      var _a2;
-      return (_a2 = column.width) != null ? _a2 : "auto";
+      var _a;
+      return (_a = column.width) != null ? _a : "auto";
     }),
     menu ? "auto" : void 0
   ]);
-  const content = /* @__PURE__ */ import_react67.default.createElement(Template, {
+  const PaginationFooter = import_react67.default.useCallback(
+    ({ children }) => /* @__PURE__ */ import_react67.default.createElement("div", {
+      style: { gridColumn: `span ${templateColumns.length}` }
+    }, children),
+    [templateColumns.length]
+  );
+  return /* @__PURE__ */ import_react67.default.createElement(Template, {
     className: "Aquarium-DataList",
     columns: templateColumns
-  }, columns.map(
-    (column) => columnIsFieldColumn(column) && column.sortable || column.sort ? /* @__PURE__ */ import_react67.default.createElement(DataList.SortCell, __spreadValues({
+  }, columns.map((column) => {
+    const content = column.headerTooltip ? /* @__PURE__ */ import_react67.default.createElement(Tooltip, {
+      placement: column.headerTooltip.placement,
+      content: column.headerTooltip.content
+    }, column.headerName) : column.headerName;
+    return columnIsFieldColumn(column) && column.sortable || column.sort ? /* @__PURE__ */ import_react67.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_react67.default.createElement(DataList.HeadCell, __spreadProps(__spreadValues({}, cellProps(column)), {
+    }, cellProps(column)), content) : /* @__PURE__ */ import_react67.default.createElement(DataList.HeadCell, __spreadProps(__spreadValues({}, cellProps(column)), {
       sticky
-    }), column.headerName)
-  ), menu && /* @__PURE__ */ import_react67.default.createElement(DataList.HeadCell, {
+    }), content);
+  }), menu && /* @__PURE__ */ import_react67.default.createElement(DataList.HeadCell, {
     align: "right",
     "aria-label": menuAriaLabel
   }, menuHeaderName), /* @__PURE__ */ import_react67.default.createElement(List2, {
-    items: rows,
+    pagination,
+    paginationContainer: PaginationFooter,
+    items: sortedRows,
     renderItem: (row, index) => /* @__PURE__ */ import_react67.default.createElement(DataList.Row, {
       key: row.id
     }, /* @__PURE__ */ import_react67.default.createElement(List2, {
       items: columns,
-      renderItem: (column) => column.type === "status" ? /* @__PURE__ */ import_react67.default.createElement(DataList.Cell, __spreadValues({}, cellProps(column)), /* @__PURE__ */ import_react67.default.createElement(StatusChip, __spreadValues({
-        dense: true
-      }, column.status(row, index, sortedRows)))) : column.type === "action" ? /* @__PURE__ */ import_react67.default.createElement(DataList.Cell, __spreadValues({}, cellProps(column)), /* @__PURE__ */ import_react67.default.createElement(Button.Secondary, __spreadValues({
-        dense: true
-      }, renameProperty("text", "children", column.action(row, index, sortedRows))))) : column.type === "custom" ? /* @__PURE__ */ import_react67.default.createElement(DataList.Cell, __spreadValues({}, cellProps(column)), column.UNSAFE_render(row, index, sortedRows)) : column.type === "item" ? /* @__PURE__ */ import_react67.default.createElement(DataList.Cell, __spreadValues({}, cellProps(column)), /* @__PURE__ */ import_react67.default.createElement(Item4, __spreadValues({}, column.item(row, index, sortedRows)))) : /* @__PURE__ */ import_react67.default.createElement(DataList.Cell, __spreadValues({}, cellProps(column)), column.formatter ? column.formatter(row[column.field], row, index, sortedRows) : row[column.field])
+      renderItem: (column) => /* @__PURE__ */ import_react67.default.createElement(DataList.Cell, __spreadValues({}, cellProps(column)), renderItem(column, row, index, sortedRows))
     }), menu && /* @__PURE__ */ import_react67.default.createElement(DataList.Cell, {
       align: "right"
     }, /* @__PURE__ */ import_react67.default.createElement(DropdownMenu2, {
@@ -10618,7 +10712,14 @@ var DataList2 = ({
       icon: import_more2.default
     })), (0, import_isFunction.default)(menu) ? menu(row, index) : menu)))
   }));
-  return _pagination ? /* @__PURE__ */ import_react67.default.createElement("div", null, content, /* @__PURE__ */ import_react67.default.createElement(Pagination, __spreadValues(__spreadValues({}, paginationState), paginationProps))) : content;
+};
+var renderItem = (column, row, index, sortedRows) => {
+  const cellContent = column.type === "status" ? /* @__PURE__ */ import_react67.default.createElement(StatusChip, __spreadValues({
+    dense: true
+  }, column.status(row, index, sortedRows))) : column.type === "action" ? /* @__PURE__ */ import_react67.default.createElement(Button.Secondary, __spreadValues({
+    dense: true
+  }, renameProperty("text", "children", column.action(row, index, sortedRows)))) : column.type === "custom" ? column.UNSAFE_render(row, index, sortedRows) : column.type === "item" ? /* @__PURE__ */ import_react67.default.createElement(Item4, __spreadValues({}, column.item(row, index, sortedRows))) : column.formatter ? column.formatter(row[column.field], row, index, sortedRows) : row[column.field];
+  return column.tooltip ? /* @__PURE__ */ import_react67.default.createElement(Tooltip, __spreadValues({}, column.tooltip(row, index, sortedRows)), cellContent) : cellContent;
 };
 DataList2.Skeleton = DataListSkeleton;
 
@@ -10626,7 +10727,6 @@ DataList2.Skeleton = DataListSkeleton;
 var import_react70 = __toESM(require("react"));
 var import_compact2 = __toESM(require("lodash/compact"));
 var import_isFunction2 = __toESM(require("lodash/isFunction"));
-var import_isObject2 = __toESM(require("lodash/isObject"));
 
 // src/molecules/Table/Table.tsx
 var import_react69 = __toESM(require("react"));
@@ -10675,7 +10775,7 @@ var import_more3 = __toESM(require_more());
 var DataTable = (_a) => {
   var _b = _a, {
     columns,
-    rows: _rows,
+    rows,
     noWrap = false,
     layout = "auto",
     sticky,
@@ -10685,7 +10785,7 @@ var DataTable = (_a) => {
     menuHeaderName = "Actions",
     onAction,
     onMenuOpenChange,
-    pagination: _pagination
+    pagination
   } = _b, rest = __objRest(_b, [
     "columns",
     "rows",
@@ -10701,11 +10801,15 @@ var DataTable = (_a) => {
     "pagination"
   ]);
   const [sort, updateSort] = useTableSort();
-  const sortedRows = sortRowsBy(_rows, sort);
-  const _a2 = (0, import_isObject2.default)(_pagination) ? _pagination : {}, { initialPage, initialPageSize } = _a2, paginationProps = __objRest(_a2, ["initialPage", "initialPageSize"]);
-  const [paginatedItems, paginationState] = usePagination(sortedRows, { initialPage, initialPageSize });
-  const rows = _pagination ? paginatedItems : sortedRows;
-  const content = /* @__PURE__ */ import_react70.default.createElement(Table2, __spreadProps(__spreadValues({}, rest), {
+  const sortedRows = sortRowsBy(rows, sort);
+  const amountOfColumns = columns.length + (menu ? 1 : 0);
+  const PaginationFooter = import_react70.default.useCallback(
+    ({ children }) => /* @__PURE__ */ import_react70.default.createElement("tfoot", null, /* @__PURE__ */ import_react70.default.createElement("tr", null, /* @__PURE__ */ import_react70.default.createElement("td", {
+      colSpan: amountOfColumns
+    }, children))),
+    [amountOfColumns]
+  );
+  return /* @__PURE__ */ import_react70.default.createElement(Table2, __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       "Aquarium-DataTable",
       tw({
@@ -10717,33 +10821,36 @@ var DataTable = (_a) => {
   }), /* @__PURE__ */ import_react70.default.createElement(Table2.Head, {
     sticky
   }, (0, import_compact2.default)([
-    ...columns.map(
-      (column) => columnIsFieldColumn(column) && column.sortable || column.sort ? /* @__PURE__ */ import_react70.default.createElement(Table2.SortCell, __spreadValues({
+    ...columns.map((column) => {
+      const content = column.headerTooltip && !column.headerInvisible ? /* @__PURE__ */ import_react70.default.createElement(Tooltip, {
+        placement: column.headerTooltip.placement,
+        content: column.headerTooltip.content
+      }, column.headerName) : !column.headerInvisible && column.headerName;
+      return columnIsFieldColumn(column) && column.sortable || column.sort ? /* @__PURE__ */ import_react70.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_react70.default.createElement(Table2.Cell, __spreadProps(__spreadValues({}, cellProps(column)), {
+      }, cellProps(column)), content) : /* @__PURE__ */ import_react70.default.createElement(Table2.Cell, __spreadProps(__spreadValues({}, cellProps(column)), {
         style: { width: column.width },
         "aria-label": column.headerInvisible ? column.headerName : void 0
-      }), !column.headerInvisible && column.headerName)
-    ),
+      }), content);
+    }),
     menu ? /* @__PURE__ */ import_react70.default.createElement(Table2.Cell, {
       key: "__contextMenu",
       align: "right",
       "aria-label": menuAriaLabel
     }, menuHeaderName) : null
-  ])), /* @__PURE__ */ import_react70.default.createElement(Table2.Body, null, /* @__PURE__ */ import_react70.default.createElement(List2, {
-    items: rows,
+  ])), /* @__PURE__ */ import_react70.default.createElement(List2, {
+    container: Table2.Body,
+    paginationContainer: PaginationFooter,
+    pagination,
+    items: sortedRows,
     renderItem: (row, index) => /* @__PURE__ */ import_react70.default.createElement(Table2.Row, {
       key: row.id
     }, /* @__PURE__ */ import_react70.default.createElement(List2, {
       items: columns,
-      renderItem: (column) => column.type === "status" ? /* @__PURE__ */ import_react70.default.createElement(Table2.Cell, __spreadValues({}, cellProps(column)), /* @__PURE__ */ import_react70.default.createElement(StatusChip, __spreadValues({
-        dense: true
-      }, column.status(row, index, sortedRows)))) : column.type === "action" ? /* @__PURE__ */ import_react70.default.createElement(Table2.Cell, __spreadValues({}, cellProps(column)), /* @__PURE__ */ import_react70.default.createElement(Button.Secondary, __spreadValues({
-        dense: true
-      }, renameProperty("text", "children", column.action(row, index, sortedRows))))) : column.type === "custom" ? /* @__PURE__ */ import_react70.default.createElement(Table2.Cell, __spreadValues({}, cellProps(column)), column.UNSAFE_render(row, index, sortedRows)) : column.type === "item" ? /* @__PURE__ */ import_react70.default.createElement(Table2.Cell, __spreadValues({}, cellProps(column)), /* @__PURE__ */ import_react70.default.createElement(Item4, __spreadValues({}, column.item(row, index, sortedRows)))) : /* @__PURE__ */ import_react70.default.createElement(Table2.Cell, __spreadValues({}, cellProps(column)), column.formatter ? column.formatter(row[column.field], row, index, sortedRows) : row[column.field])
+      renderItem: (column) => /* @__PURE__ */ import_react70.default.createElement(Table2.Cell, __spreadValues({}, cellProps(column)), renderItem2(column, row, index, sortedRows))
     }), menu && /* @__PURE__ */ import_react70.default.createElement(Table2.Cell, {
       align: "right"
     }, /* @__PURE__ */ import_react70.default.createElement(DropdownMenu2, {
@@ -10753,8 +10860,15 @@ var DataTable = (_a) => {
       "aria-label": menuAriaLabel,
       icon: import_more3.default
     })), (0, import_isFunction2.default)(menu) ? menu(row, index) : menu)))
-  })));
-  return _pagination ? /* @__PURE__ */ import_react70.default.createElement("div", null, content, /* @__PURE__ */ import_react70.default.createElement(Pagination, __spreadValues(__spreadValues({}, paginationState), paginationProps))) : content;
+  }));
+};
+var renderItem2 = (column, row, index, sortedRows) => {
+  const cellContent = column.type === "status" ? /* @__PURE__ */ import_react70.default.createElement(StatusChip, __spreadValues({
+    dense: true
+  }, column.status(row, index, sortedRows))) : column.type === "action" ? /* @__PURE__ */ import_react70.default.createElement(Button.Secondary, __spreadValues({
+    dense: true
+  }, renameProperty("text", "children", column.action(row, index, sortedRows)))) : column.type === "custom" ? column.UNSAFE_render(row, index, sortedRows) : column.type === "item" ? /* @__PURE__ */ import_react70.default.createElement(Item4, __spreadValues({}, column.item(row, index, sortedRows))) : column.formatter ? column.formatter(row[column.field], row, index, sortedRows) : row[column.field];
+  return column.tooltip ? /* @__PURE__ */ import_react70.default.createElement(Tooltip, __spreadValues({}, column.tooltip(row, index, sortedRows)), cellContent) : cellContent;
 };
 DataTable.Skeleton = DataListSkeleton;
 
@@ -10921,17 +11035,19 @@ var DialogWrapper = ({
     ref
   }, dialogProps), {
     className: tw("outline-none")
-  }), /* @__PURE__ */ import_react72.default.createElement(Modal.Header, null, /* @__PURE__ */ import_react72.default.createElement(Icon, {
+  }), /* @__PURE__ */ import_react72.default.createElement(Modal.Header, {
+    className: tw("icon-stroke-2")
+  }, /* @__PURE__ */ import_react72.default.createElement(Icon, {
     icon: DIALOG_ICONS_AND_COLORS[type].icon,
     color: DIALOG_ICONS_AND_COLORS[type].color,
     fontSize: 20
   }), /* @__PURE__ */ import_react72.default.createElement(Modal.Title, {
     id: labelledBy,
-    variant: "large-strong",
+    variant: "large",
     color: DIALOG_ICONS_AND_COLORS[type].color
   }, title)), /* @__PURE__ */ import_react72.default.createElement(Modal.Body, {
     id: describedBy
-  }, children), /* @__PURE__ */ import_react72.default.createElement(Modal.Footer, null, /* @__PURE__ */ import_react72.default.createElement(Modal.Actions, null, secondaryAction && /* @__PURE__ */ import_react72.default.createElement(Button.Ghost, __spreadValues({
+  }, /* @__PURE__ */ import_react72.default.createElement(Typography2.Default, null, children)), /* @__PURE__ */ import_react72.default.createElement(Modal.Footer, null, /* @__PURE__ */ import_react72.default.createElement(Modal.Actions, null, secondaryAction && /* @__PURE__ */ import_react72.default.createElement(Button.Ghost, __spreadValues({
     key: secondaryAction.text
   }, (0, import_omit8.default)(secondaryAction, "text")), secondaryAction.text), /* @__PURE__ */ import_react72.default.createElement(Button.Secondary, __spreadValues({
     key: primaryAction.text
@@ -11309,9 +11425,7 @@ var EmptyState = ({
     htmlTag: "h2"
   }, title), (description || children) && /* @__PURE__ */ import_react79.default.createElement(Box, {
     marginTop: "5"
-  }, /* @__PURE__ */ import_react79.default.createElement(Typography2.Default, {
-    color: "grey-60"
-  }, children || description)), (secondaryAction || primaryAction) && /* @__PURE__ */ import_react79.default.createElement(Box.Flex, {
+  }, /* @__PURE__ */ import_react79.default.createElement(Typography2.Default, null, children || description)), (secondaryAction || primaryAction) && /* @__PURE__ */ import_react79.default.createElement(Box.Flex, {
     marginTop: "7",
     gap: "4",
     justifyContent: "center",
@@ -11346,7 +11460,7 @@ var FlexboxItem = Tailwindify(
 
 // src/molecules/Grid/GridItem.tsx
 var import_react81 = __toESM(require("react"));
-var GridItem = Tailwindify(
+var GridItem2 = Tailwindify(
   ({
     htmlTag = "div",
     className,
@@ -12121,6 +12235,7 @@ var MultiSelectBase = (_a) => {
     options,
     optionKeys = ["label", "value"],
     noResults,
+    emptyState = noResults,
     optionToString: itemToString = getOptionLabelBuiltin,
     renderOption = (opt) => itemToString(opt),
     isOptionDisabled = isOptionDisabledBuiltin,
@@ -12143,6 +12258,7 @@ var MultiSelectBase = (_a) => {
     "options",
     "optionKeys",
     "noResults",
+    "emptyState",
     "optionToString",
     "renderOption",
     "isOptionDisabled",
@@ -12306,7 +12422,7 @@ var MultiSelectBase = (_a) => {
   }, /* @__PURE__ */ import_react90.default.createElement(Select.Menu, __spreadValues({
     ref: menuRef,
     maxHeight
-  }, menuProps), hasNoResults && /* @__PURE__ */ import_react90.default.createElement(Select.NoResults, null, noResults), filteredOptions.map((item, index) => /* @__PURE__ */ import_react90.default.createElement(Select.Item, __spreadValues({
+  }, menuProps), hasNoResults && /* @__PURE__ */ import_react90.default.createElement(Select.NoResults, null, emptyState), filteredOptions.map((item, index) => /* @__PURE__ */ import_react90.default.createElement(Select.Item, __spreadValues({
     key: itemToString(item),
     highlighted: index === highlightedIndex,
     selected: selectedItems.includes(item)
@@ -12319,10 +12435,12 @@ MultiSelectBase.Skeleton = MultiSelectBaseSkeleton;
 var MultiSelect = (_a) => {
   var _b = _a, {
     options,
-    noResults
+    noResults,
+    emptyState = noResults
   } = _b, props = __objRest(_b, [
     "options",
-    "noResults"
+    "noResults",
+    "emptyState"
   ]);
   var _a2;
   const id = (0, import_react90.useRef)((_a2 = props.id) != null ? _a2 : `multiselect-${(0, import_uniqueId6.default)()}`);
@@ -12339,7 +12457,7 @@ var MultiSelect = (_a) => {
   }), /* @__PURE__ */ import_react90.default.createElement(MultiSelectBase, __spreadProps(__spreadValues(__spreadValues({}, baseProps), errorProps), {
     id: id.current,
     options,
-    noResults,
+    emptyState,
     disabled: props.disabled,
     valid: props.valid
   })));
@@ -12946,15 +13064,117 @@ RadioButtonGroup.Skeleton = RadioButtonGroupSkeleton;
 RadioButtonGroup.Skeleton.displayName = "RadioButtonGroup.Skeleton";
 
 // src/molecules/Section/Section.tsx
-var import_react105 = __toESM(require("react"));
+var import_react107 = __toESM(require("react"));
 var import_utils14 = require("@react-aria/utils");
 var import_web3 = require("@react-spring/web");
 var import_castArray4 = __toESM(require("lodash/castArray"));
 var import_isUndefined8 = __toESM(require("lodash/isUndefined"));
-var import_noop = __toESM(require("lodash/noop"));
 
-// src/molecules/TagLabel/TagLabel.tsx
+// src/molecules/Switch/Switch.tsx
+var import_react103 = __toESM(require("react"));
+
+// src/atoms/Switch/Switch.tsx
 var import_react102 = __toESM(require("react"));
+var import_ban2 = __toESM(require_ban());
+var Switch = import_react102.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_react102.default.createElement("span", {
+      className: tw("relative inline-flex justify-center items-center self-center group")
+    }, /* @__PURE__ */ import_react102.default.createElement("input", __spreadProps(__spreadValues({
+      id,
+      ref,
+      type: "checkbox",
+      name
+    }, props), {
+      className: classNames(
+        tw(
+          "appearance-none peer/switch rounded-full inline-block w-[34px] h-[20px] transition duration-300",
+          "outline-none focusable bg-grey-10",
+          "cursor-pointer disabled:cursor-not-allowed",
+          {
+            "hover:bg-grey-20 checked:bg-primary-80 hover:checked:bg-primary-70": !disabled,
+            "bg-grey-5 checked:opacity-50 checked:bg-primary-40": disabled
+          }
+        )
+      ),
+      readOnly,
+      disabled
+    })), /* @__PURE__ */ import_react102.default.createElement("span", {
+      className: tw(
+        "pointer-events-none rounded-full absolute inline-flex justify-center items-center transition duration-300 h-4 w-4 transform peer-checked/switch:translate-x-5",
+        "bg-white left-2 peer-checked/switch:left-1 text-grey-30 peer-checked/switch:text-primary-60",
+        {
+          "shadow-4dp": !disabled
+        }
+      )
+    }, disabled && /* @__PURE__ */ import_react102.default.createElement(Icon, {
+      icon: import_ban2.default,
+      width: "10px",
+      height: "10px"
+    })));
+  }
+);
+
+// src/molecules/Switch/Switch.tsx
+var Switch2 = import_react103.default.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      id,
+      name,
+      caption,
+      readOnly = false,
+      disabled = false,
+      children,
+      "aria-label": ariaLabel,
+      labelPlacement
+    } = _b, props = __objRest(_b, [
+      "id",
+      "name",
+      "caption",
+      "readOnly",
+      "disabled",
+      "children",
+      "aria-label",
+      "labelPlacement"
+    ]);
+    var _a2;
+    const isChecked = (_a2 = props.checked) != null ? _a2 : props.defaultChecked;
+    return !readOnly || isChecked ? /* @__PURE__ */ import_react103.default.createElement(ControlLabel, {
+      htmlFor: id,
+      label: children,
+      "aria-label": ariaLabel,
+      caption,
+      readOnly,
+      disabled,
+      style: { gap: "0 8px" },
+      labelPlacement,
+      className: "Aquarium-Switch"
+    }, !readOnly && /* @__PURE__ */ import_react103.default.createElement(Switch, __spreadProps(__spreadValues({
+      id,
+      ref,
+      name
+    }, props), {
+      readOnly,
+      disabled
+    }))) : null;
+  }
+);
+Switch2.displayName = "Switch";
+var SwitchSkeleton = () => /* @__PURE__ */ import_react103.default.createElement("div", {
+  className: tw("flex gap-3")
+}, /* @__PURE__ */ import_react103.default.createElement(Skeleton, {
+  height: 20,
+  width: 35
+}), /* @__PURE__ */ import_react103.default.createElement(Skeleton, {
+  height: 20,
+  width: 150
+}));
+Switch2.Skeleton = SwitchSkeleton;
+Switch2.Skeleton.displayName = "Switch.Skeleton ";
+
+// src/molecules/TagLabel/TagLabel.tsx
+var import_react104 = __toESM(require("react"));
 var getVariantClassNames = (variant = "primary") => {
   switch (variant) {
     case "danger":
@@ -12968,7 +13188,7 @@ var getVariantClassNames = (variant = "primary") => {
 };
 var TagLabel = (_a) => {
   var _b = _a, { title, dense = false, variant } = _b, rest = __objRest(_b, ["title", "dense", "variant"]);
-  return /* @__PURE__ */ import_react102.default.createElement("span", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react104.default.createElement("span", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       "Aquarium-TagLabel",
       getVariantClassNames(variant),
@@ -12981,41 +13201,42 @@ var TagLabel = (_a) => {
 };
 
 // src/atoms/Section/Section.tsx
-var import_react103 = __toESM(require("react"));
+var import_react105 = __toESM(require("react"));
 var import_caretUp2 = __toESM(require_caretUp());
 var Section3 = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ import_react103.default.createElement(Box, __spreadValues({
+  return /* @__PURE__ */ import_react105.default.createElement(Box, __spreadValues({
+    component: "section",
     borderColor: "grey-5",
     borderWidth: "1px"
   }, rest), children);
 };
 Section3.Header = (_a) => {
   var _b = _a, { children, className, collapsible } = _b, rest = __objRest(_b, ["children", "className", "collapsible"]);
-  return /* @__PURE__ */ import_react103.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react105.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
-      tw("px-6 py-5 flex gap-5 justify-between items-center", { "bg-grey-0": collapsible }),
+      tw("px-6 flex gap-5 justify-between items-center h-[72px]", { "bg-grey-0": collapsible }),
       className
     )
   }), children);
 };
 Section3.TitleContainer = (_a) => {
   var _b = _a, { children, className, collapsible } = _b, rest = __objRest(_b, ["children", "className", "collapsible"]);
-  return /* @__PURE__ */ import_react103.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react105.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       tw("grow grid grid-cols-[auto_1fr] gap-y-2 gap-x-3 items-center", { "cursor-pointer": collapsible }),
       className
     )
   }), children);
 };
-Section3.Toggle = (props) => /* @__PURE__ */ import_react103.default.createElement(Icon, __spreadProps(__spreadValues({}, props), {
+Section3.Toggle = (props) => /* @__PURE__ */ import_react105.default.createElement(Icon, __spreadProps(__spreadValues({}, props), {
   icon: import_caretUp2.default,
   height: 22,
   width: 22
 }));
 Section3.Title = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ import_react103.default.createElement(Typography2.Large, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react105.default.createElement(Typography2.Large, __spreadProps(__spreadValues({}, rest), {
     htmlTag: "h2",
     color: "black",
     className: "flex gap-3 items-center"
@@ -13023,35 +13244,35 @@ Section3.Title = (_a) => {
 };
 Section3.Subtitle = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ import_react103.default.createElement(Typography2.Small, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react105.default.createElement(Typography2.Small, __spreadProps(__spreadValues({}, rest), {
     color: "grey-70"
   }), children);
 };
 Section3.Actions = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ import_react103.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react105.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("flex gap-4 justify-end"), className)
   }), children);
 };
 Section3.Body = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ import_react103.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react105.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("p-6"), className)
-  }), /* @__PURE__ */ import_react103.default.createElement(Typography, {
+  }), /* @__PURE__ */ import_react105.default.createElement(Typography, {
     htmlTag: "div",
     color: "grey-70"
   }, children));
 };
 
 // src/utils/useMeasure.ts
-var import_react104 = __toESM(require("react"));
+var import_react106 = __toESM(require("react"));
 function useMeasure() {
-  const ref = import_react104.default.useRef(null);
-  const [rect, setRect] = import_react104.default.useState({
+  const ref = import_react106.default.useRef(null);
+  const [rect, setRect] = import_react106.default.useState({
     width: null,
     height: null
   });
-  import_react104.default.useLayoutEffect(() => {
+  import_react106.default.useLayoutEffect(() => {
     if (!ref.current || !window.ResizeObserver) {
       return;
     }
@@ -13074,26 +13295,33 @@ function useMeasure() {
 // src/molecules/Section/Section.tsx
 var import_more5 = __toESM(require_more());
 var Section4 = (props) => {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b, _c, _d, _e;
   const { title, subtitle, actions, children } = props;
   const _collapsible = title ? (_a = props.collapsible) != null ? _a : false : false;
   const _collapsed = title ? props.collapsed : void 0;
   const _defaultCollapsed = title ? (_b = props.defaultCollapsed) != null ? _b : false : false;
-  const [isCollapsed, setCollapsed] = import_react105.default.useState(_collapsed != null ? _collapsed : _defaultCollapsed);
+  const [isCollapsed, setCollapsed] = import_react107.default.useState(_collapsed != null ? _collapsed : _defaultCollapsed);
   const [ref, { height }] = useMeasure();
   const menu = title ? (_c = props.menu) != null ? _c : void 0 : void 0;
   const menuAriaLabel = title ? (_e = (_d = props.menuAriaLabel) != null ? _d : props.menuLabel) != null ? _e : "Context menu" : void 0;
   const onAction = title ? props.onAction : void 0;
   const onMenuOpenChange = title ? props.onMenuOpenChange : void 0;
-  const _onCollapsedChanged = title && props.collapsible ? (_f = props.onCollapsedChange) != null ? _f : setCollapsed : import_noop.default;
+  const onCollapsedChange = title ? props.onCollapsedChange : void 0;
   if (title && !(0, import_isUndefined8.default)(props.collapsed) && props.collapsed !== isCollapsed) {
     setCollapsed(props.collapsed);
   }
   const handleTitleClick = () => {
-    _onCollapsedChanged(!isCollapsed);
+    if (_collapsible) {
+      if (onCollapsedChange) {
+        onCollapsedChange(!isCollapsed);
+      }
+      if (_collapsed === void 0) {
+        setCollapsed(!isCollapsed);
+      }
+    }
   };
   const targetHeight = isCollapsed ? "0px" : `${height != null ? height : 0}px`;
-  const _g = (0, import_web3.useSpring)({
+  const _f = (0, import_web3.useSpring)({
     height: height !== null ? targetHeight : void 0,
     opacity: isCollapsed ? 0 : 1,
     transform: `rotate(${isCollapsed ? 0 : 180}deg)`,
@@ -13102,50 +13330,54 @@ var Section4 = (props) => {
       duration: 150
     },
     immediate: !_collapsible
-  }), { transform, backgroundColor } = _g, spring = __objRest(_g, ["transform", "backgroundColor"]);
+  }), { transform, backgroundColor } = _f, spring = __objRest(_f, ["transform", "backgroundColor"]);
   const toggleId = (0, import_utils14.useId)();
   const regionId = (0, import_utils14.useId)();
-  return /* @__PURE__ */ import_react105.default.createElement(Section3, {
+  return /* @__PURE__ */ import_react107.default.createElement(Section3, {
+    "aria-label": title,
     className: "Aquarium-Section"
-  }, title && /* @__PURE__ */ import_react105.default.createElement(import_react105.default.Fragment, null, /* @__PURE__ */ import_react105.default.createElement(Section3.Header, {
+  }, title && /* @__PURE__ */ import_react107.default.createElement(import_react107.default.Fragment, null, /* @__PURE__ */ import_react107.default.createElement(Section3.Header, {
     collapsible: _collapsible
-  }, /* @__PURE__ */ import_react105.default.createElement(Section3.TitleContainer, {
+  }, /* @__PURE__ */ import_react107.default.createElement(Section3.TitleContainer, {
     role: _collapsible ? "button" : void 0,
     id: toggleId,
     collapsible: _collapsible,
     onClick: handleTitleClick,
     "aria-expanded": !isCollapsed,
     "aria-controls": regionId
-  }, _collapsible && /* @__PURE__ */ import_react105.default.createElement(import_web3.animated.div, {
+  }, _collapsible && /* @__PURE__ */ import_react107.default.createElement(import_web3.animated.div, {
     style: { transform }
-  }, /* @__PURE__ */ import_react105.default.createElement(Section3.Toggle, null)), /* @__PURE__ */ import_react105.default.createElement(Section3.Title, null, title, props.tag && /* @__PURE__ */ import_react105.default.createElement(TagLabel, __spreadValues({}, props.tag)), props.badge && /* @__PURE__ */ import_react105.default.createElement(Chip2, {
+  }, /* @__PURE__ */ import_react107.default.createElement(Section3.Toggle, null)), /* @__PURE__ */ import_react107.default.createElement(Section3.Title, null, /* @__PURE__ */ import_react107.default.createElement(LineClamp2, {
+    lines: 1
+  }, title), props.tag && /* @__PURE__ */ import_react107.default.createElement(TagLabel, __spreadValues({}, props.tag)), props.badge && /* @__PURE__ */ import_react107.default.createElement(Chip2, {
     text: props.badge
-  }), props.chip && /* @__PURE__ */ import_react105.default.createElement(StatusChip, __spreadValues({}, props.chip))), subtitle && /* @__PURE__ */ import_react105.default.createElement(Section3.Subtitle, {
+  }), props.chip && /* @__PURE__ */ import_react107.default.createElement(StatusChip, __spreadValues({}, props.chip))), subtitle && /* @__PURE__ */ import_react107.default.createElement(Section3.Subtitle, {
     className: tw("row-start-2", { "col-start-2": _collapsible })
-  }, subtitle)), !isCollapsed && /* @__PURE__ */ import_react105.default.createElement(Section3.Actions, null, menu && /* @__PURE__ */ import_react105.default.createElement(Box.Flex, {
+  }, /* @__PURE__ */ import_react107.default.createElement(LineClamp2, {
+    lines: 1
+  }, subtitle))), !isCollapsed && /* @__PURE__ */ import_react107.default.createElement(Section3.Actions, null, menu && /* @__PURE__ */ import_react107.default.createElement(Box.Flex, {
     alignItems: "center"
-  }, /* @__PURE__ */ import_react105.default.createElement(DropdownMenu2, {
+  }, /* @__PURE__ */ import_react107.default.createElement(DropdownMenu2, {
     onAction: (action) => onAction == null ? void 0 : onAction(action),
     onOpenChange: onMenuOpenChange
-  }, /* @__PURE__ */ import_react105.default.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ import_react105.default.createElement(Button.Icon, {
+  }, /* @__PURE__ */ import_react107.default.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ import_react107.default.createElement(Button.Icon, {
     "aria-label": menuAriaLabel,
     icon: import_more5.default
-  })), menu)), actions && (0, import_castArray4.default)(actions).filter(Boolean).map((action) => renderAction("secondary", action)))), /* @__PURE__ */ import_react105.default.createElement(import_web3.animated.div, {
+  })), menu)), actions && (0, import_castArray4.default)(actions).filter(Boolean).map((action) => renderAction("secondary", action)), props.switch && /* @__PURE__ */ import_react107.default.createElement(Switch2, __spreadValues({}, props.switch)))), /* @__PURE__ */ import_react107.default.createElement(import_web3.animated.div, {
     className: tw(`h-[1px]`),
     style: { backgroundColor }
-  })), /* @__PURE__ */ import_react105.default.createElement(import_web3.animated.div, {
+  })), /* @__PURE__ */ import_react107.default.createElement(import_web3.animated.div, {
     id: regionId,
-    role: "region",
     "aria-hidden": isCollapsed ? true : void 0,
     style: spring,
     className: tw({ "overflow-hidden": _collapsible })
-  }, /* @__PURE__ */ import_react105.default.createElement("div", {
+  }, /* @__PURE__ */ import_react107.default.createElement("div", {
     ref
-  }, /* @__PURE__ */ import_react105.default.createElement(Section3.Body, null, children))));
+  }, /* @__PURE__ */ import_react107.default.createElement(Section3.Body, null, children))));
 };
 
 // src/molecules/SegmentedControl/SegmentedControl.tsx
-var import_react106 = __toESM(require("react"));
+var import_react108 = __toESM(require("react"));
 var SegmentedControl = (_a) => {
   var _b = _a, {
     children,
@@ -13162,7 +13394,7 @@ var SegmentedControl = (_a) => {
     "selected",
     "className"
   ]);
-  return /* @__PURE__ */ import_react106.default.createElement("li", null, /* @__PURE__ */ import_react106.default.createElement("button", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ import_react108.default.createElement("li", null, /* @__PURE__ */ import_react108.default.createElement("button", __spreadProps(__spreadValues({
     type: "button"
   }, rest), {
     className: classNames(
@@ -13196,12 +13428,12 @@ var SegmentedControlGroup = (_a) => {
     "border border-grey-20 text-grey-50": variant === "outlined",
     "bg-grey-0": variant === "raised"
   });
-  return /* @__PURE__ */ import_react106.default.createElement("ul", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react108.default.createElement("ul", __spreadProps(__spreadValues({}, rest), {
     "aria-label": ariaLabel,
     className: classNames("Aquarium-SegmentedControl", classes2, className)
-  }), import_react106.default.Children.map(
+  }), import_react108.default.Children.map(
     children,
-    (child) => import_react106.default.cloneElement(child, {
+    (child) => import_react108.default.cloneElement(child, {
       dense,
       variant,
       onClick: () => onChange(child.props.value),
@@ -13239,14 +13471,14 @@ var getCommonClassNames = (dense, selected) => tw(
 );
 
 // src/molecules/Stepper/Stepper.tsx
-var import_react108 = __toESM(require("react"));
+var import_react110 = __toESM(require("react"));
 
 // src/atoms/Stepper/Stepper.tsx
-var import_react107 = __toESM(require("react"));
+var import_react109 = __toESM(require("react"));
 var import_tick6 = __toESM(require_tick());
 var Stepper = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ import_react107.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react109.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(className)
   }));
 };
@@ -13260,7 +13492,7 @@ var ConnectorContainer = (_a) => {
     "completed",
     "dense"
   ]);
-  return /* @__PURE__ */ import_react107.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react109.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       tw("absolute w-full -left-1/2", {
         "top-[3px] px-[14px]": Boolean(dense),
@@ -13272,7 +13504,7 @@ var ConnectorContainer = (_a) => {
 };
 var Connector = (_a) => {
   var _b = _a, { children, className, completed, dense } = _b, rest = __objRest(_b, ["children", "className", "completed", "dense"]);
-  return /* @__PURE__ */ import_react107.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react109.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       tw("w-full", {
         "bg-grey-20": !completed,
@@ -13286,7 +13518,7 @@ var Connector = (_a) => {
 };
 var Step = (_a) => {
   var _b = _a, { className, state } = _b, rest = __objRest(_b, ["className", "state"]);
-  return /* @__PURE__ */ import_react107.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react109.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       tw("flex flex-col items-center text-grey-90 relative text-center", {
         "text-grey-20": state === "inactive"
@@ -13307,13 +13539,13 @@ var getDenseClassNames = (state) => tw("h-[8px] w-[8px]", {
 });
 var Indicator = (_a) => {
   var _b = _a, { children, className, state, dense } = _b, rest = __objRest(_b, ["children", "className", "state", "dense"]);
-  return /* @__PURE__ */ import_react107.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react109.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       tw("rounded-full flex justify-center items-center mx-2 mb-3"),
       dense ? getDenseClassNames(state) : getClassNames(state),
       className
     )
-  }), state === "completed" ? /* @__PURE__ */ import_react107.default.createElement(InlineIcon, {
+  }), state === "completed" ? /* @__PURE__ */ import_react109.default.createElement(InlineIcon, {
     icon: import_tick6.default
   }) : dense ? null : children);
 };
@@ -13324,26 +13556,26 @@ Stepper.ConnectorContainer = ConnectorContainer;
 
 // src/molecules/Stepper/Stepper.tsx
 var Stepper2 = ({ children, activeIndex, dense }) => {
-  const steps = import_react108.default.Children.count(children);
-  return /* @__PURE__ */ import_react108.default.createElement(Stepper, {
+  const steps = import_react110.default.Children.count(children);
+  return /* @__PURE__ */ import_react110.default.createElement(Stepper, {
     role: "list",
     className: "Aquarium-Stepper"
-  }, /* @__PURE__ */ import_react108.default.createElement(Template, {
+  }, /* @__PURE__ */ import_react110.default.createElement(Template, {
     columns: steps
-  }, import_react108.default.Children.map(children, (child, index) => {
+  }, import_react110.default.Children.map(children, (child, index) => {
     if (!isComponentType(child, Step2)) {
       return new Error("<Stepper> can only have <Stepper.Step> components as children");
     } else {
       const state = index > activeIndex ? "inactive" : index === activeIndex ? "active" : "completed";
-      return /* @__PURE__ */ import_react108.default.createElement(Stepper.Step, {
+      return /* @__PURE__ */ import_react110.default.createElement(Stepper.Step, {
         state,
         "aria-current": state === "active" ? "step" : false,
         role: "listitem"
-      }, index > 0 && index <= steps && /* @__PURE__ */ import_react108.default.createElement(Stepper.ConnectorContainer, {
+      }, index > 0 && index <= steps && /* @__PURE__ */ import_react110.default.createElement(Stepper.ConnectorContainer, {
         dense
-      }, /* @__PURE__ */ import_react108.default.createElement(Stepper.ConnectorContainer.Connector, {
+      }, /* @__PURE__ */ import_react110.default.createElement(Stepper.ConnectorContainer.Connector, {
         completed: state === "completed" || state === "active"
-      })), /* @__PURE__ */ import_react108.default.createElement(Stepper.Step.Indicator, {
+      })), /* @__PURE__ */ import_react110.default.createElement(Stepper.Step.Indicator, {
         state,
         dense
       }, index + 1), child.props.children);
@@ -13355,104 +13587,6 @@ var Step2 = () => null;
 Step2.displayName = "Stepper.Step";
 Stepper2.Step = Step2;
 
-// src/molecules/Switch/Switch.tsx
-var import_react110 = __toESM(require("react"));
-
-// src/atoms/Switch/Switch.tsx
-var import_react109 = __toESM(require("react"));
-var Switch = import_react109.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_react109.default.createElement("span", {
-      className: tw("relative inline-flex justify-center items-center self-center group")
-    }, /* @__PURE__ */ import_react109.default.createElement("input", __spreadProps(__spreadValues({
-      id,
-      ref,
-      type: "checkbox",
-      name
-    }, props), {
-      className: classNames(
-        tw(
-          "appearance-none peer/switch rounded-full inline-block w-[34px] h-[20px] transition duration-300",
-          "outline-none focus:border border-info-70 bg-grey-20",
-          "cursor-pointer disabled:cursor-not-allowed",
-          {
-            "hover:bg-grey-30 checked:bg-primary-80 hover:checked:bg-primary-80": !disabled,
-            "bg-grey-5 checked:opacity-40 checked:bg-primary-40": disabled
-          }
-        )
-      ),
-      readOnly,
-      disabled
-    })), /* @__PURE__ */ import_react109.default.createElement("span", {
-      className: tw(
-        "pointer-events-none rounded-full absolute inline-block transition duration-300 h-4 w-4 transform peer-checked/switch:translate-x-5",
-        "bg-white peer-disabled/switch:bg-grey-0 left-2 peer-checked/switch:left-1",
-        {
-          "shadow-4dp": !disabled
-        }
-      )
-    }));
-  }
-);
-
-// src/molecules/Switch/Switch.tsx
-var Switch2 = import_react110.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, {
-      id,
-      name,
-      caption,
-      readOnly = false,
-      disabled = false,
-      children,
-      "aria-label": ariaLabel,
-      labelPlacement
-    } = _b, props = __objRest(_b, [
-      "id",
-      "name",
-      "caption",
-      "readOnly",
-      "disabled",
-      "children",
-      "aria-label",
-      "labelPlacement"
-    ]);
-    var _a2;
-    const isChecked = (_a2 = props.checked) != null ? _a2 : props.defaultChecked;
-    return !readOnly || isChecked ? /* @__PURE__ */ import_react110.default.createElement(ControlLabel, {
-      htmlFor: id,
-      label: children,
-      "aria-label": ariaLabel,
-      caption,
-      readOnly,
-      disabled,
-      style: { gap: "0 8px" },
-      labelPlacement,
-      className: "Aquarium-Switch"
-    }, !readOnly && /* @__PURE__ */ import_react110.default.createElement(Switch, __spreadProps(__spreadValues({
-      id,
-      ref,
-      name
-    }, props), {
-      readOnly,
-      disabled
-    }))) : null;
-  }
-);
-Switch2.displayName = "Switch";
-var SwitchSkeleton = () => /* @__PURE__ */ import_react110.default.createElement("div", {
-  className: tw("flex gap-3")
-}, /* @__PURE__ */ import_react110.default.createElement(Skeleton, {
-  height: 20,
-  width: 35
-}), /* @__PURE__ */ import_react110.default.createElement(Skeleton, {
-  height: 20,
-  width: 150
-}));
-Switch2.Skeleton = SwitchSkeleton;
-Switch2.Skeleton.displayName = "Switch.Skeleton ";
-
 // src/molecules/SwitchGroup/SwitchGroup.tsx
 var import_react111 = __toESM(require("react"));
 var import_uniqueId9 = __toESM(require("lodash/uniqueId"));