@aivenio/aquarium 1.69.0 → 1.71.0

package/dist/styles.css

@@ -500,6 +500,7 @@ img,video {
   --aquarium-background-color-status-warning: var(--aquarium-colors-warning-5);
   --aquarium-background-color-status-danger: var(--aquarium-colors-error-5);
   --aquarium-background-color-status-success: var(--aquarium-colors-success-5);
+  --aquarium-background-color-icon-button-hover: rgba(25,25,29,.05);
   --aquarium-border-color-muted: var(--aquarium-colors-grey-5);
   --aquarium-border-color-default: var(--aquarium-colors-grey-20);
   --aquarium-border-color-intense: var(--aquarium-colors-grey-50);
@@ -1229,9 +1230,6 @@ input[type='number'].no-arrows {
 .ml-3{
   margin-left: 8px;
 }
-.mr-1{
-  margin-right: 2px;
-}
 .mb-\[-2px\]{
   margin-bottom: -2px;
 }
@@ -1672,6 +1670,15 @@ input[type='number'].no-arrows {
   -moz-column-gap: 24px;
        column-gap: 24px;
 }
+.divide-x>:not([hidden])~:not([hidden]){
+  --tw-divide-x-reverse: 0;
+  border-right-width: calc(1px * var(--tw-divide-x-reverse));
+  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
+}
+.divide-grey-20>:not([hidden])~:not([hidden]){
+  border-color: #d2d2d6;
+  border-color: var(--aquarium-colors-grey-20, #d2d2d6);
+}
 .self-start{
   align-self: flex-start;
 }
@@ -2074,6 +2081,10 @@ input[type='number'].no-arrows {
   padding-left: 0;
   padding-right: 0;
 }
+.py-\[10px\]{
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
 .pt-3{
   padding-top: 8px;
 }
@@ -2625,12 +2636,6 @@ input[type='number'].no-arrows {
   box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
 }
-.shadow-2dp{
-  --tw-shadow: var(--aquarium-box-shadow-2dp, 0px 2px 4px rgba(90, 91, 106, 0.24), 0px 1px 2px rgba(58, 58, 68, 0.24));
-  --tw-shadow-colored: 0px 2px 4px 0px var(--tw-shadow-color);
-  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
-}
 .outline-none{
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -2647,12 +2652,6 @@ input[type='number'].no-arrows {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
 }
-.ring-2{
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
-}
 .ring{
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -2665,9 +2664,6 @@ input[type='number'].no-arrows {
 .ring-primary-80{
   --tw-ring-color: var(--aquarium-colors-primary-80, #3545be);
 }
-.ring-grey-30{
-  --tw-ring-color: var(--aquarium-colors-grey-30, #b4b4bb);
-}
 .ring-offset-0{
   --tw-ring-offset-width: 0px;
 }
@@ -2854,6 +2850,9 @@ input[type='number'].no-arrows {
   background-color: #222f95;
   background-color: var(--aquarium-background-color-primary-intense);
 }
+.hover\:bg-icon-button-hover:hover{
+  background-color: rgba(25,25,29,.05);
+}
 .hover\:bg-danger-muted:hover{
   background-color: #ffcbd2;
   background-color: var(--aquarium-background-color-danger-muted);
@@ -2915,23 +2914,17 @@ input[type='number'].no-arrows {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
 }
-.focus\:ring-2:focus{
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
+.focus-visible\:relative.focus-visible{
+  position: relative;
 }
-.focus\:ring-1:focus{
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
+.focus-visible\:relative:focus-visible{
+  position: relative;
 }
-.focus\:ring-grey-60:focus{
-  --tw-ring-color: var(--aquarium-colors-grey-60, #5a5b6a);
+.focus-visible\:z-50.focus-visible{
+  z-index: 50;
 }
-.focus\:ring-offset-0:focus{
-  --tw-ring-offset-width: 0px;
+.focus-visible\:z-50:focus-visible{
+  z-index: 50;
 }
 .focus-visible\:border-info-default.focus-visible{
   border-color: #0399e3;
@@ -2973,6 +2966,14 @@ input[type='number'].no-arrows {
   color: #292a31;
   color: var(--aquarium-text-color-intense);
 }
+.focus-visible\:outline-none.focus-visible{
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+.focus-visible\:outline-none:focus-visible{
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
 .focus-visible\:outline-0.focus-visible{
   outline-width: 0px;
 }
@@ -3027,6 +3028,12 @@ input[type='number'].no-arrows {
 .focus-visible\:ring-info-70:focus-visible{
   --tw-ring-color: var(--aquarium-colors-info-70, #0399e3);
 }
+.focus-visible\:ring-offset-0.focus-visible{
+  --tw-ring-offset-width: 0px;
+}
+.focus-visible\:ring-offset-0:focus-visible{
+  --tw-ring-offset-width: 0px;
+}
 .active\:bg-body:active{
   background-color: white;
   background-color: var(--aquarium-background-color-body);
@@ -3043,14 +3050,6 @@ input[type='number'].no-arrows {
   background-color: transparent;
   background-color: var(--aquarium-colors-transparent, transparent);
 }
-.active\:bg-default:active{
-  background-color: #ededf0;
-  background-color: var(--aquarium-background-color-default);
-}
-.active\:bg-intense:active{
-  background-color: #d2d2d6;
-  background-color: var(--aquarium-background-color-intense);
-}
 .active\:text-primary-active:active{
   color: #222f95;
   color: var(--aquarium-text-color-primary-active);
@@ -3099,6 +3098,10 @@ input[type='number'].no-arrows {
   background-color: transparent;
   background-color: var(--aquarium-colors-transparent, transparent);
 }
+.disabled\:bg-muted:disabled{
+  background-color: #f7f7fa;
+  background-color: var(--aquarium-background-color-muted);
+}
 .disabled\:text-inactive:disabled{
   color: #9696a0;
   color: var(--aquarium-text-color-inactive);
@@ -3120,6 +3123,9 @@ input[type='number'].no-arrows {
   background-color: #f7f7fa;
   background-color: var(--aquarium-background-color-muted);
 }
+.group:hover .group-hover\:opacity-100{
+  opacity: 1;
+}
 .peer\/switch:checked~.peer-checked\/switch\:left-1{
   left: 2px;
 }

package/dist/system.cjs

@@ -4514,6 +4514,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) {
@@ -5078,7 +5094,7 @@ var InputContainer = import_react3.default.forwardRef(
       ref,
       className: classNames(
         className,
-        "relative rounded-sm typography-default-strong w-full flex flex-row items-center focus-visible:outline-0 focus-visible:border-info-default",
+        "relative rounded-sm typography-default-strong w-full flex flex-row items-center focus-visible:outline-0 focus-visible:border-info-default group",
         {
           "border px-3 py-[6px]": variant !== "readOnly",
           "cursor-default": variant === "readOnly",
@@ -5622,7 +5638,8 @@ var tailwind_theme_default = {
     "status-info": "var(--aquarium-background-color-status-info)",
     "status-warning": "var(--aquarium-background-color-status-warning)",
     "status-danger": "var(--aquarium-background-color-status-danger)",
-    "status-success": "var(--aquarium-background-color-status-success)"
+    "status-success": "var(--aquarium-background-color-status-success)",
+    "icon-button-hover": "rgba(25,25,29,.05)"
   },
   textColor: {
     "error-100": "var(--aquarium-colors-error-100, #aa0000)",
@@ -6581,6 +6598,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());
@@ -7332,7 +7350,7 @@ var asButton = (Component, isDropdownButton) => {
           tw(
             "inline-block border-0 rounded-sm transition whitespace-nowrap focus:outline-none relative text-center",
             {
-              "text-default p-2 active:text-default active:bg-transparent hover:text-intense hover:bg-muted focus-visible:text-intense focus-visible:bg-muted disabled:text-inactive disabled:bg-transparent": isIconOnlyButton,
+              "text-default p-2 active:text-default active:bg-transparent hover:text-intense hover:bg-icon-button-hover focus-visible:text-intense focus-visible:bg-muted disabled:text-inactive disabled:bg-transparent": isIconOnlyButton,
               "typography-default-strong": !dense && !isIconOnlyButton && kind !== "text",
               "typography-small-strong": dense && !isIconOnlyButton && kind !== "text",
               "py-3 px-4": !dense && isButton,
@@ -9765,6 +9783,7 @@ var Wrapper = import_react55.default.forwardRef(
 );
 
 // src/molecules/Combobox/Combobox.tsx
+var import_smallCross2 = __toESM(require_smallCross());
 var ComboboxBase = (_a) => {
   var _b = _a, {
     id,
@@ -9837,7 +9856,8 @@ var ComboboxBase = (_a) => {
     highlightedIndex,
     inputValue,
     getItemProps,
-    selectedItem
+    selectedItem,
+    selectItem
   } = (0, import_downshift.useCombobox)({
     id,
     selectedItem: value,
@@ -9910,10 +9930,25 @@ var ComboboxBase = (_a) => {
       (_a3 = inputProps.onKeyDown) == null ? void 0 : _a3.call(inputProps, e);
     },
     onKeyUp: (e) => e.stopPropagation()
-  })), !readOnly && /* @__PURE__ */ import_react56.default.createElement(Select.Toggle, __spreadValues({
+  })), !readOnly && /* @__PURE__ */ import_react56.default.createElement(Box.Flex, {
+    alignItems: "center",
+    gap: "2"
+  }, !!inputProps.value && !disabled && /* @__PURE__ */ import_react56.default.createElement("div", {
+    className: tw("group-hover:opacity-100", {
+      "opacity-0": !hasFocus,
+      "opacity-100": hasFocus
+    })
+  }, /* @__PURE__ */ import_react56.default.createElement(Button.Icon, {
+    icon: import_smallCross2.default,
+    onClick: () => selectItem(null),
+    onFocus: () => setFocus(true),
+    onBlur: () => setFocus(false),
+    "aria-label": "Clear selection",
+    dense: true
+  })), /* @__PURE__ */ import_react56.default.createElement(Select.Toggle, __spreadValues({
     hasFocus,
     isOpen
-  }, getToggleButtonProps({ disabled })))), isOpen && /* @__PURE__ */ import_react56.default.createElement(PopoverOverlay, {
+  }, getToggleButtonProps({ disabled }))))), isOpen && /* @__PURE__ */ import_react56.default.createElement(PopoverOverlay, {
     ref: popoverRef,
     triggerRef: targetRef,
     state,
@@ -9999,6 +10034,7 @@ var import_isFunction3 = __toESM(require("lodash/isFunction"));
 // src/molecules/Accordion/Accordion.tsx
 var import_react60 = __toESM(require("react"));
 var import_react61 = require("@iconify/react");
+var import_button3 = require("@react-aria/button");
 var import_utils8 = require("@react-aria/utils");
 var import_web3 = require("@react-spring/web");
 var import_isUndefined8 = __toESM(require("lodash/isUndefined"));
@@ -10098,6 +10134,7 @@ var Accordion = ({ children, openPanelId: panelId }) => {
 };
 var AccordionToggle = (_a) => {
   var _b = _a, { panelId, onChange } = _b, rest = __objRest(_b, ["panelId", "onChange"]);
+  const ref = (0, import_react60.useRef)(null);
   const id = usePanelContext(panelId);
   const [openPanelId, setOpenPanelId] = useAccordionContext();
   const isOpen = openPanelId === id;
@@ -10110,14 +10147,19 @@ var AccordionToggle = (_a) => {
       duration: 150
     }
   });
-  return /* @__PURE__ */ import_react60.default.createElement(import_web3.animated.div, __spreadProps(__spreadValues({}, rest), {
-    role: "button",
-    tabIndex: 0,
+  const { buttonProps } = (0, import_button3.useButton)({ elementType: "div", onPress: handleClick }, ref);
+  return /* @__PURE__ */ import_react60.default.createElement(import_web3.animated.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__ */ import_react60.default.createElement(import_react61.Icon, {
     icon: import_caretUp.default,
     height: 22,
@@ -12072,7 +12114,7 @@ var DataList2 = (_a) => {
     getRowCheckboxLabel = getDefaultRowCheckboxLabel,
     getGroupCheckboxLabel = getDefaultGroupCheckboxLabel,
     selectedRows,
-    defaultSelectedRows,
+    defaultSelectedRows = [],
     onSelectionChange,
     toolbar
   } = _b, rest = __objRest(_b, [
@@ -12151,7 +12193,9 @@ var DataList2 = (_a) => {
   const allRows = flattenRows(rows);
   const totalSelected = (_b2 = selected == null ? void 0 : selected.length) != null ? _b2 : 0;
   const allEnabledRowIds = (0, import_compact.default)(
-    allRows.map((row, index) => (disabled == null ? void 0 : disabled(row, index, sortedRows)) ? void 0 : row.id)
+    allRows.map(
+      (row, index) => (disabled == null ? void 0 : disabled(row, index, sortedRows)) || (selectionDisabled == null ? void 0 : selectionDisabled(row, index, sortedRows)) ? void 0 : row.id
+    )
   );
   const allRowsSelected = totalSelected >= allEnabledRowIds.length;
   return /* @__PURE__ */ import_react80.default.createElement(DataListContext.Provider, {
@@ -13791,7 +13835,7 @@ var import_omit12 = __toESM(require("lodash/omit"));
 
 // src/molecules/MultiInput/InputChip.tsx
 var import_react101 = __toESM(require("react"));
-var import_smallCross2 = __toESM(require_smallCross());
+var import_smallCross3 = __toESM(require_smallCross());
 var InputChip = import_react101.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { invalid = false, disabled, readOnly, className, onClick: _onClick, children } = _b, props = __objRest(_b, ["invalid", "disabled", "readOnly", "className", "onClick", "children"]);
@@ -13823,7 +13867,7 @@ var InputChip = import_react101.default.forwardRef(
       role: "button",
       "aria-label": `Remove ${String(children)}`
     }), !disabled && /* @__PURE__ */ import_react101.default.createElement(Icon, {
-      icon: import_smallCross2.default,
+      icon: import_smallCross3.default,
       className: tw({
         "text-danger-default": invalid,
         "text-default": !invalid
@@ -14915,6 +14959,7 @@ RadioButtonGroup.Skeleton.displayName = "RadioButtonGroup.Skeleton";
 
 // src/molecules/Section/Section.tsx
 var import_react119 = __toESM(require("react"));
+var import_button4 = require("@react-aria/button");
 var import_utils31 = require("@react-aria/utils");
 var import_web6 = require("@react-spring/web");
 var import_castArray7 = __toESM(require("lodash/castArray"));
@@ -15065,20 +15110,27 @@ Section3.Header = (_a) => {
   var _b = _a, { children, className, expanded } = _b, rest = __objRest(_b, ["children", "className", "expanded"]);
   return /* @__PURE__ */ import_react118.default.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__ */ import_react118.default.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 = import_react118.default.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { children, className, collapsible } = _b, rest = __objRest(_b, ["children", "className", "collapsible"]);
+    return /* @__PURE__ */ import_react118.default.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__ */ import_react118.default.createElement(Icon, __spreadProps(__spreadValues({}, props), {
   icon: import_caretUp2.default,
   height: 22,
@@ -15124,6 +15176,7 @@ var Section4 = (props) => {
   const _defaultCollapsed = title ? (_b = props.defaultCollapsed) != null ? _b : false : false;
   const [isCollapsed, setCollapsed] = import_react119.default.useState(_collapsed != null ? _collapsed : _defaultCollapsed);
   const [ref, { height }] = useMeasure();
+  const toggleAreaRef = (0, import_react119.useRef)(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;
@@ -15157,19 +15210,25 @@ var Section4 = (props) => {
   const regionId = (0, import_utils31.useId)();
   const titleId = (0, import_utils31.useId)();
   const hasTabs = isComponentType(children, Tabs);
+  const { buttonProps } = (0, import_button4.useButton)(
+    { "elementType": "div", "onPress": handleTitleClick, "aria-expanded": !isCollapsed, "aria-controls": regionId },
+    toggleAreaRef
+  );
   return /* @__PURE__ */ import_react119.default.createElement(Section3, {
     "aria-label": title,
     className: "Aquarium-Section"
   }, title && /* @__PURE__ */ import_react119.default.createElement(import_react119.default.Fragment, null, /* @__PURE__ */ import_react119.default.createElement(Section3.Header, {
     expanded: _collapsible && !isCollapsed
-  }, /* @__PURE__ */ import_react119.default.createElement(Section3.TitleContainer, {
-    role: _collapsible ? "button" : void 0,
+  }, /* @__PURE__ */ import_react119.default.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__ */ import_react119.default.createElement(import_web6.animated.div, {
+    collapsible: _collapsible
+  }), _collapsible && /* @__PURE__ */ import_react119.default.createElement(import_web6.animated.div, {
     style: { transform }
   }, /* @__PURE__ */ import_react119.default.createElement(Section3.Toggle, null)), /* @__PURE__ */ import_react119.default.createElement(Section3.Title, {
     id: titleId
@@ -15192,7 +15251,7 @@ var Section4 = (props) => {
     icon: import_more6.default
   })), menu)), props.actions && (0, import_castArray7.default)(props.actions).filter(Boolean).map((action) => renderAction({ kind: "secondary", action })), props.switch && /* @__PURE__ */ import_react119.default.createElement(Switch2, __spreadValues({}, props.switch)), props.select && /* @__PURE__ */ import_react119.default.createElement(SelectBase, __spreadValues({
     "aria-labelledby": titleId
-  }, props.select)))), !hasTabs && /* @__PURE__ */ import_react119.default.createElement(import_web6.animated.div, {
+  }, props.select)))), !hasTabs && !isCollapsed && /* @__PURE__ */ import_react119.default.createElement(import_web6.animated.div, {
     className: tw(`h-[1px]`),
     style: { backgroundColor }
   })), /* @__PURE__ */ import_react119.default.createElement(import_web6.animated.div, {
@@ -15216,8 +15275,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, [
@@ -15231,12 +15290,7 @@ var SegmentedControl = (_a) => {
   return /* @__PURE__ */ import_react120.default.createElement("li", null, /* @__PURE__ */ import_react120.default.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));
 };
@@ -15244,8 +15298,8 @@ var SegmentedControlGroup = (_a) => {
   var _b = _a, {
     value,
     onChange,
-    variant = "filled",
-    dense = false,
+    variant: _variant = "filled",
+    dense: _dense = false,
     children,
     className,
     ariaLabel
@@ -15258,49 +15312,28 @@ var SegmentedControlGroup = (_a) => {
     "className",
     "ariaLabel"
   ]);
-  const classes2 = tw("rounded flex", {
-    "border border-default text-muted": variant === "outlined",
-    "bg-muted": variant === "raised"
-  });
   return /* @__PURE__ */ import_react120.default.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
+    )
   }), import_react120.default.Children.map(
     children,
     (child) => import_react120.default.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
   }
 );