@aivenio/aquarium 1.18.0-rc1 → 1.18.0-rc3

package/dist/system.mjs

@@ -1269,11 +1269,11 @@ var require_loading = __commonJS({
   "src/icons/loading.js"(exports) {
     "use strict";
     var data = {
-      "body": '<g fill="none" stroke="currentColor" stroke-width="3"><circle cx="10" cy="10" r="8.5" transform="matrix(-1 0 0 1 21 1)"/><path d="M19.235 10.412a7.647 7.647 0 00-7.647-7.647"/></g>',
+      "body": '<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-width="3" transform="translate(1 1)"><circle cx="18" cy="18" r="18" stroke-opacity=".5"/><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName="transform" dur="1s" from="0 18 18" repeatCount="indefinite" to="360 18 18" type="rotate"/></path></g>',
       "left": 0,
       "top": 0,
-      "width": 22,
-      "height": 22
+      "width": 40,
+      "height": 40
     };
     exports.__esModule = true;
     exports.default = data;
@@ -1617,6 +1617,8 @@ __export(molecules_exports, {
   NativeSelect: () => NativeSelect,
   NativeSelectBase: () => NativeSelectBase,
   Navigation: () => Navigation2,
+  NotificationConsumer: () => NotificationConsumer,
+  NotificationProvider: () => NotificationProvider,
   OneLineBanner: () => OneLineBanner,
   Option: () => Option,
   PageHeader: () => PageHeader2,
@@ -1666,6 +1668,8 @@ __export(molecules_exports, {
   columnIsFieldColumn: () => columnIsFieldColumn,
   createTabsComponent: () => createTabsComponent,
   toSortDirection: () => toSortDirection,
+  useNotification: () => useNotification,
+  useNotificationContext: () => useNotificationContext,
   usePagination: () => usePagination,
   usePopoverContext: () => usePopoverContext,
   useScrollTarget: () => useScrollTarget,
@@ -3104,7 +3108,8 @@ var asButton = (Component, isDropdownButton) => {
               "py-3": !dense && isGhost,
               "py-2": dense && isGhost,
               "block w-full": fullWidth && !isIconOnlyButton,
-              "cursor-not-allowed": !!disabled || !!loading2
+              "cursor-not-allowed": !!disabled || !!loading2,
+              "icon-stroke-2": !isIconOnlyButton
             }
           )
         ),
@@ -7931,52 +7936,170 @@ Navigation2.Footer = Navigation.Footer;
 Navigation2.Header = Navigation.Header;
 Navigation2.Section = Navigation.Section;
 
+// src/molecules/Notification/Notification.tsx
+import React79, { createContext as createContext2, useContext as useContext3, useEffect as useEffect9, useReducer } from "react";
+import groupBy from "lodash/groupBy";
+
+// src/molecules/Spacing/Spacing.tsx
+import React78 from "react";
+var Spacing = (_a) => {
+  var _b = _a, { gap, row } = _b, rest = __objRest(_b, ["gap", "row"]);
+  return /* @__PURE__ */ React78.createElement(Box, __spreadProps(__spreadValues({}, rest), {
+    display: "flex",
+    flexDirection: row ? "row" : "column",
+    gap
+  }));
+};
+
+// src/molecules/Notification/Notification.tsx
+var NotificationContext = createContext2(null);
+var useNotificationContext = () => {
+  const context2 = useContext3(NotificationContext);
+  if (context2 === null) {
+    throw new Error("NotificationContext was used outside of provider.");
+  }
+  return context2;
+};
+var useNotification = () => {
+  const [_, dispatch] = useNotificationContext();
+  return (notification) => {
+    dispatch({ type: 0 /* Notify */, notification });
+  };
+};
+var toNotification = (_a) => {
+  var _b = _a, {
+    id,
+    variant,
+    position,
+    duration
+  } = _b, notification = __objRest(_b, [
+    "id",
+    "variant",
+    "position",
+    "duration"
+  ]);
+  return __spreadProps(__spreadValues({}, notification), {
+    id: id || crypto.randomUUID(),
+    variant: variant || "default",
+    position: position || "top",
+    duration: duration || variant === "danger" ? Infinity : 6e3
+  });
+};
+var reducer = (state, action) => {
+  switch (action.type) {
+    case 0 /* Notify */:
+      return __spreadProps(__spreadValues({}, state), { notifications: [...state.notifications, toNotification(action.notification)] });
+    case 1 /* Dismiss */:
+      return __spreadProps(__spreadValues({}, state), {
+        notifications: state.notifications.filter((notification) => notification.id !== action.notificationId)
+      });
+    default:
+      throw new Error("Unsupported action type.");
+  }
+};
+var NotificationProvider = ({ children }) => {
+  const [state, dispatch] = useReducer(reducer, { notifications: [] });
+  return /* @__PURE__ */ React79.createElement(NotificationContext.Provider, {
+    value: [state, dispatch]
+  }, children);
+};
+var isCentered = (position) => position === "top" || position === "bottom";
+var PADDING = 20;
+var Notification = ({ notification, onDismiss }) => {
+  const { id, message, title, variant, duration } = notification;
+  useEffect9(() => {
+    let timer;
+    if (duration !== Infinity) {
+      timer = setTimeout(() => {
+        onDismiss(id);
+      }, duration);
+    }
+    return () => {
+      if (timer) {
+        clearTimeout(timer);
+      }
+    };
+  }, [duration]);
+  return /* @__PURE__ */ React79.createElement(Alert2, {
+    title,
+    type: variant === "danger" ? "error" : "information"
+  }, message);
+};
+var NotificationConsumer = () => {
+  const [state, dispatch] = useNotificationContext();
+  const notificationsByPosition = groupBy(state.notifications, "position");
+  const positions = Object.keys(notificationsByPosition);
+  const onDismiss = (notificationId) => {
+    dispatch({ type: 1 /* Dismiss */, notificationId });
+  };
+  return /* @__PURE__ */ React79.createElement("div", null, positions.map((position) => {
+    var _a;
+    return /* @__PURE__ */ React79.createElement(Spacing, {
+      gap: "3",
+      key: position,
+      style: {
+        position: "fixed",
+        bottom: position.includes("bottom") ? PADDING : void 0,
+        top: position.includes("top") ? PADDING : void 0,
+        right: position.includes("right") ? PADDING : void 0,
+        left: isCentered(position) ? "50%" : position.includes("left") ? PADDING : void 0,
+        transform: isCentered(position) ? "translateX(-50%)" : void 0,
+        zIndex: 9e3
+      }
+    }, (_a = notificationsByPosition[position]) == null ? void 0 : _a.map((notification) => /* @__PURE__ */ React79.createElement(Notification, {
+      key: notification.id,
+      notification,
+      onDismiss
+    })));
+  }));
+};
+
 // src/molecules/PageHeader/PageHeader.tsx
-import React79 from "react";
+import React81 from "react";
 import castArray3 from "lodash/castArray";
 import omit14 from "lodash/omit";
 
 // src/atoms/PageHeader/PageHeader.tsx
-import React78 from "react";
+import React80 from "react";
 var PageHeader = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React78.createElement("div", __spreadValues({
+  return /* @__PURE__ */ React80.createElement("div", __spreadValues({
     className: classNames(tw("flex flex-row gap-4 pb-6"), className)
   }, rest), children);
 };
 PageHeader.Container = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React78.createElement("div", __spreadValues({
+  return /* @__PURE__ */ React80.createElement("div", __spreadValues({
     className: classNames(tw("flex flex-col grow gap-0"), className)
   }, rest), children);
 };
 PageHeader.TitleContainer = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React78.createElement("div", __spreadValues({
+  return /* @__PURE__ */ React80.createElement("div", __spreadValues({
     className: classNames(tw("flex flex-col justify-center gap-2"), className)
   }, rest), children);
 };
 PageHeader.Title = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ React78.createElement(Typography2.Heading, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React80.createElement(Typography2.Heading, __spreadProps(__spreadValues({}, rest), {
     color: "grey-100"
   }), children);
 };
 PageHeader.Subtitle = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ React78.createElement(Typography2.Small, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React80.createElement(Typography2.Small, __spreadProps(__spreadValues({}, rest), {
     color: "grey-70"
   }), children);
 };
 PageHeader.Chips = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React78.createElement("div", __spreadValues({
+  return /* @__PURE__ */ React80.createElement("div", __spreadValues({
     className: classNames(tw("flex gap-3"), className)
   }, rest), children);
 };
 PageHeader.Actions = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React78.createElement("div", __spreadValues({
+  return /* @__PURE__ */ React80.createElement("div", __spreadValues({
     className: classNames(tw("flex flex-row gap-4 self-start"), className)
   }, rest), children);
 };
@@ -7992,34 +8115,34 @@ var PageHeader2 = ({
   chips = [],
   breadcrumbs
 }) => {
-  return /* @__PURE__ */ React79.createElement(PageHeader, null, /* @__PURE__ */ React79.createElement(PageHeader.Container, null, breadcrumbs && /* @__PURE__ */ React79.createElement(Box, {
+  return /* @__PURE__ */ React81.createElement(PageHeader, null, /* @__PURE__ */ React81.createElement(PageHeader.Container, null, breadcrumbs && /* @__PURE__ */ React81.createElement(Box, {
     marginBottom: image ? "3" : void 0
-  }, /* @__PURE__ */ React79.createElement(Breadcrumbs, null, breadcrumbs)), /* @__PURE__ */ React79.createElement(Flexbox, {
+  }, /* @__PURE__ */ React81.createElement(Breadcrumbs, null, breadcrumbs)), /* @__PURE__ */ React81.createElement(Flexbox, {
     gap: "5"
-  }, image && /* @__PURE__ */ React79.createElement("img", {
+  }, image && /* @__PURE__ */ React81.createElement("img", {
     src: image,
     alt: imageAlt,
     className: tw("w-[56px] h-[56px]")
-  }), /* @__PURE__ */ React79.createElement(PageHeader.TitleContainer, null, /* @__PURE__ */ React79.createElement(PageHeader.Title, null, title), chips.length > 0 && /* @__PURE__ */ React79.createElement(PageHeader.Chips, null, chips.map((chip) => /* @__PURE__ */ React79.createElement(Chip2, {
+  }), /* @__PURE__ */ React81.createElement(PageHeader.TitleContainer, null, /* @__PURE__ */ React81.createElement(PageHeader.Title, null, title), chips.length > 0 && /* @__PURE__ */ React81.createElement(PageHeader.Chips, null, chips.map((chip) => /* @__PURE__ */ React81.createElement(Chip2, {
     key: chip,
     dense: true,
     text: chip
-  }))), subtitle && /* @__PURE__ */ React79.createElement(PageHeader.Subtitle, null, subtitle)))), (secondaryActions || primaryAction) && /* @__PURE__ */ React79.createElement(PageHeader.Actions, null, secondaryActions && castArray3(secondaryActions).filter(Boolean).map((_a) => {
+  }))), subtitle && /* @__PURE__ */ React81.createElement(PageHeader.Subtitle, null, subtitle)))), (secondaryActions || primaryAction) && /* @__PURE__ */ React81.createElement(PageHeader.Actions, null, secondaryActions && castArray3(secondaryActions).filter(Boolean).map((_a) => {
     var _b = _a, { text } = _b, action = __objRest(_b, ["text"]);
-    return /* @__PURE__ */ React79.createElement(Button.Secondary, __spreadValues({
+    return /* @__PURE__ */ React81.createElement(Button.Secondary, __spreadValues({
       key: text
     }, action), text);
-  }), primaryAction && /* @__PURE__ */ React79.createElement(Button.Primary, __spreadValues({
+  }), primaryAction && /* @__PURE__ */ React81.createElement(Button.Primary, __spreadValues({
     key: primaryAction.text
   }, omit14(primaryAction, "text")), primaryAction.text)));
 };
 
 // src/molecules/Pagination/Pagination.tsx
-import React81 from "react";
+import React83 from "react";
 import clamp from "lodash/clamp";
 
 // src/molecules/Select/Select.tsx
-import React80, { useRef as useRef12, useState as useState10 } from "react";
+import React82, { useRef as useRef12, useState as useState10 } from "react";
 import { useSelect } from "downshift";
 import defaults from "lodash/defaults";
 import isArray from "lodash/isArray";
@@ -8035,10 +8158,10 @@ var hasOptionGroups = (val) => {
 };
 var defaultRenderOption = (item, props, { selectedItem }, { getOptionKey, getValue, optionToString = getOptionLabelBuiltin }) => {
   var _a, _b;
-  return /* @__PURE__ */ React80.createElement(Select.Item, __spreadValues({
+  return /* @__PURE__ */ React82.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__ */ React80.createElement(InlineIcon, {
+  }, props), hasIconProperty(item) && /* @__PURE__ */ React82.createElement(InlineIcon, {
     icon: item.icon
   }), optionToString(item));
 };
@@ -8157,13 +8280,13 @@ var _SelectBase = (props) => {
     },
     withDefaults
   );
-  const renderGroup = (group) => /* @__PURE__ */ React80.createElement(React80.Fragment, {
+  const renderGroup = (group) => /* @__PURE__ */ React82.createElement(React82.Fragment, {
     key: group.label
-  }, /* @__PURE__ */ React80.createElement(Select.Group, null, group.label), group.options.map((opt) => renderItem(opt, items.indexOf(opt))));
-  const input = /* @__PURE__ */ React80.createElement(Select.InputContainer, __spreadProps(__spreadValues({}, getToggleButtonProps({ disabled: disabled || readOnly, ref: targetRef })), {
+  }, /* @__PURE__ */ React82.createElement(Select.Group, null, group.label), group.options.map((opt) => renderItem(opt, items.indexOf(opt))));
+  const input = /* @__PURE__ */ React82.createElement(Select.InputContainer, __spreadProps(__spreadValues({}, getToggleButtonProps({ disabled: disabled || readOnly, ref: targetRef })), {
     variant: disabled ? "disabled" : !valid ? "error" : readOnly ? "readOnly" : hasFocus ? "focused" : "default",
     tabIndex: 0
-  }), /* @__PURE__ */ React80.createElement(Select.Input, __spreadProps(__spreadValues({
+  }), /* @__PURE__ */ React82.createElement(Select.Input, __spreadProps(__spreadValues({
     id,
     name
   }, rest), {
@@ -8175,26 +8298,26 @@ var _SelectBase = (props) => {
     tabIndex: -1,
     onFocus: () => setFocus(true),
     onBlur: () => setFocus(false)
-  })), !readOnly && /* @__PURE__ */ React80.createElement(Select.Toggle, {
+  })), !readOnly && /* @__PURE__ */ React82.createElement(Select.Toggle, {
     disabled,
     isOpen,
     tabIndex: -1
   }));
   const menuProps = getMenuProps({ ref: menuRef }, { suppressRefError: !isOpen });
-  return /* @__PURE__ */ React80.createElement("div", {
+  return /* @__PURE__ */ React82.createElement("div", {
     className: tw("relative")
-  }, labelWrapper ? React80.cloneElement(labelWrapper, { children: input }) : input, isOpen && /* @__PURE__ */ React80.createElement(PopoverOverlay, {
+  }, labelWrapper ? React82.cloneElement(labelWrapper, { children: input }) : input, isOpen && /* @__PURE__ */ React82.createElement(PopoverOverlay, {
     state,
     triggerRef: targetRef,
     placement: "bottom-left",
     shouldFlip: true,
     style: { width: (_b = targetRef.current) == null ? void 0 : _b.offsetWidth }
-  }, /* @__PURE__ */ React80.createElement(Select.Menu, __spreadValues({
+  }, /* @__PURE__ */ React82.createElement(Select.Menu, __spreadValues({
     ref: menuRef,
     maxHeight
-  }, menuProps), options.length === 0 && /* @__PURE__ */ React80.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__ */ React80.createElement(React80.Fragment, null, /* @__PURE__ */ React80.createElement(Select.Divider, {
+  }, menuProps), options.length === 0 && /* @__PURE__ */ React82.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__ */ React82.createElement(React82.Fragment, null, /* @__PURE__ */ React82.createElement(Select.Divider, {
     onMouseOver: () => setHighlightedIndex(-1)
-  }), actions.map((act, index) => /* @__PURE__ */ React80.createElement(Select.ActionItem, __spreadProps(__spreadValues({
+  }), actions.map((act, index) => /* @__PURE__ */ React82.createElement(Select.ActionItem, __spreadProps(__spreadValues({
     key: `${index}`
   }, act), {
     onMouseOver: () => setHighlightedIndex(-1),
@@ -8204,10 +8327,10 @@ var _SelectBase = (props) => {
     }
   }), act.label))))));
 };
-var SelectBase = (props) => /* @__PURE__ */ React80.createElement(_SelectBase, __spreadProps(__spreadValues({}, props), {
+var SelectBase = (props) => /* @__PURE__ */ React82.createElement(_SelectBase, __spreadProps(__spreadValues({}, props), {
   labelWrapper: void 0
 }));
-var SelectBaseSkeleton = () => /* @__PURE__ */ React80.createElement(Skeleton, {
+var SelectBaseSkeleton = () => /* @__PURE__ */ React82.createElement(Skeleton, {
   height: 38
 });
 SelectBase.Skeleton = SelectBaseSkeleton;
@@ -8225,19 +8348,19 @@ var Select2 = (_a) => {
   const baseProps = omit15(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__ */ React80.createElement(Label, __spreadValues({
+  const label = /* @__PURE__ */ React82.createElement(Label, __spreadValues({
     id: `${id.current}-label`,
     htmlFor: `${id.current}-input`,
     variant,
     messageId: errorMessageId
   }, labelProps));
-  return /* @__PURE__ */ React80.createElement(FormControl, null, /* @__PURE__ */ React80.createElement(_SelectBase, __spreadProps(__spreadValues(__spreadValues({}, baseProps), errorProps), {
+  return /* @__PURE__ */ React82.createElement(FormControl, null, /* @__PURE__ */ React82.createElement(_SelectBase, __spreadProps(__spreadValues(__spreadValues({}, baseProps), errorProps), {
     id: `${id.current}-input`,
     options,
     disabled: props.disabled,
     valid: props.valid,
     labelWrapper: label
-  })), /* @__PURE__ */ React80.createElement(HelperText, {
+  })), /* @__PURE__ */ React82.createElement(HelperText, {
     messageId: errorMessageId,
     error: !labelProps.valid,
     helperText: labelProps.helperText,
@@ -8246,7 +8369,7 @@ var Select2 = (_a) => {
     reserveSpaceForError: labelProps.reserveSpaceForError
   }));
 };
-var SelectSkeleton = () => /* @__PURE__ */ React80.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React80.createElement(SelectBase.Skeleton, null));
+var SelectSkeleton = () => /* @__PURE__ */ React82.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React82.createElement(SelectBase.Skeleton, null));
 Select2.Skeleton = SelectSkeleton;
 Select2.Skeleton.displayName = "Select.Skeleton";
 
@@ -8265,23 +8388,23 @@ var Pagination = ({
   pageSizes,
   onPageSizeChange
 }) => {
-  const [value, setValue] = React81.useState(currentPage);
-  React81.useEffect(() => {
+  const [value, setValue] = React83.useState(currentPage);
+  React83.useEffect(() => {
     setValue(currentPage);
   }, [currentPage]);
-  return /* @__PURE__ */ React81.createElement(Box, {
+  return /* @__PURE__ */ React83.createElement(Box, {
     className: tw("grid grid-cols-[200px_1fr_200px]"),
     backgroundColor: "grey-0",
     padding: "4"
-  }, pageSizes && onPageSizeChange && typeof pageSize === "number" ? /* @__PURE__ */ React81.createElement(Box, {
+  }, pageSizes && onPageSizeChange && typeof pageSize === "number" ? /* @__PURE__ */ React83.createElement(Box, {
     display: "flex",
     alignItems: "center",
     gap: "4"
-  }, /* @__PURE__ */ React81.createElement(Typography2.Small, {
+  }, /* @__PURE__ */ React83.createElement(Typography2.Small, {
     color: "grey-50"
-  }, "Items per page "), /* @__PURE__ */ React81.createElement("div", {
+  }, "Items per page "), /* @__PURE__ */ React83.createElement("div", {
     className: tw("max-w-[70px]")
-  }, /* @__PURE__ */ React81.createElement(SelectBase, {
+  }, /* @__PURE__ */ React83.createElement(SelectBase, {
     options: pageSizes.map((size) => size.toString()),
     value: pageSize.toString(),
     onChange: (size) => {
@@ -8292,26 +8415,26 @@ var Pagination = ({
         }
       }
     }
-  }))) : /* @__PURE__ */ React81.createElement("div", null), /* @__PURE__ */ React81.createElement(Box, {
+  }))) : /* @__PURE__ */ React83.createElement("div", null), /* @__PURE__ */ React83.createElement(Box, {
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
     className: tw("grow")
-  }, /* @__PURE__ */ React81.createElement(IconButton, {
+  }, /* @__PURE__ */ React83.createElement(IconButton, {
     "aria-label": "First",
     onClick: () => onPageChange(1),
     icon: import_chevronBackward.default,
     disabled: !hasPreviousPage
-  }), /* @__PURE__ */ React81.createElement(IconButton, {
+  }), /* @__PURE__ */ React83.createElement(IconButton, {
     "aria-label": "Previous",
     onClick: () => onPageChange(currentPage - 1),
     icon: import_chevronLeft3.default,
     disabled: !hasPreviousPage
-  }), /* @__PURE__ */ React81.createElement(Box, {
+  }), /* @__PURE__ */ React83.createElement(Box, {
     paddingX: "4"
-  }, /* @__PURE__ */ React81.createElement(Typography2.Small, {
+  }, /* @__PURE__ */ React83.createElement(Typography2.Small, {
     color: "grey-60"
-  }, "Page")), /* @__PURE__ */ React81.createElement(InputBase, {
+  }, "Page")), /* @__PURE__ */ React83.createElement(InputBase, {
     className: classNames(tw("text-center max-w-[40px]"), "no-arrows"),
     type: "number",
     min: 1,
@@ -8328,45 +8451,45 @@ var Pagination = ({
       const newPage = !isNaN(numberValue) ? clamp(numberValue, 1, totalPages) : 1;
       onPageChange(newPage);
     }
-  }), /* @__PURE__ */ React81.createElement(Box, {
+  }), /* @__PURE__ */ React83.createElement(Box, {
     paddingX: "4"
-  }, /* @__PURE__ */ React81.createElement(Typography2.Small, {
+  }, /* @__PURE__ */ React83.createElement(Typography2.Small, {
     color: "grey-60"
-  }, "of ", totalPages)), /* @__PURE__ */ React81.createElement(IconButton, {
+  }, "of ", totalPages)), /* @__PURE__ */ React83.createElement(IconButton, {
     "aria-label": "Next",
     onClick: () => onPageChange(currentPage + 1),
     icon: import_chevronRight3.default,
     disabled: !hasNextPage
-  }), /* @__PURE__ */ React81.createElement(IconButton, {
+  }), /* @__PURE__ */ React83.createElement(IconButton, {
     "aria-label": "Last",
     onClick: () => onPageChange(totalPages),
     icon: import_chevronForward.default,
     disabled: !hasNextPage
-  })), /* @__PURE__ */ React81.createElement("div", null));
+  })), /* @__PURE__ */ React83.createElement("div", null));
 };
 
 // src/molecules/PopoverDialog/PopoverDialog.tsx
-import React83 from "react";
+import React85 from "react";
 import omit16 from "lodash/omit";
 
 // src/atoms/PopoverDialog/PopoverDialog.tsx
-import React82 from "react";
+import React84 from "react";
 var Header2 = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React82.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React84.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("p-5 gap-3 flex items-center"), className)
   }), children);
 };
 var Title = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React82.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React84.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
     htmlTag: "h1",
     variant: "small-strong"
   }), children);
 };
 var Body = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React82.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React84.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
     htmlTag: "div",
     variant: "caption",
     className: classNames(tw("px-5 overflow-y-auto"), className)
@@ -8374,13 +8497,13 @@ var Body = (_a) => {
 };
 var Footer2 = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React82.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React84.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("p-5"), className)
   }), children);
 };
 var Actions2 = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React82.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React84.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("flex gap-4"), className)
   }), children);
 };
@@ -8396,13 +8519,13 @@ var PopoverDialog = {
 var PopoverDialog2 = ({ placement, open, title, secondaryAction, primaryAction, children }) => {
   const wrapPromptWithBody = (child) => {
     if (isComponentType(child, PopoverDialog2.Prompt)) {
-      return /* @__PURE__ */ React83.createElement(Popover2.Panel, {
+      return /* @__PURE__ */ React85.createElement(Popover2.Panel, {
         className: tw("max-w-[300px]")
-      }, /* @__PURE__ */ React83.createElement(PopoverDialog.Header, null, /* @__PURE__ */ React83.createElement(PopoverDialog.Title, null, title)), child, /* @__PURE__ */ React83.createElement(PopoverDialog.Footer, null, /* @__PURE__ */ React83.createElement(PopoverDialog.Actions, null, secondaryAction && /* @__PURE__ */ React83.createElement(Popover2.Button, __spreadValues({
+      }, /* @__PURE__ */ React85.createElement(PopoverDialog.Header, null, /* @__PURE__ */ React85.createElement(PopoverDialog.Title, null, title)), child, /* @__PURE__ */ React85.createElement(PopoverDialog.Footer, null, /* @__PURE__ */ React85.createElement(PopoverDialog.Actions, null, secondaryAction && /* @__PURE__ */ React85.createElement(Popover2.Button, __spreadValues({
         kind: "secondary-ghost",
         key: secondaryAction.text,
         dense: true
-      }, omit16(secondaryAction, "text")), secondaryAction.text), /* @__PURE__ */ React83.createElement(Popover2.Button, __spreadValues({
+      }, omit16(secondaryAction, "text")), secondaryAction.text), /* @__PURE__ */ React85.createElement(Popover2.Button, __spreadValues({
         kind: "ghost",
         key: primaryAction.text,
         dense: true
@@ -8410,15 +8533,15 @@ var PopoverDialog2 = ({ placement, open, title, secondaryAction, primaryAction,
     }
     return child;
   };
-  return /* @__PURE__ */ React83.createElement(Popover2, {
+  return /* @__PURE__ */ React85.createElement(Popover2, {
     type: "dialog",
     isOpen: open,
     placement,
     containFocus: true
-  }, React83.Children.map(children, wrapPromptWithBody));
+  }, React85.Children.map(children, wrapPromptWithBody));
 };
 PopoverDialog2.Trigger = Popover2.Trigger;
-var Prompt = ({ children }) => /* @__PURE__ */ React83.createElement(PopoverDialog.Body, null, children);
+var Prompt = ({ children }) => /* @__PURE__ */ React85.createElement(PopoverDialog.Body, null, children);
 Prompt.displayName = "PopoverDialog.Prompt";
 PopoverDialog2.Prompt = Prompt;
 
@@ -8427,14 +8550,14 @@ import { createPortal } from "react-dom";
 var Portal = ({ children, to }) => createPortal(children, to);
 
 // src/molecules/ProgressBar/ProgressBar.tsx
-import React85 from "react";
+import React87 from "react";
 
 // src/atoms/ProgressBar/ProgressBar.tsx
-import React84 from "react";
+import React86 from "react";
 import clamp2 from "lodash/clamp";
 var ProgressBar = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React84.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React86.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       tw("relative flex items-center w-full bg-grey-0 h-2 rounded-full overflow-hidden"),
       className
@@ -8450,7 +8573,7 @@ var STATUS_COLORS = {
 ProgressBar.Indicator = (_a) => {
   var _b = _a, { min, max, value, "aria-label": ariaLabel, status, className } = _b, rest = __objRest(_b, ["min", "max", "value", "aria-label", "status", "className"]);
   const completedPercentage = clamp2((value - min) / (max - min) * 100, 0, 100);
-  return /* @__PURE__ */ React84.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React86.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       tw("h-2 rounded-full transition-all ease-in-out delay-150"),
       STATUS_COLORS[status],
@@ -8466,11 +8589,11 @@ ProgressBar.Indicator = (_a) => {
 };
 ProgressBar.Labels = (_a) => {
   var _b = _a, { children, startLabel, endLabel, className } = _b, rest = __objRest(_b, ["children", "startLabel", "endLabel", "className"]);
-  return /* @__PURE__ */ React84.createElement("div", {
+  return /* @__PURE__ */ React86.createElement("div", {
     className: classNames(tw("flex flex-row"), className)
-  }, /* @__PURE__ */ React84.createElement("span", __spreadProps(__spreadValues({}, rest), {
+  }, /* @__PURE__ */ React86.createElement("span", __spreadProps(__spreadValues({}, rest), {
     className: tw("grow text-grey-70 typography-caption")
-  }), startLabel), /* @__PURE__ */ React84.createElement("span", __spreadProps(__spreadValues({}, rest), {
+  }), startLabel), /* @__PURE__ */ React86.createElement("span", __spreadProps(__spreadValues({}, rest), {
     className: tw("grow text-grey-70 typography-caption text-right")
   }), endLabel));
 };
@@ -8488,7 +8611,7 @@ var ProgressBar2 = (props) => {
   if (min > max) {
     throw new Error("`min` value provided to `ProgressBar` is greater than `max` value.");
   }
-  const progress = /* @__PURE__ */ React85.createElement(ProgressBar, null, /* @__PURE__ */ React85.createElement(ProgressBar.Indicator, {
+  const progress = /* @__PURE__ */ React87.createElement(ProgressBar, null, /* @__PURE__ */ React87.createElement(ProgressBar.Indicator, {
     status: value === max ? completedStatus : progresStatus,
     min,
     max,
@@ -8498,13 +8621,13 @@ var ProgressBar2 = (props) => {
   if (props.dense) {
     return progress;
   }
-  return /* @__PURE__ */ React85.createElement("div", null, progress, /* @__PURE__ */ React85.createElement(ProgressBar.Labels, {
+  return /* @__PURE__ */ React87.createElement("div", null, progress, /* @__PURE__ */ React87.createElement(ProgressBar.Labels, {
     className: tw("py-2"),
     startLabel: props.startLabel,
     endLabel: props.endLabel
   }));
 };
-var ProgressBarSkeleton = () => /* @__PURE__ */ React85.createElement(Skeleton, {
+var ProgressBarSkeleton = () => /* @__PURE__ */ React87.createElement(Skeleton, {
   height: 4,
   display: "block"
 });
@@ -8512,13 +8635,13 @@ ProgressBar2.Skeleton = ProgressBarSkeleton;
 ProgressBar2.Skeleton.displayName = "ProgressBar.Skeleton";
 
 // src/molecules/RadioButton/RadioButton.tsx
-import React86 from "react";
-var RadioButton2 = React86.forwardRef(
+import React88 from "react";
+var RadioButton2 = React88.forwardRef(
   (_a, ref) => {
     var _b = _a, { name, id, readOnly = false, disabled = false, caption, children, "aria-label": ariaLabel } = _b, props = __objRest(_b, ["name", "id", "readOnly", "disabled", "caption", "children", "aria-label"]);
     var _a2;
     const isChecked = (_a2 = props.checked) != null ? _a2 : props.defaultChecked;
-    return !readOnly || isChecked ? /* @__PURE__ */ React86.createElement(ControlLabel, {
+    return !readOnly || isChecked ? /* @__PURE__ */ React88.createElement(ControlLabel, {
       htmlFor: id,
       label: children,
       "aria-label": ariaLabel,
@@ -8526,7 +8649,7 @@ var RadioButton2 = React86.forwardRef(
       readOnly,
       disabled,
       style: { gap: "0 8px" }
-    }, !readOnly && /* @__PURE__ */ React86.createElement(RadioButton, __spreadProps(__spreadValues({
+    }, !readOnly && /* @__PURE__ */ React88.createElement(RadioButton, __spreadProps(__spreadValues({
       id,
       ref,
       name
@@ -8537,12 +8660,12 @@ var RadioButton2 = React86.forwardRef(
   }
 );
 RadioButton2.displayName = "RadioButton";
-var RadioButtonSkeleton = () => /* @__PURE__ */ React86.createElement("div", {
+var RadioButtonSkeleton = () => /* @__PURE__ */ React88.createElement("div", {
   className: tw("flex gap-3")
-}, /* @__PURE__ */ React86.createElement(Skeleton, {
+}, /* @__PURE__ */ React88.createElement(Skeleton, {
   height: 20,
   width: 20
-}), /* @__PURE__ */ React86.createElement(Skeleton, {
+}), /* @__PURE__ */ React88.createElement(Skeleton, {
   height: 20,
   width: 150
 }));
@@ -8550,10 +8673,10 @@ RadioButton2.Skeleton = RadioButtonSkeleton;
 RadioButton2.Skeleton.displayName = "RadioButton.Skeleton";
 
 // src/molecules/RadioButtonGroup/RadioButtonGroup.tsx
-import React87 from "react";
+import React89 from "react";
 import uniqueId8 from "lodash/uniqueId";
 var isRadioButton = (c) => {
-  return React87.isValidElement(c) && c.type === RadioButton2;
+  return React89.isValidElement(c) && c.type === RadioButton2;
 };
 var RadioButtonGroup = (_a) => {
   var _b = _a, {
@@ -8576,7 +8699,7 @@ var RadioButtonGroup = (_a) => {
     "children"
   ]);
   var _a2;
-  const [value, setValue] = React87.useState((_a2 = _value != null ? _value : defaultValue) != null ? _a2 : "");
+  const [value, setValue] = React89.useState((_a2 = _value != null ? _value : defaultValue) != null ? _a2 : "");
   const errorMessageId = uniqueId8();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const labelControlProps = getLabelControlProps(props);
@@ -8587,14 +8710,14 @@ var RadioButtonGroup = (_a) => {
     setValue(e.target.value);
     onChange == null ? void 0 : onChange(e.target.value);
   };
-  const content = React87.Children.map(children, (c) => {
+  const content = React89.Children.map(children, (c) => {
     var _a3, _b2, _c;
     if (!isRadioButton(c)) {
       return null;
     }
     const defaultChecked = defaultValue === void 0 ? void 0 : c.props.value === defaultValue;
     const checked = value === void 0 ? void 0 : c.props.value === value;
-    return React87.cloneElement(c, {
+    return React89.cloneElement(c, {
       name,
       defaultChecked: (_a3 = c.props.defaultChecked) != null ? _a3 : defaultChecked,
       checked: (_b2 = c.props.checked) != null ? _b2 : checked,
@@ -8603,11 +8726,11 @@ var RadioButtonGroup = (_a) => {
       readOnly
     });
   });
-  return /* @__PURE__ */ React87.createElement(LabelControl, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ React89.createElement(LabelControl, __spreadValues(__spreadValues({
     fieldset: true
-  }, labelControlProps), errorProps), cols && /* @__PURE__ */ React87.createElement(InputGroup, {
+  }, labelControlProps), errorProps), cols && /* @__PURE__ */ React89.createElement(InputGroup, {
     cols
-  }, content), !cols && /* @__PURE__ */ React87.createElement(Flexbox, {
+  }, content), !cols && /* @__PURE__ */ React89.createElement(Flexbox, {
     direction,
     alignItems: "flex-start",
     colGap: "8",
@@ -8616,12 +8739,12 @@ var RadioButtonGroup = (_a) => {
   }, content));
 };
 var RadioButtonGroupSkeleton = ({ direction = "row", options = 2 }) => {
-  return /* @__PURE__ */ React87.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React87.createElement("div", {
+  return /* @__PURE__ */ React89.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React89.createElement("div", {
     className: tw("flex flex-wrap", {
       "flex-row gap-8": direction === "row",
       "flex-col gap-2": direction === "column"
     })
-  }, Array.from({ length: options }).map((_, key) => /* @__PURE__ */ React87.createElement(RadioButton2.Skeleton, {
+  }, Array.from({ length: options }).map((_, key) => /* @__PURE__ */ React89.createElement(RadioButton2.Skeleton, {
     key
   }))));
 };
@@ -8629,68 +8752,68 @@ RadioButtonGroup.Skeleton = RadioButtonGroupSkeleton;
 RadioButtonGroup.Skeleton.displayName = "RadioButtonGroup.Skeleton";
 
 // src/molecules/Section/Section.tsx
-import React89 from "react";
+import React91 from "react";
 import castArray4 from "lodash/castArray";
 
 // src/atoms/Section/Section.tsx
-import React88 from "react";
+import React90 from "react";
 var Section3 = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ React88.createElement(Box, __spreadValues({
+  return /* @__PURE__ */ React90.createElement(Box, __spreadValues({
     borderColor: "grey-5",
     borderWidth: "1px"
   }, rest), children);
 };
 Section3.Header = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React88.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React90.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("px-6 py-5 flex gap-5 justify-between items-center"), className)
   }), children);
 };
 Section3.TitleContainer = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React88.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React90.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("flex flex-col grow gap-2"), className)
   }), children);
 };
 Section3.Title = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ React88.createElement(Typography2.Subheading, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React90.createElement(Typography2.Subheading, __spreadProps(__spreadValues({}, rest), {
     color: "black"
   }), children);
 };
 Section3.Subtitle = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ React88.createElement(Typography2.SmallText, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React90.createElement(Typography2.SmallText, __spreadProps(__spreadValues({}, rest), {
     color: "grey-70"
   }), children);
 };
 Section3.Actions = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React88.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React90.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__ */ React88.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React90.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("p-6"), className)
-  }), /* @__PURE__ */ React88.createElement(Typography, {
+  }), /* @__PURE__ */ React90.createElement(Typography, {
     htmlTag: "div",
     color: "grey-70"
   }, children));
 };
 
 // src/molecules/Section/Section.tsx
-var Section4 = ({ title, subtitle, actions, children }) => /* @__PURE__ */ React89.createElement(Section3, null, title && /* @__PURE__ */ React89.createElement(React89.Fragment, null, /* @__PURE__ */ React89.createElement(Section3.Header, null, /* @__PURE__ */ React89.createElement(Section3.TitleContainer, null, /* @__PURE__ */ React89.createElement(Section3.Title, null, title), subtitle && /* @__PURE__ */ React89.createElement(Section3.Subtitle, null, subtitle)), /* @__PURE__ */ React89.createElement(Section3.Actions, null, actions && castArray4(actions).filter(Boolean).map((_a) => {
+var Section4 = ({ title, subtitle, actions, children }) => /* @__PURE__ */ React91.createElement(Section3, null, title && /* @__PURE__ */ React91.createElement(React91.Fragment, null, /* @__PURE__ */ React91.createElement(Section3.Header, null, /* @__PURE__ */ React91.createElement(Section3.TitleContainer, null, /* @__PURE__ */ React91.createElement(Section3.Title, null, title), subtitle && /* @__PURE__ */ React91.createElement(Section3.Subtitle, null, subtitle)), /* @__PURE__ */ React91.createElement(Section3.Actions, null, actions && castArray4(actions).filter(Boolean).map((_a) => {
   var _b = _a, { text } = _b, action = __objRest(_b, ["text"]);
-  return /* @__PURE__ */ React89.createElement(Button.Secondary, __spreadValues({
+  return /* @__PURE__ */ React91.createElement(Button.Secondary, __spreadValues({
     key: text
   }, action), text);
-}))), /* @__PURE__ */ React89.createElement(Divider2, null)), /* @__PURE__ */ React89.createElement(Section3.Body, null, children));
+}))), /* @__PURE__ */ React91.createElement(Divider2, null)), /* @__PURE__ */ React91.createElement(Section3.Body, null, children));
 
 // src/molecules/SegmentedControl/SegmentedControl.tsx
-import React90 from "react";
+import React92 from "react";
 var SegmentedControl = (_a) => {
   var _b = _a, {
     children,
@@ -8707,7 +8830,7 @@ var SegmentedControl = (_a) => {
     "selected",
     "className"
   ]);
-  return /* @__PURE__ */ React90.createElement("button", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React92.createElement("button", __spreadProps(__spreadValues({
     type: "button"
   }, rest), {
     className: classNames(
@@ -8738,11 +8861,11 @@ var SegmentedControlGroup = (_a) => {
     "border border-grey-20 text-grey-50": variant === "outlined",
     "bg-grey-0": variant === "raised"
   });
-  return /* @__PURE__ */ React90.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React92.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(classes2, className)
-  }), React90.Children.map(
+  }), React92.Children.map(
     children,
-    (child) => React90.cloneElement(child, {
+    (child) => React92.cloneElement(child, {
       dense,
       variant,
       onClick: () => onChange(child.props.value),
@@ -8779,26 +8902,15 @@ var getCommonClassNames = (dense, selected) => tw(
   }
 );
 
-// src/molecules/Spacing/Spacing.tsx
-import React91 from "react";
-var Spacing = (_a) => {
-  var _b = _a, { gap, row } = _b, rest = __objRest(_b, ["gap", "row"]);
-  return /* @__PURE__ */ React91.createElement(Box, __spreadProps(__spreadValues({}, rest), {
-    display: "flex",
-    flexDirection: row ? "row" : "column",
-    gap
-  }));
-};
-
 // src/molecules/Stepper/Stepper.tsx
-import React93 from "react";
+import React94 from "react";
 
 // src/atoms/Stepper/Stepper.tsx
-import React92 from "react";
+import React93 from "react";
 var import_tick5 = __toESM(require_tick());
 var Stepper = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React92.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React93.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(className)
   }));
 };
@@ -8812,7 +8924,7 @@ var ConnectorContainer = (_a) => {
     "completed",
     "dense"
   ]);
-  return /* @__PURE__ */ React92.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React93.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       tw("absolute w-full -left-1/2", {
         "top-[3px] px-[14px]": Boolean(dense),
@@ -8824,7 +8936,7 @@ var ConnectorContainer = (_a) => {
 };
 var Connector = (_a) => {
   var _b = _a, { children, className, completed, dense } = _b, rest = __objRest(_b, ["children", "className", "completed", "dense"]);
-  return /* @__PURE__ */ React92.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React93.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       tw("w-full", {
         "bg-grey-20": !completed,
@@ -8838,7 +8950,7 @@ var Connector = (_a) => {
 };
 var Step = (_a) => {
   var _b = _a, { className, state } = _b, rest = __objRest(_b, ["className", "state"]);
-  return /* @__PURE__ */ React92.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React93.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       tw("flex flex-col items-center text-grey-90 relative text-center", {
         "text-grey-20": state === "inactive"
@@ -8859,13 +8971,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__ */ React92.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React93.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__ */ React92.createElement(InlineIcon, {
+  }), state === "completed" ? /* @__PURE__ */ React93.createElement(InlineIcon, {
     icon: import_tick5.default
   }) : dense ? null : children);
 };
@@ -8876,25 +8988,25 @@ Stepper.ConnectorContainer = ConnectorContainer;
 
 // src/molecules/Stepper/Stepper.tsx
 var Stepper2 = ({ children, activeIndex, dense }) => {
-  const steps = React93.Children.count(children);
-  return /* @__PURE__ */ React93.createElement(Stepper, {
+  const steps = React94.Children.count(children);
+  return /* @__PURE__ */ React94.createElement(Stepper, {
     role: "list"
-  }, /* @__PURE__ */ React93.createElement(Template, {
+  }, /* @__PURE__ */ React94.createElement(Template, {
     columns: steps
-  }, React93.Children.map(children, (child, index) => {
+  }, React94.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__ */ React93.createElement(Stepper.Step, {
+      return /* @__PURE__ */ React94.createElement(Stepper.Step, {
         state,
         "aria-current": state === "active" ? "step" : false,
         role: "listitem"
-      }, index > 0 && index <= steps && /* @__PURE__ */ React93.createElement(Stepper.ConnectorContainer, {
+      }, index > 0 && index <= steps && /* @__PURE__ */ React94.createElement(Stepper.ConnectorContainer, {
         dense
-      }, /* @__PURE__ */ React93.createElement(Stepper.ConnectorContainer.Connector, {
+      }, /* @__PURE__ */ React94.createElement(Stepper.ConnectorContainer.Connector, {
         completed: state === "completed" || state === "active"
-      })), /* @__PURE__ */ React93.createElement(Stepper.Step.Indicator, {
+      })), /* @__PURE__ */ React94.createElement(Stepper.Step.Indicator, {
         state,
         dense
       }, index + 1), child.props.children);
@@ -8907,16 +9019,16 @@ Step2.displayName = "Stepper.Step";
 Stepper2.Step = Step2;
 
 // src/molecules/Switch/Switch.tsx
-import React95 from "react";
+import React96 from "react";
 
 // src/atoms/Switch/Switch.tsx
-import React94 from "react";
-var Switch = React94.forwardRef(
+import React95 from "react";
+var Switch = React95.forwardRef(
   (_a, ref) => {
     var _b = _a, { id, children, name, disabled = false, readOnly = false } = _b, props = __objRest(_b, ["id", "children", "name", "disabled", "readOnly"]);
-    return /* @__PURE__ */ React94.createElement("span", {
+    return /* @__PURE__ */ React95.createElement("span", {
       className: tw("relative inline-flex justify-center items-center self-center group")
-    }, /* @__PURE__ */ React94.createElement("input", __spreadProps(__spreadValues({
+    }, /* @__PURE__ */ React95.createElement("input", __spreadProps(__spreadValues({
       id,
       ref,
       type: "checkbox",
@@ -8935,7 +9047,7 @@ var Switch = React94.forwardRef(
       ),
       readOnly,
       disabled
-    })), /* @__PURE__ */ React94.createElement("span", {
+    })), /* @__PURE__ */ React95.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",
@@ -8948,12 +9060,12 @@ var Switch = React94.forwardRef(
 );
 
 // src/molecules/Switch/Switch.tsx
-var Switch2 = React95.forwardRef(
+var Switch2 = React96.forwardRef(
   (_a, ref) => {
     var _b = _a, { id, name, caption, readOnly = false, disabled = false, children, "aria-label": ariaLabel } = _b, props = __objRest(_b, ["id", "name", "caption", "readOnly", "disabled", "children", "aria-label"]);
     var _a2;
     const isChecked = (_a2 = props.checked) != null ? _a2 : props.defaultChecked;
-    return !readOnly || isChecked ? /* @__PURE__ */ React95.createElement(ControlLabel, {
+    return !readOnly || isChecked ? /* @__PURE__ */ React96.createElement(ControlLabel, {
       htmlFor: id,
       label: children,
       "aria-label": ariaLabel,
@@ -8961,7 +9073,7 @@ var Switch2 = React95.forwardRef(
       readOnly,
       disabled,
       style: { gap: "0 8px" }
-    }, !readOnly && /* @__PURE__ */ React95.createElement(Switch, __spreadProps(__spreadValues({
+    }, !readOnly && /* @__PURE__ */ React96.createElement(Switch, __spreadProps(__spreadValues({
       id,
       ref,
       name
@@ -8972,12 +9084,12 @@ var Switch2 = React95.forwardRef(
   }
 );
 Switch2.displayName = "Switch";
-var SwitchSkeleton = () => /* @__PURE__ */ React95.createElement("div", {
+var SwitchSkeleton = () => /* @__PURE__ */ React96.createElement("div", {
   className: tw("flex gap-3")
-}, /* @__PURE__ */ React95.createElement(Skeleton, {
+}, /* @__PURE__ */ React96.createElement(Skeleton, {
   height: 20,
   width: 35
-}), /* @__PURE__ */ React95.createElement(Skeleton, {
+}), /* @__PURE__ */ React96.createElement(Skeleton, {
   height: 20,
   width: 150
 }));
@@ -8985,7 +9097,7 @@ Switch2.Skeleton = SwitchSkeleton;
 Switch2.Skeleton.displayName = "Switch.Skeleton ";
 
 // src/molecules/SwitchGroup/SwitchGroup.tsx
-import React96, { useState as useState11 } from "react";
+import React97, { useState as useState11 } from "react";
 import uniqueId9 from "lodash/uniqueId";
 var SwitchGroup = (_a) => {
   var _b = _a, {
@@ -9017,11 +9129,11 @@ var SwitchGroup = (_a) => {
     setSelectedItems(updated);
     onChange == null ? void 0 : onChange(updated);
   };
-  return /* @__PURE__ */ React96.createElement(LabelControl, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ React97.createElement(LabelControl, __spreadValues(__spreadValues({
     fieldset: true
-  }, labelControlProps), errorProps), /* @__PURE__ */ React96.createElement(InputGroup, {
+  }, labelControlProps), errorProps), /* @__PURE__ */ React97.createElement(InputGroup, {
     cols
-  }, React96.Children.map(children, (c) => {
+  }, React97.Children.map(children, (c) => {
     var _a3, _b2, _c, _d;
     if (!isComponentType(c, Switch2)) {
       return null;
@@ -9029,7 +9141,7 @@ var SwitchGroup = (_a) => {
     const str = (_a3 = c.props.value) == null ? void 0 : _a3.toString();
     const defaultChecked = defaultValue === void 0 ? void 0 : str !== void 0 && defaultValue.includes(str);
     const checked = value === void 0 ? void 0 : str !== void 0 && value.includes(str);
-    return React96.cloneElement(c, {
+    return React97.cloneElement(c, {
       defaultChecked: (_b2 = c.props.defaultChecked) != null ? _b2 : defaultChecked,
       checked: (_c = c.props.checked) != null ? _c : checked,
       onChange: (_d = c.props.onChange) != null ? _d : handleChange,
@@ -9039,9 +9151,9 @@ var SwitchGroup = (_a) => {
   })));
 };
 var SwitchGroupSkeleton = ({ options = 2 }) => {
-  return /* @__PURE__ */ React96.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React96.createElement("div", {
+  return /* @__PURE__ */ React97.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React97.createElement("div", {
     className: tw("flex flex-wrap flex-col gap-2")
-  }, Array.from({ length: options }).map((_, key) => /* @__PURE__ */ React96.createElement(Switch2.Skeleton, {
+  }, Array.from({ length: options }).map((_, key) => /* @__PURE__ */ React97.createElement(Switch2.Skeleton, {
     key
   }))));
 };
@@ -9049,10 +9161,10 @@ SwitchGroup.Skeleton = SwitchGroupSkeleton;
 SwitchGroup.Skeleton.displayName = "SwitchGroup.Skeleton";
 
 // src/molecules/TagLabel/TagLabel.tsx
-import React97 from "react";
+import React98 from "react";
 var TagLabel = (_a) => {
   var _b = _a, { title, dense = false } = _b, rest = __objRest(_b, ["title", "dense"]);
-  return /* @__PURE__ */ React97.createElement("span", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React98.createElement("span", __spreadProps(__spreadValues({}, rest), {
     className: tw("rounded-full text-white bg-primary-70", {
       "py-2 px-4 typography-caption": !dense,
       "py-2 px-3 typography-caption-small": dense
@@ -9061,14 +9173,14 @@ var TagLabel = (_a) => {
 };
 
 // src/molecules/Textarea/Textarea.tsx
-import React98, { useRef as useRef13, useState as useState12 } from "react";
+import React99, { useRef as useRef13, useState as useState12 } from "react";
 import omit17 from "lodash/omit";
 import toString2 from "lodash/toString";
 import uniqueId10 from "lodash/uniqueId";
-var TextareaBase = React98.forwardRef(
+var TextareaBase = React99.forwardRef(
   (_a, ref) => {
     var _b = _a, { readOnly = false, valid = true } = _b, props = __objRest(_b, ["readOnly", "valid"]);
-    return /* @__PURE__ */ React98.createElement("textarea", __spreadProps(__spreadValues({
+    return /* @__PURE__ */ React99.createElement("textarea", __spreadProps(__spreadValues({
       ref
     }, props), {
       readOnly,
@@ -9076,10 +9188,10 @@ var TextareaBase = React98.forwardRef(
     }));
   }
 );
-TextareaBase.Skeleton = () => /* @__PURE__ */ React98.createElement(Skeleton, {
+TextareaBase.Skeleton = () => /* @__PURE__ */ React99.createElement(Skeleton, {
   height: 58
 });
-var Textarea = React98.forwardRef((props, ref) => {
+var Textarea = React99.forwardRef((props, ref) => {
   var _a, _b, _c;
   const [value, setValue] = useState12((_b = (_a = props.value) != null ? _a : props.defaultValue) != null ? _b : "");
   const id = useRef13((_c = props.id) != null ? _c : `textarea-${uniqueId10()}`);
@@ -9087,12 +9199,12 @@ var Textarea = React98.forwardRef((props, ref) => {
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const _d = getLabelControlProps(props), { "data-testid": dataTestId } = _d, labelControlProps = __objRest(_d, ["data-testid"]);
   const baseProps = omit17(props, Object.keys(labelControlProps));
-  return /* @__PURE__ */ React98.createElement(LabelControl, __spreadValues({
+  return /* @__PURE__ */ React99.createElement(LabelControl, __spreadValues({
     id: `${id.current}-label`,
     htmlFor: id.current,
     messageId: errorMessageId,
     length: value !== void 0 ? toString2(value).length : void 0
-  }, labelControlProps), /* @__PURE__ */ React98.createElement(TextareaBase, __spreadProps(__spreadValues(__spreadValues({
+  }, labelControlProps), /* @__PURE__ */ React99.createElement(TextareaBase, __spreadProps(__spreadValues(__spreadValues({
     ref
   }, baseProps), errorProps), {
     id: id.current,
@@ -9109,48 +9221,48 @@ var Textarea = React98.forwardRef((props, ref) => {
   })));
 });
 Textarea.displayName = "Textarea";
-var TextAreaSkeleton = () => /* @__PURE__ */ React98.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React98.createElement(TextareaBase.Skeleton, null));
+var TextAreaSkeleton = () => /* @__PURE__ */ React99.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React99.createElement(TextareaBase.Skeleton, null));
 Textarea.Skeleton = TextAreaSkeleton;
 Textarea.Skeleton.displayName = "Textarea.Skeleton";
 
 // src/molecules/Timeline/Timeline.tsx
-import React100 from "react";
+import React101 from "react";
 
 // src/atoms/Timeline/Timeline.tsx
-import React99 from "react";
+import React100 from "react";
 var Timeline = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React99.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React100.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("grid grid-cols-[16px_1fr] gap-x-4"), className)
   }));
 };
 var Content2 = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React99.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React100.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("pb-6"), className)
   }));
 };
 var Separator2 = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React99.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React100.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("flex items-center justify-center h-5 w-5"), className)
   }));
 };
 var LineContainer = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React99.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React100.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("flex justify-center py-1"), className)
   }));
 };
 var Line = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React99.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React100.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("w-1 bg-grey-5 h-full justify-self-center"), className)
   }));
 };
 var Dot = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React99.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React100.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("bg-grey-30 h-[6px] w-[6px] rounded"), className)
   }));
 };
@@ -9165,52 +9277,52 @@ var import_error4 = __toESM(require_error());
 var import_time = __toESM(require_time());
 var import_warningSign4 = __toESM(require_warningSign());
 var TimelineItem = () => null;
-var Timeline2 = ({ children }) => /* @__PURE__ */ React100.createElement("div", null, React100.Children.map(children, (item) => {
+var Timeline2 = ({ children }) => /* @__PURE__ */ React101.createElement("div", null, React101.Children.map(children, (item) => {
   if (!isComponentType(item, TimelineItem)) {
     throw new Error("<Timeline> can only have <Timeline.Item> components as children");
   } else {
     const { props, key } = item;
-    return /* @__PURE__ */ React100.createElement(Timeline, {
+    return /* @__PURE__ */ React101.createElement(Timeline, {
       key: key != null ? key : props.title
-    }, /* @__PURE__ */ React100.createElement(Timeline.Separator, null, props.variant === "error" ? /* @__PURE__ */ React100.createElement(Icon, {
+    }, /* @__PURE__ */ React101.createElement(Timeline.Separator, null, props.variant === "error" ? /* @__PURE__ */ React101.createElement(Icon, {
       icon: import_error4.default,
       color: "error-30"
-    }) : props.variant === "warning" ? /* @__PURE__ */ React100.createElement(Icon, {
+    }) : props.variant === "warning" ? /* @__PURE__ */ React101.createElement(Icon, {
       icon: import_warningSign4.default,
       color: "warning-30"
-    }) : props.variant === "info" ? /* @__PURE__ */ React100.createElement(Icon, {
+    }) : props.variant === "info" ? /* @__PURE__ */ React101.createElement(Icon, {
       icon: import_time.default,
       color: "info-30"
-    }) : /* @__PURE__ */ React100.createElement(Timeline.Separator.Dot, null)), /* @__PURE__ */ React100.createElement(Typography2.Caption, {
+    }) : /* @__PURE__ */ React101.createElement(Timeline.Separator.Dot, null)), /* @__PURE__ */ React101.createElement(Typography2.Caption, {
       color: "grey-50"
-    }, props.title), /* @__PURE__ */ React100.createElement(Timeline.LineContainer, null, /* @__PURE__ */ React100.createElement(Timeline.LineContainer.Line, null)), /* @__PURE__ */ React100.createElement(Timeline.Content, null, /* @__PURE__ */ React100.createElement(Typography2.Small, null, props.children)));
+    }, props.title), /* @__PURE__ */ React101.createElement(Timeline.LineContainer, null, /* @__PURE__ */ React101.createElement(Timeline.LineContainer.Line, null)), /* @__PURE__ */ React101.createElement(Timeline.Content, null, /* @__PURE__ */ React101.createElement(Typography2.Small, null, props.children)));
   }
 }));
-var TimelineItemSkeleton = () => /* @__PURE__ */ React100.createElement(Timeline, null, /* @__PURE__ */ React100.createElement(Timeline.Separator, null, /* @__PURE__ */ React100.createElement(Skeleton, {
+var TimelineItemSkeleton = () => /* @__PURE__ */ React101.createElement(Timeline, null, /* @__PURE__ */ React101.createElement(Timeline.Separator, null, /* @__PURE__ */ React101.createElement(Skeleton, {
   width: 6,
   height: 6,
   rounded: true
-})), /* @__PURE__ */ React100.createElement(Skeleton, {
+})), /* @__PURE__ */ React101.createElement(Skeleton, {
   height: 12,
   width: 120
-}), /* @__PURE__ */ React100.createElement(Timeline.LineContainer, null, /* @__PURE__ */ React100.createElement(Skeleton, {
+}), /* @__PURE__ */ React101.createElement(Timeline.LineContainer, null, /* @__PURE__ */ React101.createElement(Skeleton, {
   width: 2,
   height: "100%"
-})), /* @__PURE__ */ React100.createElement(Timeline.Content, null, /* @__PURE__ */ React100.createElement(Box, {
+})), /* @__PURE__ */ React101.createElement(Timeline.Content, null, /* @__PURE__ */ React101.createElement(Box, {
   display: "flex",
   flexDirection: "column",
   gap: "3"
-}, /* @__PURE__ */ React100.createElement(Skeleton, {
+}, /* @__PURE__ */ React101.createElement(Skeleton, {
   height: 32,
   width: "100%"
-}), /* @__PURE__ */ React100.createElement(Skeleton, {
+}), /* @__PURE__ */ React101.createElement(Skeleton, {
   height: 32,
   width: "73%"
-}), /* @__PURE__ */ React100.createElement(Skeleton, {
+}), /* @__PURE__ */ React101.createElement(Skeleton, {
   height: 32,
   width: "80%"
 }))));
-var TimelineSkeleton = ({ items = 3 }) => /* @__PURE__ */ React100.createElement("div", null, Array.from({ length: items }).map((_, key) => /* @__PURE__ */ React100.createElement(TimelineItemSkeleton, {
+var TimelineSkeleton = ({ items = 3 }) => /* @__PURE__ */ React101.createElement("div", null, Array.from({ length: items }).map((_, key) => /* @__PURE__ */ React101.createElement(TimelineItemSkeleton, {
   key
 })));
 Timeline2.Item = TimelineItem;
@@ -9218,9 +9330,9 @@ Timeline2.Skeleton = TimelineSkeleton;
 Timeline2.Skeleton.displayName = "Timeline.Skeleton";
 
 // src/utils/table/useTableSelect.ts
-import React101 from "react";
+import React102 from "react";
 var useTableSelect = (data, { key }) => {
-  const [selected, setSelected] = React101.useState([]);
+  const [selected, setSelected] = React102.useState([]);
   const allSelected = selected.length === data.length;
   const isSelected = (dot) => selected.includes(dot[key]);
   const selectAll = () => setSelected(data.map((dot) => dot[key]));
@@ -9245,7 +9357,7 @@ var useTableSelect = (data, { key }) => {
 };
 
 // src/molecules/Pagination/usePagination.tsx
-import { useEffect as useEffect9, useState as useState13 } from "react";
+import { useEffect as useEffect10, useState as useState13 } from "react";
 import clamp3 from "lodash/clamp";
 var initialState = {
   currentPage: 1,
@@ -9264,7 +9376,7 @@ var usePagination = (items, options) => {
     setPageSize(pageSize2);
     setCurrentPage(clamp3((options == null ? void 0 : options.initialPage) || initialState.currentPage, 1, newTotalPages));
   };
-  useEffect9(() => {
+  useEffect10(() => {
     setCurrentPage(clamp3((options == null ? void 0 : options.initialPage) || initialState.currentPage, 1, totalPages));
   }, [items.length]);
   return [
@@ -9465,6 +9577,8 @@ export {
   NativeSelect,
   NativeSelectBase,
   Navigation2 as Navigation,
+  NotificationConsumer,
+  NotificationProvider,
   OneLineBanner,
   Option,
   PageHeader2 as PageHeader,
@@ -9533,6 +9647,8 @@ export {
   placementOrder,
   export_theme as theme,
   toSortDirection,
+  useNotification,
+  useNotificationContext,
   usePagination,
   usePopoverContext,
   useScrollTarget,