@aivenio/aquarium 6.2.0 → 6.3.0

package/dist/system.mjs

@@ -1815,6 +1815,7 @@ var tokens_default = {
   code: {
     background: "rgba(250,250,250,1)",
     text: "rgba(45,46,48,1)",
+    variable: "rgba(123,45,139,1)",
     keyword: "rgba(202, 33, 101, 1)",
     string: "rgba(0, 127, 115, 1)",
     function: "rgba(9, 128, 193, 1)",
@@ -5690,7 +5691,7 @@ Combobox.Skeleton = ComboboxSkeleton;
 Combobox.Skeleton.displayName = "Combobox.Skeleton";
 
 // src/molecules/CommandPalette/CommandPalette.tsx
-import React64, { useEffect as useEffect7 } from "react";
+import React64, { useEffect as useEffect8 } from "react";
 import {
   Collection as AriaCollection2,
   composeRenderProps as composeRenderProps3,
@@ -5811,12 +5812,12 @@ DropdownMenu.EmptyStateContainer = EmptyStateContainer2;
 // src/molecules/CommandPalette/CommandPaletteProvider.tsx
 import React63, {
   createContext as createContext3,
-  useCallback,
+  useCallback as useCallback2,
   useContext as useContext6,
-  useEffect as useEffect6,
+  useEffect as useEffect7,
   useMemo as useMemo3,
   useReducer as useReducer2,
-  useRef as useRef7
+  useRef as useRef8
 } from "react";
 import {
   Autocomplete as AriaAutocomplete,
@@ -5834,38 +5835,46 @@ import { isCtrlKeyPressed } from "@react-aria/utils";
 // src/atoms/Modal/Modal.tsx
 import React59 from "react";
 import { tv as tv17 } from "tailwind-variants";
-var bodyMaskClasses = tv17({
-  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
+import { useCallback, useEffect as useEffect6, useRef as useRef7, useState as useState6 } from "react";
+var useScrollFade = () => {
+  const topSentinelRef = useRef7(null);
+  const bottomSentinelRef = useRef7(null);
+  const observerRef = useRef7(null);
+  const [showTopFade, setShowTopFade] = useState6(false);
+  const [showBottomFade, setShowBottomFade] = useState6(false);
+  const containerRef = 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);
+    }
+  }, []);
+  useEffect6(() => {
+    return () => observerRef.current?.disconnect();
+  }, []);
+  return { containerRef, topSentinelRef, bottomSentinelRef, showTopFade, showBottomFade };
+};
+
+// src/atoms/Modal/Modal.tsx
 var modalStyles = tv17({
   slots: {
     overlay: "inset-0 overflow-y-auto z-modal fixed",
@@ -5877,11 +5886,7 @@ var modalStyles = tv17({
     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"
@@ -5925,10 +5930,48 @@ var modalStyles = tv17({
       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: [
     {
@@ -6038,10 +6081,31 @@ Modal.TitleContainer = ({ children, className, ...rest }) => {
   const { titleContainer: titleContainer2 } = modalStyles();
   return /* @__PURE__ */ React59.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__ */ React59.createElement("div", { ...rest, className: body({ className }), style: { maxHeight, ...style } }, /* @__PURE__ */ React59.createElement("div", { className: bodyContent({ noFooter }) }, children));
+  const { containerRef, topSentinelRef, bottomSentinelRef, showTopFade, showBottomFade } = useScrollFade();
+  return /* @__PURE__ */ React59.createElement(
+    "div",
+    {
+      ...rest,
+      ref: containerRef,
+      className: body({ className, showTopFade, showBottomFade }),
+      style: { maxHeight, ...style }
+    },
+    /* @__PURE__ */ React59.createElement("div", { ref: topSentinelRef, "aria-hidden": "true", className: "h-1px" }),
+    /* @__PURE__ */ React59.createElement("div", { className: bodyContent({ noFooter }) }, children),
+    /* @__PURE__ */ React59.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__ */ React59.createElement("div", { ...rest, className: footer({ className }) }, children);
@@ -6240,9 +6304,9 @@ var useCommandPaletteRootContext = () => {
 };
 var useCommandPalette = () => {
   const [state, dispatch] = useCommandPaletteRootContext();
-  const open = useCallback(() => dispatch({ type: 3 /* Open */ }), [dispatch]);
-  const close = useCallback(() => dispatch({ type: 4 /* Close */ }), [dispatch]);
-  const toggle = useCallback(
+  const open = useCallback2(() => dispatch({ type: 3 /* Open */ }), [dispatch]);
+  const close = useCallback2(() => dispatch({ type: 4 /* Close */ }), [dispatch]);
+  const toggle = useCallback2(
     () => dispatch(state.isOpen ? { type: 4 /* Close */ } : { type: 3 /* Open */ }),
     [dispatch, state.isOpen]
   );
@@ -6262,7 +6326,7 @@ var CommandPaletteProvider = ({
   onInputChange
 }) => {
   const [state, dispatch] = useReducer2(reducer2, { registrations: [], isOpen: false, levelStack: [ROOT_LEVEL] });
-  const guardedDispatch = useCallback(
+  const guardedDispatch = useCallback2(
     (action) => {
       if (isDisabled && action.type === 3 /* Open */) {
         return;
@@ -6271,12 +6335,12 @@ var CommandPaletteProvider = ({
     },
     [isDisabled]
   );
-  useEffect6(() => {
+  useEffect7(() => {
     if (isDisabled && state.isOpen) {
       dispatch({ type: 4 /* Close */ });
     }
   }, [isDisabled, state.isOpen]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (shortcut === null || isDisabled) {
       return;
     }
@@ -6289,8 +6353,8 @@ var CommandPaletteProvider = ({
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [shortcut, state.isOpen, isDisabled]);
-  const isInitialMount = useRef7(true);
-  useEffect6(() => {
+  const isInitialMount = useRef8(true);
+  useEffect7(() => {
     if (isInitialMount.current) {
       isInitialMount.current = false;
       return;
@@ -6417,13 +6481,13 @@ var CommandPaletteOverlay = ({
 var Commands = ({ children }) => {
   const id = useId6();
   const [, dispatch] = useCommandPaletteRootContext();
-  useEffect7(() => {
+  useEffect8(() => {
     dispatch({ type: 0 /* Register */, registration: { id, children } });
     return () => {
       dispatch({ type: 1 /* Unregister */, id });
     };
   }, []);
-  useEffect7(() => {
+  useEffect8(() => {
     dispatch({ type: 2 /* Update */, registration: { id, children } });
   }, [dispatch, id, children]);
   return null;
@@ -6505,7 +6569,7 @@ var Container2 = ({ maxWidth = "xl", children }) => /* @__PURE__ */ React65.crea
 );
 
 // src/molecules/DataList/DataList.tsx
-import React83, { useRef as useRef10 } from "react";
+import React83, { useRef as useRef11 } from "react";
 import { useControlledState as useControlledState3 } from "@react-stately/utils";
 import { clsx as clsx26 } from "clsx";
 import { castArray as castArray3, compact, groupBy as groupBy2, isArray as isArray2, isFunction as isFunction3, noop as noop2 } from "lodash-es";
@@ -6521,7 +6585,7 @@ import { clsx as clsx22 } from "clsx";
 import { clamp } from "lodash-es";
 
 // src/molecules/Input/Input.tsx
-import React66, { forwardRef, useCallback as useCallback2, useImperativeHandle, useState as useState6 } from "react";
+import React66, { forwardRef, useCallback as useCallback3, useImperativeHandle, useState as useState7 } from "react";
 import { useId as useId7 } from "@react-aria/utils";
 import { clsx as clsx21 } from "clsx";
 import { omit as omit5, toString } from "lodash-es";
@@ -6597,9 +6661,9 @@ var createInputComponent = (displayName, options = {}) => {
   const InputComponent = React66.forwardRef((inputProps, ref) => {
     const { readOnly = false, value: valueProp, onChange: onChangeProp, ...props } = inputProps;
     const isControlled = typeof valueProp !== "undefined";
-    const [valueState, setValueState] = useState6(props.defaultValue ?? "");
+    const [valueState, setValueState] = useState7(props.defaultValue ?? "");
     const value = isControlled ? valueProp : valueState;
-    const handleChange = useCallback2(
+    const handleChange = useCallback3(
       (e) => {
         const next = e.target.value;
         if (!isControlled) {
@@ -6655,7 +6719,7 @@ Input2.Skeleton = () => /* @__PURE__ */ React66.createElement(LabelControl.Skele
 Input2.Skeleton.displayName = "Input.Skeleton";
 
 // src/molecules/Select/Select.tsx
-import React67, { useEffect as useEffect8, useRef as useRef8, useState as useState7 } from "react";
+import React67, { useEffect as useEffect9, useRef as useRef9, useState as useState8 } from "react";
 import { ariaHideOutside as ariaHideOutside2 } from "@react-aria/overlays";
 import { useId as useId8 } from "@react-aria/utils";
 import { useSelect } from "downshift";
@@ -6707,11 +6771,11 @@ var _SelectBase = (props) => {
     children,
     ...rest
   } = withDefaults;
-  const [hasFocus, setFocus] = useState7(false);
-  const inputRef = useRef8(null);
-  const popoverRef = useRef8(null);
-  const targetRef = useRef8(null);
-  const menuRef = useRef8(null);
+  const [hasFocus, setFocus] = useState8(false);
+  const inputRef = useRef9(null);
+  const popoverRef = useRef9(null);
+  const targetRef = useRef9(null);
+  const menuRef = useRef9(null);
   const items = hasOptionGroups(options) ? options.flatMap((g) => g.options) : options;
   const findItemByValue = (val) => {
     if (val === null) {
@@ -6742,7 +6806,7 @@ var _SelectBase = (props) => {
      */
     scrollIntoView: (node, _menuNode) => node.scrollIntoView({ block: "nearest" })
   });
-  useEffect8(() => {
+  useEffect9(() => {
     if (isOpen && inputRef.current && popoverRef.current) {
       return ariaHideOutside2([inputRef.current, popoverRef.current]);
     }
@@ -6953,7 +7017,7 @@ var Pagination = ({
 };
 
 // src/molecules/Pagination/usePagination.tsx
-import { useEffect as useEffect9, useState as useState8 } from "react";
+import { useEffect as useEffect10, useState as useState9 } from "react";
 import { clamp as clamp2 } from "lodash-es";
 var initialState = {
   currentPage: 1,
@@ -6961,8 +7025,8 @@ var initialState = {
 };
 var getPageIndex = (currentPage, pageSize) => currentPage === 0 ? 0 : (currentPage - 1) * pageSize;
 var usePagination = (items, options) => {
-  const [currentPage, setCurrentPage] = useState8(options?.initialPage ?? initialState.currentPage);
-  const [pageSize, setPageSize] = useState8(options?.initialPageSize ?? initialState.pageSize);
+  const [currentPage, setCurrentPage] = useState9(options?.initialPage ?? initialState.currentPage);
+  const [pageSize, setPageSize] = useState9(options?.initialPageSize ?? initialState.pageSize);
   const totalPages = items.length > 0 ? Math.ceil(items.length / pageSize) : 1;
   const hasPreviousPage = currentPage > 1;
   const hasNextPage = currentPage < totalPages;
@@ -6972,7 +7036,7 @@ var usePagination = (items, options) => {
     setPageSize(pageSize2);
     setCurrentPage(clamp2(options?.initialPage ?? initialState.currentPage, 1, newTotalPages));
   };
-  useEffect9(() => {
+  useEffect10(() => {
     setCurrentPage(clamp2(options?.initialPage ?? initialState.currentPage, 1, totalPages));
   }, [items.length]);
   return [
@@ -7349,7 +7413,7 @@ var toolbarContainerClasses = tv19({
   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: ""
     }
   }
@@ -7460,7 +7524,7 @@ DataList.Toolbar = {
 };
 
 // src/utils/stickyStyles.tsx
-import React73, { useCallback as useCallback3, useLayoutEffect as useLayoutEffect2, useMemo as useMemo4, useRef as useRef9, useState as useState9 } from "react";
+import React73, { useCallback as useCallback4, useLayoutEffect as useLayoutEffect2, useMemo as useMemo4, useRef as useRef10, useState as useState10 } from "react";
 import { animated as animated4, useSpring as useSpring3 } from "@react-spring/web";
 import { throttle } from "lodash-es";
 function useStickyStyles(scrollProgress, axis, { borderColor, boxShadowColor }) {
@@ -7511,8 +7575,8 @@ function useScrollProgress({
   skip,
   throttleMs = 50
 }) {
-  const [scrollState, setScrollState] = useState9(null);
-  const currentStateRef = useRef9(null);
+  const [scrollState, setScrollState] = useState10(null);
+  const currentStateRef = useRef10(null);
   const throttledSetScrollState = useMemo4(
     () => throttle((value) => {
       const currentState = currentStateRef.current;
@@ -7524,7 +7588,7 @@ function useScrollProgress({
     }, throttleMs),
     [throttleMs]
   );
-  const handleScroll = useCallback3(() => {
+  const handleScroll = useCallback4(() => {
     const element = containerRef.current;
     if (!element) {
       return;
@@ -8324,7 +8388,7 @@ var DataList2 = ({
   ["aria-label"]: ariaLabel,
   ...rest
 }) => {
-  const containerRef = useRef10(null);
+  const containerRef = useRef11(null);
   const hasStickyColumns = columns.some((column) => column.sticky);
   const stickyStyles = useScrollStyles({ containerRef, skip: !hasStickyColumns });
   const [selected, setSelected] = useControlledState3(
@@ -8537,7 +8601,7 @@ DataList2.Skeleton = DataListSkeleton;
 DataList2.Toolbar = DataListToolbar;
 
 // src/molecules/DataTable/DataTable.tsx
-import React86, { useRef as useRef11 } from "react";
+import React86, { useRef as useRef12 } from "react";
 import { clsx as clsx27 } from "clsx";
 import { compact as compact2, isFunction as isFunction4 } from "lodash-es";
 
@@ -8596,7 +8660,7 @@ var DataTable = ({
   onPrev,
   ...rest
 }) => {
-  const containerRef = useRef11(null);
+  const containerRef = useRef12(null);
   const hasStickyColumns = columns.some((column) => column.sticky);
   const stickyStyles = useScrollStyles({ containerRef, skip: !hasStickyColumns });
   const defaultSortedColumn = columns.find((c) => c.headerName === defaultSort?.headerName);
@@ -11741,7 +11805,7 @@ var ModalTitle = ({ children, ...props }) => {
 };
 
 // src/molecules/Tabs/Tabs.tsx
-import React98, { useEffect as useEffect10, useLayoutEffect as useLayoutEffect3, useRef as useRef12, useState as useState10 } from "react";
+import React98, { useEffect as useEffect11, useLayoutEffect as useLayoutEffect3, useRef as useRef13, useState as useState11 } from "react";
 import { clsx as clsx28 } from "clsx";
 import { isNumber as isNumber6, kebabCase } from "lodash-es";
 var isTabComponent = (c) => {
@@ -11849,12 +11913,12 @@ var createTabsComponent = (TabComponent, TabItemComponent, displayName, renderCh
     const childArr = React98.Children.toArray(children);
     const firstTab = childArr[0];
     const firstTabValue = isTabComponent(firstTab) ? firstTab.props.value : -1;
-    const [selected, setSelected] = useState10(value ?? defaultValue ?? firstTabValue ?? 0);
-    const [leftCaret, showLeftCaret] = useState10(false);
-    const [rightCaret, showRightCaret] = useState10(false);
-    const parentRef = useRef12(null);
-    const containerRef = useRef12(null);
-    const tabsRef = useRef12(null);
+    const [selected, setSelected] = useState11(value ?? defaultValue ?? firstTabValue ?? 0);
+    const [leftCaret, showLeftCaret] = useState11(false);
+    const [rightCaret, showRightCaret] = useState11(false);
+    const parentRef = useRef13(null);
+    const containerRef = useRef13(null);
+    const tabsRef = useRef13(null);
     const revealSelectedTab = ({ smooth }) => {
       const container2 = containerRef.current;
       const tabs = tabsRef.current;
@@ -11889,7 +11953,7 @@ var createTabsComponent = (TabComponent, TabItemComponent, displayName, renderCh
       showLeftCaret(hasLeftCaret);
       showRightCaret(hasRightCaret);
     };
-    useEffect10(() => {
+    useEffect11(() => {
       if (value === void 0) {
         return;
       }
@@ -12544,13 +12608,13 @@ var ModalTabs = createTabsComponent(
   ModalTab,
   TabItem,
   "ModalTabs",
-  (children, selected, props) => /* @__PURE__ */ React107.createElement(Modal.Body, { maxHeight: props.maxHeight }, /* @__PURE__ */ React107.createElement(TabContainer, { className: "!py-4" }, children.find(
+  (children, selected, props) => /* @__PURE__ */ React107.createElement(Modal.Body, { maxHeight: props.maxHeight }, /* @__PURE__ */ React107.createElement(TabContainer, null, children.find(
     (node, index) => node?.props.value === selected || index === selected
   )))
 );
 
 // src/molecules/MultiInput/MultiInput.tsx
-import React109, { useEffect as useEffect11, useRef as useRef13, useState as useState11 } from "react";
+import React109, { useEffect as useEffect12, useRef as useRef14, useState as useState12 } from "react";
 import { useId as useId13 } from "@react-aria/utils";
 import { castArray as castArray6, identity, omit as omit13 } from "lodash-es";
 
@@ -12631,11 +12695,11 @@ var MultiInputBase = ({
   valid = true,
   ...props
 }) => {
-  const inputRef = useRef13(null);
-  const [items, setItems] = useState11(value ?? defaultValue ?? []);
-  const [hasFocus, setFocus] = useState11(false);
+  const inputRef = useRef14(null);
+  const [items, setItems] = useState12(value ?? defaultValue ?? []);
+  const [hasFocus, setFocus] = useState12(false);
   const keyCodes = [delimiter !== "enter" ? " " : null, delimiter !== "space" ? "Enter" : null].filter(identity);
-  useEffect11(() => {
+  useEffect12(() => {
     const requiresUpdate = value !== void 0 || defaultValue === void 0;
     if (requiresUpdate && JSON.stringify(value) !== JSON.stringify(items)) {
       setItems(value ?? []);
@@ -12757,8 +12821,8 @@ var MultiInputBase = ({
 var BaseMultiInputSkeleton = () => /* @__PURE__ */ React109.createElement(Skeleton, { height: 38 });
 MultiInputBase.Skeleton = BaseMultiInputSkeleton;
 var MultiInput = (props) => {
-  const [value, setValue] = useState11(props.value ?? props.defaultValue ?? []);
-  useEffect11(() => {
+  const [value, setValue] = useState12(props.value ?? props.defaultValue ?? []);
+  useEffect12(() => {
     setValue(props.value ?? []);
   }, [JSON.stringify(props.value)]);
   const defaultId = useId13();
@@ -12800,7 +12864,7 @@ MultiInput.Skeleton = MultiInputSkeleton;
 MultiInput.Skeleton.displayName = "MultiInput.Skeleton";
 
 // src/molecules/MultiSelect/MultiSelect.tsx
-import React110, { useEffect as useEffect12, useRef as useRef14, useState as useState12 } from "react";
+import React110, { useEffect as useEffect13, useRef as useRef15, useState as useState13 } from "react";
 import { ariaHideOutside as ariaHideOutside3 } from "@react-aria/overlays";
 import { useId as useId14 } from "@react-aria/utils";
 import { useCombobox as useCombobox2, useMultipleSelection } from "downshift";
@@ -12830,12 +12894,12 @@ var MultiSelectBase = ({
   children,
   ...props
 }) => {
-  const popoverRef = useRef14(null);
-  const targetRef = useRef14(null);
-  const menuRef = useRef14(null);
-  const inputRef = useRef14(null);
-  const [inputValue, setInputValue] = useState12("");
-  const [hasFocus, setFocus] = useState12(false);
+  const popoverRef = useRef15(null);
+  const targetRef = useRef15(null);
+  const menuRef = useRef15(null);
+  const inputRef = useRef15(null);
+  const [inputValue, setInputValue] = useState13("");
+  const [hasFocus, setFocus] = useState13(false);
   const { selectedItems, addSelectedItem, removeSelectedItem, getDropdownProps, getSelectedItemProps } = useMultipleSelection(
     /*
      * For some reason useMultipleSelection does not accept
@@ -12913,7 +12977,7 @@ var MultiSelectBase = ({
      */
     scrollIntoView: (node, _menuNode) => node.scrollIntoView({ block: "nearest" })
   });
-  useEffect12(() => {
+  useEffect13(() => {
     if (isOpen && inputRef.current && popoverRef.current) {
       return ariaHideOutside3([inputRef.current, popoverRef.current]);
     }
@@ -13548,7 +13612,7 @@ RadioButtonGroup.Skeleton = RadioButtonGroupSkeleton;
 RadioButtonGroup.Skeleton.displayName = "RadioButtonGroup.Skeleton";
 
 // src/molecules/Section/Section.tsx
-import React126, { useRef as useRef15 } from "react";
+import React126, { useRef as useRef16 } from "react";
 import { useButton as useButton4 } from "@react-aria/button";
 import { useId as useId17 } from "@react-aria/utils";
 import { animated as animated6, useSpring as useSpring5 } from "@react-spring/web";
@@ -13711,8 +13775,8 @@ var Section4 = (props) => {
   const [isCollapsed, setCollapsed] = React126.useState(_collapsed ?? _defaultCollapsed);
   const [isResting, setResting] = React126.useState(true);
   const [ref, { height }] = useMeasure();
-  const toggleAreaRef = useRef15(null);
-  const isMounted = useRef15(true);
+  const toggleAreaRef = useRef16(null);
+  const isMounted = useRef16(true);
   React126.useEffect(
     () => () => {
       isMounted.current = false;
@@ -14012,7 +14076,7 @@ Step2.displayName = "Stepper.Step";
 Stepper2.Step = Step2;
 
 // src/molecules/SwitchGroup/SwitchGroup.tsx
-import React130, { useState as useState13 } from "react";
+import React130, { useState as useState14 } from "react";
 import { useId as useId18 } from "@react-aria/utils";
 var SwitchGroup = ({
   value,
@@ -14023,7 +14087,7 @@ var SwitchGroup = ({
   children,
   ...props
 }) => {
-  const [selectedItems, setSelectedItems] = useState13(value ?? defaultValue ?? []);
+  const [selectedItems, setSelectedItems] = useState14(value ?? defaultValue ?? []);
   if (value !== void 0 && value !== selectedItems) {
     setSelectedItems(value);
   }
@@ -14059,7 +14123,7 @@ SwitchGroup.Skeleton = SwitchGroupSkeleton;
 SwitchGroup.Skeleton.displayName = "SwitchGroup.Skeleton";
 
 // src/molecules/Textarea/Textarea.tsx
-import React131, { useState as useState14 } from "react";
+import React131, { useState as useState15 } from "react";
 import { useId as useId19 } from "@react-aria/utils";
 import { clsx as clsx39 } from "clsx";
 import { omit as omit17, toString as toString2 } from "lodash-es";
@@ -14076,7 +14140,7 @@ var TextareaBase = React131.forwardRef(
 );
 TextareaBase.Skeleton = () => /* @__PURE__ */ React131.createElement(Skeleton, { height: 58 });
 var Textarea = React131.forwardRef((props, ref) => {
-  const [value, setValue] = useState14(props.value ?? props.defaultValue ?? "");
+  const [value, setValue] = useState15(props.value ?? props.defaultValue ?? "");
   const defaultId = useId19();
   const id = props.id ?? defaultId;
   const errorMessageId = useId19();
@@ -14119,12 +14183,12 @@ Textarea.Skeleton = TextAreaSkeleton;
 Textarea.Skeleton.displayName = "Textarea.Skeleton";
 
 // src/molecules/Timeline/Timeline.tsx
-import React133 from "react";
+import React134 from "react";
 
 // src/atoms/Timeline/Timeline.tsx
 import React132 from "react";
 import { clsx as clsx40 } from "clsx";
-var Timeline = ({ className, ...rest }) => /* @__PURE__ */ React132.createElement("div", { ...rest, className: clsx40("grid grid-cols-[16px_1fr] gap-x-4", className) });
+var Timeline = ({ className, ...rest }) => /* @__PURE__ */ React132.createElement("li", { ...rest, className: clsx40("grid grid-cols-[16px_1fr] gap-x-4", className) });
 var Content2 = ({ className, ...rest }) => /* @__PURE__ */ React132.createElement("div", { ...rest, className: clsx40("pb-6", className) });
 var Separator = ({ className, ...rest }) => /* @__PURE__ */ React132.createElement("div", { ...rest, className: clsx40("flex items-center justify-center h-5 w-5", className) });
 var LineContainer = ({ className, ...rest }) => /* @__PURE__ */ React132.createElement("div", { ...rest, className: clsx40("flex justify-center py-1", className) });
@@ -14136,25 +14200,32 @@ Timeline.Separator = Separator;
 Timeline.LineContainer = LineContainer;
 Timeline.Content = Content2;
 
+// src/atoms/VisuallyHidden/VisuallyHidden.tsx
+import React133 from "react";
+import { VisuallyHidden as AriaVisuallyHidden } from "@react-aria/visually-hidden";
+var VisuallyHidden = (props) => {
+  return /* @__PURE__ */ React133.createElement(AriaVisuallyHidden, { ...props });
+};
+
 // src/molecules/Timeline/Timeline.tsx
 var TimelineItem = () => null;
-var Timeline2 = ({ children }) => /* @__PURE__ */ React133.createElement("div", { className: "Aquarium-Timeline" }, React133.Children.map(children, (item) => {
+var Timeline2 = ({ children, "aria-label": ariaLabel }) => /* @__PURE__ */ React134.createElement("ol", { className: "Aquarium-Timeline", "aria-label": ariaLabel }, React134.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__ */ React133.createElement(Timeline, { key: key ?? props.title }, /* @__PURE__ */ React133.createElement(Timeline.Separator, null, props.variant === "error" ? /* @__PURE__ */ React133.createElement(Icon, { icon: error_default, color: "danger-default" }) : props.variant === "warning" ? /* @__PURE__ */ React133.createElement(Icon, { icon: warningSign_default, color: "warning-default" }) : props.variant === "info" ? /* @__PURE__ */ React133.createElement(Icon, { icon: time_default, color: "info-default" }) : props.variant === "success" ? /* @__PURE__ */ React133.createElement(Icon, { icon: tickCircle_default, color: "success-default" }) : props.variant === "loading" ? /* @__PURE__ */ React133.createElement(Icon, { icon: loading_default, color: "default" }) : /* @__PURE__ */ React133.createElement(Timeline.Separator.Dot, null)), /* @__PURE__ */ React133.createElement(Typography2.Small, { color: "muted" }, props.title), /* @__PURE__ */ React133.createElement(Timeline.LineContainer, null, /* @__PURE__ */ React133.createElement(Timeline.LineContainer.Line, null)), /* @__PURE__ */ React133.createElement(Timeline.Content, null, /* @__PURE__ */ React133.createElement(Typography2.Default, null, props.children)));
+    return /* @__PURE__ */ React134.createElement(Timeline, { key: key ?? props.title }, /* @__PURE__ */ React134.createElement(Timeline.Separator, null, props.variant === "error" ? /* @__PURE__ */ React134.createElement(React134.Fragment, null, /* @__PURE__ */ React134.createElement(VisuallyHidden, null, "Error: "), /* @__PURE__ */ React134.createElement(Icon, { icon: error_default, color: "danger-default" })) : props.variant === "warning" ? /* @__PURE__ */ React134.createElement(React134.Fragment, null, /* @__PURE__ */ React134.createElement(VisuallyHidden, null, "Warning: "), /* @__PURE__ */ React134.createElement(Icon, { icon: warningSign_default, color: "warning-default" })) : props.variant === "info" ? /* @__PURE__ */ React134.createElement(React134.Fragment, null, /* @__PURE__ */ React134.createElement(VisuallyHidden, null, "Info: "), /* @__PURE__ */ React134.createElement(Icon, { icon: time_default, color: "info-default" })) : props.variant === "success" ? /* @__PURE__ */ React134.createElement(React134.Fragment, null, /* @__PURE__ */ React134.createElement(VisuallyHidden, null, "Success: "), /* @__PURE__ */ React134.createElement(Icon, { icon: tickCircle_default, color: "success-default" })) : props.variant === "loading" ? /* @__PURE__ */ React134.createElement(React134.Fragment, null, /* @__PURE__ */ React134.createElement(VisuallyHidden, null, "Loading: "), /* @__PURE__ */ React134.createElement(Icon, { icon: loading_default, color: "default" })) : /* @__PURE__ */ React134.createElement(Timeline.Separator.Dot, null)), /* @__PURE__ */ React134.createElement(Typography2.Small, { color: "muted" }, props.title), /* @__PURE__ */ React134.createElement(Timeline.LineContainer, null, /* @__PURE__ */ React134.createElement(Timeline.LineContainer.Line, null)), /* @__PURE__ */ React134.createElement(Timeline.Content, null, /* @__PURE__ */ React134.createElement(Typography2.Default, null, props.children)));
   }
 }));
-var TimelineItemSkeleton = () => /* @__PURE__ */ React133.createElement(Timeline, null, /* @__PURE__ */ React133.createElement(Timeline.Separator, null, /* @__PURE__ */ React133.createElement(Skeleton, { width: 6, height: 6, rounded: true })), /* @__PURE__ */ React133.createElement(Skeleton, { height: 12, width: 120 }), /* @__PURE__ */ React133.createElement(Timeline.LineContainer, null, /* @__PURE__ */ React133.createElement(Skeleton, { width: 2, height: "100%" })), /* @__PURE__ */ React133.createElement(Timeline.Content, null, /* @__PURE__ */ React133.createElement(Box, { display: "flex", flexDirection: "column", gap: "3" }, /* @__PURE__ */ React133.createElement(Skeleton, { height: 32, width: "100%" }), /* @__PURE__ */ React133.createElement(Skeleton, { height: 32, width: "73%" }), /* @__PURE__ */ React133.createElement(Skeleton, { height: 32, width: "80%" }))));
-var TimelineSkeleton = ({ items = 3 }) => /* @__PURE__ */ React133.createElement("div", null, Array.from({ length: items }).map((_, key) => /* @__PURE__ */ React133.createElement(TimelineItemSkeleton, { key })));
+var TimelineItemSkeleton = () => /* @__PURE__ */ React134.createElement(Timeline, null, /* @__PURE__ */ React134.createElement(Timeline.Separator, null, /* @__PURE__ */ React134.createElement(Skeleton, { width: 6, height: 6, rounded: true })), /* @__PURE__ */ React134.createElement(Skeleton, { height: 12, width: 120 }), /* @__PURE__ */ React134.createElement(Timeline.LineContainer, null, /* @__PURE__ */ React134.createElement(Skeleton, { width: 2, height: "100%" })), /* @__PURE__ */ React134.createElement(Timeline.Content, null, /* @__PURE__ */ React134.createElement(Box, { display: "flex", flexDirection: "column", gap: "3" }, /* @__PURE__ */ React134.createElement(Skeleton, { height: 32, width: "100%" }), /* @__PURE__ */ React134.createElement(Skeleton, { height: 32, width: "73%" }), /* @__PURE__ */ React134.createElement(Skeleton, { height: 32, width: "80%" }))));
+var TimelineSkeleton = ({ items = 3 }) => /* @__PURE__ */ React134.createElement("ol", { className: "Aquarium-Timeline", "aria-busy": "true", "aria-label": "Loading timeline" }, /* @__PURE__ */ React134.createElement("div", { "aria-hidden": true }, Array.from({ length: items }).map((_, key) => /* @__PURE__ */ React134.createElement(TimelineItemSkeleton, { key }))));
 Timeline2.Item = TimelineItem;
 Timeline2.Skeleton = TimelineSkeleton;
 Timeline2.Skeleton.displayName = "Timeline.Skeleton";
 
 // src/molecules/TimePicker/TimePicker.tsx
-import React134 from "react";
-var TimePicker = (props) => /* @__PURE__ */ React134.createElement(TimeField2, { ...props });
+import React135 from "react";
+var TimePicker = (props) => /* @__PURE__ */ React135.createElement(TimeField2, { ...props });
 
 // src/utils/table/sortByColumn.ts
 var sortByColumn = (items, column, sortState) => {
@@ -14176,13 +14247,13 @@ var sortByColumn = (items, column, sortState) => {
 };
 
 // src/utils/table/useSortState.ts
-import React135 from "react";
-var useSortState = (initialSortState) => React135.useState(initialSortState);
+import React136 from "react";
+var useSortState = (initialSortState) => React136.useState(initialSortState);
 
 // src/utils/table/useTableSelect.ts
-import React136 from "react";
+import React137 from "react";
 var useTableSelect = (data31, { key }) => {
-  const [selected, setSelected] = React136.useState([]);
+  const [selected, setSelected] = React137.useState([]);
   const allSelected = selected.length === data31.length;
   const isSelected = (dot) => selected.includes(dot[key]);
   const selectAll = () => setSelected(data31.map((dot) => dot[key]));
@@ -14207,7 +14278,7 @@ var useTableSelect = (data31, { key }) => {
 };
 
 // src/molecules/ItemList/ItemList.tsx
-import React137 from "react";
+import React138 from "react";
 var ItemList = ({
   columns,
   items,
@@ -14219,9 +14290,9 @@ var ItemList = ({
   const templateColumns = columns.map((column) => column.width ?? "auto");
   const [sortState, setSortState] = useSortState(defaultSort);
   const sortedItems = onSortChanged ? items : sortByColumn(items, columns, sortState);
-  return /* @__PURE__ */ React137.createElement(Template, { className: "Aquarium-ItemList", columns: templateColumns, role: "table" }, /* @__PURE__ */ React137.createElement(DataList.Row, { header: true }, columns.map((column) => {
+  return /* @__PURE__ */ React138.createElement(Template, { className: "Aquarium-ItemList", columns: templateColumns, role: "table" }, /* @__PURE__ */ React138.createElement(DataList.Row, { header: true }, columns.map((column) => {
     if (columnHasSort(column)) {
-      return /* @__PURE__ */ React137.createElement(
+      return /* @__PURE__ */ React138.createElement(
         DataList.SortCell,
         {
           sticky,
@@ -14249,11 +14320,11 @@ var ItemList = ({
         column.headerName
       );
     }
-    return /* @__PURE__ */ React137.createElement(DataList.HeadCell, { key: column.key ?? column.headerName, ...cellProps(column), sticky }, column.headerName);
-  })), /* @__PURE__ */ React137.createElement(Rows, { columns, items: sortedItems, level: 0, ...infiniteProps }));
+    return /* @__PURE__ */ React138.createElement(DataList.HeadCell, { key: column.key ?? column.headerName, ...cellProps(column), sticky }, column.headerName);
+  })), /* @__PURE__ */ React138.createElement(Rows, { columns, items: sortedItems, level: 0, ...infiniteProps }));
 };
 var Rows = ({ columns, items, level, isLastGroup, ...infiniteProps }) => {
-  return /* @__PURE__ */ React137.createElement(
+  return /* @__PURE__ */ React138.createElement(
     List,
     {
       ...level === 0 ? infiniteProps : {},
@@ -14262,22 +14333,22 @@ var Rows = ({ columns, items, level, isLastGroup, ...infiniteProps }) => {
         const hasSubItems = item.items && item.items.length > 0;
         const isLastItem = itemIndex === items.length - 1;
         const noDivider = level === 0 && isLastItem || level > 0 && (isLastGroup || !isLastItem) || hasSubItems;
-        return /* @__PURE__ */ React137.createElement(React137.Fragment, { key: item.id }, /* @__PURE__ */ React137.createElement(DataList.Row, { noDivider }, /* @__PURE__ */ React137.createElement(
+        return /* @__PURE__ */ React138.createElement(React138.Fragment, { key: item.id }, /* @__PURE__ */ React138.createElement(DataList.Row, { noDivider }, /* @__PURE__ */ React138.createElement(
           List,
           {
             items: columns,
-            renderItem: (column, columnIndex) => /* @__PURE__ */ React137.createElement(
+            renderItem: (column, columnIndex) => /* @__PURE__ */ React138.createElement(
               DataList.Cell,
               {
                 key: column.key ?? column.headerName,
                 ...cellProps(column),
                 style: level > 1 && columnIndex === 0 ? { paddingLeft: (level - 1) * 60 } : void 0
               },
-              level > 0 && columnIndex === 0 && /* @__PURE__ */ React137.createElement(DataList.TreeLine, { isLast: itemIndex === items.length - 1 }),
-              /* @__PURE__ */ React137.createElement(DataListCell, { column, row: item, index: columnIndex, rows: items })
+              level > 0 && columnIndex === 0 && /* @__PURE__ */ React138.createElement(DataList.TreeLine, { isLast: itemIndex === items.length - 1 }),
+              /* @__PURE__ */ React138.createElement(DataListCell, { column, row: item, index: columnIndex, rows: items })
             )
           }
-        )), item.items && /* @__PURE__ */ React137.createElement(WithGroup, { level }, /* @__PURE__ */ React137.createElement(
+        )), item.items && /* @__PURE__ */ React138.createElement(WithGroup, { level }, /* @__PURE__ */ React138.createElement(
           Rows,
           {
             columns,
@@ -14290,7 +14361,7 @@ var Rows = ({ columns, items, level, isLastGroup, ...infiniteProps }) => {
     }
   );
 };
-var WithGroup = ({ level, children }) => level === 0 ? /* @__PURE__ */ React137.createElement(DataList.Row, { isGroup: true }, children) : /* @__PURE__ */ React137.createElement(React137.Fragment, null, children);
+var WithGroup = ({ level, children }) => level === 0 ? /* @__PURE__ */ React138.createElement(DataList.Row, { isGroup: true }, children) : /* @__PURE__ */ React138.createElement(React138.Fragment, null, children);
 
 // src/molecules/index.ts
 var SelectItem = Select.Item;