@aivenio/aquarium 1.70.0 → 1.71.0

package/dist/system.mjs

@@ -4512,6 +4512,22 @@ var require_ticket = __commonJS({
   }
 });
 
+// src/icons/tiered.js
+var require_tiered = __commonJS({
+  "src/icons/tiered.js"(exports) {
+    "use strict";
+    var data = {
+      "body": '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m20 16.288-8.678 4.11c-.118.056-.177.084-.239.095a.477.477 0 01-.166 0c-.062-.011-.12-.04-.239-.095L2 16.288m0-3.901 4.339 2.055 4.339 2.054c.118.056.177.084.239.095.055.01.111.01.166 0 .062-.01.12-.039.239-.095L20 12.386 17 11M5.7 10C4.209 10 3 8.849 3 7.429c0-1.34 1.075-2.44 2.448-2.56C5.728 3.24 7.212 2 9 2s3.271 1.241 3.552 2.868C13.925 4.99 15 6.09 15 7.428 15 8.849 13.791 10 12.3 10H5.7Z"/>',
+      "left": 0,
+      "top": 0,
+      "width": 22,
+      "height": 22
+    };
+    exports.__esModule = true;
+    exports.default = data;
+  }
+});
+
 // src/icons/time.js
 var require_time = __commonJS({
   "src/icons/time.js"(exports) {
@@ -6434,6 +6450,7 @@ var import_thumbsUp = __toESM(require_thumbsUp());
 var import_tickCircle = __toESM(require_tickCircle());
 var import_tick2 = __toESM(require_tick());
 var import_ticket = __toESM(require_ticket());
+var import_tiered = __toESM(require_tiered());
 var import_time = __toESM(require_time());
 var import_timelineAreaChart = __toESM(require_timelineAreaChart());
 var import_timelineBarChart = __toESM(require_timelineBarChart());
@@ -9858,7 +9875,7 @@ var Container2 = ({ maxWidth = "xl", children }) => /* @__PURE__ */ React52.crea
 }, children);
 
 // src/molecules/DataList/DataList.tsx
-import React72, { useRef as useRef7 } from "react";
+import React72, { useRef as useRef8 } from "react";
 import { useControlledState } from "@react-stately/utils";
 import castArray2 from "lodash/castArray";
 import compact from "lodash/compact";
@@ -9867,8 +9884,9 @@ import isArray3 from "lodash/isArray";
 import isFunction3 from "lodash/isFunction";
 
 // src/molecules/Accordion/Accordion.tsx
-import React55, { createContext as createContext2, useContext as useContext5, useState as useState6 } from "react";
+import React55, { createContext as createContext2, useContext as useContext5, useRef as useRef6, useState as useState6 } from "react";
 import { Icon as Icon2 } from "@iconify/react";
+import { useButton as useButton3 } from "@react-aria/button";
 import { useId as useId6 } from "@react-aria/utils";
 import { animated as animated3, useSpring as useSpring2 } from "@react-spring/web";
 import isUndefined8 from "lodash/isUndefined";
@@ -9968,6 +9986,7 @@ var Accordion = ({ children, openPanelId: panelId }) => {
 };
 var AccordionToggle = (_a) => {
   var _b = _a, { panelId, onChange } = _b, rest = __objRest(_b, ["panelId", "onChange"]);
+  const ref = useRef6(null);
   const id = usePanelContext(panelId);
   const [openPanelId, setOpenPanelId] = useAccordionContext();
   const isOpen = openPanelId === id;
@@ -9980,14 +9999,19 @@ var AccordionToggle = (_a) => {
       duration: 150
     }
   });
-  return /* @__PURE__ */ React55.createElement(animated3.div, __spreadProps(__spreadValues({}, rest), {
-    role: "button",
-    tabIndex: 0,
+  const { buttonProps } = useButton3({ elementType: "div", onPress: handleClick }, ref);
+  return /* @__PURE__ */ React55.createElement(animated3.div, __spreadProps(__spreadValues(__spreadValues({}, rest), __spreadProps(__spreadValues({}, buttonProps), {
+    onPointerDown: (e) => {
+      e.preventDefault();
+      handleClick();
+    }
+  })), {
+    ref,
     "aria-label": "accordion toggle",
     "aria-expanded": openPanelId === id,
     "aria-controls": `${id}-content`,
-    onClick: handleClick,
-    style: { transform }
+    style: { transform },
+    className: tw("focus:outline-none focusable")
   }), /* @__PURE__ */ React55.createElement(Icon2, {
     icon: import_caretUp.default,
     height: 22,
@@ -10233,7 +10257,7 @@ Input2.Skeleton = () => /* @__PURE__ */ React57.createElement(LabelControl.Skele
 Input2.Skeleton.displayName = "Input.Skeleton";
 
 // src/molecules/Select/Select.tsx
-import React58, { useRef as useRef6, useState as useState8 } from "react";
+import React58, { useRef as useRef7, useState as useState8 } from "react";
 import { useId as useId8 } from "@react-aria/utils";
 import { useSelect } from "downshift";
 import defaults from "lodash/defaults";
@@ -10324,8 +10348,8 @@ var _SelectBase = (props) => {
     "labelWrapper"
   ]);
   const [hasFocus, setFocus] = useState8(false);
-  const targetRef = useRef6(null);
-  const menuRef = useRef6(null);
+  const targetRef = useRef7(null);
+  const menuRef = useRef7(null);
   const items = hasOptionGroups(options) ? options.flatMap((g) => g.options) : options;
   const findItemByValue = (val) => {
     if (val === null) {
@@ -11976,7 +12000,7 @@ var DataList2 = (_a) => {
     "toolbar"
   ]);
   var _a2, _b2;
-  const containerRef = useRef7(null);
+  const containerRef = useRef8(null);
   const hasStickyColumns = columns.some((column) => column.sticky);
   const stickyStyles = useScrollStyles({ containerRef, skip: !hasStickyColumns });
   const [selected, setSelected] = useControlledState(
@@ -12175,7 +12199,7 @@ DataList2.Skeleton = DataListSkeleton;
 DataList2.Toolbar = DataListToolbar;
 
 // src/molecules/DataTable/DataTable.tsx
-import React75, { useRef as useRef8 } from "react";
+import React75, { useRef as useRef9 } from "react";
 import classNames8 from "classnames";
 import compact2 from "lodash/compact";
 import isFunction4 from "lodash/isFunction";
@@ -12264,7 +12288,7 @@ var DataTable = (_a) => {
     "onPrev"
   ]);
   var _a2;
-  const containerRef = useRef8(null);
+  const containerRef = useRef9(null);
   const hasStickyColumns = columns.some((column) => column.sticky);
   const stickyStyles = useScrollStyles({ containerRef, skip: !hasStickyColumns });
   const defaultSortedColumn = columns.find((c) => c.headerName === (defaultSort == null ? void 0 : defaultSort.headerName));
@@ -12634,7 +12658,7 @@ import castArray3 from "lodash/castArray";
 import omit9 from "lodash/omit";
 
 // src/molecules/Tabs/Tabs.tsx
-import React78, { useEffect as useEffect8, useLayoutEffect as useLayoutEffect2, useRef as useRef9, useState as useState11 } from "react";
+import React78, { useEffect as useEffect8, useLayoutEffect as useLayoutEffect2, useRef as useRef10, useState as useState11 } from "react";
 import isNumber5 from "lodash/isNumber";
 import kebabCase from "lodash/kebabCase";
 var import_chevronLeft4 = __toESM(require_chevronLeft());
@@ -12765,9 +12789,9 @@ var createTabsComponent = (TabComponent, TabItemComponent, displayName, renderCh
     const [selected, setSelected] = useState11((_b = (_a = value != null ? value : defaultValue) != null ? _a : firstTabValue) != null ? _b : 0);
     const [leftCaret, showLeftCaret] = useState11(false);
     const [rightCaret, showRightCaret] = useState11(false);
-    const parentRef = useRef9(null);
-    const containerRef = useRef9(null);
-    const tabsRef = useRef9(null);
+    const parentRef = useRef10(null);
+    const containerRef = useRef10(null);
+    const tabsRef = useRef10(null);
     const revealSelectedTab = ({ smooth }) => {
       var _a2, _b2;
       const container = containerRef.current;
@@ -13077,7 +13101,7 @@ var DrawerTabs = createTabsComponent(ModalTab, TabItem, "DrawerTabs", (children,
 import React82 from "react";
 
 // src/molecules/Popover/Popover.tsx
-import React81, { useRef as useRef10 } from "react";
+import React81, { useRef as useRef11 } from "react";
 import { PressResponder as PressResponder2, usePress as usePress2 } from "@react-aria/interactions";
 import { useOverlayTrigger } from "@react-aria/overlays";
 import { mergeProps as mergeProps3 } from "@react-aria/utils";
@@ -13122,7 +13146,7 @@ var Popover2 = (props) => {
     crossOffset,
     shouldFlip
   } = props;
-  const triggerRef = useRef10(null);
+  const triggerRef = useRef11(null);
   const state = useOverlayTriggerState4(props);
   const { triggerProps, overlayProps } = useOverlayTrigger({ type: type != null ? type : "dialog" }, state, triggerRef);
   return /* @__PURE__ */ React81.createElement(PopoverContext.Provider, {
@@ -13182,7 +13206,7 @@ Popover2.Button = PopoverButton;
 var PopoverTriggerWrapper = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
   var _a2;
-  const ref = useRef10(null);
+  const ref = useRef11(null);
   const trigger = React81.Children.only(children);
   const { pressProps } = usePress2(__spreadProps(__spreadValues({}, rest), { ref }));
   return React81.cloneElement(trigger, __spreadProps(__spreadValues({
@@ -13655,7 +13679,7 @@ var ModalTabs = createTabsComponent(
 );
 
 // src/molecules/MultiInput/MultiInput.tsx
-import React93, { useEffect as useEffect9, useRef as useRef11, useState as useState12 } from "react";
+import React93, { useEffect as useEffect9, useRef as useRef12, useState as useState12 } from "react";
 import { useId as useId12 } from "@react-aria/utils";
 import castArray5 from "lodash/castArray";
 import identity from "lodash/identity";
@@ -13752,7 +13776,7 @@ var MultiInputBase = (_a) => {
     "valid"
   ]);
   var _a2;
-  const inputRef = useRef11(null);
+  const inputRef = useRef12(null);
   const [items, setItems] = useState12((_a2 = value != null ? value : defaultValue) != null ? _a2 : []);
   const [hasFocus, setFocus] = useState12(false);
   const keyCodes = [delimiter !== "enter" ? " " : null, delimiter !== "space" ? "Enter" : null].filter(identity);
@@ -13917,7 +13941,7 @@ MultiInput.Skeleton = MultiInputSkeleton;
 MultiInput.Skeleton.displayName = "MultiInput.Skeleton";
 
 // src/molecules/MultiSelect/MultiSelect.tsx
-import React94, { useEffect as useEffect10, useRef as useRef12, useState as useState13 } from "react";
+import React94, { useEffect as useEffect10, useRef as useRef13, useState as useState13 } from "react";
 import { ariaHideOutside as ariaHideOutside2 } from "@react-aria/overlays";
 import { useId as useId13 } from "@react-aria/utils";
 import { useCombobox as useCombobox2, useMultipleSelection } from "downshift";
@@ -13983,10 +14007,10 @@ var MultiSelectBase = (_a) => {
     "children"
   ]);
   var _a2;
-  const popoverRef = useRef12(null);
-  const targetRef = useRef12(null);
-  const menuRef = useRef12(null);
-  const inputRef = useRef12(null);
+  const popoverRef = useRef13(null);
+  const targetRef = useRef13(null);
+  const menuRef = useRef13(null);
+  const inputRef = useRef13(null);
   const [inputValue, setInputValue] = useState13("");
   const [hasFocus, setFocus] = useState13(false);
   const { selectedItems, addSelectedItem, removeSelectedItem, getDropdownProps, getSelectedItemProps } = useMultipleSelection(
@@ -14786,7 +14810,8 @@ RadioButtonGroup.Skeleton = RadioButtonGroupSkeleton;
 RadioButtonGroup.Skeleton.displayName = "RadioButtonGroup.Skeleton";
 
 // src/molecules/Section/Section.tsx
-import React110 from "react";
+import React110, { useRef as useRef14 } from "react";
+import { useButton as useButton4 } from "@react-aria/button";
 import { useId as useId16 } from "@react-aria/utils";
 import { animated as animated6, useSpring as useSpring5 } from "@react-spring/web";
 import castArray7 from "lodash/castArray";
@@ -14937,20 +14962,27 @@ Section3.Header = (_a) => {
   var _b = _a, { children, className, expanded } = _b, rest = __objRest(_b, ["children", "className", "expanded"]);
   return /* @__PURE__ */ React109.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
-      tw("px-6 flex gap-5 justify-between items-center h-[72px]", { "bg-muted": expanded }),
-      className
-    )
-  }), children);
-};
-Section3.TitleContainer = (_a) => {
-  var _b = _a, { children, className, collapsible } = _b, rest = __objRest(_b, ["children", "className", "collapsible"]);
-  return /* @__PURE__ */ React109.createElement("div", __spreadProps(__spreadValues({}, rest), {
-    className: classNames(
-      tw("grow grid grid-cols-[auto_1fr] gap-x-3 items-center", { "cursor-pointer": collapsible }),
+      tw("px-6 flex gap-5 justify-between items-center h-[72px]", {
+        "bg-muted": expanded
+      }),
       className
     )
   }), children);
 };
+Section3.TitleContainer = React109.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { children, className, collapsible } = _b, rest = __objRest(_b, ["children", "className", "collapsible"]);
+    return /* @__PURE__ */ React109.createElement("div", __spreadProps(__spreadValues({}, rest), {
+      ref,
+      className: classNames(
+        tw("grow grid grid-cols-[auto_1fr] gap-x-3 items-center", {
+          "cursor-pointer focus:outline-none focusable": collapsible
+        }),
+        className
+      )
+    }), children);
+  }
+);
 Section3.Toggle = (props) => /* @__PURE__ */ React109.createElement(Icon, __spreadProps(__spreadValues({}, props), {
   icon: import_caretUp2.default,
   height: 22,
@@ -14996,6 +15028,7 @@ var Section4 = (props) => {
   const _defaultCollapsed = title ? (_b = props.defaultCollapsed) != null ? _b : false : false;
   const [isCollapsed, setCollapsed] = React110.useState(_collapsed != null ? _collapsed : _defaultCollapsed);
   const [ref, { height }] = useMeasure();
+  const toggleAreaRef = useRef14(null);
   const menu = title ? (_c = props.menu) != null ? _c : void 0 : void 0;
   const menuAriaLabel = title ? (_e = (_d = props.menuAriaLabel) != null ? _d : props.menuLabel) != null ? _e : "Context menu" : void 0;
   const onAction = title ? props.onAction : void 0;
@@ -15029,19 +15062,25 @@ var Section4 = (props) => {
   const regionId = useId16();
   const titleId = useId16();
   const hasTabs = isComponentType(children, Tabs);
+  const { buttonProps } = useButton4(
+    { "elementType": "div", "onPress": handleTitleClick, "aria-expanded": !isCollapsed, "aria-controls": regionId },
+    toggleAreaRef
+  );
   return /* @__PURE__ */ React110.createElement(Section3, {
     "aria-label": title,
     className: "Aquarium-Section"
   }, title && /* @__PURE__ */ React110.createElement(React110.Fragment, null, /* @__PURE__ */ React110.createElement(Section3.Header, {
     expanded: _collapsible && !isCollapsed
-  }, /* @__PURE__ */ React110.createElement(Section3.TitleContainer, {
-    role: _collapsible ? "button" : void 0,
+  }, /* @__PURE__ */ React110.createElement(Section3.TitleContainer, __spreadProps(__spreadValues({}, _collapsible ? __spreadProps(__spreadValues({}, buttonProps), {
+    onPointerDown: (e) => {
+      e.preventDefault();
+      handleTitleClick();
+    }
+  }) : { onClick: handleTitleClick }), {
+    ref: _collapsible ? toggleAreaRef : void 0,
     id: toggleId,
-    collapsible: _collapsible,
-    onClick: handleTitleClick,
-    "aria-expanded": _collapsible ? !isCollapsed : void 0,
-    "aria-controls": _collapsible ? regionId : void 0
-  }, _collapsible && /* @__PURE__ */ React110.createElement(animated6.div, {
+    collapsible: _collapsible
+  }), _collapsible && /* @__PURE__ */ React110.createElement(animated6.div, {
     style: { transform }
   }, /* @__PURE__ */ React110.createElement(Section3.Toggle, null)), /* @__PURE__ */ React110.createElement(Section3.Title, {
     id: titleId
@@ -15064,7 +15103,7 @@ var Section4 = (props) => {
     icon: import_more6.default
   })), menu)), props.actions && castArray7(props.actions).filter(Boolean).map((action) => renderAction({ kind: "secondary", action })), props.switch && /* @__PURE__ */ React110.createElement(Switch2, __spreadValues({}, props.switch)), props.select && /* @__PURE__ */ React110.createElement(SelectBase, __spreadValues({
     "aria-labelledby": titleId
-  }, props.select)))), !hasTabs && /* @__PURE__ */ React110.createElement(animated6.div, {
+  }, props.select)))), !hasTabs && !isCollapsed && /* @__PURE__ */ React110.createElement(animated6.div, {
     className: tw(`h-[1px]`),
     style: { backgroundColor }
   })), /* @__PURE__ */ React110.createElement(animated6.div, {
@@ -15088,8 +15127,8 @@ var SegmentedControl = (_a) => {
   var _b = _a, {
     children,
     value,
-    dense = false,
-    variant = "filled",
+    dense: _dense = false,
+    variant: _variant = "filled",
     selected = false,
     className
   } = _b, rest = __objRest(_b, [
@@ -15103,12 +15142,7 @@ var SegmentedControl = (_a) => {
   return /* @__PURE__ */ React111.createElement("li", null, /* @__PURE__ */ React111.createElement("button", __spreadProps(__spreadValues({
     type: "button"
   }, rest), {
-    className: classNames(
-      getCommonClassNames(dense, selected),
-      !rest.disabled && getHoverClassNames(variant),
-      selected && getSelectedClassNames(variant),
-      className
-    ),
+    className: classNames(getBaseSegmentedControlClassNames(selected), className),
     "aria-pressed": selected
   }), children));
 };
@@ -15116,8 +15150,8 @@ var SegmentedControlGroup = (_a) => {
   var _b = _a, {
     value,
     onChange,
-    variant = "filled",
-    dense = false,
+    variant: _variant = "filled",
+    dense: _dense = false,
     children,
     className,
     ariaLabel
@@ -15130,49 +15164,28 @@ var SegmentedControlGroup = (_a) => {
     "className",
     "ariaLabel"
   ]);
-  const classes2 = tw("rounded flex", {
-    "border border-default text-muted": variant === "outlined",
-    "bg-muted": variant === "raised"
-  });
   return /* @__PURE__ */ React111.createElement("ul", __spreadProps(__spreadValues({}, rest), {
     "aria-label": ariaLabel,
-    className: classNames("Aquarium-SegmentedControl", classes2, className)
+    className: classNames(
+      "Aquarium-SegmentedControl",
+      "flex border border-default rounded-sm divide-x divide-grey-20",
+      className
+    )
   }), React111.Children.map(
     children,
     (child) => React111.cloneElement(child, {
-      dense,
-      variant,
       onClick: () => onChange(child.props.value),
       selected: child.props.value === value
     })
   ));
 };
-var getHoverClassNames = (variant) => tw(
-  "hover:text-intense",
-  {
-    "hover:bg-muted": variant !== "raised",
-    "hover:bg-default": variant === "raised"
-  },
-  {
-    "active:bg-default": variant !== "raised",
-    "active:bg-intense": variant === "raised"
-  }
-);
-var getSelectedClassNames = (variant) => tw("relative z-40 text-intense", {
-  "bg-white ring-2 ring-offset-0 ring-grey-30 focus:ring-2": variant === "outlined",
-  "bg-white shadow-2dp": variant === "raised",
-  "bg-default": variant === "filled"
-});
-var getCommonClassNames = (dense, selected) => tw(
-  "transition whitespace-nowrap rounded mr-1",
-  "focus:outline-none focus:ring-1 focus:ring-offset-0 focus:ring-grey-60",
-  "disabled:cursor-not-allowed disabled:text-inactive",
+var getBaseSegmentedControlClassNames = (selected) => tw(
+  "transition whitespace-nowrap rounded-sm px-4 py-[10px] hover:bg-primary-hover",
+  "focus-visible:outline-none focus-visible:relative focus-visible:z-50 focus-visible:ring-1 focus-visible:ring-offset-0 focusable",
+  "disabled:cursor-not-allowed disabled:text-inactive disabled:bg-muted",
   {
-    "py-4 px-5": !dense,
-    "py-2 px-4": dense,
-    "typography-default-strong": !dense,
-    "typography-small-strong": dense,
-    "text-muted": !selected
+    "typography-small text-default bg-body": !selected,
+    "typography-small-strong text-primary-intense relative z-40 ring-1 ring-offset-0 ring-primary-80": selected
   }
 );