@aivenio/aquarium 6.2.0 → 6.4.0

package/dist/atoms.cjs

@@ -901,6 +901,7 @@ var tokens_default = {
   code: {
     background: "rgba(250,250,250,1)",
     text: "rgba(45,46,48,1)",
+    variable: "rgba(91,30,103,1)",
     keyword: "rgba(202, 33, 101, 1)",
     string: "rgba(0, 127, 115, 1)",
     function: "rgba(9, 128, 193, 1)",
@@ -3549,7 +3550,7 @@ var toolbarContainerClasses = (0, import_tailwind_variants14.tv)({
   base: "col-span-full flex items-stretch py-4 px-l2 border-b border-muted",
   variants: {
     sticky: {
-      true: "sticky top-[47px] bg-layer z-10",
+      true: "sticky top-[43px] bg-layer z-10",
       false: ""
     }
   }
@@ -6703,40 +6704,48 @@ var InputGroup = ({ cols = "1", children, ...rest }) => {
 };
 
 // src/atoms/Modal/Modal.tsx
-var import_react43 = __toESM(require("react"));
+var import_react44 = __toESM(require("react"));
 var import_tailwind_variants18 = require("tailwind-variants");
-var bodyMaskClasses = (0, import_tailwind_variants18.tv)({
-  variants: {
-    position: {
-      before: [
-        'before:content-[""]',
-        "before:pointer-events-none",
-        "before:sticky",
-        "before:top-0",
-        "before:left-0",
-        "before:h-5",
-        "before:flex-shrink-0",
-        "before:bg-gradient-to-b",
-        "before:from-overlay",
-        "before:to-transparent",
-        "before:z-10"
-      ],
-      after: [
-        'after:content-[""]',
-        "after:pointer-events-none",
-        "after:sticky",
-        "after:bottom-3",
-        "after:left-0",
-        "after:h-5",
-        "after:flex-shrink-0",
-        "after:bg-gradient-to-t",
-        "after:from-overlay",
-        "after:to-transparent",
-        "after:z-10"
-      ]
+
+// src/utils/useScrollFade.ts
+var import_react43 = require("react");
+var useScrollFade = () => {
+  const topSentinelRef = (0, import_react43.useRef)(null);
+  const bottomSentinelRef = (0, import_react43.useRef)(null);
+  const observerRef = (0, import_react43.useRef)(null);
+  const [showTopFade, setShowTopFade] = (0, import_react43.useState)(false);
+  const [showBottomFade, setShowBottomFade] = (0, import_react43.useState)(false);
+  const containerRef = (0, import_react43.useCallback)((container2) => {
+    observerRef.current?.disconnect();
+    if (!container2) {
+      return;
     }
-  }
-});
+    observerRef.current = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.target === topSentinelRef.current) {
+            setShowTopFade(!entry.isIntersecting);
+          } else if (entry.target === bottomSentinelRef.current) {
+            setShowBottomFade(!entry.isIntersecting);
+          }
+        });
+      },
+      { root: container2, threshold: 0 }
+    );
+    if (topSentinelRef.current) {
+      observerRef.current.observe(topSentinelRef.current);
+    }
+    if (bottomSentinelRef.current) {
+      observerRef.current.observe(bottomSentinelRef.current);
+    }
+  }, []);
+  (0, import_react43.useEffect)(() => {
+    return () => observerRef.current?.disconnect();
+  }, []);
+  return { containerRef, topSentinelRef, bottomSentinelRef, showTopFade, showBottomFade };
+};
+
+// src/atoms/Modal/Modal.tsx
 var modalStyles = (0, import_tailwind_variants18.tv)({
   slots: {
     overlay: "inset-0 overflow-y-auto z-modal fixed",
@@ -6748,11 +6757,7 @@ var modalStyles = (0, import_tailwind_variants18.tv)({
     title: "",
     subtitle: "max-w-[700px]",
     closeButtonContainer: "absolute top-[24px] right-[28px]",
-    body: [
-      "grow overflow-y-auto text-default flex flex-col outline-none",
-      bodyMaskClasses({ position: "before" }),
-      bodyMaskClasses({ position: "after" })
-    ],
+    body: "grow overflow-y-auto text-default flex flex-col outline-none",
     bodyContent: "px-7 grow",
     footer: "px-7 pt-4 pb-6",
     actions: "flex gap-3 justify-end"
@@ -6796,10 +6801,48 @@ var modalStyles = (0, import_tailwind_variants18.tv)({
       false: {
         headerImage: "bg-medium"
       }
+    },
+    showTopFade: {
+      true: {
+        body: [
+          'before:content-[""]',
+          "before:pointer-events-none",
+          "before:sticky",
+          "before:top-0",
+          "before:left-0",
+          "before:h-5",
+          "before:-mb-5",
+          "before:flex-shrink-0",
+          "before:bg-gradient-to-b",
+          "before:from-overlay",
+          "before:to-transparent",
+          "before:z-10"
+        ]
+      }
+    },
+    showBottomFade: {
+      true: {
+        body: [
+          'after:content-[""]',
+          "after:pointer-events-none",
+          "after:sticky",
+          "after:bottom-0",
+          "after:left-0",
+          "after:h-[60px]",
+          "after:-mt-[60px]",
+          "after:flex-shrink-0",
+          "after:bg-gradient-to-t",
+          "after:from-overlay",
+          "after:to-transparent",
+          "after:z-10"
+        ]
+      }
     }
   },
   defaultVariants: {
-    isResponsive: true
+    isResponsive: true,
+    showTopFade: false,
+    showBottomFade: false
   },
   compoundVariants: [
     {
@@ -6873,57 +6916,78 @@ var Modal = ({
   ...rest
 }) => {
   const { overlay } = modalStyles({ kind });
-  return open ? /* @__PURE__ */ import_react43.default.createElement("div", { ...rest, className: overlay({ className }) }, children) : null;
+  return open ? /* @__PURE__ */ import_react44.default.createElement("div", { ...rest, className: overlay({ className }) }, children) : null;
 };
 Modal.BackDrop = ({ className, ...rest }) => {
   const { backdrop } = modalStyles();
-  return /* @__PURE__ */ import_react43.default.createElement("div", { ...rest, className: backdrop({ className }) });
+  return /* @__PURE__ */ import_react44.default.createElement("div", { ...rest, className: backdrop({ className }) });
 };
-Modal.Dialog = import_react43.default.forwardRef(
+Modal.Dialog = import_react44.default.forwardRef(
   ({ kind = "dialog", children, className, size = "md", isResponsive = true, ...rest }, ref) => {
     const { dialog } = modalStyles({ kind, size, isResponsive });
-    return /* @__PURE__ */ import_react43.default.createElement("div", { ref, "aria-modal": "true", ...rest, className: dialog({ className }) }, children);
+    return /* @__PURE__ */ import_react44.default.createElement("div", { ref, "aria-modal": "true", ...rest, className: dialog({ className }) }, children);
   }
 );
 Modal.Header = ({ kind = "dialog", size = "md", children, className, ...rest }) => {
   const { header } = modalStyles({ kind, size });
-  return /* @__PURE__ */ import_react43.default.createElement("div", { ...rest, className: header({ className }) }, children);
+  return /* @__PURE__ */ import_react44.default.createElement("div", { ...rest, className: header({ className }) }, children);
 };
 Modal.HeaderImage = ({ backgroundImage, className, ...rest }) => {
   const { headerImage } = modalStyles({ backgroundImage: Boolean(backgroundImage) });
-  return backgroundImage ? /* @__PURE__ */ import_react43.default.createElement("img", { "aria-hidden": true, src: backgroundImage, ...rest, className: headerImage({ className }) }) : /* @__PURE__ */ import_react43.default.createElement("div", { className: headerImage({ className }) });
+  return backgroundImage ? /* @__PURE__ */ import_react44.default.createElement("img", { "aria-hidden": true, src: backgroundImage, ...rest, className: headerImage({ className }) }) : /* @__PURE__ */ import_react44.default.createElement("div", { className: headerImage({ className }) });
 };
 Modal.CloseButtonContainer = ({ className, ...rest }) => {
   const { closeButtonContainer } = modalStyles();
-  return /* @__PURE__ */ import_react43.default.createElement("div", { ...rest, className: closeButtonContainer({ className }) });
+  return /* @__PURE__ */ import_react44.default.createElement("div", { ...rest, className: closeButtonContainer({ className }) });
 };
 Modal.Title = ({ kind = "dialog", children, className, ...rest }) => {
   const { title } = modalStyles({ kind });
-  return /* @__PURE__ */ import_react43.default.createElement(Typography, { htmlTag: "h2", variant: "subheading", color: "intense", className: title({ className }), ...rest }, children);
+  return /* @__PURE__ */ import_react44.default.createElement(Typography, { htmlTag: "h2", variant: "subheading", color: "intense", className: title({ className }), ...rest }, children);
 };
 Modal.Subtitle = ({ children, className, ...rest }) => {
   const { subtitle } = modalStyles();
-  return /* @__PURE__ */ import_react43.default.createElement(Typography, { variant: "default", color: "muted", className: subtitle({ className }), ...rest }, children);
+  return /* @__PURE__ */ import_react44.default.createElement(Typography, { variant: "default", color: "muted", className: subtitle({ className }), ...rest }, children);
 };
 Modal.TitleContainer = ({ children, className, ...rest }) => {
   const { titleContainer: titleContainer2 } = modalStyles();
-  return /* @__PURE__ */ import_react43.default.createElement("div", { ...rest, className: titleContainer2({ className }) }, children);
+  return /* @__PURE__ */ import_react44.default.createElement("div", { ...rest, className: titleContainer2({ className }) }, children);
 };
-Modal.Body = ({ children, className, noFooter = false, maxHeight, style, size, ...rest }) => {
+var ModalBody = ({
+  children,
+  className,
+  noFooter = false,
+  maxHeight,
+  style,
+  size,
+  ...rest
+}) => {
   const { body, bodyContent } = modalStyles({ size });
-  return /* @__PURE__ */ import_react43.default.createElement("div", { ...rest, className: body({ className }), style: { maxHeight, ...style } }, /* @__PURE__ */ import_react43.default.createElement("div", { className: bodyContent({ noFooter }) }, children));
+  const { containerRef, topSentinelRef, bottomSentinelRef, showTopFade, showBottomFade } = useScrollFade();
+  return /* @__PURE__ */ import_react44.default.createElement(
+    "div",
+    {
+      ...rest,
+      ref: containerRef,
+      className: body({ className, showTopFade, showBottomFade }),
+      style: { maxHeight, ...style }
+    },
+    /* @__PURE__ */ import_react44.default.createElement("div", { ref: topSentinelRef, "aria-hidden": "true", className: "h-1px" }),
+    /* @__PURE__ */ import_react44.default.createElement("div", { className: bodyContent({ noFooter }) }, children),
+    /* @__PURE__ */ import_react44.default.createElement("div", { ref: bottomSentinelRef, "aria-hidden": "true", className: "h-1px -mt-1px" })
+  );
 };
+Modal.Body = ModalBody;
 Modal.Footer = ({ children, className, ...rest }) => {
   const { footer } = modalStyles();
-  return /* @__PURE__ */ import_react43.default.createElement("div", { ...rest, className: footer({ className }) }, children);
+  return /* @__PURE__ */ import_react44.default.createElement("div", { ...rest, className: footer({ className }) }, children);
 };
 Modal.Actions = ({ children, className, ...rest }) => {
   const { actions: actions2 } = modalStyles();
-  return /* @__PURE__ */ import_react43.default.createElement("div", { ...rest, className: actions2({ className }) }, children);
+  return /* @__PURE__ */ import_react44.default.createElement("div", { ...rest, className: actions2({ className }) }, children);
 };
 
 // src/atoms/Navigation/Navigation.tsx
-var import_react44 = __toESM(require("react"));
+var import_react45 = __toESM(require("react"));
 var import_tailwind_variants19 = require("tailwind-variants");
 var navigationClasses = (0, import_tailwind_variants19.tv)({
   slots: {
@@ -6962,35 +7026,35 @@ var Navigation = ({
   ...rest
 }) => {
   const { nav, list } = navigationClasses();
-  return /* @__PURE__ */ import_react44.default.createElement("nav", { className: nav(), "aria-label": ariaLabel }, /* @__PURE__ */ import_react44.default.createElement("ul", { ...rest, className: list({ className }), role: "menubar" }, children));
+  return /* @__PURE__ */ import_react45.default.createElement("nav", { className: nav(), "aria-label": ariaLabel }, /* @__PURE__ */ import_react45.default.createElement("ul", { ...rest, className: list({ className }), role: "menubar" }, children));
 };
 var Header = ({ className, ...rest }) => {
   const { header } = navigationClasses();
-  return /* @__PURE__ */ import_react44.default.createElement("li", { ...rest, role: "presentation", className: header({ className }) });
+  return /* @__PURE__ */ import_react45.default.createElement("li", { ...rest, role: "presentation", className: header({ className }) });
 };
 var Title2 = ({ className, ...props }) => {
   const { headerTitle } = navigationClasses();
-  return /* @__PURE__ */ import_react44.default.createElement(Typography, { variant: "small", className: headerTitle({ className }), ...props });
+  return /* @__PURE__ */ import_react45.default.createElement(Typography, { variant: "small", className: headerTitle({ className }), ...props });
 };
 var Subtitle = ({ className, ...props }) => {
   const { headerSubtitle } = navigationClasses();
-  return /* @__PURE__ */ import_react44.default.createElement(Typography, { variant: "default-strong", className: headerSubtitle({ className }), ...props });
+  return /* @__PURE__ */ import_react45.default.createElement(Typography, { variant: "default-strong", className: headerSubtitle({ className }), ...props });
 };
 var Footer = ({ className, ...rest }) => {
   const { footer } = navigationClasses();
-  return /* @__PURE__ */ import_react44.default.createElement("li", { ...rest, role: "presentation", className: footer({ className }) });
+  return /* @__PURE__ */ import_react45.default.createElement("li", { ...rest, role: "presentation", className: footer({ className }) });
 };
 var Section = ({ title, className, ...rest }) => {
   const { sectionContainer, sectionTitle, sectionList } = navigationClasses();
-  return /* @__PURE__ */ import_react44.default.createElement("li", { role: "presentation", className: sectionContainer() }, title && /* @__PURE__ */ import_react44.default.createElement("div", { className: sectionTitle({ className }) }, title), /* @__PURE__ */ import_react44.default.createElement("ul", { ...rest, role: "group", className: sectionList({ className }) }));
+  return /* @__PURE__ */ import_react45.default.createElement("li", { role: "presentation", className: sectionContainer() }, title && /* @__PURE__ */ import_react45.default.createElement("div", { className: sectionTitle({ className }) }, title), /* @__PURE__ */ import_react45.default.createElement("ul", { ...rest, role: "group", className: sectionList({ className }) }));
 };
 var Divider = ({ className, ...rest }) => {
   const { divider } = navigationClasses();
-  return /* @__PURE__ */ import_react44.default.createElement("li", { "aria-hidden": true, ...rest, className: divider({ className }) });
+  return /* @__PURE__ */ import_react45.default.createElement("li", { "aria-hidden": true, ...rest, className: divider({ className }) });
 };
 var Item3 = ({ className, active = false, ...rest }) => {
   const { itemContainer, itemAnchor } = navigationClasses({ active });
-  return /* @__PURE__ */ import_react44.default.createElement("li", { role: "presentation", className: itemContainer() }, /* @__PURE__ */ import_react44.default.createElement("a", { ...rest, role: "menuitem", className: itemAnchor({ className }) }));
+  return /* @__PURE__ */ import_react45.default.createElement("li", { role: "presentation", className: itemContainer() }, /* @__PURE__ */ import_react45.default.createElement("a", { ...rest, role: "menuitem", className: itemAnchor({ className }) }));
 };
 var Submenu = ({
   children,
@@ -7000,11 +7064,11 @@ var Submenu = ({
   ...rest
 }) => {
   const { submenuContainer, submenuAnchor, submenuList } = navigationClasses();
-  return /* @__PURE__ */ import_react44.default.createElement("li", { role: "presentation", className: submenuContainer() }, /* @__PURE__ */ import_react44.default.createElement("a", { role: "menuitem", "aria-haspopup": "true", href: "#", id, className: submenuAnchor({ className }), ...rest }, title), /* @__PURE__ */ import_react44.default.createElement("ul", { role: "menu", className: submenuList(), "aria-labelledby": id }, children));
+  return /* @__PURE__ */ import_react45.default.createElement("li", { role: "presentation", className: submenuContainer() }, /* @__PURE__ */ import_react45.default.createElement("a", { role: "menuitem", "aria-haspopup": "true", href: "#", id, className: submenuAnchor({ className }), ...rest }, title), /* @__PURE__ */ import_react45.default.createElement("ul", { role: "menu", className: submenuList(), "aria-labelledby": id }, children));
 };
 var SubmenuItem = ({ className, active, ...rest }) => {
   const { submenuItem } = navigationClasses();
-  return /* @__PURE__ */ import_react44.default.createElement(Navigation.Item, { ...rest, active, className: submenuItem({ className }) });
+  return /* @__PURE__ */ import_react45.default.createElement(Navigation.Item, { ...rest, active, className: submenuItem({ className }) });
 };
 Header.Title = Title2;
 Header.Subtitle = Subtitle;
@@ -7017,7 +7081,7 @@ Navigation.Submenu = Submenu;
 Navigation.Divider = Divider;
 
 // src/atoms/PageHeader/PageHeader.tsx
-var import_react45 = __toESM(require("react"));
+var import_react46 = __toESM(require("react"));
 var import_tailwind_variants20 = require("tailwind-variants");
 var pageHeaderStyles = (0, import_tailwind_variants20.tv)({
   slots: {
@@ -7029,10 +7093,10 @@ var pageHeaderStyles = (0, import_tailwind_variants20.tv)({
   }
 });
 var { base, container, titleContainer, chips, actions } = pageHeaderStyles();
-var PageHeader = ({ children, className, ...rest }) => /* @__PURE__ */ import_react45.default.createElement("div", { className: base({ className }), ...rest }, children);
-PageHeader.Container = ({ children, className, ...rest }) => /* @__PURE__ */ import_react45.default.createElement("div", { className: container({ className }), ...rest }, children);
-PageHeader.TitleContainer = ({ children, className, ...rest }) => /* @__PURE__ */ import_react45.default.createElement("div", { className: titleContainer({ className }), ...rest }, children);
-PageHeader.Title = ({ isSubHeader = false, children, ...rest }) => /* @__PURE__ */ import_react45.default.createElement(
+var PageHeader = ({ children, className, ...rest }) => /* @__PURE__ */ import_react46.default.createElement("div", { className: base({ className }), ...rest }, children);
+PageHeader.Container = ({ children, className, ...rest }) => /* @__PURE__ */ import_react46.default.createElement("div", { className: container({ className }), ...rest }, children);
+PageHeader.TitleContainer = ({ children, className, ...rest }) => /* @__PURE__ */ import_react46.default.createElement("div", { className: titleContainer({ className }), ...rest }, children);
+PageHeader.Title = ({ isSubHeader = false, children, ...rest }) => /* @__PURE__ */ import_react46.default.createElement(
   Typography2,
   {
     ...rest,
@@ -7042,22 +7106,22 @@ PageHeader.Title = ({ isSubHeader = false, children, ...rest }) => /* @__PURE__
   },
   children
 );
-PageHeader.Subtitle = ({ children, ...rest }) => /* @__PURE__ */ import_react45.default.createElement(Typography2.Default, { ...rest, color: "default" }, children);
-PageHeader.Chips = ({ children, className, ...rest }) => /* @__PURE__ */ import_react45.default.createElement("div", { className: chips({ className }), ...rest }, children);
-PageHeader.Actions = ({ children, className, ...rest }) => /* @__PURE__ */ import_react45.default.createElement("div", { className: actions({ className }), ...rest }, children);
+PageHeader.Subtitle = ({ children, ...rest }) => /* @__PURE__ */ import_react46.default.createElement(Typography2.Default, { ...rest, color: "default" }, children);
+PageHeader.Chips = ({ children, className, ...rest }) => /* @__PURE__ */ import_react46.default.createElement("div", { className: chips({ className }), ...rest }, children);
+PageHeader.Actions = ({ children, className, ...rest }) => /* @__PURE__ */ import_react46.default.createElement("div", { className: actions({ className }), ...rest }, children);
 
 // src/atoms/Popover/Popover.tsx
-var import_react46 = __toESM(require("react"));
+var import_react47 = __toESM(require("react"));
 var import_react_aria_components4 = require("react-aria-components");
 var import_tailwind_variants21 = require("tailwind-variants");
 var popoverStyles = (0, import_tailwind_variants21.tv)({
   // z-[101] ensures popover appears above modal (z-modal: 100)
   base: "rounded shadow-overlay bg-overlay mt-1 overflow-y-auto flex flex-col border border-default outline-none z-[101]"
 });
-var Popover = import_react46.default.forwardRef(
+var Popover = import_react47.default.forwardRef(
   ({ children, offset = 0, className, placement: _placement = "bottom-left", ...props }, ref) => {
     const placement = _placement.replace("-", " ");
-    return /* @__PURE__ */ import_react46.default.createElement(
+    return /* @__PURE__ */ import_react47.default.createElement(
       import_react_aria_components4.Popover,
       {
         ref,
@@ -7073,7 +7137,7 @@ var Popover = import_react46.default.forwardRef(
     );
   }
 );
-var PopoverArrow = () => /* @__PURE__ */ import_react46.default.createElement(import_react_aria_components4.OverlayArrow, { className: "group" }, /* @__PURE__ */ import_react46.default.createElement(
+var PopoverArrow = () => /* @__PURE__ */ import_react47.default.createElement(import_react_aria_components4.OverlayArrow, { className: "group" }, /* @__PURE__ */ import_react47.default.createElement(
   "svg",
   {
     width: 12,
@@ -7081,19 +7145,19 @@ var PopoverArrow = () => /* @__PURE__ */ import_react46.default.createElement(im
     viewBox: "0 0 12 12",
     className: "block fill-white stroke-1 stroke-black group-placement-bottom:rotate-180 group-placement-left:-rotate-90 group-placement-right:rotate-90"
   },
-  /* @__PURE__ */ import_react46.default.createElement("path", { d: "M0 0 L6 6 L12 0" })
+  /* @__PURE__ */ import_react47.default.createElement("path", { d: "M0 0 L6 6 L12 0" })
 ));
 PopoverArrow.displayName = "Popover.Arrow";
 Popover.Arrow = PopoverArrow;
 
 // src/atoms/PopoverDialog/PopoverDialog.tsx
-var import_react47 = __toESM(require("react"));
+var import_react48 = __toESM(require("react"));
 var import_clsx14 = require("clsx");
-var Header2 = ({ children, className, ...rest }) => /* @__PURE__ */ import_react47.default.createElement("div", { ...rest, className: (0, import_clsx14.clsx)("p-5 gap-3 flex items-center", className) }, children);
-var Title3 = ({ children, className, ...rest }) => /* @__PURE__ */ import_react47.default.createElement(Typography, { ...rest, htmlTag: "h1", variant: "default-strong" }, children);
-var Body = ({ children, className, ...rest }) => /* @__PURE__ */ import_react47.default.createElement(Typography, { ...rest, htmlTag: "div", variant: "small", className: (0, import_clsx14.clsx)("px-5 overflow-y-auto", className) }, children);
-var Footer2 = ({ children, className, ...rest }) => /* @__PURE__ */ import_react47.default.createElement("div", { ...rest, className: (0, import_clsx14.clsx)("p-5", className) }, children);
-var Actions2 = ({ children, className, ...rest }) => /* @__PURE__ */ import_react47.default.createElement("div", { ...rest, className: (0, import_clsx14.clsx)("flex gap-4", className) }, children);
+var Header2 = ({ children, className, ...rest }) => /* @__PURE__ */ import_react48.default.createElement("div", { ...rest, className: (0, import_clsx14.clsx)("p-5 gap-3 flex items-center", className) }, children);
+var Title3 = ({ children, className, ...rest }) => /* @__PURE__ */ import_react48.default.createElement(Typography, { ...rest, htmlTag: "h1", variant: "default-strong" }, children);
+var Body = ({ children, className, ...rest }) => /* @__PURE__ */ import_react48.default.createElement(Typography, { ...rest, htmlTag: "div", variant: "small", className: (0, import_clsx14.clsx)("px-5 overflow-y-auto", className) }, children);
+var Footer2 = ({ children, className, ...rest }) => /* @__PURE__ */ import_react48.default.createElement("div", { ...rest, className: (0, import_clsx14.clsx)("p-5", className) }, children);
+var Actions2 = ({ children, className, ...rest }) => /* @__PURE__ */ import_react48.default.createElement("div", { ...rest, className: (0, import_clsx14.clsx)("flex gap-4", className) }, children);
 var PopoverDialog = {
   Header: Header2,
   Title: Title3,
@@ -7103,7 +7167,7 @@ var PopoverDialog = {
 };
 
 // src/atoms/ProgressBar/ProgressBar.tsx
-var import_react48 = __toESM(require("react"));
+var import_react49 = __toESM(require("react"));
 var import_lodash_es11 = require("lodash-es");
 var import_tailwind_variants22 = require("tailwind-variants");
 var progressBarClasses = (0, import_tailwind_variants22.tv)({
@@ -7123,10 +7187,10 @@ var progressBarIndicatorClasses = (0, import_tailwind_variants22.tv)({
 var progressBarLabelsClasses = (0, import_tailwind_variants22.tv)({
   base: "flex flex-row"
 });
-var ProgressBar = ({ children, className, ...rest }) => /* @__PURE__ */ import_react48.default.createElement("div", { ...rest, className: progressBarClasses({ className }) }, children);
+var ProgressBar = ({ children, className, ...rest }) => /* @__PURE__ */ import_react49.default.createElement("div", { ...rest, className: progressBarClasses({ className }) }, children);
 ProgressBar.Indicator = ({ min, max, value, "aria-label": ariaLabel, status, className, ...rest }) => {
   const completedPercentage = (0, import_lodash_es11.clamp)((value - min) / (max - min) * 100, 0, 100);
-  return /* @__PURE__ */ import_react48.default.createElement(
+  return /* @__PURE__ */ import_react49.default.createElement(
     "div",
     {
       ...rest,
@@ -7140,10 +7204,10 @@ ProgressBar.Indicator = ({ min, max, value, "aria-label": ariaLabel, status, cla
     }
   );
 };
-ProgressBar.Labels = ({ children, startLabel, endLabel, className, ...rest }) => /* @__PURE__ */ import_react48.default.createElement("div", { className: progressBarLabelsClasses({ className }) }, /* @__PURE__ */ import_react48.default.createElement("span", { ...rest, className: "grow text-default typography-small" }, startLabel), /* @__PURE__ */ import_react48.default.createElement("span", { ...rest, className: "grow text-default typography-small text-right" }, endLabel));
+ProgressBar.Labels = ({ children, startLabel, endLabel, className, ...rest }) => /* @__PURE__ */ import_react49.default.createElement("div", { className: progressBarLabelsClasses({ className }) }, /* @__PURE__ */ import_react49.default.createElement("span", { ...rest, className: "grow text-default typography-small" }, startLabel), /* @__PURE__ */ import_react49.default.createElement("span", { ...rest, className: "grow text-default typography-small text-right" }, endLabel));
 
 // src/atoms/Section/Section.tsx
-var import_react49 = __toESM(require("react"));
+var import_react50 = __toESM(require("react"));
 var import_tailwind_variants23 = require("tailwind-variants");
 var sectionStyles = (0, import_tailwind_variants23.tv)({
   slots: {
@@ -7169,19 +7233,19 @@ var Section2 = ({
   ...rest
 }) => {
   const { base: base2 } = sectionStyles();
-  return /* @__PURE__ */ import_react49.default.createElement(Box, { component: "section", ...rest, className: base2({ className }) }, children);
+  return /* @__PURE__ */ import_react50.default.createElement(Box, { component: "section", ...rest, className: base2({ className }) }, children);
 };
 Section2.Header = ({ children, className, expanded, collapsible, ...rest }) => {
   const { header } = sectionStyles({ expanded, collapsible });
-  return /* @__PURE__ */ import_react49.default.createElement("div", { ...rest, className: header({ className }) }, children);
+  return /* @__PURE__ */ import_react50.default.createElement("div", { ...rest, className: header({ className }) }, children);
 };
-Section2.TitleContainer = import_react49.default.forwardRef(
+Section2.TitleContainer = import_react50.default.forwardRef(
   ({ children, className, collapsible, ...rest }, ref) => {
     const { titleContainer: titleContainer2 } = sectionStyles({ collapsible });
-    return /* @__PURE__ */ import_react49.default.createElement("div", { ...rest, ref, className: titleContainer2({ className }) }, children);
+    return /* @__PURE__ */ import_react50.default.createElement("div", { ...rest, ref, className: titleContainer2({ className }) }, children);
   }
 );
-Section2.Toggle = (props) => /* @__PURE__ */ import_react49.default.createElement(
+Section2.Toggle = (props) => /* @__PURE__ */ import_react50.default.createElement(
   Icon2,
   {
     ...props,
@@ -7194,19 +7258,19 @@ Section2.Toggle = (props) => /* @__PURE__ */ import_react49.default.createElemen
     })
   }
 );
-Section2.Title = ({ children, ...rest }) => /* @__PURE__ */ import_react49.default.createElement(Typography2.Large, { ...rest, htmlTag: "h2", color: "intense", className: "flex gap-3 items-center" }, children);
-Section2.Subtitle = ({ children, ...rest }) => /* @__PURE__ */ import_react49.default.createElement(Typography2.Small, { ...rest, color: "muted" }, children);
+Section2.Title = ({ children, ...rest }) => /* @__PURE__ */ import_react50.default.createElement(Typography2.Large, { ...rest, htmlTag: "h2", color: "intense", className: "flex gap-3 items-center" }, children);
+Section2.Subtitle = ({ children, ...rest }) => /* @__PURE__ */ import_react50.default.createElement(Typography2.Small, { ...rest, color: "muted" }, children);
 Section2.Actions = ({ children, className, ...rest }) => {
   const { actions: actions2 } = sectionStyles();
-  return /* @__PURE__ */ import_react49.default.createElement("div", { ...rest, className: actions2({ className }) }, children);
+  return /* @__PURE__ */ import_react50.default.createElement("div", { ...rest, className: actions2({ className }) }, children);
 };
 Section2.Body = ({ children, className, ...rest }) => {
   const { body } = sectionStyles();
-  return /* @__PURE__ */ import_react49.default.createElement("div", { ...rest, className: body({ className }) }, /* @__PURE__ */ import_react49.default.createElement(Typography, { htmlTag: "div", color: "default" }, children));
+  return /* @__PURE__ */ import_react50.default.createElement("div", { ...rest, className: body({ className }) }, /* @__PURE__ */ import_react50.default.createElement(Typography, { htmlTag: "div", color: "default" }, children));
 };
 
 // src/atoms/Select/Select.tsx
-var import_react50 = __toESM(require("react"));
+var import_react51 = __toESM(require("react"));
 var import_tailwind_variants24 = require("tailwind-variants");
 function getOptionLabelBuiltin(option) {
   if (option === null) {
@@ -7221,7 +7285,7 @@ function isOptionDisabledBuiltin(option) {
   return !!option.disabled;
 }
 var getValues = (children) => {
-  const values = import_react50.default.Children.map(children, (c) => c?.props?.value);
+  const values = import_react51.default.Children.map(children, (c) => c?.props?.value);
   return values?.filter((v) => v !== void 0 && v !== null) ?? [];
 };
 var inputContainerClasses = (0, import_tailwind_variants24.tv)({
@@ -7299,10 +7363,10 @@ var toggleClasses = (0, import_tailwind_variants24.tv)({
     }
   }
 });
-var InputContainer = import_react50.default.forwardRef(
-  ({ variant = "default", className, ...props }, ref) => /* @__PURE__ */ import_react50.default.createElement("div", { ref, className: inputContainerClasses({ variant, className }), ...props })
+var InputContainer = import_react51.default.forwardRef(
+  ({ variant = "default", className, ...props }, ref) => /* @__PURE__ */ import_react51.default.createElement("div", { ref, className: inputContainerClasses({ variant, className }), ...props })
 );
-var Input = import_react50.default.forwardRef(({ className, required, ...props }, ref) => /* @__PURE__ */ import_react50.default.createElement(
+var Input = import_react51.default.forwardRef(({ className, required, ...props }, ref) => /* @__PURE__ */ import_react51.default.createElement(
   "input",
   {
     ref,
@@ -7312,24 +7376,24 @@ var Input = import_react50.default.forwardRef(({ className, required, ...props }
     ...props
   }
 ));
-var Menu = import_react50.default.forwardRef(
-  ({ maxHeight = "450px", className, children, ...props }, ref) => /* @__PURE__ */ import_react50.default.createElement("ul", { ref, style: { maxHeight }, className: menuClasses({ className }), ...props }, children)
+var Menu = import_react51.default.forwardRef(
+  ({ maxHeight = "450px", className, children, ...props }, ref) => /* @__PURE__ */ import_react51.default.createElement("ul", { ref, style: { maxHeight }, className: menuClasses({ className }), ...props }, children)
 );
-var NoResults = import_react50.default.forwardRef(
-  ({ className, children, ...rest }, ref) => /* @__PURE__ */ import_react50.default.createElement("li", { ref, ...rest, className: noResultsClasses({ className }) }, children)
+var NoResults = import_react51.default.forwardRef(
+  ({ className, children, ...rest }, ref) => /* @__PURE__ */ import_react51.default.createElement("li", { ref, ...rest, className: noResultsClasses({ className }) }, children)
 );
-var EmptyStateContainer2 = import_react50.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ import_react50.default.createElement("li", { ref, className: emptyStateContainerClasses({ className }), ...props }, children));
-var Divider2 = ({ className, ...props }) => /* @__PURE__ */ import_react50.default.createElement("div", { className: dividerClasses({ className }), ...props });
-var Group2 = import_react50.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ import_react50.default.createElement("li", { ref, className: groupClasses({ className }), ...props }, children));
+var EmptyStateContainer2 = import_react51.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ import_react51.default.createElement("li", { ref, className: emptyStateContainerClasses({ className }), ...props }, children));
+var Divider2 = ({ className, ...props }) => /* @__PURE__ */ import_react51.default.createElement("div", { className: dividerClasses({ className }), ...props });
+var Group2 = import_react51.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ import_react51.default.createElement("li", { ref, className: groupClasses({ className }), ...props }, children));
 var endAdornmentSize = { width: 14, height: 14 };
-var Item4 = import_react50.default.forwardRef(
+var Item4 = import_react51.default.forwardRef(
   ({ highlighted, selected, className, children, ...props }, ref) => {
     const isDisabled = Boolean(props["aria-disabled"]);
-    return /* @__PURE__ */ import_react50.default.createElement("li", { ref, className: itemClasses({ disabled: isDisabled, highlighted, className }), ...props }, /* @__PURE__ */ import_react50.default.createElement("span", { className: "grow flex gap-x-3" }, children), selected ? /* @__PURE__ */ import_react50.default.createElement(InlineIcon2, { icon: tick_default, ...endAdornmentSize }) : /* @__PURE__ */ import_react50.default.createElement("div", { style: endAdornmentSize }));
+    return /* @__PURE__ */ import_react51.default.createElement("li", { ref, className: itemClasses({ disabled: isDisabled, highlighted, className }), ...props }, /* @__PURE__ */ import_react51.default.createElement("span", { className: "grow flex gap-x-3" }, children), selected ? /* @__PURE__ */ import_react51.default.createElement(InlineIcon2, { icon: tick_default, ...endAdornmentSize }) : /* @__PURE__ */ import_react51.default.createElement("div", { style: endAdornmentSize }));
   }
 );
-var ActionItem = import_react50.default.forwardRef(
-  ({ className, dense = false, icon, onClick, children, ...props }, ref) => /* @__PURE__ */ import_react50.default.createElement(
+var ActionItem = import_react51.default.forwardRef(
+  ({ className, dense = false, icon, onClick, children, ...props }, ref) => /* @__PURE__ */ import_react51.default.createElement(
     "li",
     {
       ref,
@@ -7338,11 +7402,11 @@ var ActionItem = import_react50.default.forwardRef(
       className: actionItemClasses({ dense, disabled: props.disabled, className }),
       ...props
     },
-    icon && /* @__PURE__ */ import_react50.default.createElement(InlineIcon2, { icon }),
+    icon && /* @__PURE__ */ import_react51.default.createElement(InlineIcon2, { icon }),
     children
   )
 );
-var Toggle = import_react50.default.forwardRef(({ hasFocus, isOpen, ...props }, ref) => /* @__PURE__ */ import_react50.default.createElement(
+var Toggle = import_react51.default.forwardRef(({ hasFocus, isOpen, ...props }, ref) => /* @__PURE__ */ import_react51.default.createElement(
   "button",
   {
     ref,
@@ -7351,7 +7415,7 @@ var Toggle = import_react50.default.forwardRef(({ hasFocus, isOpen, ...props },
     ...props,
     className: toggleClasses({ disabled: props.disabled ?? false })
   },
-  /* @__PURE__ */ import_react50.default.createElement(
+  /* @__PURE__ */ import_react51.default.createElement(
     InlineIcon2,
     {
       color: props.disabled ? "inactive" : "default",
@@ -7373,34 +7437,88 @@ var Select = {
 };
 
 // src/atoms/Stepper/Stepper.tsx
-var import_react51 = __toESM(require("react"));
+var import_react52 = __toESM(require("react"));
 var import_tailwind_variants25 = require("tailwind-variants");
 var connectorStyles = (0, import_tailwind_variants25.tv)({
   slots: {
-    container: "absolute w-full -left-1/2",
-    connector: "w-full"
+    container: "absolute",
+    connector: ""
   },
   variants: {
     completed: {
       true: { connector: "bg-success-graphic" },
-      false: { connector: "bg-intense" }
+      false: { connector: "bg-muted" }
     },
-    dense: {
-      true: {
-        container: "top-[3px] px-[14px]",
-        connector: "h-[3px]"
+    direction: {
+      horizontal: {
+        container: "w-full -left-1/2"
       },
-      false: {
-        container: "top-[14px] px-[20px]",
-        connector: "h-[2px]"
+      vertical: {
+        container: "h-full -top-2/3"
       }
+    },
+    dense: {
+      true: {},
+      false: {}
     }
-  }
+  },
+  compoundSlots: [
+    // Horizontal layout - horizontal connectors between side-by-side steps
+    {
+      slots: ["container"],
+      direction: "horizontal",
+      dense: true,
+      class: "top-[3px] px-[14px]"
+    },
+    {
+      slots: ["container"],
+      direction: "horizontal",
+      dense: false,
+      class: "top-[14px] px-[20px]"
+    },
+    {
+      slots: ["connector"],
+      direction: "horizontal",
+      dense: true,
+      class: "w-full h-[3px]"
+    },
+    {
+      slots: ["connector"],
+      direction: "horizontal",
+      dense: false,
+      class: "w-full h-[2px]"
+    },
+    // Vertical layout - vertical connectors between stacked steps
+    {
+      slots: ["container"],
+      direction: "vertical",
+      dense: true,
+      class: "left-[3px] pt-[4px] pb-[24px]"
+    },
+    {
+      slots: ["container"],
+      direction: "vertical",
+      dense: false,
+      class: "left-[16px] pt-[12px] pb-[30px]"
+    },
+    {
+      slots: ["connector"],
+      direction: "vertical",
+      dense: true,
+      class: "h-full w-[3px]"
+    },
+    {
+      slots: ["connector"],
+      direction: "vertical",
+      dense: false,
+      class: "h-full w-[2px]"
+    }
+  ]
 });
 var stepStyles = (0, import_tailwind_variants25.tv)({
   slots: {
-    step: "flex flex-col items-center relative text-center",
-    indicator: "Aquarium-Stepper-Indicator rounded-full flex justify-center items-center mx-2 mb-3"
+    step: "flex relative text-center",
+    indicator: "Aquarium-Stepper-Indicator rounded-full flex justify-center items-center"
   },
   variants: {
     state: {
@@ -7408,6 +7526,16 @@ var stepStyles = (0, import_tailwind_variants25.tv)({
       completed: { step: "text-intense" },
       inactive: { step: "text-inactive" }
     },
+    direction: {
+      vertical: {
+        step: "flex-row items-center pb-8",
+        indicator: "mr-l1"
+      },
+      horizontal: {
+        step: "flex-col items-center",
+        indicator: "mx-2 mb-3"
+      }
+    },
     dense: {
       true: { indicator: "h-[8px] w-[8px]" },
       false: { indicator: "h-[32px] w-[32px]" }
@@ -7425,7 +7553,7 @@ var stepStyles = (0, import_tailwind_variants25.tv)({
       slots: ["indicator"],
       dense: false,
       state: "inactive",
-      class: "border-2 border-default"
+      class: "border-2 border-muted"
     },
     {
       slots: ["indicator"],
@@ -7454,26 +7582,46 @@ var stepStyles = (0, import_tailwind_variants25.tv)({
     }
   ]
 });
-var Stepper = ({ className, ...rest }) => /* @__PURE__ */ import_react51.default.createElement("div", { ...rest, className });
+var Stepper = ({ className, ...rest }) => /* @__PURE__ */ import_react52.default.createElement("div", { ...rest, className });
 var ConnectorContainer = ({
   className,
   dense = false,
+  direction = "horizontal",
   ...rest
 }) => {
-  const { container: container2 } = connectorStyles({ dense });
-  return /* @__PURE__ */ import_react51.default.createElement("div", { ...rest, className: container2({ className }) });
+  const { container: container2 } = connectorStyles({ dense, direction });
+  return /* @__PURE__ */ import_react52.default.createElement("div", { ...rest, className: container2({ className }) });
 };
-var Connector = ({ children, className, completed = false, dense = false, ...rest }) => {
-  const { connector } = connectorStyles({ completed, dense });
-  return /* @__PURE__ */ import_react51.default.createElement("div", { ...rest, className: connector({ className }) });
+var Connector = ({
+  children,
+  className,
+  completed = false,
+  dense = false,
+  direction = "horizontal",
+  ...rest
+}) => {
+  const { connector } = connectorStyles({ completed, dense, direction });
+  return /* @__PURE__ */ import_react52.default.createElement("div", { ...rest, className: connector({ className }) });
 };
-var Step = ({ className, state, ...rest }) => {
-  const { step } = stepStyles({ state });
-  return /* @__PURE__ */ import_react51.default.createElement("div", { ...rest, className: step({ className }) });
+var Step = ({
+  className,
+  state,
+  direction = "horizontal",
+  ...rest
+}) => {
+  const { step } = stepStyles({ state, direction });
+  return /* @__PURE__ */ import_react52.default.createElement("div", { ...rest, className: step({ className }) });
 };
-var Indicator = ({ children, className, state, dense = false, ...rest }) => {
-  const { indicator } = stepStyles({ state, dense });
-  return /* @__PURE__ */ import_react51.default.createElement("div", { ...rest, className: indicator({ className }) }, state === "completed" ? /* @__PURE__ */ import_react51.default.createElement(InlineIcon2, { icon: tick_default }) : dense ? null : children);
+var Indicator = ({
+  children,
+  className,
+  state,
+  dense = false,
+  direction = "horizontal",
+  ...rest
+}) => {
+  const { indicator } = stepStyles({ state, dense, direction });
+  return /* @__PURE__ */ import_react52.default.createElement("div", { ...rest, className: indicator({ className }) }, state === "completed" ? /* @__PURE__ */ import_react52.default.createElement(InlineIcon2, { icon: tick_default, className: dense ? "scale-125" : void 0 }) : dense ? null : children);
 };
 Step.Indicator = Indicator;
 Stepper.Step = Step;
@@ -7481,7 +7629,7 @@ ConnectorContainer.Connector = Connector;
 Stepper.ConnectorContainer = ConnectorContainer;
 
 // src/atoms/Switch/Switch.tsx
-var import_react52 = __toESM(require("react"));
+var import_react53 = __toESM(require("react"));
 var import_tailwind_variants26 = require("tailwind-variants");
 var switchStyles = (0, import_tailwind_variants26.tv)({
   slots: {
@@ -7502,10 +7650,10 @@ var switchStyles = (0, import_tailwind_variants26.tv)({
     }
   }
 });
-var Switch = import_react52.default.forwardRef(
+var Switch = import_react53.default.forwardRef(
   ({ id, children, name, disabled = false, readOnly = false, ...props }, ref) => {
     const { wrapper, input, thumb } = switchStyles({ disabled });
-    return /* @__PURE__ */ import_react52.default.createElement("span", { className: wrapper() }, /* @__PURE__ */ import_react52.default.createElement(
+    return /* @__PURE__ */ import_react53.default.createElement("span", { className: wrapper() }, /* @__PURE__ */ import_react53.default.createElement(
       "input",
       {
         id,
@@ -7517,15 +7665,15 @@ var Switch = import_react52.default.forwardRef(
         readOnly,
         disabled
       }
-    ), /* @__PURE__ */ import_react52.default.createElement("span", { className: thumb() }, disabled && /* @__PURE__ */ import_react52.default.createElement(Icon2, { icon: ban_default, width: "10px", height: "10px" })));
+    ), /* @__PURE__ */ import_react53.default.createElement("span", { className: thumb() }, disabled && /* @__PURE__ */ import_react53.default.createElement(Icon2, { icon: ban_default, width: "10px", height: "10px" })));
   }
 );
 
 // src/atoms/VisuallyHidden/VisuallyHidden.tsx
-var import_react53 = __toESM(require("react"));
+var import_react54 = __toESM(require("react"));
 var import_visually_hidden = require("@react-aria/visually-hidden");
 var VisuallyHidden = (props) => {
-  return /* @__PURE__ */ import_react53.default.createElement(import_visually_hidden.VisuallyHidden, { ...props });
+  return /* @__PURE__ */ import_react54.default.createElement(import_visually_hidden.VisuallyHidden, { ...props });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {