@aivenio/aquarium 4.0.0 → 4.1.0

package/dist/atoms.mjs

@@ -4996,7 +4996,7 @@ var Button2 = React3.forwardRef(
         dense,
         loading,
         className: UNSAFE_className,
-        "aria-label": ariaLabel ?? tooltip,
+        "aria-label": kind === "icon" ? ariaLabel ?? tooltip : ariaLabel,
         ...props
       },
       /* @__PURE__ */ React3.createElement(LoadingSpinner, { dense: true, loading }, icon && iconPlacement === "left" && /* @__PURE__ */ React3.createElement(Icon, { icon, dense }), children, icon && iconPlacement === "right" && /* @__PURE__ */ React3.createElement(Icon, { icon, dense }))
@@ -10291,6 +10291,15 @@ var Dialog = (props) => {
 
 // src/atoms/DropdownMenu/DropdownMenu.tsx
 import React28 from "react";
+import {
+  Collection as AriaCollection,
+  composeRenderProps,
+  Header as AriaHeader,
+  Menu as AriaMenu,
+  MenuItem as AriaMenuItem,
+  MenuSection as AriaMenuSection
+} from "react-aria-components";
+import { tv as tv4 } from "tailwind-variants";
 
 // src/molecules/Badge/Badge.tsx
 import React27 from "react";
@@ -10423,80 +10432,232 @@ var ChipBadge = createBadge("chip", "ChipBadge");
 
 // src/atoms/DropdownMenu/DropdownMenu.tsx
 var import_tick3 = __toESM(require_tick());
-var DropdownMenu = React28.forwardRef(
-  ({ minHeight, maxHeight = "100%", minWidth = "125px", maxWidth, className, children, ...props }, ref) => /* @__PURE__ */ React28.createElement(
-    "div",
+var dropdownMenuStyles = tv4({
+  base: "bg-popover-content w-full flex flex-col overflow-x-hidden typography-small text-default"
+});
+var DropdownMenu = ({
+  minHeight,
+  maxHeight = "100%",
+  minWidth = "125px",
+  maxWidth,
+  className,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ React28.createElement(
+    AriaMenu,
     {
-      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"
-      ),
+      className: dropdownMenuStyles({ className: ["Aquarium-DropdownMenu", className] }),
       ...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(
-  ({ 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(
-  ({ 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)
-);
+var dropdownMenuGroupStyles = tv4({
+  slots: {
+    base: [
+      '[&:not(:first-child)]:before:content-[""] [&:not(:first-child)]:before:block',
+      "[&:not(:first-child)]:before:h-[1px] [&:not(:first-child)]:before:bg-default [&:not(:first-child)]:before:m-3"
+    ],
+    title: "p-3 text-inactive uppercase cursor-default typography-caption"
+  }
+});
+var Group = ({ className, title, titleProps, children, ...props }) => {
+  const styles = dropdownMenuGroupStyles();
+  return /* @__PURE__ */ React28.createElement(AriaMenuSection, { className: styles.base({ className: "Aquarium-DropdownMenu.Group" }), ...props }, title && /* @__PURE__ */ React28.createElement(AriaHeader, { className: styles.title(), ...titleProps }, title), /* @__PURE__ */ React28.createElement(AriaCollection, null, children));
+};
 DropdownMenu.Group = Group;
-var Item2 = React28.forwardRef(
-  ({ kind, highlighted, selected, className, icon, showNotification = false, children, ...props }, ref) => /* @__PURE__ */ React28.createElement(
-    "li",
+var dropdownMenuItemStyles = tv4({
+  base: "group flex items-center gap-x-3 p-3 outline-none cursor-pointer",
+  variants: {
+    isDisabled: {
+      true: "text-inactive cursor-not-allowed"
+    },
+    isFocused: {
+      true: "bg-muted"
+    },
+    kind: {
+      action: "",
+      danger: "",
+      default: ""
+    }
+  },
+  compoundVariants: [
     {
-      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
+      kind: "action",
+      disabled: false,
+      className: "text-primary-intense"
     },
-    icon && showNotification && /* @__PURE__ */ React28.createElement(Badge.Notification, null, /* @__PURE__ */ React28.createElement(InlineIcon2, { icon })),
-    icon && !showNotification && /* @__PURE__ */ React28.createElement(InlineIcon2, { icon }),
-    /* @__PURE__ */ React28.createElement("span", { className: tw("grow") }, children),
-    selected && /* @__PURE__ */ React28.createElement(InlineIcon2, { icon: import_tick3.default })
-  )
+    {
+      kind: "danger",
+      disabled: false,
+      className: "text-danger-default"
+    }
+  ]
+});
+var Item2 = ({
+  kind = "default",
+  className,
+  icon,
+  description,
+  showNotification = false,
+  disabled,
+  ...props
+}) => /* @__PURE__ */ React28.createElement(
+  AriaMenuItem,
+  {
+    className: (values) => dropdownMenuItemStyles({ ...values, kind, className: ["Aquarium-DropdownMenu.Item", className] }),
+    isDisabled: disabled,
+    ...props
+  },
+  composeRenderProps(props.children, (children, { selectionMode, isSelected, isDisabled }) => /* @__PURE__ */ React28.createElement(React28.Fragment, null, icon && showNotification && /* @__PURE__ */ React28.createElement(Badge.Notification, null, /* @__PURE__ */ React28.createElement(InlineIcon2, { icon })), icon && !showNotification && /* @__PURE__ */ React28.createElement(InlineIcon2, { icon }), /* @__PURE__ */ React28.createElement("span", { className: tw("grow") }, children, description && /* @__PURE__ */ React28.createElement(Typography2.Caption, { color: isDisabled ? "inactive" : "muted" }, description)), selectionMode !== "none" && isSelected && /* @__PURE__ */ React28.createElement(InlineIcon2, { 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 = ({ className, ...props }) => {
-  return /* @__PURE__ */ React28.createElement("li", { ...props, className: classNames(className, tw("m-3 block bg-default h-[1px]")) });
-};
-DropdownMenu.Separator = Separator;
 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/Filter/Filter.tsx
+import React29 from "react";
+import {
+  Button as AriaButton,
+  DatePickerStateContext as AriaDatePickerStateContext,
+  DateRangePickerStateContext as AriaDateRangePickerStateContext,
+  Group as AriaGroup
+} from "react-aria-components";
+import { tv as tv5 } from "tailwind-variants";
+var import_cross3 = __toESM(require_cross());
+var DATE_FORMAT_OPTIONS = {
+  locale: "en-GB",
+  options: { day: "numeric", month: "numeric", year: "numeric" }
+};
+var filterWrapper = tv5({
+  base: "rounded-full inline-flex items-center pressed:border-info-default justify-between outline-0 outline-none border border-dashed border-default text-default bg-transparent",
+  variants: {
+    isHovered: {
+      true: "hover:bg-muted"
+    },
+    isFocusWithin: {
+      true: "border-solid border-info-default"
+    },
+    isInvalid: {
+      true: "border-solid border-danger-default"
+    },
+    hasValue: {
+      true: "border-solid"
+    }
+  }
+});
+var FilterTrigger = ({
+  labelText,
+  icon,
+  badge,
+  onClear,
+  onClick,
+  value,
+  // children,
+  error: error2 = false,
+  ...props
+}) => {
+  const ariaDatePickerState = React29.useContext(AriaDatePickerStateContext);
+  const ariaDateRangePickerState = React29.useContext(AriaDateRangePickerStateContext);
+  const isUsedInsideDatePicker = !!ariaDatePickerState?.value;
+  const isUsedInsideDateRangePicker = !!ariaDateRangePickerState?.value.start && !!ariaDateRangePickerState.value.end;
+  const onClearDatePickerRelated = () => {
+    if (isUsedInsideDatePicker) {
+      ariaDatePickerState.setValue(null);
+    } else if (isUsedInsideDateRangePicker) {
+      ariaDateRangePickerState.setValue(null);
+    }
+  };
+  const hasValue = !!value || isUsedInsideDatePicker || isUsedInsideDateRangePicker;
+  const showClearButton = !!onClear && !!value || isUsedInsideDatePicker || isUsedInsideDateRangePicker;
+  return /* @__PURE__ */ React29.createElement(
+    AriaGroup,
+    {
+      ...props,
+      isInvalid: error2,
+      className: (renderProps) => filterWrapper({ ...renderProps, hasValue: hasValue || !!badge })
+    },
+    /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement(
+      AriaButton,
+      {
+        onPress: () => {
+          onClick && onClick();
+        },
+        className: tw("outline-0 outline-none flex items-center py-3 cursor-pointer", {
+          "pl-4 pr-[6px]": showClearButton,
+          // keep padding right the same as padding left of <FilterClearButton>
+          "px-4": !showClearButton
+        })
+      },
+      /* @__PURE__ */ React29.createElement("div", { className: tw("flex items-center gap-3 divide-x divide-grey-20") }, /* @__PURE__ */ React29.createElement("div", { className: tw("flex items-center gap-3") }, /* @__PURE__ */ React29.createElement("div", { className: tw("flex items-center gap-2") }, /* @__PURE__ */ React29.createElement(InlineIcon2, { icon }), /* @__PURE__ */ React29.createElement(Typography2.Small, null, labelText)), badge && /* @__PURE__ */ React29.createElement(Typography2, { color: "primary-active", className: tw("flex items-center") }, /* @__PURE__ */ React29.createElement(Badge, { dense: true, value: badge }))), hasValue && /* @__PURE__ */ React29.createElement("div", { className: "pl-3" }, /* @__PURE__ */ React29.createElement(
+        Typography2.Small,
+        {
+          className: tw("truncate max-w-[233px]"),
+          color: error2 ? "danger-intense" : "primary-active"
+        },
+        value,
+        isUsedInsideDatePicker && /* @__PURE__ */ React29.createElement(DateDisplay, { state: ariaDatePickerState }),
+        isUsedInsideDateRangePicker && /* @__PURE__ */ React29.createElement(DateDisplay, { state: ariaDateRangePickerState })
+      )))
+    ), showClearButton && /* @__PURE__ */ React29.createElement(
+      FilterClearButton,
+      {
+        onClear: () => {
+          onClearDatePickerRelated();
+          onClear?.();
+        }
+      }
+    ))
+  );
+};
+var isDateRangePickerState = (state) => {
+  return "value" in state && state.value !== null && "start" in state.value;
+};
+var DateDisplay = ({ state }) => {
+  const primary = isDateRangePickerState(state) ? state.formatValue(DATE_FORMAT_OPTIONS.locale, DATE_FORMAT_OPTIONS.options)?.start : state.formatValue(DATE_FORMAT_OPTIONS.locale, DATE_FORMAT_OPTIONS.options);
+  const secondary = isDateRangePickerState(state) ? state.formatValue(DATE_FORMAT_OPTIONS.locale, DATE_FORMAT_OPTIONS.options)?.end : void 0;
+  return /* @__PURE__ */ React29.createElement(Box.Flex, { gap: "2" }, /* @__PURE__ */ React29.createElement("span", null, primary), secondary && /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement("span", { "aria-hidden": true, className: tw("text-muted") }, "-"), /* @__PURE__ */ React29.createElement("span", null, secondary)));
+};
+var FilterClearButton = ({ onClear }) => (
+  // using a native HTML <button> here instead of <Button slot={null} /> from react-aria because react-aria <DialogTrigger> doesn't support it as a child. If we used <Button slot={null}>, the popover would open simultaneously with the clear callback, which is unintended behavior. Interestingly, this issue doesn't occur in react-aria's <DatePicker>, but for consistency and to avoid conflicts here, we're sticking with a plain button.
+  /* @__PURE__ */ React29.createElement(
+    "button",
+    {
+      "aria-label": "Clear filter",
+      onClick: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const previousButton = e.currentTarget.previousElementSibling;
+        if (previousButton instanceof HTMLElement) {
+          previousButton.focus();
+        }
+        onClear();
+      },
+      className: tw(
+        "py-[10px] pl-[6px] pr-4 inline-flex items-center hover:bg-default focus:bg-default outline-0 outline-none rounded-r-full"
+        // keep padding left the same as padding right of its button sibling.
+      )
+    },
+    /* @__PURE__ */ React29.createElement(InlineIcon2, { icon: import_cross3.default })
+  )
+);
+var Filter = () => null;
+FilterTrigger.displayName = "Filter.Trigger";
+Filter.Trigger = FilterTrigger;
+
 // src/atoms/InputGroup/InputGroup.tsx
-import React31 from "react";
+import React32 from "react";
 
 // src/molecules/Grid/Grid.tsx
-import React30 from "react";
+import React31 from "react";
 import { isEmpty, mapValues, pick } from "lodash-es";
 
 // src/molecules/Tailwindify/Tailwindify.tsx
-import React29 from "react";
+import React30 from "react";
 import { get as get2, isUndefined as isUndefined7 } from "lodash-es";
 function Tailwindify(Component) {
   return ({
@@ -10557,8 +10718,8 @@ function Tailwindify(Component) {
       ...otherProps,
       style: finalStyle
     };
-    const childrenWithProps = React29.Children.map(children, (child, index) => {
-      if (!React29.isValidElement(child)) {
+    const childrenWithProps = React30.Children.map(children, (child, index) => {
+      if (!React30.isValidElement(child)) {
         return child;
       }
       const isLastChild = index === children.length - 1;
@@ -10579,9 +10740,9 @@ function Tailwindify(Component) {
       }
       const childStyle = get2(child, ["props", "style"], {});
       const newProps = { ...childProps, style: { ...childStyle, ...additionalStyle } };
-      return React29.cloneElement(child, newProps);
+      return React30.cloneElement(child, newProps);
     });
-    return /* @__PURE__ */ React29.createElement(Component, { className, ...componentProps }, childrenWithProps);
+    return /* @__PURE__ */ React30.createElement(Component, { className, ...componentProps }, childrenWithProps);
   };
 }
 
@@ -10620,7 +10781,7 @@ var GridItem = Tailwindify(
       gridRowEnd: rowEnd
     });
     const HtmlElement = htmlTag;
-    return /* @__PURE__ */ React30.createElement(
+    return /* @__PURE__ */ React31.createElement(
       HtmlElement,
       {
         style: { ...hookStyle, ...style },
@@ -10632,7 +10793,7 @@ var GridItem = Tailwindify(
   }
 );
 var Grid = (props) => {
-  return /* @__PURE__ */ React30.createElement(GridComponent, { ...props });
+  return /* @__PURE__ */ React31.createElement(GridComponent, { ...props });
 };
 var GridComponent = Tailwindify(
   ({
@@ -10687,7 +10848,7 @@ var GridComponent = Tailwindify(
       gridRowEnd: rowEnd
     });
     const HtmlElement = htmlTag;
-    return /* @__PURE__ */ React30.createElement(
+    return /* @__PURE__ */ React31.createElement(
       HtmlElement,
       {
         style: { ...hookStyle, ...style },
@@ -10710,7 +10871,7 @@ var gridColumnStyles = {
   "auto": "auto-cols-fr"
 };
 var InputGroup = ({ cols = "1", children, ...rest }) => {
-  return /* @__PURE__ */ React31.createElement(
+  return /* @__PURE__ */ React32.createElement(
     Grid,
     {
       ...rest,
@@ -10725,9 +10886,9 @@ var InputGroup = ({ cols = "1", children, ...rest }) => {
 };
 
 // src/atoms/Link/Link.tsx
-import React32 from "react";
-import { tv as tv4 } from "tailwind-variants";
-var linkStyle = tv4({
+import React33 from "react";
+import { tv as tv6 } from "tailwind-variants";
+var linkStyle = tv6({
   extend: interactiveTextStyles,
   base: ["no-underline hover:underline inline-flex gap-3 items-center", focusRingStyle()]
 });
@@ -10737,13 +10898,13 @@ var LinkButton = ({
   kind = "primary",
   dense,
   ...props
-}) => /* @__PURE__ */ React32.createElement("a", { className: classNames(className, buttonClasses({ kind, dense })), ...props }, children);
-var Link = ({ children, className, ...props }) => /* @__PURE__ */ React32.createElement("a", { className: classNames(className, linkStyle()), ...props }, children);
+}) => /* @__PURE__ */ React33.createElement("a", { className: classNames(className, buttonClasses({ kind, dense })), ...props }, children);
+var Link = ({ children, className, ...props }) => /* @__PURE__ */ React33.createElement("a", { className: classNames(className, linkStyle()), ...props }, children);
 
 // src/atoms/Modal/Modal.tsx
-import React33 from "react";
-import { tv as tv5 } from "tailwind-variants";
-var modalStyles = tv5({
+import React34 from "react";
+import { tv as tv7 } from "tailwind-variants";
+var modalStyles = tv7({
   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",
@@ -10846,67 +11007,67 @@ var Modal = ({
   ...rest
 }) => {
   const { overlay } = modalStyles({ kind });
-  return open ? /* @__PURE__ */ React33.createElement("div", { ...rest, className: overlay({ className }) }, children) : null;
+  return open ? /* @__PURE__ */ React34.createElement("div", { ...rest, className: overlay({ className }) }, children) : null;
 };
 Modal.BackDrop = ({ className, ...rest }) => {
   const { backdrop } = modalStyles();
-  return /* @__PURE__ */ React33.createElement("div", { ...rest, className: backdrop({ className }) });
+  return /* @__PURE__ */ React34.createElement("div", { ...rest, className: backdrop({ className }) });
 };
-Modal.Dialog = React33.forwardRef(
+Modal.Dialog = React34.forwardRef(
   ({ kind = "dialog", children, className, size = "md", ...rest }, ref) => {
     const { dialog } = modalStyles({ kind, size });
-    return /* @__PURE__ */ React33.createElement("div", { ref, "aria-modal": "true", ...rest, className: dialog({ className }) }, children);
+    return /* @__PURE__ */ React34.createElement("div", { ref, "aria-modal": "true", ...rest, className: dialog({ className }) }, children);
   }
 );
 Modal.Header = ({ kind = "dialog", size = "md", children, className, ...rest }) => {
   const { header } = modalStyles({ kind, size });
-  return /* @__PURE__ */ React33.createElement("div", { ...rest, className: header({ className }) }, children);
+  return /* @__PURE__ */ React34.createElement("div", { ...rest, className: header({ className }) }, children);
 };
 Modal.HeaderImage = ({ backgroundImage, className, ...rest }) => {
   const { headerImage } = modalStyles({ backgroundImage: Boolean(backgroundImage) });
-  return backgroundImage ? /* @__PURE__ */ React33.createElement("img", { "aria-hidden": true, src: backgroundImage, ...rest, className: headerImage({ className }) }) : /* @__PURE__ */ React33.createElement("div", { className: headerImage({ className }) });
+  return backgroundImage ? /* @__PURE__ */ React34.createElement("img", { "aria-hidden": true, src: backgroundImage, ...rest, className: headerImage({ className }) }) : /* @__PURE__ */ React34.createElement("div", { className: headerImage({ className }) });
 };
 Modal.CloseButtonContainer = ({ className, ...rest }) => {
   const { closeButtonContainer } = modalStyles();
-  return /* @__PURE__ */ React33.createElement("div", { ...rest, className: closeButtonContainer({ className }) });
+  return /* @__PURE__ */ React34.createElement("div", { ...rest, className: closeButtonContainer({ className }) });
 };
 Modal.Title = ({ kind = "dialog", children, className, ...rest }) => {
   const { title } = modalStyles({ kind });
-  return /* @__PURE__ */ React33.createElement(Typography, { htmlTag: "h2", variant: "subheading", color: "intense", className: title({ className }), ...rest }, children);
+  return /* @__PURE__ */ React34.createElement(Typography, { htmlTag: "h2", variant: "subheading", color: "intense", className: title({ className }), ...rest }, children);
 };
-Modal.Subtitle = ({ children, ...rest }) => /* @__PURE__ */ React33.createElement(Typography, { variant: "small", color: "default", ...rest }, children);
+Modal.Subtitle = ({ children, ...rest }) => /* @__PURE__ */ React34.createElement(Typography, { variant: "small", color: "default", ...rest }, children);
 Modal.TitleContainer = ({ children, className, ...rest }) => {
   const { titleContainer } = modalStyles();
-  return /* @__PURE__ */ React33.createElement("div", { ...rest, className: titleContainer({ className }) }, children);
+  return /* @__PURE__ */ React34.createElement("div", { ...rest, className: titleContainer({ className }) }, children);
 };
 Modal.Body = ({ children, className, noFooter = false, maxHeight, style, ...rest }) => {
   const { body } = modalStyles();
-  return /* @__PURE__ */ React33.createElement("div", { ...rest, className: body({ noFooter, className }), style: { maxHeight, ...style } }, children);
+  return /* @__PURE__ */ React34.createElement("div", { ...rest, className: body({ noFooter, className }), style: { maxHeight, ...style } }, children);
 };
 Modal.Footer = ({ children, className, ...rest }) => {
   const { footer } = modalStyles();
-  return /* @__PURE__ */ React33.createElement("div", { ...rest, className: footer({ className }) }, children);
+  return /* @__PURE__ */ React34.createElement("div", { ...rest, className: footer({ className }) }, children);
 };
 Modal.Actions = ({ children, className, ...rest }) => {
   const { actions } = modalStyles();
-  return /* @__PURE__ */ React33.createElement("div", { ...rest, className: actions({ className }) }, children);
+  return /* @__PURE__ */ React34.createElement("div", { ...rest, className: actions({ className }) }, children);
 };
 
 // src/atoms/Navigation/Navigation.tsx
-import React34 from "react";
+import React35 from "react";
 var Navigation = ({
   className,
   children,
   "aria-label": ariaLabel,
   ...rest
-}) => /* @__PURE__ */ React34.createElement("nav", { className: classNames(tw("bg-muted h-full")), "aria-label": ariaLabel }, /* @__PURE__ */ React34.createElement("ul", { ...rest, className: classNames(tw("flex flex-col h-full"), className), role: "menubar" }, children));
-var Header = ({ className, ...rest }) => /* @__PURE__ */ React34.createElement("li", { ...rest, role: "presentation", className: classNames(tw("px-6 py-5"), className) });
-var Title2 = ({ className, ...props }) => /* @__PURE__ */ React34.createElement(Typography, { variant: "caption", className: classNames("uppercase text-muted", className), ...props });
-var Subtitle = ({ className, ...props }) => /* @__PURE__ */ React34.createElement(Typography, { variant: "small-strong", className: classNames("text-intense", className), ...props });
-var Footer = ({ className, ...rest }) => /* @__PURE__ */ React34.createElement("li", { ...rest, role: "presentation", className: classNames(tw("px-6 py-5 mt-auto"), className) });
-var Section = ({ title, className, ...rest }) => /* @__PURE__ */ React34.createElement("li", { role: "presentation", className: tw("py-5") }, title && /* @__PURE__ */ React34.createElement("div", { className: classNames(className, "py-2 px-6 text-inactive uppercase cursor-default typography-caption") }, title), /* @__PURE__ */ React34.createElement("ul", { ...rest, role: "group", className: classNames(tw("flex flex-col"), className) }));
-var Divider = ({ className, ...rest }) => /* @__PURE__ */ React34.createElement("li", { "aria-hidden": true, ...rest, className: classNames(tw("border-t-2 border-muted"), className) });
-var Item3 = ({ className, active, ...rest }) => /* @__PURE__ */ React34.createElement("li", { role: "presentation" }, /* @__PURE__ */ React34.createElement(
+}) => /* @__PURE__ */ React35.createElement("nav", { className: classNames(tw("bg-muted h-full")), "aria-label": ariaLabel }, /* @__PURE__ */ React35.createElement("ul", { ...rest, className: classNames(tw("flex flex-col h-full"), className), role: "menubar" }, children));
+var Header = ({ className, ...rest }) => /* @__PURE__ */ React35.createElement("li", { ...rest, role: "presentation", className: classNames(tw("px-6 py-5"), className) });
+var Title2 = ({ className, ...props }) => /* @__PURE__ */ React35.createElement(Typography, { variant: "caption", className: classNames("uppercase text-muted", className), ...props });
+var Subtitle = ({ className, ...props }) => /* @__PURE__ */ React35.createElement(Typography, { variant: "small-strong", className: classNames("text-intense", className), ...props });
+var Footer = ({ className, ...rest }) => /* @__PURE__ */ React35.createElement("li", { ...rest, role: "presentation", className: classNames(tw("px-6 py-5 mt-auto"), className) });
+var Section = ({ title, className, ...rest }) => /* @__PURE__ */ React35.createElement("li", { role: "presentation", className: tw("py-5") }, title && /* @__PURE__ */ React35.createElement("div", { className: classNames(className, "py-2 px-6 text-inactive uppercase cursor-default typography-caption") }, title), /* @__PURE__ */ React35.createElement("ul", { ...rest, role: "group", className: classNames(tw("flex flex-col"), className) }));
+var Divider = ({ className, ...rest }) => /* @__PURE__ */ React35.createElement("li", { "aria-hidden": true, ...rest, className: classNames(tw("border-t-2 border-muted"), className) });
+var Item3 = ({ className, active, ...rest }) => /* @__PURE__ */ React35.createElement("li", { role: "presentation" }, /* @__PURE__ */ React35.createElement(
   "a",
   {
     ...rest,
@@ -10926,7 +11087,7 @@ var Submenu = ({
   title,
   id,
   ...rest
-}) => /* @__PURE__ */ React34.createElement("li", { role: "presentation" }, /* @__PURE__ */ React34.createElement(
+}) => /* @__PURE__ */ React35.createElement("li", { role: "presentation" }, /* @__PURE__ */ React35.createElement(
   "a",
   {
     role: "menuitem",
@@ -10940,8 +11101,8 @@ var Submenu = ({
     ...rest
   },
   title
-), /* @__PURE__ */ React34.createElement("ul", { role: "menu", className: classNames(tw("flex flex-col")), "aria-labelledby": id }, children));
-var SubmenuItem = ({ className, active, ...rest }) => /* @__PURE__ */ React34.createElement(Navigation.Item, { ...rest, active, className: classNames(className, tw("pl-[56px]")) });
+), /* @__PURE__ */ React35.createElement("ul", { role: "menu", className: classNames(tw("flex flex-col")), "aria-labelledby": id }, children));
+var SubmenuItem = ({ className, active, ...rest }) => /* @__PURE__ */ React35.createElement(Navigation.Item, { ...rest, active, className: classNames(className, tw("pl-[56px]")) });
 Header.Title = Title2;
 Header.Subtitle = Subtitle;
 Submenu.Item = SubmenuItem;
@@ -10953,11 +11114,11 @@ Navigation.Submenu = Submenu;
 Navigation.Divider = Divider;
 
 // src/atoms/PageHeader/PageHeader.tsx
-import React35 from "react";
-var PageHeader = ({ children, className, ...rest }) => /* @__PURE__ */ React35.createElement("div", { className: classNames(tw("flex flex-row gap-4 pb-6"), className), ...rest }, children);
-PageHeader.Container = ({ children, className, ...rest }) => /* @__PURE__ */ React35.createElement("div", { className: classNames(tw("flex flex-col grow gap-0"), className), ...rest }, children);
-PageHeader.TitleContainer = ({ children, className, ...rest }) => /* @__PURE__ */ React35.createElement("div", { className: classNames(tw("flex flex-col justify-center gap-2"), className), ...rest }, children);
-PageHeader.Title = ({ isSubHeader = false, children, ...rest }) => /* @__PURE__ */ React35.createElement(
+import React36 from "react";
+var PageHeader = ({ children, className, ...rest }) => /* @__PURE__ */ React36.createElement("div", { className: classNames(tw("flex flex-row gap-4 pb-6"), className), ...rest }, children);
+PageHeader.Container = ({ children, className, ...rest }) => /* @__PURE__ */ React36.createElement("div", { className: classNames(tw("flex flex-col grow gap-0"), className), ...rest }, children);
+PageHeader.TitleContainer = ({ children, className, ...rest }) => /* @__PURE__ */ React36.createElement("div", { className: classNames(tw("flex flex-col justify-center gap-2"), className), ...rest }, children);
+PageHeader.Title = ({ isSubHeader = false, children, ...rest }) => /* @__PURE__ */ React36.createElement(
   Typography2,
   {
     ...rest,
@@ -10967,32 +11128,32 @@ PageHeader.Title = ({ isSubHeader = false, children, ...rest }) => /* @__PURE__
   },
   children
 );
-PageHeader.Subtitle = ({ children, ...rest }) => /* @__PURE__ */ React35.createElement(Typography2.Small, { ...rest, color: "default" }, children);
-PageHeader.Chips = ({ children, className, ...rest }) => /* @__PURE__ */ React35.createElement("div", { className: classNames(tw("flex gap-3"), className), ...rest }, children);
-PageHeader.Actions = ({ children, className, ...rest }) => /* @__PURE__ */ React35.createElement("div", { className: classNames(tw("flex flex-row gap-4 self-start"), className), ...rest }, children);
+PageHeader.Subtitle = ({ children, ...rest }) => /* @__PURE__ */ React36.createElement(Typography2.Small, { ...rest, color: "default" }, children);
+PageHeader.Chips = ({ children, className, ...rest }) => /* @__PURE__ */ React36.createElement("div", { className: classNames(tw("flex gap-3"), className), ...rest }, children);
+PageHeader.Actions = ({ children, className, ...rest }) => /* @__PURE__ */ React36.createElement("div", { className: classNames(tw("flex flex-row gap-4 self-start"), className), ...rest }, children);
 
 // src/atoms/Popover/Popover.tsx
-import React36 from "react";
+import React37 from "react";
 import {
-  composeRenderProps,
+  composeRenderProps as composeRenderProps2,
   OverlayArrow,
   Popover as AriaPopover
 } from "react-aria-components";
-import { tv as tv6 } from "tailwind-variants";
-var popoverStyles = tv6({
+import { tv as tv8 } from "tailwind-variants";
+var popoverStyles = tv8({
   base: "rounded-sm shadow-16dp bg-popover-content mt-1 overflow-y-auto flex flex-col border border-default outline-none"
 });
-var Popover = React36.forwardRef(
+var Popover = React37.forwardRef(
   ({ children, offset = 0, className, placement: _placement = "bottom-left", ...props }, ref) => {
     const placement = _placement.replace("-", " ");
-    return /* @__PURE__ */ React36.createElement(
+    return /* @__PURE__ */ React37.createElement(
       AriaPopover,
       {
         ref,
         offset,
         placement,
         ...props,
-        className: composeRenderProps(
+        className: composeRenderProps2(
           className,
           (className2, renderProps) => popoverStyles({ ...renderProps, className: className2 })
         )
@@ -11001,7 +11162,7 @@ var Popover = React36.forwardRef(
     );
   }
 );
-var PopoverArrow = () => /* @__PURE__ */ React36.createElement(OverlayArrow, { className: "group" }, /* @__PURE__ */ React36.createElement(
+var PopoverArrow = () => /* @__PURE__ */ React37.createElement(OverlayArrow, { className: "group" }, /* @__PURE__ */ React37.createElement(
   "svg",
   {
     width: 12,
@@ -11009,18 +11170,18 @@ var PopoverArrow = () => /* @__PURE__ */ React36.createElement(OverlayArrow, { c
     viewBox: "0 0 12 12",
     className: "block fill-white stroke-1 stroke-black group-placement-bottom:rotate-180 group-placement-left:-rotate-90 group-placement-right:rotate-90"
   },
-  /* @__PURE__ */ React36.createElement("path", { d: "M0 0 L6 6 L12 0" })
+  /* @__PURE__ */ React37.createElement("path", { d: "M0 0 L6 6 L12 0" })
 ));
 PopoverArrow.displayName = "Popover.Arrow";
 Popover.Arrow = PopoverArrow;
 
 // src/atoms/PopoverDialog/PopoverDialog.tsx
-import React37 from "react";
-var Header2 = ({ children, className, ...rest }) => /* @__PURE__ */ React37.createElement("div", { ...rest, className: classNames(tw("p-5 gap-3 flex items-center"), className) }, children);
-var Title3 = ({ children, className, ...rest }) => /* @__PURE__ */ React37.createElement(Typography, { ...rest, htmlTag: "h1", variant: "small-strong" }, children);
-var Body = ({ children, className, ...rest }) => /* @__PURE__ */ React37.createElement(Typography, { ...rest, htmlTag: "div", variant: "caption", className: classNames(tw("px-5 overflow-y-auto"), className) }, children);
-var Footer2 = ({ children, className, ...rest }) => /* @__PURE__ */ React37.createElement("div", { ...rest, className: classNames(tw("p-5"), className) }, children);
-var Actions2 = ({ children, className, ...rest }) => /* @__PURE__ */ React37.createElement("div", { ...rest, className: classNames(tw("flex gap-4"), className) }, children);
+import React38 from "react";
+var Header2 = ({ children, className, ...rest }) => /* @__PURE__ */ React38.createElement("div", { ...rest, className: classNames(tw("p-5 gap-3 flex items-center"), className) }, children);
+var Title3 = ({ children, className, ...rest }) => /* @__PURE__ */ React38.createElement(Typography, { ...rest, htmlTag: "h1", variant: "small-strong" }, children);
+var Body = ({ children, className, ...rest }) => /* @__PURE__ */ React38.createElement(Typography, { ...rest, htmlTag: "div", variant: "caption", className: classNames(tw("px-5 overflow-y-auto"), className) }, children);
+var Footer2 = ({ children, className, ...rest }) => /* @__PURE__ */ React38.createElement("div", { ...rest, className: classNames(tw("p-5"), className) }, children);
+var Actions2 = ({ children, className, ...rest }) => /* @__PURE__ */ React38.createElement("div", { ...rest, className: classNames(tw("flex gap-4"), className) }, children);
 var PopoverDialog = {
   Header: Header2,
   Title: Title3,
@@ -11030,9 +11191,9 @@ var PopoverDialog = {
 };
 
 // src/atoms/ProgressBar/ProgressBar.tsx
-import React38 from "react";
+import React39 from "react";
 import { clamp } from "lodash-es";
-var ProgressBar = ({ children, className, ...rest }) => /* @__PURE__ */ React38.createElement(
+var ProgressBar = ({ children, className, ...rest }) => /* @__PURE__ */ React39.createElement(
   "div",
   {
     ...rest,
@@ -11048,7 +11209,7 @@ var STATUS_COLORS = {
 };
 ProgressBar.Indicator = ({ min, max, value, "aria-label": ariaLabel, status, className, ...rest }) => {
   const completedPercentage = clamp((value - min) / (max - min) * 100, 0, 100);
-  return /* @__PURE__ */ React38.createElement(
+  return /* @__PURE__ */ React39.createElement(
     "div",
     {
       ...rest,
@@ -11066,17 +11227,17 @@ ProgressBar.Indicator = ({ min, max, value, "aria-label": ariaLabel, status, cla
     }
   );
 };
-ProgressBar.Labels = ({ children, startLabel, endLabel, className, ...rest }) => /* @__PURE__ */ React38.createElement("div", { className: classNames(tw("flex flex-row"), className) }, /* @__PURE__ */ React38.createElement("span", { ...rest, className: tw("grow text-default typography-caption") }, startLabel), /* @__PURE__ */ React38.createElement("span", { ...rest, className: tw("grow text-default typography-caption text-right") }, endLabel));
+ProgressBar.Labels = ({ children, startLabel, endLabel, className, ...rest }) => /* @__PURE__ */ React39.createElement("div", { className: classNames(tw("flex flex-row"), className) }, /* @__PURE__ */ React39.createElement("span", { ...rest, className: tw("grow text-default typography-caption") }, startLabel), /* @__PURE__ */ React39.createElement("span", { ...rest, className: tw("grow text-default typography-caption text-right") }, endLabel));
 
 // src/atoms/Section/Section.tsx
-import React39 from "react";
+import React40 from "react";
 var import_caretUp2 = __toESM(require_caretUp());
 var Section2 = ({
   children,
   className,
   ...rest
-}) => /* @__PURE__ */ React39.createElement(Box, { component: "section", ...rest, className: classNames(tw("border border-muted"), className) }, children);
-Section2.Header = ({ children, className, expanded, ...rest }) => /* @__PURE__ */ React39.createElement(
+}) => /* @__PURE__ */ React40.createElement(Box, { component: "section", ...rest, className: classNames(tw("border border-muted"), className) }, children);
+Section2.Header = ({ children, className, expanded, ...rest }) => /* @__PURE__ */ React40.createElement(
   "div",
   {
     ...rest,
@@ -11089,8 +11250,8 @@ Section2.Header = ({ children, className, expanded, ...rest }) => /* @__PURE__ *
   },
   children
 );
-Section2.TitleContainer = React39.forwardRef(
-  ({ children, className, collapsible, ...rest }, ref) => /* @__PURE__ */ React39.createElement(
+Section2.TitleContainer = React40.forwardRef(
+  ({ children, className, collapsible, ...rest }, ref) => /* @__PURE__ */ React40.createElement(
     "div",
     {
       ...rest,
@@ -11105,14 +11266,14 @@ Section2.TitleContainer = React39.forwardRef(
     children
   )
 );
-Section2.Toggle = (props) => /* @__PURE__ */ React39.createElement(Icon2, { ...props, icon: import_caretUp2.default, height: 22, width: 22 });
-Section2.Title = ({ children, ...rest }) => /* @__PURE__ */ React39.createElement(Typography2.Large, { ...rest, htmlTag: "h2", color: "intense", className: "flex gap-3 items-center" }, children);
-Section2.Subtitle = ({ children, ...rest }) => /* @__PURE__ */ React39.createElement(Typography2.Small, { ...rest, color: "default" }, children);
-Section2.Actions = ({ children, className, ...rest }) => /* @__PURE__ */ React39.createElement("div", { ...rest, className: classNames(tw("flex gap-4 justify-end"), className) }, children);
-Section2.Body = ({ children, className, ...rest }) => /* @__PURE__ */ React39.createElement("div", { ...rest, className: classNames(tw("p-6"), className) }, /* @__PURE__ */ React39.createElement(Typography, { htmlTag: "div", color: "default" }, children));
+Section2.Toggle = (props) => /* @__PURE__ */ React40.createElement(Icon2, { ...props, icon: import_caretUp2.default, height: 22, width: 22 });
+Section2.Title = ({ children, ...rest }) => /* @__PURE__ */ React40.createElement(Typography2.Large, { ...rest, htmlTag: "h2", color: "intense", className: "flex gap-3 items-center" }, children);
+Section2.Subtitle = ({ children, ...rest }) => /* @__PURE__ */ React40.createElement(Typography2.Small, { ...rest, color: "default" }, children);
+Section2.Actions = ({ children, className, ...rest }) => /* @__PURE__ */ React40.createElement("div", { ...rest, className: classNames(tw("flex gap-4 justify-end"), className) }, children);
+Section2.Body = ({ children, className, ...rest }) => /* @__PURE__ */ React40.createElement("div", { ...rest, className: classNames(tw("p-6"), className) }, /* @__PURE__ */ React40.createElement(Typography, { htmlTag: "div", color: "default" }, children));
 
 // src/atoms/Select/Select.tsx
-import React40 from "react";
+import React41 from "react";
 var import_chevronDown4 = __toESM(require_chevronDown());
 var import_chevronUp4 = __toESM(require_chevronUp());
 var import_search2 = __toESM(require_search());
@@ -11130,11 +11291,11 @@ function isOptionDisabledBuiltin(option) {
   return !!option.disabled;
 }
 var getValues = (children) => {
-  const values = React40.Children.map(children, (c) => c?.props?.value);
+  const values = React41.Children.map(children, (c) => c?.props?.value);
   return values?.filter((v) => v !== void 0 && v !== null) ?? [];
 };
-var InputContainer = React40.forwardRef(
-  ({ variant = "default", className, ...props }, ref) => /* @__PURE__ */ React40.createElement(
+var InputContainer = React41.forwardRef(
+  ({ variant = "default", className, ...props }, ref) => /* @__PURE__ */ React41.createElement(
     "div",
     {
       ref,
@@ -11157,7 +11318,7 @@ var InputContainer = React40.forwardRef(
     }
   )
 );
-var Input = React40.forwardRef(({ className, required, ...props }, ref) => /* @__PURE__ */ React40.createElement(
+var Input = React41.forwardRef(({ className, required, ...props }, ref) => /* @__PURE__ */ React41.createElement(
   "input",
   {
     ref,
@@ -11175,8 +11336,8 @@ var Input = React40.forwardRef(({ className, required, ...props }, ref) => /* @_
     ...props
   }
 ));
-var Menu = React40.forwardRef(
-  ({ maxHeight = "450px", className, children, ...props }, ref) => /* @__PURE__ */ React40.createElement(
+var Menu = React41.forwardRef(
+  ({ maxHeight = "450px", className, children, ...props }, ref) => /* @__PURE__ */ React41.createElement(
     "ul",
     {
       ref,
@@ -11187,12 +11348,12 @@ var Menu = React40.forwardRef(
     children
   )
 );
-var NoResults = React40.forwardRef(
-  ({ className, children, ...rest }, ref) => /* @__PURE__ */ React40.createElement("li", { ref, ...rest, className: classNames(tw("p-3 text-inactive typography-small"), className) }, children)
+var NoResults = React41.forwardRef(
+  ({ className, children, ...rest }, ref) => /* @__PURE__ */ React41.createElement("li", { ref, ...rest, className: classNames(tw("p-3 text-inactive typography-small"), className) }, children)
 );
-var EmptyStateContainer2 = React40.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React40.createElement("li", { ref, className: tw("border border-dashed border-default m-4 p-6"), ...props }, children));
-var Divider2 = (props) => /* @__PURE__ */ React40.createElement("div", { className: tw("border-b-1 border-muted mx-3 my-4"), ...props });
-var Group2 = React40.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React40.createElement(
+var EmptyStateContainer2 = React41.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React41.createElement("li", { ref, className: tw("border border-dashed border-default m-4 p-6"), ...props }, children));
+var Divider2 = (props) => /* @__PURE__ */ React41.createElement("div", { className: tw("border-b-1 border-muted mx-3 my-4"), ...props });
+var Group2 = React41.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React41.createElement(
   "li",
   {
     ref,
@@ -11205,8 +11366,8 @@ var Group2 = React40.forwardRef(({ className, children, ...props }, ref) => /* @
   children
 ));
 var endAdornmentSize = { width: 14, height: 14 };
-var Item4 = React40.forwardRef(
-  ({ highlighted, selected, className, children, ...props }, ref) => /* @__PURE__ */ React40.createElement(
+var Item4 = React41.forwardRef(
+  ({ highlighted, selected, className, children, ...props }, ref) => /* @__PURE__ */ React41.createElement(
     "li",
     {
       ref,
@@ -11217,12 +11378,12 @@ var Item4 = React40.forwardRef(
       }),
       ...props
     },
-    /* @__PURE__ */ React40.createElement("span", { className: tw("grow flex gap-x-3") }, children),
-    selected ? /* @__PURE__ */ React40.createElement(InlineIcon2, { icon: import_tick4.default, ...endAdornmentSize }) : /* @__PURE__ */ React40.createElement("div", { style: endAdornmentSize })
+    /* @__PURE__ */ React41.createElement("span", { className: tw("grow flex gap-x-3") }, children),
+    selected ? /* @__PURE__ */ React41.createElement(InlineIcon2, { icon: import_tick4.default, ...endAdornmentSize }) : /* @__PURE__ */ React41.createElement("div", { style: endAdornmentSize })
   )
 );
-var ActionItem = React40.forwardRef(
-  ({ className, dense, icon, onClick, children, ...props }, ref) => /* @__PURE__ */ React40.createElement(
+var ActionItem = React41.forwardRef(
+  ({ className, dense, icon, onClick, children, ...props }, ref) => /* @__PURE__ */ React41.createElement(
     "li",
     {
       ref,
@@ -11236,11 +11397,11 @@ var ActionItem = React40.forwardRef(
       }),
       ...props
     },
-    icon && /* @__PURE__ */ React40.createElement(InlineIcon2, { icon }),
+    icon && /* @__PURE__ */ React41.createElement(InlineIcon2, { icon }),
     children
   )
 );
-var Toggle = React40.forwardRef(({ hasFocus, isOpen, ...props }, ref) => /* @__PURE__ */ React40.createElement(
+var Toggle = React41.forwardRef(({ hasFocus, isOpen, ...props }, ref) => /* @__PURE__ */ React41.createElement(
   "button",
   {
     ref,
@@ -11249,7 +11410,7 @@ var Toggle = React40.forwardRef(({ hasFocus, isOpen, ...props }, ref) => /* @__P
     ...props,
     className: tw("grow-0 leading-none", { "cursor-not-allowed": props.disabled ?? false })
   },
-  /* @__PURE__ */ React40.createElement(
+  /* @__PURE__ */ React41.createElement(
     InlineIcon2,
     {
       color: props.disabled ? "inactive" : "default",
@@ -11271,15 +11432,15 @@ var Select = {
 };
 
 // src/atoms/Stepper/Stepper.tsx
-import React41 from "react";
+import React42 from "react";
 var import_tick5 = __toESM(require_tick());
-var Stepper = ({ className, ...rest }) => /* @__PURE__ */ React41.createElement("div", { ...rest, className: classNames(className) });
+var Stepper = ({ className, ...rest }) => /* @__PURE__ */ React42.createElement("div", { ...rest, className: classNames(className) });
 var ConnectorContainer = ({
   className,
   completed,
   dense,
   ...rest
-}) => /* @__PURE__ */ React41.createElement(
+}) => /* @__PURE__ */ React42.createElement(
   "div",
   {
     ...rest,
@@ -11292,7 +11453,7 @@ var ConnectorContainer = ({
     )
   }
 );
-var Connector = ({ children, className, completed, dense, ...rest }) => /* @__PURE__ */ React41.createElement(
+var Connector = ({ children, className, completed, dense, ...rest }) => /* @__PURE__ */ React42.createElement(
   "div",
   {
     ...rest,
@@ -11307,7 +11468,7 @@ var Connector = ({ children, className, completed, dense, ...rest }) => /* @__PU
     )
   }
 );
-var Step = ({ className, state, ...rest }) => /* @__PURE__ */ React41.createElement(
+var Step = ({ className, state, ...rest }) => /* @__PURE__ */ React42.createElement(
   "div",
   {
     ...rest,
@@ -11330,7 +11491,7 @@ var getDenseClassNames = (state) => tw("h-[8px] w-[8px]", {
   "bg-intense": state === "inactive",
   "text-success-default": state === "completed"
 });
-var Indicator = ({ children, className, state, dense, ...rest }) => /* @__PURE__ */ React41.createElement(
+var Indicator = ({ children, className, state, dense, ...rest }) => /* @__PURE__ */ React42.createElement(
   "div",
   {
     ...rest,
@@ -11341,7 +11502,7 @@ var Indicator = ({ children, className, state, dense, ...rest }) => /* @__PURE__
       className
     )
   },
-  state === "completed" ? /* @__PURE__ */ React41.createElement(InlineIcon2, { icon: import_tick5.default }) : dense ? null : children
+  state === "completed" ? /* @__PURE__ */ React42.createElement(InlineIcon2, { icon: import_tick5.default }) : dense ? null : children
 );
 Step.Indicator = Indicator;
 Stepper.Step = Step;
@@ -11349,10 +11510,10 @@ ConnectorContainer.Connector = Connector;
 Stepper.ConnectorContainer = ConnectorContainer;
 
 // src/atoms/Switch/Switch.tsx
-import React42 from "react";
+import React43 from "react";
 var import_ban2 = __toESM(require_ban());
-var Switch = React42.forwardRef(
-  ({ id, children, name, disabled = false, readOnly = false, ...props }, ref) => /* @__PURE__ */ React42.createElement("span", { className: tw("relative inline-flex justify-center items-center self-center group") }, /* @__PURE__ */ React42.createElement(
+var Switch = React43.forwardRef(
+  ({ id, children, name, disabled = false, readOnly = false, ...props }, ref) => /* @__PURE__ */ React43.createElement("span", { className: tw("relative inline-flex justify-center items-center self-center group") }, /* @__PURE__ */ React43.createElement(
     "input",
     {
       id,
@@ -11374,7 +11535,7 @@ var Switch = React42.forwardRef(
       readOnly,
       disabled
     }
-  ), /* @__PURE__ */ React42.createElement(
+  ), /* @__PURE__ */ React43.createElement(
     "span",
     {
       className: tw(
@@ -11385,15 +11546,15 @@ var Switch = React42.forwardRef(
         }
       )
     },
-    disabled && /* @__PURE__ */ React42.createElement(Icon2, { icon: import_ban2.default, width: "10px", height: "10px" })
+    disabled && /* @__PURE__ */ React43.createElement(Icon2, { icon: import_ban2.default, width: "10px", height: "10px" })
   ))
 );
 
 // src/atoms/VisuallyHidden/VisuallyHidden.tsx
-import React43 from "react";
+import React44 from "react";
 import { VisuallyHidden as AriaVisuallyHidden } from "@react-aria/visually-hidden";
 var VisuallyHidden = (props) => {
-  return /* @__PURE__ */ React43.createElement(AriaVisuallyHidden, { ...props });
+  return /* @__PURE__ */ React44.createElement(AriaVisuallyHidden, { ...props });
 };
 export {
   Alert,
@@ -11407,6 +11568,7 @@ export {
   DataList,
   Dialog,
   DropdownMenu,
+  Filter,
   Icon,
   InputGroup,
   Item,
@@ -11431,6 +11593,9 @@ export {
   VisuallyHidden,
   buttonClasses,
   cellClassNames,
+  dropdownMenuGroupStyles,
+  dropdownMenuItemStyles,
+  dropdownMenuStyles,
   getAlignClassNames,
   getBodyCellClassNames,
   getHeadCellClassNames,