@aivenio/aquarium 1.14.0 → 1.15.0

package/dist/atoms.mjs

@@ -2582,17 +2582,20 @@ var asButton = (Component, isDropdownButton) => {
         className: classNames(
           UNSAFE_className,
           !isIconOnlyButton && COLOR_CLASSNAMES[kind],
-          tw("inline-block border-0 rounded-sm transition whitespace-nowrap focus:outline-none relative", {
-            "text-grey-70 p-2 active:text-grey-70 active:bg-transparent hover:text-grey-90 hover:bg-grey-0 focus-visible:text-grey-90 focus-visible:bg-grey-0 disabled:text-grey-20 disabled:bg-transparent": isIconOnlyButton,
-            "typography-default-strong": !dense && !isIconOnlyButton && kind !== "text",
-            "typography-small-strong": dense && !isIconOnlyButton,
-            "py-3 px-4": !dense && isButton,
-            "py-2 px-3": dense && isButton,
-            "py-3": !dense && isGhost,
-            "py-2": dense && isGhost,
-            "block w-full": fullWidth && !isIconOnlyButton,
-            "cursor-not-allowed": !!disabled || !!loading2
-          })
+          tw(
+            "inline-block border-0 rounded-sm transition whitespace-nowrap focus:outline-none relative text-center",
+            {
+              "text-grey-70 p-2 active:text-grey-70 active:bg-transparent hover:text-grey-90 hover:bg-grey-0 focus-visible:text-grey-90 focus-visible:bg-grey-0 disabled:text-grey-20 disabled:bg-transparent": isIconOnlyButton,
+              "typography-default-strong": !dense && !isIconOnlyButton && kind !== "text",
+              "typography-small-strong": dense && !isIconOnlyButton && kind !== "text",
+              "py-3 px-4": !dense && isButton,
+              "py-2 px-3": dense && isButton,
+              "py-3": !dense && isGhost,
+              "py-2": dense && isGhost,
+              "block w-full": fullWidth && !isIconOnlyButton,
+              "cursor-not-allowed": !!disabled || !!loading2
+            }
+          )
         ),
         "aria-label": isIconOnlyButton ? ariaLabel != null ? ariaLabel : tooltip : ariaLabel,
         disabled: disabled || loading2
@@ -3505,11 +3508,74 @@ Modal.Actions = (_a) => {
   }), children);
 };
 
-// src/atoms/Popover/Popover.tsx
+// src/atoms/Navigation/Navigation.tsx
 import React21 from "react";
-var PopoverPanel = React21.forwardRef((_a, ref) => {
+var Navigation = (_a) => {
+  var _b = _a, { className, children } = _b, rest = __objRest(_b, ["className", "children"]);
+  return /* @__PURE__ */ React21.createElement("nav", {
+    className: classNames(tw("bg-grey-0 h-full"))
+  }, /* @__PURE__ */ React21.createElement("ul", __spreadProps(__spreadValues({}, rest), {
+    className: classNames(tw("flex flex-col h-full"), className),
+    role: "menu"
+  }), children));
+};
+var Header = (_a) => {
+  var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ React21.createElement("li", __spreadProps(__spreadValues({}, rest), {
+    role: "presentation",
+    className: classNames(tw("px-6 py-5"), className)
+  }));
+};
+var Footer = (_a) => {
+  var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ React21.createElement("li", __spreadProps(__spreadValues({}, rest), {
+    role: "presentation",
+    className: classNames(tw("px-6 py-5 mt-auto"), className)
+  }));
+};
+var Section = (_a) => {
+  var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ React21.createElement("li", {
+    role: "presentation"
+  }, /* @__PURE__ */ React21.createElement("ul", __spreadProps(__spreadValues({}, rest), {
+    role: "group",
+    className: classNames(tw(" py-5 flex flex-col"), className)
+  })));
+};
+var Divider = (_a) => {
+  var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ React21.createElement("li", __spreadProps(__spreadValues({
+    role: "separator"
+  }, rest), {
+    className: classNames(tw("border-t-2 border-grey-5"), className)
+  }));
+};
+var Item2 = (_a) => {
+  var _b = _a, { className, active } = _b, rest = __objRest(_b, ["className", "active"]);
+  return /* @__PURE__ */ React21.createElement("li", {
+    role: "presentation"
+  }, /* @__PURE__ */ React21.createElement("a", __spreadProps(__spreadValues({}, rest), {
+    role: "menuitem",
+    className: classNames(
+      tw("py-3 px-6 hover:bg-grey-5 cursor-pointer flex gap-4 items-center typography-small focusable", {
+        "text-grey-60": !active,
+        "text-primary-80": !!active
+      }),
+      className
+    )
+  })));
+};
+Navigation.Header = Header;
+Navigation.Footer = Footer;
+Navigation.Section = Section;
+Navigation.Item = Item2;
+Navigation.Divider = Divider;
+
+// src/atoms/Popover/Popover.tsx
+import React22 from "react";
+var PopoverPanel = React22.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ React21.createElement("div", __spreadValues({
+  return /* @__PURE__ */ React22.createElement("div", __spreadValues({
     ref,
     className: classNames(
       className,
@@ -3518,7 +3584,7 @@ var PopoverPanel = React21.forwardRef((_a, ref) => {
   }, props), children);
 });
 PopoverPanel.displayName = "Popover.Panel";
-var PopoverUnderlay = React21.forwardRef((props, ref) => /* @__PURE__ */ React21.createElement("div", __spreadProps(__spreadValues({
+var PopoverUnderlay = React22.forwardRef((props, ref) => /* @__PURE__ */ React22.createElement("div", __spreadProps(__spreadValues({
   ref
 }, props), {
   className: tw("fixed inset-0")
@@ -3530,54 +3596,54 @@ var Popover = {
 };
 
 // src/atoms/PopoverDialog/PopoverDialog.tsx
-import React22 from "react";
-var Header = (_a) => {
+import React23 from "react";
+var Header2 = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React22.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React23.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("p-5 gap-3 flex items-center"), className)
   }), children);
 };
 var Title = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React22.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React23.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
     htmlTag: "h1",
     variant: "small-strong"
   }), children);
 };
 var Body = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React22.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React23.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
     htmlTag: "div",
     variant: "caption",
     className: classNames(tw("px-5 overflow-y-auto"), className)
   }), children);
 };
-var Footer = (_a) => {
+var Footer2 = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React22.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React23.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("p-5"), className)
   }), children);
 };
 var Actions2 = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React22.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React23.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("flex gap-4"), className)
   }), children);
 };
 var PopoverDialog = {
-  Header,
+  Header: Header2,
   Title,
   Body,
-  Footer,
+  Footer: Footer2,
   Actions: Actions2
 };
 
 // src/atoms/RadioButton/RadioButton.tsx
-import React23 from "react";
-var RadioButton = React23.forwardRef(
+import React24 from "react";
+var RadioButton = React24.forwardRef(
   (_a, ref) => {
     var _b = _a, { id, children, name, disabled = false, readOnly = false } = _b, props = __objRest(_b, ["id", "children", "name", "disabled", "readOnly"]);
-    return /* @__PURE__ */ React23.createElement("input", __spreadProps(__spreadValues({
+    return /* @__PURE__ */ React24.createElement("input", __spreadProps(__spreadValues({
       id,
       ref,
       type: "radio",
@@ -3601,7 +3667,7 @@ var RadioButton = React23.forwardRef(
 );
 
 // src/atoms/Select/Select.tsx
-import React24 from "react";
+import React25 from "react";
 var import_chevronDown2 = __toESM(require_chevronDown());
 var import_chevronUp = __toESM(require_chevronUp());
 var import_search = __toESM(require_search());
@@ -3621,16 +3687,16 @@ function isOptionDisabledBuiltin(option) {
 }
 var getValues = (children) => {
   var _a;
-  const values = React24.Children.map(children, (c) => {
+  const values = React25.Children.map(children, (c) => {
     var _a2;
     return (_a2 = c == null ? void 0 : c.props) == null ? void 0 : _a2.value;
   });
   return (_a = values == null ? void 0 : values.filter((v) => v !== void 0 && v !== null)) != null ? _a : [];
 };
-var InputContainer = React24.forwardRef(
+var InputContainer = React25.forwardRef(
   (_a, ref) => {
     var _b = _a, { variant = "default", className } = _b, props = __objRest(_b, ["variant", "className"]);
-    return /* @__PURE__ */ React24.createElement("div", __spreadValues({
+    return /* @__PURE__ */ React25.createElement("div", __spreadValues({
       ref,
       className: classNames(
         className,
@@ -3649,9 +3715,9 @@ var InputContainer = React24.forwardRef(
     }, props));
   }
 );
-var Input = React24.forwardRef((_a, ref) => {
+var Input = React25.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React24.createElement("input", __spreadValues({
+  return /* @__PURE__ */ React25.createElement("input", __spreadValues({
     ref,
     type: "text",
     className: classNames(
@@ -3665,39 +3731,39 @@ var Input = React24.forwardRef((_a, ref) => {
     )
   }, props));
 });
-var Menu = React24.forwardRef(
+var Menu = React25.forwardRef(
   (_a, ref) => {
     var _b = _a, { maxHeight = "450px", className, children } = _b, props = __objRest(_b, ["maxHeight", "className", "children"]);
-    return /* @__PURE__ */ React24.createElement("ul", __spreadValues({
+    return /* @__PURE__ */ React25.createElement("ul", __spreadValues({
       ref,
       style: { maxHeight },
       className
     }, props), children);
   }
 );
-var NoResults = React24.forwardRef(
+var NoResults = React25.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, children } = _b, rest = __objRest(_b, ["className", "children"]);
-    return /* @__PURE__ */ React24.createElement("li", __spreadProps(__spreadValues({
+    return /* @__PURE__ */ React25.createElement("li", __spreadProps(__spreadValues({
       ref
     }, rest), {
       className: classNames(tw("p-3 text-grey-40 italic"), className)
     }), children);
   }
 );
-var EmptyStateContainer2 = React24.forwardRef((_a, ref) => {
+var EmptyStateContainer2 = React25.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ React24.createElement("li", __spreadValues({
+  return /* @__PURE__ */ React25.createElement("li", __spreadValues({
     ref,
     className: tw("border border-dashed border-grey-10 m-4 p-6")
   }, props), children);
 });
-var Divider = (props) => /* @__PURE__ */ React24.createElement("div", __spreadValues({
+var Divider2 = (props) => /* @__PURE__ */ React25.createElement("div", __spreadValues({
   className: tw("border-b-[1px] border-grey-5 mx-3 my-4")
 }, props));
-var Group2 = React24.forwardRef((_a, ref) => {
+var Group2 = React25.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ React24.createElement("li", __spreadValues({
+  return /* @__PURE__ */ React25.createElement("li", __spreadValues({
     ref,
     className: classNames(
       className,
@@ -3708,10 +3774,10 @@ var Group2 = React24.forwardRef((_a, ref) => {
     )
   }, props), children);
 });
-var Item2 = React24.forwardRef(
+var Item3 = React25.forwardRef(
   (_a, ref) => {
     var _b = _a, { highlighted, selected, className, children } = _b, props = __objRest(_b, ["highlighted", "selected", "className", "children"]);
-    return /* @__PURE__ */ React24.createElement("li", __spreadValues({
+    return /* @__PURE__ */ React25.createElement("li", __spreadValues({
       ref,
       className: classNames(className, "flex items-center gap-x-3 p-3 typography-small", {
         "cursor-pointer": !props.disabled,
@@ -3719,17 +3785,17 @@ var Item2 = React24.forwardRef(
         "text-grey-20": props.disabled,
         "hover:bg-grey-0": !props.disabled
       })
-    }, props), /* @__PURE__ */ React24.createElement("span", {
+    }, props), /* @__PURE__ */ React25.createElement("span", {
       className: tw("grow flex gap-x-3")
-    }, children), selected && /* @__PURE__ */ React24.createElement(InlineIcon, {
+    }, children), selected && /* @__PURE__ */ React25.createElement(InlineIcon, {
       icon: import_tick3.default
     }));
   }
 );
-var ActionItem = React24.forwardRef(
+var ActionItem = React25.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, dense, icon, onClick, children } = _b, props = __objRest(_b, ["className", "dense", "icon", "onClick", "children"]);
-    return /* @__PURE__ */ React24.createElement("li", __spreadValues({
+    return /* @__PURE__ */ React25.createElement("li", __spreadValues({
       ref,
       role: "button",
       onClick: () => !props.disabled && (onClick == null ? void 0 : onClick()),
@@ -3740,21 +3806,21 @@ var ActionItem = React24.forwardRef(
         "text-grey-20": props.disabled,
         "hover:text-primary-70": !props.disabled
       })
-    }, props), icon && /* @__PURE__ */ React24.createElement(InlineIcon, {
+    }, props), icon && /* @__PURE__ */ React25.createElement(InlineIcon, {
       icon
     }), children);
   }
 );
-var Toggle = React24.forwardRef((_a, ref) => {
+var Toggle = React25.forwardRef((_a, ref) => {
   var _b = _a, { hasFocus, isOpen } = _b, props = __objRest(_b, ["hasFocus", "isOpen"]);
   var _a2;
-  return /* @__PURE__ */ React24.createElement("button", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React25.createElement("button", __spreadProps(__spreadValues({
     ref,
     type: "button",
     "aria-label": "Toggle"
   }, props), {
     className: tw("grow-0 leading-none", { "cursor-not-allowed": (_a2 = props.disabled) != null ? _a2 : false })
-  }), /* @__PURE__ */ React24.createElement(InlineIcon, {
+  }), /* @__PURE__ */ React25.createElement(InlineIcon, {
     color: props.disabled ? "grey-40" : "grey-70",
     icon: hasFocus ? import_search.default : isOpen ? import_chevronUp.default : import_chevronDown2.default
   }));
@@ -3765,19 +3831,19 @@ var Select = {
   Menu,
   EmptyStateContainer: EmptyStateContainer2,
   NoResults,
-  Divider,
+  Divider: Divider2,
   Group: Group2,
-  Item: Item2,
+  Item: Item3,
   ActionItem,
   Toggle
 };
 
 // src/atoms/Stepper/Stepper.tsx
-import React25 from "react";
+import React26 from "react";
 var import_tick4 = __toESM(require_tick());
 var Stepper = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React25.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React26.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(className)
   }));
 };
@@ -3791,7 +3857,7 @@ var ConnectorContainer = (_a) => {
     "completed",
     "dense"
   ]);
-  return /* @__PURE__ */ React25.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React26.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       tw("absolute w-full -left-1/2", {
         "top-[3px] px-[14px]": Boolean(dense),
@@ -3803,7 +3869,7 @@ var ConnectorContainer = (_a) => {
 };
 var Connector = (_a) => {
   var _b = _a, { children, className, completed, dense } = _b, rest = __objRest(_b, ["children", "className", "completed", "dense"]);
-  return /* @__PURE__ */ React25.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React26.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       tw("w-full", {
         "bg-grey-20": !completed,
@@ -3817,7 +3883,7 @@ var Connector = (_a) => {
 };
 var Step = (_a) => {
   var _b = _a, { className, state } = _b, rest = __objRest(_b, ["className", "state"]);
-  return /* @__PURE__ */ React25.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React26.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       tw("flex flex-col items-center text-grey-90 relative text-center", {
         "text-grey-20": state === "inactive"
@@ -3838,13 +3904,13 @@ var getDenseClassNames = (state) => tw("h-[8px] w-[8px]", {
 });
 var Indicator = (_a) => {
   var _b = _a, { children, className, state, dense } = _b, rest = __objRest(_b, ["children", "className", "state", "dense"]);
-  return /* @__PURE__ */ React25.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React26.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       tw("rounded-full flex justify-center items-center mx-2 mb-3"),
       dense ? getDenseClassNames(state) : getClassNames(state),
       className
     )
-  }), state === "completed" ? /* @__PURE__ */ React25.createElement(InlineIcon, {
+  }), state === "completed" ? /* @__PURE__ */ React26.createElement(InlineIcon, {
     icon: import_tick4.default
   }) : dense ? null : children);
 };
@@ -3854,13 +3920,13 @@ ConnectorContainer.Connector = Connector;
 Stepper.ConnectorContainer = ConnectorContainer;
 
 // src/atoms/Switch/Switch.tsx
-import React26 from "react";
-var Switch = React26.forwardRef(
+import React27 from "react";
+var Switch = React27.forwardRef(
   (_a, ref) => {
     var _b = _a, { id, children, name, disabled = false, readOnly = false } = _b, props = __objRest(_b, ["id", "children", "name", "disabled", "readOnly"]);
-    return /* @__PURE__ */ React26.createElement("span", {
+    return /* @__PURE__ */ React27.createElement("span", {
       className: tw("relative inline-flex justify-center items-center self-center group")
-    }, /* @__PURE__ */ React26.createElement("input", __spreadProps(__spreadValues({
+    }, /* @__PURE__ */ React27.createElement("input", __spreadProps(__spreadValues({
       id,
       ref,
       type: "checkbox",
@@ -3879,7 +3945,7 @@ var Switch = React26.forwardRef(
       ),
       readOnly,
       disabled
-    })), /* @__PURE__ */ React26.createElement("span", {
+    })), /* @__PURE__ */ React27.createElement("span", {
       className: tw(
         "pointer-events-none rounded-full absolute inline-block transition duration-300 h-4 w-4 transform peer-checked/switch:translate-x-5",
         "bg-white peer-disabled/switch:bg-grey-0 left-2 peer-checked/switch:left-1",
@@ -3892,32 +3958,32 @@ var Switch = React26.forwardRef(
 );
 
 // src/atoms/Table/Table.tsx
-import React27 from "react";
+import React28 from "react";
 var import_chevronDown3 = __toESM(require_chevronDown());
 var import_chevronUp2 = __toESM(require_chevronUp());
-var HeadContext = React27.createContext(null);
+var HeadContext = React28.createContext(null);
 var tableClassNames = tw("w-full relative typography-default border-spacing-0");
 var Table = (_a) => {
   var _b = _a, { children, ariaLabel, className } = _b, rest = __objRest(_b, ["children", "ariaLabel", "className"]);
-  return /* @__PURE__ */ React27.createElement("table", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React28.createElement("table", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tableClassNames, className),
     "aria-label": ariaLabel
   }), children);
 };
 var TableHead = (_a) => {
   var _b = _a, { children, sticky } = _b, rest = __objRest(_b, ["children", "sticky"]);
-  return /* @__PURE__ */ React27.createElement("thead", __spreadValues({}, rest), /* @__PURE__ */ React27.createElement("tr", null, /* @__PURE__ */ React27.createElement(HeadContext.Provider, {
+  return /* @__PURE__ */ React28.createElement("thead", __spreadValues({}, rest), /* @__PURE__ */ React28.createElement("tr", null, /* @__PURE__ */ React28.createElement(HeadContext.Provider, {
     value: { children, sticky }
   }, children)));
 };
 var TableBody = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ React27.createElement("tbody", __spreadValues({}, rest), children);
+  return /* @__PURE__ */ React28.createElement("tbody", __spreadValues({}, rest), children);
 };
 var rowClassNames = tw("children:border-grey-10 group children:last:border-b-0 hover:bg-grey-0");
 var TableRow = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React27.createElement("tr", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React28.createElement("tr", __spreadProps(__spreadValues({}, rest), {
     className: classNames(rowClassNames, className)
   }), children);
 };
@@ -3944,15 +4010,15 @@ var getHeadCellClassNames = (sticky = true, stickyColumn) => {
 };
 var TableCell = (_a) => {
   var _b = _a, { children, className, stickyColumn, align = "left" } = _b, rest = __objRest(_b, ["children", "className", "stickyColumn", "align"]);
-  const headContext = React27.useContext(HeadContext);
-  return headContext ? /* @__PURE__ */ React27.createElement("th", __spreadProps(__spreadValues({}, rest), {
+  const headContext = React28.useContext(HeadContext);
+  return headContext ? /* @__PURE__ */ React28.createElement("th", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       cellClassNames,
       getHeadCellClassNames(headContext.sticky, stickyColumn),
       getAlignClassNames(align),
       className
     )
-  }), children) : /* @__PURE__ */ React27.createElement("td", __spreadProps(__spreadValues({}, rest), {
+  }), children) : /* @__PURE__ */ React28.createElement("td", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       cellClassNames,
       getBodyCellClassNames(true, stickyColumn),
@@ -3963,11 +4029,11 @@ var TableCell = (_a) => {
 };
 var TableSelectCell = (_a) => {
   var _b = _a, { ariaLabel } = _b, props = __objRest(_b, ["ariaLabel"]);
-  return /* @__PURE__ */ React27.createElement(Table.Cell, {
+  return /* @__PURE__ */ React28.createElement(Table.Cell, {
     className: tw("leading-[0px]")
-  }, props.type === "radio" ? /* @__PURE__ */ React27.createElement(RadioButton, __spreadValues({
+  }, props.type === "radio" ? /* @__PURE__ */ React28.createElement(RadioButton, __spreadValues({
     "aria-label": ariaLabel
-  }, props)) : /* @__PURE__ */ React27.createElement(Checkbox, __spreadValues({
+  }, props)) : /* @__PURE__ */ React28.createElement(Checkbox, __spreadValues({
     "aria-label": ariaLabel
   }, props)));
 };
@@ -3977,39 +4043,39 @@ var getSortCellIconClassNames = (active) => {
 };
 var TableSortCell = (_a) => {
   var _b = _a, { children, direction = "none", onClick } = _b, rest = __objRest(_b, ["children", "direction", "onClick"]);
-  return /* @__PURE__ */ React27.createElement(Table.Cell, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React28.createElement(Table.Cell, __spreadProps(__spreadValues({}, rest), {
     "aria-sort": direction
-  }), /* @__PURE__ */ React27.createElement("span", {
+  }), /* @__PURE__ */ React28.createElement("span", {
     className: getSortCellButtonClassNames(rest.align),
     role: "button",
     tabIndex: -1,
     onClick
-  }, children, /* @__PURE__ */ React27.createElement("div", {
+  }, children, /* @__PURE__ */ React28.createElement("div", {
     "data-sort-icons": true,
     className: tw("flex flex-col", {
       "invisible group-hover:visible": direction === "none"
     })
-  }, /* @__PURE__ */ React27.createElement(InlineIcon, {
+  }, /* @__PURE__ */ React28.createElement(InlineIcon, {
     icon: import_chevronUp2.default,
     className: getSortCellIconClassNames(direction === "descending")
-  }), /* @__PURE__ */ React27.createElement(InlineIcon, {
+  }), /* @__PURE__ */ React28.createElement(InlineIcon, {
     icon: import_chevronDown3.default,
     className: getSortCellIconClassNames(direction === "ascending")
   }))));
 };
-var Item3 = ({ image, imageAlt, imageSize = 35, title, caption }) => /* @__PURE__ */ React27.createElement("div", {
+var Item4 = ({ image, imageAlt, imageSize = 35, title, caption }) => /* @__PURE__ */ React28.createElement("div", {
   className: tw("flex gap-4 items-center")
-}, image && /* @__PURE__ */ React27.createElement("img", {
+}, image && /* @__PURE__ */ React28.createElement("img", {
   src: image,
   alt: imageAlt,
   style: { width: imageSize, height: imageSize }
-}), /* @__PURE__ */ React27.createElement("div", null, title, caption && /* @__PURE__ */ React27.createElement(Typography2.Caption, null, caption)));
-Table.Head = React27.memo(TableHead);
-Table.Body = React27.memo(TableBody);
-Table.Row = React27.memo(TableRow);
-Table.Cell = React27.memo(TableCell);
-Table.SortCell = React27.memo(TableSortCell);
-Table.SelectCell = React27.memo(TableSelectCell);
+}), /* @__PURE__ */ React28.createElement("div", null, title, caption && /* @__PURE__ */ React28.createElement(Typography2.Caption, null, caption)));
+Table.Head = React28.memo(TableHead);
+Table.Body = React28.memo(TableBody);
+Table.Row = React28.memo(TableRow);
+Table.Cell = React28.memo(TableCell);
+Table.SortCell = React28.memo(TableSortCell);
+Table.SelectCell = React28.memo(TableSelectCell);
 export {
   Alert,
   Card,
@@ -4018,9 +4084,10 @@ export {
   DIALOG_ICONS_AND_COLORS,
   DropdownMenu,
   InputGroup,
-  Item3 as Item,
+  Item4 as Item,
   Link,
   Modal,
+  Navigation,
   Popover,
   PopoverDialog,
   RadioButton,

package/dist/src/atoms/Navigation/Navigation.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+declare type UListProps = React.HTMLProps<HTMLUListElement>;
+declare type LIProp = React.HTMLProps<HTMLLIElement>;
+declare type LinkProps = React.HTMLProps<HTMLAnchorElement>;
+declare type ComposedNavigationProps = {
+    Header: typeof Header;
+    Footer: typeof Footer;
+    Section: typeof Section;
+    Item: typeof Item;
+    Divider: typeof Divider;
+};
+export declare const Navigation: React.FC<UListProps> & ComposedNavigationProps;
+declare const Header: React.FC<LIProp>;
+declare const Footer: React.FC<LIProp>;
+declare const Section: React.FC<UListProps>;
+declare const Divider: React.FC<LIProp>;
+declare const Item: React.FC<LinkProps & {
+    active?: boolean;
+}>;
+export {};

package/dist/src/atoms/Navigation/Navigation.js

@@ -0,0 +1,49 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { classNames, tw } from '../../../src/utils/tailwind';
+export const Navigation = (_a) => {
+    var { className, children } = _a, rest = __rest(_a, ["className", "children"]);
+    return (React.createElement("nav", { className: classNames(tw('bg-grey-0 h-full')) },
+        React.createElement("ul", Object.assign({}, rest, { className: classNames(tw('flex flex-col h-full'), className), role: "menu" }), children)));
+};
+const Header = (_a) => {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    return (React.createElement("li", Object.assign({}, rest, { role: "presentation", className: classNames(tw('px-6 py-5'), className) })));
+};
+const Footer = (_a) => {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    return (React.createElement("li", Object.assign({}, rest, { role: "presentation", className: classNames(tw('px-6 py-5 mt-auto'), className) })));
+};
+const Section = (_a) => {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    return (React.createElement("li", { role: "presentation" },
+        React.createElement("ul", Object.assign({}, rest, { role: "group", className: classNames(tw(' py-5 flex flex-col'), className) }))));
+};
+const Divider = (_a) => {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    return (React.createElement("li", Object.assign({ role: "separator" }, rest, { className: classNames(tw('border-t-2 border-grey-5'), className) })));
+};
+const Item = (_a) => {
+    var { className, active } = _a, rest = __rest(_a, ["className", "active"]);
+    return (React.createElement("li", { role: "presentation" },
+        React.createElement("a", Object.assign({}, rest, { role: "menuitem", className: classNames(tw('py-3 px-6 hover:bg-grey-5 cursor-pointer flex gap-4 items-center typography-small focusable', {
+                'text-grey-60': !active,
+                'text-primary-80': !!active,
+            }), className) }))));
+};
+Navigation.Header = Header;
+Navigation.Footer = Footer;
+Navigation.Section = Section;
+Navigation.Item = Item;
+Navigation.Divider = Divider;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTmF2aWdhdGlvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9hdG9tcy9OYXZpZ2F0aW9uL05hdmlnYXRpb24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBRTFCLE9BQU8sRUFBRSxVQUFVLEVBQUUsRUFBRSxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFjcEQsTUFBTSxDQUFDLE1BQU0sVUFBVSxHQUFtRCxDQUFDLEVBQWdDLEVBQUUsRUFBRTtRQUFwQyxFQUFFLFNBQVMsRUFBRSxRQUFRLE9BQVcsRUFBTixJQUFJLGNBQTlCLHlCQUFnQyxDQUFGO0lBQU8sT0FBQSxDQUM5Ryw2QkFBSyxTQUFTLEVBQUUsVUFBVSxDQUFDLEVBQUUsQ0FBQyxrQkFBa0IsQ0FBQyxDQUFDO1FBQ2hELDRDQUFRLElBQUksSUFBRSxTQUFTLEVBQUUsVUFBVSxDQUFDLEVBQUUsQ0FBQyxzQkFBc0IsQ0FBQyxFQUFFLFNBQVMsQ0FBQyxFQUFFLElBQUksRUFBQyxNQUFNLEtBQ3BGLFFBQVEsQ0FDTixDQUNELENBQ1AsQ0FBQTtDQUFBLENBQUM7QUFFRixNQUFNLE1BQU0sR0FBcUIsQ0FBQyxFQUFzQixFQUFFLEVBQUU7UUFBMUIsRUFBRSxTQUFTLE9BQVcsRUFBTixJQUFJLGNBQXBCLGFBQXNCLENBQUY7SUFBTyxPQUFBLENBQzNELDRDQUFRLElBQUksSUFBRSxJQUFJLEVBQUMsY0FBYyxFQUFDLFNBQVMsRUFBRSxVQUFVLENBQUMsRUFBRSxDQUFDLFdBQVcsQ0FBQyxFQUFFLFNBQVMsQ0FBQyxJQUFJLENBQ3hGLENBQUE7Q0FBQSxDQUFDO0FBRUYsTUFBTSxNQUFNLEdBQXFCLENBQUMsRUFBc0IsRUFBRSxFQUFFO1FBQTFCLEVBQUUsU0FBUyxPQUFXLEVBQU4sSUFBSSxjQUFwQixhQUFzQixDQUFGO0lBQU8sT0FBQSxDQUMzRCw0Q0FBUSxJQUFJLElBQUUsSUFBSSxFQUFDLGNBQWMsRUFBQyxTQUFTLEVBQUUsVUFBVSxDQUFDLEVBQUUsQ0FBQyxtQkFBbUIsQ0FBQyxFQUFFLFNBQVMsQ0FBQyxJQUFJLENBQ2hHLENBQUE7Q0FBQSxDQUFDO0FBRUYsTUFBTSxPQUFPLEdBQXlCLENBQUMsRUFBc0IsRUFBRSxFQUFFO1FBQTFCLEVBQUUsU0FBUyxPQUFXLEVBQU4sSUFBSSxjQUFwQixhQUFzQixDQUFGO0lBQU8sT0FBQSxDQUNoRSw0QkFBSSxJQUFJLEVBQUMsY0FBYztRQUNyQiw0Q0FBUSxJQUFJLElBQUUsSUFBSSxFQUFDLE9BQU8sRUFBQyxTQUFTLEVBQUUsVUFBVSxDQUFDLEVBQUUsQ0FBQyxxQkFBcUIsQ0FBQyxFQUFFLFNBQVMsQ0FBQyxJQUFJLENBQ3ZGLENBQ04sQ0FBQTtDQUFBLENBQUM7QUFFRixNQUFNLE9BQU8sR0FBcUIsQ0FBQyxFQUFzQixFQUFFLEVBQUU7UUFBMUIsRUFBRSxTQUFTLE9BQVcsRUFBTixJQUFJLGNBQXBCLGFBQXNCLENBQUY7SUFBTyxPQUFBLENBQzVELDBDQUFJLElBQUksRUFBQyxXQUFXLElBQUssSUFBSSxJQUFFLFNBQVMsRUFBRSxVQUFVLENBQUMsRUFBRSxDQUFDLDBCQUEwQixDQUFDLEVBQUUsU0FBUyxDQUFDLElBQUksQ0FDcEcsQ0FBQTtDQUFBLENBQUM7QUFFRixNQUFNLElBQUksR0FBK0MsQ0FBQyxFQUE4QixFQUFFLEVBQUU7UUFBbEMsRUFBRSxTQUFTLEVBQUUsTUFBTSxPQUFXLEVBQU4sSUFBSSxjQUE1Qix1QkFBOEIsQ0FBRjtJQUFPLE9BQUEsQ0FDM0YsNEJBQUksSUFBSSxFQUFDLGNBQWM7UUFDckIsMkNBQ00sSUFBSSxJQUNSLElBQUksRUFBQyxVQUFVLEVBQ2YsU0FBUyxFQUFFLFVBQVUsQ0FDbkIsRUFBRSxDQUFDLDZGQUE2RixFQUFFO2dCQUNoRyxjQUFjLEVBQUUsQ0FBQyxNQUFNO2dCQUN2QixpQkFBaUIsRUFBRSxDQUFDLENBQUMsTUFBTTthQUM1QixDQUFDLEVBQ0YsU0FBUyxDQUNWLElBQ0QsQ0FDQyxDQUNOLENBQUE7Q0FBQSxDQUFDO0FBRUYsVUFBVSxDQUFDLE1BQU0sR0FBRyxNQUFNLENBQUM7QUFDM0IsVUFBVSxDQUFDLE1BQU0sR0FBRyxNQUFNLENBQUM7QUFDM0IsVUFBVSxDQUFDLE9BQU8sR0FBRyxPQUFPLENBQUM7QUFDN0IsVUFBVSxDQUFDLElBQUksR0FBRyxJQUFJLENBQUM7QUFDdkIsVUFBVSxDQUFDLE9BQU8sR0FBRyxPQUFPLENBQUMifQ==