@aivenio/aquarium 1.34.0 → 1.36.0

package/dist/system.mjs

@@ -3561,7 +3561,7 @@ var require_loading = __commonJS({
   "src/icons/loading.js"(exports) {
     "use strict";
     var data = {
-      "body": '<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-width="2" transform="translate(1 1)"><circle cx="18" cy="18" r="18" stroke-opacity=".5"/><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName="transform" dur="1s" from="0 18 18" repeatCount="indefinite" to="360 18 18" type="rotate"/></path></g>',
+      "body": '<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-width="3" transform="translate(1 1)"><circle cx="18" cy="18" r="18" stroke-opacity=".5"/><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName="transform" dur="1s" from="0 18 18" repeatCount="indefinite" to="360 18 18" type="rotate"/></path></g>',
       "left": 0,
       "top": 0,
       "width": 38,
@@ -7747,7 +7747,7 @@ var Container = React25.forwardRef(
       ref,
       className: classNames(
         tw("inline-flex items-center rounded-sm transition whitespace-nowrap", {
-          "typography-small py-2 px-3 gap-x-3": !dense,
+          "typography-small py-2 px-3 gap-x-3 leading-tight": !dense,
           "typography-caption py-1 px-2 gap-x-2": dense
         }),
         className
@@ -11036,31 +11036,11 @@ Dropdown.Menu = DropdownMenu3;
 Dropdown.Item = DropdownItem;
 
 // src/molecules/EmptyState/EmptyState.tsx
-import React72 from "react";
-import omit10 from "lodash/omit";
-
-// src/molecules/Flexbox/FlexboxItem.tsx
 import React71 from "react";
-var FlexboxItem = Tailwindify(
-  ({ htmlTag = "div", className, style, children, display, flex, grow, shrink, order, alignSelf }) => {
-    const hookStyle = useStyle({
-      display,
-      flex,
-      flexGrow: grow,
-      flexShrink: shrink,
-      order,
-      alignSelf
-    });
-    const HtmlElement = htmlTag;
-    return /* @__PURE__ */ React71.createElement(HtmlElement, {
-      style: __spreadValues(__spreadValues({}, hookStyle), style),
-      className
-    }, children);
-  }
-);
-
-// src/molecules/EmptyState/EmptyState.tsx
+import omit10 from "lodash/omit";
 var EmptyStateLayout = /* @__PURE__ */ ((EmptyStateLayout2) => {
+  EmptyStateLayout2["Vertical"] = "vertical";
+  EmptyStateLayout2["Horizontal"] = "horizontal";
   EmptyStateLayout2["CenterVertical"] = "center-vertical";
   EmptyStateLayout2["LeftVertical"] = "left-vertical";
   EmptyStateLayout2["CenterHorizontal"] = "center-horizontal";
@@ -11076,6 +11056,7 @@ var layoutStyle = (layout) => {
         alignItems: "flex-start"
       };
     case "left-horizontal" /* LeftHorizontal */:
+    case "horizontal" /* Horizontal */:
       return {
         layout: "row",
         justifyContent: "flex-start",
@@ -11088,6 +11069,7 @@ var layoutStyle = (layout) => {
         alignItems: "flex-start"
       };
     case "center-vertical" /* CenterVertical */:
+    case "vertical" /* Vertical */:
     default:
       return {
         layout: "column",
@@ -11096,6 +11078,7 @@ var layoutStyle = (layout) => {
       };
   }
 };
+var isVerticalLayout = (layout) => layout === "vertical" /* Vertical */ || layout === "center-vertical" /* CenterVertical */;
 var EmptyState = ({
   title,
   image,
@@ -11106,65 +11089,81 @@ var EmptyState = ({
   primaryAction,
   secondaryAction,
   footer,
-  layout = "center-vertical" /* CenterVertical */,
-  borderStyle = "dashed"
+  layout = "vertical" /* Vertical */,
+  borderStyle = "dashed",
+  fullHeight = isVerticalLayout(layout) ? true : false
 }) => {
   const template = layoutStyle(layout);
-  return /* @__PURE__ */ React72.createElement(Box, {
+  return /* @__PURE__ */ React71.createElement(Box, {
     className: classNames(
       "Aquarium-EmptyState",
-      tw("rounded", {
+      tw("rounded p-[56px]", {
         "border border-dashed": borderStyle === "dashed",
         "border border-solid": borderStyle === "solid",
-        "text-left": layout !== "center-vertical" /* CenterVertical */,
-        "text-center": layout === "center-vertical" /* CenterVertical */
+        "text-left": !isVerticalLayout(layout),
+        "text-center": isVerticalLayout(layout),
+        "h-full": fullHeight
       })
     ),
     backgroundColor: "transparent",
-    borderColor: "grey-10",
-    padding: "9"
-  }, /* @__PURE__ */ React72.createElement(Flexbox, {
-    direction: template.layout,
+    borderColor: "grey-10"
+  }, /* @__PURE__ */ React71.createElement(Box.Flex, {
+    style: { gap: "56px" },
+    flexDirection: template.layout,
     justifyContent: template.justifyContent,
     alignItems: template.layout === "row" ? "center" : template.alignItems,
-    colGap: "l5",
-    rowGap: "8"
-  }, image && /* @__PURE__ */ React72.createElement(FlexboxItem, null, /* @__PURE__ */ React72.createElement("img", {
+    height: fullHeight ? "full" : void 0
+  }, image && /* @__PURE__ */ React71.createElement("img", {
     src: image,
     alt: imageAlt,
     style: { width: imageWidth ? `${imageWidth}px` : void 0, height: "auto" }
-  })), /* @__PURE__ */ React72.createElement(Flexbox, {
-    style: { maxWidth: "610px" },
-    direction: "column",
+  }), /* @__PURE__ */ React71.createElement(Box.Flex, {
+    flexDirection: "column",
     justifyContent: template.justifyContent,
     alignItems: template.alignItems
-  }, /* @__PURE__ */ React72.createElement(Typography2, {
-    variant: "heading",
+  }, /* @__PURE__ */ React71.createElement(Typography2.Heading, {
     htmlTag: "h2"
-  }, title), (description || children) && /* @__PURE__ */ React72.createElement(Box, {
+  }, title), (description || children) && /* @__PURE__ */ React71.createElement(Box, {
     marginTop: "5"
-  }, /* @__PURE__ */ React72.createElement(Typography2, {
-    variant: "default",
+  }, /* @__PURE__ */ React71.createElement(Typography2.Default, {
     color: "grey-60"
-  }, children || description)), (secondaryAction || primaryAction) && /* @__PURE__ */ React72.createElement(Flexbox, {
+  }, children || description)), (secondaryAction || primaryAction) && /* @__PURE__ */ React71.createElement(Box.Flex, {
     marginTop: "7",
     gap: "4",
     justifyContent: "center",
     alignItems: "center",
     wrap: "wrap"
-  }, primaryAction && /* @__PURE__ */ React72.createElement(React72.Fragment, null, !isLink(primaryAction) && /* @__PURE__ */ React72.createElement(Button.Primary, __spreadValues({}, omit10(primaryAction, "text")), primaryAction.text), isLink(primaryAction) && /* @__PURE__ */ React72.createElement(Button.ExternalLink, __spreadValues({
+  }, primaryAction && /* @__PURE__ */ React71.createElement(React71.Fragment, null, !isLink(primaryAction) && /* @__PURE__ */ React71.createElement(Button.Primary, __spreadValues({}, omit10(primaryAction, "text")), primaryAction.text), isLink(primaryAction) && /* @__PURE__ */ React71.createElement(Button.ExternalLink, __spreadValues({
     kind: "primary"
-  }, omit10(primaryAction, "text")), primaryAction.text)), secondaryAction && /* @__PURE__ */ React72.createElement(React72.Fragment, null, !isLink(secondaryAction) && /* @__PURE__ */ React72.createElement(Button.Secondary, __spreadValues({}, omit10(secondaryAction, "text")), secondaryAction.text), isLink(secondaryAction) && /* @__PURE__ */ React72.createElement(Button.ExternalLink, __spreadValues({
+  }, omit10(primaryAction, "text")), primaryAction.text)), secondaryAction && /* @__PURE__ */ React71.createElement(React71.Fragment, null, !isLink(secondaryAction) && /* @__PURE__ */ React71.createElement(Button.Secondary, __spreadValues({}, omit10(secondaryAction, "text")), secondaryAction.text), isLink(secondaryAction) && /* @__PURE__ */ React71.createElement(Button.ExternalLink, __spreadValues({
     kind: "secondary"
-  }, omit10(secondaryAction, "text")), secondaryAction.text))), footer && /* @__PURE__ */ React72.createElement(Box, {
-    marginTop: "7"
-  }, /* @__PURE__ */ React72.createElement(Typography2, {
-    htmlTag: "div",
-    variant: "small",
+  }, omit10(secondaryAction, "text")), secondaryAction.text))), footer && /* @__PURE__ */ React71.createElement(Box, {
+    marginTop: "5"
+  }, /* @__PURE__ */ React71.createElement(Typography2.Small, {
     color: "grey-60"
   }, footer)))));
 };
 
+// src/molecules/Flexbox/FlexboxItem.tsx
+import React72 from "react";
+var FlexboxItem = Tailwindify(
+  ({ htmlTag = "div", className, style, children, display, flex, grow, shrink, order, alignSelf }) => {
+    const hookStyle = useStyle({
+      display,
+      flex,
+      flexGrow: grow,
+      flexShrink: shrink,
+      order,
+      alignSelf
+    });
+    const HtmlElement = htmlTag;
+    return /* @__PURE__ */ React72.createElement(HtmlElement, {
+      style: __spreadValues(__spreadValues({}, hookStyle), style),
+      className
+    }, children);
+  }
+);
+
 // src/molecules/Grid/GridItem.tsx
 import React73 from "react";
 var GridItem = Tailwindify(
@@ -12779,73 +12778,200 @@ RadioButtonGroup.Skeleton = RadioButtonGroupSkeleton;
 RadioButtonGroup.Skeleton.displayName = "RadioButtonGroup.Skeleton";
 
 // src/molecules/Section/Section.tsx
-import React95 from "react";
+import React97 from "react";
+import { useId as useId3 } from "@react-aria/utils";
+import { animated as animated3, useSpring as useSpring2 } from "@react-spring/web";
 import castArray4 from "lodash/castArray";
+import isUndefined8 from "lodash/isUndefined";
+import noop from "lodash/noop";
 import omit17 from "lodash/omit";
 
-// src/atoms/Section/Section.tsx
+// src/molecules/TagLabel/TagLabel.tsx
 import React94 from "react";
+var getVariantClassNames = (variant = "primary") => {
+  switch (variant) {
+    case "danger":
+      return tw("bg-secondary-90");
+    case "success":
+      return tw("bg-success-90");
+    case "primary":
+    default:
+      return tw("bg-primary-90");
+  }
+};
+var TagLabel = (_a) => {
+  var _b = _a, { title, dense = false, variant } = _b, rest = __objRest(_b, ["title", "dense", "variant"]);
+  return /* @__PURE__ */ React94.createElement("span", __spreadProps(__spreadValues({}, rest), {
+    className: classNames(
+      "Aquarium-TagLabel",
+      getVariantClassNames(variant),
+      tw("rounded-full text-white", {
+        "py-2 px-4 typography-caption": !dense,
+        "py-2 px-3 typography-caption-small": dense
+      })
+    )
+  }), title);
+};
+
+// src/atoms/Section/Section.tsx
+import React95 from "react";
+var import_caretUp2 = __toESM(require_caretUp());
 var Section3 = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ React94.createElement(Box, __spreadValues({
+  return /* @__PURE__ */ React95.createElement(Box, __spreadValues({
     borderColor: "grey-5",
     borderWidth: "1px"
   }, rest), children);
 };
 Section3.Header = (_a) => {
-  var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React94.createElement("div", __spreadProps(__spreadValues({}, rest), {
-    className: classNames(tw("px-6 py-5 flex gap-5 justify-between items-center"), className)
+  var _b = _a, { children, className, collapsible } = _b, rest = __objRest(_b, ["children", "className", "collapsible"]);
+  return /* @__PURE__ */ React95.createElement("div", __spreadProps(__spreadValues({}, rest), {
+    className: classNames(
+      tw("px-6 py-5 flex gap-5 justify-between items-center", { "bg-grey-0": collapsible }),
+      className
+    )
   }), children);
 };
 Section3.TitleContainer = (_a) => {
-  var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React94.createElement("div", __spreadProps(__spreadValues({}, rest), {
-    className: classNames(tw("flex flex-col grow gap-2"), className)
+  var _b = _a, { children, className, collapsible } = _b, rest = __objRest(_b, ["children", "className", "collapsible"]);
+  return /* @__PURE__ */ React95.createElement("div", __spreadProps(__spreadValues({}, rest), {
+    className: classNames(
+      tw("grow grid grid-cols-[auto_1fr] gap-y-2 gap-x-3 items-center", { "cursor-pointer": collapsible }),
+      className
+    )
   }), children);
 };
+Section3.Toggle = (props) => /* @__PURE__ */ React95.createElement(Icon, __spreadProps(__spreadValues({}, props), {
+  icon: import_caretUp2.default,
+  height: 22,
+  width: 22
+}));
 Section3.Title = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ React94.createElement(Typography2.Subheading, __spreadProps(__spreadValues({}, rest), {
-    color: "black"
+  return /* @__PURE__ */ React95.createElement(Typography2.Large, __spreadProps(__spreadValues({}, rest), {
+    color: "black",
+    className: "flex gap-3 items-center"
   }), children);
 };
 Section3.Subtitle = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ React94.createElement(Typography2.SmallText, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React95.createElement(Typography2.Small, __spreadProps(__spreadValues({}, rest), {
     color: "grey-70"
   }), children);
 };
 Section3.Actions = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React94.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React95.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("flex gap-4 justify-end"), className)
   }), children);
 };
 Section3.Body = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React94.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React95.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("p-6"), className)
-  }), /* @__PURE__ */ React94.createElement(Typography, {
+  }), /* @__PURE__ */ React95.createElement(Typography, {
     htmlTag: "div",
     color: "grey-70"
   }, children));
 };
 
+// src/utils/useMeasure.ts
+import React96 from "react";
+function useMeasure() {
+  const ref = React96.useRef(null);
+  const [rect, setRect] = React96.useState({
+    width: null,
+    height: null
+  });
+  React96.useLayoutEffect(() => {
+    if (!ref.current || !window.ResizeObserver) {
+      return;
+    }
+    const observer = new window.ResizeObserver(([entry]) => {
+      if (entry == null ? void 0 : entry.contentRect) {
+        setRect({
+          width: entry.contentRect.width,
+          height: entry.contentRect.height
+        });
+      }
+    });
+    observer.observe(ref.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+  return [ref, rect];
+}
+
 // src/molecules/Section/Section.tsx
-var Section4 = ({ title, subtitle, actions, children }) => /* @__PURE__ */ React95.createElement(Section3, {
-  className: "Aquarium-Section"
-}, title && /* @__PURE__ */ React95.createElement(React95.Fragment, null, /* @__PURE__ */ React95.createElement(Section3.Header, null, /* @__PURE__ */ React95.createElement(Section3.TitleContainer, null, /* @__PURE__ */ React95.createElement(Section3.Title, null, title), subtitle && /* @__PURE__ */ React95.createElement(Section3.Subtitle, null, subtitle)), /* @__PURE__ */ React95.createElement(Section3.Actions, null, actions && castArray4(actions).filter(Boolean).map(
-  (action) => !isLink(action) ? /* @__PURE__ */ React95.createElement(Button.Secondary, __spreadValues({
-    key: action.text
-  }, omit17(action, "text")), action.text) : /* @__PURE__ */ React95.createElement(Button.ExternalLink, __spreadValues({
-    key: action.text,
-    kind: "secondary"
-  }, omit17(action, "text")), action.text)
-))), /* @__PURE__ */ React95.createElement(Divider2, null)), /* @__PURE__ */ React95.createElement(Section3.Body, null, children));
+var Section4 = (props) => {
+  var _a, _b, _c;
+  const { title, subtitle, actions, children } = props;
+  const _collapsible = title ? (_a = props.collapsible) != null ? _a : false : false;
+  const _collapsed = title ? props.collapsed : void 0;
+  const _defaultCollapsed = title ? (_b = props.defaultCollapsed) != null ? _b : false : false;
+  const [isCollapsed, setCollapsed] = React97.useState(_collapsed != null ? _collapsed : _defaultCollapsed);
+  const [ref, { height }] = useMeasure();
+  const _onCollapsedChanged = title && props.collapsible ? (_c = props.onCollapsedChange) != null ? _c : setCollapsed : noop;
+  if (title && !isUndefined8(props.collapsed) && props.collapsed !== isCollapsed) {
+    setCollapsed(props.collapsed);
+  }
+  const handleTitleClick = () => {
+    _onCollapsedChanged(!isCollapsed);
+  };
+  const targetHeight = isCollapsed ? "0px" : `${height != null ? height : 0}px`;
+  const _d = useSpring2({
+    height: height !== null ? targetHeight : void 0,
+    opacity: isCollapsed ? 0 : 1,
+    transform: `rotate(${isCollapsed ? 0 : 180}deg)`,
+    backgroundColor: isCollapsed ? tailwind_theme_default.backgroundColor["grey-0"] : tailwind_theme_default.backgroundColor["grey-5"],
+    config: {
+      duration: 150
+    },
+    immediate: !_collapsible
+  }), { transform, backgroundColor } = _d, spring = __objRest(_d, ["transform", "backgroundColor"]);
+  const toggleId = useId3();
+  const regionId = useId3();
+  return /* @__PURE__ */ React97.createElement(Section3, {
+    className: "Aquarium-Section"
+  }, title && /* @__PURE__ */ React97.createElement(React97.Fragment, null, /* @__PURE__ */ React97.createElement(Section3.Header, {
+    collapsible: _collapsible
+  }, /* @__PURE__ */ React97.createElement(Section3.TitleContainer, {
+    role: _collapsible ? "button" : void 0,
+    id: toggleId,
+    collapsible: _collapsible,
+    onClick: handleTitleClick,
+    "aria-expanded": !isCollapsed,
+    "aria-controls": regionId
+  }, _collapsible && /* @__PURE__ */ React97.createElement(animated3.div, {
+    style: { transform }
+  }, /* @__PURE__ */ React97.createElement(Section3.Toggle, null)), /* @__PURE__ */ React97.createElement(Section3.Title, null, title, props.tag && /* @__PURE__ */ React97.createElement(TagLabel, __spreadValues({}, props.tag)), props.badge && /* @__PURE__ */ React97.createElement(Chip2, {
+    text: props.badge
+  }), props.chip && /* @__PURE__ */ React97.createElement(StatusChip, __spreadValues({}, props.chip))), subtitle && /* @__PURE__ */ React97.createElement(Section3.Subtitle, {
+    className: tw("row-start-2", { "col-start-2": _collapsible })
+  }, subtitle)), /* @__PURE__ */ React97.createElement(Section3.Actions, null, actions && castArray4(actions).filter(Boolean).map(
+    (action) => !isLink(action) ? /* @__PURE__ */ React97.createElement(Button.Secondary, __spreadValues({
+      key: action.text
+    }, omit17(action, "text")), action.text) : /* @__PURE__ */ React97.createElement(Button.ExternalLink, __spreadValues({
+      key: action.text,
+      kind: "secondary"
+    }, omit17(action, "text")), action.text)
+  ))), /* @__PURE__ */ React97.createElement(animated3.div, {
+    className: tw(`h-[1px]`),
+    style: { backgroundColor }
+  })), /* @__PURE__ */ React97.createElement(animated3.div, {
+    id: regionId,
+    role: "region",
+    "aria-hidden": isCollapsed ? true : void 0,
+    style: spring,
+    className: tw({ "overflow-hidden": _collapsible })
+  }, /* @__PURE__ */ React97.createElement("div", {
+    ref
+  }, /* @__PURE__ */ React97.createElement(Section3.Body, null, children))));
+};
 
 // src/molecules/SegmentedControl/SegmentedControl.tsx
-import React96 from "react";
+import React98 from "react";
 var SegmentedControl = (_a) => {
   var _b = _a, {
     children,
@@ -12862,7 +12988,7 @@ var SegmentedControl = (_a) => {
     "selected",
     "className"
   ]);
-  return /* @__PURE__ */ React96.createElement("li", null, /* @__PURE__ */ React96.createElement("button", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React98.createElement("li", null, /* @__PURE__ */ React98.createElement("button", __spreadProps(__spreadValues({
     type: "button"
   }, rest), {
     className: classNames(
@@ -12896,12 +13022,12 @@ var SegmentedControlGroup = (_a) => {
     "border border-grey-20 text-grey-50": variant === "outlined",
     "bg-grey-0": variant === "raised"
   });
-  return /* @__PURE__ */ React96.createElement("ul", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React98.createElement("ul", __spreadProps(__spreadValues({}, rest), {
     "aria-label": ariaLabel,
     className: classNames("Aquarium-SegmentedControl", classes2, className)
-  }), React96.Children.map(
+  }), React98.Children.map(
     children,
-    (child) => React96.cloneElement(child, {
+    (child) => React98.cloneElement(child, {
       dense,
       variant,
       onClick: () => onChange(child.props.value),
@@ -12939,14 +13065,14 @@ var getCommonClassNames = (dense, selected) => tw(
 );
 
 // src/molecules/Stepper/Stepper.tsx
-import React98 from "react";
+import React100 from "react";
 
 // src/atoms/Stepper/Stepper.tsx
-import React97 from "react";
+import React99 from "react";
 var import_tick6 = __toESM(require_tick());
 var Stepper = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React97.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React99.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(className)
   }));
 };
@@ -12960,7 +13086,7 @@ var ConnectorContainer = (_a) => {
     "completed",
     "dense"
   ]);
-  return /* @__PURE__ */ React97.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React99.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       tw("absolute w-full -left-1/2", {
         "top-[3px] px-[14px]": Boolean(dense),
@@ -12972,7 +13098,7 @@ var ConnectorContainer = (_a) => {
 };
 var Connector = (_a) => {
   var _b = _a, { children, className, completed, dense } = _b, rest = __objRest(_b, ["children", "className", "completed", "dense"]);
-  return /* @__PURE__ */ React97.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React99.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       tw("w-full", {
         "bg-grey-20": !completed,
@@ -12986,7 +13112,7 @@ var Connector = (_a) => {
 };
 var Step = (_a) => {
   var _b = _a, { className, state } = _b, rest = __objRest(_b, ["className", "state"]);
-  return /* @__PURE__ */ React97.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React99.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       tw("flex flex-col items-center text-grey-90 relative text-center", {
         "text-grey-20": state === "inactive"
@@ -13007,13 +13133,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__ */ React97.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React99.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__ */ React97.createElement(InlineIcon, {
+  }), state === "completed" ? /* @__PURE__ */ React99.createElement(InlineIcon, {
     icon: import_tick6.default
   }) : dense ? null : children);
 };
@@ -13024,26 +13150,26 @@ Stepper.ConnectorContainer = ConnectorContainer;
 
 // src/molecules/Stepper/Stepper.tsx
 var Stepper2 = ({ children, activeIndex, dense }) => {
-  const steps = React98.Children.count(children);
-  return /* @__PURE__ */ React98.createElement(Stepper, {
+  const steps = React100.Children.count(children);
+  return /* @__PURE__ */ React100.createElement(Stepper, {
     role: "list",
     className: "Aquarium-Stepper"
-  }, /* @__PURE__ */ React98.createElement(Template, {
+  }, /* @__PURE__ */ React100.createElement(Template, {
     columns: steps
-  }, React98.Children.map(children, (child, index) => {
+  }, React100.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__ */ React98.createElement(Stepper.Step, {
+      return /* @__PURE__ */ React100.createElement(Stepper.Step, {
         state,
         "aria-current": state === "active" ? "step" : false,
         role: "listitem"
-      }, index > 0 && index <= steps && /* @__PURE__ */ React98.createElement(Stepper.ConnectorContainer, {
+      }, index > 0 && index <= steps && /* @__PURE__ */ React100.createElement(Stepper.ConnectorContainer, {
         dense
-      }, /* @__PURE__ */ React98.createElement(Stepper.ConnectorContainer.Connector, {
+      }, /* @__PURE__ */ React100.createElement(Stepper.ConnectorContainer.Connector, {
         completed: state === "completed" || state === "active"
-      })), /* @__PURE__ */ React98.createElement(Stepper.Step.Indicator, {
+      })), /* @__PURE__ */ React100.createElement(Stepper.Step.Indicator, {
         state,
         dense
       }, index + 1), child.props.children);
@@ -13056,16 +13182,16 @@ Step2.displayName = "Stepper.Step";
 Stepper2.Step = Step2;
 
 // src/molecules/Switch/Switch.tsx
-import React100 from "react";
+import React102 from "react";
 
 // src/atoms/Switch/Switch.tsx
-import React99 from "react";
-var Switch = React99.forwardRef(
+import React101 from "react";
+var Switch = React101.forwardRef(
   (_a, ref) => {
     var _b = _a, { id, children, name, disabled = false, readOnly = false } = _b, props = __objRest(_b, ["id", "children", "name", "disabled", "readOnly"]);
-    return /* @__PURE__ */ React99.createElement("span", {
+    return /* @__PURE__ */ React101.createElement("span", {
       className: tw("relative inline-flex justify-center items-center self-center group")
-    }, /* @__PURE__ */ React99.createElement("input", __spreadProps(__spreadValues({
+    }, /* @__PURE__ */ React101.createElement("input", __spreadProps(__spreadValues({
       id,
       ref,
       type: "checkbox",
@@ -13084,7 +13210,7 @@ var Switch = React99.forwardRef(
       ),
       readOnly,
       disabled
-    })), /* @__PURE__ */ React99.createElement("span", {
+    })), /* @__PURE__ */ React101.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",
@@ -13097,12 +13223,12 @@ var Switch = React99.forwardRef(
 );
 
 // src/molecules/Switch/Switch.tsx
-var Switch2 = React100.forwardRef(
+var Switch2 = React102.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__ */ React100.createElement(ControlLabel, {
+    return !readOnly || isChecked ? /* @__PURE__ */ React102.createElement(ControlLabel, {
       htmlFor: id,
       label: children,
       "aria-label": ariaLabel,
@@ -13111,7 +13237,7 @@ var Switch2 = React100.forwardRef(
       disabled,
       style: { gap: "0 8px" },
       className: "Aquarium-Switch"
-    }, !readOnly && /* @__PURE__ */ React100.createElement(Switch, __spreadProps(__spreadValues({
+    }, !readOnly && /* @__PURE__ */ React102.createElement(Switch, __spreadProps(__spreadValues({
       id,
       ref,
       name
@@ -13122,12 +13248,12 @@ var Switch2 = React100.forwardRef(
   }
 );
 Switch2.displayName = "Switch";
-var SwitchSkeleton = () => /* @__PURE__ */ React100.createElement("div", {
+var SwitchSkeleton = () => /* @__PURE__ */ React102.createElement("div", {
   className: tw("flex gap-3")
-}, /* @__PURE__ */ React100.createElement(Skeleton, {
+}, /* @__PURE__ */ React102.createElement(Skeleton, {
   height: 20,
   width: 35
-}), /* @__PURE__ */ React100.createElement(Skeleton, {
+}), /* @__PURE__ */ React102.createElement(Skeleton, {
   height: 20,
   width: 150
 }));
@@ -13135,7 +13261,7 @@ Switch2.Skeleton = SwitchSkeleton;
 Switch2.Skeleton.displayName = "Switch.Skeleton ";
 
 // src/molecules/SwitchGroup/SwitchGroup.tsx
-import React101, { useState as useState12 } from "react";
+import React103, { useState as useState12 } from "react";
 import uniqueId9 from "lodash/uniqueId";
 var SwitchGroup = (_a) => {
   var _b = _a, {
@@ -13167,13 +13293,13 @@ var SwitchGroup = (_a) => {
     setSelectedItems(updated);
     onChange == null ? void 0 : onChange(updated);
   };
-  return /* @__PURE__ */ React101.createElement(LabelControl, __spreadProps(__spreadValues(__spreadValues({
+  return /* @__PURE__ */ React103.createElement(LabelControl, __spreadProps(__spreadValues(__spreadValues({
     fieldset: true
   }, labelControlProps), errorProps), {
     className: "Aquarium-SwitchGroup"
-  }), /* @__PURE__ */ React101.createElement(InputGroup, {
+  }), /* @__PURE__ */ React103.createElement(InputGroup, {
     cols
-  }, React101.Children.map(children, (c) => {
+  }, React103.Children.map(children, (c) => {
     var _a3, _b2, _c, _d;
     if (!isComponentType(c, Switch2)) {
       return null;
@@ -13181,7 +13307,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 React101.cloneElement(c, {
+    return React103.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,
@@ -13191,39 +13317,24 @@ var SwitchGroup = (_a) => {
   })));
 };
 var SwitchGroupSkeleton = ({ options = 2 }) => {
-  return /* @__PURE__ */ React101.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React101.createElement("div", {
+  return /* @__PURE__ */ React103.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React103.createElement("div", {
     className: tw("flex flex-wrap flex-col gap-2")
-  }, Array.from({ length: options }).map((_, key) => /* @__PURE__ */ React101.createElement(Switch2.Skeleton, {
+  }, Array.from({ length: options }).map((_, key) => /* @__PURE__ */ React103.createElement(Switch2.Skeleton, {
     key
   }))));
 };
 SwitchGroup.Skeleton = SwitchGroupSkeleton;
 SwitchGroup.Skeleton.displayName = "SwitchGroup.Skeleton";
 
-// src/molecules/TagLabel/TagLabel.tsx
-import React102 from "react";
-var TagLabel = (_a) => {
-  var _b = _a, { title, dense = false } = _b, rest = __objRest(_b, ["title", "dense"]);
-  return /* @__PURE__ */ React102.createElement("span", __spreadProps(__spreadValues({}, rest), {
-    className: classNames(
-      "Aquarium-TagLabel",
-      tw("rounded-full text-white bg-primary-70", {
-        "py-2 px-4 typography-caption": !dense,
-        "py-2 px-3 typography-caption-small": dense
-      })
-    )
-  }), title);
-};
-
 // src/molecules/Textarea/Textarea.tsx
-import React103, { useRef as useRef13, useState as useState13 } from "react";
+import React104, { useRef as useRef13, useState as useState13 } from "react";
 import omit18 from "lodash/omit";
 import toString2 from "lodash/toString";
 import uniqueId10 from "lodash/uniqueId";
-var TextareaBase = React103.forwardRef(
+var TextareaBase = React104.forwardRef(
   (_a, ref) => {
     var _b = _a, { readOnly = false, valid = true } = _b, props = __objRest(_b, ["readOnly", "valid"]);
-    return /* @__PURE__ */ React103.createElement("textarea", __spreadProps(__spreadValues({
+    return /* @__PURE__ */ React104.createElement("textarea", __spreadProps(__spreadValues({
       ref
     }, props), {
       readOnly,
@@ -13231,10 +13342,10 @@ var TextareaBase = React103.forwardRef(
     }));
   }
 );
-TextareaBase.Skeleton = () => /* @__PURE__ */ React103.createElement(Skeleton, {
+TextareaBase.Skeleton = () => /* @__PURE__ */ React104.createElement(Skeleton, {
   height: 58
 });
-var Textarea = React103.forwardRef((props, ref) => {
+var Textarea = React104.forwardRef((props, ref) => {
   var _a, _b, _c;
   const [value, setValue] = useState13((_b = (_a = props.value) != null ? _a : props.defaultValue) != null ? _b : "");
   const id = useRef13((_c = props.id) != null ? _c : `textarea-${uniqueId10()}`);
@@ -13242,14 +13353,14 @@ var Textarea = React103.forwardRef((props, ref) => {
   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 = omit18(props, Object.keys(labelControlProps));
-  return /* @__PURE__ */ React103.createElement(LabelControl, __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React104.createElement(LabelControl, __spreadProps(__spreadValues({
     id: `${id.current}-label`,
     htmlFor: id.current,
     messageId: errorMessageId,
     length: value !== void 0 ? toString2(value).length : void 0
   }, labelControlProps), {
     className: "Aquarium-Textarea"
-  }), /* @__PURE__ */ React103.createElement(TextareaBase, __spreadProps(__spreadValues(__spreadValues({
+  }), /* @__PURE__ */ React104.createElement(TextareaBase, __spreadProps(__spreadValues(__spreadValues({
     ref
   }, baseProps), errorProps), {
     id: id.current,
@@ -13266,48 +13377,48 @@ var Textarea = React103.forwardRef((props, ref) => {
   })));
 });
 Textarea.displayName = "Textarea";
-var TextAreaSkeleton = () => /* @__PURE__ */ React103.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React103.createElement(TextareaBase.Skeleton, null));
+var TextAreaSkeleton = () => /* @__PURE__ */ React104.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React104.createElement(TextareaBase.Skeleton, null));
 Textarea.Skeleton = TextAreaSkeleton;
 Textarea.Skeleton.displayName = "Textarea.Skeleton";
 
 // src/molecules/Timeline/Timeline.tsx
-import React105 from "react";
+import React106 from "react";
 
 // src/atoms/Timeline/Timeline.tsx
-import React104 from "react";
+import React105 from "react";
 var Timeline = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React104.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React105.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("grid grid-cols-[16px_1fr] gap-x-4"), className)
   }));
 };
 var Content2 = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React104.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React105.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__ */ React104.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React105.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__ */ React104.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React105.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__ */ React104.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React105.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__ */ React104.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React105.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("bg-grey-30 h-[6px] w-[6px] rounded"), className)
   }));
 };
@@ -13322,54 +13433,54 @@ var import_error5 = __toESM(require_error());
 var import_time2 = __toESM(require_time());
 var import_warningSign5 = __toESM(require_warningSign());
 var TimelineItem = () => null;
-var Timeline2 = ({ children }) => /* @__PURE__ */ React105.createElement("div", {
+var Timeline2 = ({ children }) => /* @__PURE__ */ React106.createElement("div", {
   className: "Aquarium-Timeline"
-}, React105.Children.map(children, (item) => {
+}, React106.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__ */ React105.createElement(Timeline, {
+    return /* @__PURE__ */ React106.createElement(Timeline, {
       key: key != null ? key : props.title
-    }, /* @__PURE__ */ React105.createElement(Timeline.Separator, null, props.variant === "error" ? /* @__PURE__ */ React105.createElement(Icon, {
+    }, /* @__PURE__ */ React106.createElement(Timeline.Separator, null, props.variant === "error" ? /* @__PURE__ */ React106.createElement(Icon, {
       icon: import_error5.default,
       color: "error-30"
-    }) : props.variant === "warning" ? /* @__PURE__ */ React105.createElement(Icon, {
+    }) : props.variant === "warning" ? /* @__PURE__ */ React106.createElement(Icon, {
       icon: import_warningSign5.default,
       color: "warning-30"
-    }) : props.variant === "info" ? /* @__PURE__ */ React105.createElement(Icon, {
+    }) : props.variant === "info" ? /* @__PURE__ */ React106.createElement(Icon, {
       icon: import_time2.default,
       color: "info-30"
-    }) : /* @__PURE__ */ React105.createElement(Timeline.Separator.Dot, null)), /* @__PURE__ */ React105.createElement(Typography2.Caption, {
+    }) : /* @__PURE__ */ React106.createElement(Timeline.Separator.Dot, null)), /* @__PURE__ */ React106.createElement(Typography2.Caption, {
       color: "grey-50"
-    }, props.title), /* @__PURE__ */ React105.createElement(Timeline.LineContainer, null, /* @__PURE__ */ React105.createElement(Timeline.LineContainer.Line, null)), /* @__PURE__ */ React105.createElement(Timeline.Content, null, /* @__PURE__ */ React105.createElement(Typography2.Small, null, props.children)));
+    }, props.title), /* @__PURE__ */ React106.createElement(Timeline.LineContainer, null, /* @__PURE__ */ React106.createElement(Timeline.LineContainer.Line, null)), /* @__PURE__ */ React106.createElement(Timeline.Content, null, /* @__PURE__ */ React106.createElement(Typography2.Small, null, props.children)));
   }
 }));
-var TimelineItemSkeleton = () => /* @__PURE__ */ React105.createElement(Timeline, null, /* @__PURE__ */ React105.createElement(Timeline.Separator, null, /* @__PURE__ */ React105.createElement(Skeleton, {
+var TimelineItemSkeleton = () => /* @__PURE__ */ React106.createElement(Timeline, null, /* @__PURE__ */ React106.createElement(Timeline.Separator, null, /* @__PURE__ */ React106.createElement(Skeleton, {
   width: 6,
   height: 6,
   rounded: true
-})), /* @__PURE__ */ React105.createElement(Skeleton, {
+})), /* @__PURE__ */ React106.createElement(Skeleton, {
   height: 12,
   width: 120
-}), /* @__PURE__ */ React105.createElement(Timeline.LineContainer, null, /* @__PURE__ */ React105.createElement(Skeleton, {
+}), /* @__PURE__ */ React106.createElement(Timeline.LineContainer, null, /* @__PURE__ */ React106.createElement(Skeleton, {
   width: 2,
   height: "100%"
-})), /* @__PURE__ */ React105.createElement(Timeline.Content, null, /* @__PURE__ */ React105.createElement(Box, {
+})), /* @__PURE__ */ React106.createElement(Timeline.Content, null, /* @__PURE__ */ React106.createElement(Box, {
   display: "flex",
   flexDirection: "column",
   gap: "3"
-}, /* @__PURE__ */ React105.createElement(Skeleton, {
+}, /* @__PURE__ */ React106.createElement(Skeleton, {
   height: 32,
   width: "100%"
-}), /* @__PURE__ */ React105.createElement(Skeleton, {
+}), /* @__PURE__ */ React106.createElement(Skeleton, {
   height: 32,
   width: "73%"
-}), /* @__PURE__ */ React105.createElement(Skeleton, {
+}), /* @__PURE__ */ React106.createElement(Skeleton, {
   height: 32,
   width: "80%"
 }))));
-var TimelineSkeleton = ({ items = 3 }) => /* @__PURE__ */ React105.createElement("div", null, Array.from({ length: items }).map((_, key) => /* @__PURE__ */ React105.createElement(TimelineItemSkeleton, {
+var TimelineSkeleton = ({ items = 3 }) => /* @__PURE__ */ React106.createElement("div", null, Array.from({ length: items }).map((_, key) => /* @__PURE__ */ React106.createElement(TimelineItemSkeleton, {
   key
 })));
 Timeline2.Item = TimelineItem;
@@ -13377,9 +13488,9 @@ Timeline2.Skeleton = TimelineSkeleton;
 Timeline2.Skeleton.displayName = "Timeline.Skeleton";
 
 // src/utils/table/useTableSelect.ts
-import React106 from "react";
+import React107 from "react";
 var useTableSelect = (data, { key }) => {
-  const [selected, setSelected] = React106.useState([]);
+  const [selected, setSelected] = React107.useState([]);
   const allSelected = selected.length === data.length;
   const isSelected = (dot) => selected.includes(dot[key]);
   const selectAll = () => setSelected(data.map((dot) => dot[key]));