@aivenio/aquarium 2.16.0 → 2.17.0

package/dist/atoms.mjs

@@ -1,38 +1,9 @@
 var __create = Object.create;
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b ||= {})
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 var __commonJS = (cb, mod) => function __require() {
   return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
 };
@@ -45,6 +16,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -5948,18 +5923,20 @@ function getPxMapping(breakpoints2) {
     if (!minWidthInPx.endsWith("px")) {
       throw new Error(`Unexpected breakpoint value found: '${minWidthInPx}'. Expecting it to be in px unit.`);
     }
-    return __spreadProps(__spreadValues({}, acc), {
+    return {
+      ...acc,
       [key]: parseInt(minWidthInPx, 10)
-    });
+    };
   }, {});
 }
 function getMatches(windowSize) {
   const mapping = getPxMapping(allBreakpoints);
   return Object.keys(allBreakpoints).reduce((acc, key) => {
     const isMatch = !isUndefined(windowSize) && windowSize.width > 0 ? windowSize.width > mapping[key] : key === "default" ? true : false;
-    return __spreadProps(__spreadValues({}, acc), {
+    return {
+      ...acc,
       [key]: isMatch
-    });
+    };
   }, {});
 }
 function selectBreakpointValue(value, matches) {
@@ -5992,9 +5969,8 @@ import { isUndefined as isUndefined3 } from "lodash-es";
 
 // src/molecules/Element/Element.tsx
 import React from "react";
-var Element = (_a) => {
-  var _b = _a, { component } = _b, rest = __objRest(_b, ["component"]);
-  const Component = component != null ? component : "div";
+var Element = ({ component, ...rest }) => {
+  const Component = component ?? "div";
   return React.createElement(Component, rest);
 };
 
@@ -6036,99 +6012,57 @@ var createSimpleComponent = (Component, defaultProps, displayName) => {
   const Curried = (props) => {
     const propsClassName = hasClassName(props) ? props.className : "";
     const className = defaultClassName || propsClassName ? classNames(defaultClassName, propsClassName) : void 0;
-    return /* @__PURE__ */ React2.createElement(Component, __spreadProps(__spreadValues(__spreadValues({}, defaultProps), props), { className }));
+    return /* @__PURE__ */ React2.createElement(Component, { ...defaultProps, ...props, className });
   };
   Curried.displayName = displayName;
   return Curried;
 };
 
 // src/molecules/Box/Box.tsx
-var Box = (_a) => {
-  var _b = _a, {
-    style,
-    color,
-    borderColor,
-    borderRadius,
-    borderWidth,
-    justifyContent,
-    justifySelf,
-    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,
-    className
-  } = _b, rest = __objRest(_b, [
-    "style",
-    "color",
-    "borderColor",
-    "borderRadius",
-    "borderWidth",
-    "justifyContent",
-    "justifySelf",
-    "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",
-    "className"
-  ]);
+var Box = ({
+  style,
+  color,
+  borderColor,
+  borderRadius,
+  borderWidth,
+  justifyContent,
+  justifySelf,
+  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,
+  className,
+  ...rest
+}) => {
   const styles = useStyle({
     padding,
     display,
@@ -6164,19 +6098,20 @@ var Box = (_a) => {
     rowGap
   });
   const finalClassname = classNames2(className, {
-    [`border-${borderColor != null ? borderColor : ""}`]: Boolean(borderColor),
-    [`text-${color != null ? color : ""}`]: Boolean(color),
-    [`bg-${backgroundColor != null ? backgroundColor : ""}`]: Boolean(backgroundColor)
+    [`border-${borderColor ?? ""}`]: Boolean(borderColor),
+    [`text-${color ?? ""}`]: Boolean(color),
+    [`bg-${backgroundColor ?? ""}`]: Boolean(backgroundColor)
   });
   return /* @__PURE__ */ React3.createElement(
     Element,
-    __spreadValues({
-      style: __spreadValues(__spreadValues({}, styles), style),
-      className: finalClassname !== "" ? finalClassname : void 0
-    }, rest)
+    {
+      style: { ...styles, ...style },
+      className: finalClassname !== "" ? finalClassname : void 0,
+      ...rest
+    }
   );
 };
-var FlexBox = (props) => /* @__PURE__ */ React3.createElement(Box, __spreadValues({ display: "flex" }, props));
+var FlexBox = (props) => /* @__PURE__ */ React3.createElement(Box, { display: "flex", ...props });
 FlexBox.displayName = "Box.Flex";
 Box.Flex = FlexBox;
 var BorderBox = createSimpleComponent(Box, { className: "rounded border", borderColor: "muted" }, "BorderBox");
@@ -6188,47 +6123,40 @@ import { animated, useTransition } from "@react-spring/web";
 // src/atoms/Toast/Toast.tsx
 import React6 from "react";
 import classNames3 from "classnames";
-var Toast = (_a) => {
-  var _b = _a, {
-    children,
-    className,
-    variant
-  } = _b, rest = __objRest(_b, [
-    "children",
-    "className",
-    "variant"
-  ]);
-  return /* @__PURE__ */ React6.createElement(
-    "div",
-    __spreadProps(__spreadValues({}, rest), {
-      className: classNames3(
-        "Aquarium-Toast",
-        tw("typography-small rounded grid grid-cols-[1fr_auto] items-center gap-x-6 gap-y-2 p-4", {
-          "bg-body-intense text-opposite-default": variant === "default",
-          "bg-danger-intense text-white": variant === "danger"
-        }),
-        className
-      )
-    }),
-    children
-  );
-};
-var Dismiss = (_a) => {
-  var _b = _a, { children, className, variant } = _b, rest = __objRest(_b, ["children", "className", "variant"]);
-  return /* @__PURE__ */ React6.createElement(
-    "div",
-    __spreadProps(__spreadValues({}, rest), {
-      className: classNames3(
-        tw("self-start [&>button]:p-0 flex", {
-          "[&>button]:text-muted": variant === "default",
-          "[&>button]:text-danger-muted": variant === "danger"
-        }),
-        className
-      )
-    }),
-    children
-  );
-};
+var Toast = ({
+  children,
+  className,
+  variant,
+  ...rest
+}) => /* @__PURE__ */ React6.createElement(
+  "div",
+  {
+    ...rest,
+    className: classNames3(
+      "Aquarium-Toast",
+      tw("typography-small rounded grid grid-cols-[1fr_auto] items-center gap-x-6 gap-y-2 p-4", {
+        "bg-body-intense text-opposite-default": variant === "default",
+        "bg-danger-intense text-white": variant === "danger"
+      }),
+      className
+    )
+  },
+  children
+);
+var Dismiss = ({ children, className, variant, ...rest }) => /* @__PURE__ */ React6.createElement(
+  "div",
+  {
+    ...rest,
+    className: classNames3(
+      tw("self-start [&>button]:p-0 flex", {
+        "[&>button]:text-muted": variant === "default",
+        "[&>button]:text-danger-muted": variant === "danger"
+      }),
+      className
+    )
+  },
+  children
+);
 Toast.Dismiss = Dismiss;
 
 // src/icons/index.js
@@ -6521,9 +6449,8 @@ var THEME_MAPPING = {
   columnGap: "gap"
 };
 function resolveTailwindThemeValue(key, val) {
-  var _a;
   const resolvedKey = key in THEME_MAPPING ? THEME_MAPPING[key] : key;
-  const found = (_a = get(tailwind_theme_default, [resolvedKey, val], void 0)) != null ? _a : get(tailwind_theme_default, [resolvedKey, ...(val != null ? val : "").toString().split("-")], void 0);
+  const found = get(tailwind_theme_default, [resolvedKey, val], void 0) ?? get(tailwind_theme_default, [resolvedKey, ...(val ?? "").toString().split("-")], void 0);
   if (!isUndefined4(found)) {
     return found;
   }
@@ -6536,77 +6463,54 @@ function useStyle(styles) {
     const isStylesObject = isPlainObject2(property) && "value" in property;
     const value = isStylesObject ? property.value : property;
     const resolvedValue = selectBreakpointValue(value, context2.breakpointMatches);
-    const transformer = isUndefined4(property == null ? void 0 : property.transformer) ? (val) => resolveTailwindThemeValue(key, val) : (val) => resolveTailwindThemeValue(key, property.transformer(val));
+    const transformer = isUndefined4(property?.transformer) ? (val) => resolveTailwindThemeValue(key, val) : (
+      // Even if transformer is set, we pass it through the default transformer
+      // which will resolve possible tailwind theme mapping values
+      (val) => resolveTailwindThemeValue(key, property.transformer(val))
+    );
     const cssPropertyValue = transformer(resolvedValue);
     if (isUndefined4(cssPropertyValue)) {
       return acc;
     }
-    return __spreadProps(__spreadValues({}, acc), {
+    return {
+      ...acc,
       [key]: cssPropertyValue
-    });
+    };
   }, {});
 }
 
 // src/molecules/Tailwindify/Tailwindify.tsx
 function Tailwindify(Component) {
-  return (_a) => {
-    var _b = _a, {
-      className,
-      style,
-      children,
-      padding,
-      paddingX,
-      paddingY,
-      paddingTop,
-      paddingRight,
-      paddingBottom,
-      paddingLeft,
-      margin,
-      marginX,
-      marginY,
-      marginTop,
-      marginRight,
-      marginBottom,
-      marginLeft,
-      space,
-      spaceX,
-      spaceY,
-      backgroundColor,
-      width,
-      height,
-      maxWidth,
-      maxHeight,
-      minWidth,
-      minHeight
-    } = _b, otherProps = __objRest(_b, [
-      "className",
-      "style",
-      "children",
-      "padding",
-      "paddingX",
-      "paddingY",
-      "paddingTop",
-      "paddingRight",
-      "paddingBottom",
-      "paddingLeft",
-      "margin",
-      "marginX",
-      "marginY",
-      "marginTop",
-      "marginRight",
-      "marginBottom",
-      "marginLeft",
-      "space",
-      "spaceX",
-      "spaceY",
-      "backgroundColor",
-      "width",
-      "height",
-      "maxWidth",
-      "maxHeight",
-      "minWidth",
-      "minHeight"
-    ]);
+  return ({
+    className,
+    style,
+    children,
+    padding,
+    paddingX,
+    paddingY,
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft,
+    margin,
+    marginX,
+    marginY,
+    marginTop,
+    marginRight,
+    marginBottom,
+    marginLeft,
+    space,
+    spaceX,
+    spaceY,
+    backgroundColor,
+    width,
+    height,
+    maxWidth,
+    maxHeight,
+    minWidth,
+    minHeight,
+    ...otherProps
+  }) => {
     const tailwindifyStyle = useStyle({
       padding,
       paddingTop: isUndefined5(paddingY) ? paddingTop : paddingY,
@@ -6626,10 +6530,15 @@ function Tailwindify(Component) {
       minWidth,
       minHeight
     });
-    const finalStyle = __spreadValues(__spreadValues({}, tailwindifyStyle), style);
-    const componentProps = __spreadProps(__spreadValues({}, otherProps), {
+    const finalStyle = {
+      ...tailwindifyStyle,
+      ...style
+    };
+    const componentProps = {
+      // Casting to skip TS error https://github.com/microsoft/TypeScript/issues/35858
+      ...otherProps,
       style: finalStyle
-    });
+    };
     const childrenWithProps = React10.Children.map(children, (child, index) => {
       if (!React10.isValidElement(child)) {
         return child;
@@ -6651,10 +6560,10 @@ function Tailwindify(Component) {
         return child;
       }
       const childStyle = get2(child, ["props", "style"], {});
-      const newProps = __spreadProps(__spreadValues({}, childProps), { style: __spreadValues(__spreadValues({}, childStyle), additionalStyle) });
+      const newProps = { ...childProps, style: { ...childStyle, ...additionalStyle } };
       return React10.cloneElement(child, newProps);
     });
-    return /* @__PURE__ */ React10.createElement(Component, __spreadValues({ className }, componentProps), childrenWithProps);
+    return /* @__PURE__ */ React10.createElement(Component, { className, ...componentProps }, childrenWithProps);
   };
 }
 
@@ -6687,7 +6596,7 @@ var Flexbox = Tailwindify(
       rowGap
     });
     const HtmlElement = htmlTag;
-    return /* @__PURE__ */ React11.createElement(HtmlElement, { style: __spreadValues(__spreadValues({}, hookStyle), style), className }, children);
+    return /* @__PURE__ */ React11.createElement(HtmlElement, { style: { ...hookStyle, ...style }, className }, children);
   }
 );
 
@@ -6697,15 +6606,13 @@ import {
   Icon as IconifyIconComponent,
   InlineIcon as IconifyInlineIconComponent
 } from "@iconify/react";
-var Icon = React12.forwardRef((_a, ref) => {
-  var _b = _a, { color, className } = _b, rest = __objRest(_b, ["color", "className"]);
+var Icon = React12.forwardRef(({ color, className, ...rest }, ref) => {
   const classes2 = classNames("Aquarium-Icon", className, color && `text-${String(color)}`);
-  return /* @__PURE__ */ React12.createElement(IconifyIconComponent, __spreadValues({ ref: ref != null ? ref : void 0, className: classes2 !== "" ? classes2 : void 0 }, rest));
+  return /* @__PURE__ */ React12.createElement(IconifyIconComponent, { ref: ref ?? void 0, className: classes2 !== "" ? classes2 : void 0, ...rest });
 });
-var InlineIcon = React12.forwardRef((_a, ref) => {
-  var _b = _a, { color, className } = _b, rest = __objRest(_b, ["color", "className"]);
+var InlineIcon = React12.forwardRef(({ color, className, ...rest }, ref) => {
   const classes2 = classNames("Aquarium-InlineIcon", color && `text-${String(color)}`);
-  return /* @__PURE__ */ React12.createElement("span", { className: classNames(tw("children:inline-block inline-flex justify-center items-center"), className) }, /* @__PURE__ */ React12.createElement(IconifyInlineIconComponent, __spreadValues({ ref: ref != null ? ref : void 0, className: classes2 !== "" ? classes2 : void 0 }, rest)));
+  return /* @__PURE__ */ React12.createElement("span", { className: classNames(tw("children:inline-block inline-flex justify-center items-center"), className) }, /* @__PURE__ */ React12.createElement(IconifyInlineIconComponent, { ref: ref ?? void 0, className: classes2 !== "" ? classes2 : void 0, ...rest }));
 });
 
 // src/molecules/Tooltip/Tooltip.tsx
@@ -6834,14 +6741,12 @@ function useTooltipTriggerState(props = {}) {
 }
 
 // src/molecules/Tooltip/Tooltip.tsx
-var Tooltip = (_a) => {
-  var _b = _a, { inline = true, delay = 200 } = _b, props = __objRest(_b, ["inline", "delay"]);
-  var _a2;
+var Tooltip = ({ inline = true, delay = 200, ...props }) => {
   const { placement: _placement = "top", content, disabled: isDisabled, shouldFlip = true } = props;
-  const display = (_a2 = props.display) != null ? _a2 : inline ? "inline-block" : "block";
+  const display = props.display ?? (inline ? "inline-block" : "block");
   const triggerRef = React13.useRef(null);
   const overlayRef = React13.useRef(null);
-  const state = useTooltipTriggerState(__spreadValues({ isDisabled, delay }, props));
+  const state = useTooltipTriggerState({ isDisabled, delay, ...props });
   const { triggerProps, tooltipProps } = useTooltipTrigger(props, state, triggerRef);
   const { overlayProps, arrowProps, placement } = useOverlayPosition({
     placement: _placement.replace("-", " "),
@@ -6855,44 +6760,37 @@ var Tooltip = (_a) => {
     onFocusWithinChange: (isFocusWithin) => isFocusWithin ? state.open() : state.close()
   });
   const handleClick = (e) => {
-    var _a3, _b2;
-    (_a3 = props.onClick) == null ? void 0 : _a3.call(props, e);
-    (_b2 = triggerProps.onClick) == null ? void 0 : _b2.call(triggerProps, e);
+    props.onClick?.(e);
+    triggerProps.onClick?.(e);
   };
   const handleMouseDown = (e) => {
-    var _a3, _b2;
-    (_a3 = props.onMouseDown) == null ? void 0 : _a3.call(props, e);
-    (_b2 = triggerProps.onMouseDown) == null ? void 0 : _b2.call(triggerProps, e);
+    props.onMouseDown?.(e);
+    triggerProps.onMouseDown?.(e);
   };
   const handleMouseUp = (e) => {
-    var _a3, _b2;
-    (_a3 = props.onMouseUp) == null ? void 0 : _a3.call(props, e);
-    (_b2 = triggerProps.onMouseUp) == null ? void 0 : _b2.call(triggerProps, e);
+    props.onMouseUp?.(e);
+    triggerProps.onMouseUp?.(e);
   };
   const handlePointerDown = (e) => {
-    var _a3, _b2;
-    (_a3 = props.onPointerDown) == null ? void 0 : _a3.call(props, e);
-    (_b2 = triggerProps.onPointerDown) == null ? void 0 : _b2.call(triggerProps, e);
+    props.onPointerDown?.(e);
+    triggerProps.onPointerDown?.(e);
   };
   const handlePointerUp = (e) => {
-    var _a3, _b2;
-    (_a3 = props.onPointerUp) == null ? void 0 : _a3.call(props, e);
-    (_b2 = triggerProps.onPointerUp) == null ? void 0 : _b2.call(triggerProps, e);
+    props.onPointerUp?.(e);
+    triggerProps.onPointerUp?.(e);
   };
   return /* @__PURE__ */ React13.createElement(
     "div",
-    __spreadProps(__spreadValues({
-      className: display
-    }, triggerProps), {
+    {
+      className: display,
+      ...triggerProps,
       onFocus: (e) => {
-        var _a3, _b2;
-        (_a3 = triggerProps.onFocus) == null ? void 0 : _a3.call(triggerProps, e);
-        (_b2 = focusWithinProps.onFocus) == null ? void 0 : _b2.call(focusWithinProps, e);
+        triggerProps.onFocus?.(e);
+        focusWithinProps.onFocus?.(e);
       },
       onBlur: (e) => {
-        var _a3, _b2;
-        (_a3 = triggerProps.onBlur) == null ? void 0 : _a3.call(triggerProps, e);
-        (_b2 = focusWithinProps.onBlur) == null ? void 0 : _b2.call(focusWithinProps, e);
+        triggerProps.onBlur?.(e);
+        focusWithinProps.onBlur?.(e);
       },
       onClick: handleClick,
       onMouseDown: handleMouseDown,
@@ -6900,39 +6798,39 @@ var Tooltip = (_a) => {
       onPointerDown: handlePointerDown,
       onPointerUp: handlePointerUp,
       ref: triggerRef
-    }),
+    },
     props.children,
     state.isOpen && /* @__PURE__ */ React13.createElement(
       TooltipWrapper,
-      __spreadValues({
+      {
         ref: overlayRef,
         state,
         placement,
-        arrowProps
-      }, mergeProps(tooltipProps, overlayProps)),
+        arrowProps,
+        ...mergeProps(tooltipProps, overlayProps)
+      },
       content
     )
   );
 };
 var TooltipWrapper = React13.forwardRef(
-  (_a, forwardedRef) => {
-    var _b = _a, { state, placement, arrowProps } = _b, props = __objRest(_b, ["state", "placement", "arrowProps"]);
-    var _a2;
+  ({ state, placement, arrowProps, ...props }, forwardedRef) => {
     const ref = React13.useRef(null);
     React13.useImperativeHandle(forwardedRef, () => ref.current);
     const { tooltipProps } = useTooltip(props, state);
-    const arrowStyle = getArrowStyle(ref.current, placement, (_a2 = arrowProps.style) != null ? _a2 : {});
+    const arrowStyle = getArrowStyle(ref.current, placement, arrowProps.style ?? {});
     return /* @__PURE__ */ React13.createElement(OverlayContainer, null, /* @__PURE__ */ React13.createElement(
       "div",
-      __spreadValues({
+      {
         ref,
         className: classNames(
           "Aquarium-Tooltip",
           tw("p-3 rounded-sm typography-caption max-w-[320px] bg-body-intense text-opposite-default")
-        )
-      }, mergeProps(props, tooltipProps)),
+        ),
+        ...mergeProps(props, tooltipProps)
+      },
       props.children,
-      /* @__PURE__ */ React13.createElement(Arrow, __spreadProps(__spreadValues({}, arrowProps), { style: arrowStyle }))
+      /* @__PURE__ */ React13.createElement(Arrow, { ...arrowProps, style: arrowStyle })
     ));
   }
 );
@@ -6953,22 +6851,22 @@ var getArrowStyle = (element, position, { left, top }) => {
   };
   switch (position) {
     case "top": {
-      return { left: Math.min(limits.right, Math.max((left != null ? left : 0) - ARROW_SIZE, limits.left)), bottom: -ARROW_SIZE };
+      return { left: Math.min(limits.right, Math.max((left ?? 0) - ARROW_SIZE, limits.left)), bottom: -ARROW_SIZE };
     }
     case "bottom": {
-      return { left: Math.min(limits.right, Math.max((left != null ? left : 0) - ARROW_SIZE, limits.left)), top: -ARROW_SIZE };
+      return { left: Math.min(limits.right, Math.max((left ?? 0) - ARROW_SIZE, limits.left)), top: -ARROW_SIZE };
     }
     case "left": {
-      return { right: -ARROW_SIZE, top: Math.min(limits.bottom, Math.max((top != null ? top : 0) - ARROW_SIZE, limits.top)) };
+      return { right: -ARROW_SIZE, top: Math.min(limits.bottom, Math.max((top ?? 0) - ARROW_SIZE, limits.top)) };
     }
     case "right": {
-      return { left: -ARROW_SIZE, top: Math.min(limits.bottom, Math.max((top != null ? top : 0) - ARROW_SIZE, limits.top)) };
+      return { left: -ARROW_SIZE, top: Math.min(limits.bottom, Math.max((top ?? 0) - ARROW_SIZE, limits.top)) };
     }
   }
   return { left, top };
 };
 var Arrow = (props) => {
-  return /* @__PURE__ */ React13.createElement("div", __spreadValues({ className: tw("absolute w-3 h-3 bg-body-intense rotate-45") }, props));
+  return /* @__PURE__ */ React13.createElement("div", { className: tw("absolute w-3 h-3 bg-body-intense rotate-45"), ...props });
 };
 
 // src/utils/constants.ts
@@ -7008,34 +6906,21 @@ var LoadingSpinner = ({ size = "20px" }) => {
 };
 var asButton = (Component, isDropdownButton) => {
   return React14.forwardRef(
-    (_a, ref) => {
-      var _b = _a, {
-        kind = "primary",
-        icon,
-        iconPlacement = "left",
-        tooltip,
-        tooltipPlacement,
-        disabled,
-        loading: loading2 = false,
-        fullWidth = false,
-        dense = false,
-        UNSAFE_className,
-        "aria-label": ariaLabel,
-        children
-      } = _b, props = __objRest(_b, [
-        "kind",
-        "icon",
-        "iconPlacement",
-        "tooltip",
-        "tooltipPlacement",
-        "disabled",
-        "loading",
-        "fullWidth",
-        "dense",
-        "UNSAFE_className",
-        "aria-label",
-        "children"
-      ]);
+    ({
+      kind = "primary",
+      icon,
+      iconPlacement = "left",
+      tooltip,
+      tooltipPlacement,
+      disabled,
+      loading: loading2 = false,
+      fullWidth = false,
+      dense = false,
+      UNSAFE_className,
+      "aria-label": ariaLabel,
+      children,
+      ...props
+    }, ref) => {
       const hasChildren = React14.Children.count(children) > 0;
       const isIconOnlyButton = !hasChildren && !!icon;
       const isGhost = !isIconOnlyButton && (kind === "ghost" || kind === "secondary-ghost");
@@ -7076,9 +6961,9 @@ var asButton = (Component, isDropdownButton) => {
       };
       const buttonComponent = /* @__PURE__ */ React14.createElement(
         Component,
-        __spreadProps(__spreadValues({
-          ref
-        }, props), {
+        {
+          ref,
+          ...props,
           className: classNames(
             "Aquarium-Button",
             {
@@ -7089,6 +6974,7 @@ var asButton = (Component, isDropdownButton) => {
             },
             UNSAFE_className,
             !isIconOnlyButton && COLOR_CLASSNAMES[kind],
+            // adding inline-block here for the case of using it with anchor tag
             tw(
               "inline-block border-0 rounded-sm transition whitespace-nowrap focus:outline-none relative text-center",
               {
@@ -7102,12 +6988,13 @@ var asButton = (Component, isDropdownButton) => {
                 "block w-full": fullWidth && !isIconOnlyButton,
                 "cursor-not-allowed": !!disabled || !!loading2,
                 "icon-stroke-2": !isIconOnlyButton
+                // the main reason we changed icon stroke-width to 2px on buttons which have both text + icon together inside because the font sizes we use currently are big and bold (for both default and dense sizes), so the discrepancy was too big. And that's why we use default stroke-width for icon only button.
               }
             )
           ),
-          "aria-label": isIconOnlyButton ? ariaLabel != null ? ariaLabel : tooltip : ariaLabel,
+          "aria-label": isIconOnlyButton ? ariaLabel ?? tooltip : ariaLabel,
           disabled: disabled || loading2
-        }),
+        },
         loading2 && !isGhost ? /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement("div", { className: tw("absolute left-1/2 top-0 bottom-0 flex"), style: { transform: "translate(-50%)" } }, /* @__PURE__ */ React14.createElement(LoadingSpinner, { size: iconSize })), /* @__PURE__ */ React14.createElement("div", { className: tw({ invisible: loading2 }) }, buttonContent())) : buttonContent()
       );
       return tooltip ? /* @__PURE__ */ React14.createElement(Tooltip, { content: tooltip, placement: tooltipPlacement }, buttonComponent) : buttonComponent;
@@ -7116,40 +7003,40 @@ var asButton = (Component, isDropdownButton) => {
 };
 var Button = asButton("button");
 Button.displayName = "Button";
-var PrimaryButton = React14.forwardRef((props, ref) => /* @__PURE__ */ React14.createElement(Button, __spreadProps(__spreadValues({ ref }, props), { kind: "primary" })));
+var PrimaryButton = React14.forwardRef((props, ref) => /* @__PURE__ */ React14.createElement(Button, { ref, ...props, kind: "primary" }));
 PrimaryButton.displayName = "Button.Primary";
 Button.Primary = PrimaryButton;
-var SecondaryButton = React14.forwardRef((props, ref) => /* @__PURE__ */ React14.createElement(Button, __spreadProps(__spreadValues({ ref }, props), { kind: "secondary" })));
+var SecondaryButton = React14.forwardRef((props, ref) => /* @__PURE__ */ React14.createElement(Button, { ref, ...props, kind: "secondary" }));
 SecondaryButton.displayName = "Button.Secondary";
 Button.Secondary = SecondaryButton;
-var GhostButton = React14.forwardRef((props, ref) => /* @__PURE__ */ React14.createElement(Button, __spreadProps(__spreadValues({ ref }, props), { kind: "ghost" })));
+var GhostButton = React14.forwardRef((props, ref) => /* @__PURE__ */ React14.createElement(Button, { ref, ...props, kind: "ghost" }));
 GhostButton.displayName = "Button.Ghost";
 Button.Ghost = GhostButton;
-var SecondaryGhostButton = React14.forwardRef((props, ref) => /* @__PURE__ */ React14.createElement(Button, __spreadProps(__spreadValues({ ref }, props), { kind: "secondary-ghost" })));
+var SecondaryGhostButton = React14.forwardRef((props, ref) => /* @__PURE__ */ React14.createElement(Button, { ref, ...props, kind: "secondary-ghost" }));
 SecondaryGhostButton.displayName = "Button.SecondaryGhost";
 Button.SecondaryGhost = SecondaryGhostButton;
-var TextButton = React14.forwardRef((props, ref) => /* @__PURE__ */ React14.createElement(Button, __spreadProps(__spreadValues({ ref }, props), { kind: "text" })));
+var TextButton = React14.forwardRef((props, ref) => /* @__PURE__ */ React14.createElement(Button, { ref, ...props, kind: "text" }));
 TextButton.displayName = "Button.Text";
 Button.Text = TextButton;
-var IconButton = React14.forwardRef((props, ref) => /* @__PURE__ */ React14.createElement(Button, __spreadProps(__spreadValues({ ref }, props), { kind: "ghost", loading: false, fullWidth: false })));
+var IconButton = React14.forwardRef((props, ref) => /* @__PURE__ */ React14.createElement(Button, { ref, ...props, kind: "ghost", loading: false, fullWidth: false }));
 IconButton.displayName = "Button.Icon";
 Button.Icon = IconButton;
 var ExternalLinkButton = asButton("a");
 ExternalLinkButton.displayName = "Button.ExternalLink";
 Button.ExternalLink = ExternalLinkButton;
-var IconExternalLinkButton = React14.forwardRef((props, ref) => /* @__PURE__ */ React14.createElement(ExternalLinkButton, __spreadProps(__spreadValues({ ref }, props), { kind: "ghost", loading: false, fullWidth: false })));
+var IconExternalLinkButton = React14.forwardRef((props, ref) => /* @__PURE__ */ React14.createElement(ExternalLinkButton, { ref, ...props, kind: "ghost", loading: false, fullWidth: false }));
 IconExternalLinkButton.displayName = "Button.IconExternalLink";
 Button.IconExternalLink = IconExternalLinkButton;
 var DropdownButton = asButton("button", true);
 DropdownButton.displayName = "Button.Dropdown";
 Button.Dropdown = DropdownButton;
-var PrimaryDropdownButton = React14.forwardRef((props, ref) => /* @__PURE__ */ React14.createElement(DropdownButton, __spreadProps(__spreadValues({ ref }, props), { kind: "primary" })));
+var PrimaryDropdownButton = React14.forwardRef((props, ref) => /* @__PURE__ */ React14.createElement(DropdownButton, { ref, ...props, kind: "primary" }));
 PrimaryDropdownButton.displayName = "Button.PrimaryDropdown";
 Button.PrimaryDropdown = PrimaryDropdownButton;
-var SecondaryDropdownButton = React14.forwardRef((props, ref) => /* @__PURE__ */ React14.createElement(DropdownButton, __spreadProps(__spreadValues({ ref }, props), { kind: "secondary" })));
+var SecondaryDropdownButton = React14.forwardRef((props, ref) => /* @__PURE__ */ React14.createElement(DropdownButton, { ref, ...props, kind: "secondary" }));
 SecondaryDropdownButton.displayName = "Button.SecondaryDropdown";
 Button.SecondaryDropdown = SecondaryDropdownButton;
-var GhostDropdownButton = React14.forwardRef((props, ref) => /* @__PURE__ */ React14.createElement(DropdownButton, __spreadProps(__spreadValues({ ref }, props), { kind: "ghost" })));
+var GhostDropdownButton = React14.forwardRef((props, ref) => /* @__PURE__ */ React14.createElement(DropdownButton, { ref, ...props, kind: "ghost" }));
 GhostDropdownButton.displayName = "Button.GhostDropdownButton";
 Button.GhostDropdown = GhostDropdownButton;
 
@@ -7157,31 +7044,25 @@ Button.GhostDropdown = GhostDropdownButton;
 import React15 from "react";
 import { isUndefined as isUndefined6 } from "lodash-es";
 var typographies = Object.fromEntries(Object.keys(tokens_default.typography).map((key) => [key, `typography-${key}`]));
-var Typography = (_a) => {
-  var _b = _a, {
-    children,
-    variant = "default",
-    color,
-    htmlTag = "div",
-    className,
-    fontWeight
-  } = _b, rest = __objRest(_b, [
-    "children",
-    "variant",
-    "color",
-    "htmlTag",
-    "className",
-    "fontWeight"
-  ]);
+var Typography = ({
+  children,
+  variant = "default",
+  color,
+  htmlTag = "div",
+  className,
+  fontWeight,
+  ...rest
+}) => {
   const HtmlElement = htmlTag;
   const resolvedColorName = isUndefined6(color) || color === "current" ? "default" : color;
   const style = useStyle({ fontWeight });
   return /* @__PURE__ */ React15.createElement(
     HtmlElement,
-    __spreadValues({
+    {
       className: classNames(typographies[variant], `text-${resolvedColorName.toString()}`, className),
-      style
-    }, rest),
+      style,
+      ...rest
+    },
     children
   );
 };
@@ -7215,104 +7096,73 @@ var alertTypes = {
     color: "success-default"
   }
 };
-var Alert = (_a) => {
-  var _b = _a, {
-    children,
-    className,
-    type,
-    dense
-  } = _b, rest = __objRest(_b, [
-    "children",
-    "className",
-    "type",
-    "dense"
-  ]);
-  return /* @__PURE__ */ React16.createElement(
-    "div",
-    __spreadProps(__spreadValues({}, rest), {
-      role: type === "error" || type === "warning" ? "alert" : "status",
-      className: classNames(
-        tw("rounded grid grid-cols-[auto_1fr_auto] items-center gap-x-3 gap-y-2", {
-          "bg-status-danger": type === "error",
-          "bg-status-info": type === "information",
-          "bg-status-success": type === "success",
-          "bg-status-warning": type === "warning",
-          "bg-status-announcement": type === "announcement",
-          "p-4": Boolean(dense),
-          "p-5": !dense
-        }),
-        className
-      )
-    }),
-    children
-  );
-};
-Alert.Title = (_a) => {
-  var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React16.createElement(Typography, __spreadProps(__spreadValues({}, rest), { variant: "default-strong", color: "intense", className: classNames(tw("col-start-2"), className) }), children);
-};
-Alert.Description = (_a) => {
-  var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React16.createElement(Typography, __spreadProps(__spreadValues({}, rest), { variant: "small", color: "default", className: classNames(tw("col-start-2"), className) }), children);
-};
-Alert.Actions = (_a) => {
-  var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React16.createElement("div", __spreadProps(__spreadValues({}, rest), { className: classNames(tw("flex gap-4 col-start-2"), className) }), children);
-};
-Alert.Icon = (_a) => {
-  var _b = _a, { type, dense } = _b, rest = __objRest(_b, ["type", "dense"]);
-  return /* @__PURE__ */ React16.createElement("div", { className: tw("h-[20px] col-start-1 row-start-1", { "self-start": !dense }) }, /* @__PURE__ */ React16.createElement(Icon, __spreadProps(__spreadValues({}, rest), { icon: alertTypes[type].icon, color: alertTypes[type].color, fontSize: 20 })));
-};
-Alert.Dismiss = (_a) => {
-  var _b = _a, { type } = _b, rest = __objRest(_b, ["type"]);
-  return /* @__PURE__ */ React16.createElement("div", { className: tw("h-[20px] col-start-3 row-start-1") }, /* @__PURE__ */ React16.createElement(Button.Icon, __spreadProps(__spreadValues({}, rest), { UNSAFE_className: tw("-m-2"), tooltip: "Dismiss", icon: import_cross2.default })));
-};
-var Banner = (_a) => {
-  var _b = _a, {
-    children,
-    className,
-    type
-  } = _b, rest = __objRest(_b, [
-    "children",
-    "className",
-    "type"
-  ]);
-  return /* @__PURE__ */ React16.createElement(
-    "div",
-    __spreadProps(__spreadValues({}, rest), {
-      role: type === "error" || type === "warning" ? "alert" : "status",
-      className: classNames(
-        tw("relative flex px-[60px] justify-center", {
-          "bg-status-danger": type === "error",
-          "bg-status-announcement": type === "information",
-          "bg-status-success": type === "success",
-          "bg-status-warning": type === "warning"
-        }),
-        className
-      )
-    }),
-    children
-  );
-};
+var Alert = ({
+  children,
+  className,
+  type,
+  dense,
+  ...rest
+}) => /* @__PURE__ */ React16.createElement(
+  "div",
+  {
+    ...rest,
+    role: type === "error" || type === "warning" ? "alert" : "status",
+    className: classNames(
+      tw("rounded grid grid-cols-[auto_1fr_auto] items-center gap-x-3 gap-y-2", {
+        "bg-status-danger": type === "error",
+        "bg-status-info": type === "information",
+        "bg-status-success": type === "success",
+        "bg-status-warning": type === "warning",
+        "bg-status-announcement": type === "announcement",
+        "p-4": Boolean(dense),
+        "p-5": !dense
+      }),
+      className
+    )
+  },
+  children
+);
+Alert.Title = ({ children, className, ...rest }) => /* @__PURE__ */ React16.createElement(Typography, { ...rest, variant: "default-strong", color: "intense", className: classNames(tw("col-start-2"), className) }, children);
+Alert.Description = ({ children, className, ...rest }) => /* @__PURE__ */ React16.createElement(Typography, { ...rest, variant: "small", color: "default", className: classNames(tw("col-start-2"), className) }, children);
+Alert.Actions = ({ children, className, ...rest }) => /* @__PURE__ */ React16.createElement("div", { ...rest, className: classNames(tw("flex gap-4 col-start-2"), className) }, children);
+Alert.Icon = ({ type, dense, ...rest }) => /* @__PURE__ */ React16.createElement("div", { className: tw("h-[20px] col-start-1 row-start-1", { "self-start": !dense }) }, /* @__PURE__ */ React16.createElement(Icon, { ...rest, icon: alertTypes[type].icon, color: alertTypes[type].color, fontSize: 20 }));
+Alert.Dismiss = ({ type, ...rest }) => /* @__PURE__ */ React16.createElement("div", { className: tw("h-[20px] col-start-3 row-start-1") }, /* @__PURE__ */ React16.createElement(Button.Icon, { ...rest, UNSAFE_className: tw("-m-2"), tooltip: "Dismiss", icon: import_cross2.default }));
+var Banner = ({
+  children,
+  className,
+  type,
+  ...rest
+}) => /* @__PURE__ */ React16.createElement(
+  "div",
+  {
+    ...rest,
+    role: type === "error" || type === "warning" ? "alert" : "status",
+    className: classNames(
+      tw("relative flex px-[60px] justify-center", {
+        "bg-status-danger": type === "error",
+        "bg-status-announcement": type === "information",
+        "bg-status-success": type === "success",
+        "bg-status-warning": type === "warning"
+      }),
+      className
+    )
+  },
+  children
+);
 Alert.Banner = Banner;
 Alert.Banner.displayName = "Alert.Banner";
-Banner.Content = (_a) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React16.createElement(
-    "div",
-    __spreadValues({
-      className: classNames(
-        tw("flex flex-row flex-wrap gap-x-3 items-center justify-center py-4 text-center z-10"),
-        className
-      )
-    }, props)
-  );
-};
+Banner.Content = ({ className, ...props }) => /* @__PURE__ */ React16.createElement(
+  "div",
+  {
+    className: classNames(
+      tw("flex flex-row flex-wrap gap-x-3 items-center justify-center py-4 text-center z-10"),
+      className
+    ),
+    ...props
+  }
+);
 Banner.Content.displayName = "Alert.Banner.Content";
-Banner.Dismiss = (_a) => {
-  var _b = _a, { type } = _b, rest = __objRest(_b, ["type"]);
-  return /* @__PURE__ */ React16.createElement("div", { className: tw("h-[20px] absolute right-4 top-[18px]") }, /* @__PURE__ */ React16.createElement(Button.Icon, __spreadProps(__spreadValues({}, rest), { UNSAFE_className: tw("-m-2"), tooltip: "Dismiss", icon: import_cross2.default })));
-};
+Banner.Dismiss = ({ type, ...rest }) => /* @__PURE__ */ React16.createElement("div", { className: tw("h-[20px] absolute right-4 top-[18px]") }, /* @__PURE__ */ React16.createElement(Button.Icon, { ...rest, UNSAFE_className: tw("-m-2"), tooltip: "Dismiss", icon: import_cross2.default }));
 Banner.Dismiss.displayName = "Alert.Banner.Dismiss";
 var ILLUSTRATION_COLORS = {
   information: { stroke: tw("stroke-primary-muted"), fill: tw("fill-primary-10") },
@@ -7320,10 +7170,9 @@ var ILLUSTRATION_COLORS = {
   warning: { stroke: tw("stroke-warning-100"), fill: tw("fill-warning-20") },
   error: { stroke: tw("stroke-error-100"), fill: tw("fill-error-10") }
 };
-var IllustrationLeft = (_a) => {
-  var _b = _a, { type } = _b, props = __objRest(_b, ["type"]);
+var IllustrationLeft = ({ type, ...props }) => {
   const clipPathId = useId();
-  return /* @__PURE__ */ React16.createElement("svg", __spreadValues({ xmlns: "http://www.w3.org/2000/svg", width: 120, height: 48, fill: "none" }, props), /* @__PURE__ */ React16.createElement("g", { clipPath: `url(#${clipPathId})` }, /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React16.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 120, height: 48, fill: "none", ...props }, /* @__PURE__ */ React16.createElement("g", { clipPath: `url(#${clipPathId})` }, /* @__PURE__ */ React16.createElement(
     "path",
     {
       className: ILLUSTRATION_COLORS[type].fill,
@@ -7340,10 +7189,9 @@ var IllustrationLeft = (_a) => {
 };
 Banner.IllustrationLeft = IllustrationLeft;
 Banner.IllustrationLeft.displayName = "Alert.Banner.IllustrationLeft";
-var IllustrationRight = (_a) => {
-  var _b = _a, { type } = _b, props = __objRest(_b, ["type"]);
+var IllustrationRight = ({ type, ...props }) => {
   const clipPathId = useId();
-  return /* @__PURE__ */ React16.createElement("svg", __spreadValues({ xmlns: "http://www.w3.org/2000/svg", width: 120, height: 48, fill: "none" }, props), /* @__PURE__ */ React16.createElement("g", { clipPath: `url(#${clipPathId})` }, /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React16.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 120, height: 48, fill: "none", ...props }, /* @__PURE__ */ React16.createElement("g", { clipPath: `url(#${clipPathId})` }, /* @__PURE__ */ React16.createElement(
     "path",
     {
       className: ILLUSTRATION_COLORS[type].fill,
@@ -7363,91 +7211,70 @@ Banner.IllustrationRight.displayName = "Alert.Banner.IllustrationRight";
 
 // src/atoms/Banner/Banner.tsx
 import React17 from "react";
-var Banner2 = (_a) => {
-  var _b = _a, {
-    children,
-    className,
-    layout,
-    variant
-  } = _b, rest = __objRest(_b, [
-    "children",
-    "className",
-    "layout",
-    "variant"
-  ]);
-  return /* @__PURE__ */ React17.createElement(
-    "div",
-    __spreadProps(__spreadValues({}, rest), {
-      className: classNames(
-        className,
-        tw(`rounded flex justify-between gap-7 flex-nowrap p-6`, {
-          "items-center": layout === "horizontal",
-          "bg-muted": variant === "default",
-          "bg-body border border-muted": variant === "outlined"
-        })
-      )
-    }),
-    children
-  );
-};
-Banner2.Title = (_a) => {
-  var _b = _a, { children, className, layout } = _b, rest = __objRest(_b, ["children", "className", "layout"]);
-  return /* @__PURE__ */ React17.createElement(
-    Typography,
-    __spreadProps(__spreadValues({}, rest), {
-      variant: "subheading",
-      color: "intense",
-      className: classNames(
-        className,
-        tw({
-          "mb-3": layout === "vertical"
-        })
-      )
-    }),
-    children
-  );
-};
-Banner2.Description = (_a) => {
-  var _b = _a, { flexGrow, children, className } = _b, rest = __objRest(_b, ["flexGrow", "children", "className"]);
-  return /* @__PURE__ */ React17.createElement(Typography, __spreadProps(__spreadValues({}, rest), { variant: "default", className: classNames(className, tw({ "flex-grow": flexGrow })) }), children);
-};
-Banner2.ContentContainer = (_a) => {
-  var _b = _a, { layout, children, className } = _b, rest = __objRest(_b, ["layout", "children", "className"]);
-  return /* @__PURE__ */ React17.createElement(
-    "div",
-    __spreadProps(__spreadValues({}, rest), {
-      className: classNames(
-        className,
-        tw("flex w-full", {
-          "flex-col": layout === "vertical",
-          "flex-row flex-nowrap gap-7 items-center": layout === "horizontal"
-        })
-      )
-    }),
-    children
-  );
-};
-Banner2.ImageContainer = (_a) => {
-  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ React17.createElement(Box, __spreadProps(__spreadValues({}, rest), { display: "inline-flex", alignItems: "center", margin: "-6", marginLeft: "0" }), children);
-};
-Banner2.Actions = (_a) => {
-  var _b = _a, { children, className, layout } = _b, rest = __objRest(_b, ["children", "className", "layout"]);
-  return /* @__PURE__ */ React17.createElement("div", __spreadProps(__spreadValues({}, rest), { className: classNames(className, tw("flex gap-4", { "mt-5": layout === "vertical" })) }), children);
-};
-Banner2.DismissContainer = (_a) => {
-  var _b = _a, { layout, children, className } = _b, rest = __objRest(_b, ["layout", "children", "className"]);
-  return /* @__PURE__ */ React17.createElement(
-    "div",
-    __spreadProps(__spreadValues({}, rest), {
-      className: classNames(
-        className,
-        tw({ "self-start": layout === "vertical", "self-center": layout === "horizontal" })
-      )
-    }),
-    children
-  );
-};
+var Banner2 = ({
+  children,
+  className,
+  layout,
+  variant,
+  ...rest
+}) => /* @__PURE__ */ React17.createElement(
+  "div",
+  {
+    ...rest,
+    className: classNames(
+      className,
+      tw(`rounded flex justify-between gap-7 flex-nowrap p-6`, {
+        "items-center": layout === "horizontal",
+        "bg-muted": variant === "default",
+        "bg-body border border-muted": variant === "outlined"
+      })
+    )
+  },
+  children
+);
+Banner2.Title = ({ children, className, layout, ...rest }) => /* @__PURE__ */ React17.createElement(
+  Typography,
+  {
+    ...rest,
+    variant: "subheading",
+    color: "intense",
+    className: classNames(
+      className,
+      tw({
+        "mb-3": layout === "vertical"
+      })
+    )
+  },
+  children
+);
+Banner2.Description = ({ flexGrow, children, className, ...rest }) => /* @__PURE__ */ React17.createElement(Typography, { ...rest, variant: "default", className: classNames(className, tw({ "flex-grow": flexGrow })) }, children);
+Banner2.ContentContainer = ({ layout, children, className, ...rest }) => /* @__PURE__ */ React17.createElement(
+  "div",
+  {
+    ...rest,
+    className: classNames(
+      className,
+      tw("flex w-full", {
+        "flex-col": layout === "vertical",
+        "flex-row flex-nowrap gap-7 items-center": layout === "horizontal"
+      })
+    )
+  },
+  children
+);
+Banner2.ImageContainer = ({ children, ...rest }) => /* @__PURE__ */ React17.createElement(Box, { ...rest, display: "inline-flex", alignItems: "center", margin: "-6", marginLeft: "0" }, children);
+Banner2.Actions = ({ children, className, layout, ...rest }) => /* @__PURE__ */ React17.createElement("div", { ...rest, className: classNames(className, tw("flex gap-4", { "mt-5": layout === "vertical" })) }, children);
+Banner2.DismissContainer = ({ layout, children, className, ...rest }) => /* @__PURE__ */ React17.createElement(
+  "div",
+  {
+    ...rest,
+    className: classNames(
+      className,
+      tw({ "self-start": layout === "vertical", "self-center": layout === "horizontal" })
+    )
+  },
+  children
+);
 
 // src/atoms/Card/Card.tsx
 import React20 from "react";
@@ -7456,128 +7283,65 @@ import { isNumber } from "lodash-es";
 // src/molecules/Typography/Typography.tsx
 import React18 from "react";
 import classNames4 from "classnames";
-var Typography2 = (props) => /* @__PURE__ */ React18.createElement(Typography, __spreadValues({}, props));
+var Typography2 = (props) => /* @__PURE__ */ React18.createElement(Typography, { ...props });
 Typography2.displayName = "Typography";
-Typography2.LargeHeading = (_a) => {
-  var _b = _a, { htmlTag = "h1" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ React18.createElement(Typography, __spreadProps(__spreadValues({}, props), { htmlTag, variant: "large-heading" }));
-};
+Typography2.LargeHeading = ({ htmlTag = "h1", ...props }) => /* @__PURE__ */ React18.createElement(Typography, { ...props, htmlTag, variant: "large-heading" });
 Typography2.LargeHeading.displayName = "Typography.LargeHeading";
-Typography2.Heading = (_a) => {
-  var _b = _a, { htmlTag = "h1", fontWeight } = _b, props = __objRest(_b, ["htmlTag", "fontWeight"]);
-  return /* @__PURE__ */ React18.createElement(Typography, __spreadProps(__spreadValues({}, props), { htmlTag, variant: "heading" }));
-};
+Typography2.Heading = ({ htmlTag = "h1", fontWeight, ...props }) => /* @__PURE__ */ React18.createElement(Typography, { ...props, htmlTag, variant: "heading" });
 Typography2.Heading.displayName = "Typography.Heading";
-Typography2.Subheading = (_a) => {
-  var _b = _a, { htmlTag = "h2", fontWeight } = _b, props = __objRest(_b, ["htmlTag", "fontWeight"]);
-  return /* @__PURE__ */ React18.createElement(Typography, __spreadProps(__spreadValues({}, props), { htmlTag, variant: "subheading" }));
-};
+Typography2.Subheading = ({ htmlTag = "h2", fontWeight, ...props }) => /* @__PURE__ */ React18.createElement(Typography, { ...props, htmlTag, variant: "subheading" });
 Typography2.Subheading.displayName = "Typography.Subheading";
-Typography2.LargeStrong = (_a) => {
-  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ React18.createElement(Typography, __spreadProps(__spreadValues({}, props), { htmlTag, variant: "large-strong" }));
-};
+Typography2.LargeStrong = ({ htmlTag = "div", ...props }) => /* @__PURE__ */ React18.createElement(Typography, { ...props, htmlTag, variant: "large-strong" });
 Typography2.LargeStrong.displayName = "Typography.LargeStrong";
-Typography2.Large = (_a) => {
-  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ React18.createElement(Typography, __spreadProps(__spreadValues({}, props), { htmlTag, variant: "large" }));
-};
+Typography2.Large = ({ htmlTag = "div", ...props }) => /* @__PURE__ */ React18.createElement(Typography, { ...props, htmlTag, variant: "large" });
 Typography2.Large.displayName = "Typography.Large";
-Typography2.DefaultStrong = (_a) => {
-  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ React18.createElement(Typography, __spreadProps(__spreadValues({}, props), { htmlTag, variant: "default-strong" }));
-};
+Typography2.DefaultStrong = ({ htmlTag = "div", ...props }) => /* @__PURE__ */ React18.createElement(Typography, { ...props, htmlTag, variant: "default-strong" });
 Typography2.DefaultStrong.displayName = "Typography.DefaultStrong";
-Typography2.Default = (_a) => {
-  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ React18.createElement(Typography, __spreadProps(__spreadValues({}, props), { htmlTag, variant: "default" }));
-};
+Typography2.Default = ({ htmlTag = "div", ...props }) => /* @__PURE__ */ React18.createElement(Typography, { ...props, htmlTag, variant: "default" });
 Typography2.Default.displayName = "Typography.Default";
-Typography2.Paragraph = (_a) => {
-  var _b = _a, { htmlTag = "p", fontWeight } = _b, props = __objRest(_b, ["htmlTag", "fontWeight"]);
-  return /* @__PURE__ */ React18.createElement(Typography2.Default, __spreadProps(__spreadValues({}, props), { htmlTag }));
-};
+Typography2.Paragraph = ({ htmlTag = "p", fontWeight, ...props }) => /* @__PURE__ */ React18.createElement(Typography2.Default, { ...props, htmlTag });
 Typography2.P = Typography2.Paragraph;
 Typography2.Paragraph.displayName = "Typography.Paragraph";
-Typography2.Small = (_a) => {
-  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ React18.createElement(Typography, __spreadProps(__spreadValues({}, props), { htmlTag, variant: "small" }));
-};
+Typography2.Small = ({ htmlTag = "div", ...props }) => /* @__PURE__ */ React18.createElement(Typography, { ...props, htmlTag, variant: "small" });
 Typography2.Small.displayName = "Typography.Small";
-Typography2.SmallStrong = (_a) => {
-  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ React18.createElement(Typography, __spreadProps(__spreadValues({}, props), { htmlTag, variant: "small-strong" }));
-};
+Typography2.SmallStrong = ({ htmlTag = "div", ...props }) => /* @__PURE__ */ React18.createElement(Typography, { ...props, htmlTag, variant: "small-strong" });
 Typography2.SmallStrong.displayName = "Typography.SmallStrong";
-Typography2.Strong = (_a) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React18.createElement("strong", __spreadValues({ className: classNames4(tw("font-semibold"), className) }, props));
-};
+Typography2.Strong = ({ className, ...props }) => /* @__PURE__ */ React18.createElement("strong", { className: classNames4(tw("font-semibold"), className), ...props });
 Typography2.Strong.displayName = "Typography.Strong";
-Typography2.Caption = (_a) => {
-  var _b = _a, { htmlTag = "div", fontWeight } = _b, props = __objRest(_b, ["htmlTag", "fontWeight"]);
-  return /* @__PURE__ */ React18.createElement(Typography, __spreadProps(__spreadValues({}, props), { htmlTag, variant: "caption" }));
-};
+Typography2.Caption = ({ htmlTag = "div", fontWeight, ...props }) => /* @__PURE__ */ React18.createElement(Typography, { ...props, htmlTag, variant: "caption" });
 Typography2.Caption.displayName = "Typography.Caption";
-Typography2.Code = (_a) => {
-  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ React18.createElement(Typography, __spreadProps(__spreadValues({}, props), { htmlTag, variant: "code" }));
-};
+Typography2.Code = ({ htmlTag = "div", ...props }) => /* @__PURE__ */ React18.createElement(Typography, { ...props, htmlTag, variant: "code" });
 Typography2.Code.displayName = "Typography.Code";
-Typography2.CodeStrong = (_a) => {
-  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ React18.createElement(Typography, __spreadProps(__spreadValues({}, props), { htmlTag, variant: "code-strong" }));
-};
+Typography2.CodeStrong = ({ htmlTag = "div", ...props }) => /* @__PURE__ */ React18.createElement(Typography, { ...props, htmlTag, variant: "code-strong" });
 Typography2.CodeStrong.displayName = "Typography.CodeStrong";
-Typography2.CodeSmall = (_a) => {
-  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ React18.createElement(Typography, __spreadProps(__spreadValues({}, props), { htmlTag, variant: "code-small" }));
-};
+Typography2.CodeSmall = ({ htmlTag = "div", ...props }) => /* @__PURE__ */ React18.createElement(Typography, { ...props, htmlTag, variant: "code-small" });
 Typography2.CodeSmall.displayName = "Typography.Code";
-Typography2.CodeSmallStrong = (_a) => {
-  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ React18.createElement(Typography, __spreadProps(__spreadValues({}, props), { htmlTag, variant: "code-small-strong" }));
-};
+Typography2.CodeSmallStrong = ({ htmlTag = "div", ...props }) => /* @__PURE__ */ React18.createElement(Typography, { ...props, htmlTag, variant: "code-small-strong" });
 Typography2.CodeSmallStrong.displayName = "Typography.CodeSmallStrong";
-Typography2.LargeText = (_a) => {
-  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ React18.createElement(Typography, __spreadProps(__spreadValues({}, props), { htmlTag, variant: "large-strong" }));
-};
+Typography2.LargeText = ({ htmlTag = "div", ...props }) => /* @__PURE__ */ React18.createElement(Typography, { ...props, htmlTag, variant: "large-strong" });
 Typography2.LargeText.displayName = "Typography.LargeText";
-Typography2.MediumText = (_a) => {
-  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ React18.createElement(Typography, __spreadProps(__spreadValues({}, props), { htmlTag, variant: "default-strong" }));
-};
+Typography2.MediumText = ({ htmlTag = "div", ...props }) => /* @__PURE__ */ React18.createElement(Typography, { ...props, htmlTag, variant: "default-strong" });
 Typography2.MediumText.displayName = "Typography.MediumText";
-Typography2.Text = (_a) => {
-  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ React18.createElement(Typography, __spreadProps(__spreadValues({}, props), { htmlTag, variant: "default" }));
-};
+Typography2.Text = ({ htmlTag = "div", ...props }) => /* @__PURE__ */ React18.createElement(Typography, { ...props, htmlTag, variant: "default" });
 Typography2.Text.displayName = "Typography.Text";
-Typography2.SmallText = (_a) => {
-  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ React18.createElement(Typography, __spreadProps(__spreadValues({}, props), { htmlTag, variant: "small" }));
-};
+Typography2.SmallText = ({ htmlTag = "div", ...props }) => /* @__PURE__ */ React18.createElement(Typography, { ...props, htmlTag, variant: "small" });
 Typography2.SmallText.displayName = "Typography.SmallText";
-Typography2.SmallTextBold = (_a) => {
-  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ React18.createElement(Typography, __spreadProps(__spreadValues({}, props), { htmlTag, variant: "small-strong" }));
-};
+Typography2.SmallTextBold = ({ htmlTag = "div", ...props }) => /* @__PURE__ */ React18.createElement(Typography, { ...props, htmlTag, variant: "small-strong" });
 Typography2.SmallTextBold.displayName = "Typography.SmallTextBold";
 
 // src/atoms/LineClamp/LineClamp.tsx
 import React19 from "react";
 var LineClamp = React19.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { lines = 1, clamped = true, children, className, wordBreak = "break-words" } = _b, props = __objRest(_b, ["lines", "clamped", "children", "className", "wordBreak"]);
+  ({ lines = 1, clamped = true, children, className, wordBreak = "break-words", ...props }, ref) => {
     return /* @__PURE__ */ React19.createElement(
       "div",
-      __spreadValues({
+      {
         ref,
         className: classNames(className, wordBreak === "break-words" ? "break-words" : "break-all", {
           [`line-clamp-${lines}`]: clamped
-        })
-      }, props),
+        }),
+        ...props
+      },
       children
     );
   }
@@ -7595,7 +7359,7 @@ var getCommonCardStyles = ({
   "bg-muted cursor-not-allowed focus:border-transparent opacity-50": disabled
 });
 var Card = React20.forwardRef((props, ref) => {
-  const _a = props, {
+  const {
     disabled = false,
     clickable: _clickable,
     className,
@@ -7603,24 +7367,16 @@ var Card = React20.forwardRef((props, ref) => {
     role = _clickable ? "button" : void 0,
     modality,
     enableMinWidth,
-    fullWidth
-  } = _a, rest = __objRest(_a, [
-    "disabled",
-    "clickable",
-    "className",
-    "children",
-    "role",
-    "modality",
-    "enableMinWidth",
-    "fullWidth"
-  ]);
+    fullWidth,
+    ...rest
+  } = props;
   const clickable = Boolean(role !== void 0 && !disabled);
   return /* @__PURE__ */ React20.createElement(
     "div",
-    __spreadProps(__spreadValues({
+    {
       ref,
-      role
-    }, rest), {
+      role,
+      ...rest,
       className: classNames(
         getCommonCardStyles(props),
         tw({
@@ -7629,15 +7385,16 @@ var Card = React20.forwardRef((props, ref) => {
         }),
         className
       )
-    }),
+    },
     children
   );
 });
 var Label = (props) => {
-  const _a = props, { className, checked = false, children, modality, enableMinWidth, fullWidth, disabled } = _a, rest = __objRest(_a, ["className", "checked", "children", "modality", "enableMinWidth", "fullWidth", "disabled"]);
+  const { className, checked = false, children, modality, enableMinWidth, fullWidth, disabled, ...rest } = props;
   return /* @__PURE__ */ React20.createElement(
     "label",
-    __spreadProps(__spreadValues({}, rest), {
+    {
+      ...rest,
       className: classNames(
         getCommonCardStyles(props),
         tw({
@@ -7647,40 +7404,34 @@ var Label = (props) => {
         }),
         className
       )
-    }),
+    },
     children
   );
 };
-var ColorHighlight = (_a) => {
-  var _b = _a, {
-    color,
-    className
-  } = _b, rest = __objRest(_b, [
-    "color",
-    "className"
-  ]);
-  return /* @__PURE__ */ React20.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__ */ React20.createElement(
-    "div",
-    __spreadProps(__spreadValues({}, rest), {
-      className: classNames(
-        tw("-mx-4", {
-          "-mt-4": Boolean(fullSize)
-        }),
-        className
-      )
-    })
-  );
-};
+var ColorHighlight = ({
+  color,
+  className,
+  ...rest
+}) => /* @__PURE__ */ React20.createElement(
+  Box,
+  {
+    ...rest,
+    backgroundColor: color,
+    className: classNames(tw("h-1 w-full absolute top-0 left-0 right-0"), className)
+  }
+);
+var ImageContainer = ({ className, fullSize, ...rest }) => /* @__PURE__ */ React20.createElement(
+  "div",
+  {
+    ...rest,
+    className: classNames(
+      tw("-mx-4", {
+        "-mt-4": Boolean(fullSize)
+      }),
+      className
+    )
+  }
+);
 var classes = "w-full bg-cover object-cover";
 var Image = ({ image, imageAlt, fullSize = false, imageHeight }) => /* @__PURE__ */ React20.createElement(
   "img",
@@ -7694,15 +7445,9 @@ var Image = ({ image, imageAlt, fullSize = false, imageHeight }) => /* @__PURE__
     style: { height: isNumber(imageHeight) ? `${imageHeight}px` : imageHeight }
   }
 );
-var Title = (props) => /* @__PURE__ */ React20.createElement(Box.Flex, __spreadValues({ component: "div", alignItems: "center", gap: "2" }, props));
-var Content = (_a) => {
-  var _b = _a, { className, dense } = _b, rest = __objRest(_b, ["className", "dense"]);
-  return /* @__PURE__ */ React20.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__ */ React20.createElement("div", __spreadProps(__spreadValues({}, rest), { className: classNames(tw("flex gap-3 items-center", { "pt-3 ": !dense }), className) }));
-};
+var Title = (props) => /* @__PURE__ */ React20.createElement(Box.Flex, { component: "div", alignItems: "center", gap: "2", ...props });
+var Content = ({ className, dense, ...rest }) => /* @__PURE__ */ React20.createElement("div", { ...rest, className: classNames(tw("flex flex-col", { "gap-4": !dense }), className) });
+var Actions = ({ className, dense, ...rest }) => /* @__PURE__ */ React20.createElement("div", { ...rest, className: classNames(tw("flex gap-3 items-center", { "pt-3 ": !dense }), className) });
 Card.Label = Label;
 Card.Title = Title;
 Card.Content = Content;
@@ -7735,77 +7480,73 @@ import React21 from "react";
 var import_minus2 = __toESM(require_minus());
 var import_tick2 = __toESM(require_tick());
 var Checkbox = React21.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__ */ React21.createElement(
-      "span",
+  ({ id, children, name, disabled = false, readOnly = false, indeterminate = false, ...props }, ref) => /* @__PURE__ */ React21.createElement(
+    "span",
+    {
+      className: classNames(tw("inline-flex justify-center items-center self-center relative"), {
+        "hover:border-intense peer-checked:border-primary-default": !disabled,
+        "border-muted": disabled
+      })
+    },
+    /* @__PURE__ */ React21.createElement(
+      "input",
       {
-        className: classNames(tw("inline-flex justify-center items-center self-center relative"), {
-          "hover:border-intense peer-checked:border-primary-default": !disabled,
-          "border-muted": disabled
-        })
-      },
-      /* @__PURE__ */ React21.createElement(
-        "input",
-        __spreadProps(__spreadValues({
-          id,
-          ref,
-          type: "checkbox",
-          name
-        }, props), {
-          className: classNames(
-            tw("peer appearance-none outline-none w-5 h-5 rounded-sm border border-transparent", {
-              "cursor-pointer checked:bg-primary-default": !disabled,
-              "cursor-not-allowed bg-muted checked:bg-primary-muted": disabled
-            })
+        id,
+        ref,
+        type: "checkbox",
+        name,
+        ...props,
+        className: classNames(
+          tw("peer appearance-none outline-none w-5 h-5 rounded-sm border border-transparent", {
+            "cursor-pointer checked:bg-primary-default": !disabled,
+            "cursor-not-allowed bg-muted checked:bg-primary-muted": disabled
+          })
+        ),
+        readOnly,
+        disabled
+      }
+    ),
+    /* @__PURE__ */ React21.createElement(
+      Icon,
+      {
+        icon: indeterminate ? import_minus2.default : import_tick2.default,
+        strokeWidth: "3px",
+        className: classNames(
+          tw(
+            "absolute top-0 right-0",
+            "pointer-events-none p-[2px] w-5 h-5",
+            "text-transparent [&>path]:stroke-transparent [&>path]:stroke-[3px]",
+            "rounded-sm border border-default peer-focus:border-info-default"
           ),
-          readOnly,
-          disabled
-        })
-      ),
-      /* @__PURE__ */ React21.createElement(
-        Icon,
-        {
-          icon: indeterminate ? import_minus2.default : import_tick2.default,
-          strokeWidth: "3px",
-          className: classNames(
-            tw(
-              "absolute top-0 right-0",
-              "pointer-events-none p-[2px] w-5 h-5",
-              "text-transparent [&>path]:stroke-transparent [&>path]:stroke-[3px]",
-              "rounded-sm border border-default peer-focus:border-info-default"
-            ),
-            {
-              "border-default peer-hover:border-intense peer-checked:text-white peer-checked:[&>path]:stroke-white peer-checked:border-primary-default": !disabled,
-              "border-muted peer-checked:text-primary-default peer-checked:[&>path]:stroke-primary-70 peer-checked:border-transparent": disabled
-            }
-          )
-        }
-      )
-    );
-  }
+          // It seems that we can't combine peer selectors and use 'peer-checked:peer-disabled:bg-muted' style instead.
+          {
+            "border-default peer-hover:border-intense peer-checked:text-white peer-checked:[&>path]:stroke-white peer-checked:border-primary-default": !disabled,
+            "border-muted peer-checked:text-primary-default peer-checked:[&>path]:stroke-primary-70 peer-checked:border-transparent": disabled
+          }
+        )
+      }
+    )
+  )
 );
 
 // src/atoms/Chip/Chip.tsx
 import React22 from "react";
 var Container = React22.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { dense = false, className, children } = _b, rest = __objRest(_b, ["dense", "className", "children"]);
-    return /* @__PURE__ */ React22.createElement(
-      "span",
-      __spreadValues({
-        ref,
-        className: classNames(
-          tw("inline-flex items-center rounded-sm transition whitespace-nowrap", {
-            "typography-small py-2 px-3 gap-x-3 leading-tight": !dense,
-            "typography-caption py-1 px-2 gap-x-2": dense
-          }),
-          className
-        )
-      }, rest),
-      children
-    );
-  }
+  ({ dense = false, className, children, ...rest }, ref) => /* @__PURE__ */ React22.createElement(
+    "span",
+    {
+      ref,
+      className: classNames(
+        tw("inline-flex items-center rounded-sm transition whitespace-nowrap", {
+          "typography-small py-2 px-3 gap-x-3 leading-tight": !dense,
+          "typography-caption py-1 px-2 gap-x-2": dense
+        }),
+        className
+      ),
+      ...rest
+    },
+    children
+  )
 );
 var Chip = {
   Container
@@ -7820,32 +7561,29 @@ import React24 from "react";
 // src/atoms/RadioButton/RadioButton.tsx
 import React23 from "react";
 var RadioButton = React23.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { id, children, name, disabled = false, readOnly = false } = _b, props = __objRest(_b, ["id", "children", "name", "disabled", "readOnly"]);
-    return /* @__PURE__ */ React23.createElement(
-      "input",
-      __spreadProps(__spreadValues({
-        id,
-        ref,
-        type: "radio",
-        name
-      }, props), {
-        className: classNames(
-          tw(
-            "inline-flex justify-center items-center self-center appearance-none",
-            "w-5 h-5 p-[3px] rounded-full border border-default",
-            "outline-none focus:border-info-default checked:bg-primary-default checked:shadow-bodyInset",
-            {
-              "cursor-pointer hover:border-intense checked:border-primary-default": !disabled,
-              "cursor-not-allowed border-muted bg-muted checked:bg-primary-muted checked:border-transparent": disabled
-            }
-          )
-        ),
-        readOnly,
-        disabled
-      })
-    );
-  }
+  ({ id, children, name, disabled = false, readOnly = false, ...props }, ref) => /* @__PURE__ */ React23.createElement(
+    "input",
+    {
+      id,
+      ref,
+      type: "radio",
+      name,
+      ...props,
+      className: classNames(
+        tw(
+          "inline-flex justify-center items-center self-center appearance-none",
+          "w-5 h-5 p-[3px] rounded-full border border-default",
+          "outline-none focus:border-info-default checked:bg-primary-default checked:shadow-bodyInset",
+          {
+            "cursor-pointer hover:border-intense checked:border-primary-default": !disabled,
+            "cursor-not-allowed border-muted bg-muted checked:bg-primary-muted checked:border-transparent": disabled
+          }
+        )
+      ),
+      readOnly,
+      disabled
+    }
+  )
 );
 
 // src/atoms/Table/Table.tsx
@@ -7853,31 +7591,23 @@ var import_chevronDown3 = __toESM(require_chevronDown());
 var import_chevronUp2 = __toESM(require_chevronUp());
 var HeadContext = React24.createContext(null);
 var tableClassNames = tw("w-full relative typography-default border-spacing-0 border-separate");
-var Table = (_a) => {
-  var _b = _a, { children, ariaLabel, className } = _b, rest = __objRest(_b, ["children", "ariaLabel", "className"]);
-  return /* @__PURE__ */ React24.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__ */ React24.createElement("thead", __spreadValues({}, rest), /* @__PURE__ */ React24.createElement("tr", null, /* @__PURE__ */ React24.createElement(HeadContext.Provider, { value: { children, sticky } }, children)));
-};
-var TableBody = (_a) => {
-  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ React24.createElement("tbody", __spreadValues({}, rest), children);
+var Table = ({ children, ariaLabel, className, ...rest }) => {
+  return /* @__PURE__ */ React24.createElement("table", { ...rest, className: classNames(tableClassNames, className), "aria-label": ariaLabel }, children);
 };
+var TableHead = ({ children, sticky, ...rest }) => /* @__PURE__ */ React24.createElement("thead", { ...rest }, /* @__PURE__ */ React24.createElement("tr", null, /* @__PURE__ */ React24.createElement(HeadContext.Provider, { value: { children, sticky } }, children)));
+var TableBody = ({ children, ...rest }) => /* @__PURE__ */ React24.createElement("tbody", { ...rest }, children);
 var rowClassNames = tw("children:border-default group children:last:border-b-0 hover:bg-muted");
-var TableRow = (_a) => {
-  var _b = _a, { children, className, disabled } = _b, rest = __objRest(_b, ["children", "className", "disabled"]);
-  return /* @__PURE__ */ React24.createElement(
-    "tr",
-    __spreadProps(__spreadValues(__spreadValues({}, rest), { inert: disabled ? "" : void 0 }), {
-      className: classNames(rowClassNames, className, {
-        "opacity-70": disabled
-      })
-    }),
-    children
-  );
-};
+var TableRow = ({ children, className, disabled, ...rest }) => /* @__PURE__ */ React24.createElement(
+  "tr",
+  {
+    ...rest,
+    ...{ inert: disabled ? "" : void 0 },
+    className: classNames(rowClassNames, className, {
+      "opacity-70": disabled
+    })
+  },
+  children
+);
 var cellClassNames = tw("px-4 border-b typography-small leading-[18px]");
 var getBodyCellClassNames = (table = true, stickyColumn) => tw("text-default py-3", {
   "h-[50px]": table,
@@ -7900,12 +7630,12 @@ var getHeadCellClassNames = (sticky = true, stickyColumn) => {
   ) : common;
 };
 var TableCell = React24.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { children, className, stickyColumn, align = "left" } = _b, rest = __objRest(_b, ["children", "className", "stickyColumn", "align"]);
+  ({ children, className, stickyColumn, align = "left", ...rest }, ref) => {
     const headContext = React24.useContext(HeadContext);
     return headContext ? /* @__PURE__ */ React24.createElement(
       "th",
-      __spreadProps(__spreadValues({}, rest), {
+      {
+        ...rest,
         ref,
         className: classNames(
           cellClassNames,
@@ -7913,11 +7643,12 @@ var TableCell = React24.forwardRef(
           getAlignClassNames(align),
           className
         )
-      }),
+      },
       children
     ) : /* @__PURE__ */ React24.createElement(
       "td",
-      __spreadProps(__spreadValues({}, rest), {
+      {
+        ...rest,
         ref,
         className: classNames(
           cellClassNames,
@@ -7925,37 +7656,33 @@ var TableCell = React24.forwardRef(
           getAlignClassNames(align),
           className
         )
-      }),
+      },
       children
     );
   }
 );
-var TableSelectCell = (_a) => {
-  var _b = _a, { ariaLabel } = _b, props = __objRest(_b, ["ariaLabel"]);
-  return /* @__PURE__ */ React24.createElement(Table.Cell, { className: tw("leading-[0px]") }, props.type === "radio" ? /* @__PURE__ */ React24.createElement(RadioButton, __spreadValues({ "aria-label": ariaLabel }, props)) : /* @__PURE__ */ React24.createElement(Checkbox, __spreadValues({ "aria-label": ariaLabel }, props)));
+var TableSelectCell = ({ ariaLabel, ...props }) => {
+  return /* @__PURE__ */ React24.createElement(Table.Cell, { className: tw("leading-[0px]") }, props.type === "radio" ? /* @__PURE__ */ React24.createElement(RadioButton, { "aria-label": ariaLabel, ...props }) : /* @__PURE__ */ React24.createElement(Checkbox, { "aria-label": ariaLabel, ...props }));
 };
 var getSortCellButtonClassNames = (align) => tw("group flex items-center gap-x-4 text-muted", { "flex-row-reverse": align === "right" });
 var getSortCellIconClassNames = (active) => {
   return tw("text-[9px]", active ? "text-default" : "text-inactive");
 };
 var TableSortCell = React24.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { children, direction = "none", onClick } = _b, rest = __objRest(_b, ["children", "direction", "onClick"]);
-    return /* @__PURE__ */ React24.createElement(Table.Cell, __spreadProps(__spreadValues({}, rest), { "aria-sort": direction, ref }), /* @__PURE__ */ React24.createElement("span", { className: getSortCellButtonClassNames(rest.align), role: "button", tabIndex: -1, onClick }, children, /* @__PURE__ */ React24.createElement(
-      "div",
-      {
-        "data-sort-icons": true,
-        className: tw("flex flex-col", {
-          "invisible group-hover:visible": direction === "none"
-        })
-      },
-      /* @__PURE__ */ React24.createElement(InlineIcon, { icon: import_chevronUp2.default, className: getSortCellIconClassNames(direction === "ascending") }),
-      /* @__PURE__ */ React24.createElement(InlineIcon, { icon: import_chevronDown3.default, className: getSortCellIconClassNames(direction === "descending") })
-    )));
-  }
+  ({ children, direction = "none", onClick, ...rest }, ref) => /* @__PURE__ */ React24.createElement(Table.Cell, { ...rest, "aria-sort": direction, ref }, /* @__PURE__ */ React24.createElement("span", { className: getSortCellButtonClassNames(rest.align), role: "button", tabIndex: -1, onClick }, children, /* @__PURE__ */ React24.createElement(
+    "div",
+    {
+      "data-sort-icons": true,
+      className: tw("flex flex-col", {
+        "invisible group-hover:visible": direction === "none"
+      })
+    },
+    /* @__PURE__ */ React24.createElement(InlineIcon, { icon: import_chevronUp2.default, className: getSortCellIconClassNames(direction === "ascending") }),
+    /* @__PURE__ */ React24.createElement(InlineIcon, { icon: import_chevronDown3.default, className: getSortCellIconClassNames(direction === "descending") })
+  )))
 );
 var Caption = ({ children }) => /* @__PURE__ */ React24.createElement(Typography2.Caption, { htmlTag: "caption" }, children);
-var Item = ({ image, imageAlt, imageSize = 35, title, caption }) => /* @__PURE__ */ React24.createElement("div", { className: tw("flex gap-4 items-center") }, image && /* @__PURE__ */ React24.createElement("img", { src: image, alt: imageAlt != null ? imageAlt : "", style: { width: imageSize, height: imageSize } }), /* @__PURE__ */ React24.createElement("div", null, title, caption && /* @__PURE__ */ React24.createElement(Typography2.Caption, null, caption)));
+var Item = ({ image, imageAlt, imageSize = 35, title, caption }) => /* @__PURE__ */ React24.createElement("div", { className: tw("flex gap-4 items-center") }, image && /* @__PURE__ */ React24.createElement("img", { src: image, alt: imageAlt ?? "", style: { width: imageSize, height: imageSize } }), /* @__PURE__ */ React24.createElement("div", null, title, caption && /* @__PURE__ */ React24.createElement(Typography2.Caption, null, caption)));
 Table.Head = React24.memo(TableHead);
 Table.Body = React24.memo(TableBody);
 Table.Row = React24.memo(TableRow);
@@ -7972,126 +7699,97 @@ var getAlignClassNames2 = (align) => tw("flex items-center", {
   "justify-center": align === "center",
   "justify-start": align === "left" || align === void 0
 });
-var DataList = (_a) => {
-  var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React25.createElement("div", __spreadValues({}, rest));
-};
-var TreeLine = (_a) => {
-  var _b = _a, { className, style, isLast } = _b, rest = __objRest(_b, ["className", "style", "isLast"]);
-  return /* @__PURE__ */ React25.createElement("div", __spreadProps(__spreadValues({}, rest), { className: classNames(tw("flex justify-start h-full mx-4"), className) }), /* @__PURE__ */ React25.createElement(
-    "div",
-    {
-      className: tw("border-l border-default border-dashed flex-1", {
-        "h-full": !isLast,
-        "h-1/2": Boolean(isLast)
-      })
-    }
-  ), /* @__PURE__ */ React25.createElement("div", { className: tw("border-t border-default border-dashed self-center w-[18px]") }));
-};
-var HeadCell = (_a) => {
-  var _b = _a, {
-    className,
-    sticky,
-    align,
-    stickyColumn
-  } = _b, rest = __objRest(_b, [
-    "className",
-    "sticky",
-    "align",
-    "stickyColumn"
-  ]);
-  return /* @__PURE__ */ React25.createElement(
-    "div",
-    __spreadProps(__spreadValues({
-      role: "columnheader"
-    }, rest), {
-      className: classNames(
-        cellClassNames,
-        getHeadCellClassNames(sticky, stickyColumn),
-        getAlignClassNames2(align),
-        className
-      )
-    })
-  );
-};
-var Cell = (_a) => {
-  var _b = _a, {
-    className,
-    align,
-    stickyColumn
-  } = _b, rest = __objRest(_b, [
-    "className",
-    "align",
-    "stickyColumn"
-  ]);
-  return /* @__PURE__ */ React25.createElement(
-    "div",
-    __spreadProps(__spreadValues({}, rest), {
-      role: "cell",
-      className: classNames(
-        cellClassNames,
-        getBodyCellClassNames(false, stickyColumn),
-        getAlignClassNames2(align),
-        tw("border-default"),
-        className
-      )
+var DataList = ({ className, ...rest }) => /* @__PURE__ */ React25.createElement("div", { ...rest });
+var TreeLine = ({ className, style, isLast, ...rest }) => /* @__PURE__ */ React25.createElement("div", { ...rest, className: classNames(tw("flex justify-start h-full mx-4"), className) }, /* @__PURE__ */ React25.createElement(
+  "div",
+  {
+    className: tw("border-l border-default border-dashed flex-1", {
+      "h-full": !isLast,
+      "h-1/2": Boolean(isLast)
     })
-  );
-};
-var Row = (_a) => {
-  var _b = _a, {
-    className,
-    disabled,
-    header,
-    isGroup,
-    active,
-    noDivider
-  } = _b, rest = __objRest(_b, [
-    "className",
-    "disabled",
-    "header",
-    "isGroup",
-    "active",
-    "noDivider"
-  ]);
+  }
+), /* @__PURE__ */ React25.createElement("div", { className: tw("border-t border-default border-dashed self-center w-[18px]") }));
+var HeadCell = ({
+  className,
+  sticky,
+  align,
+  stickyColumn,
+  ...rest
+}) => /* @__PURE__ */ React25.createElement(
+  "div",
+  {
+    role: "columnheader",
+    ...rest,
+    className: classNames(
+      cellClassNames,
+      getHeadCellClassNames(sticky, stickyColumn),
+      getAlignClassNames2(align),
+      className
+    )
+  }
+);
+var Cell = ({
+  className,
+  align,
+  stickyColumn,
+  ...rest
+}) => /* @__PURE__ */ React25.createElement(
+  "div",
+  {
+    ...rest,
+    role: "cell",
+    className: classNames(
+      cellClassNames,
+      getBodyCellClassNames(false, stickyColumn),
+      getAlignClassNames2(align),
+      tw("border-default"),
+      className
+    )
+  }
+);
+var Row = ({
+  className,
+  disabled,
+  header,
+  isGroup,
+  active,
+  noDivider,
+  ...rest
+}) => {
   return /* @__PURE__ */ React25.createElement(
     "div",
-    __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, rest), {
-      role: isGroup ? "rowgroup" : "row"
-    }), { inert: disabled ? "" : void 0 }), {
+    {
+      ...rest,
+      role: isGroup ? "rowgroup" : "row",
+      ...{ inert: disabled ? "" : void 0 },
       className: classNames(tw("contents"), className, {
         "[&>*]:border-b-transparent": noDivider,
         "children:opacity-70": disabled,
         "[&>*]:bg-primary-active": active,
         "[&>*]:hover:bg-muted": !disabled && !header
       })
-    })
+    }
   );
 };
-var SubGroupSpacing = (_a) => {
-  var _b = _a, { className, divider } = _b, rest = __objRest(_b, ["className", "divider"]);
-  return /* @__PURE__ */ React25.createElement(
-    "span",
-    __spreadProps(__spreadValues({}, rest), {
-      "aria-hidden": true,
-      className: classNames(tw("col-span-full h-6 bg-muted border-default", { "border-b": Boolean(divider) }), className)
+var SubGroupSpacing = ({ className, divider, ...rest }) => /* @__PURE__ */ React25.createElement(
+  "span",
+  {
+    ...rest,
+    "aria-hidden": true,
+    className: classNames(tw("col-span-full h-6 bg-muted border-default", { "border-b": Boolean(divider) }), className)
+  }
+);
+var SortCell = ({ children, direction = "none", onClick, sticky, ...rest }) => /* @__PURE__ */ React25.createElement(HeadCell, { ...rest, "aria-sort": direction, role: "columnheader", sticky }, /* @__PURE__ */ React25.createElement("span", { className: getSortCellButtonClassNames(rest.align), role: "button", tabIndex: -1, onClick }, children, /* @__PURE__ */ React25.createElement(
+  "div",
+  {
+    "data-sort-icons": true,
+    className: tw("flex flex-col", {
+      "invisible group-hover:visible": direction === "none"
     })
-  );
-};
-var SortCell = (_a) => {
-  var _b = _a, { children, direction = "none", onClick, sticky } = _b, rest = __objRest(_b, ["children", "direction", "onClick", "sticky"]);
-  return /* @__PURE__ */ React25.createElement(HeadCell, __spreadProps(__spreadValues({}, rest), { "aria-sort": direction, role: "columnheader", sticky }), /* @__PURE__ */ React25.createElement("span", { className: getSortCellButtonClassNames(rest.align), role: "button", tabIndex: -1, onClick }, children, /* @__PURE__ */ React25.createElement(
-    "div",
-    {
-      "data-sort-icons": true,
-      className: tw("flex flex-col", {
-        "invisible group-hover:visible": direction === "none"
-      })
-    },
-    /* @__PURE__ */ React25.createElement(InlineIcon, { icon: import_chevronUp3.default, className: getSortCellIconClassNames(direction === "ascending") }),
-    /* @__PURE__ */ React25.createElement(InlineIcon, { icon: import_chevronDown4.default, className: getSortCellIconClassNames(direction === "descending") })
-  )));
-};
+  },
+  /* @__PURE__ */ React25.createElement(InlineIcon, { icon: import_chevronUp3.default, className: getSortCellIconClassNames(direction === "ascending") }),
+  /* @__PURE__ */ React25.createElement(InlineIcon, { icon: import_chevronDown4.default, className: getSortCellIconClassNames(direction === "descending") })
+)));
 var EmptyGroup = ({ icon, children }) => /* @__PURE__ */ React25.createElement("div", { className: tw("flex gap-3 items-center") }, icon && /* @__PURE__ */ React25.createElement(Icon, { icon, width: 22 }), children);
 DataList.EmptyGroup = EmptyGroup;
 DataList.EmptyGroup.displayName = "DataList.EmptyGroup";
@@ -8107,42 +7805,31 @@ DataList.Row = Row;
 DataList.Row.displayName = "DataList.Row";
 DataList.TreeLine = TreeLine;
 DataList.TreeLine.displayName = "DataList.TreeLine";
-var ToolbarContainer = (_a) => {
-  var _b = _a, { className, sticky = true } = _b, rest = __objRest(_b, ["className", "sticky"]);
-  return /* @__PURE__ */ React25.createElement(
-    "div",
-    __spreadProps(__spreadValues({}, rest), {
-      role: "row",
-      className: classNames(
-        tw("col-span-full flex items-stretch py-4 px-l2 border-b border-default", {
-          "sticky top-[47px] bg-body z-10": sticky
-        }),
-        className
-      )
-    })
-  );
-};
+var ToolbarContainer = ({ className, sticky = true, ...rest }) => /* @__PURE__ */ React25.createElement(
+  "div",
+  {
+    ...rest,
+    role: "row",
+    className: classNames(
+      tw("col-span-full flex items-stretch py-4 px-l2 border-b border-default", {
+        "sticky top-[47px] bg-body z-10": sticky
+      }),
+      className
+    )
+  }
+);
 ToolbarContainer.displayName = "DataList.Toolbar.Container";
-var ToolbarGroup = (_a) => {
-  var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React25.createElement(
-    "div",
-    __spreadProps(__spreadValues({
-      role: "cell"
-    }, rest), {
-      className: classNames(tw("flex items-center px-l2 border-r-1 border-muted last:border-r-0"), className)
-    })
-  );
-};
+var ToolbarGroup = ({ className, ...rest }) => /* @__PURE__ */ React25.createElement(
+  "div",
+  {
+    role: "cell",
+    ...rest,
+    className: classNames(tw("flex items-center px-l2 border-r-1 border-muted last:border-r-0"), className)
+  }
+);
 ToolbarGroup.displayName = "DataList.Toolbar.Group";
-var ToolbarSelectionCount = (_a) => {
-  var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React25.createElement(Typography, __spreadValues({ variant: "small", color: "muted", className: classNames(tw("whitespace-nowrap"), className) }, rest));
-};
-var ToolbarActions = (_a) => {
-  var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React25.createElement("div", __spreadProps(__spreadValues({}, rest), { className: classNames(tw("flex items-center gap-x-5"), className) }));
-};
+var ToolbarSelectionCount = ({ className, ...rest }) => /* @__PURE__ */ React25.createElement(Typography, { variant: "small", color: "muted", className: classNames(tw("whitespace-nowrap"), className), ...rest });
+var ToolbarActions = ({ className, ...rest }) => /* @__PURE__ */ React25.createElement("div", { ...rest, className: classNames(tw("flex items-center gap-x-5"), className) });
 ToolbarActions.displayName = "DataList.Toolbar.Actions";
 DataList.Toolbar = {
   Container: ToolbarContainer,
@@ -8176,61 +7863,61 @@ import React28 from "react";
 // src/molecules/Badge/Badge.tsx
 import React27 from "react";
 
-// src/molecules/Skeleton/Skeleton.tsx
+// src/atoms/Skeleton/Skeleton.tsx
 import React26 from "react";
 import { isNumber as isNumber2, isUndefined as isUndefined7 } from "lodash-es";
-var Skeleton = (_a) => {
-  var _b = _a, {
-    width,
-    height,
-    display = "block",
-    className,
-    animate = true,
-    rounded = false,
-    style
-  } = _b, rest = __objRest(_b, [
-    "width",
-    "height",
-    "display",
-    "className",
-    "animate",
-    "rounded",
-    "style"
-  ]);
+import { tv } from "tailwind-variants";
+var skeletonStyles = tv({
+  base: "bg-default",
+  variants: {
+    hasHeight: {
+      false: "h-auto before:content-['_'] whitespace-pre origin-[0%_45%] scale-[0.55]"
+    },
+    display: {
+      "block": "block",
+      "inline-block": "inline-block"
+    },
+    rounded: {
+      true: "rounded-full"
+    },
+    animate: {
+      true: "animate-pulse"
+    }
+  }
+});
+var Skeleton = ({
+  width,
+  height,
+  display = "block",
+  className,
+  animate = true,
+  rounded = false,
+  style,
+  ...rest
+}) => {
   const styles = {
     width: isNumber2(width) ? `${width}px` : width,
     height: isNumber2(height) ? `${height}px` : height
   };
-  return /* @__PURE__ */ React26.createElement(
-    "div",
-    __spreadProps(__spreadValues({
-      "aria-label": "Loading..."
-    }, rest), {
-      style: __spreadValues(__spreadValues({}, styles), style),
-      role: "progressbar",
-      className: classNames(
-        "Aquarium-Skeleton",
-        tw("bg-default", {
-          "h-auto before:content-['_'] whitespace-pre origin-[0%_45%] scale-[0.55]": isUndefined7(height),
-          "rounded-full": rounded,
-          "block": display === "block",
-          "inline-block": display === "inline-block",
-          "animate-pulse": animate
-        }),
-        className
-      )
-    })
-  );
+  const classes2 = skeletonStyles({
+    hasHeight: !isUndefined7(height),
+    display,
+    rounded,
+    animate,
+    className: ["Aquarium-Skeleton", className]
+  });
+  return /* @__PURE__ */ React26.createElement("div", { "aria-label": "Loading...", ...rest, style: { ...styles, ...style }, role: "progressbar", className: classes2 });
 };
 
 // src/molecules/Badge/Badge.tsx
 var createBadge = (type, displayName) => {
   const Component = (props) => {
-    const _a = props, { kind = "filled", value, textClassname, dense = false, disabled = false } = _a, rest = __objRest(_a, ["kind", "value", "textClassname", "dense", "disabled"]);
+    const { kind = "filled", value, textClassname, dense = false, disabled = false, ...rest } = props;
     const valueStr = value.toString();
     return /* @__PURE__ */ React27.createElement(
       "span",
-      __spreadProps(__spreadValues({}, rest), {
+      {
+        ...rest,
         className: classNames(
           tw("inline-block text-center", {
             "rounded-full": type === "default" || type === "chip",
@@ -8246,7 +7933,7 @@ var createBadge = (type, displayName) => {
           }),
           "Aquarium-Badge"
         )
-      }),
+      },
       /* @__PURE__ */ React27.createElement(
         "span",
         {
@@ -8275,15 +7962,14 @@ var createBadge = (type, displayName) => {
   Component.Skeleton.displayName = `${displayName}.Skeleton`;
   return Component;
 };
-var NotificationBadge = (_a) => {
-  var _b = _a, { children, top = "-2px", right = "-2px" } = _b, props = __objRest(_b, ["children", "top", "right"]);
-  return /* @__PURE__ */ React27.createElement("div", __spreadProps(__spreadValues({}, props), { className: classNames("Aquarium-Badge.Notification", tw("relative inline-flex text-default")) }), children, /* @__PURE__ */ React27.createElement("span", { style: { top, right }, className: tw("absolute rounded-full w-[6px] h-[6px] bg-danger-intense") }));
+var NotificationBadge = ({ children, top = "-2px", right = "-2px", ...props }) => {
+  return /* @__PURE__ */ React27.createElement("div", { ...props, className: classNames("Aquarium-Badge.Notification", tw("relative inline-flex text-default")) }, children, /* @__PURE__ */ React27.createElement("span", { style: { top, right }, className: tw("absolute rounded-full w-[6px] h-[6px] bg-danger-intense") }));
 };
-var DotBadge = (_a) => {
-  var _b = _a, { dense = false } = _b, props = __objRest(_b, ["dense"]);
+var DotBadge = ({ dense = false, ...props }) => {
   return /* @__PURE__ */ React27.createElement(
     "span",
-    __spreadProps(__spreadValues({}, props), {
+    {
+      ...props,
       className: classNames(
         "Aquarium-Badge.Dot",
         tw("rounded-full bg-current", {
@@ -8291,7 +7977,7 @@ var DotBadge = (_a) => {
           "w-[9px] h-[9px]": !dense
         })
       )
-    })
+    }
   );
 };
 var Badge = createBadge("default", "Badge");
@@ -8306,81 +7992,68 @@ var ChipBadge = createBadge("chip", "ChipBadge");
 // src/atoms/DropdownMenu/DropdownMenu.tsx
 var import_tick3 = __toESM(require_tick());
 var DropdownMenu = React28.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { minHeight, maxHeight = "100%", minWidth = "125px", maxWidth, className, children } = _b, props = __objRest(_b, ["minHeight", "maxHeight", "minWidth", "maxWidth", "className", "children"]);
-    return /* @__PURE__ */ React28.createElement(
-      "div",
-      __spreadValues({
-        ref,
-        style: { minHeight, maxHeight, minWidth, maxWidth },
-        className: classNames(
-          className,
-          "Aquarium-DropdownMenu.Menu bg-popover-content w-full flex flex-col overflow-x-hidden typography-small text-default"
-        )
-      }, props),
-      children
-    );
-  }
+  ({ minHeight, maxHeight = "100%", minWidth = "125px", maxWidth, className, children, ...props }, ref) => /* @__PURE__ */ React28.createElement(
+    "div",
+    {
+      ref,
+      style: { minHeight, maxHeight, minWidth, maxWidth },
+      className: classNames(
+        className,
+        "Aquarium-DropdownMenu.Menu bg-popover-content w-full flex flex-col overflow-x-hidden typography-small text-default"
+      ),
+      ...props
+    },
+    children
+  )
 );
 var ContentContainer = ({ children }) => /* @__PURE__ */ React28.createElement("div", { className: tw("p-3 overflow-y-auto overflow-x-hidden") }, children);
 DropdownMenu.ContentContainer = ContentContainer;
 var List = React28.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { children, className } = _b, props = __objRest(_b, ["children", "className"]);
-    return /* @__PURE__ */ React28.createElement("ul", __spreadValues({ ref, className: classNames(className, "outline-none ring-0") }, props), children);
-  }
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ React28.createElement("ul", { ref, className: classNames(className, "outline-none ring-0"), ...props }, children)
 );
 DropdownMenu.List = List;
 var Group = React28.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className, title, titleProps, children } = _b, props = __objRest(_b, ["className", "title", "titleProps", "children"]);
-    return /* @__PURE__ */ React28.createElement("li", __spreadValues({ ref }, props), title && /* @__PURE__ */ React28.createElement(
-      "div",
-      __spreadValues({
-        className: classNames(
-          className,
-          "Aquarium-DropdownMenu.Group p-3 text-inactive uppercase cursor-default typography-caption"
-        )
-      }, titleProps),
-      title
-    ), children);
-  }
+  ({ className, title, titleProps, children, ...props }, ref) => /* @__PURE__ */ React28.createElement("li", { ref, ...props }, title && /* @__PURE__ */ React28.createElement(
+    "div",
+    {
+      className: classNames(
+        className,
+        "Aquarium-DropdownMenu.Group p-3 text-inactive uppercase cursor-default typography-caption"
+      ),
+      ...titleProps
+    },
+    title
+  ), children)
 );
 DropdownMenu.Group = Group;
 var Item2 = React28.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { kind, highlighted, selected, className, icon, showNotification = false, children } = _b, props = __objRest(_b, ["kind", "highlighted", "selected", "className", "icon", "showNotification", "children"]);
-    return /* @__PURE__ */ React28.createElement(
-      "li",
-      __spreadValues({
-        ref,
-        className: classNames(className, "Aquarium-DropdownMenu.Item flex items-center gap-x-3 p-3 outline-none", {
-          "cursor-pointer hover:bg-muted": !props.disabled,
-          "bg-muted": highlighted,
-          "text-primary-intense": kind === "action" && !props.disabled,
-          "text-danger-default": kind === "danger" && !props.disabled,
-          "text-inactive cursor-not-allowed": props.disabled
-        })
-      }, props),
-      icon && showNotification && /* @__PURE__ */ React28.createElement(Badge.Notification, null, /* @__PURE__ */ React28.createElement(InlineIcon, { icon })),
-      icon && !showNotification && /* @__PURE__ */ React28.createElement(InlineIcon, { icon }),
-      /* @__PURE__ */ React28.createElement("span", { className: tw("grow") }, children),
-      selected && /* @__PURE__ */ React28.createElement(InlineIcon, { icon: import_tick3.default })
-    );
-  }
+  ({ kind, highlighted, selected, className, icon, showNotification = false, children, ...props }, ref) => /* @__PURE__ */ React28.createElement(
+    "li",
+    {
+      ref,
+      className: classNames(className, "Aquarium-DropdownMenu.Item flex items-center gap-x-3 p-3 outline-none", {
+        "cursor-pointer hover:bg-muted": !props.disabled,
+        "bg-muted": highlighted,
+        "text-primary-intense": kind === "action" && !props.disabled,
+        "text-danger-default": kind === "danger" && !props.disabled,
+        "text-inactive cursor-not-allowed": props.disabled
+      }),
+      ...props
+    },
+    icon && showNotification && /* @__PURE__ */ React28.createElement(Badge.Notification, null, /* @__PURE__ */ React28.createElement(InlineIcon, { icon })),
+    icon && !showNotification && /* @__PURE__ */ React28.createElement(InlineIcon, { icon }),
+    /* @__PURE__ */ React28.createElement("span", { className: tw("grow") }, children),
+    selected && /* @__PURE__ */ React28.createElement(InlineIcon, { icon: import_tick3.default })
+  )
 );
 DropdownMenu.Item = Item2;
 var Description = ({ disabled, children }) => /* @__PURE__ */ React28.createElement(Typography2.Caption, { color: disabled ? "inactive" : "muted" }, children);
 DropdownMenu.Description = Description;
-var Separator = (_a) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React28.createElement("li", __spreadProps(__spreadValues({}, props), { className: classNames(className, tw("m-3 block bg-default h-[1px]")) }));
+var Separator = ({ className, ...props }) => {
+  return /* @__PURE__ */ React28.createElement("li", { ...props, className: classNames(className, tw("m-3 block bg-default h-[1px]")) });
 };
 DropdownMenu.Separator = Separator;
-var EmptyStateContainer = (_a) => {
-  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ React28.createElement("div", __spreadValues({ className: classNames(tw("border border-dashed border-default p-3"), className) }, props), children);
-};
+var EmptyStateContainer = ({ className, children, ...props }) => /* @__PURE__ */ React28.createElement("div", { className: classNames(tw("border border-dashed border-default p-3"), className), ...props }, children);
 DropdownMenu.EmptyStateContainer = EmptyStateContainer;
 
 // src/atoms/InputGroup/InputGroup.tsx
@@ -8391,38 +8064,23 @@ import React29 from "react";
 import { isEmpty, mapValues, pick } from "lodash-es";
 var breakpoints = Object.keys(tokens_default.screens);
 var GridItem = Tailwindify(
-  (_a) => {
-    var _b = _a, {
-      htmlTag = "div",
-      ariaLabel,
-      className,
-      style,
-      children,
-      display,
-      justifySelf,
-      alignSelf,
-      placeSelf,
-      colStart,
-      colEnd,
-      rowSpan,
-      rowStart,
-      rowEnd
-    } = _b, props = __objRest(_b, [
-      "htmlTag",
-      "ariaLabel",
-      "className",
-      "style",
-      "children",
-      "display",
-      "justifySelf",
-      "alignSelf",
-      "placeSelf",
-      "colStart",
-      "colEnd",
-      "rowSpan",
-      "rowStart",
-      "rowEnd"
-    ]);
+  ({
+    htmlTag = "div",
+    ariaLabel,
+    className,
+    style,
+    children,
+    display,
+    justifySelf,
+    alignSelf,
+    placeSelf,
+    colStart,
+    colEnd,
+    rowSpan,
+    rowStart,
+    rowEnd,
+    ...props
+  }) => {
     const breakPointableProperties = pick(props, breakpoints);
     const gridColumn = !isEmpty(breakPointableProperties) ? mapValues(breakPointableProperties, (value) => value === "full" ? "1 / -1" : value ? `span-${value}` : "auto") : void 0;
     const hookStyle = useStyle({
@@ -8441,7 +8099,7 @@ var GridItem = Tailwindify(
     return /* @__PURE__ */ React29.createElement(
       HtmlElement,
       {
-        style: __spreadValues(__spreadValues({}, hookStyle), style),
+        style: { ...hookStyle, ...style },
         className,
         "aria-label": ariaLabel ? ariaLabel : void 0
       },
@@ -8450,7 +8108,7 @@ var GridItem = Tailwindify(
   }
 );
 var Grid = (props) => {
-  return /* @__PURE__ */ React29.createElement(GridComponent, __spreadValues({}, props));
+  return /* @__PURE__ */ React29.createElement(GridComponent, { ...props });
 };
 var GridComponent = Tailwindify(
   ({
@@ -8508,7 +8166,7 @@ var GridComponent = Tailwindify(
     return /* @__PURE__ */ React29.createElement(
       HtmlElement,
       {
-        style: __spreadValues(__spreadValues({}, hookStyle), style),
+        style: { ...hookStyle, ...style },
         className,
         "aria-label": ariaLabel ? ariaLabel : void 0
       },
@@ -8527,32 +8185,29 @@ var gridColumnStyles = {
   "3": "grid-cols-3",
   "auto": "auto-cols-fr"
 };
-var InputGroup = (_a) => {
-  var _b = _a, { cols = "1", children } = _b, rest = __objRest(_b, ["cols", "children"]);
+var InputGroup = ({ cols = "1", children, ...rest }) => {
   return /* @__PURE__ */ React30.createElement(
     Grid,
-    __spreadProps(__spreadValues({}, rest), {
+    {
+      ...rest,
       display: "inline-grid",
       colGap: "l4",
       rowGap: "3",
       cols: cols !== "auto" ? cols : void 0,
       className: gridColumnStyles[cols]
-    }),
+    },
     children
   );
 };
 
 // src/atoms/Link/Link.tsx
 import React31 from "react";
-var Link = (_a) => {
-  var _b = _a, { children, className } = _b, props = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React31.createElement("a", __spreadValues({ className: classNames(className, linkStyle) }, props), children);
-};
+var Link = ({ children, className, ...props }) => /* @__PURE__ */ React31.createElement("a", { className: classNames(className, linkStyle), ...props }, children);
 
 // src/atoms/Modal/Modal.tsx
 import React32 from "react";
-import { tv } from "tailwind-variants";
-var modalStyles = tv({
+import { tv as tv2 } from "tailwind-variants";
+var modalStyles = tv2({
   slots: {
     overlay: "inset-0 overflow-y-auto z-modal fixed",
     backdrop: "-z-10 fixed min-w-full min-h-full bg-body-intense opacity-70",
@@ -8647,163 +8302,110 @@ var modalStyles = tv({
     }
   ]
 });
-var Modal = (_a) => {
-  var _b = _a, {
-    children,
-    kind = "dialog",
-    className,
-    open
-  } = _b, rest = __objRest(_b, [
-    "children",
-    "kind",
-    "className",
-    "open"
-  ]);
+var Modal = ({
+  children,
+  kind = "dialog",
+  className,
+  open,
+  ...rest
+}) => {
   const { overlay } = modalStyles({ kind });
-  return open ? /* @__PURE__ */ React32.createElement("div", __spreadProps(__spreadValues({}, rest), { className: overlay({ className }) }), children) : null;
+  return open ? /* @__PURE__ */ React32.createElement("div", { ...rest, className: overlay({ className }) }, children) : null;
 };
-Modal.BackDrop = (_a) => {
-  var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
+Modal.BackDrop = ({ className, ...rest }) => {
   const { backdrop } = modalStyles();
-  return /* @__PURE__ */ React32.createElement("div", __spreadProps(__spreadValues({}, rest), { className: backdrop({ className }) }));
+  return /* @__PURE__ */ React32.createElement("div", { ...rest, className: backdrop({ className }) });
 };
 Modal.Dialog = React32.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { kind = "dialog", children, className, size = "md" } = _b, rest = __objRest(_b, ["kind", "children", "className", "size"]);
+  ({ kind = "dialog", children, className, size = "md", ...rest }, ref) => {
     const { dialog } = modalStyles({ kind, size });
-    return /* @__PURE__ */ React32.createElement("div", __spreadProps(__spreadValues({ ref, "aria-modal": "true" }, rest), { className: dialog({ className }) }), children);
+    return /* @__PURE__ */ React32.createElement("div", { ref, "aria-modal": "true", ...rest, className: dialog({ className }) }, children);
   }
 );
-Modal.Header = (_a) => {
-  var _b = _a, { kind = "dialog", size = "md", children, className } = _b, rest = __objRest(_b, ["kind", "size", "children", "className"]);
+Modal.Header = ({ kind = "dialog", size = "md", children, className, ...rest }) => {
   const { header } = modalStyles({ kind, size });
-  return /* @__PURE__ */ React32.createElement("div", __spreadProps(__spreadValues({}, rest), { className: header({ className }) }), children);
+  return /* @__PURE__ */ React32.createElement("div", { ...rest, className: header({ className }) }, children);
 };
-Modal.HeaderImage = (_a) => {
-  var _b = _a, { backgroundImage, className } = _b, rest = __objRest(_b, ["backgroundImage", "className"]);
+Modal.HeaderImage = ({ backgroundImage, className, ...rest }) => {
   const { headerImage } = modalStyles({ backgroundImage: Boolean(backgroundImage) });
-  return backgroundImage ? /* @__PURE__ */ React32.createElement("img", __spreadProps(__spreadValues({ "aria-hidden": true, src: backgroundImage }, rest), { className: headerImage({ className }) })) : /* @__PURE__ */ React32.createElement("div", { className: headerImage({ className }) });
+  return backgroundImage ? /* @__PURE__ */ React32.createElement("img", { "aria-hidden": true, src: backgroundImage, ...rest, className: headerImage({ className }) }) : /* @__PURE__ */ React32.createElement("div", { className: headerImage({ className }) });
 };
-Modal.CloseButtonContainer = (_a) => {
-  var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
+Modal.CloseButtonContainer = ({ className, ...rest }) => {
   const { closeButtonContainer } = modalStyles();
-  return /* @__PURE__ */ React32.createElement("div", __spreadProps(__spreadValues({}, rest), { className: closeButtonContainer({ className }) }));
+  return /* @__PURE__ */ React32.createElement("div", { ...rest, className: closeButtonContainer({ className }) });
 };
-Modal.Title = (_a) => {
-  var _b = _a, { kind = "dialog", children, className } = _b, rest = __objRest(_b, ["kind", "children", "className"]);
+Modal.Title = ({ kind = "dialog", children, className, ...rest }) => {
   const { title } = modalStyles({ kind });
-  return /* @__PURE__ */ React32.createElement(Typography, __spreadValues({ htmlTag: "h2", variant: "subheading", color: "intense", className: title({ className }) }, rest), children);
-};
-Modal.Subtitle = (_a) => {
-  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ React32.createElement(Typography, __spreadValues({ variant: "small", color: "default" }, rest), children);
+  return /* @__PURE__ */ React32.createElement(Typography, { htmlTag: "h2", variant: "subheading", color: "intense", className: title({ className }), ...rest }, children);
 };
-Modal.TitleContainer = (_a) => {
-  var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
+Modal.Subtitle = ({ children, ...rest }) => /* @__PURE__ */ React32.createElement(Typography, { variant: "small", color: "default", ...rest }, children);
+Modal.TitleContainer = ({ children, className, ...rest }) => {
   const { titleContainer } = modalStyles();
-  return /* @__PURE__ */ React32.createElement("div", __spreadProps(__spreadValues({}, rest), { className: titleContainer({ className }) }), children);
+  return /* @__PURE__ */ React32.createElement("div", { ...rest, className: titleContainer({ className }) }, children);
 };
-Modal.Body = (_a) => {
-  var _b = _a, { children, className, noFooter = false, maxHeight, style } = _b, rest = __objRest(_b, ["children", "className", "noFooter", "maxHeight", "style"]);
+Modal.Body = ({ children, className, noFooter = false, maxHeight, style, ...rest }) => {
   const { body } = modalStyles();
-  return /* @__PURE__ */ React32.createElement("div", __spreadProps(__spreadValues({}, rest), { className: body({ noFooter, className }), style: __spreadValues({ maxHeight }, style) }), children);
+  return /* @__PURE__ */ React32.createElement("div", { ...rest, className: body({ noFooter, className }), style: { maxHeight, ...style } }, children);
 };
-Modal.Footer = (_a) => {
-  var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
+Modal.Footer = ({ children, className, ...rest }) => {
   const { footer } = modalStyles();
-  return /* @__PURE__ */ React32.createElement("div", __spreadProps(__spreadValues({}, rest), { className: footer({ className }) }), children);
+  return /* @__PURE__ */ React32.createElement("div", { ...rest, className: footer({ className }) }, children);
 };
-Modal.Actions = (_a) => {
-  var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
+Modal.Actions = ({ children, className, ...rest }) => {
   const { actions } = modalStyles();
-  return /* @__PURE__ */ React32.createElement("div", __spreadProps(__spreadValues({}, rest), { className: actions({ className }) }), children);
+  return /* @__PURE__ */ React32.createElement("div", { ...rest, className: actions({ className }) }, children);
 };
 
 // src/atoms/Navigation/Navigation.tsx
 import React33 from "react";
-var Navigation = (_a) => {
-  var _b = _a, {
-    className,
-    children,
-    "aria-label": ariaLabel
-  } = _b, rest = __objRest(_b, [
-    "className",
-    "children",
-    "aria-label"
-  ]);
-  return /* @__PURE__ */ React33.createElement("nav", { className: classNames(tw("bg-muted h-full")), "aria-label": ariaLabel }, /* @__PURE__ */ React33.createElement("ul", __spreadProps(__spreadValues({}, rest), { className: classNames(tw("flex flex-col h-full"), className), role: "menubar" }), children));
-};
-var Header = (_a) => {
-  var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React33.createElement("li", __spreadProps(__spreadValues({}, rest), { role: "presentation", className: classNames(tw("px-6 py-5"), className) }));
-};
-var Title2 = (_a) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React33.createElement(Typography, __spreadValues({ variant: "caption", className: classNames("uppercase text-muted", className) }, props));
-};
-var Subtitle = (_a) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React33.createElement(Typography, __spreadValues({ variant: "small-strong", className: classNames("text-intense", className) }, props));
-};
-var Footer = (_a) => {
-  var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React33.createElement("li", __spreadProps(__spreadValues({}, rest), { role: "presentation", className: classNames(tw("px-6 py-5 mt-auto"), className) }));
-};
-var Section = (_a) => {
-  var _b = _a, { title, className } = _b, rest = __objRest(_b, ["title", "className"]);
-  return /* @__PURE__ */ React33.createElement("li", { role: "presentation", className: tw("py-5") }, title && /* @__PURE__ */ React33.createElement("div", { className: classNames(className, "py-2 px-6 text-inactive uppercase cursor-default typography-caption") }, title), /* @__PURE__ */ React33.createElement("ul", __spreadProps(__spreadValues({}, rest), { role: "group", className: classNames(tw("flex flex-col"), className) })));
-};
-var Divider = (_a) => {
-  var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React33.createElement("li", __spreadProps(__spreadValues({ "aria-hidden": true }, rest), { className: classNames(tw("border-t-2 border-muted"), className) }));
-};
-var Item3 = (_a) => {
-  var _b = _a, { className, active } = _b, rest = __objRest(_b, ["className", "active"]);
-  return /* @__PURE__ */ React33.createElement("li", { role: "presentation" }, /* @__PURE__ */ React33.createElement(
-    "a",
-    __spreadProps(__spreadValues({}, rest), {
-      role: "menuitem",
-      className: classNames(
-        tw("py-3 px-6 hover:bg-default cursor-pointer flex gap-4 items-center typography-small focusable", {
-          "text-default": !active,
-          "text-primary-intense": !!active
-        }),
-        className
-      )
-    })
-  ));
-};
-var Submenu = (_a) => {
-  var _b = _a, {
-    children,
-    className,
-    title,
-    id
-  } = _b, rest = __objRest(_b, [
-    "children",
-    "className",
-    "title",
-    "id"
-  ]);
-  return /* @__PURE__ */ React33.createElement("li", { role: "presentation" }, /* @__PURE__ */ React33.createElement(
-    "a",
-    __spreadValues({
-      role: "menuitem",
-      "aria-haspopup": "true",
-      href: "#",
-      id,
-      className: classNames(
-        tw("py-3 pr-6 pl-3 hover:bg-default cursor-pointer typography-small focusable flex items-center w-full"),
-        className
-      )
-    }, rest),
-    title
-  ), /* @__PURE__ */ React33.createElement("ul", { role: "menu", className: classNames(tw("flex flex-col")), "aria-labelledby": id }, children));
-};
-var SubmenuItem = (_a) => {
-  var _b = _a, { className, active } = _b, rest = __objRest(_b, ["className", "active"]);
-  return /* @__PURE__ */ React33.createElement(Navigation.Item, __spreadProps(__spreadValues({}, rest), { active, className: classNames(className, tw("pl-[56px]")) }));
-};
+var Navigation = ({
+  className,
+  children,
+  "aria-label": ariaLabel,
+  ...rest
+}) => /* @__PURE__ */ React33.createElement("nav", { className: classNames(tw("bg-muted h-full")), "aria-label": ariaLabel }, /* @__PURE__ */ React33.createElement("ul", { ...rest, className: classNames(tw("flex flex-col h-full"), className), role: "menubar" }, children));
+var Header = ({ className, ...rest }) => /* @__PURE__ */ React33.createElement("li", { ...rest, role: "presentation", className: classNames(tw("px-6 py-5"), className) });
+var Title2 = ({ className, ...props }) => /* @__PURE__ */ React33.createElement(Typography, { variant: "caption", className: classNames("uppercase text-muted", className), ...props });
+var Subtitle = ({ className, ...props }) => /* @__PURE__ */ React33.createElement(Typography, { variant: "small-strong", className: classNames("text-intense", className), ...props });
+var Footer = ({ className, ...rest }) => /* @__PURE__ */ React33.createElement("li", { ...rest, role: "presentation", className: classNames(tw("px-6 py-5 mt-auto"), className) });
+var Section = ({ title, className, ...rest }) => /* @__PURE__ */ React33.createElement("li", { role: "presentation", className: tw("py-5") }, title && /* @__PURE__ */ React33.createElement("div", { className: classNames(className, "py-2 px-6 text-inactive uppercase cursor-default typography-caption") }, title), /* @__PURE__ */ React33.createElement("ul", { ...rest, role: "group", className: classNames(tw("flex flex-col"), className) }));
+var Divider = ({ className, ...rest }) => /* @__PURE__ */ React33.createElement("li", { "aria-hidden": true, ...rest, className: classNames(tw("border-t-2 border-muted"), className) });
+var Item3 = ({ className, active, ...rest }) => /* @__PURE__ */ React33.createElement("li", { role: "presentation" }, /* @__PURE__ */ React33.createElement(
+  "a",
+  {
+    ...rest,
+    role: "menuitem",
+    className: classNames(
+      tw("py-3 px-6 hover:bg-default cursor-pointer flex gap-4 items-center typography-small focusable", {
+        "text-default": !active,
+        "text-primary-intense": !!active
+      }),
+      className
+    )
+  }
+));
+var Submenu = ({
+  children,
+  className,
+  title,
+  id,
+  ...rest
+}) => /* @__PURE__ */ React33.createElement("li", { role: "presentation" }, /* @__PURE__ */ React33.createElement(
+  "a",
+  {
+    role: "menuitem",
+    "aria-haspopup": "true",
+    href: "#",
+    id,
+    className: classNames(
+      tw("py-3 pr-6 pl-3 hover:bg-default cursor-pointer typography-small focusable flex items-center w-full"),
+      className
+    ),
+    ...rest
+  },
+  title
+), /* @__PURE__ */ React33.createElement("ul", { role: "menu", className: classNames(tw("flex flex-col")), "aria-labelledby": id }, children));
+var SubmenuItem = ({ className, active, ...rest }) => /* @__PURE__ */ React33.createElement(Navigation.Item, { ...rest, active, className: classNames(className, tw("pl-[56px]")) });
 Header.Title = Title2;
 Header.Subtitle = Subtitle;
 Submenu.Item = SubmenuItem;
@@ -8816,63 +8418,41 @@ Navigation.Divider = Divider;
 
 // src/atoms/PageHeader/PageHeader.tsx
 import React34 from "react";
-var PageHeader = (_a) => {
-  var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React34.createElement("div", __spreadValues({ className: classNames(tw("flex flex-row gap-4 pb-6"), className) }, rest), children);
-};
-PageHeader.Container = (_a) => {
-  var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React34.createElement("div", __spreadValues({ className: classNames(tw("flex flex-col grow gap-0"), className) }, rest), children);
-};
-PageHeader.TitleContainer = (_a) => {
-  var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React34.createElement("div", __spreadValues({ className: classNames(tw("flex flex-col justify-center gap-2"), className) }, rest), children);
-};
-PageHeader.Title = (_a) => {
-  var _b = _a, { isSubHeader = false, children } = _b, rest = __objRest(_b, ["isSubHeader", "children"]);
-  return /* @__PURE__ */ React34.createElement(
-    Typography2,
-    __spreadProps(__spreadValues({}, rest), {
-      color: "intense",
-      variant: isSubHeader ? "subheading" : "heading",
-      htmlTag: isSubHeader ? "h2" : "h1"
-    }),
-    children
-  );
-};
-PageHeader.Subtitle = (_a) => {
-  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ React34.createElement(Typography2.Small, __spreadProps(__spreadValues({}, rest), { color: "default" }), children);
-};
-PageHeader.Chips = (_a) => {
-  var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React34.createElement("div", __spreadValues({ className: classNames(tw("flex gap-3"), className) }, rest), children);
-};
-PageHeader.Actions = (_a) => {
-  var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React34.createElement("div", __spreadValues({ className: classNames(tw("flex flex-row gap-4 self-start"), className) }, rest), children);
-};
+var PageHeader = ({ children, className, ...rest }) => /* @__PURE__ */ React34.createElement("div", { className: classNames(tw("flex flex-row gap-4 pb-6"), className), ...rest }, children);
+PageHeader.Container = ({ children, className, ...rest }) => /* @__PURE__ */ React34.createElement("div", { className: classNames(tw("flex flex-col grow gap-0"), className), ...rest }, children);
+PageHeader.TitleContainer = ({ children, className, ...rest }) => /* @__PURE__ */ React34.createElement("div", { className: classNames(tw("flex flex-col justify-center gap-2"), className), ...rest }, children);
+PageHeader.Title = ({ isSubHeader = false, children, ...rest }) => /* @__PURE__ */ React34.createElement(
+  Typography2,
+  {
+    ...rest,
+    color: "intense",
+    variant: isSubHeader ? "subheading" : "heading",
+    htmlTag: isSubHeader ? "h2" : "h1"
+  },
+  children
+);
+PageHeader.Subtitle = ({ children, ...rest }) => /* @__PURE__ */ React34.createElement(Typography2.Small, { ...rest, color: "default" }, children);
+PageHeader.Chips = ({ children, className, ...rest }) => /* @__PURE__ */ React34.createElement("div", { className: classNames(tw("flex gap-3"), className), ...rest }, children);
+PageHeader.Actions = ({ children, className, ...rest }) => /* @__PURE__ */ React34.createElement("div", { className: classNames(tw("flex flex-row gap-4 self-start"), className), ...rest }, children);
 
 // src/atoms/Popover/Popover.tsx
 import React35 from "react";
-var PopoverPanel = React35.forwardRef((_a, ref) => {
-  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ React35.createElement(
-    "div",
-    __spreadValues({
-      ref,
-      className: classNames(
-        className,
-        tw(
-          "rounded-sm shadow-16dp bg-popover-content mt-1 overflow-y-auto flex flex-col border border-default outline-none"
-        )
+var PopoverPanel = React35.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React35.createElement(
+  "div",
+  {
+    ref,
+    className: classNames(
+      className,
+      tw(
+        "rounded-sm shadow-16dp bg-popover-content mt-1 overflow-y-auto flex flex-col border border-default outline-none"
       )
-    }, props),
-    children
-  );
-});
+    ),
+    ...props
+  },
+  children
+));
 PopoverPanel.displayName = "Popover.Panel";
-var PopoverUnderlay = React35.forwardRef((props, ref) => /* @__PURE__ */ React35.createElement("div", __spreadProps(__spreadValues({ ref }, props), { className: tw("fixed inset-0") })));
+var PopoverUnderlay = React35.forwardRef((props, ref) => /* @__PURE__ */ React35.createElement("div", { ref, ...props, className: tw("fixed inset-0") }));
 PopoverUnderlay.displayName = "Popover.Underlay";
 var Popover = {
   Panel: PopoverPanel,
@@ -8881,26 +8461,11 @@ var Popover = {
 
 // src/atoms/PopoverDialog/PopoverDialog.tsx
 import React36 from "react";
-var Header2 = (_a) => {
-  var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React36.createElement("div", __spreadProps(__spreadValues({}, rest), { className: classNames(tw("p-5 gap-3 flex items-center"), className) }), children);
-};
-var Title3 = (_a) => {
-  var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React36.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__ */ React36.createElement(Typography, __spreadProps(__spreadValues({}, rest), { htmlTag: "div", variant: "caption", className: classNames(tw("px-5 overflow-y-auto"), className) }), children);
-};
-var Footer2 = (_a) => {
-  var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React36.createElement("div", __spreadProps(__spreadValues({}, rest), { className: classNames(tw("p-5"), className) }), children);
-};
-var Actions2 = (_a) => {
-  var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React36.createElement("div", __spreadProps(__spreadValues({}, rest), { className: classNames(tw("flex gap-4"), className) }), children);
-};
+var Header2 = ({ children, className, ...rest }) => /* @__PURE__ */ React36.createElement("div", { ...rest, className: classNames(tw("p-5 gap-3 flex items-center"), className) }, children);
+var Title3 = ({ children, className, ...rest }) => /* @__PURE__ */ React36.createElement(Typography, { ...rest, htmlTag: "h1", variant: "small-strong" }, children);
+var Body = ({ children, className, ...rest }) => /* @__PURE__ */ React36.createElement(Typography, { ...rest, htmlTag: "div", variant: "caption", className: classNames(tw("px-5 overflow-y-auto"), className) }, children);
+var Footer2 = ({ children, className, ...rest }) => /* @__PURE__ */ React36.createElement("div", { ...rest, className: classNames(tw("p-5"), className) }, children);
+var Actions2 = ({ children, className, ...rest }) => /* @__PURE__ */ React36.createElement("div", { ...rest, className: classNames(tw("flex gap-4"), className) }, children);
 var PopoverDialog = {
   Header: Header2,
   Title: Title3,
@@ -8912,28 +8477,26 @@ var PopoverDialog = {
 // src/atoms/ProgressBar/ProgressBar.tsx
 import React37 from "react";
 import { clamp } from "lodash-es";
-var ProgressBar = (_a) => {
-  var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React37.createElement(
-    "div",
-    __spreadProps(__spreadValues({}, rest), {
-      className: classNames(tw("relative flex items-center w-full bg-muted h-2 rounded-full overflow-hidden"), className)
-    }),
-    children
-  );
-};
+var ProgressBar = ({ children, className, ...rest }) => /* @__PURE__ */ React37.createElement(
+  "div",
+  {
+    ...rest,
+    className: classNames(tw("relative flex items-center w-full bg-muted h-2 rounded-full overflow-hidden"), className)
+  },
+  children
+);
 var STATUS_COLORS = {
   info: tw("bg-info-default"),
   warning: tw("bg-warning-default"),
   success: tw("bg-success-default"),
   error: tw("bg-danger-intense")
 };
-ProgressBar.Indicator = (_a) => {
-  var _b = _a, { min, max, value, "aria-label": ariaLabel, status, className } = _b, rest = __objRest(_b, ["min", "max", "value", "aria-label", "status", "className"]);
+ProgressBar.Indicator = ({ min, max, value, "aria-label": ariaLabel, status, className, ...rest }) => {
   const completedPercentage = clamp((value - min) / (max - min) * 100, 0, 100);
   return /* @__PURE__ */ React37.createElement(
     "div",
-    __spreadProps(__spreadValues({}, rest), {
+    {
+      ...rest,
       className: classNames(
         tw("h-2 rounded-full transition-all ease-in-out delay-150"),
         STATUS_COLORS[status],
@@ -8945,77 +8508,53 @@ ProgressBar.Indicator = (_a) => {
       "aria-valuenow": value,
       "aria-valuemin": min,
       "aria-valuemax": max
-    })
+    }
   );
 };
-ProgressBar.Labels = (_a) => {
-  var _b = _a, { children, startLabel, endLabel, className } = _b, rest = __objRest(_b, ["children", "startLabel", "endLabel", "className"]);
-  return /* @__PURE__ */ React37.createElement("div", { className: classNames(tw("flex flex-row"), className) }, /* @__PURE__ */ React37.createElement("span", __spreadProps(__spreadValues({}, rest), { className: tw("grow text-default typography-caption") }), startLabel), /* @__PURE__ */ React37.createElement("span", __spreadProps(__spreadValues({}, rest), { className: tw("grow text-default typography-caption text-right") }), endLabel));
-};
+ProgressBar.Labels = ({ children, startLabel, endLabel, className, ...rest }) => /* @__PURE__ */ React37.createElement("div", { className: classNames(tw("flex flex-row"), className) }, /* @__PURE__ */ React37.createElement("span", { ...rest, className: tw("grow text-default typography-caption") }, startLabel), /* @__PURE__ */ React37.createElement("span", { ...rest, className: tw("grow text-default typography-caption text-right") }, endLabel));
 
 // src/atoms/Section/Section.tsx
 import React38 from "react";
 var import_caretUp2 = __toESM(require_caretUp());
-var Section2 = (_a) => {
-  var _b = _a, {
-    children,
-    className
-  } = _b, rest = __objRest(_b, [
-    "children",
-    "className"
-  ]);
-  return /* @__PURE__ */ React38.createElement(Box, __spreadProps(__spreadValues({ component: "section" }, rest), { className: classNames(tw("border border-muted"), className) }), children);
-};
-Section2.Header = (_a) => {
-  var _b = _a, { children, className, expanded } = _b, rest = __objRest(_b, ["children", "className", "expanded"]);
-  return /* @__PURE__ */ React38.createElement(
+var Section2 = ({
+  children,
+  className,
+  ...rest
+}) => /* @__PURE__ */ React38.createElement(Box, { component: "section", ...rest, className: classNames(tw("border border-muted"), className) }, children);
+Section2.Header = ({ children, className, expanded, ...rest }) => /* @__PURE__ */ React38.createElement(
+  "div",
+  {
+    ...rest,
+    className: classNames(
+      tw("px-6 flex gap-5 justify-between items-center h-[72px]", {
+        "bg-muted": expanded
+      }),
+      className
+    )
+  },
+  children
+);
+Section2.TitleContainer = React38.forwardRef(
+  ({ children, className, collapsible, ...rest }, ref) => /* @__PURE__ */ React38.createElement(
     "div",
-    __spreadProps(__spreadValues({}, rest), {
+    {
+      ...rest,
+      ref,
       className: classNames(
-        tw("px-6 flex gap-5 justify-between items-center h-[72px]", {
-          "bg-muted": expanded
+        tw("grow grid grid-cols-[auto_1fr] gap-x-3 items-center", {
+          "cursor-pointer focus:outline-none focusable": collapsible
         }),
         className
       )
-    }),
+    },
     children
-  );
-};
-Section2.TitleContainer = React38.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { children, className, collapsible } = _b, rest = __objRest(_b, ["children", "className", "collapsible"]);
-    return /* @__PURE__ */ React38.createElement(
-      "div",
-      __spreadProps(__spreadValues({}, rest), {
-        ref,
-        className: classNames(
-          tw("grow grid grid-cols-[auto_1fr] gap-x-3 items-center", {
-            "cursor-pointer focus:outline-none focusable": collapsible
-          }),
-          className
-        )
-      }),
-      children
-    );
-  }
+  )
 );
-Section2.Toggle = (props) => /* @__PURE__ */ React38.createElement(Icon, __spreadProps(__spreadValues({}, props), { icon: import_caretUp2.default, height: 22, width: 22 }));
-Section2.Title = (_a) => {
-  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ React38.createElement(Typography2.Large, __spreadProps(__spreadValues({}, rest), { htmlTag: "h2", color: "intense", className: "flex gap-3 items-center" }), children);
-};
-Section2.Subtitle = (_a) => {
-  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ React38.createElement(Typography2.Small, __spreadProps(__spreadValues({}, rest), { color: "default" }), children);
-};
-Section2.Actions = (_a) => {
-  var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React38.createElement("div", __spreadProps(__spreadValues({}, rest), { className: classNames(tw("flex gap-4 justify-end"), className) }), children);
-};
-Section2.Body = (_a) => {
-  var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React38.createElement("div", __spreadProps(__spreadValues({}, rest), { className: classNames(tw("p-6"), className) }), /* @__PURE__ */ React38.createElement(Typography, { htmlTag: "div", color: "default" }, children));
-};
+Section2.Toggle = (props) => /* @__PURE__ */ React38.createElement(Icon, { ...props, icon: import_caretUp2.default, height: 22, width: 22 });
+Section2.Title = ({ children, ...rest }) => /* @__PURE__ */ React38.createElement(Typography2.Large, { ...rest, htmlTag: "h2", color: "intense", className: "flex gap-3 items-center" }, children);
+Section2.Subtitle = ({ children, ...rest }) => /* @__PURE__ */ React38.createElement(Typography2.Small, { ...rest, color: "default" }, children);
+Section2.Actions = ({ children, className, ...rest }) => /* @__PURE__ */ React38.createElement("div", { ...rest, className: classNames(tw("flex gap-4 justify-end"), className) }, children);
+Section2.Body = ({ children, className, ...rest }) => /* @__PURE__ */ React38.createElement("div", { ...rest, className: classNames(tw("p-6"), className) }, /* @__PURE__ */ React38.createElement(Typography, { htmlTag: "div", color: "default" }, children));
 
 // src/atoms/Select/Select.tsx
 import React39 from "react";
@@ -9024,172 +8563,146 @@ var import_chevronUp4 = __toESM(require_chevronUp());
 var import_search2 = __toESM(require_search());
 var import_tick4 = __toESM(require_tick());
 function getOptionLabelBuiltin(option) {
-  var _a;
   if (option === null) {
     return "";
   }
   if (typeof option === "string") {
     return option;
   }
-  return (_a = option.label) != null ? _a : "";
+  return option.label ?? "";
 }
 function isOptionDisabledBuiltin(option) {
   return !!option.disabled;
 }
 var getValues = (children) => {
-  var _a;
-  const values = React39.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 : [];
+  const values = React39.Children.map(children, (c) => c?.props?.value);
+  return values?.filter((v) => v !== void 0 && v !== null) ?? [];
 };
 var InputContainer = React39.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { variant = "default", className } = _b, props = __objRest(_b, ["variant", "className"]);
-    return /* @__PURE__ */ React39.createElement(
-      "div",
-      __spreadValues({
-        ref,
-        className: classNames(
-          className,
-          "relative rounded-sm typography-default-strong w-full flex flex-row items-center focus-visible:outline-0 focus-visible:border-info-default group",
-          {
-            "border px-3 py-[6px]": variant !== "readOnly",
-            "cursor-default": variant === "readOnly",
-            "border-default": variant !== "error" && variant !== "readOnly",
-            "border-danger-default": variant === "error",
-            "hover:border-intense": variant !== "error" && variant !== "disabled" && variant !== "focused",
-            "border-info-default": variant === "focused",
-            "bg-body": variant !== "disabled",
-            "cursor-not-allowed border-default bg-default": variant === "disabled"
-          }
-        )
-      }, props)
-    );
-  }
-);
-var Input = React39.forwardRef((_a, ref) => {
-  var _b = _a, { className, required } = _b, props = __objRest(_b, ["className", "required"]);
-  return /* @__PURE__ */ React39.createElement(
-    "input",
-    __spreadValues({
+  ({ variant = "default", className, ...props }, ref) => /* @__PURE__ */ React39.createElement(
+    "div",
+    {
       ref,
-      type: "text",
-      "aria-required": required,
       className: classNames(
         className,
-        "grow rounded border-0 focus:outline-none px-[1px] my-1 min-w-0 typography-small disabled:cursor-not-allowed disabled:bg-default placeholder:text-inactive",
+        "relative rounded-sm typography-default-strong w-full flex flex-row items-center focus-visible:outline-0 focus-visible:border-info-default group",
+        // group is used for <Combobox />'s clear selection button
         {
-          "text-default": !props.disabled,
-          "text-inactive": props.disabled,
-          "bg-body": !props.readOnly,
-          "cursor-default bg-transparent": props.readOnly
+          "border px-3 py-[6px]": variant !== "readOnly",
+          "cursor-default": variant === "readOnly",
+          "border-default": variant !== "error" && variant !== "readOnly",
+          "border-danger-default": variant === "error",
+          "hover:border-intense": variant !== "error" && variant !== "disabled" && variant !== "focused",
+          "border-info-default": variant === "focused",
+          "bg-body": variant !== "disabled",
+          "cursor-not-allowed border-default bg-default": variant === "disabled"
         }
-      )
-    }, props)
-  );
-});
-var Menu = React39.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { maxHeight = "450px", className, children } = _b, props = __objRest(_b, ["maxHeight", "className", "children"]);
-    return /* @__PURE__ */ React39.createElement(
-      "ul",
-      __spreadValues({
-        ref,
-        style: { maxHeight },
-        className: classNames(className, tw("text-default bg-body overflow-y-auto"))
-      }, props),
-      children
-    );
-  }
+      ),
+      ...props
+    }
+  )
 );
-var NoResults = React39.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className, children } = _b, rest = __objRest(_b, ["className", "children"]);
-    return /* @__PURE__ */ React39.createElement("li", __spreadProps(__spreadValues({ ref }, rest), { className: classNames(tw("p-3 text-inactive typography-small"), className) }), children);
+var Input = React39.forwardRef(({ className, required, ...props }, ref) => /* @__PURE__ */ React39.createElement(
+  "input",
+  {
+    ref,
+    type: "text",
+    "aria-required": required,
+    className: classNames(
+      className,
+      "grow rounded border-0 focus:outline-none px-[1px] my-1 min-w-0 typography-small disabled:cursor-not-allowed disabled:bg-default placeholder:text-inactive",
+      {
+        "text-default": !props.disabled,
+        "text-inactive": props.disabled,
+        "bg-body": !props.readOnly,
+        "cursor-default bg-transparent": props.readOnly
+      }
+    ),
+    ...props
   }
-);
-var EmptyStateContainer2 = React39.forwardRef((_a, ref) => {
-  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ React39.createElement("li", __spreadValues({ ref, className: tw("border border-dashed border-default m-4 p-6") }, props), children);
-});
-var Divider2 = (props) => /* @__PURE__ */ React39.createElement("div", __spreadValues({ className: tw("border-b-1 border-muted mx-3 my-4") }, props));
-var Group2 = React39.forwardRef((_a, ref) => {
-  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ React39.createElement(
-    "li",
-    __spreadValues({
+));
+var Menu = React39.forwardRef(
+  ({ maxHeight = "450px", className, children, ...props }, ref) => /* @__PURE__ */ React39.createElement(
+    "ul",
+    {
       ref,
-      className: classNames(
-        className,
-        "flex items-center gap-x-3 p-3 text-inactive uppercase cursor-default typography-caption mt-4 first:mt-0"
-      )
-    }, props),
+      style: { maxHeight },
+      className: classNames(className, tw("text-default bg-body overflow-y-auto")),
+      ...props
+    },
     children
-  );
-});
+  )
+);
+var NoResults = React39.forwardRef(
+  ({ className, children, ...rest }, ref) => /* @__PURE__ */ React39.createElement("li", { ref, ...rest, className: classNames(tw("p-3 text-inactive typography-small"), className) }, children)
+);
+var EmptyStateContainer2 = React39.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React39.createElement("li", { ref, className: tw("border border-dashed border-default m-4 p-6"), ...props }, children));
+var Divider2 = (props) => /* @__PURE__ */ React39.createElement("div", { className: tw("border-b-1 border-muted mx-3 my-4"), ...props });
+var Group2 = React39.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React39.createElement(
+  "li",
+  {
+    ref,
+    className: classNames(
+      className,
+      "flex items-center gap-x-3 p-3 text-inactive uppercase cursor-default typography-caption mt-4 first:mt-0"
+    ),
+    ...props
+  },
+  children
+));
 var endAdornmentSize = { width: 14, height: 14 };
 var Item4 = React39.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { highlighted, selected, className, children } = _b, props = __objRest(_b, ["highlighted", "selected", "className", "children"]);
-    return /* @__PURE__ */ React39.createElement(
-      "li",
-      __spreadValues({
-        ref,
-        className: classNames(className, "flex items-center gap-x-3 p-3 typography-small", {
-          "cursor-pointer hover:bg-muted": !props["aria-disabled"],
-          "cursor-not-allowed opacity-40 grayscale": props["aria-disabled"],
-          "bg-muted": highlighted
-        })
-      }, props),
-      /* @__PURE__ */ React39.createElement("span", { className: tw("grow flex gap-x-3") }, children),
-      selected ? /* @__PURE__ */ React39.createElement(InlineIcon, __spreadValues({ icon: import_tick4.default }, endAdornmentSize)) : /* @__PURE__ */ React39.createElement("div", { style: endAdornmentSize })
-    );
-  }
+  ({ highlighted, selected, className, children, ...props }, ref) => /* @__PURE__ */ React39.createElement(
+    "li",
+    {
+      ref,
+      className: classNames(className, "flex items-center gap-x-3 p-3 typography-small", {
+        "cursor-pointer hover:bg-muted": !props["aria-disabled"],
+        "cursor-not-allowed opacity-40 grayscale": props["aria-disabled"],
+        "bg-muted": highlighted
+      }),
+      ...props
+    },
+    /* @__PURE__ */ React39.createElement("span", { className: tw("grow flex gap-x-3") }, children),
+    selected ? /* @__PURE__ */ React39.createElement(InlineIcon, { icon: import_tick4.default, ...endAdornmentSize }) : /* @__PURE__ */ React39.createElement("div", { style: endAdornmentSize })
+  )
 );
 var ActionItem = React39.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className, dense, icon, onClick, children } = _b, props = __objRest(_b, ["className", "dense", "icon", "onClick", "children"]);
-    return /* @__PURE__ */ React39.createElement(
-      "li",
-      __spreadValues({
-        ref,
-        role: "button",
-        onClick: () => !props.disabled && onClick(),
-        className: classNames(className, "flex items-center gap-x-3 typography-small", {
-          "p-3": !dense,
-          "px-3 py-2": dense,
-          "text-primary-intense cursor-pointer hover:text-primary-default": !props.disabled,
-          "text-inactive cursor-not-allowed": props.disabled
-        })
-      }, props),
-      icon && /* @__PURE__ */ React39.createElement(InlineIcon, { icon }),
-      children
-    );
-  }
-);
-var Toggle = React39.forwardRef((_a, ref) => {
-  var _b = _a, { hasFocus, isOpen } = _b, props = __objRest(_b, ["hasFocus", "isOpen"]);
-  var _a2;
-  return /* @__PURE__ */ React39.createElement(
-    "button",
-    __spreadProps(__spreadValues({
+  ({ className, dense, icon, onClick, children, ...props }, ref) => /* @__PURE__ */ React39.createElement(
+    "li",
+    {
       ref,
-      type: "button",
-      "aria-label": "Toggle"
-    }, props), {
-      className: tw("grow-0 leading-none", { "cursor-not-allowed": (_a2 = props.disabled) != null ? _a2 : false })
-    }),
-    /* @__PURE__ */ React39.createElement(
-      InlineIcon,
-      {
-        color: props.disabled ? "inactive" : "default",
-        icon: hasFocus ? import_search2.default : isOpen ? import_chevronUp4.default : import_chevronDown5.default
-      }
-    )
-  );
-});
+      role: "button",
+      onClick: () => !props.disabled && onClick(),
+      className: classNames(className, "flex items-center gap-x-3 typography-small", {
+        "p-3": !dense,
+        "px-3 py-2": dense,
+        "text-primary-intense cursor-pointer hover:text-primary-default": !props.disabled,
+        "text-inactive cursor-not-allowed": props.disabled
+      }),
+      ...props
+    },
+    icon && /* @__PURE__ */ React39.createElement(InlineIcon, { icon }),
+    children
+  )
+);
+var Toggle = React39.forwardRef(({ hasFocus, isOpen, ...props }, ref) => /* @__PURE__ */ React39.createElement(
+  "button",
+  {
+    ref,
+    type: "button",
+    "aria-label": "Toggle",
+    ...props,
+    className: tw("grow-0 leading-none", { "cursor-not-allowed": props.disabled ?? false })
+  },
+  /* @__PURE__ */ React39.createElement(
+    InlineIcon,
+    {
+      color: props.disabled ? "inactive" : "default",
+      icon: hasFocus ? import_search2.default : isOpen ? import_chevronUp4.default : import_chevronDown5.default
+    }
+  )
+));
 var Select = {
   InputContainer,
   Input,
@@ -9206,65 +8719,53 @@ var Select = {
 // src/atoms/Stepper/Stepper.tsx
 import React40 from "react";
 var import_tick5 = __toESM(require_tick());
-var Stepper = (_a) => {
-  var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React40.createElement("div", __spreadProps(__spreadValues({}, rest), { className: classNames(className) }));
-};
-var ConnectorContainer = (_a) => {
-  var _b = _a, {
-    className,
-    completed,
-    dense
-  } = _b, rest = __objRest(_b, [
-    "className",
-    "completed",
-    "dense"
-  ]);
-  return /* @__PURE__ */ React40.createElement(
-    "div",
-    __spreadProps(__spreadValues({}, rest), {
-      className: classNames(
-        tw("absolute w-full -left-1/2", {
-          "top-[3px] px-[14px]": Boolean(dense),
-          "top-[14px] px-[20px]": !dense
-        }),
-        className
-      )
-    })
-  );
-};
-var Connector = (_a) => {
-  var _b = _a, { children, className, completed, dense } = _b, rest = __objRest(_b, ["children", "className", "completed", "dense"]);
-  return /* @__PURE__ */ React40.createElement(
-    "div",
-    __spreadProps(__spreadValues({}, rest), {
-      className: classNames(
-        tw("w-full", {
-          "bg-intense": !completed,
-          "bg-success-default": Boolean(completed),
-          "h-[2px]": !dense,
-          "h-[3px]": Boolean(dense)
-        }),
-        className
-      )
-    })
-  );
-};
-var Step = (_a) => {
-  var _b = _a, { className, state } = _b, rest = __objRest(_b, ["className", "state"]);
-  return /* @__PURE__ */ React40.createElement(
-    "div",
-    __spreadProps(__spreadValues({}, rest), {
-      className: classNames(
-        tw("flex flex-col items-center relative text-center", {
-          "text-intense": state !== "inactive",
-          "text-inactive": state === "inactive"
-        }),
-        className
-      )
-    })
-  );
-};
+var Stepper = ({ className, ...rest }) => /* @__PURE__ */ React40.createElement("div", { ...rest, className: classNames(className) });
+var ConnectorContainer = ({
+  className,
+  completed,
+  dense,
+  ...rest
+}) => /* @__PURE__ */ React40.createElement(
+  "div",
+  {
+    ...rest,
+    className: classNames(
+      tw("absolute w-full -left-1/2", {
+        "top-[3px] px-[14px]": Boolean(dense),
+        "top-[14px] px-[20px]": !dense
+      }),
+      className
+    )
+  }
+);
+var Connector = ({ children, className, completed, dense, ...rest }) => /* @__PURE__ */ React40.createElement(
+  "div",
+  {
+    ...rest,
+    className: classNames(
+      tw("w-full", {
+        "bg-intense": !completed,
+        "bg-success-default": Boolean(completed),
+        "h-[2px]": !dense,
+        "h-[3px]": Boolean(dense)
+      }),
+      className
+    )
+  }
+);
+var Step = ({ className, state, ...rest }) => /* @__PURE__ */ React40.createElement(
+  "div",
+  {
+    ...rest,
+    className: classNames(
+      tw("flex flex-col items-center relative text-center", {
+        "text-intense": state !== "inactive",
+        "text-inactive": state === "inactive"
+      }),
+      className
+    )
+  }
+);
 var getClassNames = (state) => tw("h-[32px] w-[32px] border-2", {
   "border-intense": state === "active",
   "border-default": state === "inactive",
@@ -9275,21 +8776,19 @@ var getDenseClassNames = (state) => tw("h-[8px] w-[8px]", {
   "bg-intense": state === "inactive",
   "text-success-default": state === "completed"
 });
-var Indicator = (_a) => {
-  var _b = _a, { children, className, state, dense } = _b, rest = __objRest(_b, ["children", "className", "state", "dense"]);
-  return /* @__PURE__ */ React40.createElement(
-    "div",
-    __spreadProps(__spreadValues({}, rest), {
-      className: classNames(
-        "Aquarium-Stepper-Indicator",
-        tw("rounded-full flex justify-center items-center mx-2 mb-3"),
-        dense ? getDenseClassNames(state) : getClassNames(state),
-        className
-      )
-    }),
-    state === "completed" ? /* @__PURE__ */ React40.createElement(InlineIcon, { icon: import_tick5.default }) : dense ? null : children
-  );
-};
+var Indicator = ({ children, className, state, dense, ...rest }) => /* @__PURE__ */ React40.createElement(
+  "div",
+  {
+    ...rest,
+    className: classNames(
+      "Aquarium-Stepper-Indicator",
+      tw("rounded-full flex justify-center items-center mx-2 mb-3"),
+      dense ? getDenseClassNames(state) : getClassNames(state),
+      className
+    )
+  },
+  state === "completed" ? /* @__PURE__ */ React40.createElement(InlineIcon, { icon: import_tick5.default }) : dense ? null : children
+);
 Step.Indicator = Indicator;
 Stepper.Step = Step;
 ConnectorContainer.Connector = Connector;
@@ -9299,44 +8798,41 @@ Stepper.ConnectorContainer = ConnectorContainer;
 import React41 from "react";
 var import_ban2 = __toESM(require_ban());
 var Switch = React41.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { id, children, name, disabled = false, readOnly = false } = _b, props = __objRest(_b, ["id", "children", "name", "disabled", "readOnly"]);
-    return /* @__PURE__ */ React41.createElement("span", { className: tw("relative inline-flex justify-center items-center self-center group") }, /* @__PURE__ */ React41.createElement(
-      "input",
-      __spreadProps(__spreadValues({
-        id,
-        ref,
-        type: "checkbox",
-        name
-      }, props), {
-        className: classNames(
-          tw(
-            "appearance-none peer/switch rounded-full inline-block w-[34px] h-[20px] transition duration-300",
-            "outline-none focusable bg-intense",
-            "cursor-pointer disabled:cursor-not-allowed",
-            {
-              "hover:bg-intense checked:bg-primary-default hover:checked:bg-primary-intense": !disabled,
-              "bg-default checked:opacity-50 checked:bg-primary-muted": disabled
-            }
-          )
-        ),
-        readOnly,
-        disabled
-      })
-    ), /* @__PURE__ */ React41.createElement(
-      "span",
-      {
-        className: tw(
-          "pointer-events-none rounded-full absolute inline-flex justify-center items-center transition duration-300 h-4 w-4 transform peer-checked/switch:translate-x-5",
-          "bg-white left-2 peer-checked/switch:left-1 text-inactive peer-checked/switch:text-primary-muted",
+  ({ id, children, name, disabled = false, readOnly = false, ...props }, ref) => /* @__PURE__ */ React41.createElement("span", { className: tw("relative inline-flex justify-center items-center self-center group") }, /* @__PURE__ */ React41.createElement(
+    "input",
+    {
+      id,
+      ref,
+      type: "checkbox",
+      name,
+      ...props,
+      className: classNames(
+        tw(
+          "appearance-none peer/switch rounded-full inline-block w-[34px] h-[20px] transition duration-300",
+          "outline-none focusable bg-intense",
+          "cursor-pointer disabled:cursor-not-allowed",
           {
-            "shadow-4dp": !disabled
+            "hover:bg-intense checked:bg-primary-default hover:checked:bg-primary-intense": !disabled,
+            "bg-default checked:opacity-50 checked:bg-primary-muted": disabled
           }
         )
-      },
-      disabled && /* @__PURE__ */ React41.createElement(Icon, { icon: import_ban2.default, width: "10px", height: "10px" })
-    ));
-  }
+      ),
+      readOnly,
+      disabled
+    }
+  ), /* @__PURE__ */ React41.createElement(
+    "span",
+    {
+      className: tw(
+        "pointer-events-none rounded-full absolute inline-flex justify-center items-center transition duration-300 h-4 w-4 transform peer-checked/switch:translate-x-5",
+        "bg-white left-2 peer-checked/switch:left-1 text-inactive peer-checked/switch:text-primary-muted",
+        {
+          "shadow-4dp": !disabled
+        }
+      )
+    },
+    disabled && /* @__PURE__ */ React41.createElement(Icon, { icon: import_ban2.default, width: "10px", height: "10px" })
+  ))
 );
 export {
   Alert,