@aivenio/aquarium 1.4.1 → 1.6.0

package/dist/system.mjs

@@ -1551,7 +1551,7 @@ __export(components_exports, {
   Box: () => Box,
   Breadcrumbs: () => Breadcrumbs,
   Button: () => Button,
-  Card: () => Card,
+  Card: () => Card2,
   Carousel: () => Carousel,
   Checkbox: () => Checkbox2,
   CheckboxGroup: () => CheckboxGroup,
@@ -1769,7 +1769,7 @@ var Menu = React2.forwardRef(
     return /* @__PURE__ */ React2.createElement("ul", __spreadValues({
       ref,
       style: { maxHeight },
-      className: classNames(className, tw("overflow-y-auto"))
+      className
     }, props), children);
   }
 );
@@ -1811,7 +1811,7 @@ var Item = React2.forwardRef(
     var _b = _a, { highlighted, selected, className, children } = _b, props = __objRest(_b, ["highlighted", "selected", "className", "children"]);
     return /* @__PURE__ */ React2.createElement("li", __spreadValues({
       ref,
-      className: classNames(className, "flex items-center gap-x-3 p-3", {
+      className: classNames(className, "flex items-center gap-x-3 p-3 typography-small", {
         "cursor-pointer": !props.disabled,
         "bg-grey-0": highlighted,
         "text-grey-20": props.disabled,
@@ -1831,7 +1831,7 @@ var ActionItem = React2.forwardRef(
       ref,
       role: "button",
       onClick: () => !props.disabled && (onClick == null ? void 0 : onClick()),
-      className: classNames(className, "flex items-center gap-x-3 text-primary-80", {
+      className: classNames(className, "flex items-center gap-x-3 typography-small text-primary-80", {
         "p-3": !dense,
         "px-3 py-2": dense,
         "cursor-pointer": !props.disabled,
@@ -3481,12 +3481,14 @@ var Skeleton = ({
 var AvatarStack = ({ images }) => /* @__PURE__ */ React15.createElement(Box, {
   display: "flex",
   className: tw("[&>*:not(:first-child)]:-ml-3")
-}, images.map((image) => image ? /* @__PURE__ */ React15.createElement(Avatar, {
-  key: image,
-  image
-}) : /* @__PURE__ */ React15.createElement(Avatar.Skeleton, {
-  key: image
-})));
+}, images.map(
+  (image, index) => image ? /* @__PURE__ */ React15.createElement(Avatar, {
+    key: image != null ? image : index,
+    image
+  }) : /* @__PURE__ */ React15.createElement(Avatar.Skeleton, {
+    key: image != null ? image : index
+  })
+));
 var Avatar = ({ image }) => /* @__PURE__ */ React15.createElement("img", {
   src: image,
   className: classNames(tw("w-[32px] h-[32px]"))
@@ -3662,7 +3664,7 @@ var createBanner = (displayName, opts = {}) => {
     }, omit3(action, "text")), action.text))), (props.layout === "vertical" || props.layout === void 0) && props.image !== void 0 && /* @__PURE__ */ React18.createElement(Banner.ImageContainer, null, props.image ? /* @__PURE__ */ React18.createElement("img", {
       src: props.image,
       alt: props.imageAlt,
-      className: tw("w-full bg-cover object-cover"),
+      className: tw("bg-cover object-cover", { "w-full": !props.imageWidth }),
       style: { width: props.imageWidth, height: props.imageHeight }
     }) : /* @__PURE__ */ React18.createElement(BannerImageSkeleton, null)), isDismissable && /* @__PURE__ */ React18.createElement(Banner.DismissContainer, {
       layout
@@ -3738,8 +3740,8 @@ var ActiveCrumb = asCrumb("span", "ActiveCrumb", { isActive: true });
 Breadcrumbs.Crumb = Crumb;
 
 // src/components/Card/Card.tsx
-import React23 from "react";
-import omit4 from "lodash/omit";
+import React25 from "react";
+import omit5 from "lodash/omit";
 
 // src/components/Chip/Chip.tsx
 import React21 from "react";
@@ -3851,7 +3853,7 @@ var ChipContainer = ({ dense, children }) => /* @__PURE__ */ React21.createEleme
   })
 }, React21.Children.map(
   children,
-  (child) => isComponentType(child, Chip2) || isComponentType(child, StatusChip) ? React21.cloneElement(child, { dense }) : void 0
+  (child) => isComponentType(child, Chip2) || isComponentType(child, StatusChip) || isComponentType(child, ChipSkeleton) ? React21.cloneElement(child, { dense }) : void 0
 ));
 
 // src/components/Typography/Typography.tsx
@@ -3970,8 +3972,164 @@ Typography2.SmallTextBold = (_a) => {
   }));
 };
 
+// src/common/Card/Card.tsx
+import React23 from "react";
+var Card = (_a) => {
+  var _b = _a, {
+    disabled,
+    fullWidth,
+    clickable,
+    className,
+    children
+  } = _b, rest = __objRest(_b, [
+    "disabled",
+    "fullWidth",
+    "clickable",
+    "className",
+    "children"
+  ]);
+  return /* @__PURE__ */ React23.createElement("div", __spreadProps(__spreadValues({}, rest), {
+    className: classNames(
+      tw("border-grey-5 border-[1px] rounded-[2px] relative p-5 flex flex-col gap-5", {
+        "w-[280px]": !fullWidth,
+        "w-full min-w-[280px]": Boolean(fullWidth),
+        "active:bg-grey-5 cursor-pointer hover:border-grey-50 focus:border-info-70": Boolean(clickable && !disabled),
+        "bg-grey-0 cursor-not-allowed focus:border-transparent": Boolean(disabled)
+      }),
+      className
+    )
+  }), children);
+};
+var ColorHighlight = (_a) => {
+  var _b = _a, { color, className } = _b, rest = __objRest(_b, ["color", "className"]);
+  return /* @__PURE__ */ React23.createElement(Box, __spreadProps(__spreadValues({}, rest), {
+    backgroundColor: color,
+    className: classNames(tw("h-1 w-full absolute top-0 left-0 right-0"), className)
+  }));
+};
+var ImageContainer = (_a) => {
+  var _b = _a, { className, fullSize } = _b, rest = __objRest(_b, ["className", "fullSize"]);
+  return /* @__PURE__ */ React23.createElement("div", __spreadProps(__spreadValues({}, rest), {
+    className: classNames(
+      tw("-mx-4", {
+        "-mt-4": Boolean(fullSize)
+      }),
+      className
+    )
+  }));
+};
+var Image = ({
+  image,
+  imageAlt,
+  fullSize
+}) => /* @__PURE__ */ React23.createElement("img", {
+  src: image,
+  alt: imageAlt,
+  className: tw("w-full bg-cover object-cover h-[174px]", {
+    "h-[225px]": Boolean(fullSize)
+  })
+});
+var Content = (_a) => {
+  var _b = _a, { className, dense } = _b, rest = __objRest(_b, ["className", "dense"]);
+  return /* @__PURE__ */ React23.createElement("div", __spreadProps(__spreadValues({}, rest), {
+    className: classNames(tw("flex flex-col", { "gap-4": !dense }), className)
+  }));
+};
+var Actions = (_a) => {
+  var _b = _a, { className, dense } = _b, rest = __objRest(_b, ["className", "dense"]);
+  return /* @__PURE__ */ React23.createElement("div", __spreadProps(__spreadValues({}, rest), {
+    className: classNames(tw("flex gap-3 items-center", { "pt-3 ": !dense }), className)
+  }));
+};
+Card.Content = Content;
+Card.Actions = Actions;
+Card.ImageContainer = ImageContainer;
+Card.Image = Image;
+Card.ColorHiglight = ColorHighlight;
+
+// src/components/Card/Compact.tsx
+import React24 from "react";
+import { omit as omit4 } from "lodash";
+var CompactCard = ({
+  title,
+  chips = [],
+  icon,
+  color,
+  action,
+  link,
+  onClick,
+  disabled,
+  fullWidth,
+  children
+}) => /* @__PURE__ */ React24.createElement(Card, {
+  onClick: disabled ? void 0 : onClick,
+  disabled,
+  fullWidth,
+  clickable: Boolean(onClick),
+  tabIndex: onClick ? 0 : -1
+}, color && /* @__PURE__ */ React24.createElement(Card.ColorHiglight, {
+  color
+}), chips.length > 0 && /* @__PURE__ */ React24.createElement(ChipContainer, {
+  dense: true
+}, chips.map((chip) => /* @__PURE__ */ React24.createElement(Chip2, {
+  key: chip,
+  text: chip
+}))), /* @__PURE__ */ React24.createElement(Box, {
+  display: "flex",
+  gap: "5"
+}, icon && /* @__PURE__ */ React24.createElement(Avatar, {
+  image: icon
+}), /* @__PURE__ */ React24.createElement(Card.Content, {
+  dense: true
+}, /* @__PURE__ */ React24.createElement(Typography2.SmallStrong, {
+  color: "black"
+}, title), /* @__PURE__ */ React24.createElement(Typography2.Caption, {
+  color: "grey-70"
+}, children))), (action || link) && /* @__PURE__ */ React24.createElement(Card.Actions, {
+  dense: true
+}, action && /* @__PURE__ */ React24.createElement(SecondaryButton, __spreadValues({
+  dense: true
+}, omit4(action, "text")), action.text), link && /* @__PURE__ */ React24.createElement(ExternalLinkButton, __spreadValues({
+  dense: true,
+  kind: "ghost"
+}, omit4(link, "text")), link.text)));
+var CompactSkeleton = ({
+  chips = true,
+  icon = true,
+  actions = true,
+  fullWidth = false
+}) => /* @__PURE__ */ React24.createElement(Card, {
+  fullWidth
+}, chips && /* @__PURE__ */ React24.createElement(ChipContainer, {
+  dense: true
+}, Array.from({ length: 5 }).map((_, idx) => /* @__PURE__ */ React24.createElement(Chip2.Skeleton, {
+  key: idx
+}))), /* @__PURE__ */ React24.createElement(Box, {
+  display: "flex",
+  gap: "5"
+}, icon && /* @__PURE__ */ React24.createElement(Avatar.Skeleton, null), /* @__PURE__ */ React24.createElement(Card.Content, {
+  dense: true
+}, /* @__PURE__ */ React24.createElement(Skeleton, {
+  width: 80,
+  height: 20
+}), /* @__PURE__ */ React24.createElement(Box, {
+  height: "1"
+}), /* @__PURE__ */ React24.createElement(Skeleton, {
+  width: 145,
+  height: 16
+}))), actions && /* @__PURE__ */ React24.createElement(Card.Actions, {
+  dense: true
+}, /* @__PURE__ */ React24.createElement(Skeleton, {
+  width: 115,
+  height: 25
+}), /* @__PURE__ */ React24.createElement(Skeleton, {
+  width: 60,
+  height: 25
+})));
+CompactCard.Skeleton = CompactSkeleton;
+
 // src/components/Card/Card.tsx
-var Card = ({
+var Card2 = ({
   title,
   description,
   chips = [],
@@ -3985,127 +4143,84 @@ var Card = ({
   disabled,
   fullWidth,
   children
-}) => /* @__PURE__ */ React23.createElement(CardContainer, {
-  onClick,
-  color,
+}) => /* @__PURE__ */ React25.createElement(Card, {
+  onClick: disabled ? void 0 : onClick,
   disabled,
-  fullWidth
-}, chips.length > 0 && /* @__PURE__ */ React23.createElement(ChipContainer, {
+  fullWidth,
+  clickable: Boolean(onClick),
+  tabIndex: onClick ? 0 : -1
+}, color && /* @__PURE__ */ React25.createElement(Card.ColorHiglight, {
+  color
+}), chips.length > 0 && /* @__PURE__ */ React25.createElement(ChipContainer, {
   dense: true
-}, chips.map((chip) => /* @__PURE__ */ React23.createElement(Chip2, {
+}, chips.map((chip) => /* @__PURE__ */ React25.createElement(Chip2, {
   key: chip,
   text: chip
-}))), icons.length > 0 && /* @__PURE__ */ React23.createElement(AvatarStack, {
+}))), icons.length > 0 && /* @__PURE__ */ React25.createElement(AvatarStack, {
   images: icons
-}), image !== void 0 && /* @__PURE__ */ React23.createElement(CardImage, {
+}), image !== void 0 && /* @__PURE__ */ React25.createElement(CardImage, {
   image,
   imageAlt,
   fullSize: chips.length === 0
-}), /* @__PURE__ */ React23.createElement(CardContent, null, /* @__PURE__ */ React23.createElement(CardTitle, null, title), /* @__PURE__ */ React23.createElement(CardBody, null, children || description)), (action || link) && /* @__PURE__ */ React23.createElement(CardActions, null, action && /* @__PURE__ */ React23.createElement(SecondaryButton, __spreadValues({
+}), /* @__PURE__ */ React25.createElement(Card.Content, null, /* @__PURE__ */ React25.createElement(Typography2.DefaultStrong, {
+  color: "black"
+}, title), /* @__PURE__ */ React25.createElement(Typography2.Caption, {
+  color: "grey-70"
+}, children || description)), (action || link) && /* @__PURE__ */ React25.createElement(Card.Actions, null, action && /* @__PURE__ */ React25.createElement(SecondaryButton, __spreadValues({
   dense: true
-}, omit4(action, "text")), action.text), link && /* @__PURE__ */ React23.createElement(ExternalLinkButton, __spreadValues({
+}, omit5(action, "text")), action.text), link && /* @__PURE__ */ React25.createElement(ExternalLinkButton, __spreadValues({
   dense: true,
   kind: "ghost"
-}, omit4(link, "text")), link.text)));
+}, omit5(link, "text")), link.text)));
 var CardSkeleton = ({
   chips = true,
   icons = false,
   image = !icons,
   actions = true,
   fullWidth = false
-}) => /* @__PURE__ */ React23.createElement(CardContainer, {
+}) => /* @__PURE__ */ React25.createElement(Card, {
   fullWidth
-}, chips && /* @__PURE__ */ React23.createElement(ChipContainer, {
+}, chips && /* @__PURE__ */ React25.createElement(ChipContainer, {
   dense: true
-}, Array.from({ length: 5 }).map((_, idx) => /* @__PURE__ */ React23.createElement(Chip2.Skeleton, {
+}, Array.from({ length: 5 }).map((_, idx) => /* @__PURE__ */ React25.createElement(Chip2.Skeleton, {
   key: idx
-}))), icons && /* @__PURE__ */ React23.createElement(AvatarStack, {
+}))), icons && /* @__PURE__ */ React25.createElement(AvatarStack, {
   images: [null]
-}), image && /* @__PURE__ */ React23.createElement(CardImage, {
+}), image && /* @__PURE__ */ React25.createElement(CardImage, {
   image: null,
   fullSize: !chips
-}), /* @__PURE__ */ React23.createElement(CardContent, null, /* @__PURE__ */ React23.createElement(Skeleton, {
+}), /* @__PURE__ */ React25.createElement(Card.Content, null, /* @__PURE__ */ React25.createElement(Skeleton, {
   width: 145,
   height: 25
-}), /* @__PURE__ */ React23.createElement(Skeleton, {
+}), /* @__PURE__ */ React25.createElement(Skeleton, {
   width: 145,
   height: 16
-})), actions && /* @__PURE__ */ React23.createElement(CardActions, null, /* @__PURE__ */ React23.createElement(Skeleton, {
+})), actions && /* @__PURE__ */ React25.createElement(Card.Actions, null, /* @__PURE__ */ React25.createElement(Skeleton, {
   width: 115,
   height: 25
-}), /* @__PURE__ */ React23.createElement(Skeleton, {
+}), /* @__PURE__ */ React25.createElement(Skeleton, {
   width: 60,
   height: 25
 })));
-Card.Skeleton = CardSkeleton;
-var CardContainer = ({
-  children,
-  onClick,
-  color,
-  disabled,
-  fullWidth = false
-}) => /* @__PURE__ */ React23.createElement(Box, {
-  borderWidth: 1,
-  borderRadius: 2,
-  className: classNames(
-    tw("border-grey-5", {
-      "w-[280px]": !fullWidth,
-      "w-full min-w-[280px]": fullWidth,
-      "active:bg-grey-5 cursor-pointer hover:border-grey-50 focus:border-info-70": Boolean(onClick && !disabled),
-      "bg-grey-0 cursor-not-allowed focus:border-transparent": Boolean(disabled)
-    })
-  ),
-  onClick: disabled ? void 0 : onClick,
-  tabIndex: onClick ? 0 : -1,
-  disabled
-}, color && /* @__PURE__ */ React23.createElement(Box, {
-  backgroundColor: color,
-  height: "1",
-  width: "full"
-}), /* @__PURE__ */ React23.createElement(Box, {
-  padding: "5",
-  display: "flex",
-  flexDirection: "column",
-  gap: "5"
-}, children));
-var CardImage = ({ image, imageAlt, fullSize }) => /* @__PURE__ */ React23.createElement(Box, {
-  marginX: "-4",
-  marginTop: fullSize ? "-4" : void 0
-}, image ? /* @__PURE__ */ React23.createElement("img", {
-  src: image,
-  alt: imageAlt,
-  className: tw("w-full bg-cover object-cover h-[174px]", {
-    "h-[225px]": fullSize
-  })
-}) : /* @__PURE__ */ React23.createElement(CardImage.Skeleton, {
+Card2.Skeleton = CardSkeleton;
+Card2.Compact = CompactCard;
+var CardImage = ({ image, imageAlt, fullSize }) => /* @__PURE__ */ React25.createElement(Card.ImageContainer, {
+  fullSize
+}, image ? /* @__PURE__ */ React25.createElement(Card.Image, {
+  image,
+  imageAlt,
+  fullSize
+}) : /* @__PURE__ */ React25.createElement(CardImage.Skeleton, {
   fullSize
 }));
-var CardImageSkeleton = ({ fullSize }) => /* @__PURE__ */ React23.createElement(Skeleton, {
+var CardImageSkeleton = ({ fullSize }) => /* @__PURE__ */ React25.createElement(Skeleton, {
   height: fullSize ? 225 : 174,
-  className: tw("w-full")
+  width: "100%"
 });
 CardImage.Skeleton = CardImageSkeleton;
-var CardContent = ({ children }) => /* @__PURE__ */ React23.createElement(Box, {
-  display: "flex",
-  flexDirection: "column",
-  gap: "4"
-}, children);
-var CardBody = ({ children }) => /* @__PURE__ */ React23.createElement(Typography2, {
-  variant: "caption",
-  color: "grey-70"
-}, children);
-var CardTitle = ({ children }) => /* @__PURE__ */ React23.createElement(Typography2, {
-  variant: "default-strong"
-}, children);
-var CardActions = ({ children }) => /* @__PURE__ */ React23.createElement(Box, {
-  paddingTop: "3",
-  display: "flex",
-  gap: "3",
-  alignItems: "center"
-}, children);
 
 // src/components/Carousel/Carousel.tsx
-import React24, { useEffect as useEffect3, useLayoutEffect, useRef as useRef2, useState as useState2 } from "react";
+import React26, { useEffect as useEffect3, useLayoutEffect, useRef as useRef2, useState as useState2 } from "react";
 var import_chevronLeft = __toESM(require_chevronLeft());
 var import_chevronRight = __toESM(require_chevronRight());
 var Carousel = ({
@@ -4116,7 +4231,7 @@ var Carousel = ({
 }) => {
   const containerRef = useRef2(null);
   const scrollbarContainerRef = useRef2(null);
-  const items = React24.Children.toArray(children);
+  const items = React26.Children.toArray(children);
   const [width, setWidth] = useState2(0);
   const [isUpdating, setIsUpdating] = useState2(false);
   const [currentPage, setCurrentPage] = useState2(currentPageProp != null ? currentPageProp : defaultPage);
@@ -4125,7 +4240,7 @@ var Carousel = ({
       var _a;
       const containerWidth = (_a = containerRef.current) == null ? void 0 : _a.getBoundingClientRect().width;
       if (containerWidth !== void 0 && width !== containerWidth) {
-        setWidth(containerWidth);
+        setWidth(Math.round(containerWidth));
       }
     };
     updateContainerWidth();
@@ -4166,30 +4281,30 @@ var Carousel = ({
       onPageChange && onPageChange(newPage);
     }
   };
-  return items.length > 0 ? /* @__PURE__ */ React24.createElement("div", {
+  return items.length > 0 ? /* @__PURE__ */ React26.createElement("div", {
     className: tw("w-full flex flex-col"),
     ref: containerRef
-  }, containerRef !== null && /* @__PURE__ */ React24.createElement("ul", {
+  }, containerRef !== null && /* @__PURE__ */ React26.createElement("ul", {
     ref: scrollbarContainerRef,
     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"
     )
-  }, width !== 0 && React24.Children.map(children, (child, index) => /* @__PURE__ */ React24.createElement(CarouselItem, {
+  }, width !== 0 && React26.Children.map(children, (child, index) => /* @__PURE__ */ React26.createElement(CarouselItem, {
     key: index,
     width,
     ariaHidden: index + 1 === currentPage ? void 0 : true
-  }, child))), /* @__PURE__ */ React24.createElement(Flexbox, {
+  }, child))), /* @__PURE__ */ React26.createElement(Flexbox, {
     direction: "row",
     justifyContent: "flex-end",
     alignItems: "center"
-  }, /* @__PURE__ */ React24.createElement(IconButton, {
+  }, /* @__PURE__ */ React26.createElement(IconButton, {
     "aria-label": "Previous",
     onClick: () => handleNavigationClick("left"),
     icon: import_chevronLeft.default,
     disabled: currentPage === 1
-  }), /* @__PURE__ */ React24.createElement(Typography2.Caption, null, `${currentPage}/${React24.Children.count(children)}`), /* @__PURE__ */ React24.createElement(IconButton, {
+  }), /* @__PURE__ */ React26.createElement(Typography2.Caption, null, `${currentPage}/${React26.Children.count(children)}`), /* @__PURE__ */ React26.createElement(IconButton, {
     "aria-label": "Next",
     onClick: () => handleNavigationClick("right"),
     icon: import_chevronRight.default,
@@ -4197,7 +4312,7 @@ var Carousel = ({
   }))) : null;
 };
 var CarouselItem = ({ width, children, ariaHidden }) => {
-  return /* @__PURE__ */ React24.createElement("li", {
+  return /* @__PURE__ */ React26.createElement("li", {
     style: { width },
     "aria-hidden": ariaHidden,
     className: tw("flex justify-center snap-start")
@@ -4205,10 +4320,10 @@ var CarouselItem = ({ width, children, ariaHidden }) => {
 };
 
 // src/components/Checkbox/Checkbox.tsx
-import React27 from "react";
+import React29 from "react";
 
 // src/components/ControlLabel/ControlLabel.tsx
-import React25 from "react";
+import React27 from "react";
 var ControlLabel = (_a) => {
   var _b = _a, {
     label,
@@ -4226,7 +4341,7 @@ var ControlLabel = (_a) => {
     "style"
   ]);
   const textClass = disabled ? "text-grey-40" : "text-grey-100";
-  return /* @__PURE__ */ React25.createElement("label", __spreadValues({
+  return /* @__PURE__ */ React27.createElement("label", __spreadValues({
     className: tw(
       "inline-grid grid-cols-[auto_1fr]",
       {
@@ -4236,9 +4351,9 @@ var ControlLabel = (_a) => {
       textClass
     ),
     style: __spreadValues({}, style)
-  }, rest), children, label && /* @__PURE__ */ React25.createElement("span", {
+  }, rest), children, label && /* @__PURE__ */ React27.createElement("span", {
     className: tw("typography-small self-center")
-  }, label), caption && /* @__PURE__ */ React25.createElement(Typography2, {
+  }, label), caption && /* @__PURE__ */ React27.createElement(Typography2, {
     className: tw("col-start-2"),
     variant: "caption",
     color: disabled ? "grey-40" : "grey-50"
@@ -4246,18 +4361,18 @@ var ControlLabel = (_a) => {
 };
 
 // src/common/Checkbox/Checkbox.tsx
-import React26 from "react";
+import React28 from "react";
 var import_minus = __toESM(require_minus());
 var import_tick2 = __toESM(require_tick());
-var Checkbox = React26.forwardRef(
+var Checkbox = React28.forwardRef(
   (_a, ref) => {
     var _b = _a, { id, children, name, disabled = false, readOnly = false, indeterminate = false } = _b, props = __objRest(_b, ["id", "children", "name", "disabled", "readOnly", "indeterminate"]);
-    return /* @__PURE__ */ React26.createElement("span", {
+    return /* @__PURE__ */ React28.createElement("span", {
       className: classNames(tw("inline-flex justify-center items-center self-center relative"), {
         "hover:border-grey-50 peer-checked:border-navyBlue-100": !disabled,
         "border-grey-5": disabled
       })
-    }, /* @__PURE__ */ React26.createElement("input", __spreadProps(__spreadValues({
+    }, /* @__PURE__ */ React28.createElement("input", __spreadProps(__spreadValues({
       id,
       ref,
       type: "checkbox",
@@ -4271,7 +4386,7 @@ var Checkbox = React26.forwardRef(
       ),
       readOnly,
       disabled
-    })), /* @__PURE__ */ React26.createElement(Icon, {
+    })), /* @__PURE__ */ React28.createElement(Icon, {
       icon: indeterminate ? import_minus.default : import_tick2.default,
       className: classNames(
         tw(
@@ -4290,12 +4405,12 @@ var Checkbox = React26.forwardRef(
 );
 
 // src/components/Checkbox/Checkbox.tsx
-var Checkbox2 = React27.forwardRef(
+var Checkbox2 = React29.forwardRef(
   (_a, ref) => {
     var _b = _a, { id, name, caption, readOnly = false, disabled = false, children, "aria-label": ariaLabel } = _b, props = __objRest(_b, ["id", "name", "caption", "readOnly", "disabled", "children", "aria-label"]);
     var _a2;
     const isChecked = (_a2 = props.checked) != null ? _a2 : props.defaultChecked;
-    return !readOnly || isChecked ? /* @__PURE__ */ React27.createElement(ControlLabel, {
+    return !readOnly || isChecked ? /* @__PURE__ */ React29.createElement(ControlLabel, {
       htmlFor: id,
       label: children,
       "aria-label": ariaLabel,
@@ -4303,7 +4418,7 @@ var Checkbox2 = React27.forwardRef(
       readOnly,
       disabled,
       style: { gap: "0 8px" }
-    }, !readOnly && /* @__PURE__ */ React27.createElement(Checkbox, __spreadProps(__spreadValues({
+    }, !readOnly && /* @__PURE__ */ React29.createElement(Checkbox, __spreadProps(__spreadValues({
       id,
       ref,
       name
@@ -4313,26 +4428,26 @@ var Checkbox2 = React27.forwardRef(
     }))) : null;
   }
 );
-var CheckboxSkeleton = () => /* @__PURE__ */ React27.createElement("div", {
+var CheckboxSkeleton = () => /* @__PURE__ */ React29.createElement("div", {
   className: tw("flex gap-3")
-}, /* @__PURE__ */ React27.createElement(Skeleton, {
+}, /* @__PURE__ */ React29.createElement(Skeleton, {
   height: 20,
   width: 20
-}), /* @__PURE__ */ React27.createElement(Skeleton, {
+}), /* @__PURE__ */ React29.createElement(Skeleton, {
   height: 20,
   width: 150
 }));
 Checkbox2.Skeleton = CheckboxSkeleton;
 
 // src/components/CheckboxGroup/CheckboxGroup.tsx
-import React34, { useState as useState3 } from "react";
+import React36, { useState as useState3 } from "react";
 import uniqueId from "lodash/uniqueId";
 
 // src/common/InputGroup/InputGroup.tsx
-import React29 from "react";
+import React31 from "react";
 
 // src/components/Grid/Grid.tsx
-import React28 from "react";
+import React30 from "react";
 var Grid = Tailwindify(
   ({
     htmlTag = "div",
@@ -4385,7 +4500,7 @@ var Grid = Tailwindify(
       gridRowEnd: rowEnd
     });
     const HtmlElement = htmlTag;
-    return /* @__PURE__ */ React28.createElement(HtmlElement, {
+    return /* @__PURE__ */ React30.createElement(HtmlElement, {
       style: __spreadValues(__spreadValues({}, hookStyle), style),
       className
     }, children);
@@ -4401,7 +4516,7 @@ var gridColumnStyles = {
 };
 var InputGroup = (_a) => {
   var _b = _a, { cols = "1", children } = _b, rest = __objRest(_b, ["cols", "children"]);
-  return /* @__PURE__ */ React29.createElement(Grid, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React31.createElement(Grid, __spreadProps(__spreadValues({}, rest), {
     display: "inline-grid",
     colGap: "l4",
     rowGap: "3",
@@ -4411,12 +4526,12 @@ var InputGroup = (_a) => {
 };
 
 // src/utils/form/Label/Label.tsx
-import React33 from "react";
+import React35 from "react";
 
 // src/utils/form/FormControl/FormControl.tsx
-import React30 from "react";
+import React32 from "react";
 var FormControl = ({ className, inline, children }) => {
-  return /* @__PURE__ */ React30.createElement(Flexbox, {
+  return /* @__PURE__ */ React32.createElement(Flexbox, {
     direction: "column",
     display: inline ? "inline-flex" : "flex",
     className
@@ -4424,14 +4539,14 @@ var FormControl = ({ className, inline, children }) => {
 };
 
 // src/utils/form/HelperText/HelperText.tsx
-import React32 from "react";
+import React34 from "react";
 import classNames3 from "classnames";
 import isNumber3 from "lodash/isNumber";
 
 // src/utils/form/CharCounter/CharCounter.tsx
-import React31 from "react";
+import React33 from "react";
 var CharCounter = ({ dense = true, length, maxLength, valid = true }) => {
-  return /* @__PURE__ */ React31.createElement("span", {
+  return /* @__PURE__ */ React33.createElement("span", {
     className: tw(
       `whitespace-nowrap`,
       valid ? "text-grey-50" : "text-error-70",
@@ -4453,34 +4568,34 @@ var HelperText = ({
   const hasMaxLength = isNumber3(maxLength) && maxLength > 0;
   const showMessage = hasError || hasMaxLength;
   if (!showMessage) {
-    return reserveSpaceForError ? /* @__PURE__ */ React32.createElement("p", {
+    return reserveSpaceForError ? /* @__PURE__ */ React34.createElement("p", {
       className: tw("block mt-1 mb-3 typography-caption")
     }, "\xA0") : null;
   }
-  return /* @__PURE__ */ React32.createElement(Grid, {
+  return /* @__PURE__ */ React34.createElement(Grid, {
     cols: "1",
     rows: "1",
     colGap: "3",
     alignItems: "start",
     autoCols: "min",
     className: tw("mt-1 mb-3")
-  }, /* @__PURE__ */ React32.createElement(GridItem, {
+  }, /* @__PURE__ */ React34.createElement(GridItem, {
     colStart: "1",
     colEnd: "2"
-  }, hasError && /* @__PURE__ */ React32.createElement("p", {
+  }, hasError && /* @__PURE__ */ React34.createElement("p", {
     id: messageId,
     className: tw("text-error-50 block typography-caption")
-  }, helperText)), /* @__PURE__ */ React32.createElement(GridItem, {
+  }, helperText)), /* @__PURE__ */ React34.createElement(GridItem, {
     colStart: "2",
     colEnd: "3",
     display: "flex"
-  }, isNumber3(length) && hasMaxLength && /* @__PURE__ */ React32.createElement(CharCounter, {
+  }, isNumber3(length) && hasMaxLength && /* @__PURE__ */ React34.createElement(CharCounter, {
     length,
     maxLength,
     valid: !error2
   })));
 };
-var Skeleton2 = ({ className, children }) => /* @__PURE__ */ React32.createElement("div", {
+var Skeleton2 = ({ className, children }) => /* @__PURE__ */ React34.createElement("div", {
   className: classNames3(className, "h-[25px]")
 }, children);
 HelperText.Skeleton = Skeleton2;
@@ -4494,35 +4609,35 @@ var LabelText = ({
   helpTooltip,
   helpTooltipPlacement
 }) => {
-  return /* @__PURE__ */ React33.createElement("span", {
+  return /* @__PURE__ */ React35.createElement("span", {
     className: tw("inline-block mb-2 typography-small-strong", {
       "text-grey-60": variant === "default",
       "text-error-50": variant === "error",
       "text-grey-40": variant === "disabled"
     })
-  }, labelText, required && /* @__PURE__ */ React33.createElement("span", {
+  }, labelText, required && /* @__PURE__ */ React35.createElement("span", {
     className: tw("text-error-50")
-  }, "*"), helpTooltip && /* @__PURE__ */ React33.createElement(Tooltip, {
+  }, "*"), helpTooltip && /* @__PURE__ */ React35.createElement(Tooltip, {
     content: helpTooltip,
     placement: helpTooltipPlacement
-  }, /* @__PURE__ */ React33.createElement("span", {
+  }, /* @__PURE__ */ React35.createElement("span", {
     className: tw("text-grey-30 flex items-center cursor-pointer ml-2")
-  }, /* @__PURE__ */ React33.createElement(InlineIcon, {
+  }, /* @__PURE__ */ React35.createElement(InlineIcon, {
     icon: import_questionMark.default,
     "data-testid": "icon-info"
   }))));
 };
 var Label = (props) => {
   const _a = props, { id, htmlFor, labelText, labelProps: _b = {} } = _a, labelProps = __objRest(_b, []), { "data-testid": dataTestid, children } = _a;
-  return /* @__PURE__ */ React33.createElement("label", __spreadValues({
+  return /* @__PURE__ */ React35.createElement("label", __spreadValues({
     id,
     className: tw("w-full"),
     "data-testid": dataTestid,
     htmlFor
-  }, labelProps), labelText && /* @__PURE__ */ React33.createElement(LabelText, __spreadValues({}, props)), children);
+  }, labelProps), labelText && /* @__PURE__ */ React35.createElement(LabelText, __spreadValues({}, props)), children);
 };
 var LabelSkeleton = () => {
-  return /* @__PURE__ */ React33.createElement(Skeleton, {
+  return /* @__PURE__ */ React35.createElement(Skeleton, {
     height: 20,
     width: 100,
     className: tw("mb-[7px]")
@@ -4555,15 +4670,15 @@ var LabelControl = (_a) => {
   ]);
   const legacyError = error2 !== void 0 && valid === false;
   const variant = !valid || legacyError ? "error" : disabled ? "disabled" : "default";
-  return /* @__PURE__ */ React33.createElement(FormControl, null, !fieldset && /* @__PURE__ */ React33.createElement(Label, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React35.createElement(FormControl, null, !fieldset && /* @__PURE__ */ React35.createElement(Label, __spreadProps(__spreadValues({}, rest), {
     variant
-  }), children), fieldset && /* @__PURE__ */ React33.createElement("fieldset", {
+  }), children), fieldset && /* @__PURE__ */ React35.createElement("fieldset", {
     id: rest.id
-  }, /* @__PURE__ */ React33.createElement("legend", {
+  }, /* @__PURE__ */ React35.createElement("legend", {
     className: tw("w-full mb-2")
-  }, /* @__PURE__ */ React33.createElement(LabelText, __spreadProps(__spreadValues({}, rest), {
+  }, /* @__PURE__ */ React35.createElement(LabelText, __spreadProps(__spreadValues({}, rest), {
     variant
-  }))), children), /* @__PURE__ */ React33.createElement(HelperText, {
+  }))), children), /* @__PURE__ */ React35.createElement(HelperText, {
     messageId,
     error: !valid,
     helperText,
@@ -4572,7 +4687,7 @@ var LabelControl = (_a) => {
     reserveSpaceForError
   }));
 };
-var LabelControlSkeleton = ({ children }) => /* @__PURE__ */ React33.createElement("div", null, /* @__PURE__ */ React33.createElement(Label.Skeleton, null), children, /* @__PURE__ */ React33.createElement(HelperText.Skeleton, null));
+var LabelControlSkeleton = ({ children }) => /* @__PURE__ */ React35.createElement("div", null, /* @__PURE__ */ React35.createElement(Label.Skeleton, null), children, /* @__PURE__ */ React35.createElement(HelperText.Skeleton, null));
 LabelControl.Skeleton = LabelControlSkeleton;
 var getLabelControlProps = (_a) => {
   var _b = _a, {
@@ -4608,7 +4723,7 @@ var getLabelControlProps = (_a) => {
 
 // src/components/CheckboxGroup/CheckboxGroup.tsx
 var isCheckbox = (c) => {
-  return React34.isValidElement(c) && c.type === Checkbox2;
+  return React36.isValidElement(c) && c.type === Checkbox2;
 };
 var CheckboxGroup = (_a) => {
   var _b = _a, {
@@ -4640,11 +4755,11 @@ var CheckboxGroup = (_a) => {
     setSelectedItems(updated);
     onChange == null ? void 0 : onChange(updated);
   };
-  return /* @__PURE__ */ React34.createElement(LabelControl, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ React36.createElement(LabelControl, __spreadValues(__spreadValues({
     fieldset: true
-  }, labelControlProps), errorProps), /* @__PURE__ */ React34.createElement(InputGroup, {
+  }, labelControlProps), errorProps), /* @__PURE__ */ React36.createElement(InputGroup, {
     cols
-  }, React34.Children.map(children, (c) => {
+  }, React36.Children.map(children, (c) => {
     var _a3, _b2;
     if (!isCheckbox(c)) {
       return null;
@@ -4652,7 +4767,7 @@ var CheckboxGroup = (_a) => {
     const str = (_a3 = c.props.value) == null ? void 0 : _a3.toString();
     const defaultChecked = defaultValue === void 0 ? void 0 : str !== void 0 && defaultValue.includes(str);
     const checked = value === void 0 ? void 0 : str !== void 0 && value.includes(str);
-    return React34.cloneElement(c, {
+    return React36.cloneElement(c, {
       defaultChecked,
       checked,
       onChange: (_b2 = c.props.onChange) != null ? _b2 : handleChange,
@@ -4662,16 +4777,16 @@ var CheckboxGroup = (_a) => {
   })));
 };
 var CheckboxGroupSkeleton = ({ options = 2 }) => {
-  return /* @__PURE__ */ React34.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React34.createElement("div", {
+  return /* @__PURE__ */ React36.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React36.createElement("div", {
     className: tw("flex flex-wrap flex-col gap-2")
-  }, Array.from({ length: options }).map((_, key) => /* @__PURE__ */ React34.createElement(Checkbox2.Skeleton, {
+  }, Array.from({ length: options }).map((_, key) => /* @__PURE__ */ React36.createElement(Checkbox2.Skeleton, {
     key
   }))));
 };
 CheckboxGroup.Skeleton = CheckboxGroupSkeleton;
 
 // src/components/ChoiceChip/ChoiceChip.tsx
-import React35, { useState as useState4 } from "react";
+import React37, { useState as useState4 } from "react";
 var ChoiceChip = (_a) => {
   var _b = _a, { text, dense, defaultValue, value, onChange } = _b, rest = __objRest(_b, ["text", "dense", "defaultValue", "value", "onChange"]);
   var _a2;
@@ -4685,7 +4800,7 @@ var ChoiceChip = (_a) => {
     setSelected(!selected);
     onChange == null ? void 0 : onChange(!selected);
   };
-  return /* @__PURE__ */ React35.createElement("span", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React37.createElement("span", __spreadProps(__spreadValues({
     role: "button",
     "aria-pressed": selected
   }, rest), {
@@ -4700,29 +4815,29 @@ var ChoiceChip = (_a) => {
 };
 
 // src/components/Combobox/Combobox.tsx
-import React38, { useEffect as useEffect4, useRef as useRef3, useState as useState5 } from "react";
+import React40, { useEffect as useEffect4, useRef as useRef3, useState as useState5 } from "react";
 import { useOverlayPosition as useOverlayPosition2 } from "@react-aria/overlays";
 import { useCombobox } from "downshift";
-import omit5 from "lodash/omit";
+import omit6 from "lodash/omit";
 import uniqueId2 from "lodash/uniqueId";
 import { matchSorter } from "match-sorter";
 
 // src/components/Popover/PopoverWrapper.tsx
-import React37 from "react";
+import React39 from "react";
 import { FocusScope } from "@react-aria/focus";
 import { DismissButton, OverlayContainer as OverlayContainer2, useModal, useOverlay } from "@react-aria/overlays";
 import { mergeProps as mergeProps2 } from "@react-aria/utils";
 
 // src/common/Popover/Popover.tsx
-import React36 from "react";
-var PopoverPanel = React36.forwardRef((_a, ref) => {
+import React38 from "react";
+var PopoverPanel = React38.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ React36.createElement("div", __spreadValues({
+  return /* @__PURE__ */ React38.createElement("div", __spreadValues({
     ref,
     className: classNames(
       className,
       tw(
-        "rounded-sm shadow-16dp bg-white mt-1 focus-visible:outline-0 focus-visible:border-info-70 border border-grey-20"
+        "rounded-sm shadow-16dp bg-white mt-1 focus-visible:outline-0 focus-visible:border-info-70 border border-grey-20 overflow-y-auto"
       )
     )
   }, props), children);
@@ -4732,7 +4847,7 @@ var Popover = {
 };
 
 // src/components/Popover/PopoverWrapper.tsx
-var PopoverWrapper = React37.forwardRef((props, ref) => {
+var PopoverWrapper = React39.forwardRef((props, ref) => {
   const _a = props, {
     id,
     children,
@@ -4745,7 +4860,8 @@ var PopoverWrapper = React37.forwardRef((props, ref) => {
     isNonModal = true,
     isDismissable,
     autoFocus,
-    containFocus
+    containFocus,
+    className
   } = _a, otherProps = __objRest(_a, [
     "id",
     "children",
@@ -4758,7 +4874,8 @@ var PopoverWrapper = React37.forwardRef((props, ref) => {
     "isNonModal",
     "isDismissable",
     "autoFocus",
-    "containFocus"
+    "containFocus",
+    "className"
   ]);
   const { overlayProps } = useOverlay(
     __spreadProps(__spreadValues({}, props), { isDismissable: isDismissable && isOpen }),
@@ -4770,16 +4887,17 @@ var PopoverWrapper = React37.forwardRef((props, ref) => {
   if (!props.isOpen) {
     return null;
   }
-  return /* @__PURE__ */ React37.createElement(OverlayContainer2, null, /* @__PURE__ */ React37.createElement(FocusScope, {
+  return /* @__PURE__ */ React39.createElement(OverlayContainer2, null, /* @__PURE__ */ React39.createElement(FocusScope, {
     restoreFocus: true,
     autoFocus,
     contain: containFocus
-  }, /* @__PURE__ */ React37.createElement(Popover.Panel, __spreadProps(__spreadValues({
+  }, /* @__PURE__ */ React39.createElement(Popover.Panel, __spreadProps(__spreadValues({
     ref,
     role: "dialog"
   }, mergeProps2(otherProps, modalProps, overlayProps)), {
-    id: id != null ? id : overlayProps.id
-  }), children, /* @__PURE__ */ React37.createElement(DismissButton, {
+    id: id != null ? id : overlayProps.id,
+    className
+  }), children, /* @__PURE__ */ React39.createElement(DismissButton, {
     onDismiss: props.onClose
   }))));
 });
@@ -4843,7 +4961,8 @@ var ComboboxBase = (_a) => {
     inputValue,
     getItemProps,
     selectedItem,
-    closeMenu
+    closeMenu,
+    openMenu
   } = useCombobox({
     id,
     selectedItem: value,
@@ -4878,22 +4997,21 @@ var ComboboxBase = (_a) => {
   const hasNoResults = options.length === 0 || inputItems.length === 0;
   const width = (_a2 = targetRef.current) == null ? void 0 : _a2.offsetWidth;
   const style = isOpen ? __spreadProps(__spreadValues({}, overlayProps.style), { width }) : { display: "none" };
-  return /* @__PURE__ */ React38.createElement("div", {
+  return /* @__PURE__ */ React40.createElement("div", {
     className: tw("relative")
-  }, /* @__PURE__ */ React38.createElement(Select.InputContainer, {
+  }, /* @__PURE__ */ React40.createElement(Select.InputContainer, {
     ref: targetRef,
     variant: disabled ? "disabled" : !valid ? "error" : readOnly ? "readOnly" : hasFocus ? "focused" : "default"
-  }, /* @__PURE__ */ React38.createElement(Select.Input, __spreadProps(__spreadValues(__spreadValues({
+  }, /* @__PURE__ */ React40.createElement(Select.Input, __spreadProps(__spreadValues(__spreadValues({
     id,
     name,
     placeholder: readOnly ? void 0 : placeholder
   }, inputProps), props), {
     disabled,
     readOnly,
-    onFocus: (e) => {
-      var _a3;
+    onClick: readOnly ? void 0 : openMenu,
+    onFocus: () => {
       setFocus(true);
-      (_a3 = inputProps.onFocus) == null ? void 0 : _a3.call(inputProps, e);
     },
     onBlur: (e) => {
       var _a3;
@@ -4906,25 +5024,26 @@ var ComboboxBase = (_a) => {
       (_a3 = inputProps.onKeyDown) == null ? void 0 : _a3.call(inputProps, e);
     },
     onKeyUp: (e) => e.stopPropagation()
-  })), !readOnly && /* @__PURE__ */ React38.createElement(Select.Toggle, __spreadValues({
+  })), !readOnly && /* @__PURE__ */ React40.createElement(Select.Toggle, __spreadValues({
     hasFocus,
     isOpen
-  }, getToggleButtonProps({ disabled })))), /* @__PURE__ */ React38.createElement(PopoverWrapper, __spreadProps(__spreadValues({
+  }, getToggleButtonProps({ disabled })))), /* @__PURE__ */ React40.createElement(PopoverWrapper, __spreadProps(__spreadValues({
     isOpen: true,
     isDismissable: true,
     autoFocus: true
   }, getMenuProps({ ref: overlayRef })), {
     style,
-    onClose: closeMenu
-  }), /* @__PURE__ */ React38.createElement(Select.Menu, {
+    onClose: closeMenu,
+    className: tw("overflow-y-auto")
+  }), /* @__PURE__ */ React40.createElement(Select.Menu, {
     maxHeight
-  }, isOpen && hasNoResults && /* @__PURE__ */ React38.createElement(Select.NoResults, null, noResults), isOpen && inputItems.map((item, index) => /* @__PURE__ */ React38.createElement(Select.Item, __spreadValues({
+  }, isOpen && hasNoResults && /* @__PURE__ */ React40.createElement(Select.NoResults, null, noResults), isOpen && inputItems.map((item, index) => /* @__PURE__ */ React40.createElement(Select.Item, __spreadValues({
     key: itemToString(item),
     selected: item === selectedItem,
     highlighted: index === highlightedIndex
   }, getItemProps({ item, index, disabled: isOptionDisabled(item, index) })), renderOption(item))))));
 };
-var ComboboxSkeleton = () => /* @__PURE__ */ React38.createElement(Skeleton, {
+var ComboboxSkeleton = () => /* @__PURE__ */ React40.createElement(Skeleton, {
   height: 38
 });
 ComboboxBase.Skeleton = ComboboxSkeleton;
@@ -4941,12 +5060,12 @@ var Combobox = (_a) => {
   const errorMessageId = uniqueId2();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const labelControlProps = getLabelControlProps(props);
-  const baseProps = omit5(props, Object.keys(labelControlProps));
-  return /* @__PURE__ */ React38.createElement(LabelControl, __spreadValues({
+  const baseProps = omit6(props, Object.keys(labelControlProps));
+  return /* @__PURE__ */ React40.createElement(LabelControl, __spreadValues({
     id: `${id.current}-label`,
     htmlFor: `${id.current}-input`,
     messageId: errorMessageId
-  }, labelControlProps), /* @__PURE__ */ React38.createElement(ComboboxBase, __spreadProps(__spreadValues(__spreadValues({}, baseProps), errorProps), {
+  }, labelControlProps), /* @__PURE__ */ React40.createElement(ComboboxBase, __spreadProps(__spreadValues(__spreadValues({}, baseProps), errorProps), {
     id: id.current,
     options,
     noResults,
@@ -4954,11 +5073,11 @@ var Combobox = (_a) => {
     valid: props.valid
   })));
 };
-Combobox.Skeleton = () => /* @__PURE__ */ React38.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React38.createElement(ComboboxBase.Skeleton, null));
+Combobox.Skeleton = () => /* @__PURE__ */ React40.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React40.createElement(ComboboxBase.Skeleton, null));
 
 // src/components/Container/Container.tsx
-import React39 from "react";
-var Container2 = ({ maxWidth = "xl", children }) => /* @__PURE__ */ React39.createElement(Box, {
+import React41 from "react";
+var Container2 = ({ maxWidth = "xl", children }) => /* @__PURE__ */ React41.createElement(Box, {
   marginLeft: "auto",
   marginRight: "auto",
   width: "full",
@@ -4972,11 +5091,11 @@ var Container2 = ({ maxWidth = "xl", children }) => /* @__PURE__ */ React39.crea
 }, children);
 
 // src/components/DataList/DataList.tsx
-import React45 from "react";
+import React47 from "react";
 import orderBy2 from "lodash/orderBy";
 
 // src/components/Template/Template.tsx
-import React40 from "react";
+import React42 from "react";
 var Template = ({
   children,
   columns,
@@ -5002,23 +5121,23 @@ var Template = ({
     rowGap,
     columnGap
   });
-  return /* @__PURE__ */ React40.createElement("div", {
+  return /* @__PURE__ */ React42.createElement("div", {
     style: __spreadValues({}, styles)
   }, children);
 };
 
 // src/common/DataList/DataList.tsx
-import React43 from "react";
+import React45 from "react";
 
 // src/common/Table/Table.tsx
-import React42 from "react";
+import React44 from "react";
 
 // src/common/RadioButton/RadioButton.tsx
-import React41 from "react";
-var RadioButton = React41.forwardRef(
+import React43 from "react";
+var RadioButton = React43.forwardRef(
   (_a, ref) => {
     var _b = _a, { id, children, name, disabled = false, readOnly = false } = _b, props = __objRest(_b, ["id", "children", "name", "disabled", "readOnly"]);
-    return /* @__PURE__ */ React41.createElement("input", __spreadProps(__spreadValues({
+    return /* @__PURE__ */ React43.createElement("input", __spreadProps(__spreadValues({
       id,
       ref,
       type: "radio",
@@ -5044,29 +5163,29 @@ var RadioButton = React41.forwardRef(
 // src/common/Table/Table.tsx
 var import_chevronDown3 = __toESM(require_chevronDown());
 var import_chevronUp2 = __toESM(require_chevronUp());
-var HeadContext = React42.createContext(null);
+var HeadContext = React44.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__ */ React42.createElement("table", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React44.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__ */ React42.createElement("thead", __spreadValues({}, rest), /* @__PURE__ */ React42.createElement("tr", null, /* @__PURE__ */ React42.createElement(HeadContext.Provider, {
+  return /* @__PURE__ */ React44.createElement("thead", __spreadValues({}, rest), /* @__PURE__ */ React44.createElement("tr", null, /* @__PURE__ */ React44.createElement(HeadContext.Provider, {
     value: { children, sticky }
   }, children)));
 };
 var TableBody = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ React42.createElement("tbody", __spreadValues({}, rest), children);
+  return /* @__PURE__ */ React44.createElement("tbody", __spreadValues({}, rest), children);
 };
 var rowClassNames = tw("children:border-grey-10 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__ */ React42.createElement("tr", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React44.createElement("tr", __spreadProps(__spreadValues({}, rest), {
     className: classNames(rowClassNames, className)
   }), children);
 };
@@ -5082,25 +5201,25 @@ var getHeadCellClassNames = (sticky = true) => {
 };
 var TableCell = (_a) => {
   var _b = _a, { children, className, align = "left" } = _b, rest = __objRest(_b, ["children", "className", "align"]);
-  const headContext = React42.useContext(HeadContext);
-  return headContext ? /* @__PURE__ */ React42.createElement("th", __spreadProps(__spreadValues({}, rest), {
+  const headContext = React44.useContext(HeadContext);
+  return headContext ? /* @__PURE__ */ React44.createElement("th", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       cellClassNames,
       getHeadCellClassNames(headContext.sticky),
       getAlignClassNames(align),
       className
     )
-  }), children) : /* @__PURE__ */ React42.createElement("td", __spreadProps(__spreadValues({}, rest), {
+  }), children) : /* @__PURE__ */ React44.createElement("td", __spreadProps(__spreadValues({}, rest), {
     className: classNames(cellClassNames, getBodyCellClassNames(), getAlignClassNames(align), className)
   }), children);
 };
 var TableSelectCell = (_a) => {
   var _b = _a, { ariaLabel } = _b, props = __objRest(_b, ["ariaLabel"]);
-  return /* @__PURE__ */ React42.createElement(Table.Cell, {
+  return /* @__PURE__ */ React44.createElement(Table.Cell, {
     className: tw("leading-[0px]")
-  }, props.type === "radio" ? /* @__PURE__ */ React42.createElement(RadioButton, __spreadValues({
+  }, props.type === "radio" ? /* @__PURE__ */ React44.createElement(RadioButton, __spreadValues({
     "aria-label": ariaLabel
-  }, props)) : /* @__PURE__ */ React42.createElement(Checkbox, __spreadValues({
+  }, props)) : /* @__PURE__ */ React44.createElement(Checkbox, __spreadValues({
     "aria-label": ariaLabel
   }, props)));
 };
@@ -5110,39 +5229,39 @@ var getSortCellIconClassNames = (active) => {
 };
 var TableSortCell = (_a) => {
   var _b = _a, { children, direction = "none", onClick } = _b, rest = __objRest(_b, ["children", "direction", "onClick"]);
-  return /* @__PURE__ */ React42.createElement(Table.Cell, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React44.createElement(Table.Cell, __spreadProps(__spreadValues({}, rest), {
     "aria-sort": direction
-  }), /* @__PURE__ */ React42.createElement("span", {
+  }), /* @__PURE__ */ React44.createElement("span", {
     className: getSortCellButtonClassNames(rest.align),
     role: "button",
     tabIndex: -1,
     onClick
-  }, children, /* @__PURE__ */ React42.createElement("div", {
+  }, children, /* @__PURE__ */ React44.createElement("div", {
     "data-sort-icons": true,
     className: tw("flex flex-col", {
       "invisible group-hover:visible": direction === "none"
     })
-  }, /* @__PURE__ */ React42.createElement(InlineIcon, {
+  }, /* @__PURE__ */ React44.createElement(InlineIcon, {
     icon: import_chevronUp2.default,
     className: getSortCellIconClassNames(direction === "descending")
-  }), /* @__PURE__ */ React42.createElement(InlineIcon, {
+  }), /* @__PURE__ */ React44.createElement(InlineIcon, {
     icon: import_chevronDown3.default,
     className: getSortCellIconClassNames(direction === "ascending")
   }))));
 };
-var Item2 = ({ image, imageAlt, imageSize = 35, title, caption }) => /* @__PURE__ */ React42.createElement("div", {
+var Item2 = ({ image, imageAlt, imageSize = 35, title, caption }) => /* @__PURE__ */ React44.createElement("div", {
   className: tw("flex gap-4 items-center")
-}, image && /* @__PURE__ */ React42.createElement("img", {
+}, image && /* @__PURE__ */ React44.createElement("img", {
   src: image,
   alt: imageAlt,
   style: { width: imageSize, height: imageSize }
-}), /* @__PURE__ */ React42.createElement("div", null, title, caption && /* @__PURE__ */ React42.createElement(Typography2.Caption, null, caption)));
-Table.Head = React42.memo(TableHead);
-Table.Body = React42.memo(TableBody);
-Table.Row = React42.memo(TableRow);
-Table.Cell = React42.memo(TableCell);
-Table.SortCell = React42.memo(TableSortCell);
-Table.SelectCell = React42.memo(TableSelectCell);
+}), /* @__PURE__ */ React44.createElement("div", null, title, caption && /* @__PURE__ */ React44.createElement(Typography2.Caption, null, caption)));
+Table.Head = React44.memo(TableHead);
+Table.Body = React44.memo(TableBody);
+Table.Row = React44.memo(TableRow);
+Table.Cell = React44.memo(TableCell);
+Table.SortCell = React44.memo(TableSortCell);
+Table.SelectCell = React44.memo(TableSelectCell);
 
 // src/common/DataList/DataList.tsx
 var import_chevronDown4 = __toESM(require_chevronDown());
@@ -5154,7 +5273,7 @@ var getAlignClassNames2 = (align) => tw("flex items-center", {
 });
 var DataList = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React43.createElement("div", __spreadValues({}, rest));
+  return /* @__PURE__ */ React45.createElement("div", __spreadValues({}, rest));
 };
 var HeadCell = (_a) => {
   var _b = _a, {
@@ -5166,14 +5285,14 @@ var HeadCell = (_a) => {
     "sticky",
     "align"
   ]);
-  return /* @__PURE__ */ React43.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React45.createElement("div", __spreadProps(__spreadValues({}, rest), {
     role: "cell",
     className: classNames(cellClassNames, getHeadCellClassNames(sticky), getAlignClassNames2(align), className)
   }));
 };
 var Cell = (_a) => {
   var _b = _a, { className, align } = _b, rest = __objRest(_b, ["className", "align"]);
-  return /* @__PURE__ */ React43.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React45.createElement("div", __spreadProps(__spreadValues({}, rest), {
     role: "cell",
     className: classNames(
       cellClassNames,
@@ -5186,30 +5305,31 @@ var Cell = (_a) => {
 };
 var Row = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React43.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React45.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("contents group"), className),
     role: "row"
   }));
 };
 var SortCell = (_a) => {
-  var _b = _a, { children, direction = "none", onClick } = _b, rest = __objRest(_b, ["children", "direction", "onClick"]);
-  return /* @__PURE__ */ React43.createElement(HeadCell, __spreadProps(__spreadValues({}, rest), {
+  var _b = _a, { children, direction = "none", onClick, sticky } = _b, rest = __objRest(_b, ["children", "direction", "onClick", "sticky"]);
+  return /* @__PURE__ */ React45.createElement(HeadCell, __spreadProps(__spreadValues({}, rest), {
     "aria-sort": direction,
-    role: "cell"
-  }), /* @__PURE__ */ React43.createElement("span", {
+    role: "cell",
+    sticky
+  }), /* @__PURE__ */ React45.createElement("span", {
     className: getSortCellButtonClassNames(rest.align),
     role: "button",
     tabIndex: -1,
     onClick
-  }, children, /* @__PURE__ */ React43.createElement("div", {
+  }, children, /* @__PURE__ */ React45.createElement("div", {
     "data-sort-icons": true,
     className: tw("flex flex-col", {
       "invisible group-hover:visible": direction === "none"
     })
-  }, /* @__PURE__ */ React43.createElement(InlineIcon, {
+  }, /* @__PURE__ */ React45.createElement(InlineIcon, {
     icon: import_chevronUp3.default,
     className: getSortCellIconClassNames(direction === "descending")
-  }), /* @__PURE__ */ React43.createElement(InlineIcon, {
+  }), /* @__PURE__ */ React45.createElement(InlineIcon, {
     icon: import_chevronDown4.default,
     className: getSortCellIconClassNames(direction === "ascending")
   }))));
@@ -5235,9 +5355,9 @@ var cellProps = (column) => ({
 });
 
 // src/utils/table/useTableSort.tsx
-import React44 from "react";
+import React46 from "react";
 var useTableSort = () => {
-  const [sort, setSort] = React44.useState();
+  const [sort, setSort] = React46.useState();
   const handleSortClick = (field) => {
     if ((sort == null ? void 0 : sort.key) === field) {
       if (sort.direction === "ascending") {
@@ -5253,47 +5373,50 @@ var useTableSort = () => {
 };
 
 // src/components/DataList/DataList.tsx
-var DataList2 = ({ columns, rows }) => {
+var DataList2 = ({ columns, rows, sticky }) => {
   const [sort, updateSort] = useTableSort();
   const sortedRows = orderBy2(rows, [sort == null ? void 0 : sort.key], [toSortDirection(sort == null ? void 0 : sort.direction)]);
   const templateColumns = columns.map((column) => {
     var _a;
     return (_a = column.width) != null ? _a : "auto";
   });
-  return /* @__PURE__ */ React45.createElement(Template, {
+  return /* @__PURE__ */ React47.createElement(Template, {
     columns: templateColumns
   }, columns.map(
-    (column) => (column.type === "text" || column.type === "number") && column.sortable ? /* @__PURE__ */ React45.createElement(DataList.SortCell, __spreadValues({
+    (column) => (column.type === "text" || column.type === "number") && column.sortable ? /* @__PURE__ */ React47.createElement(DataList.SortCell, __spreadValues({
       direction: sort && sort.key === column.field ? sort.direction : "none",
-      onClick: () => updateSort(column.field)
-    }, cellProps(column)), column.headerName) : /* @__PURE__ */ React45.createElement(DataList.HeadCell, __spreadValues({}, cellProps(column)), column.headerName)
-  ), /* @__PURE__ */ React45.createElement(List, {
+      onClick: () => updateSort(column.field),
+      sticky
+    }, cellProps(column)), column.headerName) : /* @__PURE__ */ React47.createElement(DataList.HeadCell, __spreadProps(__spreadValues({}, cellProps(column)), {
+      sticky
+    }), column.headerName)
+  ), /* @__PURE__ */ React47.createElement(List, {
     items: sortedRows,
-    renderItem: (row, index) => /* @__PURE__ */ React45.createElement(DataList.Row, {
+    renderItem: (row, index) => /* @__PURE__ */ React47.createElement(DataList.Row, {
       key: row.id
-    }, /* @__PURE__ */ React45.createElement(List, {
+    }, /* @__PURE__ */ React47.createElement(List, {
       items: columns,
-      renderItem: (column) => column.type === "status" ? /* @__PURE__ */ React45.createElement(DataList.Cell, __spreadValues({}, cellProps(column)), /* @__PURE__ */ React45.createElement(StatusChip, __spreadValues({
+      renderItem: (column) => column.type === "status" ? /* @__PURE__ */ React47.createElement(DataList.Cell, __spreadValues({}, cellProps(column)), /* @__PURE__ */ React47.createElement(StatusChip, __spreadValues({
         dense: true
-      }, column.status(row, index, sortedRows)))) : column.type === "action" ? /* @__PURE__ */ React45.createElement(DataList.Cell, __spreadValues({}, cellProps(column)), /* @__PURE__ */ React45.createElement(SecondaryButton, __spreadValues({
+      }, column.status(row, index, sortedRows)))) : column.type === "action" ? /* @__PURE__ */ React47.createElement(DataList.Cell, __spreadValues({}, cellProps(column)), /* @__PURE__ */ React47.createElement(SecondaryButton, __spreadValues({
         dense: true
-      }, renameProperty("text", "children", column.action(row, index, sortedRows))))) : column.type === "custom" ? /* @__PURE__ */ React45.createElement(DataList.Cell, __spreadValues({}, cellProps(column)), column.UNSAFE_render(row, index, sortedRows)) : column.type === "item" ? /* @__PURE__ */ React45.createElement(DataList.Cell, null, /* @__PURE__ */ React45.createElement(Item2, __spreadValues({}, column.item(row, index, sortedRows)))) : /* @__PURE__ */ React45.createElement(DataList.Cell, __spreadValues({}, cellProps(column)), column.formatter ? column.formatter(row[column.field], row, index, sortedRows) : row[column.field])
+      }, renameProperty("text", "children", column.action(row, index, sortedRows))))) : column.type === "custom" ? /* @__PURE__ */ React47.createElement(DataList.Cell, __spreadValues({}, cellProps(column)), column.UNSAFE_render(row, index, sortedRows)) : column.type === "item" ? /* @__PURE__ */ React47.createElement(DataList.Cell, null, /* @__PURE__ */ React47.createElement(Item2, __spreadValues({}, column.item(row, index, sortedRows)))) : /* @__PURE__ */ React47.createElement(DataList.Cell, __spreadValues({}, cellProps(column)), column.formatter ? column.formatter(row[column.field], row, index, sortedRows) : row[column.field])
     }))
   }));
 };
 
 // src/components/DataTable/DataTable.tsx
-import React48 from "react";
+import React50 from "react";
 import orderBy3 from "lodash/orderBy";
 
 // src/components/Table/Table.tsx
-import React47 from "react";
+import React49 from "react";
 
 // src/utils/table/useScrollTarget.ts
-import React46 from "react";
+import React48 from "react";
 var useScrollTarget = (callback) => {
-  const targetRef = React46.useRef(null);
-  React46.useLayoutEffect(() => {
+  const targetRef = React48.useRef(null);
+  React48.useLayoutEffect(() => {
     const observer = new IntersectionObserver((entries) => entries[0].isIntersecting && callback && callback(), {
       root: null,
       rootMargin: `0px 0px 200px 0px`
@@ -5311,12 +5434,12 @@ var Table2 = (_a) => {
   var _b = _a, { children, onPrev, onNext } = _b, rest = __objRest(_b, ["children", "onPrev", "onNext"]);
   const bottomRef = useScrollTarget(onNext);
   const topRef = useScrollTarget(onPrev);
-  return /* @__PURE__ */ React47.createElement("div", {
+  return /* @__PURE__ */ React49.createElement("div", {
     className: "relative w-full"
-  }, /* @__PURE__ */ React47.createElement("div", {
+  }, /* @__PURE__ */ React49.createElement("div", {
     ref: topRef,
     className: tw("absolute top-0 h-1 w-full left-0 bg-transparent")
-  }), /* @__PURE__ */ React47.createElement(Table, __spreadValues({}, rest), children), /* @__PURE__ */ React47.createElement("div", {
+  }), /* @__PURE__ */ React49.createElement(Table, __spreadValues({}, rest), children), /* @__PURE__ */ React49.createElement("div", {
     ref: bottomRef,
     className: tw("absolute bottom-0 h-1 w-full left-0 bg-transparent")
   }));
@@ -5334,52 +5457,56 @@ var DataTable = (_a) => {
     columns,
     rows,
     noWrap = false,
-    layout = "auto"
+    layout = "auto",
+    sticky
   } = _b, rest = __objRest(_b, [
     "columns",
     "rows",
     "noWrap",
-    "layout"
+    "layout",
+    "sticky"
   ]);
   const [sort, updateSort] = useTableSort();
   const sortedRows = orderBy3(rows, [sort == null ? void 0 : sort.key], [toSortDirection(sort == null ? void 0 : sort.direction)]);
-  return /* @__PURE__ */ React48.createElement(Table2, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React50.createElement(Table2, __spreadProps(__spreadValues({}, rest), {
     className: tw({
       "whitespace-nowrap": noWrap,
       "table-auto": layout === "auto",
       "table-fixed": layout === "fixed"
     })
-  }), /* @__PURE__ */ React48.createElement(Table2.Head, null, columns.map(
-    (column) => (column.type === "text" || column.type === "number") && column.sortable ? /* @__PURE__ */ React48.createElement(Table2.SortCell, __spreadValues({
+  }), /* @__PURE__ */ React50.createElement(Table2.Head, {
+    sticky
+  }, columns.map(
+    (column) => (column.type === "text" || column.type === "number") && column.sortable ? /* @__PURE__ */ React50.createElement(Table2.SortCell, __spreadValues({
       direction: sort && sort.key === column.field ? sort.direction : "none",
       onClick: () => updateSort(column.field),
       style: { width: column.width }
-    }, cellProps(column)), column.headerName) : /* @__PURE__ */ React48.createElement(Table2.Cell, __spreadProps(__spreadValues({}, cellProps(column)), {
+    }, cellProps(column)), column.headerName) : /* @__PURE__ */ React50.createElement(Table2.Cell, __spreadProps(__spreadValues({}, cellProps(column)), {
       style: { width: column.width }
     }), column.headerName)
-  )), /* @__PURE__ */ React48.createElement(Table2.Body, null, /* @__PURE__ */ React48.createElement(List, {
+  )), /* @__PURE__ */ React50.createElement(Table2.Body, null, /* @__PURE__ */ React50.createElement(List, {
     items: sortedRows,
-    renderItem: (row, index) => /* @__PURE__ */ React48.createElement(Table2.Row, {
+    renderItem: (row, index) => /* @__PURE__ */ React50.createElement(Table2.Row, {
       key: row.id
-    }, /* @__PURE__ */ React48.createElement(List, {
+    }, /* @__PURE__ */ React50.createElement(List, {
       items: columns,
-      renderItem: (column) => column.type === "status" ? /* @__PURE__ */ React48.createElement(Table2.Cell, __spreadValues({}, cellProps(column)), /* @__PURE__ */ React48.createElement(StatusChip, __spreadValues({
+      renderItem: (column) => column.type === "status" ? /* @__PURE__ */ React50.createElement(Table2.Cell, __spreadValues({}, cellProps(column)), /* @__PURE__ */ React50.createElement(StatusChip, __spreadValues({
         dense: true
-      }, column.status(row, index, sortedRows)))) : column.type === "action" ? /* @__PURE__ */ React48.createElement(Table2.Cell, __spreadValues({}, cellProps(column)), /* @__PURE__ */ React48.createElement(SecondaryButton, __spreadValues({
+      }, column.status(row, index, sortedRows)))) : column.type === "action" ? /* @__PURE__ */ React50.createElement(Table2.Cell, __spreadValues({}, cellProps(column)), /* @__PURE__ */ React50.createElement(SecondaryButton, __spreadValues({
         dense: true
-      }, renameProperty("text", "children", column.action(row, index, sortedRows))))) : column.type === "custom" ? /* @__PURE__ */ React48.createElement(Table2.Cell, __spreadValues({}, cellProps(column)), column.UNSAFE_render(row, index, sortedRows)) : column.type === "item" ? /* @__PURE__ */ React48.createElement(Table2.Cell, __spreadValues({}, cellProps(column)), /* @__PURE__ */ React48.createElement(Item2, __spreadValues({}, column.item(row, index, sortedRows)))) : /* @__PURE__ */ React48.createElement(Table2.Cell, __spreadValues({}, cellProps(column)), column.formatter ? column.formatter(row[column.field], row, index, sortedRows) : row[column.field])
+      }, renameProperty("text", "children", column.action(row, index, sortedRows))))) : column.type === "custom" ? /* @__PURE__ */ React50.createElement(Table2.Cell, __spreadValues({}, cellProps(column)), column.UNSAFE_render(row, index, sortedRows)) : column.type === "item" ? /* @__PURE__ */ React50.createElement(Table2.Cell, __spreadValues({}, cellProps(column)), /* @__PURE__ */ React50.createElement(Item2, __spreadValues({}, column.item(row, index, sortedRows)))) : /* @__PURE__ */ React50.createElement(Table2.Cell, __spreadValues({}, cellProps(column)), column.formatter ? column.formatter(row[column.field], row, index, sortedRows) : row[column.field])
     }))
   })));
 };
 
 // src/components/Dialog/Dialog.tsx
-import React50 from "react";
+import React52 from "react";
 import { useDialog } from "@react-aria/dialog";
 import { FocusScope as FocusScope2 } from "@react-aria/focus";
 import { Overlay, useModalOverlay } from "@react-aria/overlays";
 import { useId } from "@react-aria/utils";
 import { useOverlayTriggerState as useOverlayTriggerState2 } from "@react-stately/overlays";
-import omit6 from "lodash/omit";
+import omit7 from "lodash/omit";
 
 // src/common/Dialog/Dialog.tsx
 var import_confirm2 = __toESM(require_confirm());
@@ -5401,10 +5528,10 @@ var DIALOG_ICONS_AND_COLORS = {
 };
 
 // src/common/Modal/Modal.tsx
-import React49 from "react";
+import React51 from "react";
 var Modal = (_a) => {
   var _b = _a, { children, className, open } = _b, rest = __objRest(_b, ["children", "className", "open"]);
-  return open ? /* @__PURE__ */ React49.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return open ? /* @__PURE__ */ React51.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       tw("inset-0 overflow-y-auto z-modal flex justify-center items-center fixed py-7"),
       className
@@ -5413,14 +5540,14 @@ var Modal = (_a) => {
 };
 Modal.BackDrop = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React49.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React51.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 = React49.forwardRef(
+Modal.Dialog = React51.forwardRef(
   (_a, ref) => {
     var _b = _a, { children, className, size = "sm" } = _b, rest = __objRest(_b, ["children", "className", "size"]);
-    return /* @__PURE__ */ React49.createElement("div", __spreadProps(__spreadValues({
+    return /* @__PURE__ */ React51.createElement("div", __spreadProps(__spreadValues({
       ref,
       "aria-modal": "true"
     }, rest), {
@@ -5438,31 +5565,31 @@ Modal.Dialog = React49.forwardRef(
 );
 Modal.Header = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React49.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React51.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__ */ React49.createElement("img", __spreadProps(__spreadValues({
+  return backgroundImage ? /* @__PURE__ */ React51.createElement("img", __spreadProps(__spreadValues({
     "aria-hidden": true,
     src: backgroundImage != null ? backgroundImage : void 0
   }, rest), {
     className: classNames(common, tw("object-cover"), className)
-  })) : /* @__PURE__ */ React49.createElement("div", {
+  })) : /* @__PURE__ */ React51.createElement("div", {
     className: classNames(common, tw("bg-grey-5"), className)
   });
 };
 Modal.CloseButtonContainer = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React49.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React51.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__ */ React49.createElement(Typography, __spreadValues({
+  return /* @__PURE__ */ React51.createElement(Typography, __spreadValues({
     htmlTag: "h2",
     variant: "subheading",
     color: "grey-90",
@@ -5471,33 +5598,33 @@ Modal.Title = (_a) => {
 };
 Modal.Subtitle = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ React49.createElement(Typography, __spreadValues({
+  return /* @__PURE__ */ React51.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__ */ React49.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React51.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__ */ React49.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React51.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__ */ React49.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React51.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__ */ React49.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React51.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("flex gap-4 justify-end"), className)
   }), children);
 };
@@ -5511,7 +5638,7 @@ var Dialog = ({
   primaryAction,
   secondaryAction
 }) => {
-  const ref = React50.useRef(null);
+  const ref = React52.useRef(null);
   const state = useOverlayTriggerState2({ isOpen: open });
   const { modalProps, underlayProps } = useModalOverlay({ isDismissable: false }, state, ref);
   const labelledBy = useId();
@@ -5523,34 +5650,34 @@ var Dialog = ({
   if (!open) {
     return null;
   }
-  return /* @__PURE__ */ React50.createElement(Overlay, null, /* @__PURE__ */ React50.createElement(Modal, {
+  return /* @__PURE__ */ React52.createElement(Overlay, null, /* @__PURE__ */ React52.createElement(Modal, {
     open
-  }, /* @__PURE__ */ React50.createElement(Modal.BackDrop, __spreadValues({}, underlayProps)), /* @__PURE__ */ React50.createElement(FocusScope2, {
+  }, /* @__PURE__ */ React52.createElement(Modal.BackDrop, __spreadValues({}, underlayProps)), /* @__PURE__ */ React52.createElement(FocusScope2, {
     contain: true,
     restoreFocus: true,
     autoFocus: true
-  }, /* @__PURE__ */ React50.createElement(Modal.Dialog, __spreadValues(__spreadValues({
+  }, /* @__PURE__ */ React52.createElement(Modal.Dialog, __spreadValues(__spreadValues({
     ref,
     size: "sm"
-  }, modalProps), dialogProps), /* @__PURE__ */ React50.createElement(Modal.Header, null, /* @__PURE__ */ React50.createElement(Icon, {
+  }, modalProps), dialogProps), /* @__PURE__ */ React52.createElement(Modal.Header, null, /* @__PURE__ */ React52.createElement(Icon, {
     icon: DIALOG_ICONS_AND_COLORS[type].icon,
     color: DIALOG_ICONS_AND_COLORS[type].color,
     fontSize: 20
-  }), /* @__PURE__ */ React50.createElement(Modal.Title, {
+  }), /* @__PURE__ */ React52.createElement(Modal.Title, {
     id: labelledBy,
     variant: "large-strong",
     color: DIALOG_ICONS_AND_COLORS[type].color
-  }, title)), /* @__PURE__ */ React50.createElement(Modal.Body, {
+  }, title)), /* @__PURE__ */ React52.createElement(Modal.Body, {
     id: describedBy
-  }, children), /* @__PURE__ */ React50.createElement(Modal.Footer, null, /* @__PURE__ */ React50.createElement(Modal.Actions, null, secondaryAction && /* @__PURE__ */ React50.createElement(GhostButton, __spreadValues({
+  }, children), /* @__PURE__ */ React52.createElement(Modal.Footer, null, /* @__PURE__ */ React52.createElement(Modal.Actions, null, secondaryAction && /* @__PURE__ */ React52.createElement(GhostButton, __spreadValues({
     key: secondaryAction.text
-  }, omit6(secondaryAction, "text")), secondaryAction.text), /* @__PURE__ */ React50.createElement(SecondaryButton, __spreadValues({
+  }, omit7(secondaryAction, "text")), secondaryAction.text), /* @__PURE__ */ React52.createElement(SecondaryButton, __spreadValues({
     key: primaryAction.text
-  }, omit6(primaryAction, "text")), primaryAction.text)))))));
+  }, omit7(primaryAction, "text")), primaryAction.text)))))));
 };
 
 // src/components/Divider/Divider.tsx
-import React51 from "react";
+import React53 from "react";
 var sizeClasses = {
   horizontal: {
     1: "h-1px",
@@ -5572,7 +5699,7 @@ var sizeClasses = {
 var Divider2 = (_a) => {
   var _b = _a, { direction = "horizontal", size = 1 } = _b, props = __objRest(_b, ["direction", "size"]);
   const sizeClass = sizeClasses[direction][size];
-  return /* @__PURE__ */ React51.createElement("div", __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ React53.createElement("div", __spreadProps(__spreadValues({}, props), {
     className: tw(`bg-grey-5 ${sizeClass}`, {
       "block w-full": direction === "horizontal",
       "inline-block h-full": direction === "vertical"
@@ -5581,10 +5708,10 @@ var Divider2 = (_a) => {
 };
 
 // src/components/Dropdown/Dropdown.tsx
-import React53 from "react";
+import React55 from "react";
 
 // src/components/Popover/Popover.tsx
-import React52, { useRef as useRef4 } from "react";
+import React54, { useRef as useRef4 } from "react";
 import { PressResponder, usePress } from "@react-aria/interactions";
 import { useOverlayPosition as useOverlayPosition3, useOverlayTrigger } from "@react-aria/overlays";
 import { mergeProps as mergeProps3 } from "@react-aria/utils";
@@ -5633,22 +5760,22 @@ var Popover2 = (props) => {
     state,
     triggerRef
   );
-  return /* @__PURE__ */ React52.createElement(PopoverContext.Provider, {
+  return /* @__PURE__ */ React54.createElement(PopoverContext.Provider, {
     value: {
       state
     }
-  }, React52.Children.map(props.children, (child) => {
+  }, React54.Children.map(props.children, (child) => {
     if (isComponentType(child, Popover2.Trigger)) {
-      return /* @__PURE__ */ React52.createElement(PressResponder, __spreadValues({
+      return /* @__PURE__ */ React54.createElement(PressResponder, __spreadValues({
         ref: triggerRef,
         onPress: state.toggle
-      }, triggerProps), /* @__PURE__ */ React52.createElement(PopoverTriggerWrapper, {
+      }, triggerProps), /* @__PURE__ */ React54.createElement(PopoverTriggerWrapper, {
         "data-testid": props["data-testid"],
         "aria-controls": id
       }, child.props.children));
     }
     if (isComponentType(child, Popover2.Panel)) {
-      return /* @__PURE__ */ React52.createElement(PopoverWrapper, __spreadProps(__spreadValues(__spreadValues({
+      return /* @__PURE__ */ React54.createElement(PopoverWrapper, __spreadProps(__spreadValues(__spreadValues({
         ref: overlayRef,
         isOpen: state.isOpen,
         onClose: state.close,
@@ -5659,7 +5786,8 @@ var Popover2 = (props) => {
         autoFocus,
         containFocus
       }, popoverProps), otherOverlayProps), {
-        id
+        id,
+        className: child.props.className
       }), child.props.children);
     }
     throw new Error("Invalid children element type");
@@ -5679,7 +5807,7 @@ var asPopoverButton = (Component, displayName) => {
       state.close();
       onClick == null ? void 0 : onClick(e);
     };
-    return /* @__PURE__ */ React52.createElement(Component, __spreadProps(__spreadValues({}, props), {
+    return /* @__PURE__ */ React54.createElement(Component, __spreadProps(__spreadValues({}, props), {
       onClick: handleClick
     }));
   };
@@ -5692,9 +5820,9 @@ var PopoverTriggerWrapper = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
   var _a2;
   const ref = useRef4(null);
-  const trigger = React52.Children.only(children);
+  const trigger = React54.Children.only(children);
   const { pressProps } = usePress(__spreadProps(__spreadValues({}, rest), { ref }));
-  return React52.cloneElement(trigger, __spreadProps(__spreadValues({
+  return React54.cloneElement(trigger, __spreadProps(__spreadValues({
     "ref": ref
   }, mergeProps3(pressProps, trigger.props)), {
     "aria-controls": (_a2 = rest["aria-controls"]) != null ? _a2 : pressProps["aria-controls"]
@@ -5703,11 +5831,11 @@ var PopoverTriggerWrapper = (_a) => {
 
 // src/components/Dropdown/Dropdown.tsx
 var Dropdown = ({ children, content, placement = "bottom-left" }) => {
-  return /* @__PURE__ */ React53.createElement(Popover2, {
+  return /* @__PURE__ */ React55.createElement(Popover2, {
     type: "menu",
     placement,
     autoFocus: true
-  }, /* @__PURE__ */ React53.createElement(Popover2.Trigger, null, children), /* @__PURE__ */ React53.createElement(Popover2.Panel, null, content));
+  }, /* @__PURE__ */ React55.createElement(Popover2.Trigger, null, children), /* @__PURE__ */ React55.createElement(Popover2.Panel, null, content));
 };
 var DropdownMenu = ({
   title,
@@ -5716,26 +5844,26 @@ var DropdownMenu = ({
   triggerId,
   setClose = () => void 0
 }) => {
-  const menuRef = React53.useRef(null);
-  React53.useEffect(() => {
+  const menuRef = React55.useRef(null);
+  React55.useEffect(() => {
     const id = setTimeout(() => {
       var _a, _b, _c;
       return (_c = (_b = (_a = menuRef.current) == null ? void 0 : _a.children) == null ? void 0 : _b[0]) == null ? void 0 : _c.focus();
     });
     return () => clearTimeout(id);
   }, [menuRef.current]);
-  return /* @__PURE__ */ React53.createElement("div", {
+  return /* @__PURE__ */ React55.createElement("div", {
     style: { minWidth: "250px" },
     className: tw("py-3 bg-white")
-  }, !!title && /* @__PURE__ */ React53.createElement("div", {
+  }, !!title && /* @__PURE__ */ React55.createElement("div", {
     className: tw("px-4 py-4 text-left text-grey-100 typography-default-strong")
-  }, title), /* @__PURE__ */ React53.createElement("ol", {
+  }, title), /* @__PURE__ */ React55.createElement("ol", {
     role: "menu",
     ref: menuRef,
     id: contentId,
     "aria-labelledby": triggerId
-  }, React53.Children.map(children, (child) => {
-    return React53.cloneElement(child, { setClose });
+  }, React55.Children.map(children, (child) => {
+    return React55.cloneElement(child, { setClose });
   })));
 };
 var DropdownItem = (_a) => {
@@ -5790,10 +5918,10 @@ var DropdownItem = (_a) => {
       handleSelect();
     }
   };
-  const itemContent = /* @__PURE__ */ React53.createElement("div", {
+  const itemContent = /* @__PURE__ */ React55.createElement("div", {
     className: tw("py-3 px-4")
   }, children);
-  return /* @__PURE__ */ React53.createElement("li", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React55.createElement("li", __spreadProps(__spreadValues({
     role: "menuitem",
     tabIndex: -1,
     onClick: handleClick,
@@ -5804,7 +5932,7 @@ var DropdownItem = (_a) => {
       "text-grey-10 cursor-not-allowed": disabled,
       "text-primary-70 hover:text-primary-80": color === "danger" && !disabled
     })
-  }), tooltip ? /* @__PURE__ */ React53.createElement(Tooltip, {
+  }), tooltip ? /* @__PURE__ */ React55.createElement(Tooltip, {
     content: tooltip,
     placement: tooltipPlacement,
     inline: false
@@ -5814,7 +5942,7 @@ Dropdown.Menu = DropdownMenu;
 Dropdown.Item = DropdownItem;
 
 // src/components/DropdownMenu/DropdownMenu.tsx
-import React57 from "react";
+import React59 from "react";
 import { useFilter } from "@react-aria/i18n";
 import { PressResponder as PressResponder2, usePress as usePress2 } from "@react-aria/interactions";
 import { useMenu, useMenuItem, useMenuSection, useMenuTrigger } from "@react-aria/menu";
@@ -5826,8 +5954,8 @@ import { useMenuTriggerState } from "@react-stately/menu";
 import { useTreeState } from "@react-stately/tree";
 
 // src/components/Input/Input.tsx
-import React55, { forwardRef, useImperativeHandle, useRef as useRef5, useState as useState6 } from "react";
-import omit7 from "lodash/omit";
+import React57, { forwardRef, useImperativeHandle, useRef as useRef5, useState as useState6 } from "react";
+import omit8 from "lodash/omit";
 import toString from "lodash/toString";
 import uniqueId3 from "lodash/uniqueId";
 
@@ -5843,31 +5971,31 @@ var getCommonInputStyles = ({ readOnly, valid }) => tw(
 );
 
 // src/utils/form/InputAdornment/InputAdornment.tsx
-import React54 from "react";
+import React56 from "react";
 var import_cross4 = __toESM(require_cross());
 var import_error3 = __toESM(require_error());
 var import_search2 = __toESM(require_search());
 var import_tick3 = __toESM(require_tick());
 var InputAdornment = ({ placement = "right", className, dense, children }) => {
-  return /* @__PURE__ */ React54.createElement("span", {
+  return /* @__PURE__ */ React56.createElement("span", {
     className: classNames(className, "absolute inset-y-0 grow-0 text-grey-40 flex items-center mx-3", {
       "right-0": placement === "right",
       "left-0": placement === "left",
       "typography-small": dense,
       "typography-default-strong": !dense
     })
-  }, /* @__PURE__ */ React54.createElement(Flexbox, {
+  }, /* @__PURE__ */ React56.createElement(Flexbox, {
     gap: "3",
     wrap: "wrap"
   }, children));
 };
-var SearchIcon = ({ onClick }) => /* @__PURE__ */ React54.createElement(Icon, {
+var SearchIcon = ({ onClick }) => /* @__PURE__ */ React56.createElement(Icon, {
   icon: import_search2.default,
   color: "grey-30",
   "data-testid": "icon-search",
   onClick
 });
-var ResetIcon = ({ onClick }) => /* @__PURE__ */ React54.createElement(Icon, {
+var ResetIcon = ({ onClick }) => /* @__PURE__ */ React56.createElement(Icon, {
   className: "hover:cursor-pointer",
   icon: import_cross4.default,
   color: "grey-30",
@@ -5897,7 +6025,7 @@ var createInput = (displayName, opts = {}) => {
         "readOnly"
       ]);
       var _a2;
-      const inputRef = React55.useRef(null);
+      const inputRef = React57.useRef(null);
       useImperativeHandle(ref, () => inputRef.current);
       const handleReset = () => {
         var _a3;
@@ -5910,11 +6038,11 @@ var createInput = (displayName, opts = {}) => {
           el.focus();
         }
       };
-      return /* @__PURE__ */ React55.createElement("span", {
+      return /* @__PURE__ */ React57.createElement("span", {
         className: tw("relative block")
-      }, opts.adornment && /* @__PURE__ */ React55.createElement(InputAdornment, {
+      }, opts.adornment && /* @__PURE__ */ React57.createElement(InputAdornment, {
         placement: "left"
-      }, opts.adornment), /* @__PURE__ */ React55.createElement("input", __spreadProps(__spreadValues({
+      }, opts.adornment), /* @__PURE__ */ React57.createElement("input", __spreadProps(__spreadValues({
         ref: inputRef,
         type
       }, props), {
@@ -5929,20 +6057,20 @@ var createInput = (displayName, opts = {}) => {
           getCommonInputStyles({ readOnly, valid }),
           props.className
         )
-      })), opts.canReset && (props.value || ((_a2 = inputRef.current) == null ? void 0 : _a2.value)) && /* @__PURE__ */ React55.createElement(InputAdornment, null, /* @__PURE__ */ React55.createElement(ResetIcon, {
+      })), opts.canReset && (props.value || ((_a2 = inputRef.current) == null ? void 0 : _a2.value)) && /* @__PURE__ */ React57.createElement(InputAdornment, null, /* @__PURE__ */ React57.createElement(ResetIcon, {
         onClick: handleReset
-      })), !opts.canReset && endAdornment && /* @__PURE__ */ React55.createElement(InputAdornment, null, endAdornment));
+      })), !opts.canReset && endAdornment && /* @__PURE__ */ React57.createElement(InputAdornment, null, endAdornment));
     }
   );
   InputComponent.displayName = displayName;
-  InputComponent.Skeleton = () => /* @__PURE__ */ React55.createElement(Skeleton, {
+  InputComponent.Skeleton = () => /* @__PURE__ */ React57.createElement(Skeleton, {
     height: 38
   });
   return InputComponent;
 };
 var InputBase = createInput("InputBase");
-var SearchInput = createInput("SearchInput", { adornment: /* @__PURE__ */ React55.createElement(SearchIcon, null), canReset: true });
-var Input2 = React55.forwardRef((_a, ref) => {
+var SearchInput = createInput("SearchInput", { adornment: /* @__PURE__ */ React57.createElement(SearchIcon, null), canReset: true });
+var Input2 = React57.forwardRef((_a, ref) => {
   var _b = _a, { readOnly = false } = _b, props = __objRest(_b, ["readOnly"]);
   var _a2, _b2, _c;
   const [value, setValue] = useState6((_b2 = (_a2 = props.value) != null ? _a2 : props.defaultValue) != null ? _b2 : "");
@@ -5950,13 +6078,13 @@ var Input2 = React55.forwardRef((_a, ref) => {
   const errorMessageId = uniqueId3();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const _d = getLabelControlProps(props), { "data-testid": dataTestId } = _d, labelControlProps = __objRest(_d, ["data-testid"]);
-  const baseProps = omit7(props, Object.keys(labelControlProps));
-  return /* @__PURE__ */ React55.createElement(LabelControl, __spreadValues({
+  const baseProps = omit8(props, Object.keys(labelControlProps));
+  return /* @__PURE__ */ React57.createElement(LabelControl, __spreadValues({
     id: `${id.current}-label`,
     htmlFor: id.current,
     messageId: errorMessageId,
     length: value !== void 0 ? toString(value).length : void 0
-  }, labelControlProps), /* @__PURE__ */ React55.createElement(InputBase, __spreadProps(__spreadValues(__spreadValues({
+  }, labelControlProps), /* @__PURE__ */ React57.createElement(InputBase, __spreadProps(__spreadValues(__spreadValues({
     ref
   }, baseProps), errorProps), {
     id: id.current,
@@ -5974,16 +6102,16 @@ var Input2 = React55.forwardRef((_a, ref) => {
   })));
 });
 Input2.displayName = "Input";
-Input2.Skeleton = () => /* @__PURE__ */ React55.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React55.createElement(InputBase.Skeleton, null));
+Input2.Skeleton = () => /* @__PURE__ */ React57.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React57.createElement(InputBase.Skeleton, null));
 Input2.Skeleton.displayName = "Input.Skeleton";
 
 // src/common/DropdownMenu/DropdownMenu.tsx
-import React56 from "react";
+import React58 from "react";
 var import_tick4 = __toESM(require_tick());
-var DropdownMenu2 = React56.forwardRef(
+var DropdownMenu2 = React58.forwardRef(
   (_a, ref) => {
     var _b = _a, { maxHeight = "450px", minWidth = "125px", maxWidth, className, children } = _b, props = __objRest(_b, ["maxHeight", "minWidth", "maxWidth", "className", "children"]);
-    return /* @__PURE__ */ React56.createElement("div", __spreadValues({
+    return /* @__PURE__ */ React58.createElement("div", __spreadValues({
       ref,
       style: { maxHeight, minWidth, maxWidth },
       className: classNames(
@@ -5993,25 +6121,25 @@ var DropdownMenu2 = React56.forwardRef(
     }, props), children);
   }
 );
-var ContentContainer = ({ children }) => /* @__PURE__ */ React56.createElement("div", {
+var ContentContainer = ({ children }) => /* @__PURE__ */ React58.createElement("div", {
   className: tw("p-3")
 }, children);
 DropdownMenu2.ContentContainer = ContentContainer;
-var List2 = React56.forwardRef(
+var List2 = React58.forwardRef(
   (_a, ref) => {
     var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-    return /* @__PURE__ */ React56.createElement("ul", __spreadValues({
+    return /* @__PURE__ */ React58.createElement("ul", __spreadValues({
       ref
     }, props), children);
   }
 );
 DropdownMenu2.List = List2;
-var Group2 = React56.forwardRef(
+var Group2 = React58.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, title, titleProps, children } = _b, props = __objRest(_b, ["className", "title", "titleProps", "children"]);
-    return /* @__PURE__ */ React56.createElement("li", __spreadValues({
+    return /* @__PURE__ */ React58.createElement("li", __spreadValues({
       ref
-    }, props), title && /* @__PURE__ */ React56.createElement("div", __spreadValues({
+    }, props), title && /* @__PURE__ */ React58.createElement("div", __spreadValues({
       className: classNames(className, "p-3 text-grey-40 uppercase cursor-default typography-caption", {
         "text-grey-20": props.disabled
       })
@@ -6019,10 +6147,10 @@ var Group2 = React56.forwardRef(
   }
 );
 DropdownMenu2.Group = Group2;
-var Item3 = React56.forwardRef(
+var Item3 = React58.forwardRef(
   (_a, ref) => {
     var _b = _a, { kind, highlighted, selected, className, icon, children } = _b, props = __objRest(_b, ["kind", "highlighted", "selected", "className", "icon", "children"]);
-    return /* @__PURE__ */ React56.createElement("li", __spreadValues({
+    return /* @__PURE__ */ React58.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,
@@ -6030,30 +6158,30 @@ var Item3 = React56.forwardRef(
         "text-primary-80": kind === "action",
         "text-grey-20 cursor-not-allowed": props.disabled
       })
-    }, props), icon && /* @__PURE__ */ React56.createElement(InlineIcon, {
+    }, props), icon && /* @__PURE__ */ React58.createElement(InlineIcon, {
       icon
-    }), /* @__PURE__ */ React56.createElement("span", {
+    }), /* @__PURE__ */ React58.createElement("span", {
       className: tw("grow")
-    }, children), selected && /* @__PURE__ */ React56.createElement(InlineIcon, {
+    }, children), selected && /* @__PURE__ */ React58.createElement(InlineIcon, {
       icon: import_tick4.default
     }));
   }
 );
 DropdownMenu2.Item = Item3;
-var Description = ({ disabled, children }) => /* @__PURE__ */ React56.createElement(Typography2.Caption, {
+var Description = ({ disabled, children }) => /* @__PURE__ */ React58.createElement(Typography2.Caption, {
   color: disabled ? "grey-20" : "grey-40"
 }, children);
 DropdownMenu2.Description = Description;
 var Separator = (_a) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React56.createElement("li", __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ React58.createElement("li", __spreadProps(__spreadValues({}, props), {
     className: classNames(className, tw("m-3 block bg-grey-5 h-[1px]"))
   }));
 };
 DropdownMenu2.Separator = Separator;
 var EmptyStateContainer2 = (_a) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ React56.createElement("div", __spreadValues({
+  return /* @__PURE__ */ React58.createElement("div", __spreadValues({
     className: classNames(tw("border border-dashed border-grey-10 p-3"), className)
   }, props), children);
 };
@@ -6108,8 +6236,8 @@ var DropdownMenu3 = (_a) => {
     "footer",
     "children"
   ]);
-  const triggerRef = React57.useRef(null);
-  const overlayRef = React57.useRef(null);
+  const triggerRef = React59.useRef(null);
+  const overlayRef = React59.useRef(null);
   const [trigger, items] = extractTriggerAndItems(children);
   const state = useMenuTriggerState(props);
   const { menuTriggerProps, menuProps } = useMenuTrigger({}, state, triggerRef);
@@ -6120,17 +6248,17 @@ var DropdownMenu3 = (_a) => {
     shouldFlip: true,
     isOpen: state.isOpen
   });
-  return /* @__PURE__ */ React57.createElement("div", null, /* @__PURE__ */ React57.createElement(PressResponder2, __spreadValues({
+  return /* @__PURE__ */ React59.createElement("div", null, /* @__PURE__ */ React59.createElement(PressResponder2, __spreadValues({
     ref: triggerRef,
     onPress: () => state.toggle()
-  }, menuTriggerProps), /* @__PURE__ */ React57.createElement(TriggerWrapper, null, trigger.props.children)), /* @__PURE__ */ React57.createElement(PopoverWrapper, __spreadValues({
+  }, menuTriggerProps), /* @__PURE__ */ React59.createElement(TriggerWrapper, null, trigger.props.children)), /* @__PURE__ */ React59.createElement(PopoverWrapper, __spreadValues({
     ref: overlayRef,
     isDismissable: true,
     autoFocus: true,
     containFocus: true,
     isOpen: state.isOpen,
     onClose: state.close
-  }, overlayProps), /* @__PURE__ */ React57.createElement(MenuWrapper, __spreadValues({
+  }, overlayProps), /* @__PURE__ */ React59.createElement(MenuWrapper, __spreadValues({
     onAction,
     selectionMode,
     selection,
@@ -6151,13 +6279,13 @@ DropdownMenu3.Item = Item4;
 DropdownMenu3.Section = Section;
 var TriggerWrapper = (_a) => {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-  const ref = React57.useRef(null);
+  const ref = React59.useRef(null);
   const { pressProps } = usePress2(__spreadProps(__spreadValues({}, props), { ref }));
-  const trigger = React57.Children.only(children);
-  if (!trigger || !React57.isValidElement(trigger)) {
+  const trigger = React59.Children.only(children);
+  if (!trigger || !React59.isValidElement(trigger)) {
     throw new Error("<DropdownMenu.Trigger> must have valid child");
   }
-  return React57.cloneElement(trigger, __spreadValues({ ref }, mergeProps4(pressProps, props)));
+  return React59.cloneElement(trigger, __spreadValues({ ref }, mergeProps4(pressProps, props)));
 };
 var isSectionNode = (item) => item.type === "section";
 var isItemNode = (item) => item.type === "item";
@@ -6179,7 +6307,7 @@ var MenuWrapper = (_a) => {
     "header",
     "footer"
   ]);
-  const ref = React57.useRef(null);
+  const ref = React59.useRef(null);
   const disabledKeys = getDisabledItemKeys(props.children);
   const state = useTreeState(__spreadValues({
     disabledKeys,
@@ -6187,30 +6315,30 @@ var MenuWrapper = (_a) => {
   }, props));
   const { menuProps } = useMenu(props, state, ref);
   const { contains } = useFilter({ sensitivity: "base" });
-  const [search, setSearch] = React57.useState("");
-  const filteredCollection = React57.useMemo(
+  const [search, setSearch] = React59.useState("");
+  const filteredCollection = React59.useMemo(
     () => searchable ? filterCollection(state.collection, search, contains) : state.collection,
     [state.collection, search, contains]
   );
-  return /* @__PURE__ */ React57.createElement(DropdownMenu2, {
+  return /* @__PURE__ */ React59.createElement(DropdownMenu2, {
     minWidth: minWidth !== void 0 ? `${minWidth}px` : void 0,
     maxWidth: maxWidth !== void 0 ? `${maxWidth}px` : void 0
-  }, header, /* @__PURE__ */ React57.createElement(DropdownMenu2.ContentContainer, null, searchable && /* @__PURE__ */ React57.createElement(SearchInput, {
+  }, header, /* @__PURE__ */ React59.createElement(DropdownMenu2.ContentContainer, null, searchable && /* @__PURE__ */ React59.createElement(SearchInput, {
     "aria-label": "search",
     value: search,
     onChange: (e) => setSearch(e.target.value),
     className: tw("mb-5")
-  }), filteredCollection.size === 0 && emptyState && /* @__PURE__ */ React57.createElement(DropdownMenu2.EmptyStateContainer, null, emptyState), /* @__PURE__ */ React57.createElement(DropdownMenu2.List, __spreadValues({
+  }), filteredCollection.size === 0 && emptyState && /* @__PURE__ */ React59.createElement(DropdownMenu2.EmptyStateContainer, null, emptyState), /* @__PURE__ */ React59.createElement(DropdownMenu2.List, __spreadValues({
     ref
   }, menuProps), Array.from(filteredCollection).map((item) => {
     if (isSectionNode(item)) {
-      return /* @__PURE__ */ React57.createElement(SectionWrapper, {
+      return /* @__PURE__ */ React59.createElement(SectionWrapper, {
         key: item.key,
         section: item,
         state
       });
     } else if (isItemNode(item)) {
-      return /* @__PURE__ */ React57.createElement(ItemWrapper, {
+      return /* @__PURE__ */ React59.createElement(ItemWrapper, {
         key: item.key,
         item,
         state
@@ -6219,14 +6347,14 @@ var MenuWrapper = (_a) => {
   }))), footer);
 };
 var ItemWrapper = ({ item, state }) => {
-  const ref = React57.useRef(null);
+  const ref = React59.useRef(null);
   const { menuItemProps, descriptionProps, isSelected, isFocused, isDisabled } = useMenuItem(
     { key: item.key },
     state,
     ref
   );
   const { icon, description, kind = "default" } = item.props;
-  return /* @__PURE__ */ React57.createElement(DropdownMenu2.Item, __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React59.createElement(DropdownMenu2.Item, __spreadProps(__spreadValues({
     ref
   }, menuItemProps), {
     kind,
@@ -6234,7 +6362,7 @@ var ItemWrapper = ({ item, state }) => {
     highlighted: isFocused,
     disabled: isDisabled,
     icon
-  }), item.rendered, description && /* @__PURE__ */ React57.createElement(DropdownMenu2.Description, __spreadValues({
+  }), item.rendered, description && /* @__PURE__ */ React59.createElement(DropdownMenu2.Description, __spreadValues({
     disabled: isDisabled
   }, descriptionProps), description));
 };
@@ -6246,24 +6374,24 @@ var SectionWrapper = ({ section, state }) => {
   const { separatorProps } = useSeparator({
     elementType: "li"
   });
-  return /* @__PURE__ */ React57.createElement(React57.Fragment, null, section.key !== state.collection.getFirstKey() && /* @__PURE__ */ React57.createElement(DropdownMenu2.Separator, __spreadValues({}, separatorProps)), /* @__PURE__ */ React57.createElement(DropdownMenu2.Group, __spreadValues({
+  return /* @__PURE__ */ React59.createElement(React59.Fragment, null, section.key !== state.collection.getFirstKey() && /* @__PURE__ */ React59.createElement(DropdownMenu2.Separator, __spreadValues({}, separatorProps)), /* @__PURE__ */ React59.createElement(DropdownMenu2.Group, __spreadValues({
     title: section.rendered,
     titleProps: headingProps
-  }, itemProps), /* @__PURE__ */ React57.createElement("ul", __spreadValues({}, groupProps), Array.from(section.childNodes).map((node) => /* @__PURE__ */ React57.createElement(ItemWrapper, {
+  }, itemProps), /* @__PURE__ */ React59.createElement("ul", __spreadValues({}, groupProps), Array.from(section.childNodes).map((node) => /* @__PURE__ */ React59.createElement(ItemWrapper, {
     key: node.key,
     item: node,
     state
   })))));
 };
 var extractTriggerAndItems = (children) => {
-  const [trigger, items] = React57.Children.toArray(children);
+  const [trigger, items] = React59.Children.toArray(children);
   if (!isComponentType(trigger, MenuTrigger) || !isComponentType(items, MenuItems)) {
     throw new Error("<DropdownMenu> must have <DropdownMenu.Trigger> and <DropdownMenu.Items> defined");
   }
   return [trigger, items];
 };
 var getDisabledItemKeys = (children) => {
-  const keys = React57.Children.map(children, (child) => {
+  const keys = React59.Children.map(children, (child) => {
     var _a, _b;
     if (!child || typeof child === "function") {
       return null;
@@ -6280,11 +6408,11 @@ var getDisabledItemKeys = (children) => {
 };
 
 // src/components/EmptyState/EmptyState.tsx
-import React59 from "react";
-import omit8 from "lodash/omit";
+import React61 from "react";
+import omit9 from "lodash/omit";
 
 // src/components/Flexbox/FlexboxItem.tsx
-import React58 from "react";
+import React60 from "react";
 var FlexboxItem = Tailwindify(
   ({ htmlTag = "div", className, style, children, display, flex, grow, shrink, order, alignSelf }) => {
     const hookStyle = useStyle({
@@ -6296,7 +6424,7 @@ var FlexboxItem = Tailwindify(
       alignSelf
     });
     const HtmlElement = htmlTag;
-    return /* @__PURE__ */ React58.createElement(HtmlElement, {
+    return /* @__PURE__ */ React60.createElement(HtmlElement, {
       style: __spreadValues(__spreadValues({}, hookStyle), style),
       className
     }, children);
@@ -6346,6 +6474,7 @@ var EmptyState = ({
   imageAlt = "",
   imageWidth,
   description,
+  children,
   primaryAction,
   secondaryAction,
   footer,
@@ -6353,7 +6482,7 @@ var EmptyState = ({
   borderStyle = "dashed"
 }) => {
   const template = layoutStyle(layout);
-  return /* @__PURE__ */ React59.createElement(Box, {
+  return /* @__PURE__ */ React61.createElement(Box, {
     className: classNames(
       tw("rounded", {
         "border border-dashed": borderStyle === "dashed",
@@ -6365,38 +6494,38 @@ var EmptyState = ({
     backgroundColor: "transparent",
     borderColor: "grey-10",
     padding: "9"
-  }, /* @__PURE__ */ React59.createElement(Flexbox, {
+  }, /* @__PURE__ */ React61.createElement(Flexbox, {
     direction: template.layout,
     justifyContent: template.justifyContent,
     alignItems: template.layout === "row" ? "center" : template.alignItems,
     colGap: "l5",
     rowGap: "8"
-  }, image && /* @__PURE__ */ React59.createElement(FlexboxItem, null, /* @__PURE__ */ React59.createElement("img", {
+  }, image && /* @__PURE__ */ React61.createElement(FlexboxItem, null, /* @__PURE__ */ React61.createElement("img", {
     src: image,
     alt: imageAlt,
     style: { width: imageWidth ? `${imageWidth}px` : void 0, height: "auto" }
-  })), /* @__PURE__ */ React59.createElement(Flexbox, {
+  })), /* @__PURE__ */ React61.createElement(Flexbox, {
     style: { maxWidth: "610px" },
     direction: "column",
     justifyContent: template.justifyContent,
     alignItems: template.alignItems
-  }, /* @__PURE__ */ React59.createElement(Typography2, {
+  }, /* @__PURE__ */ React61.createElement(Typography2, {
     variant: "heading",
     htmlTag: "h2"
-  }, title), description && /* @__PURE__ */ React59.createElement(Box, {
+  }, title), (description || children) && /* @__PURE__ */ React61.createElement(Box, {
     marginTop: "5"
-  }, /* @__PURE__ */ React59.createElement(Typography2, {
+  }, /* @__PURE__ */ React61.createElement(Typography2, {
     variant: "default",
     color: "grey-60"
-  }, description)), (secondaryAction || primaryAction) && /* @__PURE__ */ React59.createElement(Flexbox, {
+  }, children || description)), (secondaryAction || primaryAction) && /* @__PURE__ */ React61.createElement(Flexbox, {
     marginTop: "7",
     gap: "4",
     justifyContent: "center",
     alignItems: "center",
     wrap: "wrap"
-  }, primaryAction && /* @__PURE__ */ React59.createElement(PrimaryButton, __spreadValues({}, omit8(primaryAction, "text")), primaryAction.text), secondaryAction && /* @__PURE__ */ React59.createElement(SecondaryButton, __spreadValues({}, omit8(secondaryAction, "text")), secondaryAction.text)), footer && /* @__PURE__ */ React59.createElement(Box, {
+  }, primaryAction && /* @__PURE__ */ React61.createElement(PrimaryButton, __spreadValues({}, omit9(primaryAction, "text")), primaryAction.text), secondaryAction && /* @__PURE__ */ React61.createElement(SecondaryButton, __spreadValues({}, omit9(secondaryAction, "text")), secondaryAction.text)), footer && /* @__PURE__ */ React61.createElement(Box, {
     marginTop: "7"
-  }, /* @__PURE__ */ React59.createElement(Typography2, {
+  }, /* @__PURE__ */ React61.createElement(Typography2, {
     htmlTag: "div",
     variant: "small",
     color: "grey-60"
@@ -6404,7 +6533,7 @@ var EmptyState = ({
 };
 
 // src/components/Grid/GridItem.tsx
-import React60 from "react";
+import React62 from "react";
 var GridItem = Tailwindify(
   ({
     htmlTag = "div",
@@ -6435,7 +6564,7 @@ var GridItem = Tailwindify(
       gridRowEnd: rowEnd
     });
     const HtmlElement = htmlTag;
-    return /* @__PURE__ */ React60.createElement(HtmlElement, {
+    return /* @__PURE__ */ React62.createElement(HtmlElement, {
       style: __spreadValues(__spreadValues({}, hookStyle), style),
       className
     }, children);
@@ -6443,23 +6572,23 @@ var GridItem = Tailwindify(
 );
 
 // src/components/List/List.tsx
-import React61 from "react";
-var List = ({ items, renderItem, container = React61.Fragment }) => {
+import React63 from "react";
+var List = ({ items, renderItem, container = React63.Fragment }) => {
   const Component = container;
-  return /* @__PURE__ */ React61.createElement(Component, null, items.map(renderItem));
+  return /* @__PURE__ */ React63.createElement(Component, null, items.map(renderItem));
 };
 
 // src/components/ListItem/ListItem.tsx
-import React62 from "react";
+import React64 from "react";
 var ListItem = ({ name, icon, active = false }) => {
-  return /* @__PURE__ */ React62.createElement(Flexbox, {
+  return /* @__PURE__ */ React64.createElement(Flexbox, {
     alignItems: "center"
-  }, /* @__PURE__ */ React62.createElement(Typography2, {
+  }, /* @__PURE__ */ React64.createElement(Typography2, {
     variant: active ? "small-strong" : "small",
     color: "grey-70",
     htmlTag: "span",
     className: `px-4 py-2 rounded-full ${active ? "bg-grey-5" : "hover:bg-grey-0"}`
-  }, /* @__PURE__ */ React62.createElement("img", {
+  }, /* @__PURE__ */ React64.createElement("img", {
     src: icon,
     alt: name,
     className: "inline mr-4",
@@ -6469,28 +6598,28 @@ var ListItem = ({ name, icon, active = false }) => {
 };
 
 // src/components/Modal/Modal.tsx
-import React64 from "react";
+import React66 from "react";
 import { useDialog as useDialog2 } from "@react-aria/dialog";
 import { FocusScope as FocusScope3 } from "@react-aria/focus";
 import { Overlay as Overlay2, useModalOverlay as useModalOverlay2 } from "@react-aria/overlays";
 import { useId as useId2 } from "@react-aria/utils";
 import { useOverlayTriggerState as useOverlayTriggerState4 } from "@react-stately/overlays";
 import castArray from "lodash/castArray";
-import omit9 from "lodash/omit";
+import omit10 from "lodash/omit";
 
 // src/components/Tabs/Tabs.tsx
-import React63, { useEffect as useEffect5, useLayoutEffect as useLayoutEffect2, useRef as useRef6, useState as useState7 } from "react";
+import React65, { useEffect as useEffect5, useLayoutEffect as useLayoutEffect2, useRef as useRef6, useState as useState7 } from "react";
 import isNumber4 from "lodash/isNumber";
 import kebabCase from "lodash/kebabCase";
 var import_chevronLeft2 = __toESM(require_chevronLeft());
 var import_chevronRight2 = __toESM(require_chevronRight());
 var import_warningSign3 = __toESM(require_warningSign());
 var isTabComponent = (c) => {
-  return React63.isValidElement(c) && (c.type === Tab || c.type === ModalTab);
+  return React65.isValidElement(c) && (c.type === Tab || c.type === ModalTab);
 };
-var Tab = React63.forwardRef(
+var Tab = React65.forwardRef(
   ({ className, id, title, children }, ref) => {
-    return /* @__PURE__ */ React63.createElement("div", {
+    return /* @__PURE__ */ React65.createElement("div", {
       ref,
       id: `${id != null ? id : kebabCase(title)}-panel`,
       className,
@@ -6502,14 +6631,14 @@ var Tab = React63.forwardRef(
 );
 var TabContainer = (_a) => {
   var _b = _a, { className, children } = _b, rest = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ React63.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React65.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames("py-6 z-0", className)
   }), children);
 };
 var ModalTab = Tab;
 var ModalTabContainer = TabContainer;
 var asTabItem = (Component, displayName, { defaultUnderlineHidden } = {}) => {
-  const Tab2 = React63.forwardRef(
+  const Tab2 = React65.forwardRef(
     (_a, ref) => {
       var _b = _a, {
         id,
@@ -6539,17 +6668,17 @@ var asTabItem = (Component, displayName, { defaultUnderlineHidden } = {}) => {
       const _id = id != null ? id : kebabCase(title);
       let statusIcon = void 0;
       if (status === "warning") {
-        statusIcon = /* @__PURE__ */ React63.createElement(InlineIcon, {
+        statusIcon = /* @__PURE__ */ React65.createElement(InlineIcon, {
           icon: import_warningSign3.default,
           color: "warning-80"
         });
       } else if (status === "error") {
-        statusIcon = /* @__PURE__ */ React63.createElement(InlineIcon, {
+        statusIcon = /* @__PURE__ */ React65.createElement(InlineIcon, {
           icon: import_warningSign3.default,
           color: "error-50"
         });
       }
-      const tab = /* @__PURE__ */ React63.createElement(Component, __spreadValues({
+      const tab = /* @__PURE__ */ React65.createElement(Component, __spreadValues({
         ref,
         id: `${_id}-tab`,
         onClick: () => !disabled && onSelected(value != null ? value : index),
@@ -6566,24 +6695,24 @@ var asTabItem = (Component, displayName, { defaultUnderlineHidden } = {}) => {
         "aria-selected": selected,
         "aria-controls": `${_id}-panel`,
         tabIndex: disabled ? void 0 : 0
-      }, rest), /* @__PURE__ */ React63.createElement(Typography2, {
+      }, rest), /* @__PURE__ */ React65.createElement(Typography2, {
         htmlTag: "div",
         variant: "small",
         color: selected ? "primary-80" : disabled ? "grey-20" : "current",
         className: tw("inline-flex items-center gap-3")
-      }, /* @__PURE__ */ React63.createElement("span", {
+      }, /* @__PURE__ */ React65.createElement("span", {
         className: tw("whitespace-nowrap")
-      }, title), isNumber4(badge) && /* @__PURE__ */ React63.createElement(Typography2, {
+      }, title), isNumber4(badge) && /* @__PURE__ */ React65.createElement(Typography2, {
         htmlTag: "span",
         variant: "small",
         color: selected ? "primary-80" : "grey-5",
         className: "leading-none"
-      }, /* @__PURE__ */ React63.createElement(TabBadge, {
+      }, /* @__PURE__ */ React65.createElement(TabBadge, {
         kind: "filled",
         value: badge,
         textClassname: classNames({ "text-white": selected, "text-grey-50": !selected })
       })), statusIcon));
-      return tooltip ? /* @__PURE__ */ React63.createElement(Tooltip, {
+      return tooltip ? /* @__PURE__ */ React65.createElement(Tooltip, {
         content: tooltip
       }, tab) : tab;
     }
@@ -6592,11 +6721,12 @@ var asTabItem = (Component, displayName, { defaultUnderlineHidden } = {}) => {
   return Tab2;
 };
 var TabItem = asTabItem("button", "TabItem");
+var CARET_OFFSET = 24;
 var createTabsComponent = (TabComponent, TabItemComponent, displayName, renderChildren) => {
   const Tabs2 = (props) => {
     var _a, _b;
     const { className, value, defaultValue, onChange, children } = props;
-    const childArr = React63.Children.toArray(children);
+    const childArr = React65.Children.toArray(children);
     const firstTab = childArr[0];
     const firstTabValue = isTabComponent(firstTab) ? firstTab.props.value : -1;
     const [selected, setSelected] = useState7((_b = (_a = value != null ? value : defaultValue) != null ? _a : firstTabValue) != null ? _b : 0);
@@ -6605,25 +6735,54 @@ var createTabsComponent = (TabComponent, TabItemComponent, displayName, renderCh
     const parentRef = useRef6(null);
     const containerRef = useRef6(null);
     const tabsRef = useRef6(null);
+    const revealSelectedTab = ({ smooth }) => {
+      var _a2, _b2;
+      const container = containerRef.current;
+      const tabs = tabsRef.current;
+      const values = React65.Children.map(
+        children,
+        (tab, i) => {
+          var _a3;
+          return (_a3 = tab == null ? void 0 : tab.props.value) != null ? _a3 : i;
+        }
+      );
+      const idx = (_a2 = values == null ? void 0 : values.findIndex((val) => value === val)) != null ? _a2 : -1;
+      const child = Array.from((_b2 = tabs == null ? void 0 : tabs.childNodes) != null ? _b2 : [])[idx];
+      if (!container || !(child instanceof HTMLElement)) {
+        return;
+      }
+      const { width: containerWidth, x: containerX } = container.getBoundingClientRect();
+      const { x, width } = child.getBoundingClientRect();
+      const isInViewPort = x >= containerX && x + width <= containerX + containerWidth;
+      if (!isInViewPort) {
+        container.scrollTo({
+          left: container.scrollLeft + Math.ceil(x + width + CARET_OFFSET - containerX - containerWidth),
+          behavior: smooth ? "smooth" : void 0
+        });
+      }
+    };
+    const updateCarets = () => {
+      const pEl = parentRef.current;
+      const el = containerRef.current;
+      if (!pEl || !el) {
+        return;
+      }
+      const { width } = pEl.getBoundingClientRect();
+      const hasLeftCaret = el.scrollWidth > width && el.scrollLeft !== 0;
+      const hasRightCaret = el.scrollWidth > width && Math.round(el.scrollLeft + el.getBoundingClientRect().width) !== Math.round(el.scrollWidth);
+      showLeftCaret(hasLeftCaret);
+      showRightCaret(hasRightCaret);
+    };
     useEffect5(() => {
-      if (value !== void 0) {
-        setSelected(value);
+      if (value === void 0) {
+        return;
       }
-    }, [value]);
+      updateCarets();
+      setSelected(value);
+      revealSelectedTab({ smooth: value !== selected });
+    }, [value, React65.Children.count(children)]);
     useLayoutEffect2(() => {
       var _a2;
-      const updateCarets = () => {
-        const pEl = parentRef.current;
-        const el = containerRef.current;
-        if (!pEl || !el) {
-          return;
-        }
-        const { width } = pEl.getBoundingClientRect();
-        showLeftCaret(el.scrollWidth > width && el.scrollLeft !== 0);
-        showRightCaret(
-          el.scrollWidth > width && Math.round(el.scrollLeft + el.getBoundingClientRect().width) !== Math.round(el.scrollWidth)
-        );
-      };
       updateCarets();
       (_a2 = containerRef.current) == null ? void 0 : _a2.addEventListener("scroll", updateCarets);
       window.addEventListener("resize", updateCarets);
@@ -6632,7 +6791,7 @@ var createTabsComponent = (TabComponent, TabItemComponent, displayName, renderCh
         (_a3 = containerRef.current) == null ? void 0 : _a3.removeEventListener("scroll", updateCarets);
         window.removeEventListener("resize", updateCarets);
       };
-    }, [parentRef.current, containerRef.current]);
+    }, [parentRef.current, containerRef.current, children]);
     const handleScrollToNext = (direction) => {
       const container = containerRef.current;
       const tabs = tabsRef.current;
@@ -6651,7 +6810,7 @@ var createTabsComponent = (TabComponent, TabItemComponent, displayName, renderCh
         if (next instanceof HTMLElement) {
           const { x, width } = next.getBoundingClientRect();
           container.scrollTo({
-            left: container.scrollLeft + Math.ceil(x + width - containerX - containerWidth),
+            left: container.scrollLeft + Math.ceil(x + width + CARET_OFFSET - containerX - containerWidth),
             behavior: "smooth"
           });
         }
@@ -6662,7 +6821,10 @@ var createTabsComponent = (TabComponent, TabItemComponent, displayName, renderCh
         });
         if (next instanceof HTMLElement) {
           const { x } = next.getBoundingClientRect();
-          container.scrollTo({ left: container.scrollLeft - Math.abs(x - containerX), behavior: "smooth" });
+          container.scrollTo({
+            left: container.scrollLeft - Math.abs(x - containerX - CARET_OFFSET),
+            behavior: "smooth"
+          });
         }
       }
     };
@@ -6682,27 +6844,27 @@ var createTabsComponent = (TabComponent, TabItemComponent, displayName, renderCh
     const handleSelected = (key) => {
       (onChange != null ? onChange : setSelected)(key);
     };
-    React63.Children.forEach(children, (c) => {
+    React65.Children.forEach(children, (c) => {
       if (c && !isTabComponent(c)) {
         throw new Error("<Tabs> can only have <Tabs.Tab> components as children");
       }
     });
-    return /* @__PURE__ */ React63.createElement("div", {
+    return /* @__PURE__ */ React65.createElement("div", {
       ref: parentRef,
       className: classNames(tw("h-full"), className)
-    }, /* @__PURE__ */ React63.createElement("div", {
+    }, /* @__PURE__ */ React65.createElement("div", {
       className: tw("relative flex items-center h-full border-b-2 border-grey-10")
-    }, /* @__PURE__ */ React63.createElement("div", {
+    }, /* @__PURE__ */ React65.createElement("div", {
       ref: containerRef,
       className: tw("overflow-y-auto scrollbar-hide h-full mb-[-2px]")
-    }, /* @__PURE__ */ React63.createElement("div", {
+    }, /* @__PURE__ */ React65.createElement("div", {
       ref: tabsRef,
       role: "tablist",
       "aria-label": "tabs",
       className: tw("inline-flex items-center cursor-pointer font-normal h-full")
-    }, React63.Children.map(
+    }, React65.Children.map(
       children,
-      (tab, index) => tab ? /* @__PURE__ */ React63.createElement(TabItemComponent, __spreadProps(__spreadValues({
+      (tab, index) => tab ? /* @__PURE__ */ React65.createElement(TabItemComponent, __spreadProps(__spreadValues({
         key: tab.props.value
       }, tab.props), {
         index,
@@ -6710,20 +6872,20 @@ var createTabsComponent = (TabComponent, TabItemComponent, displayName, renderCh
         onKeyDown: handleKeyDown,
         onSelected: handleSelected
       })) : void 0
-    ))), leftCaret && /* @__PURE__ */ React63.createElement("div", {
+    ))), leftCaret && /* @__PURE__ */ React65.createElement("div", {
       className: tw("absolute left-0 bg-gradient-to-r from-white via-white z-20 py-3 pr-4")
-    }, /* @__PURE__ */ React63.createElement("div", {
+    }, /* @__PURE__ */ React65.createElement("div", {
       onClick: () => handleScrollToNext("left"),
       className: tw("hover:bg-grey-0 p-2 leading-none cursor-pointer")
-    }, /* @__PURE__ */ React63.createElement(InlineIcon, {
+    }, /* @__PURE__ */ React65.createElement(InlineIcon, {
       icon: import_chevronLeft2.default
-    }))), rightCaret && /* @__PURE__ */ React63.createElement("div", {
+    }))), rightCaret && /* @__PURE__ */ React65.createElement("div", {
       onClick: () => handleScrollToNext("right"),
       className: tw("absolute right-0 bg-gradient-to-l from-white via-white z-20 py-3 pl-4")
-    }, /* @__PURE__ */ React63.createElement("div", {
+    }, /* @__PURE__ */ React65.createElement("div", {
       onClick: () => handleScrollToNext("right"),
       className: tw("hover:bg-grey-0 p-2 leading-none cursor-pointer")
-    }, /* @__PURE__ */ React63.createElement(InlineIcon, {
+    }, /* @__PURE__ */ React65.createElement(InlineIcon, {
       icon: import_chevronRight2.default
     })))), renderChildren(children, selected, props));
   };
@@ -6731,7 +6893,7 @@ var createTabsComponent = (TabComponent, TabItemComponent, displayName, renderCh
   Tabs2.Tab = TabComponent;
   return Tabs2;
 };
-var Tabs = createTabsComponent(Tab, TabItem, "Tabs", (children, selected) => /* @__PURE__ */ React63.createElement(TabContainer, null, children.find(
+var Tabs = createTabsComponent(Tab, TabItem, "Tabs", (children, selected) => /* @__PURE__ */ React65.createElement(TabContainer, null, children.find(
   (node, index) => (node == null ? void 0 : node.props.value) === selected || index === selected
 )));
 
@@ -6748,7 +6910,7 @@ var Modal2 = ({
   secondaryActions,
   size
 }) => {
-  const ref = React64.useRef(null);
+  const ref = React66.useRef(null);
   const state = useOverlayTriggerState4({ isOpen: open });
   const { modalProps, underlayProps } = useModalOverlay2({ isDismissable: false }, state, ref);
   const labelledBy = useId2();
@@ -6760,60 +6922,60 @@ var Modal2 = ({
   if (!open) {
     return null;
   }
-  return /* @__PURE__ */ React64.createElement(Overlay2, null, /* @__PURE__ */ React64.createElement(Modal, {
+  return /* @__PURE__ */ React66.createElement(Overlay2, null, /* @__PURE__ */ React66.createElement(Modal, {
     open: state.isOpen
-  }, /* @__PURE__ */ React64.createElement(Modal.BackDrop, __spreadValues({}, underlayProps)), /* @__PURE__ */ React64.createElement(FocusScope3, {
+  }, /* @__PURE__ */ React66.createElement(Modal.BackDrop, __spreadValues({}, underlayProps)), /* @__PURE__ */ React66.createElement(FocusScope3, {
     contain: true,
     restoreFocus: true,
     autoFocus: true
-  }, /* @__PURE__ */ React64.createElement(Modal.Dialog, __spreadValues(__spreadValues({
+  }, /* @__PURE__ */ React66.createElement(Modal.Dialog, __spreadValues(__spreadValues({
     ref,
     size
-  }, modalProps), dialogProps), /* @__PURE__ */ React64.createElement(Modal.CloseButtonContainer, null, /* @__PURE__ */ React64.createElement(IconButton, {
+  }, modalProps), dialogProps), /* @__PURE__ */ React66.createElement(Modal.CloseButtonContainer, null, /* @__PURE__ */ React66.createElement(IconButton, {
     "aria-label": "Close",
     icon: import_cross5.default,
     onClick: onClose
-  })), headerImage !== void 0 && /* @__PURE__ */ React64.createElement(Modal.HeaderImage, {
+  })), headerImage !== void 0 && /* @__PURE__ */ React66.createElement(Modal.HeaderImage, {
     backgroundImage: headerImage
-  }), /* @__PURE__ */ React64.createElement(Modal.Header, {
+  }), /* @__PURE__ */ React66.createElement(Modal.Header, {
     className: tw({ "pb-3": isComponentType(children, ModalTabs) })
-  }, /* @__PURE__ */ React64.createElement(Modal.TitleContainer, null, /* @__PURE__ */ React64.createElement(Modal.Title, {
+  }, /* @__PURE__ */ React66.createElement(Modal.TitleContainer, null, /* @__PURE__ */ React66.createElement(Modal.Title, {
     id: labelledBy
-  }, title), subtitle && /* @__PURE__ */ React64.createElement(Modal.Subtitle, null, subtitle))), isComponentType(children, ModalTabs) ? React64.cloneElement(children, { className: tw("[&>div:first-child]:px-5 grow") }) : /* @__PURE__ */ React64.createElement(Modal.Body, {
+  }, title), subtitle && /* @__PURE__ */ React66.createElement(Modal.Subtitle, null, subtitle))), isComponentType(children, ModalTabs) ? React66.cloneElement(children, { className: tw("[&>div:first-child]:px-5 grow") }) : /* @__PURE__ */ React66.createElement(Modal.Body, {
     id: describedBy,
     tabIndex: 0,
     noFooter: !(secondaryActions || primaryAction)
-  }, children), (secondaryActions || primaryAction) && /* @__PURE__ */ React64.createElement(Modal.Footer, null, /* @__PURE__ */ React64.createElement(Modal.Actions, null, secondaryActions && castArray(secondaryActions).filter(Boolean).map((_a) => {
+  }, children), (secondaryActions || primaryAction) && /* @__PURE__ */ React66.createElement(Modal.Footer, null, /* @__PURE__ */ React66.createElement(Modal.Actions, null, secondaryActions && castArray(secondaryActions).filter(Boolean).map((_a) => {
     var _b = _a, { text } = _b, action = __objRest(_b, ["text"]);
-    return /* @__PURE__ */ React64.createElement(SecondaryButton, __spreadValues({
+    return /* @__PURE__ */ React66.createElement(SecondaryButton, __spreadValues({
       key: text
     }, action), text);
-  }), primaryAction && /* @__PURE__ */ React64.createElement(PrimaryButton, __spreadValues({
+  }), primaryAction && /* @__PURE__ */ React66.createElement(PrimaryButton, __spreadValues({
     key: primaryAction.text
-  }, omit9(primaryAction, "text")), primaryAction.text)))))));
+  }, omit10(primaryAction, "text")), primaryAction.text)))))));
 };
 var ModalTabs = createTabsComponent(
   ModalTab,
   TabItem,
   "ModalTabs",
-  (children, selected, props) => /* @__PURE__ */ React64.createElement(Modal.Body, {
+  (children, selected, props) => /* @__PURE__ */ React66.createElement(Modal.Body, {
     maxHeight: props.maxHeight
-  }, /* @__PURE__ */ React64.createElement(ModalTabContainer, null, children.find(
+  }, /* @__PURE__ */ React66.createElement(ModalTabContainer, null, children.find(
     (node, index) => (node == null ? void 0 : node.props.value) === selected || index === selected
   )))
 );
 
 // src/components/MultiInput/MultiInput.tsx
-import React66, { useEffect as useEffect6, useRef as useRef7, useState as useState8 } from "react";
+import React68, { useEffect as useEffect6, useRef as useRef7, useState as useState8 } from "react";
 import castArray2 from "lodash/castArray";
 import identity from "lodash/identity";
-import omit10 from "lodash/omit";
+import omit11 from "lodash/omit";
 import uniqueId4 from "lodash/uniqueId";
 
 // src/components/MultiInput/InputChip.tsx
-import React65 from "react";
+import React67 from "react";
 var import_smallCross = __toESM(require_smallCross());
-var InputChip = React65.forwardRef(
+var InputChip = React67.forwardRef(
   (_a, ref) => {
     var _b = _a, { invalid = false, disabled, readOnly, className, onClick: _onClick, children } = _b, props = __objRest(_b, ["invalid", "disabled", "readOnly", "className", "onClick", "children"]);
     const onClick = (e) => {
@@ -6821,7 +6983,7 @@ var InputChip = React65.forwardRef(
         _onClick == null ? void 0 : _onClick(e);
       }
     };
-    return /* @__PURE__ */ React65.createElement("div", __spreadValues({
+    return /* @__PURE__ */ React67.createElement("div", __spreadValues({
       ref,
       role: "button",
       className: classNames(className, "inline-flex align-middle mx-1 px-2 py-1 items-center rounded-sm break-all", {
@@ -6831,10 +6993,10 @@ var InputChip = React65.forwardRef(
         "bg-grey-5 pointer-events-none": disabled
       }),
       onClick
-    }, props), /* @__PURE__ */ React65.createElement(Typography2, {
+    }, props), /* @__PURE__ */ React67.createElement(Typography2, {
       variant: "small",
       color: invalid ? "error-80" : disabled ? "grey-40" : "grey-70"
-    }, children), !readOnly && /* @__PURE__ */ React65.createElement("div", null, /* @__PURE__ */ React65.createElement(Icon, {
+    }, children), !readOnly && /* @__PURE__ */ React67.createElement("div", null, /* @__PURE__ */ React67.createElement(Icon, {
       icon: import_smallCross.default,
       className: tw("ml-2", {
         "text-error-70": invalid,
@@ -6972,7 +7134,7 @@ var MultiInputBase = (_a) => {
   };
   const renderChips = () => items == null ? void 0 : items.map((item, index) => {
     var _a3;
-    return /* @__PURE__ */ React66.createElement(InputChip, {
+    return /* @__PURE__ */ React68.createElement(InputChip, {
       key: `${itemToString(item)}.${index}`,
       invalid: !((_a3 = isItemValid == null ? void 0 : isItemValid(item, index)) != null ? _a3 : true),
       readOnly,
@@ -6983,11 +7145,11 @@ var MultiInputBase = (_a) => {
       }
     }, itemToString(item));
   });
-  return /* @__PURE__ */ React66.createElement("div", null, /* @__PURE__ */ React66.createElement(Select.InputContainer, {
+  return /* @__PURE__ */ React68.createElement("div", null, /* @__PURE__ */ React68.createElement(Select.InputContainer, {
     variant: disabled ? "disabled" : valid === false ? "error" : readOnly ? "readOnly" : hasFocus ? "focused" : "default"
-  }, /* @__PURE__ */ React66.createElement("div", {
+  }, /* @__PURE__ */ React68.createElement("div", {
     className: "grow inline-flex flex-row flex-wrap gap-y-2"
-  }, inline && renderChips(), /* @__PURE__ */ React66.createElement(Select.Input, __spreadProps(__spreadValues({
+  }, inline && renderChips(), /* @__PURE__ */ React68.createElement(Select.Input, __spreadProps(__spreadValues({
     ref: inputRef,
     id: id != null ? id : name,
     name,
@@ -7005,11 +7167,11 @@ var MultiInputBase = (_a) => {
     onFocus: handleFocus,
     onBlur: handleBlur,
     autoComplete: "off"
-  }))), endAdornment && /* @__PURE__ */ React66.createElement(InputAdornment, null, endAdornment)), !inline && /* @__PURE__ */ React66.createElement("div", {
+  }))), endAdornment && /* @__PURE__ */ React68.createElement(InputAdornment, null, endAdornment)), !inline && /* @__PURE__ */ React68.createElement("div", {
     className: tw("flex flex-row flex-wrap gap-y-2 mt-2")
   }, renderChips()));
 };
-var BaseMultiInputSkeleton = () => /* @__PURE__ */ React66.createElement(Skeleton, {
+var BaseMultiInputSkeleton = () => /* @__PURE__ */ React68.createElement(Skeleton, {
   height: 38
 });
 MultiInputBase.Skeleton = BaseMultiInputSkeleton;
@@ -7025,15 +7187,15 @@ var MultiInput = (props) => {
   const errorMessageId = uniqueId4();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const labelControlProps = getLabelControlProps(props);
-  const baseProps = omit10(props, Object.keys(labelControlProps));
-  return /* @__PURE__ */ React66.createElement(LabelControl, __spreadProps(__spreadValues({
+  const baseProps = omit11(props, Object.keys(labelControlProps));
+  return /* @__PURE__ */ React68.createElement(LabelControl, __spreadProps(__spreadValues({
     id: `${id.current}-label`,
     htmlFor: `${id.current}-input`,
     messageId: errorMessageId
   }, labelControlProps), {
     length: value.length,
     maxLength
-  }), /* @__PURE__ */ React66.createElement(MultiInputBase, __spreadProps(__spreadValues(__spreadValues({}, baseProps), errorProps), {
+  }), /* @__PURE__ */ React68.createElement(MultiInputBase, __spreadProps(__spreadValues(__spreadValues({}, baseProps), errorProps), {
     id: `${id.current}-input`,
     onChange: (value2) => {
       var _a2;
@@ -7045,16 +7207,16 @@ var MultiInput = (props) => {
     valid: props.valid
   })));
 };
-var MultiInputSkeleton = () => /* @__PURE__ */ React66.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React66.createElement(MultiInputBase.Skeleton, null));
+var MultiInputSkeleton = () => /* @__PURE__ */ React68.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React68.createElement(MultiInputBase.Skeleton, null));
 MultiInput.Skeleton = MultiInputSkeleton;
 MultiInput.Skeleton.displayName = "MultiInput.Skeleton";
 
 // src/components/MultiSelect/MultiSelect.tsx
-import React67, { useRef as useRef8, useState as useState9 } from "react";
+import React69, { useRef as useRef8, useState as useState9 } from "react";
 import { useOverlayPosition as useOverlayPosition5 } from "@react-aria/overlays";
 import { useCombobox as useCombobox2, useMultipleSelection } from "downshift";
 import isNil from "lodash/isNil";
-import omit11 from "lodash/omit";
+import omit12 from "lodash/omit";
 import omitBy from "lodash/omitBy";
 import uniqueId5 from "lodash/uniqueId";
 import { matchSorter as matchSorter2 } from "match-sorter";
@@ -7064,9 +7226,9 @@ var MultiSelectBase = (_a) => {
     name,
     placeholder,
     maxHeight,
-    closeOnSelect = true,
     hideChips = false,
     inline = true,
+    closeOnSelect = inline ? false : true,
     options,
     optionKeys = ["label", "value"],
     noResults,
@@ -7086,9 +7248,9 @@ var MultiSelectBase = (_a) => {
     "name",
     "placeholder",
     "maxHeight",
-    "closeOnSelect",
     "hideChips",
     "inline",
+    "closeOnSelect",
     "options",
     "optionKeys",
     "noResults",
@@ -7124,10 +7286,19 @@ var MultiSelectBase = (_a) => {
   const filteredOptions = (inputValue ? matchSorter2(options, inputValue, { keys }) : options).filter(
     (opt) => !selectedItemsAsStrings.includes(itemToString(opt))
   );
-  const { isOpen, closeMenu, highlightedIndex, getInputProps, getMenuProps, getToggleButtonProps, getItemProps } = useCombobox2({
+  const {
+    isOpen,
+    openMenu,
+    closeMenu,
+    highlightedIndex,
+    getInputProps,
+    getMenuProps,
+    getToggleButtonProps,
+    getItemProps
+  } = useCombobox2({
     id,
     inputValue,
-    defaultHighlightedIndex: 0,
+    defaultSelectedItem: defaultValue,
     selectedItem: null,
     items: filteredOptions,
     stateReducer: (_, actionChanges) => {
@@ -7167,15 +7338,16 @@ var MultiSelectBase = (_a) => {
     shouldFlip: true,
     isOpen
   });
-  const inputProps = getInputProps(getDropdownProps({ preventKeyAction: isOpen, disabled: disabled || readOnly }));
+  const inputProps = getInputProps(getDropdownProps({ disabled: disabled || readOnly }));
   const renderChips = () => {
-    return selectedItems.map((selectedItem, index) => /* @__PURE__ */ React67.createElement(InputChip, __spreadProps(__spreadValues({
+    return selectedItems.map((selectedItem, index) => /* @__PURE__ */ React69.createElement(InputChip, __spreadProps(__spreadValues({
       key: `${itemToString(selectedItem)}.chip`,
       className: tw("mx-0"),
       disabled,
       readOnly
     }, getSelectedItemProps({ selectedItem, index })), {
       onClick: (e) => {
+        e.preventDefault();
         e.stopPropagation();
         removeSelectedItem(selectedItem);
       }
@@ -7184,14 +7356,14 @@ var MultiSelectBase = (_a) => {
   const hasNoResults = options.length === 0 || filteredOptions.length === 0;
   const width = (_a2 = targetRef.current) == null ? void 0 : _a2.offsetWidth;
   const style = isOpen ? __spreadProps(__spreadValues({}, overlayProps.style), { width }) : { display: "none" };
-  return /* @__PURE__ */ React67.createElement("div", {
+  return /* @__PURE__ */ React69.createElement("div", {
     className: tw("relative")
-  }, /* @__PURE__ */ React67.createElement(Select.InputContainer, {
+  }, /* @__PURE__ */ React69.createElement(Select.InputContainer, {
     ref: targetRef,
     variant: disabled ? "disabled" : !valid ? "error" : readOnly ? "readOnly" : hasFocus ? "focused" : "default"
-  }, /* @__PURE__ */ React67.createElement("div", {
+  }, /* @__PURE__ */ React69.createElement("div", {
     className: "grow inline-flex flex-row flex-wrap gap-2"
-  }, !hideChips && inline && renderChips(), /* @__PURE__ */ React67.createElement(Select.Input, __spreadProps(__spreadValues(__spreadValues({
+  }, !hideChips && inline && renderChips(), /* @__PURE__ */ React69.createElement(Select.Input, __spreadProps(__spreadValues(__spreadValues({
     id,
     name,
     placeholder: selectedItems.length === 0 && !readOnly ? placeholder : "",
@@ -7199,6 +7371,7 @@ var MultiSelectBase = (_a) => {
   }, inputProps), props), {
     disabled,
     readOnly,
+    onClick: readOnly ? void 0 : openMenu,
     onKeyDown: (e) => {
       var _a3;
       e.stopPropagation();
@@ -7206,28 +7379,33 @@ var MultiSelectBase = (_a) => {
     },
     onKeyUp: (e) => e.stopPropagation(),
     onFocus: () => setFocus(true),
-    onBlur: () => setFocus(false)
-  }))), !readOnly && /* @__PURE__ */ React67.createElement(Select.Toggle, __spreadValues({
+    onBlur: (e) => {
+      var _a3;
+      setFocus(false);
+      (_a3 = inputProps.onBlur) == null ? void 0 : _a3.call(inputProps, e);
+    }
+  }))), !readOnly && /* @__PURE__ */ React69.createElement(Select.Toggle, __spreadValues({
     hasFocus,
     isOpen
-  }, getToggleButtonProps({ disabled })))), !hideChips && !inline && /* @__PURE__ */ React67.createElement("div", {
+  }, getToggleButtonProps({ disabled })))), !hideChips && !inline && /* @__PURE__ */ React69.createElement("div", {
     className: tw("flex flex-row flex-wrap gap-2 mt-2")
-  }, renderChips()), /* @__PURE__ */ React67.createElement(PopoverWrapper, __spreadProps(__spreadValues({
+  }, renderChips()), /* @__PURE__ */ React69.createElement(PopoverWrapper, __spreadProps(__spreadValues({
     isOpen: true,
     isDismissable: true,
     autoFocus: true
   }, getMenuProps({ ref: overlayRef })), {
     style,
-    onClose: closeMenu
-  }), /* @__PURE__ */ React67.createElement(Select.Menu, {
+    onClose: closeMenu,
+    className: tw("overflow-y-auto")
+  }), /* @__PURE__ */ React69.createElement(Select.Menu, {
     maxHeight
-  }, isOpen && hasNoResults && /* @__PURE__ */ React67.createElement(Select.NoResults, null, noResults), isOpen && filteredOptions.map((item, index) => /* @__PURE__ */ React67.createElement(Select.Item, __spreadValues({
+  }, isOpen && hasNoResults && /* @__PURE__ */ React69.createElement(Select.NoResults, null, noResults), isOpen && filteredOptions.map((item, index) => /* @__PURE__ */ React69.createElement(Select.Item, __spreadValues({
     key: itemToString(item),
     highlighted: index === highlightedIndex,
     selected: selectedItems.includes(item)
   }, getItemProps({ item, index, disabled: isOptionDisabled(item, index) })), renderOption(item))))));
 };
-var MultiSelectBaseSkeleton = () => /* @__PURE__ */ React67.createElement(Skeleton, {
+var MultiSelectBaseSkeleton = () => /* @__PURE__ */ React69.createElement(Skeleton, {
   height: 38
 });
 MultiSelectBase.Skeleton = MultiSelectBaseSkeleton;
@@ -7244,12 +7422,12 @@ var MultiSelect = (_a) => {
   const errorMessageId = uniqueId5();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const labelControlProps = getLabelControlProps(props);
-  const baseProps = omit11(props, Object.keys(labelControlProps));
-  return /* @__PURE__ */ React67.createElement(LabelControl, __spreadValues({
+  const baseProps = omit12(props, Object.keys(labelControlProps));
+  return /* @__PURE__ */ React69.createElement(LabelControl, __spreadValues({
     id: `${id.current}-label`,
     htmlFor: `${id.current}-input`,
     messageId: errorMessageId
-  }, labelControlProps), /* @__PURE__ */ React67.createElement(MultiSelectBase, __spreadProps(__spreadValues(__spreadValues({}, baseProps), errorProps), {
+  }, labelControlProps), /* @__PURE__ */ React69.createElement(MultiSelectBase, __spreadProps(__spreadValues(__spreadValues({}, baseProps), errorProps), {
     id: id.current,
     options,
     noResults,
@@ -7257,16 +7435,16 @@ var MultiSelect = (_a) => {
     valid: props.valid
   })));
 };
-var MultiSelectSkeleton = () => /* @__PURE__ */ React67.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React67.createElement(MultiSelectBase.Skeleton, null));
+var MultiSelectSkeleton = () => /* @__PURE__ */ React69.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React69.createElement(MultiSelectBase.Skeleton, null));
 MultiSelect.Skeleton = MultiSelectSkeleton;
 MultiSelect.Skeleton.displayName = "MultiSelect.Skeleton";
 
 // src/components/NativeSelect/NativeSelect.tsx
-import React68, { useRef as useRef9 } from "react";
-import omit12 from "lodash/omit";
+import React70, { useRef as useRef9 } from "react";
+import omit13 from "lodash/omit";
 import uniqueId6 from "lodash/uniqueId";
 var import_caretDown = __toESM(require_caretDown());
-var NativeSelectBase = React68.forwardRef(
+var NativeSelectBase = React70.forwardRef(
   (_a, ref) => {
     var _b = _a, { children, disabled = false, required = false, valid = true, readOnly = false } = _b, props = __objRest(_b, ["children", "disabled", "required", "valid", "readOnly"]);
     const placeholderValue = uniqueId6("default_value_for_placeholder");
@@ -7283,16 +7461,16 @@ var NativeSelectBase = React68.forwardRef(
         (_b2 = props.onBlur) == null ? void 0 : _b2.call(props, event);
       }
     };
-    return /* @__PURE__ */ React68.createElement("span", {
+    return /* @__PURE__ */ React70.createElement("span", {
       className: tw("relative block")
-    }, !readOnly && /* @__PURE__ */ React68.createElement("span", {
+    }, !readOnly && /* @__PURE__ */ React70.createElement("span", {
       className: tw(
         "absolute right-0 inset-y-0 mr-4 text-grey-40 flex ml-3 pointer-events-none typography-default-strong mt-4"
       )
-    }, /* @__PURE__ */ React68.createElement(Icon, {
+    }, /* @__PURE__ */ React70.createElement(Icon, {
       icon: import_caretDown.default,
       "data-testid": "icon-dropdown"
-    })), /* @__PURE__ */ React68.createElement("select", __spreadProps(__spreadValues({
+    })), /* @__PURE__ */ React70.createElement("select", __spreadProps(__spreadValues({
       ref,
       disabled: disabled || readOnly,
       required
@@ -7311,16 +7489,16 @@ var NativeSelectBase = React68.forwardRef(
         ),
         props.className
       )
-    }), props.placeholder && /* @__PURE__ */ React68.createElement("option", {
+    }), props.placeholder && /* @__PURE__ */ React70.createElement("option", {
       value: placeholderValue,
       disabled: true
     }, props.placeholder), children));
   }
 );
-NativeSelectBase.Skeleton = () => /* @__PURE__ */ React68.createElement(Skeleton, {
+NativeSelectBase.Skeleton = () => /* @__PURE__ */ React70.createElement(Skeleton, {
   height: 38
 });
-var NativeSelect = React68.forwardRef(
+var NativeSelect = React70.forwardRef(
   (_a, ref) => {
     var _b = _a, { readOnly } = _b, props = __objRest(_b, ["readOnly"]);
     var _a2;
@@ -7328,12 +7506,12 @@ var NativeSelect = React68.forwardRef(
     const errorMessageId = uniqueId6();
     const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
     const _b2 = getLabelControlProps(props), { "data-testid": dataTestId } = _b2, labelControlProps = __objRest(_b2, ["data-testid"]);
-    const baseProps = omit12(props, Object.keys(labelControlProps));
-    return /* @__PURE__ */ React68.createElement(LabelControl, __spreadValues({
+    const baseProps = omit13(props, Object.keys(labelControlProps));
+    return /* @__PURE__ */ React70.createElement(LabelControl, __spreadValues({
       id: `${id.current}-label`,
       htmlFor: id.current,
       messageId: errorMessageId
-    }, labelControlProps), /* @__PURE__ */ React68.createElement(NativeSelectBase, __spreadProps(__spreadValues(__spreadValues({
+    }, labelControlProps), /* @__PURE__ */ React70.createElement(NativeSelectBase, __spreadProps(__spreadValues(__spreadValues({
       ref
     }, baseProps), errorProps), {
       id: id.current,
@@ -7346,22 +7524,22 @@ var NativeSelect = React68.forwardRef(
     })));
   }
 );
-var Option = React68.forwardRef((_a, ref) => {
+var Option = React70.forwardRef((_a, ref) => {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ React68.createElement("option", __spreadValues({
+  return /* @__PURE__ */ React70.createElement("option", __spreadValues({
     ref
   }, props), children);
 });
-var NativeSelectSkeleton = () => /* @__PURE__ */ React68.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React68.createElement(NativeSelectBase.Skeleton, null), /* @__PURE__ */ React68.createElement("div", {
+var NativeSelectSkeleton = () => /* @__PURE__ */ React70.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React70.createElement(NativeSelectBase.Skeleton, null), /* @__PURE__ */ React70.createElement("div", {
   style: { height: "1px" }
 }));
 NativeSelect.Skeleton = NativeSelectSkeleton;
 NativeSelect.Skeleton.displayName = "NativeSelect.Skeleton";
 
 // src/components/PageHeader/PageHeader.tsx
-import React69 from "react";
+import React71 from "react";
 import castArray3 from "lodash/castArray";
-import omit13 from "lodash/omit";
+import omit14 from "lodash/omit";
 var PageHeader = ({
   title,
   image,
@@ -7371,54 +7549,54 @@ var PageHeader = ({
   chips = [],
   breadcrumbs
 }) => {
-  return /* @__PURE__ */ React69.createElement(Flexbox, {
+  return /* @__PURE__ */ React71.createElement(Flexbox, {
     direction: "row",
     gap: "4",
     paddingBottom: "6"
-  }, /* @__PURE__ */ React69.createElement(Flexbox, {
+  }, /* @__PURE__ */ React71.createElement(Flexbox, {
     className: tw("grow"),
     direction: "column",
     gap: "0"
-  }, breadcrumbs && /* @__PURE__ */ React69.createElement(Breadcrumbs, null, breadcrumbs), /* @__PURE__ */ React69.createElement(Flexbox, {
+  }, breadcrumbs && /* @__PURE__ */ React71.createElement(Breadcrumbs, null, breadcrumbs), /* @__PURE__ */ React71.createElement(Flexbox, {
     gap: "5"
-  }, image && /* @__PURE__ */ React69.createElement("img", {
+  }, image && /* @__PURE__ */ React71.createElement("img", {
     src: image,
     alt: imageAlt,
     className: tw("w-[56px] h-[56px]")
-  }), /* @__PURE__ */ React69.createElement(Flexbox, {
+  }), /* @__PURE__ */ React71.createElement(Flexbox, {
     direction: "column",
     justifyContent: "center"
-  }, /* @__PURE__ */ React69.createElement(Typography2.Heading, null, title), chips.length > 0 && /* @__PURE__ */ React69.createElement(Flexbox, {
+  }, /* @__PURE__ */ React71.createElement(Typography2.Heading, null, title), chips.length > 0 && /* @__PURE__ */ React71.createElement(Flexbox, {
     gap: "3"
-  }, chips.map((chip) => /* @__PURE__ */ React69.createElement(Chip2, {
+  }, chips.map((chip) => /* @__PURE__ */ React71.createElement(Chip2, {
     key: chip,
     dense: true,
     text: chip
-  })))))), (secondaryActions || primaryAction) && /* @__PURE__ */ React69.createElement(Flexbox, {
+  })))))), (secondaryActions || primaryAction) && /* @__PURE__ */ React71.createElement(Flexbox, {
     gap: "4",
     className: tw("self-start")
   }, secondaryActions && castArray3(secondaryActions).filter(Boolean).map((_a) => {
     var _b = _a, { text } = _b, action = __objRest(_b, ["text"]);
-    return /* @__PURE__ */ React69.createElement(SecondaryButton, __spreadValues({
+    return /* @__PURE__ */ React71.createElement(SecondaryButton, __spreadValues({
       key: text
     }, action), text);
-  }), primaryAction && /* @__PURE__ */ React69.createElement(PrimaryButton, __spreadValues({
+  }), primaryAction && /* @__PURE__ */ React71.createElement(PrimaryButton, __spreadValues({
     key: primaryAction.text
-  }, omit13(primaryAction, "text")), primaryAction.text)));
+  }, omit14(primaryAction, "text")), primaryAction.text)));
 };
 
 // src/components/Pagination/Pagination.tsx
-import React71 from "react";
+import React73 from "react";
 import clamp from "lodash/clamp";
 
 // src/components/Select/Select.tsx
-import React70, { useRef as useRef10, useState as useState10 } from "react";
+import React72, { useRef as useRef10, useState as useState10 } from "react";
 import { useOverlayPosition as useOverlayPosition6 } from "@react-aria/overlays";
 import { useSelect } from "downshift";
 import defaults from "lodash/defaults";
 import isArray from "lodash/isArray";
 import isNil2 from "lodash/isNil";
-import omit14 from "lodash/omit";
+import omit15 from "lodash/omit";
 import uniqueId7 from "lodash/uniqueId";
 var hasIconProperty = (val) => {
   var _a;
@@ -7429,10 +7607,10 @@ var hasOptionGroups = (val) => {
 };
 var defaultRenderOption = (item, props, { selectedItem }, { getOptionKey, getValue, optionToString = getOptionLabelBuiltin }) => {
   var _a, _b;
-  return /* @__PURE__ */ React70.createElement(Select.Item, __spreadValues({
+  return /* @__PURE__ */ React72.createElement(Select.Item, __spreadValues({
     key: (_b = (_a = getOptionKey == null ? void 0 : getOptionKey(item)) != null ? _a : getValue == null ? void 0 : getValue(item)) != null ? _b : optionToString(item),
     selected: item === selectedItem
-  }, props), hasIconProperty(item) && /* @__PURE__ */ React70.createElement(InlineIcon, {
+  }, props), hasIconProperty(item) && /* @__PURE__ */ React72.createElement(InlineIcon, {
     icon: item.icon
   }), optionToString(item));
 };
@@ -7549,13 +7727,13 @@ var _SelectBase = (props) => {
     },
     withDefaults
   );
-  const renderGroup = (group) => /* @__PURE__ */ React70.createElement(React70.Fragment, {
+  const renderGroup = (group) => /* @__PURE__ */ React72.createElement(React72.Fragment, {
     key: group.label
-  }, /* @__PURE__ */ React70.createElement(Select.Group, null, group.label), group.options.map((opt) => renderItem(opt, items.indexOf(opt))));
-  const input = /* @__PURE__ */ React70.createElement(Select.InputContainer, __spreadProps(__spreadValues({}, getToggleButtonProps({ disabled: disabled || readOnly, ref: targetRef })), {
+  }, /* @__PURE__ */ React72.createElement(Select.Group, null, group.label), group.options.map((opt) => renderItem(opt, items.indexOf(opt))));
+  const input = /* @__PURE__ */ React72.createElement(Select.InputContainer, __spreadProps(__spreadValues({}, getToggleButtonProps({ disabled: disabled || readOnly, ref: targetRef })), {
     variant: disabled ? "disabled" : !valid ? "error" : readOnly ? "readOnly" : hasFocus ? "focused" : "default",
     tabIndex: 0
-  }), /* @__PURE__ */ React70.createElement(Select.Input, __spreadProps(__spreadValues({
+  }), /* @__PURE__ */ React72.createElement(Select.Input, __spreadProps(__spreadValues({
     id,
     name
   }, rest), {
@@ -7567,27 +7745,28 @@ var _SelectBase = (props) => {
     tabIndex: -1,
     onFocus: () => setFocus(true),
     onBlur: () => setFocus(false)
-  })), !readOnly && /* @__PURE__ */ React70.createElement(Select.Toggle, {
+  })), !readOnly && /* @__PURE__ */ React72.createElement(Select.Toggle, {
     disabled,
     isOpen,
     tabIndex: -1
   }));
   const width = (_b = targetRef.current) == null ? void 0 : _b.offsetWidth;
   const style = isOpen ? __spreadProps(__spreadValues({}, overlayProps.style), { width }) : { display: "none" };
-  return /* @__PURE__ */ React70.createElement("div", {
+  return /* @__PURE__ */ React72.createElement("div", {
     className: tw("relative")
-  }, labelWrapper ? React70.cloneElement(labelWrapper, { children: input }) : input, /* @__PURE__ */ React70.createElement(PopoverWrapper, __spreadProps(__spreadValues({
+  }, labelWrapper ? React72.cloneElement(labelWrapper, { children: input }) : input, /* @__PURE__ */ React72.createElement(PopoverWrapper, __spreadProps(__spreadValues({
     isOpen: true,
     isDismissable: true,
     autoFocus: true
   }, getMenuProps({ ref: overlayRef })), {
     style,
-    onClose: closeMenu
-  }), /* @__PURE__ */ React70.createElement(Select.Menu, {
+    onClose: closeMenu,
+    className: tw("overflow-y-auto")
+  }), /* @__PURE__ */ React72.createElement(Select.Menu, {
     maxHeight
-  }, isOpen && options.length === 0 && /* @__PURE__ */ React70.createElement(Select.EmptyStateContainer, null, emptyState), isOpen && options.length > 0 && !hasOptionGroups(options) && options.map(renderItem), isOpen && options.length > 0 && hasOptionGroups(options) && options.map(renderGroup), isOpen && actions.length > 0 && /* @__PURE__ */ React70.createElement(React70.Fragment, null, /* @__PURE__ */ React70.createElement(Select.Divider, {
+  }, isOpen && options.length === 0 && /* @__PURE__ */ React72.createElement(Select.EmptyStateContainer, null, emptyState), isOpen && options.length > 0 && !hasOptionGroups(options) && options.map(renderItem), isOpen && options.length > 0 && hasOptionGroups(options) && options.map(renderGroup), isOpen && actions.length > 0 && /* @__PURE__ */ React72.createElement(React72.Fragment, null, /* @__PURE__ */ React72.createElement(Select.Divider, {
     onMouseOver: () => setHighlightedIndex(-1)
-  }), actions.map((act, index) => /* @__PURE__ */ React70.createElement(Select.ActionItem, __spreadProps(__spreadValues({
+  }), actions.map((act, index) => /* @__PURE__ */ React72.createElement(Select.ActionItem, __spreadProps(__spreadValues({
     key: `${index}`
   }, act), {
     onMouseOver: () => setHighlightedIndex(-1),
@@ -7597,10 +7776,10 @@ var _SelectBase = (props) => {
     }
   }), act.label))))));
 };
-var SelectBase = (props) => /* @__PURE__ */ React70.createElement(_SelectBase, __spreadProps(__spreadValues({}, props), {
+var SelectBase = (props) => /* @__PURE__ */ React72.createElement(_SelectBase, __spreadProps(__spreadValues({}, props), {
   labelWrapper: void 0
 }));
-var SelectBaseSkeleton = () => /* @__PURE__ */ React70.createElement(Skeleton, {
+var SelectBaseSkeleton = () => /* @__PURE__ */ React72.createElement(Skeleton, {
   height: 38
 });
 SelectBase.Skeleton = SelectBaseSkeleton;
@@ -7615,22 +7794,22 @@ var Select2 = (_a) => {
   const errorMessageId = uniqueId7();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const labelProps = getLabelControlProps(props);
-  const baseProps = omit14(props, Object.keys(labelProps));
+  const baseProps = omit15(props, Object.keys(labelProps));
   const legacyError = labelProps.error !== void 0 && labelProps.valid === false;
   const variant = !labelProps.valid || legacyError ? "error" : labelProps.disabled ? "disabled" : "default";
-  const label = /* @__PURE__ */ React70.createElement(Label, __spreadValues({
+  const label = /* @__PURE__ */ React72.createElement(Label, __spreadValues({
     id: `${id.current}-label`,
     htmlFor: `${id.current}-input`,
     variant,
     messageId: errorMessageId
   }, labelProps));
-  return /* @__PURE__ */ React70.createElement(FormControl, null, /* @__PURE__ */ React70.createElement(_SelectBase, __spreadProps(__spreadValues(__spreadValues({}, baseProps), errorProps), {
+  return /* @__PURE__ */ React72.createElement(FormControl, null, /* @__PURE__ */ React72.createElement(_SelectBase, __spreadProps(__spreadValues(__spreadValues({}, baseProps), errorProps), {
     id: `${id.current}-input`,
     options,
     disabled: props.disabled,
     valid: props.valid,
     labelWrapper: label
-  })), /* @__PURE__ */ React70.createElement(HelperText, {
+  })), /* @__PURE__ */ React72.createElement(HelperText, {
     messageId: errorMessageId,
     error: !labelProps.valid,
     helperText: labelProps.helperText,
@@ -7639,7 +7818,7 @@ var Select2 = (_a) => {
     reserveSpaceForError: labelProps.reserveSpaceForError
   }));
 };
-var SelectSkeleton = () => /* @__PURE__ */ React70.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React70.createElement(SelectBase.Skeleton, null));
+var SelectSkeleton = () => /* @__PURE__ */ React72.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React72.createElement(SelectBase.Skeleton, null));
 Select2.Skeleton = SelectSkeleton;
 
 // src/components/Pagination/Pagination.tsx
@@ -7657,25 +7836,25 @@ var Pagination = ({
   pageSizes,
   onPageSizeChange
 }) => {
-  const [value, setValue] = React71.useState(currentPage);
-  React71.useEffect(() => {
+  const [value, setValue] = React73.useState(currentPage);
+  React73.useEffect(() => {
     setValue(currentPage);
   }, [currentPage]);
-  React71.useEffect(() => {
+  React73.useEffect(() => {
     onPageChange(1);
     setValue(1);
   }, [pageSize]);
-  return /* @__PURE__ */ React71.createElement(Box, {
+  return /* @__PURE__ */ React73.createElement(Box, {
     className: tw("grid grid-cols-[200px_1fr_200px]"),
     backgroundColor: "grey-0",
     padding: "4"
-  }, pageSizes && onPageSizeChange && typeof pageSize === "number" ? /* @__PURE__ */ React71.createElement(Box, {
+  }, pageSizes && onPageSizeChange && typeof pageSize === "number" ? /* @__PURE__ */ React73.createElement(Box, {
     display: "flex",
     alignItems: "center",
     gap: "4"
-  }, /* @__PURE__ */ React71.createElement(Typography2.SmallText, null, "Items per page "), /* @__PURE__ */ React71.createElement("div", {
+  }, /* @__PURE__ */ React73.createElement(Typography2.SmallText, null, "Items per page "), /* @__PURE__ */ React73.createElement("div", {
     className: tw("max-w-[70px]")
-  }, /* @__PURE__ */ React71.createElement(SelectBase, {
+  }, /* @__PURE__ */ React73.createElement(SelectBase, {
     options: pageSizes.map((size) => size.toString()),
     value: pageSize.toString(),
     onChange: (size) => {
@@ -7686,24 +7865,24 @@ var Pagination = ({
         }
       }
     }
-  }))) : /* @__PURE__ */ React71.createElement("div", null), /* @__PURE__ */ React71.createElement(Box, {
+  }))) : /* @__PURE__ */ React73.createElement("div", null), /* @__PURE__ */ React73.createElement(Box, {
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
     className: tw("grow")
-  }, /* @__PURE__ */ React71.createElement(IconButton, {
+  }, /* @__PURE__ */ React73.createElement(IconButton, {
     "aria-label": "First",
     onClick: () => onPageChange(1),
     icon: import_chevronBackward.default,
     disabled: !hasPreviousPage
-  }), /* @__PURE__ */ React71.createElement(IconButton, {
+  }), /* @__PURE__ */ React73.createElement(IconButton, {
     "aria-label": "Previous",
     onClick: () => onPageChange(currentPage - 1),
     icon: import_chevronLeft3.default,
     disabled: !hasPreviousPage
-  }), /* @__PURE__ */ React71.createElement(Box, {
+  }), /* @__PURE__ */ React73.createElement(Box, {
     paddingX: "4"
-  }, /* @__PURE__ */ React71.createElement(Typography2.SmallText, null, "Page")), /* @__PURE__ */ React71.createElement(InputBase, {
+  }, /* @__PURE__ */ React73.createElement(Typography2.SmallText, null, "Page")), /* @__PURE__ */ React73.createElement(InputBase, {
     className: classNames(tw("text-center max-w-[40px]"), "no-arrows"),
     type: "number",
     min: 1,
@@ -7726,43 +7905,43 @@ var Pagination = ({
         setValue(1);
       }
     }
-  }), /* @__PURE__ */ React71.createElement(Box, {
+  }), /* @__PURE__ */ React73.createElement(Box, {
     paddingX: "4"
-  }, /* @__PURE__ */ React71.createElement(Typography2.SmallText, null, "of ", totalPages)), /* @__PURE__ */ React71.createElement(IconButton, {
+  }, /* @__PURE__ */ React73.createElement(Typography2.SmallText, null, "of ", totalPages)), /* @__PURE__ */ React73.createElement(IconButton, {
     "aria-label": "Next",
     onClick: () => onPageChange(currentPage + 1),
     icon: import_chevronRight3.default,
     disabled: !hasNextPage
-  }), /* @__PURE__ */ React71.createElement(IconButton, {
+  }), /* @__PURE__ */ React73.createElement(IconButton, {
     "aria-label": "Last",
     onClick: () => onPageChange(totalPages),
     icon: import_chevronForward.default,
     disabled: !hasNextPage
-  })), /* @__PURE__ */ React71.createElement("div", null));
+  })), /* @__PURE__ */ React73.createElement("div", null));
 };
 
 // src/components/PopoverDialog/PopoverDialog.tsx
-import React73 from "react";
-import omit15 from "lodash/omit";
+import React75 from "react";
+import omit16 from "lodash/omit";
 
 // src/common/PopoverDialog/PopoverDialog.tsx
-import React72 from "react";
+import React74 from "react";
 var Header = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React72.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React74.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__ */ React72.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React74.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__ */ React72.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React74.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
     htmlTag: "div",
     variant: "caption",
     className: classNames(tw("px-5 overflow-y-auto"), className)
@@ -7770,13 +7949,13 @@ var Body = (_a) => {
 };
 var Footer = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React72.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React74.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("p-5"), className)
   }), children);
 };
-var Actions = (_a) => {
+var Actions2 = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React72.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React74.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("flex gap-4"), className)
   }), children);
 };
@@ -7785,28 +7964,28 @@ var PopoverDialog = {
   Title,
   Body,
   Footer,
-  Actions
+  Actions: Actions2
 };
 
 // src/components/PopoverDialog/PopoverDialog.tsx
 var PopoverDialog2 = ({ placement, open, title, secondaryAction, primaryAction, children }) => {
   const wrapPromptWithBody = (child) => {
     if (isComponentType(child, PopoverDialog2.Prompt)) {
-      return /* @__PURE__ */ React73.createElement(Popover2.Panel, {
+      return /* @__PURE__ */ React75.createElement(Popover2.Panel, {
         className: tw("max-w-[300px]")
-      }, /* @__PURE__ */ React73.createElement(PopoverDialog.Header, null, /* @__PURE__ */ React73.createElement(PopoverDialog.Title, null, title)), child, /* @__PURE__ */ React73.createElement(PopoverDialog.Footer, null, /* @__PURE__ */ React73.createElement(PopoverDialog.Actions, null, secondaryAction && /* @__PURE__ */ React73.createElement(Popover2.Button, __spreadValues({
+      }, /* @__PURE__ */ React75.createElement(PopoverDialog.Header, null, /* @__PURE__ */ React75.createElement(PopoverDialog.Title, null, title)), child, /* @__PURE__ */ React75.createElement(PopoverDialog.Footer, null, /* @__PURE__ */ React75.createElement(PopoverDialog.Actions, null, secondaryAction && /* @__PURE__ */ React75.createElement(Popover2.Button, __spreadValues({
         kind: "secondary-ghost",
         key: secondaryAction.text,
         dense: true
-      }, omit15(secondaryAction, "text")), secondaryAction.text), /* @__PURE__ */ React73.createElement(Popover2.Button, __spreadValues({
+      }, omit16(secondaryAction, "text")), secondaryAction.text), /* @__PURE__ */ React75.createElement(Popover2.Button, __spreadValues({
         kind: "ghost",
         key: primaryAction.text,
         dense: true
-      }, omit15(primaryAction, "text")), primaryAction.text))));
+      }, omit16(primaryAction, "text")), primaryAction.text))));
     }
     return child;
   };
-  return /* @__PURE__ */ React73.createElement(Popover2, {
+  return /* @__PURE__ */ React75.createElement(Popover2, {
     type: "dialog",
     isOpen: open,
     placement,
@@ -7814,10 +7993,10 @@ var PopoverDialog2 = ({ placement, open, title, secondaryAction, primaryAction,
     isKeyboardDismissDisabled: false,
     autoFocus: true,
     containFocus: true
-  }, React73.Children.map(children, wrapPromptWithBody));
+  }, React75.Children.map(children, wrapPromptWithBody));
 };
 PopoverDialog2.Trigger = Popover2.Trigger;
-var Prompt = ({ children }) => /* @__PURE__ */ React73.createElement(PopoverDialog.Body, null, children);
+var Prompt = ({ children }) => /* @__PURE__ */ React75.createElement(PopoverDialog.Body, null, children);
 Prompt.displayName = "PopoverDialog.Prompt";
 PopoverDialog2.Prompt = Prompt;
 
@@ -7826,14 +8005,14 @@ import { createPortal } from "react-dom";
 var Portal = ({ children, to }) => createPortal(children, to);
 
 // src/components/ProgressBar/ProgressBar.tsx
-import React75 from "react";
+import React77 from "react";
 
 // src/common/ProgressBar/ProgressBar.tsx
-import React74 from "react";
+import React76 from "react";
 import clamp2 from "lodash/clamp";
 var ProgressBar = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React74.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React76.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       tw("relative flex items-center w-full bg-grey-0 h-2 rounded-full overflow-hidden"),
       className
@@ -7849,7 +8028,7 @@ var STATUS_COLORS = {
 ProgressBar.Indicator = (_a) => {
   var _b = _a, { min, max, value, "aria-label": ariaLabel, status, className } = _b, rest = __objRest(_b, ["min", "max", "value", "aria-label", "status", "className"]);
   const completedPercentage = clamp2((value - min) / (max - min) * 100, 0, 100);
-  return /* @__PURE__ */ React74.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React76.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       tw("h-2 rounded-full transition-all ease-in-out delay-150"),
       STATUS_COLORS[status],
@@ -7865,11 +8044,11 @@ ProgressBar.Indicator = (_a) => {
 };
 ProgressBar.Labels = (_a) => {
   var _b = _a, { children, startLabel, endLabel, className } = _b, rest = __objRest(_b, ["children", "startLabel", "endLabel", "className"]);
-  return /* @__PURE__ */ React74.createElement("div", {
+  return /* @__PURE__ */ React76.createElement("div", {
     className: classNames(tw("flex flex-row"), className)
-  }, /* @__PURE__ */ React74.createElement("span", __spreadProps(__spreadValues({}, rest), {
+  }, /* @__PURE__ */ React76.createElement("span", __spreadProps(__spreadValues({}, rest), {
     className: tw("grow text-grey-70 typography-caption")
-  }), startLabel), /* @__PURE__ */ React74.createElement("span", __spreadProps(__spreadValues({}, rest), {
+  }), startLabel), /* @__PURE__ */ React76.createElement("span", __spreadProps(__spreadValues({}, rest), {
     className: tw("grow text-grey-70 typography-caption text-right")
   }), endLabel));
 };
@@ -7887,7 +8066,7 @@ var ProgressBar2 = (props) => {
   if (min > max) {
     throw new Error("`min` value provided to `ProgressBar` is greater than `max` value.");
   }
-  const progress = /* @__PURE__ */ React75.createElement(ProgressBar, null, /* @__PURE__ */ React75.createElement(ProgressBar.Indicator, {
+  const progress = /* @__PURE__ */ React77.createElement(ProgressBar, null, /* @__PURE__ */ React77.createElement(ProgressBar.Indicator, {
     status: value === max ? completedStatus : progresStatus,
     min,
     max,
@@ -7897,25 +8076,25 @@ var ProgressBar2 = (props) => {
   if (props.dense) {
     return progress;
   }
-  return /* @__PURE__ */ React75.createElement("div", null, progress, /* @__PURE__ */ React75.createElement(ProgressBar.Labels, {
+  return /* @__PURE__ */ React77.createElement("div", null, progress, /* @__PURE__ */ React77.createElement(ProgressBar.Labels, {
     className: tw("py-2"),
     startLabel: props.startLabel,
     endLabel: props.endLabel
   }));
 };
-ProgressBar2.Skeleton = () => /* @__PURE__ */ React75.createElement(Skeleton, {
+ProgressBar2.Skeleton = () => /* @__PURE__ */ React77.createElement(Skeleton, {
   height: 4,
   display: "block"
 });
 
 // src/components/RadioButton/RadioButton.tsx
-import React76 from "react";
-var RadioButton2 = React76.forwardRef(
+import React78 from "react";
+var RadioButton2 = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, { name, id, readOnly = false, disabled = false, caption, children, "aria-label": ariaLabel } = _b, props = __objRest(_b, ["name", "id", "readOnly", "disabled", "caption", "children", "aria-label"]);
     var _a2;
     const isChecked = (_a2 = props.checked) != null ? _a2 : props.defaultChecked;
-    return !readOnly || isChecked ? /* @__PURE__ */ React76.createElement(ControlLabel, {
+    return !readOnly || isChecked ? /* @__PURE__ */ React78.createElement(ControlLabel, {
       htmlFor: id,
       label: children,
       "aria-label": ariaLabel,
@@ -7923,7 +8102,7 @@ var RadioButton2 = React76.forwardRef(
       readOnly,
       disabled,
       style: { gap: "0 8px" }
-    }, !readOnly && /* @__PURE__ */ React76.createElement(RadioButton, __spreadProps(__spreadValues({
+    }, !readOnly && /* @__PURE__ */ React78.createElement(RadioButton, __spreadProps(__spreadValues({
       id,
       ref,
       name
@@ -7933,22 +8112,22 @@ var RadioButton2 = React76.forwardRef(
     }))) : null;
   }
 );
-var RadioButtonSkeleton = () => /* @__PURE__ */ React76.createElement("div", {
+var RadioButtonSkeleton = () => /* @__PURE__ */ React78.createElement("div", {
   className: tw("flex gap-3")
-}, /* @__PURE__ */ React76.createElement(Skeleton, {
+}, /* @__PURE__ */ React78.createElement(Skeleton, {
   height: 20,
   width: 20
-}), /* @__PURE__ */ React76.createElement(Skeleton, {
+}), /* @__PURE__ */ React78.createElement(Skeleton, {
   height: 20,
   width: 150
 }));
 RadioButton2.Skeleton = RadioButtonSkeleton;
 
 // src/components/RadioButtonGroup/RadioButtonGroup.tsx
-import React77 from "react";
+import React79 from "react";
 import uniqueId8 from "lodash/uniqueId";
 var isRadioButton = (c) => {
-  return React77.isValidElement(c) && c.type === RadioButton2;
+  return React79.isValidElement(c) && c.type === RadioButton2;
 };
 var RadioButtonGroup = (_a) => {
   var _b = _a, {
@@ -7971,7 +8150,7 @@ var RadioButtonGroup = (_a) => {
     "children"
   ]);
   var _a2;
-  const [value, setValue] = React77.useState((_a2 = _value != null ? _value : defaultValue) != null ? _a2 : "");
+  const [value, setValue] = React79.useState((_a2 = _value != null ? _value : defaultValue) != null ? _a2 : "");
   const errorMessageId = uniqueId8();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const labelControlProps = getLabelControlProps(props);
@@ -7982,14 +8161,14 @@ var RadioButtonGroup = (_a) => {
     setValue(e.target.value);
     onChange == null ? void 0 : onChange(e.target.value);
   };
-  const content = React77.Children.map(children, (c) => {
+  const content = React79.Children.map(children, (c) => {
     var _a3, _b2, _c;
     if (!isRadioButton(c)) {
       return null;
     }
     const defaultChecked = defaultValue === void 0 ? void 0 : c.props.value === defaultValue;
     const checked = value === void 0 ? void 0 : c.props.value === value;
-    return React77.cloneElement(c, {
+    return React79.cloneElement(c, {
       name,
       defaultChecked: (_a3 = c.props.defaultChecked) != null ? _a3 : defaultChecked,
       checked: (_b2 = c.props.checked) != null ? _b2 : checked,
@@ -7998,11 +8177,11 @@ var RadioButtonGroup = (_a) => {
       readOnly
     });
   });
-  return /* @__PURE__ */ React77.createElement(LabelControl, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ React79.createElement(LabelControl, __spreadValues(__spreadValues({
     fieldset: true
-  }, labelControlProps), errorProps), cols && /* @__PURE__ */ React77.createElement(InputGroup, {
+  }, labelControlProps), errorProps), cols && /* @__PURE__ */ React79.createElement(InputGroup, {
     cols
-  }, content), !cols && /* @__PURE__ */ React77.createElement(Flexbox, {
+  }, content), !cols && /* @__PURE__ */ React79.createElement(Flexbox, {
     direction,
     alignItems: "flex-start",
     colGap: "8",
@@ -8011,80 +8190,80 @@ var RadioButtonGroup = (_a) => {
   }, content));
 };
 var RadioButtonGroupSkeleton = ({ direction = "row", options = 2 }) => {
-  return /* @__PURE__ */ React77.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React77.createElement("div", {
+  return /* @__PURE__ */ React79.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React79.createElement("div", {
     className: tw("flex flex-wrap", {
       "flex-row gap-8": direction === "row",
       "flex-col gap-2": direction === "column"
     })
-  }, Array.from({ length: options }).map((_, key) => /* @__PURE__ */ React77.createElement(RadioButton2.Skeleton, {
+  }, Array.from({ length: options }).map((_, key) => /* @__PURE__ */ React79.createElement(RadioButton2.Skeleton, {
     key
   }))));
 };
 RadioButtonGroup.Skeleton = RadioButtonGroupSkeleton;
 
 // src/components/Section/Section.tsx
-import React79 from "react";
+import React81 from "react";
 import castArray4 from "lodash/castArray";
 
 // src/common/Section/Section.tsx
-import React78 from "react";
+import React80 from "react";
 var Section2 = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ React78.createElement(Box, __spreadValues({
+  return /* @__PURE__ */ React80.createElement(Box, __spreadValues({
     borderColor: "grey-5",
     borderWidth: "1px"
   }, rest), children);
 };
 Section2.Header = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React78.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React80.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("px-6 py-5 flex gap-5 justify-between items-center"), className)
   }), children);
 };
 Section2.TitleContainer = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React78.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React80.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("flex flex-col grow gap-2"), className)
   }), children);
 };
 Section2.Title = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ React78.createElement(Typography2.Subheading, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React80.createElement(Typography2.Subheading, __spreadProps(__spreadValues({}, rest), {
     color: "black"
   }), children);
 };
 Section2.Subtitle = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ React78.createElement(Typography2.SmallText, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React80.createElement(Typography2.SmallText, __spreadProps(__spreadValues({}, rest), {
     color: "grey-70"
   }), children);
 };
 Section2.Actions = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React78.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React80.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("flex gap-4 justify-end"), className)
   }), children);
 };
 Section2.Body = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React78.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React80.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("p-6"), className)
-  }), /* @__PURE__ */ React78.createElement(Typography, {
+  }), /* @__PURE__ */ React80.createElement(Typography, {
     htmlTag: "div",
     color: "grey-70"
   }, children));
 };
 
 // src/components/Section/Section.tsx
-var Section3 = ({ title, subtitle, actions, children }) => /* @__PURE__ */ React79.createElement(Section2, null, title && /* @__PURE__ */ React79.createElement(React79.Fragment, null, /* @__PURE__ */ React79.createElement(Section2.Header, null, /* @__PURE__ */ React79.createElement(Section2.TitleContainer, null, /* @__PURE__ */ React79.createElement(Section2.Title, null, title), subtitle && /* @__PURE__ */ React79.createElement(Section2.Subtitle, null, subtitle)), /* @__PURE__ */ React79.createElement(Section2.Actions, null, actions && castArray4(actions).filter(Boolean).map((_a) => {
+var Section3 = ({ title, subtitle, actions, children }) => /* @__PURE__ */ React81.createElement(Section2, null, title && /* @__PURE__ */ React81.createElement(React81.Fragment, null, /* @__PURE__ */ React81.createElement(Section2.Header, null, /* @__PURE__ */ React81.createElement(Section2.TitleContainer, null, /* @__PURE__ */ React81.createElement(Section2.Title, null, title), subtitle && /* @__PURE__ */ React81.createElement(Section2.Subtitle, null, subtitle)), /* @__PURE__ */ React81.createElement(Section2.Actions, null, actions && castArray4(actions).filter(Boolean).map((_a) => {
   var _b = _a, { text } = _b, action = __objRest(_b, ["text"]);
-  return /* @__PURE__ */ React79.createElement(SecondaryButton, __spreadValues({
+  return /* @__PURE__ */ React81.createElement(SecondaryButton, __spreadValues({
     key: text
   }, action), text);
-}))), /* @__PURE__ */ React79.createElement(Divider2, null)), /* @__PURE__ */ React79.createElement(Section2.Body, null, children));
+}))), /* @__PURE__ */ React81.createElement(Divider2, null)), /* @__PURE__ */ React81.createElement(Section2.Body, null, children));
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-import React80 from "react";
+import React82 from "react";
 var SegmentedControl = (_a) => {
   var _b = _a, {
     children,
@@ -8101,7 +8280,7 @@ var SegmentedControl = (_a) => {
     "selected",
     "className"
   ]);
-  return /* @__PURE__ */ React80.createElement("button", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React82.createElement("button", __spreadProps(__spreadValues({
     type: "button"
   }, rest), {
     className: classNames(
@@ -8132,11 +8311,11 @@ var SegmentedControlGroup = (_a) => {
     "border border-grey-20 text-grey-50": variant === "outlined",
     "bg-grey-0": variant === "raised"
   });
-  return /* @__PURE__ */ React80.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React82.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(classes, className)
-  }), React80.Children.map(
+  }), React82.Children.map(
     children,
-    (child) => React80.cloneElement(child, {
+    (child) => React82.cloneElement(child, {
       dense,
       variant,
       onClick: () => onChange(child.props.value),
@@ -8174,14 +8353,14 @@ var getCommonClassNames = (dense, selected) => tw(
 );
 
 // src/components/Stepper/Stepper.tsx
-import React82 from "react";
+import React84 from "react";
 
 // src/common/Stepper/Stepper.tsx
-import React81 from "react";
+import React83 from "react";
 var import_tick5 = __toESM(require_tick());
 var Stepper = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React81.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React83.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(className)
   }));
 };
@@ -8195,7 +8374,7 @@ var ConnectorContainer = (_a) => {
     "completed",
     "dense"
   ]);
-  return /* @__PURE__ */ React81.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React83.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       tw("absolute w-full -left-1/2", {
         "top-[3px] px-[14px]": Boolean(dense),
@@ -8207,7 +8386,7 @@ var ConnectorContainer = (_a) => {
 };
 var Connector = (_a) => {
   var _b = _a, { children, className, completed, dense } = _b, rest = __objRest(_b, ["children", "className", "completed", "dense"]);
-  return /* @__PURE__ */ React81.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React83.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       tw("w-full", {
         "bg-grey-20": !completed,
@@ -8221,7 +8400,7 @@ var Connector = (_a) => {
 };
 var Step = (_a) => {
   var _b = _a, { className, state } = _b, rest = __objRest(_b, ["className", "state"]);
-  return /* @__PURE__ */ React81.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React83.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       tw("flex flex-col items-center text-grey-90 relative text-center", {
         "text-grey-20": state === "inactive"
@@ -8242,13 +8421,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__ */ React81.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React83.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__ */ React81.createElement(InlineIcon, {
+  }), state === "completed" ? /* @__PURE__ */ React83.createElement(InlineIcon, {
     icon: import_tick5.default
   }) : dense ? null : children);
 };
@@ -8259,25 +8438,25 @@ Stepper.ConnectorContainer = ConnectorContainer;
 
 // src/components/Stepper/Stepper.tsx
 var Stepper2 = ({ children, activeIndex, dense }) => {
-  const steps = React82.Children.count(children);
-  return /* @__PURE__ */ React82.createElement(Stepper, {
+  const steps = React84.Children.count(children);
+  return /* @__PURE__ */ React84.createElement(Stepper, {
     role: "list"
-  }, /* @__PURE__ */ React82.createElement(Template, {
+  }, /* @__PURE__ */ React84.createElement(Template, {
     columns: steps
-  }, React82.Children.map(children, (child, index) => {
+  }, React84.Children.map(children, (child, index) => {
     if (!isComponentType(child, Step2)) {
       return new Error("<Stepper> can only have <Stepper.Step> components as children");
     } else {
       const state = index > activeIndex ? "inactive" : index === activeIndex ? "active" : "completed";
-      return /* @__PURE__ */ React82.createElement(Stepper.Step, {
+      return /* @__PURE__ */ React84.createElement(Stepper.Step, {
         state,
         "aria-current": state === "active" ? "step" : false,
         role: "listitem"
-      }, index > 0 && index <= steps && /* @__PURE__ */ React82.createElement(Stepper.ConnectorContainer, {
+      }, index > 0 && index <= steps && /* @__PURE__ */ React84.createElement(Stepper.ConnectorContainer, {
         dense
-      }, /* @__PURE__ */ React82.createElement(Stepper.ConnectorContainer.Connector, {
+      }, /* @__PURE__ */ React84.createElement(Stepper.ConnectorContainer.Connector, {
         completed: state === "completed" || state === "active"
-      })), /* @__PURE__ */ React82.createElement(Stepper.Step.Indicator, {
+      })), /* @__PURE__ */ React84.createElement(Stepper.Step.Indicator, {
         state,
         dense
       }, index + 1), child.props.children);
@@ -8288,16 +8467,16 @@ var Step2 = () => null;
 Stepper2.Step = Step2;
 
 // src/components/Switch/Switch.tsx
-import React84 from "react";
+import React86 from "react";
 
 // src/common/Switch/Switch.tsx
-import React83 from "react";
-var Switch = React83.forwardRef(
+import React85 from "react";
+var Switch = React85.forwardRef(
   (_a, ref) => {
     var _b = _a, { id, children, name, disabled = false, readOnly = false } = _b, props = __objRest(_b, ["id", "children", "name", "disabled", "readOnly"]);
-    return /* @__PURE__ */ React83.createElement("span", {
+    return /* @__PURE__ */ React85.createElement("span", {
       className: tw("relative inline-flex justify-center items-center self-center group")
-    }, /* @__PURE__ */ React83.createElement("input", __spreadProps(__spreadValues({
+    }, /* @__PURE__ */ React85.createElement("input", __spreadProps(__spreadValues({
       id,
       ref,
       type: "checkbox",
@@ -8316,7 +8495,7 @@ var Switch = React83.forwardRef(
       ),
       readOnly,
       disabled
-    })), /* @__PURE__ */ React83.createElement("span", {
+    })), /* @__PURE__ */ React85.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",
@@ -8329,12 +8508,12 @@ var Switch = React83.forwardRef(
 );
 
 // src/components/Switch/Switch.tsx
-var Switch2 = React84.forwardRef(
+var Switch2 = React86.forwardRef(
   (_a, ref) => {
     var _b = _a, { id, name, caption, readOnly = false, disabled = false, children, "aria-label": ariaLabel } = _b, props = __objRest(_b, ["id", "name", "caption", "readOnly", "disabled", "children", "aria-label"]);
     var _a2;
     const isChecked = (_a2 = props.checked) != null ? _a2 : props.defaultChecked;
-    return !readOnly || isChecked ? /* @__PURE__ */ React84.createElement(ControlLabel, {
+    return !readOnly || isChecked ? /* @__PURE__ */ React86.createElement(ControlLabel, {
       htmlFor: id,
       label: children,
       "aria-label": ariaLabel,
@@ -8342,7 +8521,7 @@ var Switch2 = React84.forwardRef(
       readOnly,
       disabled,
       style: { gap: "0 8px" }
-    }, !readOnly && /* @__PURE__ */ React84.createElement(Switch, __spreadProps(__spreadValues({
+    }, !readOnly && /* @__PURE__ */ React86.createElement(Switch, __spreadProps(__spreadValues({
       id,
       ref,
       name
@@ -8352,19 +8531,19 @@ var Switch2 = React84.forwardRef(
     }))) : null;
   }
 );
-var SwitchSkeleton = () => /* @__PURE__ */ React84.createElement("div", {
+var SwitchSkeleton = () => /* @__PURE__ */ React86.createElement("div", {
   className: tw("flex gap-3")
-}, /* @__PURE__ */ React84.createElement(Skeleton, {
+}, /* @__PURE__ */ React86.createElement(Skeleton, {
   height: 20,
   width: 35
-}), /* @__PURE__ */ React84.createElement(Skeleton, {
+}), /* @__PURE__ */ React86.createElement(Skeleton, {
   height: 20,
   width: 150
 }));
 Switch2.Skeleton = SwitchSkeleton;
 
 // src/components/SwitchGroup/SwitchGroup.tsx
-import React85, { useState as useState11 } from "react";
+import React87, { useState as useState11 } from "react";
 import uniqueId9 from "lodash/uniqueId";
 var SwitchGroup = (_a) => {
   var _b = _a, {
@@ -8396,11 +8575,11 @@ var SwitchGroup = (_a) => {
     setSelectedItems(updated);
     onChange == null ? void 0 : onChange(updated);
   };
-  return /* @__PURE__ */ React85.createElement(LabelControl, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ React87.createElement(LabelControl, __spreadValues(__spreadValues({
     fieldset: true
-  }, labelControlProps), errorProps), /* @__PURE__ */ React85.createElement(InputGroup, {
+  }, labelControlProps), errorProps), /* @__PURE__ */ React87.createElement(InputGroup, {
     cols
-  }, React85.Children.map(children, (c) => {
+  }, React87.Children.map(children, (c) => {
     var _a3, _b2, _c, _d;
     if (!isComponentType(c, Switch2)) {
       return null;
@@ -8408,7 +8587,7 @@ var SwitchGroup = (_a) => {
     const str = (_a3 = c.props.value) == null ? void 0 : _a3.toString();
     const defaultChecked = defaultValue === void 0 ? void 0 : str !== void 0 && defaultValue.includes(str);
     const checked = value === void 0 ? void 0 : str !== void 0 && value.includes(str);
-    return React85.cloneElement(c, {
+    return React87.cloneElement(c, {
       defaultChecked: (_b2 = c.props.defaultChecked) != null ? _b2 : defaultChecked,
       checked: (_c = c.props.checked) != null ? _c : checked,
       onChange: (_d = c.props.onChange) != null ? _d : handleChange,
@@ -8418,19 +8597,19 @@ var SwitchGroup = (_a) => {
   })));
 };
 var SwitchGroupSkeleton = ({ options = 2 }) => {
-  return /* @__PURE__ */ React85.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React85.createElement("div", {
+  return /* @__PURE__ */ React87.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React87.createElement("div", {
     className: tw("flex flex-wrap flex-col gap-2")
-  }, Array.from({ length: options }).map((_, key) => /* @__PURE__ */ React85.createElement(Switch2.Skeleton, {
+  }, Array.from({ length: options }).map((_, key) => /* @__PURE__ */ React87.createElement(Switch2.Skeleton, {
     key
   }))));
 };
 SwitchGroup.Skeleton = SwitchGroupSkeleton;
 
 // src/components/TagLabel/TagLabel.tsx
-import React86 from "react";
+import React88 from "react";
 var TagLabel = (_a) => {
   var _b = _a, { title, dense = false } = _b, rest = __objRest(_b, ["title", "dense"]);
-  return /* @__PURE__ */ React86.createElement("span", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React88.createElement("span", __spreadProps(__spreadValues({}, rest), {
     className: tw("rounded-full text-white bg-primary-70", {
       "py-2 px-4 typography-caption": !dense,
       "py-2 px-3 typography-caption-small": dense
@@ -8439,14 +8618,14 @@ var TagLabel = (_a) => {
 };
 
 // src/components/Textarea/Textarea.tsx
-import React87, { useRef as useRef11, useState as useState12 } from "react";
-import omit16 from "lodash/omit";
+import React89, { useRef as useRef11, useState as useState12 } from "react";
+import omit17 from "lodash/omit";
 import toString2 from "lodash/toString";
 import uniqueId10 from "lodash/uniqueId";
-var TextareaBase = React87.forwardRef(
+var TextareaBase = React89.forwardRef(
   (_a, ref) => {
     var _b = _a, { readOnly = false, valid = true } = _b, props = __objRest(_b, ["readOnly", "valid"]);
-    return /* @__PURE__ */ React87.createElement("textarea", __spreadProps(__spreadValues({
+    return /* @__PURE__ */ React89.createElement("textarea", __spreadProps(__spreadValues({
       ref
     }, props), {
       readOnly,
@@ -8454,23 +8633,23 @@ var TextareaBase = React87.forwardRef(
     }));
   }
 );
-TextareaBase.Skeleton = () => /* @__PURE__ */ React87.createElement(Skeleton, {
+TextareaBase.Skeleton = () => /* @__PURE__ */ React89.createElement(Skeleton, {
   height: 58
 });
-var Textarea = React87.forwardRef((props, ref) => {
+var Textarea = React89.forwardRef((props, ref) => {
   var _a, _b, _c;
   const [value, setValue] = useState12((_b = (_a = props.value) != null ? _a : props.defaultValue) != null ? _b : "");
   const id = useRef11((_c = props.id) != null ? _c : `textarea-${uniqueId10()}`);
   const errorMessageId = uniqueId10();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const _d = getLabelControlProps(props), { "data-testid": dataTestId } = _d, labelControlProps = __objRest(_d, ["data-testid"]);
-  const baseProps = omit16(props, Object.keys(labelControlProps));
-  return /* @__PURE__ */ React87.createElement(LabelControl, __spreadValues({
+  const baseProps = omit17(props, Object.keys(labelControlProps));
+  return /* @__PURE__ */ React89.createElement(LabelControl, __spreadValues({
     id: `${id.current}-label`,
     htmlFor: id.current,
     messageId: errorMessageId,
     length: value !== void 0 ? toString2(value).length : void 0
-  }, labelControlProps), /* @__PURE__ */ React87.createElement(TextareaBase, __spreadProps(__spreadValues(__spreadValues({
+  }, labelControlProps), /* @__PURE__ */ React89.createElement(TextareaBase, __spreadProps(__spreadValues(__spreadValues({
     ref
   }, baseProps), errorProps), {
     id: id.current,
@@ -8486,47 +8665,47 @@ var Textarea = React87.forwardRef((props, ref) => {
     valid: props.valid
   })));
 });
-var TextAreaSkeleton = () => /* @__PURE__ */ React87.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React87.createElement(TextareaBase.Skeleton, null));
+var TextAreaSkeleton = () => /* @__PURE__ */ React89.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React89.createElement(TextareaBase.Skeleton, null));
 Textarea.Skeleton = TextAreaSkeleton;
 
 // src/components/Timeline/Timeline.tsx
-import React89 from "react";
+import React91 from "react";
 
 // src/common/Timeline/Timeline.tsx
-import React88 from "react";
+import React90 from "react";
 var Timeline = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React88.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React90.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("grid grid-cols-[16px_1fr] gap-x-4"), className)
   }));
 };
-var Content = (_a) => {
+var Content2 = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React88.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React90.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("pb-6"), className)
   }));
 };
 var Separator2 = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React88.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React90.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("flex items-center justify-center h-5 w-5"), className)
   }));
 };
 var LineContainer = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React88.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React90.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("flex justify-center py-1"), className)
   }));
 };
 var Line = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React88.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React90.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("w-1 bg-grey-5 h-full justify-self-center"), className)
   }));
 };
 var Dot = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React88.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React90.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("bg-grey-30 h-[6px] w-[6px] rounded"), className)
   }));
 };
@@ -8534,68 +8713,68 @@ Separator2.Dot = Dot;
 LineContainer.Line = Line;
 Timeline.Separator = Separator2;
 Timeline.LineContainer = LineContainer;
-Timeline.Content = Content;
+Timeline.Content = Content2;
 
 // src/components/Timeline/Timeline.tsx
 var import_error4 = __toESM(require_error());
 var import_time = __toESM(require_time());
 var import_warningSign4 = __toESM(require_warningSign());
 var TimelineItem = () => null;
-var Timeline2 = ({ children }) => /* @__PURE__ */ React89.createElement("div", null, React89.Children.map(children, (item) => {
+var Timeline2 = ({ children }) => /* @__PURE__ */ React91.createElement("div", null, React91.Children.map(children, (item) => {
   if (!isComponentType(item, TimelineItem)) {
     throw new Error("<Timeline> can only have <Timeline.Item> components as children");
   } else {
     const { props, key } = item;
-    return /* @__PURE__ */ React89.createElement(Timeline, {
+    return /* @__PURE__ */ React91.createElement(Timeline, {
       key: key != null ? key : props.title
-    }, /* @__PURE__ */ React89.createElement(Timeline.Separator, null, props.variant === "error" ? /* @__PURE__ */ React89.createElement(Icon, {
+    }, /* @__PURE__ */ React91.createElement(Timeline.Separator, null, props.variant === "error" ? /* @__PURE__ */ React91.createElement(Icon, {
       icon: import_error4.default,
       color: "error-30"
-    }) : props.variant === "warning" ? /* @__PURE__ */ React89.createElement(Icon, {
+    }) : props.variant === "warning" ? /* @__PURE__ */ React91.createElement(Icon, {
       icon: import_warningSign4.default,
       color: "warning-30"
-    }) : props.variant === "info" ? /* @__PURE__ */ React89.createElement(Icon, {
+    }) : props.variant === "info" ? /* @__PURE__ */ React91.createElement(Icon, {
       icon: import_time.default,
       color: "info-30"
-    }) : /* @__PURE__ */ React89.createElement(Timeline.Separator.Dot, null)), /* @__PURE__ */ React89.createElement(Typography2.Caption, {
+    }) : /* @__PURE__ */ React91.createElement(Timeline.Separator.Dot, null)), /* @__PURE__ */ React91.createElement(Typography2.Caption, {
       color: "grey-50"
-    }, props.title), /* @__PURE__ */ React89.createElement(Timeline.LineContainer, null, /* @__PURE__ */ React89.createElement(Timeline.LineContainer.Line, null)), /* @__PURE__ */ React89.createElement(Timeline.Content, null, /* @__PURE__ */ React89.createElement(Typography2, null, props.children)));
+    }, props.title), /* @__PURE__ */ React91.createElement(Timeline.LineContainer, null, /* @__PURE__ */ React91.createElement(Timeline.LineContainer.Line, null)), /* @__PURE__ */ React91.createElement(Timeline.Content, null, /* @__PURE__ */ React91.createElement(Typography2.Small, null, props.children)));
   }
 }));
-var TimelineItemSkeleton = () => /* @__PURE__ */ React89.createElement(Timeline, null, /* @__PURE__ */ React89.createElement(Timeline.Separator, null, /* @__PURE__ */ React89.createElement(Skeleton, {
+var TimelineItemSkeleton = () => /* @__PURE__ */ React91.createElement(Timeline, null, /* @__PURE__ */ React91.createElement(Timeline.Separator, null, /* @__PURE__ */ React91.createElement(Skeleton, {
   width: 6,
   height: 6,
   rounded: true
-})), /* @__PURE__ */ React89.createElement(Skeleton, {
+})), /* @__PURE__ */ React91.createElement(Skeleton, {
   height: 12,
   width: 120
-}), /* @__PURE__ */ React89.createElement(Timeline.LineContainer, null, /* @__PURE__ */ React89.createElement(Skeleton, {
+}), /* @__PURE__ */ React91.createElement(Timeline.LineContainer, null, /* @__PURE__ */ React91.createElement(Skeleton, {
   width: 2,
   height: "100%"
-})), /* @__PURE__ */ React89.createElement(Timeline.Content, null, /* @__PURE__ */ React89.createElement(Box, {
+})), /* @__PURE__ */ React91.createElement(Timeline.Content, null, /* @__PURE__ */ React91.createElement(Box, {
   display: "flex",
   flexDirection: "column",
   gap: "3"
-}, /* @__PURE__ */ React89.createElement(Skeleton, {
+}, /* @__PURE__ */ React91.createElement(Skeleton, {
   height: 32,
   width: "100%"
-}), /* @__PURE__ */ React89.createElement(Skeleton, {
+}), /* @__PURE__ */ React91.createElement(Skeleton, {
   height: 32,
   width: "73%"
-}), /* @__PURE__ */ React89.createElement(Skeleton, {
+}), /* @__PURE__ */ React91.createElement(Skeleton, {
   height: 32,
   width: "80%"
 }))));
-var TimelineSkeleton = ({ items = 3 }) => /* @__PURE__ */ React89.createElement("div", null, Array.from({ length: items }).map((_, key) => /* @__PURE__ */ React89.createElement(TimelineItemSkeleton, {
+var TimelineSkeleton = ({ items = 3 }) => /* @__PURE__ */ React91.createElement("div", null, Array.from({ length: items }).map((_, key) => /* @__PURE__ */ React91.createElement(TimelineItemSkeleton, {
   key
 })));
 Timeline2.Item = TimelineItem;
 Timeline2.Skeleton = TimelineSkeleton;
 
 // src/utils/table/useTableSelect.ts
-import React90 from "react";
+import React92 from "react";
 var useTableSelect = (data, { key }) => {
-  const [selected, setSelected] = React90.useState([]);
+  const [selected, setSelected] = React92.useState([]);
   const allSelected = selected.length === data.length;
   const isSelected = (dot) => selected.includes(dot[key]);
   const selectAll = () => setSelected(data.map((dot) => dot[key]));
@@ -8783,7 +8962,7 @@ export {
   Box,
   Breadcrumbs,
   Button,
-  Card,
+  Card2 as Card,
   Carousel,
   CharCounter,
   Checkbox2 as Checkbox,