@aivenio/aquarium 1.22.0 → 1.24.0

package/dist/atoms.mjs

@@ -2358,11 +2358,11 @@ var require_loading = __commonJS({
   "src/icons/loading.js"(exports) {
     "use strict";
     var data = {
-      "body": '<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-width="3" transform="translate(1 1)"><circle cx="18" cy="18" r="18" stroke-opacity=".5"/><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName="transform" dur="1s" from="0 18 18" repeatCount="indefinite" to="360 18 18" type="rotate"/></path></g>',
+      "body": '<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-width="2" transform="translate(1 1)"><circle cx="18" cy="18" r="18" stroke-opacity=".5"/><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName="transform" dur="1s" from="0 18 18" repeatCount="indefinite" to="360 18 18" type="rotate"/></path></g>',
       "left": 0,
       "top": 0,
-      "width": 40,
-      "height": 40
+      "width": 38,
+      "height": 38
     };
     exports.__esModule = true;
     exports.default = data;
@@ -3867,7 +3867,8 @@ var require_tokens = __commonJS({
             "primary-20": "#b4e5fb",
             "primary-10": "#e0f5fe",
             "primary-5": "#effaff",
-            "primary-0": "#f9fdff"
+            "primary-0": "#f9fdff",
+            "navyBlue-100": "#30375e"
           },
           typography: {
             sizes: [
@@ -4427,7 +4428,8 @@ var require_tokens = __commonJS({
             "primary-10": "#ffdeef",
             "primary-5": "#ffe8f4",
             "primary-0": "#fff9fc",
-            "grey-20": "#d2d2d6"
+            "grey-20": "#d2d2d6",
+            "navyBlue-100": "#30375e"
           },
           typography: {
             sizes: [
@@ -5301,11 +5303,11 @@ var tailwind_theme_default = {
     "primary-5": "var(--aquarium-colors-primary-5, #ffe8f4)",
     "primary-0": "var(--aquarium-colors-primary-0, #fff9fc)",
     "grey-20": "var(--aquarium-colors-grey-20, #d2d2d6)",
+    "navyBlue-100": "var(--aquarium-colors-navyBlue-100, #30375e)",
     transparent: "var(--aquarium-colors-transparent, transparent)",
     white: "var(--aquarium-colors-white, white)",
     black: "var(--aquarium-colors-black, black)",
-    current: "var(--aquarium-colors-current, currentColor)",
-    "navyBlue-100": "#30375E"
+    current: "var(--aquarium-colors-current, currentColor)"
   },
   gap: {
     "0": "0",
@@ -6985,119 +6987,216 @@ var DIALOG_ICONS_AND_COLORS = {
 };
 
 // src/atoms/DropdownMenu/DropdownMenu.tsx
+import React23 from "react";
+
+// src/molecules/Badge/Badge.tsx
 import React21 from "react";
+import omit from "lodash/omit";
 
-// src/molecules/Typography/Typography.tsx
+// src/molecules/Skeleton/Skeleton.tsx
 import React20 from "react";
-var Typography2 = (props) => /* @__PURE__ */ React20.createElement(Typography, __spreadValues({}, props));
+import isNumber2 from "lodash/isNumber";
+import isUndefined7 from "lodash/isUndefined";
+var Skeleton = ({
+  width,
+  height,
+  display = "block",
+  className,
+  animate = true,
+  rounded = false
+}) => {
+  const styles = {
+    width: isNumber2(width) ? `${width}px` : width,
+    height: isNumber2(height) ? `${height}px` : height
+  };
+  return /* @__PURE__ */ React20.createElement("div", {
+    style: styles,
+    className: classNames(
+      "Aquarium-Skeleton",
+      tw("bg-grey-5", {
+        "h-auto before:content-['_'] whitespace-pre origin-[0%_45%] scale-[0.55]": isUndefined7(height),
+        "rounded-full": rounded,
+        "block": display === "block",
+        "inline-block": display === "inline-block",
+        "animate-pulse": animate
+      }),
+      className
+    )
+  });
+};
+
+// src/molecules/Badge/Badge.tsx
+var isChipBadgeProps = (props) => "dense" in props;
+var createBadge = (type, displayName) => {
+  const Component = (props) => {
+    var _b;
+    const _a = props, { kind = "filled", value, textClassname } = _a, rest = __objRest(_a, ["kind", "value", "textClassname"]);
+    const valueStr = value.toString();
+    const dense = isChipBadgeProps(props) ? (_b = props.dense) != null ? _b : false : false;
+    return /* @__PURE__ */ React21.createElement("span", __spreadProps(__spreadValues({}, omit(rest, "dense")), {
+      className: classNames(
+        tw("inline-block text-center", {
+          "rounded-full": type === "default" || type === "chip",
+          "rounded": type === "tab",
+          "border border-current": kind === "outlined",
+          "bg-current": kind === "filled" && type !== "chip",
+          "bg-white": type === "chip",
+          "typography-caption-small leading-none py-1 px-2": !dense,
+          "text-[8px]": dense,
+          "px-1": dense && valueStr.length > 1,
+          "px-[4px]": dense && valueStr.length === 1
+        }),
+        "Aquarium-Badge"
+      )
+    }), /* @__PURE__ */ React21.createElement("span", {
+      className: classNames(
+        textClassname,
+        tw("inline-block", {
+          "text-white": !textClassname && kind === "filled",
+          "m-[1px]": kind === "filled"
+        })
+      )
+    }, valueStr));
+  };
+  Component.displayName = displayName;
+  Component.Skeleton = () => /* @__PURE__ */ React21.createElement(Skeleton, {
+    height: 16,
+    width: 16,
+    display: "inline-block",
+    className: tw(type === "tab" ? "rounded" : "rounded-full")
+  });
+  Component.Skeleton.displayName = `${displayName}.Skeleton`;
+  return Component;
+};
+var NotificationBadge = ({
+  children,
+  top = "-2px",
+  right = "-2px"
+}) => {
+  return /* @__PURE__ */ React21.createElement("div", {
+    className: tw("relative inline-flex")
+  }, children, /* @__PURE__ */ React21.createElement("span", {
+    style: { top, right },
+    className: tw("absolute rounded-full w-[6px] h-[6px] bg-error-70")
+  }));
+};
+var Badge = createBadge("default", "Badge");
+Badge.Notification = NotificationBadge;
+Badge.Notification.displayName = "Badge.Notification";
+var TabBadge = createBadge("tab", "TabBadge");
+var ChipBadge = createBadge("chip", "ChipBadge");
+
+// src/molecules/Typography/Typography.tsx
+import React22 from "react";
+var Typography2 = (props) => /* @__PURE__ */ React22.createElement(Typography, __spreadValues({}, props));
 Typography2.LargeHeading = (_a) => {
   var _b = _a, { htmlTag = "h1" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ React20.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ React22.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
     variant: "large-heading"
   }));
 };
 Typography2.Heading = (_a) => {
   var _b = _a, { htmlTag = "h1", fontWeight } = _b, props = __objRest(_b, ["htmlTag", "fontWeight"]);
-  return /* @__PURE__ */ React20.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ React22.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
     variant: "heading"
   }));
 };
 Typography2.Subheading = (_a) => {
   var _b = _a, { htmlTag = "h2", fontWeight } = _b, props = __objRest(_b, ["htmlTag", "fontWeight"]);
-  return /* @__PURE__ */ React20.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ React22.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
     variant: "subheading"
   }));
 };
 Typography2.LargeStrong = (_a) => {
   var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ React20.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ React22.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
     variant: "large-strong"
   }));
 };
 Typography2.Large = (_a) => {
   var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ React20.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ React22.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
     variant: "large"
   }));
 };
 Typography2.DefaultStrong = (_a) => {
   var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ React20.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ React22.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
     variant: "default-strong"
   }));
 };
 Typography2.Default = (_a) => {
   var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ React20.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ React22.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
     variant: "default"
   }));
 };
 Typography2.Paragraph = (_a) => {
   var _b = _a, { htmlTag = "p", fontWeight } = _b, props = __objRest(_b, ["htmlTag", "fontWeight"]);
-  return /* @__PURE__ */ React20.createElement(Typography2.Default, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ React22.createElement(Typography2.Default, __spreadProps(__spreadValues({}, props), {
     htmlTag
   }));
 };
 Typography2.P = Typography2.Paragraph;
 Typography2.SmallStrong = (_a) => {
   var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ React20.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ React22.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
     variant: "small-strong"
   }));
 };
 Typography2.Small = (_a) => {
   var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ React20.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ React22.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
     variant: "small"
   }));
 };
 Typography2.Caption = (_a) => {
   var _b = _a, { htmlTag = "div", fontWeight } = _b, props = __objRest(_b, ["htmlTag", "fontWeight"]);
-  return /* @__PURE__ */ React20.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ React22.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
     variant: "caption"
   }));
 };
 Typography2.LargeText = (_a) => {
   var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ React20.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ React22.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
     variant: "large-strong"
   }));
 };
 Typography2.MediumText = (_a) => {
   var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ React20.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ React22.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
     variant: "default-strong"
   }));
 };
 Typography2.Text = (_a) => {
   var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ React20.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ React22.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
     variant: "default"
   }));
 };
 Typography2.SmallText = (_a) => {
   var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ React20.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ React22.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
     variant: "small"
   }));
 };
 Typography2.SmallTextBold = (_a) => {
   var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ React20.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ React22.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
     variant: "small-strong"
   }));
@@ -7105,36 +7204,36 @@ Typography2.SmallTextBold = (_a) => {
 
 // src/atoms/DropdownMenu/DropdownMenu.tsx
 var import_tick3 = __toESM(require_tick());
-var DropdownMenu = React21.forwardRef(
+var DropdownMenu = React23.forwardRef(
   (_a, ref) => {
     var _b = _a, { maxHeight = "450px", minWidth = "125px", maxWidth, className, children } = _b, props = __objRest(_b, ["maxHeight", "minWidth", "maxWidth", "className", "children"]);
-    return /* @__PURE__ */ React21.createElement("div", __spreadValues({
+    return /* @__PURE__ */ React23.createElement("div", __spreadValues({
       ref,
       style: { maxHeight, minWidth, maxWidth },
       className: classNames(className, "bg-white w-full flex flex-col overflow-x-hidden typography-small text-grey-70")
     }, props), children);
   }
 );
-var ContentContainer = ({ children }) => /* @__PURE__ */ React21.createElement("div", {
+var ContentContainer = ({ children }) => /* @__PURE__ */ React23.createElement("div", {
   className: tw("p-3 overflow-y-auto overflow-x-hidden")
 }, children);
 DropdownMenu.ContentContainer = ContentContainer;
-var List = React21.forwardRef(
+var List = React23.forwardRef(
   (_a, ref) => {
     var _b = _a, { children, className } = _b, props = __objRest(_b, ["children", "className"]);
-    return /* @__PURE__ */ React21.createElement("ul", __spreadValues({
+    return /* @__PURE__ */ React23.createElement("ul", __spreadValues({
       ref,
       className: classNames(className, "outline-none ring-0")
     }, props), children);
   }
 );
 DropdownMenu.List = List;
-var Group = React21.forwardRef(
+var Group = React23.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, title, titleProps, children } = _b, props = __objRest(_b, ["className", "title", "titleProps", "children"]);
-    return /* @__PURE__ */ React21.createElement("li", __spreadValues({
+    return /* @__PURE__ */ React23.createElement("li", __spreadValues({
       ref
-    }, props), title && /* @__PURE__ */ React21.createElement("div", __spreadValues({
+    }, props), title && /* @__PURE__ */ React23.createElement("div", __spreadValues({
       className: classNames(className, "p-3 text-grey-40 uppercase cursor-default typography-caption", {
         "text-grey-20": props.disabled
       })
@@ -7142,10 +7241,10 @@ var Group = React21.forwardRef(
   }
 );
 DropdownMenu.Group = Group;
-var Item = React21.forwardRef(
+var Item = React23.forwardRef(
   (_a, ref) => {
-    var _b = _a, { kind, highlighted, selected, className, icon, children } = _b, props = __objRest(_b, ["kind", "highlighted", "selected", "className", "icon", "children"]);
-    return /* @__PURE__ */ React21.createElement("li", __spreadValues({
+    var _b = _a, { kind, highlighted, selected, className, icon, showNotification = false, children } = _b, props = __objRest(_b, ["kind", "highlighted", "selected", "className", "icon", "showNotification", "children"]);
+    return /* @__PURE__ */ React23.createElement("li", __spreadValues({
       ref,
       className: classNames(className, "flex items-center gap-x-3 p-3 outline-none", {
         "cursor-pointer hover:bg-grey-0": !props.disabled,
@@ -7153,40 +7252,42 @@ var Item = React21.forwardRef(
         "text-primary-80": kind === "action",
         "text-grey-20 cursor-not-allowed": props.disabled
       })
-    }, props), icon && /* @__PURE__ */ React21.createElement(InlineIcon, {
+    }, props), icon && showNotification && /* @__PURE__ */ React23.createElement(Badge.Notification, null, /* @__PURE__ */ React23.createElement(InlineIcon, {
       icon
-    }), /* @__PURE__ */ React21.createElement("span", {
+    })), icon && !showNotification && /* @__PURE__ */ React23.createElement(InlineIcon, {
+      icon
+    }), /* @__PURE__ */ React23.createElement("span", {
       className: tw("grow")
-    }, children), selected && /* @__PURE__ */ React21.createElement(InlineIcon, {
+    }, children), selected && /* @__PURE__ */ React23.createElement(InlineIcon, {
       icon: import_tick3.default
     }));
   }
 );
 DropdownMenu.Item = Item;
-var Description = ({ disabled, children }) => /* @__PURE__ */ React21.createElement(Typography2.Caption, {
+var Description = ({ disabled, children }) => /* @__PURE__ */ React23.createElement(Typography2.Caption, {
   color: disabled ? "grey-20" : "grey-40"
 }, children);
 DropdownMenu.Description = Description;
 var Separator = (_a) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React21.createElement("li", __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ React23.createElement("li", __spreadProps(__spreadValues({}, props), {
     className: classNames(className, tw("m-3 block bg-grey-5 h-[1px]"))
   }));
 };
 DropdownMenu.Separator = Separator;
 var EmptyStateContainer = (_a) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ React21.createElement("div", __spreadValues({
+  return /* @__PURE__ */ React23.createElement("div", __spreadValues({
     className: classNames(tw("border border-dashed border-grey-10 p-3"), className)
   }, props), children);
 };
 DropdownMenu.EmptyStateContainer = EmptyStateContainer;
 
 // src/atoms/InputGroup/InputGroup.tsx
-import React23 from "react";
+import React25 from "react";
 
 // src/molecules/Grid/Grid.tsx
-import React22 from "react";
+import React24 from "react";
 var Grid = Tailwindify(
   ({
     htmlTag = "div",
@@ -7239,7 +7340,7 @@ var Grid = Tailwindify(
       gridRowEnd: rowEnd
     });
     const HtmlElement = htmlTag;
-    return /* @__PURE__ */ React22.createElement(HtmlElement, {
+    return /* @__PURE__ */ React24.createElement(HtmlElement, {
       style: __spreadValues(__spreadValues({}, hookStyle), style),
       className
     }, children);
@@ -7255,7 +7356,7 @@ var gridColumnStyles = {
 };
 var InputGroup = (_a) => {
   var _b = _a, { cols = "1", children } = _b, rest = __objRest(_b, ["cols", "children"]);
-  return /* @__PURE__ */ React23.createElement(Grid, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React25.createElement(Grid, __spreadProps(__spreadValues({}, rest), {
     display: "inline-grid",
     colGap: "l4",
     rowGap: "3",
@@ -7265,19 +7366,19 @@ var InputGroup = (_a) => {
 };
 
 // src/atoms/Link/Link.tsx
-import React24 from "react";
+import React26 from "react";
 var Link = (_a) => {
   var _b = _a, { children, className } = _b, props = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React24.createElement("a", __spreadValues({
+  return /* @__PURE__ */ React26.createElement("a", __spreadValues({
     className: classNames(className, linkStyle)
   }, props), children);
 };
 
 // src/atoms/Modal/Modal.tsx
-import React25 from "react";
+import React27 from "react";
 var Modal = (_a) => {
   var _b = _a, { children, className, open } = _b, rest = __objRest(_b, ["children", "className", "open"]);
-  return open ? /* @__PURE__ */ React25.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return open ? /* @__PURE__ */ React27.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       tw("inset-0 overflow-y-auto z-modal flex justify-center items-center fixed py-7"),
       className
@@ -7286,14 +7387,14 @@ var Modal = (_a) => {
 };
 Modal.BackDrop = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React25.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React27.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("-z-10 fixed min-w-full min-h-full bg-navyBlue-100 opacity-70"), className)
   }));
 };
-Modal.Dialog = React25.forwardRef(
+Modal.Dialog = React27.forwardRef(
   (_a, ref) => {
     var _b = _a, { children, className, size = "sm" } = _b, rest = __objRest(_b, ["children", "className", "size"]);
-    return /* @__PURE__ */ React25.createElement("div", __spreadProps(__spreadValues({
+    return /* @__PURE__ */ React27.createElement("div", __spreadProps(__spreadValues({
       ref,
       "aria-modal": "true"
     }, rest), {
@@ -7311,31 +7412,31 @@ Modal.Dialog = React25.forwardRef(
 );
 Modal.Header = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React25.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React27.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("px-7 py-6 gap-3 flex items-center"), className)
   }), children);
 };
 Modal.HeaderImage = (_a) => {
   var _b = _a, { backgroundImage, className } = _b, rest = __objRest(_b, ["backgroundImage", "className"]);
   const common = tw("h-[120px] min-h-[120px] w-full ");
-  return backgroundImage ? /* @__PURE__ */ React25.createElement("img", __spreadProps(__spreadValues({
+  return backgroundImage ? /* @__PURE__ */ React27.createElement("img", __spreadProps(__spreadValues({
     "aria-hidden": true,
     src: backgroundImage != null ? backgroundImage : void 0
   }, rest), {
     className: classNames(common, tw("object-cover"), className)
-  })) : /* @__PURE__ */ React25.createElement("div", {
+  })) : /* @__PURE__ */ React27.createElement("div", {
     className: classNames(common, tw("bg-grey-5"), className)
   });
 };
 Modal.CloseButtonContainer = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React25.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React27.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("absolute top-[20px] right-[28px]"), className)
   }));
 };
 Modal.Title = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React25.createElement(Typography, __spreadValues({
+  return /* @__PURE__ */ React27.createElement(Typography, __spreadValues({
     htmlTag: "h2",
     variant: "subheading",
     color: "grey-90",
@@ -7344,77 +7445,77 @@ Modal.Title = (_a) => {
 };
 Modal.Subtitle = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ React25.createElement(Typography, __spreadValues({
+  return /* @__PURE__ */ React27.createElement(Typography, __spreadValues({
     variant: "small",
     color: "grey-60"
   }, rest), children);
 };
 Modal.TitleContainer = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React25.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React27.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("flex flex-col grow gap-2"), className)
   }), children);
 };
 Modal.Body = (_a) => {
   var _b = _a, { children, className, noFooter = false, maxHeight, style } = _b, rest = __objRest(_b, ["children", "className", "noFooter", "maxHeight", "style"]);
-  return /* @__PURE__ */ React25.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React27.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("px-7 grow overflow-y-auto", { "pb-6": noFooter }), className),
     style: __spreadValues({ maxHeight }, style)
   }), children);
 };
 Modal.Footer = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React25.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React27.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("px-7 py-6"), className)
   }), children);
 };
 Modal.Actions = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React25.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React27.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("flex gap-4 justify-end"), className)
   }), children);
 };
 
 // src/atoms/Navigation/Navigation.tsx
-import React26 from "react";
+import React28 from "react";
 var Navigation = (_a) => {
   var _b = _a, { className, children } = _b, rest = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ React26.createElement("nav", {
+  return /* @__PURE__ */ React28.createElement("nav", {
     className: classNames(tw("bg-grey-0 h-full"))
-  }, /* @__PURE__ */ React26.createElement("ul", __spreadProps(__spreadValues({}, rest), {
+  }, /* @__PURE__ */ React28.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__ */ React26.createElement("li", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React28.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__ */ React26.createElement("li", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React28.createElement("li", __spreadProps(__spreadValues({}, rest), {
     role: "presentation",
     className: classNames(tw("px-6 py-5 mt-auto"), className)
   }));
 };
 var Section = (_a) => {
   var _b = _a, { title, className } = _b, rest = __objRest(_b, ["title", "className"]);
-  return /* @__PURE__ */ React26.createElement("li", {
+  return /* @__PURE__ */ React28.createElement("li", {
     role: "presentation",
     className: tw("py-5")
-  }, title && /* @__PURE__ */ React26.createElement("div", {
+  }, title && /* @__PURE__ */ React28.createElement("div", {
     className: classNames(className, "py-2 px-6 text-grey-40 uppercase cursor-default typography-caption")
-  }, title), /* @__PURE__ */ React26.createElement("ul", __spreadProps(__spreadValues({}, rest), {
+  }, title), /* @__PURE__ */ React28.createElement("ul", __spreadProps(__spreadValues({}, rest), {
     role: "group",
     className: classNames(tw("flex flex-col"), className)
   })));
 };
 var Divider = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React26.createElement("li", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React28.createElement("li", __spreadProps(__spreadValues({
     role: "separator"
   }, rest), {
     className: classNames(tw("border-t-2 border-grey-5"), className)
@@ -7422,9 +7523,9 @@ var Divider = (_a) => {
 };
 var Item2 = (_a) => {
   var _b = _a, { className, active } = _b, rest = __objRest(_b, ["className", "active"]);
-  return /* @__PURE__ */ React26.createElement("li", {
+  return /* @__PURE__ */ React28.createElement("li", {
     role: "presentation"
-  }, /* @__PURE__ */ React26.createElement("a", __spreadProps(__spreadValues({}, rest), {
+  }, /* @__PURE__ */ React28.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", {
@@ -7442,10 +7543,10 @@ Navigation.Item = Item2;
 Navigation.Divider = Divider;
 
 // src/atoms/Popover/Popover.tsx
-import React27 from "react";
-var PopoverPanel = React27.forwardRef((_a, ref) => {
+import React29 from "react";
+var PopoverPanel = React29.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ React27.createElement("div", __spreadValues({
+  return /* @__PURE__ */ React29.createElement("div", __spreadValues({
     ref,
     className: classNames(
       className,
@@ -7454,7 +7555,7 @@ var PopoverPanel = React27.forwardRef((_a, ref) => {
   }, props), children);
 });
 PopoverPanel.displayName = "Popover.Panel";
-var PopoverUnderlay = React27.forwardRef((props, ref) => /* @__PURE__ */ React27.createElement("div", __spreadProps(__spreadValues({
+var PopoverUnderlay = React29.forwardRef((props, ref) => /* @__PURE__ */ React29.createElement("div", __spreadProps(__spreadValues({
   ref
 }, props), {
   className: tw("fixed inset-0")
@@ -7466,23 +7567,23 @@ var Popover = {
 };
 
 // src/atoms/PopoverDialog/PopoverDialog.tsx
-import React28 from "react";
+import React30 from "react";
 var Header2 = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React28.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React30.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__ */ React28.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React30.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__ */ React28.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React30.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
     htmlTag: "div",
     variant: "caption",
     className: classNames(tw("px-5 overflow-y-auto"), className)
@@ -7490,13 +7591,13 @@ var Body = (_a) => {
 };
 var Footer2 = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React28.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React30.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__ */ React28.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React30.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("flex gap-4"), className)
   }), children);
 };
@@ -7509,11 +7610,11 @@ var PopoverDialog = {
 };
 
 // src/atoms/RadioButton/RadioButton.tsx
-import React29 from "react";
-var RadioButton = React29.forwardRef(
+import React31 from "react";
+var RadioButton = React31.forwardRef(
   (_a, ref) => {
     var _b = _a, { id, children, name, disabled = false, readOnly = false } = _b, props = __objRest(_b, ["id", "children", "name", "disabled", "readOnly"]);
-    return /* @__PURE__ */ React29.createElement("input", __spreadProps(__spreadValues({
+    return /* @__PURE__ */ React31.createElement("input", __spreadProps(__spreadValues({
       id,
       ref,
       type: "radio",
@@ -7537,7 +7638,7 @@ var RadioButton = React29.forwardRef(
 );
 
 // src/atoms/Select/Select.tsx
-import React30 from "react";
+import React32 from "react";
 var import_chevronDown3 = __toESM(require_chevronDown());
 var import_chevronUp2 = __toESM(require_chevronUp());
 var import_search2 = __toESM(require_search());
@@ -7557,16 +7658,16 @@ function isOptionDisabledBuiltin(option) {
 }
 var getValues = (children) => {
   var _a;
-  const values = React30.Children.map(children, (c) => {
+  const values = React32.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 = React30.forwardRef(
+var InputContainer = React32.forwardRef(
   (_a, ref) => {
     var _b = _a, { variant = "default", className } = _b, props = __objRest(_b, ["variant", "className"]);
-    return /* @__PURE__ */ React30.createElement("div", __spreadValues({
+    return /* @__PURE__ */ React32.createElement("div", __spreadValues({
       ref,
       className: classNames(
         className,
@@ -7585,9 +7686,9 @@ var InputContainer = React30.forwardRef(
     }, props));
   }
 );
-var Input = React30.forwardRef((_a, ref) => {
+var Input = React32.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React30.createElement("input", __spreadValues({
+  return /* @__PURE__ */ React32.createElement("input", __spreadValues({
     ref,
     type: "text",
     className: classNames(
@@ -7601,39 +7702,39 @@ var Input = React30.forwardRef((_a, ref) => {
     )
   }, props));
 });
-var Menu = React30.forwardRef(
+var Menu = React32.forwardRef(
   (_a, ref) => {
     var _b = _a, { maxHeight = "450px", className, children } = _b, props = __objRest(_b, ["maxHeight", "className", "children"]);
-    return /* @__PURE__ */ React30.createElement("ul", __spreadValues({
+    return /* @__PURE__ */ React32.createElement("ul", __spreadValues({
       ref,
       style: { maxHeight },
       className
     }, props), children);
   }
 );
-var NoResults = React30.forwardRef(
+var NoResults = React32.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, children } = _b, rest = __objRest(_b, ["className", "children"]);
-    return /* @__PURE__ */ React30.createElement("li", __spreadProps(__spreadValues({
+    return /* @__PURE__ */ React32.createElement("li", __spreadProps(__spreadValues({
       ref
     }, rest), {
       className: classNames(tw("p-3 text-grey-40 italic"), className)
     }), children);
   }
 );
-var EmptyStateContainer2 = React30.forwardRef((_a, ref) => {
+var EmptyStateContainer2 = React32.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ React30.createElement("li", __spreadValues({
+  return /* @__PURE__ */ React32.createElement("li", __spreadValues({
     ref,
     className: tw("border border-dashed border-grey-10 m-4 p-6")
   }, props), children);
 });
-var Divider2 = (props) => /* @__PURE__ */ React30.createElement("div", __spreadValues({
+var Divider2 = (props) => /* @__PURE__ */ React32.createElement("div", __spreadValues({
   className: tw("border-b-[1px] border-grey-5 mx-3 my-4")
 }, props));
-var Group2 = React30.forwardRef((_a, ref) => {
+var Group2 = React32.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ React30.createElement("li", __spreadValues({
+  return /* @__PURE__ */ React32.createElement("li", __spreadValues({
     ref,
     className: classNames(
       className,
@@ -7644,10 +7745,10 @@ var Group2 = React30.forwardRef((_a, ref) => {
     )
   }, props), children);
 });
-var Item3 = React30.forwardRef(
+var Item3 = React32.forwardRef(
   (_a, ref) => {
     var _b = _a, { highlighted, selected, className, children } = _b, props = __objRest(_b, ["highlighted", "selected", "className", "children"]);
-    return /* @__PURE__ */ React30.createElement("li", __spreadValues({
+    return /* @__PURE__ */ React32.createElement("li", __spreadValues({
       ref,
       className: classNames(className, "flex items-center gap-x-3 p-3 typography-small", {
         "cursor-pointer": !props.disabled,
@@ -7655,17 +7756,17 @@ var Item3 = React30.forwardRef(
         "text-grey-20": props.disabled,
         "hover:bg-grey-0": !props.disabled
       })
-    }, props), /* @__PURE__ */ React30.createElement("span", {
+    }, props), /* @__PURE__ */ React32.createElement("span", {
       className: tw("grow flex gap-x-3")
-    }, children), selected && /* @__PURE__ */ React30.createElement(InlineIcon, {
+    }, children), selected && /* @__PURE__ */ React32.createElement(InlineIcon, {
       icon: import_tick4.default
     }));
   }
 );
-var ActionItem = React30.forwardRef(
+var ActionItem = React32.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, dense, icon, onClick, children } = _b, props = __objRest(_b, ["className", "dense", "icon", "onClick", "children"]);
-    return /* @__PURE__ */ React30.createElement("li", __spreadValues({
+    return /* @__PURE__ */ React32.createElement("li", __spreadValues({
       ref,
       role: "button",
       onClick: () => !props.disabled && (onClick == null ? void 0 : onClick()),
@@ -7676,21 +7777,21 @@ var ActionItem = React30.forwardRef(
         "text-grey-20": props.disabled,
         "hover:text-primary-70": !props.disabled
       })
-    }, props), icon && /* @__PURE__ */ React30.createElement(InlineIcon, {
+    }, props), icon && /* @__PURE__ */ React32.createElement(InlineIcon, {
       icon
     }), children);
   }
 );
-var Toggle = React30.forwardRef((_a, ref) => {
+var Toggle = React32.forwardRef((_a, ref) => {
   var _b = _a, { hasFocus, isOpen } = _b, props = __objRest(_b, ["hasFocus", "isOpen"]);
   var _a2;
-  return /* @__PURE__ */ React30.createElement("button", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React32.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__ */ React30.createElement(InlineIcon, {
+  }), /* @__PURE__ */ React32.createElement(InlineIcon, {
     color: props.disabled ? "grey-40" : "grey-70",
     icon: hasFocus ? import_search2.default : isOpen ? import_chevronUp2.default : import_chevronDown3.default
   }));
@@ -7709,11 +7810,11 @@ var Select = {
 };
 
 // src/atoms/Stepper/Stepper.tsx
-import React31 from "react";
+import React33 from "react";
 var import_tick5 = __toESM(require_tick());
 var Stepper = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React31.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React33.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(className)
   }));
 };
@@ -7727,7 +7828,7 @@ var ConnectorContainer = (_a) => {
     "completed",
     "dense"
   ]);
-  return /* @__PURE__ */ React31.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React33.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       tw("absolute w-full -left-1/2", {
         "top-[3px] px-[14px]": Boolean(dense),
@@ -7739,7 +7840,7 @@ var ConnectorContainer = (_a) => {
 };
 var Connector = (_a) => {
   var _b = _a, { children, className, completed, dense } = _b, rest = __objRest(_b, ["children", "className", "completed", "dense"]);
-  return /* @__PURE__ */ React31.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React33.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       tw("w-full", {
         "bg-grey-20": !completed,
@@ -7753,7 +7854,7 @@ var Connector = (_a) => {
 };
 var Step = (_a) => {
   var _b = _a, { className, state } = _b, rest = __objRest(_b, ["className", "state"]);
-  return /* @__PURE__ */ React31.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React33.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       tw("flex flex-col items-center text-grey-90 relative text-center", {
         "text-grey-20": state === "inactive"
@@ -7774,13 +7875,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__ */ React31.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React33.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__ */ React31.createElement(InlineIcon, {
+  }), state === "completed" ? /* @__PURE__ */ React33.createElement(InlineIcon, {
     icon: import_tick5.default
   }) : dense ? null : children);
 };
@@ -7790,13 +7891,13 @@ ConnectorContainer.Connector = Connector;
 Stepper.ConnectorContainer = ConnectorContainer;
 
 // src/atoms/Switch/Switch.tsx
-import React32 from "react";
-var Switch = React32.forwardRef(
+import React34 from "react";
+var Switch = React34.forwardRef(
   (_a, ref) => {
     var _b = _a, { id, children, name, disabled = false, readOnly = false } = _b, props = __objRest(_b, ["id", "children", "name", "disabled", "readOnly"]);
-    return /* @__PURE__ */ React32.createElement("span", {
+    return /* @__PURE__ */ React34.createElement("span", {
       className: tw("relative inline-flex justify-center items-center self-center group")
-    }, /* @__PURE__ */ React32.createElement("input", __spreadProps(__spreadValues({
+    }, /* @__PURE__ */ React34.createElement("input", __spreadProps(__spreadValues({
       id,
       ref,
       type: "checkbox",
@@ -7815,7 +7916,7 @@ var Switch = React32.forwardRef(
       ),
       readOnly,
       disabled
-    })), /* @__PURE__ */ React32.createElement("span", {
+    })), /* @__PURE__ */ React34.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",
@@ -7828,32 +7929,32 @@ var Switch = React32.forwardRef(
 );
 
 // src/atoms/Table/Table.tsx
-import React33 from "react";
+import React35 from "react";
 var import_chevronDown4 = __toESM(require_chevronDown());
 var import_chevronUp3 = __toESM(require_chevronUp());
-var HeadContext = React33.createContext(null);
+var HeadContext = React35.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__ */ React33.createElement("table", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React35.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__ */ React33.createElement("thead", __spreadValues({}, rest), /* @__PURE__ */ React33.createElement("tr", null, /* @__PURE__ */ React33.createElement(HeadContext.Provider, {
+  return /* @__PURE__ */ React35.createElement("thead", __spreadValues({}, rest), /* @__PURE__ */ React35.createElement("tr", null, /* @__PURE__ */ React35.createElement(HeadContext.Provider, {
     value: { children, sticky }
   }, children)));
 };
 var TableBody = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ React33.createElement("tbody", __spreadValues({}, rest), children);
+  return /* @__PURE__ */ React35.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__ */ React33.createElement("tr", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React35.createElement("tr", __spreadProps(__spreadValues({}, rest), {
     className: classNames(rowClassNames, className)
   }), children);
 };
@@ -7880,15 +7981,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 = React33.useContext(HeadContext);
-  return headContext ? /* @__PURE__ */ React33.createElement("th", __spreadProps(__spreadValues({}, rest), {
+  const headContext = React35.useContext(HeadContext);
+  return headContext ? /* @__PURE__ */ React35.createElement("th", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       cellClassNames,
       getHeadCellClassNames(headContext.sticky, stickyColumn),
       getAlignClassNames(align),
       className
     )
-  }), children) : /* @__PURE__ */ React33.createElement("td", __spreadProps(__spreadValues({}, rest), {
+  }), children) : /* @__PURE__ */ React35.createElement("td", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       cellClassNames,
       getBodyCellClassNames(true, stickyColumn),
@@ -7899,11 +8000,11 @@ var TableCell = (_a) => {
 };
 var TableSelectCell = (_a) => {
   var _b = _a, { ariaLabel } = _b, props = __objRest(_b, ["ariaLabel"]);
-  return /* @__PURE__ */ React33.createElement(Table.Cell, {
+  return /* @__PURE__ */ React35.createElement(Table.Cell, {
     className: tw("leading-[0px]")
-  }, props.type === "radio" ? /* @__PURE__ */ React33.createElement(RadioButton, __spreadValues({
+  }, props.type === "radio" ? /* @__PURE__ */ React35.createElement(RadioButton, __spreadValues({
     "aria-label": ariaLabel
-  }, props)) : /* @__PURE__ */ React33.createElement(Checkbox, __spreadValues({
+  }, props)) : /* @__PURE__ */ React35.createElement(Checkbox, __spreadValues({
     "aria-label": ariaLabel
   }, props)));
 };
@@ -7913,39 +8014,39 @@ var getSortCellIconClassNames = (active) => {
 };
 var TableSortCell = (_a) => {
   var _b = _a, { children, direction = "none", onClick } = _b, rest = __objRest(_b, ["children", "direction", "onClick"]);
-  return /* @__PURE__ */ React33.createElement(Table.Cell, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React35.createElement(Table.Cell, __spreadProps(__spreadValues({}, rest), {
     "aria-sort": direction
-  }), /* @__PURE__ */ React33.createElement("span", {
+  }), /* @__PURE__ */ React35.createElement("span", {
     className: getSortCellButtonClassNames(rest.align),
     role: "button",
     tabIndex: -1,
     onClick
-  }, children, /* @__PURE__ */ React33.createElement("div", {
+  }, children, /* @__PURE__ */ React35.createElement("div", {
     "data-sort-icons": true,
     className: tw("flex flex-col", {
       "invisible group-hover:visible": direction === "none"
     })
-  }, /* @__PURE__ */ React33.createElement(InlineIcon, {
+  }, /* @__PURE__ */ React35.createElement(InlineIcon, {
     icon: import_chevronUp3.default,
     className: getSortCellIconClassNames(direction === "descending")
-  }), /* @__PURE__ */ React33.createElement(InlineIcon, {
+  }), /* @__PURE__ */ React35.createElement(InlineIcon, {
     icon: import_chevronDown4.default,
     className: getSortCellIconClassNames(direction === "ascending")
   }))));
 };
-var Item4 = ({ image, imageAlt, imageSize = 35, title, caption }) => /* @__PURE__ */ React33.createElement("div", {
+var Item4 = ({ image, imageAlt, imageSize = 35, title, caption }) => /* @__PURE__ */ React35.createElement("div", {
   className: tw("flex gap-4 items-center")
-}, image && /* @__PURE__ */ React33.createElement("img", {
+}, image && /* @__PURE__ */ React35.createElement("img", {
   src: image,
   alt: imageAlt,
   style: { width: imageSize, height: imageSize }
-}), /* @__PURE__ */ React33.createElement("div", null, title, caption && /* @__PURE__ */ React33.createElement(Typography2.Caption, null, caption)));
-Table.Head = React33.memo(TableHead);
-Table.Body = React33.memo(TableBody);
-Table.Row = React33.memo(TableRow);
-Table.Cell = React33.memo(TableCell);
-Table.SortCell = React33.memo(TableSortCell);
-Table.SelectCell = React33.memo(TableSelectCell);
+}), /* @__PURE__ */ React35.createElement("div", null, title, caption && /* @__PURE__ */ React35.createElement(Typography2.Caption, null, caption)));
+Table.Head = React35.memo(TableHead);
+Table.Body = React35.memo(TableBody);
+Table.Row = React35.memo(TableRow);
+Table.Cell = React35.memo(TableCell);
+Table.SortCell = React35.memo(TableSortCell);
+Table.SelectCell = React35.memo(TableSelectCell);
 export {
   Alert,
   Card,