@aivenio/aquarium 1.8.0 → 1.8.1

package/dist/system.mjs

@@ -1692,20 +1692,20 @@ var classNames = (...args) => {
 // src/components/Icon/Icon.tsx
 var Icon = React.forwardRef((_a, ref) => {
   var _b = _a, { color, className } = _b, rest = __objRest(_b, ["color", "className"]);
-  const classes = classNames(className, color && `text-${color}`);
+  const classes2 = classNames(className, color && `text-${color}`);
   return /* @__PURE__ */ React.createElement(IconifyIconComponent, __spreadValues({
     ref: ref != null ? ref : void 0,
-    className: classes !== "" ? classes : void 0
+    className: classes2 !== "" ? classes2 : void 0
   }, rest));
 });
 var InlineIcon = React.forwardRef((_a, ref) => {
   var _b = _a, { color, className } = _b, rest = __objRest(_b, ["color", "className"]);
-  const classes = classNames(color && `text-${color}`);
+  const classes2 = classNames(color && `text-${color}`);
   return /* @__PURE__ */ React.createElement("span", {
     className: classNames(tw("children:inline-block inline-flex justify-center items-center"), className)
   }, /* @__PURE__ */ React.createElement(IconifyInlineIconComponent, __spreadValues({
     ref: ref != null ? ref : void 0,
-    className: classes !== "" ? classes : void 0
+    className: classes2 !== "" ? classes2 : void 0
   }, rest)));
 });
 
@@ -3757,7 +3757,8 @@ var ActiveCrumb = asCrumb("span", "ActiveCrumb", { isActive: true });
 Breadcrumbs.Crumb = Crumb;
 
 // src/components/Card/Card.tsx
-import React25 from "react";
+import React25, { useRef as useRef3 } from "react";
+import { useButton as useButton2 } from "@react-aria/button";
 import omit5 from "lodash/omit";
 
 // src/components/Chip/Chip.tsx
@@ -3992,32 +3993,25 @@ 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);
-};
+import isNumber3 from "lodash/isNumber";
+var Card = React23.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { disabled, fullWidth, clickable, className, children } = _b, rest = __objRest(_b, ["disabled", "fullWidth", "clickable", "className", "children"]);
+    return /* @__PURE__ */ React23.createElement("div", __spreadProps(__spreadValues({
+      ref
+    }, 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), {
@@ -4036,16 +4030,15 @@ var ImageContainer = (_a) => {
     )
   }));
 };
-var Image = ({
-  image,
-  imageAlt,
-  fullSize
-}) => /* @__PURE__ */ React23.createElement("img", {
+var classes = "w-full bg-cover object-cover";
+var Image = ({ image, imageAlt, fullSize = false, imageHeight }) => /* @__PURE__ */ React23.createElement("img", {
   src: image,
   alt: imageAlt,
-  className: tw("w-full bg-cover object-cover h-[174px]", {
-    "h-[225px]": Boolean(fullSize)
-  })
+  className: tw(classes, {
+    "h-[174px]": !imageHeight && !fullSize,
+    "h-[225px]": !imageHeight && fullSize
+  }),
+  style: { height: isNumber3(imageHeight) ? `${imageHeight}px` : imageHeight }
 });
 var Content = (_a) => {
   var _b = _a, { className, dense } = _b, rest = __objRest(_b, ["className", "dense"]);
@@ -4066,7 +4059,8 @@ Card.Image = Image;
 Card.ColorHiglight = ColorHighlight;
 
 // src/components/Card/Compact.tsx
-import React24 from "react";
+import React24, { useRef as useRef2 } from "react";
+import { useButton } from "@react-aria/button";
 import { omit as omit4 } from "lodash";
 var CompactCard = ({
   title,
@@ -4079,38 +4073,42 @@ var CompactCard = ({
   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)));
+}) => {
+  const ref = useRef2(null);
+  const { buttonProps } = useButton({ elementType: "div", onPress: onClick, isDisabled: disabled }, ref);
+  return /* @__PURE__ */ React24.createElement(Card, __spreadProps(__spreadValues({
+    ref,
+    clickable: Boolean(onClick),
+    fullWidth
+  }, onClick ? buttonProps : {}), {
+    disabled
+  }), 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,
@@ -4154,6 +4152,7 @@ var Card2 = ({
   icons = [],
   image,
   imageAlt,
+  imageHeight,
   color,
   action,
   link,
@@ -4161,41 +4160,50 @@ var Card2 = ({
   disabled,
   fullWidth,
   children
-}) => /* @__PURE__ */ React25.createElement(Card, {
-  onClick: disabled ? void 0 : onClick,
-  disabled,
-  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__ */ React25.createElement(Chip2, {
-  key: chip,
-  text: chip
-}))), icons.length > 0 && /* @__PURE__ */ React25.createElement(AvatarStack, {
-  images: icons
-}), image !== void 0 && /* @__PURE__ */ React25.createElement(CardImage, {
-  image,
-  imageAlt,
-  fullSize: chips.length === 0
-}), /* @__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
-}, omit5(action, "text")), action.text), link && /* @__PURE__ */ React25.createElement(ExternalLinkButton, __spreadValues({
-  dense: true,
-  kind: "ghost"
-}, omit5(link, "text")), link.text)));
+}) => {
+  const ref = useRef3(null);
+  const { buttonProps } = useButton2({ elementType: "div", onPress: onClick, isDisabled: disabled }, ref);
+  return /* @__PURE__ */ React25.createElement(Card, __spreadProps(__spreadValues({
+    ref,
+    clickable: Boolean(onClick),
+    fullWidth
+  }, onClick ? buttonProps : {}), {
+    disabled
+  }), color && /* @__PURE__ */ React25.createElement(Card.ColorHiglight, {
+    color
+  }), chips.length > 0 && /* @__PURE__ */ React25.createElement(ChipContainer, {
+    dense: true
+  }, chips.map((chip) => /* @__PURE__ */ React25.createElement(Chip2, {
+    key: chip,
+    text: chip
+  }))), icons.length > 0 && /* @__PURE__ */ React25.createElement(AvatarStack, {
+    images: icons
+  }), image !== void 0 && (imageHeight ? /* @__PURE__ */ React25.createElement(CardImage, {
+    image,
+    imageAlt,
+    imageHeight
+  }) : /* @__PURE__ */ React25.createElement(CardImage, {
+    image,
+    imageAlt,
+    fullSize: chips.length === 0
+  })), /* @__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
+  }, omit5(action, "text")), action.text), link && /* @__PURE__ */ React25.createElement(ExternalLinkButton, __spreadValues({
+    dense: true,
+    kind: "ghost"
+  }, omit5(link, "text")), link.text)));
+};
 var CardSkeleton = ({
   chips = true,
   icons = false,
   image = !icons,
   actions = true,
-  fullWidth = false
+  fullWidth = false,
+  imageHeight
 }) => /* @__PURE__ */ React25.createElement(Card, {
   fullWidth
 }, chips && /* @__PURE__ */ React25.createElement(ChipContainer, {
@@ -4204,10 +4212,13 @@ var CardSkeleton = ({
   key: idx
 }))), icons && /* @__PURE__ */ React25.createElement(AvatarStack, {
   images: [null]
-}), image && /* @__PURE__ */ React25.createElement(CardImage, {
+}), image && (imageHeight ? /* @__PURE__ */ React25.createElement(CardImage, {
+  image: null,
+  imageHeight
+}) : /* @__PURE__ */ React25.createElement(CardImage, {
   image: null,
   fullSize: !chips
-}), /* @__PURE__ */ React25.createElement(Card.Content, null, /* @__PURE__ */ React25.createElement(Skeleton, {
+})), /* @__PURE__ */ React25.createElement(Card.Content, null, /* @__PURE__ */ React25.createElement(Skeleton, {
   width: 145,
   height: 25
 }), /* @__PURE__ */ React25.createElement(Skeleton, {
@@ -4222,23 +4233,31 @@ var CardSkeleton = ({
 })));
 Card2.Skeleton = CardSkeleton;
 Card2.Compact = CompactCard;
-var CardImage = ({ image, imageAlt, fullSize }) => /* @__PURE__ */ React25.createElement(Card.ImageContainer, {
+var CardImage = ({ image, imageAlt, imageHeight, fullSize = false }) => /* @__PURE__ */ React25.createElement(Card.ImageContainer, {
   fullSize
-}, image ? /* @__PURE__ */ React25.createElement(Card.Image, {
+}, image ? imageHeight ? /* @__PURE__ */ React25.createElement(Card.Image, {
+  image,
+  imageAlt,
+  imageHeight
+}) : /* @__PURE__ */ React25.createElement(Card.Image, {
   image,
   imageAlt,
   fullSize
 }) : /* @__PURE__ */ React25.createElement(CardImage.Skeleton, {
-  fullSize
+  fullSize,
+  imageHeight
 }));
-var CardImageSkeleton = ({ fullSize }) => /* @__PURE__ */ React25.createElement(Skeleton, {
+var CardImageSkeleton = ({ imageHeight, fullSize }) => imageHeight ? /* @__PURE__ */ React25.createElement(Skeleton, {
+  height: imageHeight,
+  width: "100%"
+}) : /* @__PURE__ */ React25.createElement(Skeleton, {
   height: fullSize ? 225 : 174,
   width: "100%"
 });
 CardImage.Skeleton = CardImageSkeleton;
 
 // src/components/Carousel/Carousel.tsx
-import React26, { useEffect as useEffect3, useLayoutEffect, useRef as useRef2, useState as useState2 } from "react";
+import React26, { useEffect as useEffect3, useLayoutEffect, useRef as useRef4, useState as useState2 } from "react";
 var import_chevronLeft = __toESM(require_chevronLeft());
 var import_chevronRight = __toESM(require_chevronRight());
 var Carousel = ({
@@ -4247,8 +4266,8 @@ var Carousel = ({
   onPageChange,
   children
 }) => {
-  const containerRef = useRef2(null);
-  const scrollbarContainerRef = useRef2(null);
+  const containerRef = useRef4(null);
+  const scrollbarContainerRef = useRef4(null);
   const items = React26.Children.toArray(children);
   const [width, setWidth] = useState2(0);
   const [isUpdating, setIsUpdating] = useState2(false);
@@ -4561,7 +4580,7 @@ var FormControl = ({ className, inline, children }) => {
 // src/utils/form/HelperText/HelperText.tsx
 import React34 from "react";
 import classNames3 from "classnames";
-import isNumber3 from "lodash/isNumber";
+import isNumber4 from "lodash/isNumber";
 
 // src/utils/form/CharCounter/CharCounter.tsx
 import React33 from "react";
@@ -4585,7 +4604,7 @@ var HelperText = ({
   reserveSpaceForError = true
 }) => {
   const hasError = error2 && helperText;
-  const hasMaxLength = isNumber3(maxLength) && maxLength > 0;
+  const hasMaxLength = isNumber4(maxLength) && maxLength > 0;
   const showMessage = hasError || hasMaxLength;
   if (!showMessage) {
     return reserveSpaceForError ? /* @__PURE__ */ React34.createElement("p", {
@@ -4609,7 +4628,7 @@ var HelperText = ({
     colStart: "2",
     colEnd: "3",
     display: "flex"
-  }, isNumber3(length) && hasMaxLength && /* @__PURE__ */ React34.createElement(CharCounter, {
+  }, isNumber4(length) && hasMaxLength && /* @__PURE__ */ React34.createElement(CharCounter, {
     length,
     maxLength,
     valid: !error2
@@ -4837,7 +4856,7 @@ var ChoiceChip = (_a) => {
 };
 
 // src/components/Combobox/Combobox.tsx
-import React40, { useEffect as useEffect4, useRef as useRef3, useState as useState5 } from "react";
+import React40, { useEffect as useEffect4, useRef as useRef5, useState as useState5 } from "react";
 import { useOverlayPosition as useOverlayPosition2 } from "@react-aria/overlays";
 import { useCombobox } from "downshift";
 import omit6 from "lodash/omit";
@@ -4966,8 +4985,8 @@ var ComboboxBase = (_a) => {
     "readOnly"
   ]);
   var _a2;
-  const targetRef = useRef3(null);
-  const overlayRef = useRef3(null);
+  const targetRef = useRef5(null);
+  const overlayRef = useRef5(null);
   const [inputItems, setInputItems] = useState5(options);
   const [hasFocus, setFocus] = useState5(false);
   const updateInputItems = (query) => {
@@ -5078,7 +5097,7 @@ var Combobox = (_a) => {
     "noResults"
   ]);
   var _a2;
-  const id = useRef3((_a2 = props.id) != null ? _a2 : `combobox-${uniqueId2()}`);
+  const id = useRef5((_a2 = props.id) != null ? _a2 : `combobox-${uniqueId2()}`);
   const errorMessageId = uniqueId2();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const labelControlProps = getLabelControlProps(props);
@@ -5374,7 +5393,7 @@ var renameProperty = (oldProp, newProp, _a) => {
 // src/utils/table/types.ts
 var toSortDirection = (direction) => direction === "ascending" ? "asc" : direction === "descending" ? "desc" : false;
 var cellProps = (column) => ({
-  key: column.headerName,
+  key: column.key || column.headerName,
   align: column.type === "number" || column.type === "action" ? "right" : "left"
 });
 
@@ -5504,10 +5523,12 @@ var DataTable = (_a) => {
     (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__ */ React50.createElement(Table2.Cell, __spreadProps(__spreadValues({}, cellProps(column)), {
-      style: { width: column.width }
-    }), column.headerName)
+      style: { width: column.width },
+      "aria-label": column.headerInvisible ? column.headerName : void 0
+    }, cellProps(column)), !column.headerInvisible && column.headerName) : /* @__PURE__ */ React50.createElement(Table2.Cell, __spreadProps(__spreadValues({}, cellProps(column)), {
+      style: { width: column.width },
+      "aria-label": column.headerInvisible ? column.headerName : void 0
+    }), !column.headerInvisible && column.headerName)
   )), /* @__PURE__ */ React50.createElement(Table2.Body, null, /* @__PURE__ */ React50.createElement(List, {
     items: sortedRows,
     renderItem: (row, index) => /* @__PURE__ */ React50.createElement(Table2.Row, {
@@ -5735,7 +5756,7 @@ var Divider2 = (_a) => {
 import React55 from "react";
 
 // src/components/Popover/Popover.tsx
-import React54, { useRef as useRef4 } from "react";
+import React54, { useRef as useRef6 } 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";
@@ -5764,8 +5785,8 @@ var Popover2 = (props) => {
     containFocus = false,
     targetRef
   } = props;
-  const triggerRef = useRef4(null);
-  const overlayRef = useRef4(null);
+  const triggerRef = useRef6(null);
+  const overlayRef = useRef6(null);
   const state = useOverlayTriggerState3(props);
   const {
     overlayProps: popoverProps,
@@ -5843,7 +5864,7 @@ Popover2.Button = PopoverButton;
 var PopoverTriggerWrapper = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
   var _a2;
-  const ref = useRef4(null);
+  const ref = useRef6(null);
   const trigger = React54.Children.only(children);
   const { pressProps } = usePress(__spreadProps(__spreadValues({}, rest), { ref }));
   return React54.cloneElement(trigger, __spreadProps(__spreadValues({
@@ -5978,7 +5999,7 @@ import { useMenuTriggerState } from "@react-stately/menu";
 import { useTreeState } from "@react-stately/tree";
 
 // src/components/Input/Input.tsx
-import React57, { forwardRef, useImperativeHandle, useRef as useRef5, useState as useState6 } from "react";
+import React57, { forwardRef, useImperativeHandle, useRef as useRef7, useState as useState6 } from "react";
 import omit8 from "lodash/omit";
 import toString from "lodash/toString";
 import uniqueId3 from "lodash/uniqueId";
@@ -6087,7 +6108,7 @@ 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 : "");
-  const id = useRef5((_c = props.id) != null ? _c : `input-${uniqueId3()}`);
+  const id = useRef7((_c = props.id) != null ? _c : `input-${uniqueId3()}`);
   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"]);
@@ -6660,8 +6681,8 @@ import castArray from "lodash/castArray";
 import omit10 from "lodash/omit";
 
 // src/components/Tabs/Tabs.tsx
-import React68, { useEffect as useEffect5, useLayoutEffect as useLayoutEffect2, useRef as useRef6, useState as useState7 } from "react";
-import isNumber4 from "lodash/isNumber";
+import React68, { useEffect as useEffect5, useLayoutEffect as useLayoutEffect2, useRef as useRef8, useState as useState7 } from "react";
+import isNumber5 from "lodash/isNumber";
 import kebabCase from "lodash/kebabCase";
 var import_chevronLeft2 = __toESM(require_chevronLeft());
 var import_chevronRight2 = __toESM(require_chevronRight());
@@ -6754,7 +6775,7 @@ var asTabItem = (Component, displayName, { defaultUnderlineHidden } = {}) => {
         className: tw("inline-flex items-center gap-3")
       }, /* @__PURE__ */ React68.createElement("span", {
         className: tw("whitespace-nowrap")
-      }, title), isNumber4(badge) && /* @__PURE__ */ React68.createElement(Typography2, {
+      }, title), isNumber5(badge) && /* @__PURE__ */ React68.createElement(Typography2, {
         htmlTag: "span",
         variant: "small",
         color: selected ? "primary-80" : "grey-5",
@@ -6784,9 +6805,9 @@ var createTabsComponent = (TabComponent, TabItemComponent, displayName, renderCh
     const [selected, setSelected] = useState7((_b = (_a = value != null ? value : defaultValue) != null ? _a : firstTabValue) != null ? _b : 0);
     const [leftCaret, showLeftCaret] = useState7(false);
     const [rightCaret, showRightCaret] = useState7(false);
-    const parentRef = useRef6(null);
-    const containerRef = useRef6(null);
-    const tabsRef = useRef6(null);
+    const parentRef = useRef8(null);
+    const containerRef = useRef8(null);
+    const tabsRef = useRef8(null);
     const revealSelectedTab = ({ smooth }) => {
       var _a2, _b2;
       const container = containerRef.current;
@@ -7018,7 +7039,7 @@ var ModalTabs = createTabsComponent(
 );
 
 // src/components/MultiInput/MultiInput.tsx
-import React71, { useEffect as useEffect6, useRef as useRef7, useState as useState8 } from "react";
+import React71, { useEffect as useEffect6, useRef as useRef9, useState as useState8 } from "react";
 import castArray2 from "lodash/castArray";
 import identity from "lodash/identity";
 import omit11 from "lodash/omit";
@@ -7106,7 +7127,7 @@ var MultiInputBase = (_a) => {
     "valid"
   ]);
   var _a2;
-  const inputRef = useRef7(null);
+  const inputRef = useRef9(null);
   const [items, setItems] = useState8((_a2 = value != null ? value : defaultValue) != null ? _a2 : []);
   const [hasFocus, setFocus] = useState8(false);
   const keyCodes = [delimiter !== "enter" ? " " : null, delimiter !== "space" ? "Enter" : null].filter(identity);
@@ -7238,7 +7259,7 @@ var MultiInput = (props) => {
     var _a2;
     setValue((_a2 = props.value) != null ? _a2 : []);
   }, [JSON.stringify(props.value)]);
-  const id = useRef7((_e = (_d = props.id) != null ? _d : props.name) != null ? _e : `multiinput-${uniqueId4()}`);
+  const id = useRef9((_e = (_d = props.id) != null ? _d : props.name) != null ? _e : `multiinput-${uniqueId4()}`);
   const errorMessageId = uniqueId4();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const labelControlProps = getLabelControlProps(props);
@@ -7267,9 +7288,10 @@ MultiInput.Skeleton = MultiInputSkeleton;
 MultiInput.Skeleton.displayName = "MultiInput.Skeleton";
 
 // src/components/MultiSelect/MultiSelect.tsx
-import React72, { useRef as useRef8, useState as useState9 } from "react";
+import React72, { useRef as useRef10, useState as useState9 } from "react";
 import { useOverlayPosition as useOverlayPosition5 } from "@react-aria/overlays";
 import { useCombobox as useCombobox2, useMultipleSelection } from "downshift";
+import isEqual from "lodash/isEqual";
 import isNil from "lodash/isNil";
 import omit12 from "lodash/omit";
 import omitBy from "lodash/omitBy";
@@ -7322,8 +7344,8 @@ var MultiSelectBase = (_a) => {
     "children"
   ]);
   var _a2;
-  const targetRef = useRef8(null);
-  const overlayRef = useRef8(null);
+  const targetRef = useRef10(null);
+  const overlayRef = useRef10(null);
   const [inputValue, setInputValue] = useState9("");
   const [hasFocus, setFocus] = useState9(false);
   const { selectedItems, addSelectedItem, removeSelectedItem, getDropdownProps, getSelectedItemProps } = useMultipleSelection(
@@ -7357,14 +7379,23 @@ var MultiSelectBase = (_a) => {
     selectedItem: null,
     items: filteredOptions,
     stateReducer: (_, actionChanges) => {
+      var _a3, _b2;
       const { changes, type } = actionChanges;
       switch (type) {
         case useCombobox2.stateChangeTypes.InputKeyDownEnter:
         case useCombobox2.stateChangeTypes.ItemClick: {
+          const selectedItem = (_a3 = changes.selectedItem) != null ? _a3 : changes.inputValue ? createOption == null ? void 0 : createOption(changes.inputValue) : null;
           return __spreadProps(__spreadValues({}, changes), {
+            selectedItem,
             isOpen: !closeOnSelect
           });
         }
+        case useCombobox2.stateChangeTypes.InputBlur: {
+          const selectedItem = (_b2 = changes.selectedItem) != null ? _b2 : changes.inputValue ? createOption == null ? void 0 : createOption(changes.inputValue) : null;
+          return __spreadProps(__spreadValues({}, changes), {
+            selectedItem
+          });
+        }
       }
       return changes;
     },
@@ -7377,8 +7408,8 @@ var MultiSelectBase = (_a) => {
         case useCombobox2.stateChangeTypes.InputKeyDownEnter:
         case useCombobox2.stateChangeTypes.ItemClick:
         case useCombobox2.stateChangeTypes.InputBlur: {
-          if (selectedItem && !isOptionDisabled(selectedItem, options.indexOf(selectedItem))) {
-            setInputValue("");
+          setInputValue("");
+          if (selectedItem && !isOptionDisabled(selectedItem, options.indexOf(selectedItem)) && !selectedItems.some((val) => isEqual(val, selectedItem))) {
             addSelectedItem(selectedItem);
           }
           break;
@@ -7473,7 +7504,7 @@ var MultiSelect = (_a) => {
     "noResults"
   ]);
   var _a2;
-  const id = useRef8((_a2 = props.id) != null ? _a2 : `multiselect-${uniqueId5()}`);
+  const id = useRef10((_a2 = props.id) != null ? _a2 : `multiselect-${uniqueId5()}`);
   const errorMessageId = uniqueId5();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const labelControlProps = getLabelControlProps(props);
@@ -7495,7 +7526,7 @@ MultiSelect.Skeleton = MultiSelectSkeleton;
 MultiSelect.Skeleton.displayName = "MultiSelect.Skeleton";
 
 // src/components/NativeSelect/NativeSelect.tsx
-import React73, { useRef as useRef9 } from "react";
+import React73, { useRef as useRef11 } from "react";
 import omit13 from "lodash/omit";
 import uniqueId6 from "lodash/uniqueId";
 var import_caretDown = __toESM(require_caretDown());
@@ -7557,7 +7588,7 @@ var NativeSelect = React73.forwardRef(
   (_a, ref) => {
     var _b = _a, { readOnly } = _b, props = __objRest(_b, ["readOnly"]);
     var _a2;
-    const id = useRef9((_a2 = props.id) != null ? _a2 : `nativeselect-${uniqueId6()}`);
+    const id = useRef11((_a2 = props.id) != null ? _a2 : `nativeselect-${uniqueId6()}`);
     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"]);
@@ -7647,7 +7678,7 @@ import React76 from "react";
 import clamp from "lodash/clamp";
 
 // src/components/Select/Select.tsx
-import React75, { useRef as useRef10, useState as useState10 } from "react";
+import React75, { useRef as useRef12, useState as useState10 } from "react";
 import { useOverlayPosition as useOverlayPosition6 } from "@react-aria/overlays";
 import { useSelect } from "downshift";
 import defaults from "lodash/defaults";
@@ -7739,8 +7770,8 @@ var _SelectBase = (props) => {
     "labelWrapper"
   ]);
   const [hasFocus, setFocus] = useState10(false);
-  const targetRef = useRef10(null);
-  const overlayRef = useRef10(null);
+  const targetRef = useRef12(null);
+  const overlayRef = useRef12(null);
   const items = hasOptionGroups(options) ? options.flatMap((g) => g.options) : options;
   const findItemByValue = (val) => {
     if (val === null) {
@@ -7847,7 +7878,7 @@ var Select2 = (_a) => {
     "options"
   ]);
   var _a2;
-  const id = useRef10((_a2 = props.id) != null ? _a2 : `select-${uniqueId7()}`);
+  const id = useRef12((_a2 = props.id) != null ? _a2 : `select-${uniqueId7()}`);
   const errorMessageId = uniqueId7();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const labelProps = getLabelControlProps(props);
@@ -8370,12 +8401,12 @@ var SegmentedControlGroup = (_a) => {
     "children",
     "className"
   ]);
-  const classes = tw("rounded flex", {
+  const classes2 = tw("rounded flex", {
     "border border-grey-20 text-grey-50": variant === "outlined",
     "bg-grey-0": variant === "raised"
   });
   return /* @__PURE__ */ React85.createElement("div", __spreadProps(__spreadValues({}, rest), {
-    className: classNames(classes, className)
+    className: classNames(classes2, className)
   }), React85.Children.map(
     children,
     (child) => React85.cloneElement(child, {
@@ -8685,7 +8716,7 @@ var TagLabel = (_a) => {
 };
 
 // src/components/Textarea/Textarea.tsx
-import React92, { useRef as useRef11, useState as useState12 } from "react";
+import React92, { useRef as useRef13, useState as useState12 } from "react";
 import omit17 from "lodash/omit";
 import toString2 from "lodash/toString";
 import uniqueId10 from "lodash/uniqueId";
@@ -8706,7 +8737,7 @@ TextareaBase.Skeleton = () => /* @__PURE__ */ React92.createElement(Skeleton, {
 var Textarea = React92.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 id = useRef13((_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"]);