@aivenio/aquarium 1.4.0 → 1.5.0

package/dist/atoms.cjs

@@ -1381,6 +1381,7 @@ var require_search = __commonJS({
 var common_exports = {};
 __export(common_exports, {
   Alert: () => Alert,
+  Card: () => Card,
   Checkbox: () => Checkbox,
   Chip: () => Chip,
   DIALOG_ICONS_AND_COLORS: () => DIALOG_ICONS_AND_COLORS,
@@ -2810,35 +2811,280 @@ Alert.Dismiss = (_a) => {
   })));
 };
 
-// src/common/Checkbox/Checkbox.tsx
+// src/common/Card/Card.tsx
+var import_react16 = __toESM(require("react"));
+
+// src/components/Box/Box.tsx
+var import_react15 = __toESM(require("react"));
+var import_isUndefined6 = __toESM(require("lodash/isUndefined"));
+
+// src/components/Element/Element.tsx
 var import_react13 = __toESM(require("react"));
+var Element = (_a) => {
+  var _b = _a, { component } = _b, rest = __objRest(_b, ["component"]);
+  const Component = component || "div";
+  return import_react13.default.createElement(Component, rest);
+};
+
+// src/utils/createComponent.tsx
+var import_react14 = __toESM(require("react"));
+var hasClassName = (val) => {
+  return val.className !== void 0;
+};
+var createSimpleComponent = (Component, defaultProps, displayName) => {
+  const defaultClassName = hasClassName(defaultProps) ? defaultProps.className : "";
+  const Curried = (props) => {
+    const propsClassName = hasClassName(props) ? props.className : "";
+    const className = defaultClassName || propsClassName ? classNames(defaultClassName, propsClassName) : void 0;
+    return /* @__PURE__ */ import_react14.default.createElement(Component, __spreadProps(__spreadValues(__spreadValues({}, defaultProps), props), {
+      className
+    }));
+  };
+  Curried.displayName = displayName;
+  return Curried;
+};
+
+// src/components/Box/Box.tsx
+var Box = (_a) => {
+  var _b = _a, {
+    style,
+    color,
+    borderColor,
+    borderRadius,
+    borderWidth,
+    justifyContent,
+    alignContent,
+    alignItems,
+    alignSelf,
+    flexDirection,
+    flexWrap,
+    flex,
+    grow,
+    shrink,
+    display,
+    padding,
+    paddingX,
+    paddingY,
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft,
+    margin,
+    marginX,
+    marginY,
+    marginTop,
+    marginRight,
+    marginBottom,
+    marginLeft,
+    backgroundColor,
+    width,
+    height,
+    maxWidth,
+    maxHeight,
+    minWidth,
+    minHeight,
+    gap,
+    colGap,
+    rowGap
+  } = _b, rest = __objRest(_b, [
+    "style",
+    "color",
+    "borderColor",
+    "borderRadius",
+    "borderWidth",
+    "justifyContent",
+    "alignContent",
+    "alignItems",
+    "alignSelf",
+    "flexDirection",
+    "flexWrap",
+    "flex",
+    "grow",
+    "shrink",
+    "display",
+    "padding",
+    "paddingX",
+    "paddingY",
+    "paddingTop",
+    "paddingRight",
+    "paddingBottom",
+    "paddingLeft",
+    "margin",
+    "marginX",
+    "marginY",
+    "marginTop",
+    "marginRight",
+    "marginBottom",
+    "marginLeft",
+    "backgroundColor",
+    "width",
+    "height",
+    "maxWidth",
+    "maxHeight",
+    "minWidth",
+    "minHeight",
+    "gap",
+    "colGap",
+    "rowGap"
+  ]);
+  const styles = useStyle({
+    padding,
+    display,
+    color,
+    borderColor: borderColor ? tailwind_theme_default.backgroundColor[borderColor] : "",
+    borderRadius,
+    borderWidth,
+    justifyContent,
+    alignContent,
+    alignItems,
+    alignSelf,
+    flexDirection,
+    flexWrap,
+    paddingTop: (0, import_isUndefined6.default)(paddingY) ? paddingTop : paddingY,
+    paddingRight: (0, import_isUndefined6.default)(paddingX) ? paddingRight : paddingX,
+    paddingBottom: (0, import_isUndefined6.default)(paddingY) ? paddingBottom : paddingY,
+    paddingLeft: (0, import_isUndefined6.default)(paddingX) ? paddingLeft : paddingX,
+    margin,
+    marginTop: (0, import_isUndefined6.default)(marginY) ? marginTop : marginY,
+    marginRight: (0, import_isUndefined6.default)(marginX) ? marginRight : marginX,
+    marginBottom: (0, import_isUndefined6.default)(marginY) ? marginBottom : marginY,
+    marginLeft: (0, import_isUndefined6.default)(marginX) ? marginLeft : marginX,
+    backgroundColor,
+    width,
+    height,
+    maxWidth,
+    maxHeight,
+    minWidth,
+    minHeight,
+    flexGrow: grow,
+    flexShrink: shrink,
+    flex,
+    gap,
+    columnGap: colGap,
+    rowGap
+  });
+  return /* @__PURE__ */ import_react15.default.createElement(Element, __spreadValues({
+    style: __spreadValues(__spreadValues({}, styles), style)
+  }, rest));
+};
+var BorderBox = createSimpleComponent(
+  Box,
+  { className: "rounded border", borderColor: "grey-10" },
+  "BorderBox"
+);
+
+// src/common/Card/Card.tsx
+var Card = (_a) => {
+  var _b = _a, {
+    disabled,
+    fullWidth,
+    clickable,
+    className,
+    children
+  } = _b, rest = __objRest(_b, [
+    "disabled",
+    "fullWidth",
+    "clickable",
+    "className",
+    "children"
+  ]);
+  return /* @__PURE__ */ import_react16.default.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__ */ import_react16.default.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__ */ import_react16.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+    className: classNames(
+      tw("-mx-4", {
+        "-mt-4": Boolean(fullSize)
+      }),
+      className
+    )
+  }));
+};
+var Image = ({
+  image,
+  imageAlt,
+  fullSize
+}) => /* @__PURE__ */ import_react16.default.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__ */ import_react16.default.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__ */ import_react16.default.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/common/Checkbox/Checkbox.tsx
+var import_react17 = __toESM(require("react"));
 var import_minus = __toESM(require_minus());
 var import_tick = __toESM(require_tick());
-var Checkbox = import_react13.default.forwardRef(
+var Checkbox = import_react17.default.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__ */ import_react13.default.createElement("span", {
-      className: tw("inline-flex justify-center items-center self-center")
-    }, /* @__PURE__ */ import_react13.default.createElement("input", __spreadProps(__spreadValues({
+    return /* @__PURE__ */ import_react17.default.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__ */ import_react17.default.createElement("input", __spreadProps(__spreadValues({
       id,
       ref,
       type: "checkbox",
       name
     }, props), {
-      className: tw("opacity-0 peer w-0 h-0"),
+      className: classNames(
+        tw("peer appearance-none outline-none w-5 h-5", "rounded-sm border border-transparent", {
+          "cursor-pointer checked:bg-navyBlue-100": !disabled,
+          "cursor-not-allowed bg-grey-0": disabled
+        })
+      ),
       readOnly,
       disabled
-    })), /* @__PURE__ */ import_react13.default.createElement(Icon, {
+    })), /* @__PURE__ */ import_react17.default.createElement(Icon, {
       icon: indeterminate ? import_minus.default : import_tick.default,
       className: classNames(
         tw(
-          "rounded-sm border peer w-5 h-5 p-[3px] pointer-events-none cursor-pointer peer-disabled:cursor-not-allowed",
-          "border-grey-20 peer-focus:border-info-70 peer-disabled:border-grey-5 peer-checked:border-navyBlue-100",
-          "text-transparent peer-checked:[&>path]:stroke-2 peer-checked:text-white peer-checked:[&>path]:stroke-white"
+          "absolute top-0 right-0",
+          "pointer-events-none p-[2px] w-5 h-5",
+          "text-transparent [&>path]:stroke-transparent",
+          "rounded-sm border border-grey-20 peer-focus:border-info-70"
         ),
         {
-          "peer-checked:bg-navyBlue-100 peer-hover:border-grey-50": !disabled,
-          "peer-checked:bg-gray-0 peer-checked:text-grey-30 peer-checked:[&>path]:stroke-grey-30": disabled
+          "peer-hover:border-grey-50 peer-checked:text-white peer-checked:[&>path]:stroke-white peer-checked:border-navyBlue-100": !disabled,
+          "border-grey-5 peer-checked:text-grey-30 peer-checked:[&>path]:stroke-grey-30": disabled
         }
       )
     }));
@@ -2846,11 +3092,11 @@ var Checkbox = import_react13.default.forwardRef(
 );
 
 // src/common/Chip/Chip.tsx
-var import_react14 = __toESM(require("react"));
-var Container = import_react14.default.forwardRef(
+var import_react18 = __toESM(require("react"));
+var Container = import_react18.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { dense = false, className, children } = _b, rest = __objRest(_b, ["dense", "className", "children"]);
-    return /* @__PURE__ */ import_react14.default.createElement("span", __spreadValues({
+    return /* @__PURE__ */ import_react18.default.createElement("span", __spreadValues({
       ref,
       className: classNames(
         tw("inline-flex items-center rounded-sm transition whitespace-nowrap", {
@@ -2886,119 +3132,119 @@ var DIALOG_ICONS_AND_COLORS = {
 };
 
 // src/common/DropdownMenu/DropdownMenu.tsx
-var import_react16 = __toESM(require("react"));
+var import_react20 = __toESM(require("react"));
 
 // src/components/Typography/Typography.tsx
-var import_react15 = __toESM(require("react"));
-var Typography2 = (props) => /* @__PURE__ */ import_react15.default.createElement(Typography, __spreadValues({}, props));
+var import_react19 = __toESM(require("react"));
+var Typography2 = (props) => /* @__PURE__ */ import_react19.default.createElement(Typography, __spreadValues({}, props));
 Typography2.LargeHeading = (_a) => {
   var _b = _a, { htmlTag = "h1" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ import_react15.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ import_react19.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
     variant: "large-heading"
   }));
 };
 Typography2.Heading = (_a) => {
   var _b = _a, { htmlTag = "h1", fontWeight } = _b, props = __objRest(_b, ["htmlTag", "fontWeight"]);
-  return /* @__PURE__ */ import_react15.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ import_react19.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
     variant: "heading"
   }));
 };
 Typography2.Subheading = (_a) => {
   var _b = _a, { htmlTag = "h2", fontWeight } = _b, props = __objRest(_b, ["htmlTag", "fontWeight"]);
-  return /* @__PURE__ */ import_react15.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ import_react19.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
     variant: "subheading"
   }));
 };
 Typography2.LargeStrong = (_a) => {
   var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ import_react15.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ import_react19.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
     variant: "large-strong"
   }));
 };
 Typography2.Large = (_a) => {
   var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ import_react15.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ import_react19.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
     variant: "large"
   }));
 };
 Typography2.DefaultStrong = (_a) => {
   var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ import_react15.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ import_react19.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
     variant: "default-strong"
   }));
 };
 Typography2.Default = (_a) => {
   var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ import_react15.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ import_react19.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
     variant: "default"
   }));
 };
 Typography2.Paragraph = (_a) => {
   var _b = _a, { htmlTag = "p", fontWeight } = _b, props = __objRest(_b, ["htmlTag", "fontWeight"]);
-  return /* @__PURE__ */ import_react15.default.createElement(Typography2.Default, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ import_react19.default.createElement(Typography2.Default, __spreadProps(__spreadValues({}, props), {
     htmlTag
   }));
 };
 Typography2.P = Typography2.Paragraph;
 Typography2.SmallStrong = (_a) => {
   var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ import_react15.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ import_react19.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
     variant: "small-strong"
   }));
 };
 Typography2.Small = (_a) => {
   var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ import_react15.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ import_react19.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
     variant: "small"
   }));
 };
 Typography2.Caption = (_a) => {
   var _b = _a, { htmlTag = "div", fontWeight } = _b, props = __objRest(_b, ["htmlTag", "fontWeight"]);
-  return /* @__PURE__ */ import_react15.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ import_react19.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
     variant: "caption"
   }));
 };
 Typography2.LargeText = (_a) => {
   var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ import_react15.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ import_react19.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
     variant: "large-strong"
   }));
 };
 Typography2.MediumText = (_a) => {
   var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ import_react15.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ import_react19.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
     variant: "default-strong"
   }));
 };
 Typography2.Text = (_a) => {
   var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ import_react15.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ import_react19.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
     variant: "default"
   }));
 };
 Typography2.SmallText = (_a) => {
   var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ import_react15.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ import_react19.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
     variant: "small"
   }));
 };
 Typography2.SmallTextBold = (_a) => {
   var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ import_react15.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ import_react19.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
     variant: "small-strong"
   }));
@@ -3006,10 +3252,10 @@ Typography2.SmallTextBold = (_a) => {
 
 // src/common/DropdownMenu/DropdownMenu.tsx
 var import_tick2 = __toESM(require_tick());
-var DropdownMenu = import_react16.default.forwardRef(
+var DropdownMenu = import_react20.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { maxHeight = "450px", minWidth = "125px", maxWidth, className, children } = _b, props = __objRest(_b, ["maxHeight", "minWidth", "maxWidth", "className", "children"]);
-    return /* @__PURE__ */ import_react16.default.createElement("div", __spreadValues({
+    return /* @__PURE__ */ import_react20.default.createElement("div", __spreadValues({
       ref,
       style: { maxHeight, minWidth, maxWidth },
       className: classNames(
@@ -3019,25 +3265,25 @@ var DropdownMenu = import_react16.default.forwardRef(
     }, props), children);
   }
 );
-var ContentContainer = ({ children }) => /* @__PURE__ */ import_react16.default.createElement("div", {
+var ContentContainer = ({ children }) => /* @__PURE__ */ import_react20.default.createElement("div", {
   className: tw("p-3")
 }, children);
 DropdownMenu.ContentContainer = ContentContainer;
-var List = import_react16.default.forwardRef(
+var List = import_react20.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-    return /* @__PURE__ */ import_react16.default.createElement("ul", __spreadValues({
+    return /* @__PURE__ */ import_react20.default.createElement("ul", __spreadValues({
       ref
     }, props), children);
   }
 );
 DropdownMenu.List = List;
-var Group = import_react16.default.forwardRef(
+var Group = import_react20.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, title, titleProps, children } = _b, props = __objRest(_b, ["className", "title", "titleProps", "children"]);
-    return /* @__PURE__ */ import_react16.default.createElement("li", __spreadValues({
+    return /* @__PURE__ */ import_react20.default.createElement("li", __spreadValues({
       ref
-    }, props), title && /* @__PURE__ */ import_react16.default.createElement("div", __spreadValues({
+    }, props), title && /* @__PURE__ */ import_react20.default.createElement("div", __spreadValues({
       className: classNames(className, "p-3 text-grey-40 uppercase cursor-default typography-caption", {
         "text-grey-20": props.disabled
       })
@@ -3045,10 +3291,10 @@ var Group = import_react16.default.forwardRef(
   }
 );
 DropdownMenu.Group = Group;
-var Item = import_react16.default.forwardRef(
+var Item = import_react20.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { kind, highlighted, selected, className, icon, children } = _b, props = __objRest(_b, ["kind", "highlighted", "selected", "className", "icon", "children"]);
-    return /* @__PURE__ */ import_react16.default.createElement("li", __spreadValues({
+    return /* @__PURE__ */ import_react20.default.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,
@@ -3056,40 +3302,40 @@ var Item = import_react16.default.forwardRef(
         "text-primary-80": kind === "action",
         "text-grey-20 cursor-not-allowed": props.disabled
       })
-    }, props), icon && /* @__PURE__ */ import_react16.default.createElement(InlineIcon, {
+    }, props), icon && /* @__PURE__ */ import_react20.default.createElement(InlineIcon, {
       icon
-    }), /* @__PURE__ */ import_react16.default.createElement("span", {
+    }), /* @__PURE__ */ import_react20.default.createElement("span", {
       className: tw("grow")
-    }, children), selected && /* @__PURE__ */ import_react16.default.createElement(InlineIcon, {
+    }, children), selected && /* @__PURE__ */ import_react20.default.createElement(InlineIcon, {
       icon: import_tick2.default
     }));
   }
 );
 DropdownMenu.Item = Item;
-var Description = ({ disabled, children }) => /* @__PURE__ */ import_react16.default.createElement(Typography2.Caption, {
+var Description = ({ disabled, children }) => /* @__PURE__ */ import_react20.default.createElement(Typography2.Caption, {
   color: disabled ? "grey-20" : "grey-40"
 }, children);
 DropdownMenu.Description = Description;
 var Separator = (_a) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ import_react16.default.createElement("li", __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ import_react20.default.createElement("li", __spreadProps(__spreadValues({}, props), {
     className: classNames(className, tw("m-3 block bg-grey-5 h-[1px]"))
   }));
 };
 DropdownMenu.Separator = Separator;
 var EmptyStateContainer = (_a) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ import_react16.default.createElement("div", __spreadValues({
+  return /* @__PURE__ */ import_react20.default.createElement("div", __spreadValues({
     className: classNames(tw("border border-dashed border-grey-10 p-3"), className)
   }, props), children);
 };
 DropdownMenu.EmptyStateContainer = EmptyStateContainer;
 
 // src/common/InputGroup/InputGroup.tsx
-var import_react18 = __toESM(require("react"));
+var import_react22 = __toESM(require("react"));
 
 // src/components/Grid/Grid.tsx
-var import_react17 = __toESM(require("react"));
+var import_react21 = __toESM(require("react"));
 var Grid = Tailwindify(
   ({
     htmlTag = "div",
@@ -3142,7 +3388,7 @@ var Grid = Tailwindify(
       gridRowEnd: rowEnd
     });
     const HtmlElement = htmlTag;
-    return /* @__PURE__ */ import_react17.default.createElement(HtmlElement, {
+    return /* @__PURE__ */ import_react21.default.createElement(HtmlElement, {
       style: __spreadValues(__spreadValues({}, hookStyle), style),
       className
     }, children);
@@ -3158,7 +3404,7 @@ var gridColumnStyles = {
 };
 var InputGroup = (_a) => {
   var _b = _a, { cols = "1", children } = _b, rest = __objRest(_b, ["cols", "children"]);
-  return /* @__PURE__ */ import_react18.default.createElement(Grid, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react22.default.createElement(Grid, __spreadProps(__spreadValues({}, rest), {
     display: "inline-grid",
     colGap: "l4",
     rowGap: "3",
@@ -3168,10 +3414,10 @@ var InputGroup = (_a) => {
 };
 
 // src/common/Modal/Modal.tsx
-var import_react19 = __toESM(require("react"));
+var import_react23 = __toESM(require("react"));
 var Modal = (_a) => {
   var _b = _a, { children, className, open } = _b, rest = __objRest(_b, ["children", "className", "open"]);
-  return open ? /* @__PURE__ */ import_react19.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return open ? /* @__PURE__ */ import_react23.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       tw("inset-0 overflow-y-auto z-modal flex justify-center items-center fixed py-7"),
       className
@@ -3180,14 +3426,14 @@ var Modal = (_a) => {
 };
 Modal.BackDrop = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ import_react19.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react23.default.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 = import_react19.default.forwardRef(
+Modal.Dialog = import_react23.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { children, className, size = "sm" } = _b, rest = __objRest(_b, ["children", "className", "size"]);
-    return /* @__PURE__ */ import_react19.default.createElement("div", __spreadProps(__spreadValues({
+    return /* @__PURE__ */ import_react23.default.createElement("div", __spreadProps(__spreadValues({
       ref,
       "aria-modal": "true"
     }, rest), {
@@ -3205,31 +3451,31 @@ Modal.Dialog = import_react19.default.forwardRef(
 );
 Modal.Header = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ import_react19.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react23.default.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__ */ import_react19.default.createElement("img", __spreadProps(__spreadValues({
+  return backgroundImage ? /* @__PURE__ */ import_react23.default.createElement("img", __spreadProps(__spreadValues({
     "aria-hidden": true,
     src: backgroundImage != null ? backgroundImage : void 0
   }, rest), {
     className: classNames(common, tw("object-cover"), className)
-  })) : /* @__PURE__ */ import_react19.default.createElement("div", {
+  })) : /* @__PURE__ */ import_react23.default.createElement("div", {
     className: classNames(common, tw("bg-grey-5"), className)
   });
 };
 Modal.CloseButtonContainer = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ import_react19.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react23.default.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__ */ import_react19.default.createElement(Typography, __spreadValues({
+  return /* @__PURE__ */ import_react23.default.createElement(Typography, __spreadValues({
     htmlTag: "h2",
     variant: "subheading",
     color: "grey-90",
@@ -3238,42 +3484,42 @@ Modal.Title = (_a) => {
 };
 Modal.Subtitle = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ import_react19.default.createElement(Typography, __spreadValues({
+  return /* @__PURE__ */ import_react23.default.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__ */ import_react19.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react23.default.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__ */ import_react19.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react23.default.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__ */ import_react19.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react23.default.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__ */ import_react19.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react23.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("flex gap-4 justify-end"), className)
   }), children);
 };
 
 // src/common/Popover/Popover.tsx
-var import_react20 = __toESM(require("react"));
-var PopoverPanel = import_react20.default.forwardRef((_a, ref) => {
+var import_react24 = __toESM(require("react"));
+var PopoverPanel = import_react24.default.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ import_react20.default.createElement("div", __spreadValues({
+  return /* @__PURE__ */ import_react24.default.createElement("div", __spreadValues({
     ref,
     className: classNames(
       className,
@@ -3288,23 +3534,23 @@ var Popover = {
 };
 
 // src/common/PopoverDialog/PopoverDialog.tsx
-var import_react21 = __toESM(require("react"));
+var import_react25 = __toESM(require("react"));
 var Header = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ import_react21.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react25.default.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__ */ import_react21.default.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react25.default.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__ */ import_react21.default.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react25.default.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
     htmlTag: "div",
     variant: "caption",
     className: classNames(tw("px-5 overflow-y-auto"), className)
@@ -3312,13 +3558,13 @@ var Body = (_a) => {
 };
 var Footer = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ import_react21.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react25.default.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__ */ import_react21.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react25.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("flex gap-4"), className)
   }), children);
 };
@@ -3327,15 +3573,15 @@ var PopoverDialog = {
   Title,
   Body,
   Footer,
-  Actions
+  Actions: Actions2
 };
 
 // src/common/RadioButton/RadioButton.tsx
-var import_react22 = __toESM(require("react"));
-var RadioButton = import_react22.default.forwardRef(
+var import_react26 = __toESM(require("react"));
+var RadioButton = import_react26.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { id, children, name, disabled = false, readOnly = false } = _b, props = __objRest(_b, ["id", "children", "name", "disabled", "readOnly"]);
-    return /* @__PURE__ */ import_react22.default.createElement("input", __spreadProps(__spreadValues({
+    return /* @__PURE__ */ import_react26.default.createElement("input", __spreadProps(__spreadValues({
       id,
       ref,
       type: "radio",
@@ -3343,9 +3589,9 @@ var RadioButton = import_react22.default.forwardRef(
     }, props), {
       className: classNames(
         tw(
-          "inline-flex justify-center items-center self-center appearance-none ",
+          "inline-flex justify-center items-center self-center appearance-none",
           "w-5 h-5 p-[3px] rounded-full cursor-pointer border border-grey-20",
-          "focus:border-info-70 checked:bg-navyBlue-100 checked:shadow-whiteInset",
+          "outline-none focus:border-info-70 checked:bg-navyBlue-100 checked:shadow-whiteInset",
           {
             "hover:border-grey-50 checked:border-navyBlue-100": !disabled,
             "cursor-not-allowed border-grey-5 bg-grey-0 checked:bg-opacity-40": disabled
@@ -3359,7 +3605,7 @@ var RadioButton = import_react22.default.forwardRef(
 );
 
 // src/common/Select/Select.tsx
-var import_react23 = __toESM(require("react"));
+var import_react27 = __toESM(require("react"));
 var import_chevronDown2 = __toESM(require_chevronDown());
 var import_chevronUp = __toESM(require_chevronUp());
 var import_search = __toESM(require_search());
@@ -3379,16 +3625,16 @@ function isOptionDisabledBuiltin(option) {
 }
 var getValues = (children) => {
   var _a;
-  const values = import_react23.default.Children.map(children, (c) => {
+  const values = import_react27.default.Children.map(children, (c) => {
     var _a2;
     return (_a2 = c == null ? void 0 : c.props) == null ? void 0 : _a2.value;
   });
   return (_a = values == null ? void 0 : values.filter((v) => v !== void 0 && v !== null)) != null ? _a : [];
 };
-var InputContainer = import_react23.default.forwardRef(
+var InputContainer = import_react27.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { variant = "default", className } = _b, props = __objRest(_b, ["variant", "className"]);
-    return /* @__PURE__ */ import_react23.default.createElement("div", __spreadValues({
+    return /* @__PURE__ */ import_react27.default.createElement("div", __spreadValues({
       ref,
       className: classNames(
         className,
@@ -3407,9 +3653,9 @@ var InputContainer = import_react23.default.forwardRef(
     }, props));
   }
 );
-var Input = import_react23.default.forwardRef((_a, ref) => {
+var Input = import_react27.default.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ import_react23.default.createElement("input", __spreadValues({
+  return /* @__PURE__ */ import_react27.default.createElement("input", __spreadValues({
     ref,
     type: "text",
     className: classNames(
@@ -3423,39 +3669,39 @@ var Input = import_react23.default.forwardRef((_a, ref) => {
     )
   }, props));
 });
-var Menu = import_react23.default.forwardRef(
+var Menu = import_react27.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { maxHeight = "450px", className, children } = _b, props = __objRest(_b, ["maxHeight", "className", "children"]);
-    return /* @__PURE__ */ import_react23.default.createElement("ul", __spreadValues({
+    return /* @__PURE__ */ import_react27.default.createElement("ul", __spreadValues({
       ref,
       style: { maxHeight },
-      className: classNames(className, tw("overflow-y-auto"))
+      className
     }, props), children);
   }
 );
-var NoResults = import_react23.default.forwardRef(
+var NoResults = import_react27.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, children } = _b, rest = __objRest(_b, ["className", "children"]);
-    return /* @__PURE__ */ import_react23.default.createElement("li", __spreadProps(__spreadValues({
+    return /* @__PURE__ */ import_react27.default.createElement("li", __spreadProps(__spreadValues({
       ref
     }, rest), {
       className: classNames(tw("p-3 text-grey-40 italic"), className)
     }), children);
   }
 );
-var EmptyStateContainer2 = import_react23.default.forwardRef((_a, ref) => {
+var EmptyStateContainer2 = import_react27.default.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ import_react23.default.createElement("li", __spreadValues({
+  return /* @__PURE__ */ import_react27.default.createElement("li", __spreadValues({
     ref,
     className: tw("border border-dashed border-grey-10 m-4 p-6")
   }, props), children);
 });
-var Divider = (props) => /* @__PURE__ */ import_react23.default.createElement("div", __spreadValues({
+var Divider = (props) => /* @__PURE__ */ import_react27.default.createElement("div", __spreadValues({
   className: tw("border-b-[1px] border-grey-5 mx-3 my-4")
 }, props));
-var Group2 = import_react23.default.forwardRef((_a, ref) => {
+var Group2 = import_react27.default.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ import_react23.default.createElement("li", __spreadValues({
+  return /* @__PURE__ */ import_react27.default.createElement("li", __spreadValues({
     ref,
     className: classNames(
       className,
@@ -3466,53 +3712,53 @@ var Group2 = import_react23.default.forwardRef((_a, ref) => {
     )
   }, props), children);
 });
-var Item2 = import_react23.default.forwardRef(
+var Item2 = import_react27.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { highlighted, selected, className, children } = _b, props = __objRest(_b, ["highlighted", "selected", "className", "children"]);
-    return /* @__PURE__ */ import_react23.default.createElement("li", __spreadValues({
+    return /* @__PURE__ */ import_react27.default.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,
         "hover:bg-grey-0": !props.disabled
       })
-    }, props), /* @__PURE__ */ import_react23.default.createElement("span", {
+    }, props), /* @__PURE__ */ import_react27.default.createElement("span", {
       className: tw("grow flex gap-x-3")
-    }, children), selected && /* @__PURE__ */ import_react23.default.createElement(InlineIcon, {
+    }, children), selected && /* @__PURE__ */ import_react27.default.createElement(InlineIcon, {
       icon: import_tick3.default
     }));
   }
 );
-var ActionItem = import_react23.default.forwardRef(
+var ActionItem = import_react27.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, dense, icon, onClick, children } = _b, props = __objRest(_b, ["className", "dense", "icon", "onClick", "children"]);
-    return /* @__PURE__ */ import_react23.default.createElement("li", __spreadValues({
+    return /* @__PURE__ */ import_react27.default.createElement("li", __spreadValues({
       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,
         "text-grey-20": props.disabled,
         "hover:text-primary-70": !props.disabled
       })
-    }, props), icon && /* @__PURE__ */ import_react23.default.createElement(InlineIcon, {
+    }, props), icon && /* @__PURE__ */ import_react27.default.createElement(InlineIcon, {
       icon
     }), children);
   }
 );
-var Toggle = import_react23.default.forwardRef((_a, ref) => {
+var Toggle = import_react27.default.forwardRef((_a, ref) => {
   var _b = _a, { hasFocus, isOpen } = _b, props = __objRest(_b, ["hasFocus", "isOpen"]);
   var _a2;
-  return /* @__PURE__ */ import_react23.default.createElement("button", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ import_react27.default.createElement("button", __spreadProps(__spreadValues({
     ref,
     type: "button",
     "aria-label": "Toggle"
   }, props), {
     className: tw("grow-0 leading-none", { "cursor-not-allowed": (_a2 = props.disabled) != null ? _a2 : false })
-  }), /* @__PURE__ */ import_react23.default.createElement(InlineIcon, {
+  }), /* @__PURE__ */ import_react27.default.createElement(InlineIcon, {
     color: props.disabled ? "grey-40" : "grey-70",
     icon: hasFocus ? import_search.default : isOpen ? import_chevronUp.default : import_chevronDown2.default
   }));
@@ -3531,11 +3777,11 @@ var Select = {
 };
 
 // src/common/Stepper/Stepper.tsx
-var import_react24 = __toESM(require("react"));
+var import_react28 = __toESM(require("react"));
 var import_tick4 = __toESM(require_tick());
 var Stepper = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ import_react24.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react28.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(className)
   }));
 };
@@ -3549,7 +3795,7 @@ var ConnectorContainer = (_a) => {
     "completed",
     "dense"
   ]);
-  return /* @__PURE__ */ import_react24.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react28.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       tw("absolute w-full -left-1/2", {
         "top-[3px] px-[14px]": Boolean(dense),
@@ -3561,7 +3807,7 @@ var ConnectorContainer = (_a) => {
 };
 var Connector = (_a) => {
   var _b = _a, { children, className, completed, dense } = _b, rest = __objRest(_b, ["children", "className", "completed", "dense"]);
-  return /* @__PURE__ */ import_react24.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react28.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       tw("w-full", {
         "bg-grey-20": !completed,
@@ -3575,7 +3821,7 @@ var Connector = (_a) => {
 };
 var Step = (_a) => {
   var _b = _a, { className, state } = _b, rest = __objRest(_b, ["className", "state"]);
-  return /* @__PURE__ */ import_react24.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react28.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       tw("flex flex-col items-center text-grey-90 relative text-center", {
         "text-grey-20": state === "inactive"
@@ -3596,13 +3842,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__ */ import_react24.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react28.default.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__ */ import_react24.default.createElement(InlineIcon, {
+  }), state === "completed" ? /* @__PURE__ */ import_react28.default.createElement(InlineIcon, {
     icon: import_tick4.default
   }) : dense ? null : children);
 };
@@ -3612,33 +3858,34 @@ ConnectorContainer.Connector = Connector;
 Stepper.ConnectorContainer = ConnectorContainer;
 
 // src/common/Switch/Switch.tsx
-var import_react25 = __toESM(require("react"));
-var Switch = import_react25.default.forwardRef(
+var import_react29 = __toESM(require("react"));
+var Switch = import_react29.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { id, children, name, disabled = false, readOnly = false } = _b, props = __objRest(_b, ["id", "children", "name", "disabled", "readOnly"]);
-    return /* @__PURE__ */ import_react25.default.createElement("span", {
+    return /* @__PURE__ */ import_react29.default.createElement("span", {
       className: tw("relative inline-flex justify-center items-center self-center group")
-    }, /* @__PURE__ */ import_react25.default.createElement("input", __spreadProps(__spreadValues({
+    }, /* @__PURE__ */ import_react29.default.createElement("input", __spreadProps(__spreadValues({
       id,
       ref,
       type: "checkbox",
       name
     }, props), {
-      className: tw("opacity-0 peer/switch w-0 h-0"),
+      className: classNames(
+        tw(
+          "appearance-none peer/switch rounded-full inline-block w-[34px] h-[20px] transition duration-300",
+          "outline-none focus:border border-info-70 bg-grey-20",
+          "cursor-pointer disabled:cursor-not-allowed",
+          {
+            "hover:bg-grey-30 checked:bg-navyBlue-100 hover:checked:bg-navyBlue-100": !disabled,
+            "bg-grey-5 checked:opacity-40": disabled
+          }
+        )
+      ),
       readOnly,
       disabled
-    })), /* @__PURE__ */ import_react25.default.createElement("span", {
-      className: tw(
-        "rounded-full inline-block w-[34px] h-[20px] transition duration-300",
-        "peer-focus/switch:border border-info-70 bg-grey-20",
-        {
-          "group-hover:bg-grey-30 peer-checked/switch:bg-navyBlue-100": !disabled,
-          "bg-grey-5 peer-checked/switch:opacity-40": disabled
-        }
-      )
-    }), /* @__PURE__ */ import_react25.default.createElement("span", {
+    })), /* @__PURE__ */ import_react29.default.createElement("span", {
       className: tw(
-        "rounded-full absolute inline-block transition duration-300 h-4 w-4 transform peer-checked/switch:translate-x-5",
+        "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",
         {
           "shadow-4dp": !disabled
@@ -3649,32 +3896,32 @@ var Switch = import_react25.default.forwardRef(
 );
 
 // src/common/Table/Table.tsx
-var import_react26 = __toESM(require("react"));
+var import_react30 = __toESM(require("react"));
 var import_chevronDown3 = __toESM(require_chevronDown());
 var import_chevronUp2 = __toESM(require_chevronUp());
-var HeadContext = import_react26.default.createContext(null);
+var HeadContext = import_react30.default.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__ */ import_react26.default.createElement("table", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react30.default.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__ */ import_react26.default.createElement("thead", __spreadValues({}, rest), /* @__PURE__ */ import_react26.default.createElement("tr", null, /* @__PURE__ */ import_react26.default.createElement(HeadContext.Provider, {
+  return /* @__PURE__ */ import_react30.default.createElement("thead", __spreadValues({}, rest), /* @__PURE__ */ import_react30.default.createElement("tr", null, /* @__PURE__ */ import_react30.default.createElement(HeadContext.Provider, {
     value: { children, sticky }
   }, children)));
 };
 var TableBody = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ import_react26.default.createElement("tbody", __spreadValues({}, rest), children);
+  return /* @__PURE__ */ import_react30.default.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__ */ import_react26.default.createElement("tr", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react30.default.createElement("tr", __spreadProps(__spreadValues({}, rest), {
     className: classNames(rowClassNames, className)
   }), children);
 };
@@ -3690,25 +3937,25 @@ var getHeadCellClassNames = (sticky = true) => {
 };
 var TableCell = (_a) => {
   var _b = _a, { children, className, align = "left" } = _b, rest = __objRest(_b, ["children", "className", "align"]);
-  const headContext = import_react26.default.useContext(HeadContext);
-  return headContext ? /* @__PURE__ */ import_react26.default.createElement("th", __spreadProps(__spreadValues({}, rest), {
+  const headContext = import_react30.default.useContext(HeadContext);
+  return headContext ? /* @__PURE__ */ import_react30.default.createElement("th", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       cellClassNames,
       getHeadCellClassNames(headContext.sticky),
       getAlignClassNames(align),
       className
     )
-  }), children) : /* @__PURE__ */ import_react26.default.createElement("td", __spreadProps(__spreadValues({}, rest), {
+  }), children) : /* @__PURE__ */ import_react30.default.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__ */ import_react26.default.createElement(Table.Cell, {
+  return /* @__PURE__ */ import_react30.default.createElement(Table.Cell, {
     className: tw("leading-[0px]")
-  }, props.type === "radio" ? /* @__PURE__ */ import_react26.default.createElement(RadioButton, __spreadValues({
+  }, props.type === "radio" ? /* @__PURE__ */ import_react30.default.createElement(RadioButton, __spreadValues({
     "aria-label": ariaLabel
-  }, props)) : /* @__PURE__ */ import_react26.default.createElement(Checkbox, __spreadValues({
+  }, props)) : /* @__PURE__ */ import_react30.default.createElement(Checkbox, __spreadValues({
     "aria-label": ariaLabel
   }, props)));
 };
@@ -3718,42 +3965,43 @@ var getSortCellIconClassNames = (active) => {
 };
 var TableSortCell = (_a) => {
   var _b = _a, { children, direction = "none", onClick } = _b, rest = __objRest(_b, ["children", "direction", "onClick"]);
-  return /* @__PURE__ */ import_react26.default.createElement(Table.Cell, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react30.default.createElement(Table.Cell, __spreadProps(__spreadValues({}, rest), {
     "aria-sort": direction
-  }), /* @__PURE__ */ import_react26.default.createElement("span", {
+  }), /* @__PURE__ */ import_react30.default.createElement("span", {
     className: getSortCellButtonClassNames(rest.align),
     role: "button",
     tabIndex: -1,
     onClick
-  }, children, /* @__PURE__ */ import_react26.default.createElement("div", {
+  }, children, /* @__PURE__ */ import_react30.default.createElement("div", {
     "data-sort-icons": true,
     className: tw("flex flex-col", {
       "invisible group-hover:visible": direction === "none"
     })
-  }, /* @__PURE__ */ import_react26.default.createElement(InlineIcon, {
+  }, /* @__PURE__ */ import_react30.default.createElement(InlineIcon, {
     icon: import_chevronUp2.default,
     className: getSortCellIconClassNames(direction === "descending")
-  }), /* @__PURE__ */ import_react26.default.createElement(InlineIcon, {
+  }), /* @__PURE__ */ import_react30.default.createElement(InlineIcon, {
     icon: import_chevronDown3.default,
     className: getSortCellIconClassNames(direction === "ascending")
   }))));
 };
-var Item3 = ({ image, imageAlt, imageSize = 35, title, caption }) => /* @__PURE__ */ import_react26.default.createElement("div", {
+var Item3 = ({ image, imageAlt, imageSize = 35, title, caption }) => /* @__PURE__ */ import_react30.default.createElement("div", {
   className: tw("flex gap-4 items-center")
-}, image && /* @__PURE__ */ import_react26.default.createElement("img", {
+}, image && /* @__PURE__ */ import_react30.default.createElement("img", {
   src: image,
   alt: imageAlt,
   style: { width: imageSize, height: imageSize }
-}), /* @__PURE__ */ import_react26.default.createElement("div", null, title, caption && /* @__PURE__ */ import_react26.default.createElement(Typography2.Caption, null, caption)));
-Table.Head = import_react26.default.memo(TableHead);
-Table.Body = import_react26.default.memo(TableBody);
-Table.Row = import_react26.default.memo(TableRow);
-Table.Cell = import_react26.default.memo(TableCell);
-Table.SortCell = import_react26.default.memo(TableSortCell);
-Table.SelectCell = import_react26.default.memo(TableSelectCell);
+}), /* @__PURE__ */ import_react30.default.createElement("div", null, title, caption && /* @__PURE__ */ import_react30.default.createElement(Typography2.Caption, null, caption)));
+Table.Head = import_react30.default.memo(TableHead);
+Table.Body = import_react30.default.memo(TableBody);
+Table.Row = import_react30.default.memo(TableRow);
+Table.Cell = import_react30.default.memo(TableCell);
+Table.SortCell = import_react30.default.memo(TableSortCell);
+Table.SelectCell = import_react30.default.memo(TableSelectCell);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Alert,
+  Card,
   Checkbox,
   Chip,
   DIALOG_ICONS_AND_COLORS,