@aivenio/aquarium 1.76.1 → 1.76.3

package/dist/system.cjs

@@ -4582,7 +4582,7 @@ var Menu = import_react3.default.forwardRef(
     return /* @__PURE__ */ import_react3.default.createElement("ul", __spreadValues({
       ref,
       style: { maxHeight },
-      className: classNames(className, tw("text-default"))
+      className: classNames(className, tw("text-default bg-body"))
     }, props), children);
   }
 );
@@ -7022,8 +7022,8 @@ var Arrow = (props) => {
 var getCommonInputStyles = ({ readOnly, valid }) => tw(
   "block w-full rounded-sm disabled:cursor-not-allowed disabled:border-default disabled:bg-default typography-small text-default disabled:text-inactive placeholder:text-inactive focus:outline-none",
   {
-    "px-3 py-3": !readOnly,
-    "border-none resize-none cursor-default": readOnly,
+    "px-3 py-3 bg-body": !readOnly,
+    "border-none resize-none cursor-default bg-transparent": readOnly,
     "border border-danger-default": !valid && !readOnly,
     "border border-default hover:border-intense focus:border-info-default": valid && !readOnly
   }
@@ -7044,14 +7044,14 @@ var import_chevronDown3 = __toESM(require_chevronDown());
 var import_loading2 = __toESM(require_loading());
 var COLOR_CLASSNAMES = {
   "primary": tw(
-    "text-white bg-primary-default active:bg-primary-intense active:ring-0 focus-visible:ring-2 focus-visible:ring-primary-100 focus-visible:ring-inset hover:bg-primary-intense disabled:bg-primary-muted"
+    "text-white bg-primary-default active:bg-primary-intense active:ring-0 focus-visible:ring-2 focus-visible:ring-primary-intense focus-visible:ring-inset hover:bg-primary-intense disabled:bg-primary-muted"
   ),
   "secondary": tw(
-    "text-primary-intense bg-body ring-1 ring-primary-80 ring-inset",
-    "active:bg-primary-active active:ring-primary-90 active:text-primary-intense",
-    "focus-visible:ring-2 focus-visible:ring-primary-90 focus-visible:text-primary-intense",
-    "hover:bg-primary-hover hover:ring-primary-90 hover:text-primary-intense",
-    "disabled:bg-body disabled:text-primary-inactive disabled:ring-primary-40"
+    "text-primary-intense bg-transparent ring-1 ring-primary-default ring-inset",
+    "active:bg-primary-active active:ring-primary-default active:text-primary-intense",
+    "focus-visible:ring-2 focus-visible:ring-primary-default focus-visible:text-primary-intense",
+    "hover:bg-primary-hover hover:ring-primary-default hover:text-primary-intense",
+    "disabled:bg-body disabled:text-primary-inactive disabled:ring-primary-muted"
   ),
   "ghost": ghostButtonStyle,
   "text": linkStyle,
@@ -8182,8 +8182,8 @@ Banner.Dismiss = (_a) => {
 };
 Banner.Dismiss.displayName = "Alert.Banner.Dismiss";
 var ILLUSTRATION_COLORS = {
-  information: { stroke: tw("stroke-primary-60"), fill: tw("fill-primary-10") },
-  success: { stroke: tw("stroke-success-40"), fill: tw("fill-success-10") },
+  information: { stroke: tw("stroke-primary-muted"), fill: tw("fill-primary-10") },
+  success: { stroke: tw("stroke-success-default"), fill: tw("fill-success-10") },
   warning: { stroke: tw("stroke-warning-100"), fill: tw("fill-warning-20") },
   error: { stroke: tw("stroke-error-100"), fill: tw("fill-error-10") }
 };
@@ -8950,7 +8950,7 @@ var Checkbox = import_react39.default.forwardRef(
       name
     }, props), {
       className: classNames(
-        tw("peer appearance-none outline-none w-5 h-5", "rounded-sm border border-transparent", {
+        tw("peer appearance-none outline-none w-5 h-5 rounded-sm border border-transparent", {
           "cursor-pointer checked:bg-primary-default": !disabled,
           "cursor-not-allowed bg-muted checked:bg-primary-muted": disabled
         })
@@ -8968,7 +8968,7 @@ var Checkbox = import_react39.default.forwardRef(
           "rounded-sm border border-default peer-focus:border-info-default"
         ),
         {
-          "peer-hover:border-intense peer-checked:text-white peer-checked:[&>path]:stroke-white peer-checked:border-primary-default": !disabled,
+          "border-default peer-hover:border-intense peer-checked:text-white peer-checked:[&>path]:stroke-white peer-checked:border-primary-default": !disabled,
           "border-muted peer-checked:text-primary-default peer-checked:[&>path]:stroke-primary-70 peer-checked:border-transparent": disabled
         }
       )
@@ -9471,7 +9471,7 @@ var Carousel = ({
     tabIndex: 0,
     onScroll: handleScroll,
     className: tw(
-      "grid items-stretch grid-flow-col overflow-x-scroll scroll-smooth snap-x snap-mandatory scrollbar-hide focus-visible:outline-0 focus-visible:ring-1 focus-visible:ring-info-70"
+      "grid items-stretch grid-flow-col overflow-x-scroll scroll-smooth snap-x snap-mandatory scrollbar-hide focus-visible:outline-0 focus-visible:ring-1 focus-visible:ring-info-default"
     ),
     style: { width }
   }, width !== 0 && import_react47.default.Children.map(children, (child, index) => /* @__PURE__ */ import_react47.default.createElement(CarouselItem, {
@@ -10525,8 +10525,6 @@ var createInput = (displayName, opts = {}) => {
         readOnly,
         className: classNames(
           {
-            "bg-body": !readOnly,
-            "bg-transparent": readOnly,
             "[&::-webkit-search-cancel-button]:appearance-none": opts.isSearch,
             "pl-7": opts.adornment,
             "pr-7": opts.canReset || endAdornment
@@ -11517,10 +11515,13 @@ function isOnSortChangedDirection(value) {
 
 // src/utils/table/useTableSort.tsx
 var import_react72 = __toESM(require("react"));
-var getDefaultSort = (props) => "defaultSort" in props ? props.defaultSort : "column" in props && "direction" in props && Object.keys(props).length === 2 ? { column: props.column, direction: props.direction } : void 0;
-var useTableSort = (props) => {
-  const onSortChanged = props && "onSortChanged" in props ? props.onSortChanged : void 0;
-  const [sort, setSort] = import_react72.default.useState(props && getDefaultSort(props));
+var useTableSort = ({
+  column,
+  direction,
+  onSortChanged
+} = {}) => {
+  const defaultSort = column ? { column, direction } : void 0;
+  const [sort, setSort] = import_react72.default.useState(defaultSort);
   const setSortAndEmitOnSortChangedEvent = (sort2) => {
     setSort(sort2);
     if (onSortChanged) {
@@ -11531,15 +11532,15 @@ var useTableSort = (props) => {
       }
     }
   };
-  const handleSortClick = (column) => {
-    if (sort && sort.column.headerName === column.headerName) {
+  const handleSortClick = (column2) => {
+    if (sort && sort.column.headerName === column2.headerName) {
       if (sort.direction === "ascending") {
-        setSortAndEmitOnSortChangedEvent({ column, direction: "descending" });
+        setSortAndEmitOnSortChangedEvent({ column: column2, direction: "descending" });
       } else {
         setSortAndEmitOnSortChangedEvent(void 0);
       }
     } else {
-      setSortAndEmitOnSortChangedEvent({ column, direction: "ascending" });
+      setSortAndEmitOnSortChangedEvent({ column: column2, direction: "ascending" });
     }
   };
   return [sort, handleSortClick];
@@ -11587,7 +11588,7 @@ var DropdownMenu = import_react73.default.forwardRef(
       style: { minHeight, maxHeight, minWidth, maxWidth },
       className: classNames(
         className,
-        "bg-popover-content w-full flex flex-col overflow-x-hidden typography-small text-default"
+        "Aquarium-DropdownMenu.Menu bg-popover-content w-full flex flex-col overflow-x-hidden typography-small text-default"
       )
     }, props), children);
   }
@@ -11612,7 +11613,10 @@ var Group2 = import_react73.default.forwardRef(
     return /* @__PURE__ */ import_react73.default.createElement("li", __spreadValues({
       ref
     }, props), title && /* @__PURE__ */ import_react73.default.createElement("div", __spreadValues({
-      className: classNames(className, "p-3 text-inactive uppercase cursor-default typography-caption")
+      className: classNames(
+        className,
+        "Aquarium-DropdownMenu.Group p-3 text-inactive uppercase cursor-default typography-caption"
+      )
     }, titleProps), title), children);
   }
 );
@@ -11622,7 +11626,7 @@ var Item3 = import_react73.default.forwardRef(
     var _b = _a, { kind, highlighted, selected, className, icon, showNotification = false, children } = _b, props = __objRest(_b, ["kind", "highlighted", "selected", "className", "icon", "showNotification", "children"]);
     return /* @__PURE__ */ import_react73.default.createElement("li", __spreadValues({
       ref,
-      className: classNames(className, "flex items-center gap-x-3 p-3 outline-none", {
+      className: classNames(className, "Aquarium-DropdownMenu.Item flex items-center gap-x-3 p-3 outline-none", {
         "cursor-pointer hover:bg-muted": !props.disabled,
         "bg-muted": highlighted,
         "text-primary-intense": kind === "action" && !props.disabled,
@@ -12355,10 +12359,8 @@ var DataList2 = (_a) => {
     (value) => onSelectionChange == null ? void 0 : onSelectionChange(value != null ? value : [])
   );
   const defaultSortedColumn = columns.find((c) => c.headerName === (defaultSort == null ? void 0 : defaultSort.headerName));
-  const initialSortState = defaultSortedColumn ? { column: defaultSortedColumn, direction: (_a2 = defaultSort == null ? void 0 : defaultSort.direction) != null ? _a2 : "ascending" } : void 0;
-  const [sort, updateSort] = useTableSort(
-    onSortChanged ? __spreadProps(__spreadValues({}, initialSortState), { onSortChanged }) : initialSortState
-  );
+  const initialSortState = defaultSortedColumn ? { column: defaultSortedColumn, direction: (_a2 = defaultSort == null ? void 0 : defaultSort.direction) != null ? _a2 : "ascending" } : {};
+  const [sort, updateSort] = useTableSort(__spreadProps(__spreadValues({}, initialSortState), { onSortChanged }));
   const sortedRows = (0, import_isArray3.default)(rows) ? sortRowsBy(rows, sort) : [];
   const groups = areRowsGrouped(rows) ? rows : group ? (0, import_isFunction3.default)(group) ? group(sortedRows) : (0, import_groupBy2.default)(sortedRows, group) : void 0;
   const isCollapsible = (0, import_isFunction3.default)(rowDetails);
@@ -12638,10 +12640,8 @@ var DataTable = (_a) => {
   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));
-  const initialSortState = defaultSortedColumn ? { column: defaultSortedColumn, direction: (_a2 = defaultSort == null ? void 0 : defaultSort.direction) != null ? _a2 : "ascending" } : void 0;
-  const [sort, updateSort] = useTableSort(
-    onSortChanged ? __spreadProps(__spreadValues({}, initialSortState), { onSortChanged }) : initialSortState
-  );
+  const initialSortState = defaultSortedColumn ? { column: defaultSortedColumn, direction: (_a2 = defaultSort == null ? void 0 : defaultSort.direction) != null ? _a2 : "ascending" } : {};
+  const [sort, updateSort] = useTableSort(__spreadProps(__spreadValues({}, initialSortState), { onSortChanged }));
   const sortedRows = sortRowsBy(rows, sort);
   const amountOfColumns = columns.length + (menu ? 1 : 0);
   const PaginationFooter = import_react83.default.useCallback(
@@ -12835,7 +12835,7 @@ var Modal = (_a) => {
 Modal.BackDrop = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
   return /* @__PURE__ */ import_react84.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
-    className: classNames(tw("-z-10 fixed min-w-full min-h-full bg-default opacity-80"), className)
+    className: classNames(tw("-z-10 fixed min-w-full min-h-full bg-body-intense opacity-70"), className)
   }));
 };
 Modal.Dialog = import_react84.default.forwardRef(
@@ -13667,11 +13667,14 @@ var DropdownItem = (_a) => {
     onClick: handleClick,
     onKeyDown: handleKeyDown
   }, props), {
-    className: tw("typography-small flex items-center focus:ring-0", {
-      "text-default cursor-pointer hover:bg-muted": !disabled,
-      "text-inactive cursor-not-allowed": disabled,
-      "text-primary-default hover:text-primary-intense": color === "danger" && !disabled
-    })
+    className: classNames(
+      "Aquarium-Dropdown.Item",
+      tw("typography-small flex items-center focus:ring-0", {
+        "text-default cursor-pointer hover:bg-muted": !disabled,
+        "text-inactive cursor-not-allowed": disabled,
+        "text-danger-default": color === "danger" && !disabled
+      })
+    )
   }), tooltip ? /* @__PURE__ */ import_react91.default.createElement(Tooltip, {
     content: tooltip,
     placement: tooltipPlacement,
@@ -15540,7 +15543,7 @@ var getBaseSegmentedControlClassNames = (selected) => tw(
   "disabled:cursor-not-allowed disabled:text-inactive disabled:bg-muted",
   {
     "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
+    "typography-small-strong text-primary-intense relative z-40 ring-1 ring-offset-0 ring-primary-default": selected
   }
 );
 

package/dist/system.mjs

@@ -4432,7 +4432,7 @@ var Menu = React2.forwardRef(
     return /* @__PURE__ */ React2.createElement("ul", __spreadValues({
       ref,
       style: { maxHeight },
-      className: classNames(className, tw("text-default"))
+      className: classNames(className, tw("text-default bg-body"))
     }, props), children);
   }
 );
@@ -6872,8 +6872,8 @@ var Arrow = (props) => {
 var getCommonInputStyles = ({ readOnly, valid }) => tw(
   "block w-full rounded-sm disabled:cursor-not-allowed disabled:border-default disabled:bg-default typography-small text-default disabled:text-inactive placeholder:text-inactive focus:outline-none",
   {
-    "px-3 py-3": !readOnly,
-    "border-none resize-none cursor-default": readOnly,
+    "px-3 py-3 bg-body": !readOnly,
+    "border-none resize-none cursor-default bg-transparent": readOnly,
     "border border-danger-default": !valid && !readOnly,
     "border border-default hover:border-intense focus:border-info-default": valid && !readOnly
   }
@@ -6894,14 +6894,14 @@ var import_chevronDown3 = __toESM(require_chevronDown());
 var import_loading2 = __toESM(require_loading());
 var COLOR_CLASSNAMES = {
   "primary": tw(
-    "text-white bg-primary-default active:bg-primary-intense active:ring-0 focus-visible:ring-2 focus-visible:ring-primary-100 focus-visible:ring-inset hover:bg-primary-intense disabled:bg-primary-muted"
+    "text-white bg-primary-default active:bg-primary-intense active:ring-0 focus-visible:ring-2 focus-visible:ring-primary-intense focus-visible:ring-inset hover:bg-primary-intense disabled:bg-primary-muted"
   ),
   "secondary": tw(
-    "text-primary-intense bg-body ring-1 ring-primary-80 ring-inset",
-    "active:bg-primary-active active:ring-primary-90 active:text-primary-intense",
-    "focus-visible:ring-2 focus-visible:ring-primary-90 focus-visible:text-primary-intense",
-    "hover:bg-primary-hover hover:ring-primary-90 hover:text-primary-intense",
-    "disabled:bg-body disabled:text-primary-inactive disabled:ring-primary-40"
+    "text-primary-intense bg-transparent ring-1 ring-primary-default ring-inset",
+    "active:bg-primary-active active:ring-primary-default active:text-primary-intense",
+    "focus-visible:ring-2 focus-visible:ring-primary-default focus-visible:text-primary-intense",
+    "hover:bg-primary-hover hover:ring-primary-default hover:text-primary-intense",
+    "disabled:bg-body disabled:text-primary-inactive disabled:ring-primary-muted"
   ),
   "ghost": ghostButtonStyle,
   "text": linkStyle,
@@ -8032,8 +8032,8 @@ Banner.Dismiss = (_a) => {
 };
 Banner.Dismiss.displayName = "Alert.Banner.Dismiss";
 var ILLUSTRATION_COLORS = {
-  information: { stroke: tw("stroke-primary-60"), fill: tw("fill-primary-10") },
-  success: { stroke: tw("stroke-success-40"), fill: tw("fill-success-10") },
+  information: { stroke: tw("stroke-primary-muted"), fill: tw("fill-primary-10") },
+  success: { stroke: tw("stroke-success-default"), fill: tw("fill-success-10") },
   warning: { stroke: tw("stroke-warning-100"), fill: tw("fill-warning-20") },
   error: { stroke: tw("stroke-error-100"), fill: tw("fill-error-10") }
 };
@@ -8800,7 +8800,7 @@ var Checkbox = React33.forwardRef(
       name
     }, props), {
       className: classNames(
-        tw("peer appearance-none outline-none w-5 h-5", "rounded-sm border border-transparent", {
+        tw("peer appearance-none outline-none w-5 h-5 rounded-sm border border-transparent", {
           "cursor-pointer checked:bg-primary-default": !disabled,
           "cursor-not-allowed bg-muted checked:bg-primary-muted": disabled
         })
@@ -8818,7 +8818,7 @@ var Checkbox = React33.forwardRef(
           "rounded-sm border border-default peer-focus:border-info-default"
         ),
         {
-          "peer-hover:border-intense peer-checked:text-white peer-checked:[&>path]:stroke-white peer-checked:border-primary-default": !disabled,
+          "border-default peer-hover:border-intense peer-checked:text-white peer-checked:[&>path]:stroke-white peer-checked:border-primary-default": !disabled,
           "border-muted peer-checked:text-primary-default peer-checked:[&>path]:stroke-primary-70 peer-checked:border-transparent": disabled
         }
       )
@@ -9321,7 +9321,7 @@ var Carousel = ({
     tabIndex: 0,
     onScroll: handleScroll,
     className: tw(
-      "grid items-stretch grid-flow-col overflow-x-scroll scroll-smooth snap-x snap-mandatory scrollbar-hide focus-visible:outline-0 focus-visible:ring-1 focus-visible:ring-info-70"
+      "grid items-stretch grid-flow-col overflow-x-scroll scroll-smooth snap-x snap-mandatory scrollbar-hide focus-visible:outline-0 focus-visible:ring-1 focus-visible:ring-info-default"
     ),
     style: { width }
   }, width !== 0 && React41.Children.map(children, (child, index) => /* @__PURE__ */ React41.createElement(CarouselItem, {
@@ -10375,8 +10375,6 @@ var createInput = (displayName, opts = {}) => {
         readOnly,
         className: classNames(
           {
-            "bg-body": !readOnly,
-            "bg-transparent": readOnly,
             "[&::-webkit-search-cancel-button]:appearance-none": opts.isSearch,
             "pl-7": opts.adornment,
             "pr-7": opts.canReset || endAdornment
@@ -11367,10 +11365,13 @@ function isOnSortChangedDirection(value) {
 
 // src/utils/table/useTableSort.tsx
 import React65 from "react";
-var getDefaultSort = (props) => "defaultSort" in props ? props.defaultSort : "column" in props && "direction" in props && Object.keys(props).length === 2 ? { column: props.column, direction: props.direction } : void 0;
-var useTableSort = (props) => {
-  const onSortChanged = props && "onSortChanged" in props ? props.onSortChanged : void 0;
-  const [sort, setSort] = React65.useState(props && getDefaultSort(props));
+var useTableSort = ({
+  column,
+  direction,
+  onSortChanged
+} = {}) => {
+  const defaultSort = column ? { column, direction } : void 0;
+  const [sort, setSort] = React65.useState(defaultSort);
   const setSortAndEmitOnSortChangedEvent = (sort2) => {
     setSort(sort2);
     if (onSortChanged) {
@@ -11381,15 +11382,15 @@ var useTableSort = (props) => {
       }
     }
   };
-  const handleSortClick = (column) => {
-    if (sort && sort.column.headerName === column.headerName) {
+  const handleSortClick = (column2) => {
+    if (sort && sort.column.headerName === column2.headerName) {
       if (sort.direction === "ascending") {
-        setSortAndEmitOnSortChangedEvent({ column, direction: "descending" });
+        setSortAndEmitOnSortChangedEvent({ column: column2, direction: "descending" });
       } else {
         setSortAndEmitOnSortChangedEvent(void 0);
       }
     } else {
-      setSortAndEmitOnSortChangedEvent({ column, direction: "ascending" });
+      setSortAndEmitOnSortChangedEvent({ column: column2, direction: "ascending" });
     }
   };
   return [sort, handleSortClick];
@@ -11437,7 +11438,7 @@ var DropdownMenu = React66.forwardRef(
       style: { minHeight, maxHeight, minWidth, maxWidth },
       className: classNames(
         className,
-        "bg-popover-content w-full flex flex-col overflow-x-hidden typography-small text-default"
+        "Aquarium-DropdownMenu.Menu bg-popover-content w-full flex flex-col overflow-x-hidden typography-small text-default"
       )
     }, props), children);
   }
@@ -11462,7 +11463,10 @@ var Group2 = React66.forwardRef(
     return /* @__PURE__ */ React66.createElement("li", __spreadValues({
       ref
     }, props), title && /* @__PURE__ */ React66.createElement("div", __spreadValues({
-      className: classNames(className, "p-3 text-inactive uppercase cursor-default typography-caption")
+      className: classNames(
+        className,
+        "Aquarium-DropdownMenu.Group p-3 text-inactive uppercase cursor-default typography-caption"
+      )
     }, titleProps), title), children);
   }
 );
@@ -11472,7 +11476,7 @@ var Item3 = React66.forwardRef(
     var _b = _a, { kind, highlighted, selected, className, icon, showNotification = false, children } = _b, props = __objRest(_b, ["kind", "highlighted", "selected", "className", "icon", "showNotification", "children"]);
     return /* @__PURE__ */ React66.createElement("li", __spreadValues({
       ref,
-      className: classNames(className, "flex items-center gap-x-3 p-3 outline-none", {
+      className: classNames(className, "Aquarium-DropdownMenu.Item flex items-center gap-x-3 p-3 outline-none", {
         "cursor-pointer hover:bg-muted": !props.disabled,
         "bg-muted": highlighted,
         "text-primary-intense": kind === "action" && !props.disabled,
@@ -12205,10 +12209,8 @@ var DataList2 = (_a) => {
     (value) => onSelectionChange == null ? void 0 : onSelectionChange(value != null ? value : [])
   );
   const defaultSortedColumn = columns.find((c) => c.headerName === (defaultSort == null ? void 0 : defaultSort.headerName));
-  const initialSortState = defaultSortedColumn ? { column: defaultSortedColumn, direction: (_a2 = defaultSort == null ? void 0 : defaultSort.direction) != null ? _a2 : "ascending" } : void 0;
-  const [sort, updateSort] = useTableSort(
-    onSortChanged ? __spreadProps(__spreadValues({}, initialSortState), { onSortChanged }) : initialSortState
-  );
+  const initialSortState = defaultSortedColumn ? { column: defaultSortedColumn, direction: (_a2 = defaultSort == null ? void 0 : defaultSort.direction) != null ? _a2 : "ascending" } : {};
+  const [sort, updateSort] = useTableSort(__spreadProps(__spreadValues({}, initialSortState), { onSortChanged }));
   const sortedRows = isArray3(rows) ? sortRowsBy(rows, sort) : [];
   const groups = areRowsGrouped(rows) ? rows : group ? isFunction3(group) ? group(sortedRows) : groupBy2(sortedRows, group) : void 0;
   const isCollapsible = isFunction3(rowDetails);
@@ -12488,10 +12490,8 @@ var DataTable = (_a) => {
   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));
-  const initialSortState = defaultSortedColumn ? { column: defaultSortedColumn, direction: (_a2 = defaultSort == null ? void 0 : defaultSort.direction) != null ? _a2 : "ascending" } : void 0;
-  const [sort, updateSort] = useTableSort(
-    onSortChanged ? __spreadProps(__spreadValues({}, initialSortState), { onSortChanged }) : initialSortState
-  );
+  const initialSortState = defaultSortedColumn ? { column: defaultSortedColumn, direction: (_a2 = defaultSort == null ? void 0 : defaultSort.direction) != null ? _a2 : "ascending" } : {};
+  const [sort, updateSort] = useTableSort(__spreadProps(__spreadValues({}, initialSortState), { onSortChanged }));
   const sortedRows = sortRowsBy(rows, sort);
   const amountOfColumns = columns.length + (menu ? 1 : 0);
   const PaginationFooter = React75.useCallback(
@@ -12685,7 +12685,7 @@ var Modal = (_a) => {
 Modal.BackDrop = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
   return /* @__PURE__ */ React76.createElement("div", __spreadProps(__spreadValues({}, rest), {
-    className: classNames(tw("-z-10 fixed min-w-full min-h-full bg-default opacity-80"), className)
+    className: classNames(tw("-z-10 fixed min-w-full min-h-full bg-body-intense opacity-70"), className)
   }));
 };
 Modal.Dialog = React76.forwardRef(
@@ -13517,11 +13517,14 @@ var DropdownItem = (_a) => {
     onClick: handleClick,
     onKeyDown: handleKeyDown
   }, props), {
-    className: tw("typography-small flex items-center focus:ring-0", {
-      "text-default cursor-pointer hover:bg-muted": !disabled,
-      "text-inactive cursor-not-allowed": disabled,
-      "text-primary-default hover:text-primary-intense": color === "danger" && !disabled
-    })
+    className: classNames(
+      "Aquarium-Dropdown.Item",
+      tw("typography-small flex items-center focus:ring-0", {
+        "text-default cursor-pointer hover:bg-muted": !disabled,
+        "text-inactive cursor-not-allowed": disabled,
+        "text-danger-default": color === "danger" && !disabled
+      })
+    )
   }), tooltip ? /* @__PURE__ */ React82.createElement(Tooltip, {
     content: tooltip,
     placement: tooltipPlacement,
@@ -15390,7 +15393,7 @@ var getBaseSegmentedControlClassNames = (selected) => tw(
   "disabled:cursor-not-allowed disabled:text-inactive disabled:bg-muted",
   {
     "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
+    "typography-small-strong text-primary-intense relative z-40 ring-1 ring-offset-0 ring-primary-default": selected
   }
 );
 

package/dist/tailwind.config.js

@@ -53,6 +53,8 @@ module.exports = {
     extend: {
       backgroundColor,
       borderColor,
+      ringColor: borderColor,
+      stroke: borderColor,
       borderRadius,
       textColor,
       zIndex: {