@aivenio/aquarium 4.1.2 → 4.3.0

package/dist/system.cjs

@@ -4314,16 +4314,16 @@ __export(system_exports, {
   ControlLabel: () => ControlLabel,
   DataList: () => DataList2,
   DataTable: () => DataTable,
-  DatePicker: () => DatePicker,
+  DatePicker: () => DatePicker2,
   DatePickerBase: () => DatePickerBase,
-  DateRangePicker: () => DateRangePicker,
+  DateRangePicker: () => DateRangePicker2,
   DateRangePickerBase: () => DateRangePickerBase,
   DateTimePicker: () => DateTimePicker,
   DateTimePickerBase: () => DateTimePickerBase,
   DateTimeRangePicker: () => DateTimeRangePicker,
   DateTimeRangePickerBase: () => DateTimeRangePickerBase,
   DesignSystemContext: () => DesignSystemContext,
-  Dialog: () => Dialog3,
+  Dialog: () => Dialog2,
   Divider: () => Divider2,
   Drawer: () => Drawer,
   Dropdown: () => Dropdown,
@@ -4332,6 +4332,7 @@ __export(system_exports, {
   EmptyState: () => EmptyState,
   EmptyStateLayout: () => EmptyStateLayout,
   FileInput: () => FileInput,
+  Filter: () => Filter,
   FormControl: () => FormControl,
   Grid: () => Grid,
   HelperText: () => HelperText,
@@ -4360,7 +4361,7 @@ __export(system_exports, {
   Option: () => Option,
   PageHeader: () => PageHeader2,
   Pagination: () => Pagination,
-  Popover: () => Popover3,
+  Popover: () => Popover2,
   PopoverDialog: () => PopoverDialog2,
   Portal: () => Portal,
   PositionerPlacement: () => PositionerPlacement,
@@ -4461,16 +4462,16 @@ __export(molecules_exports, {
   ControlLabel: () => ControlLabel,
   DataList: () => DataList2,
   DataTable: () => DataTable,
-  DatePicker: () => DatePicker,
+  DatePicker: () => DatePicker2,
   DatePickerBase: () => DatePickerBase,
-  DateRangePicker: () => DateRangePicker,
+  DateRangePicker: () => DateRangePicker2,
   DateRangePickerBase: () => DateRangePickerBase,
   DateTimePicker: () => DateTimePicker,
   DateTimePickerBase: () => DateTimePickerBase,
   DateTimeRangePicker: () => DateTimeRangePicker,
   DateTimeRangePickerBase: () => DateTimeRangePickerBase,
   DesignSystemContext: () => DesignSystemContext,
-  Dialog: () => Dialog3,
+  Dialog: () => Dialog2,
   Divider: () => Divider2,
   Drawer: () => Drawer,
   Dropdown: () => Dropdown,
@@ -4479,6 +4480,7 @@ __export(molecules_exports, {
   EmptyState: () => EmptyState,
   EmptyStateLayout: () => EmptyStateLayout,
   FileInput: () => FileInput,
+  Filter: () => Filter,
   Grid: () => Grid,
   Icon: () => Icon,
   InlineIcon: () => InlineIcon,
@@ -4503,7 +4505,7 @@ __export(molecules_exports, {
   Option: () => Option,
   PageHeader: () => PageHeader2,
   Pagination: () => Pagination,
-  Popover: () => Popover3,
+  Popover: () => Popover2,
   PopoverDialog: () => PopoverDialog2,
   Portal: () => Portal,
   ProgressBar: () => ProgressBar2,
@@ -7942,9 +7944,20 @@ var LinkButton2 = ({
   className,
   tooltip,
   tooltipPlacement,
+  "aria-label": ariaLabel,
   ...props
 }) => {
-  const content = /* @__PURE__ */ import_react27.default.createElement(LinkButton, { className: (0, import_classnames5.default)("Aquarium-Link", className), ...props }, icon && iconPlacement === "left" && /* @__PURE__ */ import_react27.default.createElement(Icon2, { icon, dense: props.dense }), children, icon && iconPlacement === "right" && /* @__PURE__ */ import_react27.default.createElement(Icon2, { icon, dense: props.dense }));
+  const content = /* @__PURE__ */ import_react27.default.createElement(
+    LinkButton,
+    {
+      className: (0, import_classnames5.default)("Aquarium-Link", className),
+      "aria-label": props.kind === "icon" ? ariaLabel ?? tooltip : ariaLabel,
+      ...props
+    },
+    icon && iconPlacement === "left" && /* @__PURE__ */ import_react27.default.createElement(Icon2, { icon, dense: props.dense }),
+    children,
+    icon && iconPlacement === "right" && /* @__PURE__ */ import_react27.default.createElement(Icon2, { icon, dense: props.dense })
+  );
   return tooltip ? /* @__PURE__ */ import_react27.default.createElement(Tooltip, { content: tooltip, placement: tooltipPlacement }, content) : content;
 };
 var LinkButtonPrimary = (props) => /* @__PURE__ */ import_react27.default.createElement(LinkButton2, { kind: "primary", ...props });
@@ -8402,7 +8415,7 @@ var Breadcrumbs = (props) => {
   const crumbs = import_react35.default.Children.toArray(children).filter(
     (c) => Boolean(c)
   );
-  return /* @__PURE__ */ import_react35.default.createElement("nav", { className: (0, import_classnames6.default)("Aquarium-Breadcrumbs", className), "aria-label": "Breadcrumbs" }, /* @__PURE__ */ import_react35.default.createElement("ol", { className: tw("flex flex-row flex-nowrap items-center typography-caption") }, crumbs.map((crumb, index) => {
+  return /* @__PURE__ */ import_react35.default.createElement("nav", { className: (0, import_classnames6.default)("Aquarium-Breadcrumbs", className), "aria-label": "Breadcrumbs" }, /* @__PURE__ */ import_react35.default.createElement("ol", { className: tw("flex flex-row flex-wrap items-center typography-caption") }, crumbs.map((crumb, index) => {
     const isLast = index === crumbs.length - 1;
     return (
       // Using index as key here is not good, but there isn't too many other options to choose from either.
@@ -11219,7 +11232,7 @@ var Pressable = import_react76.default.forwardRef(({ children, ...props }, ref)
 var import_react78 = __toESM(require("react"));
 var import_react_aria_components4 = require("react-aria-components");
 
-// src/molecules/Field/Field.tsx
+// src/atoms/Field/Field.tsx
 var import_react77 = __toESM(require("react"));
 var import_react_aria_components3 = require("react-aria-components");
 
@@ -11256,7 +11269,7 @@ var fieldGroup = (0, import_tailwind_variants7.tv)({
   variants: fieldBorder.variants
 });
 
-// src/molecules/Field/Field.tsx
+// src/atoms/Field/Field.tsx
 var FieldGroup = (props) => {
   return /* @__PURE__ */ import_react77.default.createElement(import_react_aria_components3.Group, { ...props, className: (renderProps) => fieldGroup(renderProps) });
 };
@@ -12247,12 +12260,18 @@ DataTable.Skeleton = DataListSkeleton;
 
 // src/molecules/DatePicker/DatePicker.tsx
 var import_react95 = __toESM(require("react"));
-var import_react_aria_components12 = require("react-aria-components");
+var import_react_aria_components11 = require("react-aria-components");
 var import_label2 = require("@react-aria/label");
 var import_utils24 = require("@react-aria/utils");
 var import_lodash_es33 = require("lodash-es");
 
-// src/molecules/DateField/DateInput.tsx
+// src/molecules/TimeField/TimeField.tsx
+var import_react90 = __toESM(require("react"));
+var import_label = require("@react-aria/label");
+var import_utils22 = require("@react-aria/utils");
+var import_lodash_es32 = require("lodash-es");
+
+// src/atoms/DateField/DateField.tsx
 var import_react89 = __toESM(require("react"));
 var import_react_aria_components6 = require("react-aria-components");
 var import_tailwind_variants8 = require("tailwind-variants");
@@ -12270,77 +12289,74 @@ var segmentStyles = (0, import_tailwind_variants8.tv)({
     }
   }
 });
-function DateInput(props) {
+var DateInput = (props) => {
   return /* @__PURE__ */ import_react89.default.createElement(import_react_aria_components6.DateInput, { className: (renderProps) => fieldGroup({ ...renderProps, class: "block" }), ...props }, (segment) => /* @__PURE__ */ import_react89.default.createElement(import_react_aria_components6.DateSegment, { segment, className: segmentStyles }));
-}
+};
+var TimeField = ({ disabled, valid, ...props }) => {
+  return /* @__PURE__ */ import_react89.default.createElement(import_react_aria_components6.TimeField, { ...props, isInvalid: valid === false, isDisabled: disabled }, /* @__PURE__ */ import_react89.default.createElement(DateInput, null));
+};
 
 // src/molecules/TimeField/TimeField.tsx
-var import_react90 = __toESM(require("react"));
-var import_react_aria_components7 = require("react-aria-components");
-var import_label = require("@react-aria/label");
-var import_utils22 = require("@react-aria/utils");
-var import_lodash_es32 = require("lodash-es");
-function TimeFieldBase({ disabled, valid, ...props }) {
-  return /* @__PURE__ */ import_react90.default.createElement(import_react_aria_components7.TimeField, { ...props, isInvalid: valid === false, isDisabled: disabled }, /* @__PURE__ */ import_react90.default.createElement(DateInput, null));
-}
-function TimeField(props) {
+function TimeField2(props) {
   const { labelProps, fieldProps } = (0, import_label.useLabel)({ label: props.labelText });
   const errorMessageId = (0, import_utils22.useId)();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const { "data-testid": dataTestId, ...labelControlProps } = getLabelControlProps(props);
   const baseProps = (0, import_lodash_es32.omit)(props, Object.keys(labelControlProps));
-  return /* @__PURE__ */ import_react90.default.createElement(LabelControl, { ...labelProps, ...labelControlProps, messageId: errorMessageId, className: "Aquarium-TimeField" }, /* @__PURE__ */ import_react90.default.createElement(TimeFieldBase, { ...baseProps, ...fieldProps, ...errorProps, disabled: props.disabled, valid: props.valid }));
+  return /* @__PURE__ */ import_react90.default.createElement(LabelControl, { ...labelProps, ...labelControlProps, messageId: errorMessageId, className: "Aquarium-TimeField" }, /* @__PURE__ */ import_react90.default.createElement(TimeField, { ...baseProps, ...fieldProps, ...errorProps, disabled: props.disabled, valid: props.valid }));
 }
 
-// src/molecules/DatePicker/Button.tsx
-var import_react91 = __toESM(require("react"));
+// src/atoms/DatePicker/Calendar.tsx
+var import_react92 = __toESM(require("react"));
 var import_react_aria_components8 = require("react-aria-components");
+var import_tailwind_variants10 = require("tailwind-variants");
+var import_chevronLeft4 = __toESM(require_chevronLeft());
+var import_chevronRight4 = __toESM(require_chevronRight());
+
+// src/atoms/DatePicker/DatePickerButton.tsx
+var import_react91 = __toESM(require("react"));
+var import_react_aria_components7 = require("react-aria-components");
+var import_tailwind_variants9 = require("tailwind-variants");
 var import_calendar2 = __toESM(require_calendar());
 var import_smallCross3 = __toESM(require_smallCross());
-function Button3(props) {
-  return /* @__PURE__ */ import_react91.default.createElement(
-    import_react_aria_components8.Button,
-    {
-      ...props,
-      className: (0, import_react_aria_components8.composeRenderProps)(
-        props.className,
-        (className, renderProps) => buttonClasses({ ...renderProps, className, dense: true, kind: "icon" })
-      )
+var datePickerButton = (0, import_tailwind_variants9.tv)({
+  base: "p-0",
+  variants: {
+    hideWhenParentIsNotHoveredOrFocused: {
+      true: "opacity-0 group-hover:opacity-100 group-focus-within:opacity-100",
+      false: ""
     }
-  );
-}
-var ButtonBase = ({
-  className,
-  hideWhenParentIsNotHoveredOrFocused = true,
+  }
+});
+var DatePickerButton = ({
+  hideWhenParentIsNotHoveredOrFocused = false,
   ...props
 }) => {
   return /* @__PURE__ */ import_react91.default.createElement(
-    Button3,
+    import_react_aria_components7.Button,
     {
       ...props,
-      className: classNames(
-        className,
-        tw("group-hover:opacity-100 p-0", {
-          "opacity-0 group-focus-within:opacity-100": !hideWhenParentIsNotHoveredOrFocused
+      className: (0, import_react_aria_components7.composeRenderProps)(
+        props.className,
+        (className, renderProps) => buttonClasses({
+          ...renderProps,
+          className: datePickerButton({ hideWhenParentIsNotHoveredOrFocused, className }),
+          dense: true,
+          kind: "icon"
         })
       )
     }
   );
 };
-function ClearInputButton(props) {
-  return /* @__PURE__ */ import_react91.default.createElement(ButtonBase, { ...props, "aria-label": "Clear", slot: null, hideWhenParentIsNotHoveredOrFocused: false }, /* @__PURE__ */ import_react91.default.createElement(Icon2, { icon: import_smallCross3.default, dense: true }));
-}
-function CalendarButton(props) {
-  return /* @__PURE__ */ import_react91.default.createElement(ButtonBase, { ...props, "aria-label": "Calendar" }, /* @__PURE__ */ import_react91.default.createElement(Icon2, { icon: import_calendar2.default, dense: true }));
-}
+var ClearInputButton = (props) => {
+  return /* @__PURE__ */ import_react91.default.createElement(DatePickerButton, { ...props, "aria-label": "Clear", slot: null, hideWhenParentIsNotHoveredOrFocused: true }, /* @__PURE__ */ import_react91.default.createElement(Icon2, { icon: import_smallCross3.default, dense: true }));
+};
+var CalendarButton = (props) => {
+  return /* @__PURE__ */ import_react91.default.createElement(DatePickerButton, { ...props, "aria-label": "Calendar" }, /* @__PURE__ */ import_react91.default.createElement(Icon2, { icon: import_calendar2.default, dense: true }));
+};
 
-// src/molecules/DatePicker/Calendar.tsx
-var import_react92 = __toESM(require("react"));
-var import_react_aria_components9 = require("react-aria-components");
-var import_tailwind_variants9 = require("tailwind-variants");
-var import_chevronLeft4 = __toESM(require_chevronLeft());
-var import_chevronRight4 = __toESM(require_chevronRight());
-var cellStyles = (0, import_tailwind_variants9.tv)({
+// src/atoms/DatePicker/Calendar.tsx
+var cellStyles = (0, import_tailwind_variants10.tv)({
   extend: focusRing,
   base: "w-8 h-8 typography-small cursor-default rounded-md flex items-center justify-center outside-month:hidden",
   variants: {
@@ -12357,274 +12373,88 @@ var cellStyles = (0, import_tailwind_variants9.tv)({
   }
 });
 var Calendar = (props) => {
-  return /* @__PURE__ */ import_react92.default.createElement(import_react_aria_components9.Calendar, { ...props }, /* @__PURE__ */ import_react92.default.createElement(CalendarHeader, null), /* @__PURE__ */ import_react92.default.createElement(import_react_aria_components9.CalendarGrid, null, /* @__PURE__ */ import_react92.default.createElement(CalendarGridHeader, null), /* @__PURE__ */ import_react92.default.createElement(import_react_aria_components9.CalendarGridBody, null, (date) => /* @__PURE__ */ import_react92.default.createElement(import_react_aria_components9.CalendarCell, { date, className: cellStyles }))));
+  return /* @__PURE__ */ import_react92.default.createElement(import_react_aria_components8.Calendar, { ...props }, /* @__PURE__ */ import_react92.default.createElement(CalendarHeader, null), /* @__PURE__ */ import_react92.default.createElement(import_react_aria_components8.CalendarGrid, null, /* @__PURE__ */ import_react92.default.createElement(CalendarGridHeader, null), /* @__PURE__ */ import_react92.default.createElement(import_react_aria_components8.CalendarGridBody, null, (date) => /* @__PURE__ */ import_react92.default.createElement(import_react_aria_components8.CalendarCell, { date, className: cellStyles }))));
 };
 var CalendarHeader = () => {
-  return /* @__PURE__ */ import_react92.default.createElement("header", { className: "flex items-center gap-1 pb-5 w-full" }, /* @__PURE__ */ import_react92.default.createElement(Button3, { slot: "previous", className: "p-3" }, /* @__PURE__ */ import_react92.default.createElement(Icon, { icon: import_chevronLeft4.default })), /* @__PURE__ */ import_react92.default.createElement(import_react_aria_components9.Heading, { className: tw("flex-1 typography-default-strong text-center") }), /* @__PURE__ */ import_react92.default.createElement(Button3, { slot: "next", className: "p-3" }, /* @__PURE__ */ import_react92.default.createElement(Icon, { icon: import_chevronRight4.default })));
+  return /* @__PURE__ */ import_react92.default.createElement("header", { className: "flex items-center gap-1 pb-5 w-full" }, /* @__PURE__ */ import_react92.default.createElement(DatePickerButton, { slot: "previous", className: "p-3" }, /* @__PURE__ */ import_react92.default.createElement(Icon, { icon: import_chevronLeft4.default })), /* @__PURE__ */ import_react92.default.createElement(import_react_aria_components8.Heading, { className: tw("flex-1 typography-default-strong text-center") }), /* @__PURE__ */ import_react92.default.createElement(DatePickerButton, { slot: "next", className: "p-3" }, /* @__PURE__ */ import_react92.default.createElement(Icon, { icon: import_chevronRight4.default })));
 };
 var CalendarGridHeader = () => {
-  return /* @__PURE__ */ import_react92.default.createElement(import_react_aria_components9.CalendarGridHeader, null, (day) => /* @__PURE__ */ import_react92.default.createElement(import_react_aria_components9.CalendarHeaderCell, { className: "text-xs text-inactive typography-caption" }, day));
+  return /* @__PURE__ */ import_react92.default.createElement(import_react_aria_components8.CalendarGridHeader, null, (day) => /* @__PURE__ */ import_react92.default.createElement(import_react_aria_components8.CalendarHeaderCell, { className: "text-xs text-inactive typography-caption" }, day));
 };
 
-// src/molecules/DatePicker/Dialog.tsx
+// src/atoms/DatePicker/DatePicker.tsx
 var import_react93 = __toESM(require("react"));
-var import_react_aria_components10 = require("react-aria-components");
-function Dialog(props) {
-  return /* @__PURE__ */ import_react93.default.createElement(
-    import_react_aria_components10.Dialog,
-    {
-      ...props,
-      className: classNames(
-        props.className,
-        tw(
-          "outline outline-0 p-5 [[data-placement]>&]:px-5 [[data-placement]>&]:py-6 max-h-[inherit] overflow-auto relative"
-        )
-      )
-    }
-  );
-}
-
-// src/molecules/DatePicker/Popover.tsx
-var import_react94 = __toESM(require("react"));
-var import_react_aria_components11 = require("react-aria-components");
-var Popover2 = ({ children, showArrow, className, ...props }) => {
-  const popoverContext = (0, import_react_aria_components11.useSlottedContext)(import_react_aria_components11.PopoverContext);
-  const isSubmenu = popoverContext?.trigger === "SubmenuTrigger";
-  let offset = showArrow ? 12 : 8;
-  offset = isSubmenu ? offset - 6 : offset;
-  return /* @__PURE__ */ import_react94.default.createElement(
-    import_react_aria_components11.Popover,
-    {
-      offset,
-      ...props,
-      className: tw(
-        "rounded-sm shadow-16dp bg-popover-content mt-1 overflow-y-auto flex flex-col border border-default outline-none"
-      )
-    },
-    showArrow && /* @__PURE__ */ import_react94.default.createElement(import_react_aria_components11.OverlayArrow, { className: "group" }, /* @__PURE__ */ import_react94.default.createElement(
-      "svg",
-      {
-        width: 12,
-        height: 12,
-        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"
+var import_react_aria_components9 = require("react-aria-components");
+var import_tailwind_variants11 = require("tailwind-variants");
+var datePickerCalendarStyles = (0, import_tailwind_variants11.tv)({
+  slots: {
+    dialog: "flex",
+    calendar: "[[data-placement]>&]:px-5 [[data-placement]>&]:py-6 max-h-[inherit]",
+    errorMessage: "typography-caption text-danger-default max-w-[300px]",
+    presets: "bg-muted py-6 px-5 flex flex-col min-w-[150px] max-w-[300px] self-stretch",
+    preset: "hover:text-primary-active p-3 text-left hover:underline"
+  },
+  variants: {
+    isPresetActive: {
+      true: {
+        preset: "text-primary-active typography-small-strong"
       },
-      /* @__PURE__ */ import_react94.default.createElement("path", { d: "M0 0 L6 6 L12 0" })
-    )),
-    children
-  );
-};
-
-// src/molecules/DatePicker/DatePicker.tsx
-function DatePickerClearButton() {
-  const state = import_react95.default.useContext(import_react_aria_components12.DatePickerStateContext);
-  if (!state) {
-    throw new Error("DatePickerStateContext is missing a provider");
-  }
-  if (!state.value) {
-    return null;
-  }
-  return /* @__PURE__ */ import_react95.default.createElement(
-    ClearInputButton,
-    {
-      onPress: () => {
-        state.setValue(null);
+      false: {
+        preset: "typography-small"
       }
     }
-  );
-}
-var createDatePickerBase = (variant) => ({
-  disabled,
-  valid,
-  granularity,
-  shouldCloseOnSelect,
-  errorMessage,
-  clearSelectionEnabled = true,
-  ...props
-}) => {
+  }
+});
+var DatePicker = ({ variant, ...props }) => {
   const hasSomeValue = props.value ?? props.defaultValue ?? props.placeholderValue;
-  return /* @__PURE__ */ import_react95.default.createElement(
-    import_react_aria_components12.DatePicker,
+  return /* @__PURE__ */ import_react93.default.createElement(
+    import_react_aria_components9.DatePicker,
     {
       ...props,
-      shouldCloseOnSelect: shouldCloseOnSelect ?? variant === "date",
-      isDisabled: disabled,
-      isInvalid: valid === false,
-      granularity: granularity ?? (variant === "datetime" && !hasSomeValue ? "minute" : void 0)
-    },
-    /* @__PURE__ */ import_react95.default.createElement(FieldGroup, { className: tw("min-w-[210px] w-auto") }, /* @__PURE__ */ import_react95.default.createElement(DateInput, { className: tw("flex-1") }), /* @__PURE__ */ import_react95.default.createElement(Box.Flex, { alignItems: "center", gap: "2" }, clearSelectionEnabled && !disabled && /* @__PURE__ */ import_react95.default.createElement(DatePickerClearButton, null), /* @__PURE__ */ import_react95.default.createElement(CalendarButton, null))),
-    /* @__PURE__ */ import_react95.default.createElement(Popover2, { offset: 0 }, /* @__PURE__ */ import_react95.default.createElement(Dialog, null, /* @__PURE__ */ import_react95.default.createElement(Spacing, { gap: "3" }, /* @__PURE__ */ import_react95.default.createElement(Calendar, null), variant === "datetime" && /* @__PURE__ */ import_react95.default.createElement(PickerTimeField, { granularity }), errorMessage && /* @__PURE__ */ import_react95.default.createElement(import_react_aria_components12.Text, { slot: "errorMessage", className: tw("typography-caption text-danger-default max-w-[300px]") }, errorMessage))))
-  );
-};
-var DatePickerBase = createDatePickerBase("date");
-var DateTimePickerBase = createDatePickerBase("datetime");
-var PickerTimeField = ({ granularity }) => {
-  const state = import_react95.default.useContext(import_react_aria_components12.DatePickerStateContext);
-  if (!state) {
-    throw new Error("DatePickerStateContext is missing a provider");
-  }
-  return /* @__PURE__ */ import_react95.default.createElement(
-    TimeField,
-    {
-      labelText: "Time",
-      granularity: granularity !== "day" ? granularity : void 0,
-      value: state.timeValue,
-      onChange: (value) => value && state.setTimeValue(value),
-      reserveSpaceForError: false
+      shouldCloseOnSelect: props.shouldCloseOnSelect ?? variant === "date",
+      granularity: props.granularity ?? (variant === "datetime" && !hasSomeValue ? "minute" : void 0)
     }
   );
 };
-var createDatePicker = (variant) => (props) => {
-  const { labelProps, fieldProps } = (0, import_label2.useLabel)({ label: props.labelText });
-  const errorMessageId = (0, import_utils24.useId)();
-  const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId, "errorMessage": props.helperText ?? props.error } : {};
-  const { "data-testid": dataTestId, ...labelControlProps } = getLabelControlProps(props);
-  const baseProps = (0, import_lodash_es33.omit)(props, Object.keys(labelControlProps));
-  const allProps = { ...baseProps, ...fieldProps, ...errorProps, disabled: props.disabled, valid: props.valid };
-  return /* @__PURE__ */ import_react95.default.createElement(LabelControl, { ...labelProps, ...labelControlProps, messageId: errorMessageId, className: "Aquarium-DatePicker" }, variant === "date" ? /* @__PURE__ */ import_react95.default.createElement(DatePickerBase, { ...allProps }) : /* @__PURE__ */ import_react95.default.createElement(DateTimePickerBase, { ...allProps }));
-};
-var DatePicker = createDatePicker("date");
-var DateTimePicker = createDatePicker("datetime");
-
-// src/molecules/DatePicker/DateRangePicker.tsx
-var import_react97 = __toESM(require("react"));
-var import_react_aria_components14 = require("react-aria-components");
-var import_label3 = require("@react-aria/label");
-var import_utils26 = require("@react-aria/utils");
-var import_lodash_es34 = require("lodash-es");
-
-// src/molecules/DatePicker/RangeCalendar.tsx
-var import_react96 = __toESM(require("react"));
-var import_react_aria_components13 = require("react-aria-components");
-var import_tailwind_variants10 = require("tailwind-variants");
-var cell = (0, import_tailwind_variants10.tv)({
-  extend: focusRing,
-  base: "w-full h-full flex items-center justify-center rounded-md text-default",
-  variants: {
-    selectionState: {
-      none: "group-hover:bg-default group-pressed:bg-intense",
-      middle: [
-        "text-white",
-        "group-hover:bg-primary-default",
-        "group-invalid:group-hover:bg-danger-default",
-        "group-pressed:bg-primary-intense",
-        "group-invalid:group-pressed:bg-danger-intense"
-      ],
-      cap: "text-white bg-primary-default group-invalid:bg-danger-default"
-    },
-    isUnavailable: {
-      true: "text-inactive"
-    },
-    isDisabled: {
-      true: "text-inactive"
-    }
-  }
-});
-function RangeCalendar(props) {
-  return /* @__PURE__ */ import_react96.default.createElement(import_react_aria_components13.RangeCalendar, { ...props }, /* @__PURE__ */ import_react96.default.createElement(CalendarHeader, null), /* @__PURE__ */ import_react96.default.createElement(import_react_aria_components13.CalendarGrid, { className: "[&_td]:px-0" }, /* @__PURE__ */ import_react96.default.createElement(CalendarGridHeader, null), /* @__PURE__ */ import_react96.default.createElement(import_react_aria_components13.CalendarGridBody, null, (date) => /* @__PURE__ */ import_react96.default.createElement(
-    import_react_aria_components13.CalendarCell,
-    {
-      date,
-      className: tw(
-        "group w-8 h-8 typography-small outline outline-0 cursor-default",
-        "outside-month:hidden selected:bg-primary-default",
-        "invalid:selected:bg-danger-default",
-        "selection-start:rounded-s-md selection-end:rounded-e-md"
-      )
-    },
-    ({ formattedDate, isSelected, isSelectionStart, isSelectionEnd, ...rest }) => /* @__PURE__ */ import_react96.default.createElement(
-      "span",
-      {
-        className: cell({
-          selectionState: isSelected && (isSelectionStart || isSelectionEnd) ? "cap" : isSelected ? "middle" : "none",
-          ...rest
-        })
-      },
-      formattedDate
-    )
-  ))));
-}
-
-// src/molecules/DatePicker/DateRangePicker.tsx
-function DateRangePickerClearButton() {
-  const state = import_react97.default.useContext(import_react_aria_components14.DateRangePickerStateContext);
-  if (!state) {
-    throw new Error("DateRangePickerStateContext is missing a provider");
-  }
-  if (!state.value.start && !state.value.end) {
-    return null;
-  }
-  return /* @__PURE__ */ import_react97.default.createElement(
-    ClearInputButton,
-    {
-      onPress: () => {
-        state.setValue(null);
-      }
-    }
-  );
-}
-var createDateRangePickerBase = (variant) => ({
-  disabled,
-  valid,
-  granularity,
-  shouldCloseOnSelect,
-  errorMessage,
-  clearSelectionEnabled = true,
-  ...props
-}) => {
+var DateRangePicker = ({ variant, ...props }) => {
   const hasSomeValue = props.value ?? props.defaultValue ?? props.placeholderValue;
-  return /* @__PURE__ */ import_react97.default.createElement(
-    import_react_aria_components14.DateRangePicker,
+  return /* @__PURE__ */ import_react93.default.createElement(
+    import_react_aria_components9.DateRangePicker,
     {
       ...props,
-      shouldCloseOnSelect: shouldCloseOnSelect ?? variant === "date",
-      isDisabled: disabled,
-      isInvalid: valid === false,
-      granularity: granularity ?? (variant === "datetime" && !hasSomeValue ? "minute" : void 0),
-      className: tw("group flex flex-col gap-1")
-    },
-    /* @__PURE__ */ import_react97.default.createElement(FieldGroup, { className: tw("min-w-[200px] w-auto gap-2") }, /* @__PURE__ */ import_react97.default.createElement(DateInput, { slot: "start", className: tw("px-2 py-1") }), /* @__PURE__ */ import_react97.default.createElement("span", { "aria-hidden": true, className: tw("text-muted") }, "-"), /* @__PURE__ */ import_react97.default.createElement(DateInput, { slot: "end", className: tw("flex-1 px-2 py-1") }), /* @__PURE__ */ import_react97.default.createElement(Box.Flex, { alignItems: "center", gap: "2" }, clearSelectionEnabled && !disabled && /* @__PURE__ */ import_react97.default.createElement(DateRangePickerClearButton, null), /* @__PURE__ */ import_react97.default.createElement(CalendarButton, null))),
-    /* @__PURE__ */ import_react97.default.createElement(Popover2, { offset: 0 }, /* @__PURE__ */ import_react97.default.createElement(Dialog, null, /* @__PURE__ */ import_react97.default.createElement(Spacing, { gap: "3" }, /* @__PURE__ */ import_react97.default.createElement(RangeCalendar, null), variant === "datetime" && /* @__PURE__ */ import_react97.default.createElement(Box.Flex, { gap: "6" }, /* @__PURE__ */ import_react97.default.createElement("div", { className: tw("flex-1") }, /* @__PURE__ */ import_react97.default.createElement(PickerTimeField2, { granularity, part: "start" })), /* @__PURE__ */ import_react97.default.createElement("div", { className: tw("flex-1") }, /* @__PURE__ */ import_react97.default.createElement(PickerTimeField2, { granularity, part: "end" }))), errorMessage && /* @__PURE__ */ import_react97.default.createElement(import_react_aria_components14.Text, { slot: "errorMessage", className: tw("typography-caption text-danger-default max-w-[300px]") }, errorMessage))))
-  );
-};
-var PickerTimeField2 = ({ granularity, part }) => {
-  const ctx = import_react97.default.useContext(import_react_aria_components14.DateRangePickerStateContext);
-  return /* @__PURE__ */ import_react97.default.createElement(
-    TimeField,
-    {
-      labelText: part === "start" ? "Start time" : "End time",
-      granularity: granularity !== "day" ? granularity : void 0,
-      value: ctx?.timeRange?.[part] ?? null,
-      onChange: (value) => ctx?.setTime(part, value),
-      reserveSpaceForError: false
+      shouldCloseOnSelect: props.shouldCloseOnSelect ?? variant === "date",
+      granularity: props.granularity ?? (variant === "datetime" && !hasSomeValue ? "minute" : void 0)
     }
   );
 };
-var DateRangePickerBase = createDateRangePickerBase("date");
-var DateTimeRangePickerBase = createDateRangePickerBase("datetime");
-var createDateRangePicker = (variant) => (props) => {
-  const { labelProps, fieldProps } = (0, import_label3.useLabel)({ label: props.labelText });
-  const errorMessageId = (0, import_utils26.useId)();
-  const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId, "errorMessage": props.helperText ?? props.error } : {};
-  const { "data-testid": dataTestId, ...labelControlProps } = getLabelControlProps(props);
-  const baseProps = (0, import_lodash_es34.omit)(props, Object.keys(labelControlProps));
-  const allProps = { ...baseProps, ...fieldProps, ...errorProps, disabled: props.disabled, valid: props.valid };
-  return /* @__PURE__ */ import_react97.default.createElement(LabelControl, { ...labelProps, ...labelControlProps, messageId: errorMessageId, className: "Aquarium-DatePicker" }, variant === "date" ? /* @__PURE__ */ import_react97.default.createElement(DateRangePickerBase, { ...allProps }) : /* @__PURE__ */ import_react97.default.createElement(DateTimeRangePickerBase, { ...allProps }));
+var Presets = ({ children }) => {
+  const { presets } = datePickerCalendarStyles();
+  return /* @__PURE__ */ import_react93.default.createElement("div", { className: presets() }, children);
+};
+var Preset = ({ value, label }) => {
+  const { preset } = datePickerCalendarStyles();
+  const context2 = import_react93.default.useContext(import_react_aria_components9.DatePickerStateContext);
+  const handlePress = () => {
+    context2?.setValue(value);
+    context2?.close();
+  };
+  const isActive = context2?.value !== void 0 && context2.value?.toString() === value.toString();
+  return /* @__PURE__ */ import_react93.default.createElement(import_react_aria_components9.Button, { onPress: handlePress, className: preset({ isPresetActive: isActive }) }, label);
+};
+var RangePreset = ({ value, label }) => {
+  const { preset } = datePickerCalendarStyles();
+  const context2 = import_react93.default.useContext(import_react_aria_components9.DateRangePickerStateContext);
+  const handlePress = () => {
+    context2?.setValue(value);
+    context2?.close();
+  };
+  const isActive = context2?.value !== void 0 && context2.value.start?.toString() === value.start.toString() && context2.value.end?.toString() === value.end.toString();
+  return /* @__PURE__ */ import_react93.default.createElement(import_react_aria_components9.Button, { onPress: handlePress, className: preset({ isPresetActive: isActive }) }, label);
 };
-var DateRangePicker = createDateRangePicker("date");
-var DateTimeRangePicker = createDateRangePicker("datetime");
-
-// src/molecules/Dialog/Dialog.tsx
-var import_react100 = __toESM(require("react"));
-var import_dialog = require("@react-aria/dialog");
-var import_overlays6 = require("@react-aria/overlays");
-var import_utils27 = require("@react-aria/utils");
-var import_overlays7 = require("@react-stately/overlays");
-var import_lodash_es35 = require("lodash-es");
 
 // src/atoms/Dialog/Dialog.tsx
-var import_react98 = __toESM(require("react"));
-var import_react_aria_components15 = require("react-aria-components");
+var import_react94 = __toESM(require("react"));
+var import_react_aria_components10 = require("react-aria-components");
 
 // node_modules/tailwind-merge/dist/bundle-mjs.mjs
 var CLASS_PART_SEPARATOR = "-";
@@ -15104,9 +14934,9 @@ var DIALOG_ICONS_AND_COLORS = {
     color: "danger-default"
   }
 };
-var Dialog2 = (props) => {
-  return /* @__PURE__ */ import_react98.default.createElement(
-    import_react_aria_components15.Dialog,
+var Dialog = (props) => {
+  return /* @__PURE__ */ import_react94.default.createElement(
+    import_react_aria_components10.Dialog,
     {
       ...props,
       className: twMerge("outline outline-0 max-h-[inherit] overflow-auto relative", props.className)
@@ -15114,10 +14944,257 @@ var Dialog2 = (props) => {
   );
 };
 
-// src/atoms/Modal/Modal.tsx
+// src/molecules/DatePicker/DatePicker.tsx
+var DatePickerClearButton = () => {
+  const state = import_react95.default.useContext(import_react_aria_components11.DatePickerStateContext);
+  if (!state) {
+    throw new Error("DatePickerStateContext is missing a provider");
+  }
+  if (!state.value) {
+    return null;
+  }
+  return /* @__PURE__ */ import_react95.default.createElement(
+    ClearInputButton,
+    {
+      onPress: () => {
+        state.setValue(null);
+      }
+    }
+  );
+};
+DatePickerClearButton.displayName = "DatePicker.ClearButton";
+var CalendarTimeField = ({ granularity, labelText = "Time", ...props }) => {
+  const ctx = import_react95.default.useContext(import_react_aria_components11.DatePickerStateContext);
+  return /* @__PURE__ */ import_react95.default.createElement(
+    TimeField2,
+    {
+      ...props,
+      labelText,
+      granularity: granularity !== "day" ? granularity : void 0,
+      value: ctx?.timeValue,
+      onChange: (value) => value && ctx?.setTimeValue(value),
+      reserveSpaceForError: false
+    }
+  );
+};
+var DatePickerCalendarPropsContext = import_react95.default.createContext(null);
+var DatePickerCalendar = (props) => {
+  const ctx = import_react95.default.useContext(DatePickerCalendarPropsContext);
+  const { variant, granularity, errorMessage, presets = [] } = (0, import_utils24.mergeProps)(ctx, props);
+  const { dialog, calendar, errorMessage: errorMessageStyle } = datePickerCalendarStyles();
+  return /* @__PURE__ */ import_react95.default.createElement(Popover, { offset: 0 }, /* @__PURE__ */ import_react95.default.createElement(Dialog, { className: dialog() }, presets.length > 0 && /* @__PURE__ */ import_react95.default.createElement(Presets, null, presets.map((props2) => /* @__PURE__ */ import_react95.default.createElement(Preset, { key: props2.value.toString(), ...props2 }))), /* @__PURE__ */ import_react95.default.createElement(Spacing, { gap: "3", className: tw("p-5") }, /* @__PURE__ */ import_react95.default.createElement(Calendar, { className: calendar() }), variant === "datetime" && /* @__PURE__ */ import_react95.default.createElement(CalendarTimeField, { granularity }), errorMessage && /* @__PURE__ */ import_react95.default.createElement(import_react_aria_components11.Text, { slot: "errorMessage", className: errorMessageStyle() }, errorMessage))));
+};
+DatePickerCalendar.displayName = "DatePicker.Calendar";
+var DatePickerField = ({ clearSelectionEnabled = true, disabled = false }) => {
+  return /* @__PURE__ */ import_react95.default.createElement(FieldGroup, { className: tw("min-w-[210px] w-auto") }, /* @__PURE__ */ import_react95.default.createElement(DateInput, { className: tw("flex-1") }), /* @__PURE__ */ import_react95.default.createElement(Box.Flex, { alignItems: "center", gap: "2" }, clearSelectionEnabled && !disabled && /* @__PURE__ */ import_react95.default.createElement(DatePickerClearButton, null), /* @__PURE__ */ import_react95.default.createElement(CalendarButton, null)));
+};
+DatePickerField.displayName = "DatePicker.Field";
+var createDatePickerBase = (variant) => {
+  const datePicker = ({
+    disabled,
+    valid,
+    shouldCloseOnSelect,
+    errorMessage,
+    clearSelectionEnabled = true,
+    presets,
+    children,
+    ...props
+  }) => {
+    const content = children ?? /* @__PURE__ */ import_react95.default.createElement(import_react95.default.Fragment, null, /* @__PURE__ */ import_react95.default.createElement(DatePickerField, { clearSelectionEnabled, disabled }), /* @__PURE__ */ import_react95.default.createElement(DatePickerCalendar, null));
+    return /* @__PURE__ */ import_react95.default.createElement(
+      DatePickerCalendarPropsContext.Provider,
+      {
+        value: { variant, granularity: props.granularity, errorMessage, presets }
+      },
+      /* @__PURE__ */ import_react95.default.createElement(DatePicker, { ...props, variant, isDisabled: disabled, isInvalid: valid === false }, content)
+    );
+  };
+  datePicker.Calendar = DatePickerCalendar;
+  datePicker.Field = DatePickerField;
+  datePicker.displayName = variant === "date" ? "DatePickerBase" : "DateTimePickerBase";
+  return datePicker;
+};
+var DatePickerBase = createDatePickerBase("date");
+var DateTimePickerBase = createDatePickerBase("datetime");
+var createDatePicker = (variant) => {
+  const datePicker = (props) => {
+    const { labelProps, fieldProps } = (0, import_label2.useLabel)({ "label": props.labelText, "aria-label": props["aria-label"] });
+    const errorMessageId = (0, import_utils24.useId)();
+    const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId, "errorMessage": props.helperText ?? props.error } : {};
+    const { "data-testid": dataTestId, ...labelControlProps } = getLabelControlProps(props);
+    const baseProps = (0, import_lodash_es33.omit)(props, Object.keys(labelControlProps));
+    const allProps = { ...baseProps, ...fieldProps, ...errorProps, disabled: props.disabled, valid: props.valid };
+    return /* @__PURE__ */ import_react95.default.createElement(LabelControl, { ...labelProps, ...labelControlProps, messageId: errorMessageId, className: "Aquarium-DatePicker" }, variant === "date" ? /* @__PURE__ */ import_react95.default.createElement(DatePickerBase, { ...allProps }) : /* @__PURE__ */ import_react95.default.createElement(DateTimePickerBase, { ...allProps }));
+  };
+  datePicker.Calendar = DatePickerCalendar;
+  datePicker.Field = DatePickerField;
+  datePicker.displayName = variant === "date" ? "DatePicker" : "DateTimePicker";
+  return datePicker;
+};
+var DatePicker2 = createDatePicker("date");
+var DateTimePicker = createDatePicker("datetime");
+
+// src/molecules/DatePicker/DateRangePicker.tsx
+var import_react97 = __toESM(require("react"));
+var import_react_aria_components13 = require("react-aria-components");
+var import_label3 = require("@react-aria/label");
+var import_utils26 = require("@react-aria/utils");
+var import_lodash_es34 = require("lodash-es");
+
+// src/atoms/DatePicker/RangeCalendar.tsx
+var import_react96 = __toESM(require("react"));
+var import_react_aria_components12 = require("react-aria-components");
+var import_tailwind_variants12 = require("tailwind-variants");
+var cell = (0, import_tailwind_variants12.tv)({
+  extend: focusRing,
+  base: "w-full h-full flex items-center justify-center rounded-md text-default",
+  variants: {
+    selectionState: {
+      none: "group-hover:bg-default group-pressed:bg-intense",
+      middle: [
+        "text-white",
+        "group-hover:bg-primary-default",
+        "group-invalid:group-hover:bg-danger-default",
+        "group-pressed:bg-primary-intense",
+        "group-invalid:group-pressed:bg-danger-intense"
+      ],
+      cap: "text-white bg-primary-default group-invalid:bg-danger-default"
+    },
+    isUnavailable: {
+      true: "text-inactive"
+    },
+    isDisabled: {
+      true: "text-inactive"
+    }
+  }
+});
+function RangeCalendar(props) {
+  return /* @__PURE__ */ import_react96.default.createElement(import_react_aria_components12.RangeCalendar, { ...props }, /* @__PURE__ */ import_react96.default.createElement(CalendarHeader, null), /* @__PURE__ */ import_react96.default.createElement(import_react_aria_components12.CalendarGrid, { className: "[&_td]:px-0" }, /* @__PURE__ */ import_react96.default.createElement(CalendarGridHeader, null), /* @__PURE__ */ import_react96.default.createElement(import_react_aria_components12.CalendarGridBody, null, (date) => /* @__PURE__ */ import_react96.default.createElement(
+    import_react_aria_components12.CalendarCell,
+    {
+      date,
+      className: tw(
+        "group w-8 h-8 typography-small outline outline-0 cursor-default",
+        "outside-month:hidden selected:bg-primary-default",
+        "invalid:selected:bg-danger-default",
+        "selection-start:rounded-s-md selection-end:rounded-e-md"
+      )
+    },
+    ({ formattedDate, isSelected, isSelectionStart, isSelectionEnd, ...rest }) => /* @__PURE__ */ import_react96.default.createElement(
+      "span",
+      {
+        className: cell({
+          selectionState: isSelected && (isSelectionStart || isSelectionEnd) ? "cap" : isSelected ? "middle" : "none",
+          ...rest
+        })
+      },
+      formattedDate
+    )
+  ))));
+}
+
+// src/molecules/DatePicker/DateRangePicker.tsx
+function DateRangePickerClearButton() {
+  const state = import_react97.default.useContext(import_react_aria_components13.DateRangePickerStateContext);
+  if (!state) {
+    throw new Error("DateRangePickerStateContext is missing a provider");
+  }
+  if (!state.value.start && !state.value.end) {
+    return null;
+  }
+  return /* @__PURE__ */ import_react97.default.createElement(
+    ClearInputButton,
+    {
+      onPress: () => {
+        state.setValue(null);
+      }
+    }
+  );
+}
+var RangeCalendarTimeField = ({ granularity, part, ...props }) => {
+  const ctx = import_react97.default.useContext(import_react_aria_components13.DateRangePickerStateContext);
+  const labelText = props.labelText ?? (part === "start" ? "Start time" : "End time");
+  return /* @__PURE__ */ import_react97.default.createElement(
+    TimeField2,
+    {
+      ...props,
+      labelText,
+      granularity: granularity !== "day" ? granularity : void 0,
+      value: ctx?.timeRange?.[part] ?? null,
+      onChange: (value) => ctx?.setTime(part, value),
+      reserveSpaceForError: false
+    }
+  );
+};
+var DateRangePickerCalendarPropsContext = import_react97.default.createContext(null);
+var DateRangePickerCalendar = (props) => {
+  const ctx = import_react97.default.useContext(DateRangePickerCalendarPropsContext);
+  const { variant, granularity, errorMessage, presets = [] } = (0, import_utils26.mergeProps)(ctx, props);
+  const { dialog, calendar, errorMessage: errorMessageStyle } = datePickerCalendarStyles();
+  return /* @__PURE__ */ import_react97.default.createElement(Popover, { offset: 0 }, /* @__PURE__ */ import_react97.default.createElement(Dialog, { className: dialog() }, presets.length > 0 && /* @__PURE__ */ import_react97.default.createElement(Presets, null, presets.map((props2) => /* @__PURE__ */ import_react97.default.createElement(RangePreset, { key: `${props2.value.start.toString()}-${props2.value.end.toString()}`, ...props2 }))), /* @__PURE__ */ import_react97.default.createElement(Spacing, { gap: "3", className: tw("p-5") }, /* @__PURE__ */ import_react97.default.createElement(RangeCalendar, { className: calendar() }), variant === "datetime" && /* @__PURE__ */ import_react97.default.createElement(Box.Flex, { gap: "6" }, /* @__PURE__ */ import_react97.default.createElement("div", { className: tw("flex-1") }, /* @__PURE__ */ import_react97.default.createElement(RangeCalendarTimeField, { granularity, part: "start" })), /* @__PURE__ */ import_react97.default.createElement("div", { className: tw("flex-1") }, /* @__PURE__ */ import_react97.default.createElement(RangeCalendarTimeField, { granularity, part: "end" }))), errorMessage && /* @__PURE__ */ import_react97.default.createElement(import_react_aria_components13.Text, { slot: "errorMessage", className: errorMessageStyle() }, errorMessage))));
+};
+DateRangePickerCalendar.displayName = "DateRangePicker.Calendar";
+var DateRangePickerField = ({ clearSelectionEnabled = true, disabled = false }) => {
+  return /* @__PURE__ */ import_react97.default.createElement(FieldGroup, { className: tw("min-w-[200px] w-auto gap-2") }, /* @__PURE__ */ import_react97.default.createElement(DateInput, { slot: "start", className: tw("px-2 py-1") }), /* @__PURE__ */ import_react97.default.createElement("span", { "aria-hidden": true, className: tw("text-muted") }, "-"), /* @__PURE__ */ import_react97.default.createElement(DateInput, { slot: "end", className: tw("flex-1 px-2 py-1") }), /* @__PURE__ */ import_react97.default.createElement(Box.Flex, { alignItems: "center", gap: "2" }, clearSelectionEnabled && !disabled && /* @__PURE__ */ import_react97.default.createElement(DateRangePickerClearButton, null), /* @__PURE__ */ import_react97.default.createElement(CalendarButton, null)));
+};
+DateRangePickerField.displayName = "DateRangePicker.Field";
+var createDateRangePickerBase = (variant) => {
+  const dateRangePicker = ({
+    disabled,
+    valid,
+    shouldCloseOnSelect,
+    errorMessage,
+    clearSelectionEnabled = true,
+    presets,
+    children,
+    ...props
+  }) => {
+    const content = children ?? /* @__PURE__ */ import_react97.default.createElement(import_react97.default.Fragment, null, /* @__PURE__ */ import_react97.default.createElement(DateRangePickerField, { clearSelectionEnabled, disabled }), /* @__PURE__ */ import_react97.default.createElement(DateRangePickerCalendar, { variant, granularity: props.granularity, errorMessage }));
+    return /* @__PURE__ */ import_react97.default.createElement(
+      DateRangePickerCalendarPropsContext.Provider,
+      {
+        value: { variant, granularity: props.granularity, errorMessage, presets }
+      },
+      /* @__PURE__ */ import_react97.default.createElement(DateRangePicker, { ...props, variant, isDisabled: disabled, isInvalid: valid === false }, content)
+    );
+  };
+  dateRangePicker.Calendar = DateRangePickerCalendar;
+  dateRangePicker.Field = DateRangePickerField;
+  dateRangePicker.displayName = variant === "date" ? "DateRangePickerBase" : "DateTimeRangePickerBase";
+  return dateRangePicker;
+};
+var DateRangePickerBase = createDateRangePickerBase("date");
+var DateTimeRangePickerBase = createDateRangePickerBase("datetime");
+var createDateRangePicker = (variant) => {
+  const dateRangePicker = (props) => {
+    const { labelProps, fieldProps } = (0, import_label3.useLabel)({ "label": props.labelText, "aria-label": props["aria-label"] });
+    const errorMessageId = (0, import_utils26.useId)();
+    const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId, "errorMessage": props.helperText ?? props.error } : {};
+    const { "data-testid": dataTestId, ...labelControlProps } = getLabelControlProps(props);
+    const baseProps = (0, import_lodash_es34.omit)(props, Object.keys(labelControlProps));
+    const allProps = { ...baseProps, ...fieldProps, ...errorProps, disabled: props.disabled, valid: props.valid };
+    return /* @__PURE__ */ import_react97.default.createElement(LabelControl, { ...labelProps, ...labelControlProps, messageId: errorMessageId, className: "Aquarium-DatePicker" }, variant === "date" ? /* @__PURE__ */ import_react97.default.createElement(DateRangePickerBase, { ...allProps }) : /* @__PURE__ */ import_react97.default.createElement(DateTimeRangePickerBase, { ...allProps }));
+  };
+  dateRangePicker.Calendar = DateRangePickerCalendar;
+  dateRangePicker.Field = DateRangePickerField;
+  dateRangePicker.displayName = variant === "date" ? "DateRangePicker" : "DateTimeRangePicker";
+  return dateRangePicker;
+};
+var DateRangePicker2 = createDateRangePicker("date");
+var DateTimeRangePicker = createDateRangePicker("datetime");
+
+// src/molecules/Dialog/Dialog.tsx
 var import_react99 = __toESM(require("react"));
-var import_tailwind_variants11 = require("tailwind-variants");
-var modalStyles = (0, import_tailwind_variants11.tv)({
+var import_dialog = require("@react-aria/dialog");
+var import_overlays6 = require("@react-aria/overlays");
+var import_utils27 = require("@react-aria/utils");
+var import_overlays7 = require("@react-stately/overlays");
+var import_lodash_es35 = require("lodash-es");
+
+// src/atoms/Modal/Modal.tsx
+var import_react98 = __toESM(require("react"));
+var import_tailwind_variants13 = require("tailwind-variants");
+var modalStyles = (0, import_tailwind_variants13.tv)({
   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",
@@ -15220,55 +15297,55 @@ var Modal = ({
   ...rest
 }) => {
   const { overlay } = modalStyles({ kind });
-  return open ? /* @__PURE__ */ import_react99.default.createElement("div", { ...rest, className: overlay({ className }) }, children) : null;
+  return open ? /* @__PURE__ */ import_react98.default.createElement("div", { ...rest, className: overlay({ className }) }, children) : null;
 };
 Modal.BackDrop = ({ className, ...rest }) => {
   const { backdrop } = modalStyles();
-  return /* @__PURE__ */ import_react99.default.createElement("div", { ...rest, className: backdrop({ className }) });
+  return /* @__PURE__ */ import_react98.default.createElement("div", { ...rest, className: backdrop({ className }) });
 };
-Modal.Dialog = import_react99.default.forwardRef(
+Modal.Dialog = import_react98.default.forwardRef(
   ({ kind = "dialog", children, className, size = "md", ...rest }, ref) => {
     const { dialog } = modalStyles({ kind, size });
-    return /* @__PURE__ */ import_react99.default.createElement("div", { ref, "aria-modal": "true", ...rest, className: dialog({ className }) }, children);
+    return /* @__PURE__ */ import_react98.default.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__ */ import_react99.default.createElement("div", { ...rest, className: header({ className }) }, children);
+  return /* @__PURE__ */ import_react98.default.createElement("div", { ...rest, className: header({ className }) }, children);
 };
 Modal.HeaderImage = ({ backgroundImage, className, ...rest }) => {
   const { headerImage } = modalStyles({ backgroundImage: Boolean(backgroundImage) });
-  return backgroundImage ? /* @__PURE__ */ import_react99.default.createElement("img", { "aria-hidden": true, src: backgroundImage, ...rest, className: headerImage({ className }) }) : /* @__PURE__ */ import_react99.default.createElement("div", { className: headerImage({ className }) });
+  return backgroundImage ? /* @__PURE__ */ import_react98.default.createElement("img", { "aria-hidden": true, src: backgroundImage, ...rest, className: headerImage({ className }) }) : /* @__PURE__ */ import_react98.default.createElement("div", { className: headerImage({ className }) });
 };
 Modal.CloseButtonContainer = ({ className, ...rest }) => {
   const { closeButtonContainer } = modalStyles();
-  return /* @__PURE__ */ import_react99.default.createElement("div", { ...rest, className: closeButtonContainer({ className }) });
+  return /* @__PURE__ */ import_react98.default.createElement("div", { ...rest, className: closeButtonContainer({ className }) });
 };
 Modal.Title = ({ kind = "dialog", children, className, ...rest }) => {
   const { title } = modalStyles({ kind });
-  return /* @__PURE__ */ import_react99.default.createElement(Typography, { htmlTag: "h2", variant: "subheading", color: "intense", className: title({ className }), ...rest }, children);
+  return /* @__PURE__ */ import_react98.default.createElement(Typography, { htmlTag: "h2", variant: "subheading", color: "intense", className: title({ className }), ...rest }, children);
 };
-Modal.Subtitle = ({ children, ...rest }) => /* @__PURE__ */ import_react99.default.createElement(Typography, { variant: "small", color: "default", ...rest }, children);
+Modal.Subtitle = ({ children, ...rest }) => /* @__PURE__ */ import_react98.default.createElement(Typography, { variant: "small", color: "default", ...rest }, children);
 Modal.TitleContainer = ({ children, className, ...rest }) => {
   const { titleContainer } = modalStyles();
-  return /* @__PURE__ */ import_react99.default.createElement("div", { ...rest, className: titleContainer({ className }) }, children);
+  return /* @__PURE__ */ import_react98.default.createElement("div", { ...rest, className: titleContainer({ className }) }, children);
 };
 Modal.Body = ({ children, className, noFooter = false, maxHeight, style, ...rest }) => {
   const { body } = modalStyles();
-  return /* @__PURE__ */ import_react99.default.createElement("div", { ...rest, className: body({ noFooter, className }), style: { maxHeight, ...style } }, children);
+  return /* @__PURE__ */ import_react98.default.createElement("div", { ...rest, className: body({ noFooter, className }), style: { maxHeight, ...style } }, children);
 };
 Modal.Footer = ({ children, className, ...rest }) => {
   const { footer } = modalStyles();
-  return /* @__PURE__ */ import_react99.default.createElement("div", { ...rest, className: footer({ className }) }, children);
+  return /* @__PURE__ */ import_react98.default.createElement("div", { ...rest, className: footer({ className }) }, children);
 };
 Modal.Actions = ({ children, className, ...rest }) => {
   const { actions } = modalStyles();
-  return /* @__PURE__ */ import_react99.default.createElement("div", { ...rest, className: actions({ className }) }, children);
+  return /* @__PURE__ */ import_react98.default.createElement("div", { ...rest, className: actions({ className }) }, children);
 };
 
 // src/molecules/Dialog/Dialog.tsx
-var Dialog3 = (props) => {
-  const ref = import_react100.default.useRef(null);
+var Dialog2 = (props) => {
+  const ref = import_react99.default.useRef(null);
   const { open, onClose } = props;
   const state = (0, import_overlays7.useOverlayTriggerState)({ isOpen: open, onOpenChange: (isOpen) => !isOpen && onClose?.() });
   const { modalProps, underlayProps } = (0, import_overlays6.useModalOverlay)(
@@ -15279,7 +15356,7 @@ var Dialog3 = (props) => {
   if (!state.isOpen) {
     return null;
   }
-  return /* @__PURE__ */ import_react100.default.createElement(import_overlays6.Overlay, null, /* @__PURE__ */ import_react100.default.createElement(Modal, { className: "Aquarium-Dialog", open: true }, /* @__PURE__ */ import_react100.default.createElement(Modal.BackDrop, { ...underlayProps }), /* @__PURE__ */ import_react100.default.createElement(Modal.Dialog, { ref, size: "sm", ...modalProps }, /* @__PURE__ */ import_react100.default.createElement(DialogWrapper, { ...props }))));
+  return /* @__PURE__ */ import_react99.default.createElement(import_overlays6.Overlay, null, /* @__PURE__ */ import_react99.default.createElement(Modal, { className: "Aquarium-Dialog", open: true }, /* @__PURE__ */ import_react99.default.createElement(Modal.BackDrop, { ...underlayProps }), /* @__PURE__ */ import_react99.default.createElement(Modal.Dialog, { ref, size: "sm", ...modalProps }, /* @__PURE__ */ import_react99.default.createElement(DialogWrapper, { ...props }))));
 };
 var DialogWrapper = ({
   title,
@@ -15288,7 +15365,7 @@ var DialogWrapper = ({
   primaryAction,
   secondaryAction
 }) => {
-  const ref = import_react100.default.useRef(null);
+  const ref = import_react99.default.useRef(null);
   const labelledBy = (0, import_utils27.useId)();
   const describedBy = (0, import_utils27.useId)();
   const { dialogProps } = (0, import_dialog.useDialog)(
@@ -15299,35 +15376,35 @@ var DialogWrapper = ({
     },
     ref
   );
-  return /* @__PURE__ */ import_react100.default.createElement("div", { ref, ...dialogProps, className: tw("outline-none") }, /* @__PURE__ */ import_react100.default.createElement(Modal.Header, { className: tw("icon-stroke-2") }, /* @__PURE__ */ import_react100.default.createElement(Icon, { icon: DIALOG_ICONS_AND_COLORS[type].icon, color: DIALOG_ICONS_AND_COLORS[type].color, fontSize: 20 }), /* @__PURE__ */ import_react100.default.createElement(Modal.Title, { id: labelledBy, variant: "large", color: DIALOG_ICONS_AND_COLORS[type].color }, title)), /* @__PURE__ */ import_react100.default.createElement(Modal.Body, { id: describedBy }, /* @__PURE__ */ import_react100.default.createElement(Typography2.Default, null, children)), /* @__PURE__ */ import_react100.default.createElement(Modal.Footer, null, /* @__PURE__ */ import_react100.default.createElement(Modal.Actions, null, secondaryAction && /* @__PURE__ */ import_react100.default.createElement(Button2.Ghost, { key: secondaryAction.text, ...(0, import_lodash_es35.omit)(secondaryAction, "text") }, secondaryAction.text), /* @__PURE__ */ import_react100.default.createElement(Button2.Secondary, { key: primaryAction.text, ...(0, import_lodash_es35.omit)(primaryAction, "text") }, primaryAction.text))));
+  return /* @__PURE__ */ import_react99.default.createElement("div", { ref, ...dialogProps, className: tw("outline-none") }, /* @__PURE__ */ import_react99.default.createElement(Modal.Header, { className: tw("icon-stroke-2") }, /* @__PURE__ */ import_react99.default.createElement(Icon, { icon: DIALOG_ICONS_AND_COLORS[type].icon, color: DIALOG_ICONS_AND_COLORS[type].color, fontSize: 20 }), /* @__PURE__ */ import_react99.default.createElement(Modal.Title, { id: labelledBy, variant: "large", color: DIALOG_ICONS_AND_COLORS[type].color }, title)), /* @__PURE__ */ import_react99.default.createElement(Modal.Body, { id: describedBy }, /* @__PURE__ */ import_react99.default.createElement(Typography2.Default, null, children)), /* @__PURE__ */ import_react99.default.createElement(Modal.Footer, null, /* @__PURE__ */ import_react99.default.createElement(Modal.Actions, null, secondaryAction && /* @__PURE__ */ import_react99.default.createElement(Button2.Ghost, { key: secondaryAction.text, ...(0, import_lodash_es35.omit)(secondaryAction, "text") }, secondaryAction.text), /* @__PURE__ */ import_react99.default.createElement(Button2.Secondary, { key: primaryAction.text, ...(0, import_lodash_es35.omit)(primaryAction, "text") }, primaryAction.text))));
 };
 
 // src/molecules/Drawer/Drawer.tsx
-var import_react103 = __toESM(require("react"));
-var import_react_aria_components17 = require("react-aria-components");
+var import_react102 = __toESM(require("react"));
+var import_react_aria_components15 = require("react-aria-components");
 var import_web5 = require("@react-spring/web");
 var import_lodash_es37 = require("lodash-es");
 
 // src/molecules/Modal/ModalTitle.tsx
-var import_react101 = __toESM(require("react"));
-var import_react_aria_components16 = require("react-aria-components");
+var import_react100 = __toESM(require("react"));
+var import_react_aria_components14 = require("react-aria-components");
 var ModalTitle = ({ children, ...props }) => {
-  const [ctxProps] = (0, import_react_aria_components16.useContextProps)({ ...props, slot: "title" }, null, import_react_aria_components16.HeadingContext);
-  return /* @__PURE__ */ import_react101.default.createElement(Modal.Title, { id: ctxProps.id, ...props }, children);
+  const [ctxProps] = (0, import_react_aria_components14.useContextProps)({ ...props, slot: "title" }, null, import_react_aria_components14.HeadingContext);
+  return /* @__PURE__ */ import_react100.default.createElement(Modal.Title, { id: ctxProps.id, ...props }, children);
 };
 
 // src/molecules/Tabs/Tabs.tsx
-var import_react102 = __toESM(require("react"));
+var import_react101 = __toESM(require("react"));
 var import_lodash_es36 = require("lodash-es");
 var import_chevronLeft5 = __toESM(require_chevronLeft());
 var import_chevronRight5 = __toESM(require_chevronRight());
 var import_warningSign4 = __toESM(require_warningSign());
 var isTabComponent = (c) => {
-  return import_react102.default.isValidElement(c) && (c.type === Tab || c.type === ModalTab);
+  return import_react101.default.isValidElement(c) && (c.type === Tab || c.type === ModalTab);
 };
-var Tab = import_react102.default.forwardRef(
+var Tab = import_react101.default.forwardRef(
   ({ className, id, title, children }, ref) => {
-    return /* @__PURE__ */ import_react102.default.createElement(
+    return /* @__PURE__ */ import_react101.default.createElement(
       "div",
       {
         ref,
@@ -15341,10 +15418,10 @@ var Tab = import_react102.default.forwardRef(
     );
   }
 );
-var TabContainer = ({ className, children, ...rest }) => /* @__PURE__ */ import_react102.default.createElement("div", { ...rest, className: classNames("py-6 z-0", className) }, children);
+var TabContainer = ({ className, children, ...rest }) => /* @__PURE__ */ import_react101.default.createElement("div", { ...rest, className: classNames("py-6 z-0", className) }, children);
 var ModalTab = Tab;
 var asTabItem = (Component, displayName, { defaultUnderlineHidden } = {}) => {
-  const Tab2 = import_react102.default.forwardRef(
+  const Tab2 = import_react101.default.forwardRef(
     ({
       id,
       value,
@@ -15363,11 +15440,11 @@ var asTabItem = (Component, displayName, { defaultUnderlineHidden } = {}) => {
       const _id = id ?? (0, import_lodash_es36.kebabCase)(title);
       let statusIcon = void 0;
       if (status === "warning") {
-        statusIcon = /* @__PURE__ */ import_react102.default.createElement(InlineIcon, { icon: import_warningSign4.default, color: selected ? void 0 : "warning-default" });
+        statusIcon = /* @__PURE__ */ import_react101.default.createElement(InlineIcon, { icon: import_warningSign4.default, color: selected ? void 0 : "warning-default" });
       } else if (status === "error") {
-        statusIcon = /* @__PURE__ */ import_react102.default.createElement(InlineIcon, { icon: import_warningSign4.default, color: selected ? void 0 : "danger-default" });
+        statusIcon = /* @__PURE__ */ import_react101.default.createElement(InlineIcon, { icon: import_warningSign4.default, color: selected ? void 0 : "danger-default" });
       }
-      const tab = /* @__PURE__ */ import_react102.default.createElement(
+      const tab = /* @__PURE__ */ import_react101.default.createElement(
         Component,
         {
           ref,
@@ -15388,7 +15465,7 @@ var asTabItem = (Component, displayName, { defaultUnderlineHidden } = {}) => {
           tabIndex: disabled ? void 0 : 0,
           ...rest
         },
-        /* @__PURE__ */ import_react102.default.createElement(
+        /* @__PURE__ */ import_react101.default.createElement(
           Typography2,
           {
             htmlTag: "div",
@@ -15396,8 +15473,8 @@ var asTabItem = (Component, displayName, { defaultUnderlineHidden } = {}) => {
             color: selected ? "primary-default" : disabled ? "default" : "current",
             className: tw("inline-flex items-center gap-3")
           },
-          showNotification ? /* @__PURE__ */ import_react102.default.createElement(Badge.Notification, { right: "-4px", top: "3px" }, /* @__PURE__ */ import_react102.default.createElement("span", { className: tw("whitespace-nowrap") }, title)) : /* @__PURE__ */ import_react102.default.createElement("span", { className: tw("whitespace-nowrap") }, title),
-          (0, import_lodash_es36.isNumber)(badge) && /* @__PURE__ */ import_react102.default.createElement(
+          showNotification ? /* @__PURE__ */ import_react101.default.createElement(Badge.Notification, { right: "-4px", top: "3px" }, /* @__PURE__ */ import_react101.default.createElement("span", { className: tw("whitespace-nowrap") }, title)) : /* @__PURE__ */ import_react101.default.createElement("span", { className: tw("whitespace-nowrap") }, title),
+          (0, import_lodash_es36.isNumber)(badge) && /* @__PURE__ */ import_react101.default.createElement(
             Typography2,
             {
               htmlTag: "span",
@@ -15405,7 +15482,7 @@ var asTabItem = (Component, displayName, { defaultUnderlineHidden } = {}) => {
               color: selected ? "primary-intense" : "grey-5",
               className: "leading-none"
             },
-            /* @__PURE__ */ import_react102.default.createElement(
+            /* @__PURE__ */ import_react101.default.createElement(
               TabBadge,
               {
                 kind: "filled",
@@ -15417,7 +15494,7 @@ var asTabItem = (Component, displayName, { defaultUnderlineHidden } = {}) => {
           statusIcon
         )
       );
-      return tooltip ? /* @__PURE__ */ import_react102.default.createElement(Tooltip, { content: tooltip }, tab) : tab;
+      return tooltip ? /* @__PURE__ */ import_react101.default.createElement(Tooltip, { content: tooltip }, tab) : tab;
     }
   );
   Tab2.displayName = displayName;
@@ -15428,19 +15505,19 @@ var CARET_OFFSET = 24;
 var createTabsComponent = (TabComponent, TabItemComponent, displayName, renderChildren) => {
   const Tabs2 = (props) => {
     const { className, value, defaultValue, onChange, children } = props;
-    const childArr = import_react102.default.Children.toArray(children);
+    const childArr = import_react101.default.Children.toArray(children);
     const firstTab = childArr[0];
     const firstTabValue = isTabComponent(firstTab) ? firstTab.props.value : -1;
-    const [selected, setSelected] = (0, import_react102.useState)(value ?? defaultValue ?? firstTabValue ?? 0);
-    const [leftCaret, showLeftCaret] = (0, import_react102.useState)(false);
-    const [rightCaret, showRightCaret] = (0, import_react102.useState)(false);
-    const parentRef = (0, import_react102.useRef)(null);
-    const containerRef = (0, import_react102.useRef)(null);
-    const tabsRef = (0, import_react102.useRef)(null);
+    const [selected, setSelected] = (0, import_react101.useState)(value ?? defaultValue ?? firstTabValue ?? 0);
+    const [leftCaret, showLeftCaret] = (0, import_react101.useState)(false);
+    const [rightCaret, showRightCaret] = (0, import_react101.useState)(false);
+    const parentRef = (0, import_react101.useRef)(null);
+    const containerRef = (0, import_react101.useRef)(null);
+    const tabsRef = (0, import_react101.useRef)(null);
     const revealSelectedTab = ({ smooth }) => {
       const container = containerRef.current;
       const tabs = tabsRef.current;
-      const values = import_react102.default.Children.map(
+      const values = import_react101.default.Children.map(
         children,
         (tab, i) => tab?.props.value ?? i
       );
@@ -15471,15 +15548,15 @@ var createTabsComponent = (TabComponent, TabItemComponent, displayName, renderCh
       showLeftCaret(hasLeftCaret);
       showRightCaret(hasRightCaret);
     };
-    (0, import_react102.useEffect)(() => {
+    (0, import_react101.useEffect)(() => {
       if (value === void 0) {
         return;
       }
       updateCarets();
       setSelected(value);
       revealSelectedTab({ smooth: value !== selected });
-    }, [value, import_react102.default.Children.count(children)]);
-    (0, import_react102.useLayoutEffect)(() => {
+    }, [value, import_react101.default.Children.count(children)]);
+    (0, import_react101.useLayoutEffect)(() => {
       updateCarets();
       containerRef.current?.addEventListener("scroll", updateCarets);
       window.addEventListener("resize", updateCarets);
@@ -15540,12 +15617,12 @@ var createTabsComponent = (TabComponent, TabItemComponent, displayName, renderCh
     const handleSelected = (key) => {
       (onChange ?? setSelected)(key);
     };
-    import_react102.default.Children.forEach(children, (c) => {
+    import_react101.default.Children.forEach(children, (c) => {
       if (c && !isTabComponent(c)) {
         throw new Error("<Tabs> can only have <Tabs.Tab> components as children");
       }
     });
-    return /* @__PURE__ */ import_react102.default.createElement("div", { ref: parentRef, className: classNames("Aquarium-Tabs", tw("h-full"), className) }, /* @__PURE__ */ import_react102.default.createElement("div", { className: tw("relative flex items-center border-b-2 border-default") }, /* @__PURE__ */ import_react102.default.createElement("div", { ref: containerRef, className: tw("overflow-y-auto scrollbar-hide mb-[-2px] h-auto") }, /* @__PURE__ */ import_react102.default.createElement(
+    return /* @__PURE__ */ import_react101.default.createElement("div", { ref: parentRef, className: classNames("Aquarium-Tabs", tw("h-full"), className) }, /* @__PURE__ */ import_react101.default.createElement("div", { className: tw("relative flex items-center border-b-2 border-default") }, /* @__PURE__ */ import_react101.default.createElement("div", { ref: containerRef, className: tw("overflow-y-auto scrollbar-hide mb-[-2px] h-auto") }, /* @__PURE__ */ import_react101.default.createElement(
       "div",
       {
         ref: tabsRef,
@@ -15553,9 +15630,9 @@ var createTabsComponent = (TabComponent, TabItemComponent, displayName, renderCh
         "aria-label": "tabs",
         className: tw("inline-flex items-center cursor-pointer font-normal h-full")
       },
-      import_react102.default.Children.map(
+      import_react101.default.Children.map(
         children,
-        (tab, index) => tab ? /* @__PURE__ */ import_react102.default.createElement(
+        (tab, index) => tab ? /* @__PURE__ */ import_react101.default.createElement(
           TabItemComponent,
           {
             key: tab.props.value,
@@ -15567,26 +15644,26 @@ var createTabsComponent = (TabComponent, TabItemComponent, displayName, renderCh
           }
         ) : void 0
       )
-    )), leftCaret && /* @__PURE__ */ import_react102.default.createElement("div", { className: tw("absolute left-0 bg-gradient-to-r from-white via-white z-20 py-3 pr-4") }, /* @__PURE__ */ import_react102.default.createElement(
+    )), leftCaret && /* @__PURE__ */ import_react101.default.createElement("div", { className: tw("absolute left-0 bg-gradient-to-r from-white via-white z-20 py-3 pr-4") }, /* @__PURE__ */ import_react101.default.createElement(
       "div",
       {
         onClick: () => handleScrollToNext("left"),
         className: tw("hover:bg-muted p-2 leading-none cursor-pointer")
       },
-      /* @__PURE__ */ import_react102.default.createElement(InlineIcon, { icon: import_chevronLeft5.default })
-    )), rightCaret && /* @__PURE__ */ import_react102.default.createElement(
+      /* @__PURE__ */ import_react101.default.createElement(InlineIcon, { icon: import_chevronLeft5.default })
+    )), rightCaret && /* @__PURE__ */ import_react101.default.createElement(
       "div",
       {
         onClick: () => handleScrollToNext("right"),
         className: tw("absolute right-0 bg-gradient-to-l from-white via-white z-20 py-3 pl-4")
       },
-      /* @__PURE__ */ import_react102.default.createElement(
+      /* @__PURE__ */ import_react101.default.createElement(
         "div",
         {
           onClick: () => handleScrollToNext("right"),
           className: tw("hover:bg-muted p-2 leading-none cursor-pointer")
         },
-        /* @__PURE__ */ import_react102.default.createElement(InlineIcon, { icon: import_chevronRight5.default })
+        /* @__PURE__ */ import_react101.default.createElement(InlineIcon, { icon: import_chevronRight5.default })
       )
     )), renderChildren(children, selected, props));
   };
@@ -15594,7 +15671,7 @@ var createTabsComponent = (TabComponent, TabItemComponent, displayName, renderCh
   Tabs2.Tab = TabComponent;
   return Tabs2;
 };
-var Tabs = createTabsComponent(Tab, TabItem, "Tabs", (children, selected) => /* @__PURE__ */ import_react102.default.createElement(TabContainer, null, children.find(
+var Tabs = createTabsComponent(Tab, TabItem, "Tabs", (children, selected) => /* @__PURE__ */ import_react101.default.createElement(TabContainer, null, children.find(
   (node, index) => node?.props.value === selected || index === selected
 )));
 
@@ -15622,7 +15699,7 @@ var Drawer = ({
   secondaryActions,
   closeOnEsc = true
 }) => {
-  const [hidden, setHidden] = import_react103.default.useState(!open);
+  const [hidden, setHidden] = import_react102.default.useState(!open);
   if (open && hidden) {
     setHidden(!open);
   }
@@ -15645,11 +15722,11 @@ var Drawer = ({
   }
   const dialogSize = size === "lg" ? "full" : size;
   const styles = modalStyles({ kind: "drawer", size: dialogSize });
-  const childElements = import_react103.default.Children.toArray(children).filter(import_react103.default.isValidElement);
+  const childElements = import_react102.default.Children.toArray(children).filter(import_react102.default.isValidElement);
   const onlyChild = childElements.length === 1 ? childElements[0] : null;
   const hasTabs = isComponentType(onlyChild, Tabs);
-  return /* @__PURE__ */ import_react103.default.createElement(
-    import_react_aria_components17.ModalOverlay,
+  return /* @__PURE__ */ import_react102.default.createElement(
+    import_react_aria_components15.ModalOverlay,
     {
       isOpen: !hidden,
       onOpenChange: (isOpen) => !isOpen && onClose(),
@@ -15657,60 +15734,60 @@ var Drawer = ({
       isKeyboardDismissDisabled: !closeOnEsc,
       className: styles.overlay({ className: "Aquarium-Drawer" })
     },
-    /* @__PURE__ */ import_react103.default.createElement(AnimatedBackDrop, { style: { opacity } }),
-    /* @__PURE__ */ import_react103.default.createElement(import_react_aria_components17.Modal, null, /* @__PURE__ */ import_react103.default.createElement(AnimatedDialog, { kind: "drawer", "aria-modal": "true", size: dialogSize, style: { position: "fixed", right } }, /* @__PURE__ */ import_react103.default.createElement(import_react_aria_components17.Dialog, { className: "flex flex-col grow overflow-y-auto" }, ({ close }) => /* @__PURE__ */ import_react103.default.createElement(import_react103.default.Fragment, null, /* @__PURE__ */ import_react103.default.createElement(Modal.CloseButtonContainer, null, /* @__PURE__ */ import_react103.default.createElement(Button2.Icon, { "aria-label": "Close", icon: import_cross6.default, onClick: close })), /* @__PURE__ */ import_react103.default.createElement(Modal.Header, { className: tw({ "pb-3": hasTabs }) }, /* @__PURE__ */ import_react103.default.createElement(ModalTitle, { kind: "drawer" }, title)), hasTabs ? /* @__PURE__ */ import_react103.default.createElement(
+    /* @__PURE__ */ import_react102.default.createElement(AnimatedBackDrop, { style: { opacity } }),
+    /* @__PURE__ */ import_react102.default.createElement(import_react_aria_components15.Modal, null, /* @__PURE__ */ import_react102.default.createElement(AnimatedDialog, { kind: "drawer", "aria-modal": "true", size: dialogSize, style: { position: "fixed", right } }, /* @__PURE__ */ import_react102.default.createElement(import_react_aria_components15.Dialog, { className: "flex flex-col grow overflow-y-auto" }, ({ close }) => /* @__PURE__ */ import_react102.default.createElement(import_react102.default.Fragment, null, /* @__PURE__ */ import_react102.default.createElement(Modal.CloseButtonContainer, null, /* @__PURE__ */ import_react102.default.createElement(Button2.Icon, { "aria-label": "Close", icon: import_cross6.default, onClick: close })), /* @__PURE__ */ import_react102.default.createElement(Modal.Header, { className: tw({ "pb-3": hasTabs }) }, /* @__PURE__ */ import_react102.default.createElement(ModalTitle, { kind: "drawer" }, title)), hasTabs ? /* @__PURE__ */ import_react102.default.createElement(
       DrawerTabs,
       {
         ...onlyChild.props,
         className: tw("[&>div:first-child]:px-5 grow flex flex-col overflow-y-auto")
       }
-    ) : /* @__PURE__ */ import_react103.default.createElement(Modal.Body, { tabIndex: 0, noFooter: !(secondaryActions ?? primaryAction) }, children), (secondaryActions ?? primaryAction) && /* @__PURE__ */ import_react103.default.createElement(Modal.Footer, null, /* @__PURE__ */ import_react103.default.createElement(Modal.Actions, { className: size === "sm" ? tw("flex-col") : void 0 }, size !== "sm" && menu && /* @__PURE__ */ import_react103.default.createElement(Box.Flex, { alignItems: "center" }, /* @__PURE__ */ import_react103.default.createElement(DropdownMenu2, { onAction: (action) => onAction(action), onOpenChange: onMenuOpenChange }, /* @__PURE__ */ import_react103.default.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ import_react103.default.createElement(Button2.Icon, { "aria-label": menuAriaLabel ?? "Context menu", icon: import_more4.default })), menu)), secondaryActions && (0, import_lodash_es37.castArray)(secondaryActions).filter(Boolean).map(({ text, ...action }) => /* @__PURE__ */ import_react103.default.createElement(Button2.Secondary, { key: text, ...action }, text)), primaryAction && /* @__PURE__ */ import_react103.default.createElement(Button2.Primary, { key: primaryAction.text, ...(0, import_lodash_es37.omit)(primaryAction, "text") }, primaryAction.text)))))))
+    ) : /* @__PURE__ */ import_react102.default.createElement(Modal.Body, { tabIndex: 0, noFooter: !(secondaryActions ?? primaryAction) }, children), (secondaryActions ?? primaryAction) && /* @__PURE__ */ import_react102.default.createElement(Modal.Footer, null, /* @__PURE__ */ import_react102.default.createElement(Modal.Actions, { className: size === "sm" ? tw("flex-col") : void 0 }, size !== "sm" && menu && /* @__PURE__ */ import_react102.default.createElement(Box.Flex, { alignItems: "center" }, /* @__PURE__ */ import_react102.default.createElement(DropdownMenu2, { onAction: (action) => onAction(action), onOpenChange: onMenuOpenChange }, /* @__PURE__ */ import_react102.default.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ import_react102.default.createElement(Button2.Icon, { "aria-label": menuAriaLabel ?? "Context menu", icon: import_more4.default })), menu)), secondaryActions && (0, import_lodash_es37.castArray)(secondaryActions).filter(Boolean).map(({ text, ...action }) => /* @__PURE__ */ import_react102.default.createElement(Button2.Secondary, { key: text, ...action }, text)), primaryAction && /* @__PURE__ */ import_react102.default.createElement(Button2.Primary, { key: primaryAction.text, ...(0, import_lodash_es37.omit)(primaryAction, "text") }, primaryAction.text)))))))
   );
 };
-var DrawerTabs = createTabsComponent(ModalTab, TabItem, "DrawerTabs", (children, selected) => /* @__PURE__ */ import_react103.default.createElement(Modal.Body, { className: tw("h-full") }, /* @__PURE__ */ import_react103.default.createElement(TabContainer, null, children.find(
+var DrawerTabs = createTabsComponent(ModalTab, TabItem, "DrawerTabs", (children, selected) => /* @__PURE__ */ import_react102.default.createElement(Modal.Body, { className: tw("h-full") }, /* @__PURE__ */ import_react102.default.createElement(TabContainer, null, children.find(
   (node, index) => node?.props.value === selected || index === selected
 ))));
 
 // src/molecules/Dropdown/Dropdown.tsx
-var import_react105 = __toESM(require("react"));
-var import_react_aria_components19 = require("react-aria-components");
+var import_react104 = __toESM(require("react"));
+var import_react_aria_components17 = require("react-aria-components");
 
 // src/molecules/Popover/Popover.tsx
-var import_react104 = __toESM(require("react"));
-var import_react_aria_components18 = require("react-aria-components");
+var import_react103 = __toESM(require("react"));
+var import_react_aria_components16 = require("react-aria-components");
 var import_utils29 = require("@react-aria/utils");
-var PopoverPropsContext = (0, import_react104.createContext)({});
-var Popover3 = ({ children, onOpenChange: _onOpenChange, onClose, onOpen, ...props }) => {
+var PopoverPropsContext = (0, import_react103.createContext)({});
+var Popover2 = ({ children, onOpenChange: _onOpenChange, onClose, onOpen, ...props }) => {
   const onOpenChange = (isOpen) => {
     _onOpenChange?.(isOpen);
     isOpen ? onOpen?.() : onClose?.();
   };
-  return /* @__PURE__ */ import_react104.default.createElement(PopoverPropsContext.Provider, { value: props }, /* @__PURE__ */ import_react104.default.createElement(import_react_aria_components18.DialogTrigger, { ...props, onOpenChange }, children));
+  return /* @__PURE__ */ import_react103.default.createElement(PopoverPropsContext.Provider, { value: props }, /* @__PURE__ */ import_react103.default.createElement(import_react_aria_components16.DialogTrigger, { ...props, onOpenChange }, children));
 };
-Popover3.displayName = "Popover";
+Popover2.displayName = "Popover";
 var Trigger = ({ children }) => {
-  return /* @__PURE__ */ import_react104.default.createElement(Pressable, { "aria-haspopup": "true" }, children);
+  return /* @__PURE__ */ import_react103.default.createElement(Pressable, { "aria-haspopup": "true" }, children);
 };
 Trigger.displayName = "Popover.Trigger";
-Popover3.Trigger = Trigger;
+Popover2.Trigger = Trigger;
 var Panel = ({ className, children }) => {
-  const { offset = 0, onOpenChange, ...props } = import_react104.default.useContext(PopoverPropsContext);
-  return /* @__PURE__ */ import_react104.default.createElement(Popover, { ...props, className, offset }, /* @__PURE__ */ import_react104.default.createElement(Dialog2, null, children));
+  const { offset = 0, onOpenChange, ...props } = import_react103.default.useContext(PopoverPropsContext);
+  return /* @__PURE__ */ import_react103.default.createElement(Popover, { ...props, className, offset }, /* @__PURE__ */ import_react103.default.createElement(Dialog, null, children));
 };
 Panel.displayName = "Popover.Panel";
-Popover3.Panel = Panel;
+Popover2.Panel = Panel;
 var CloseToggle = ({ children }) => {
-  const ctx = import_react104.default.useContext(import_react_aria_components18.OverlayTriggerStateContext);
+  const ctx = import_react103.default.useContext(import_react_aria_components16.OverlayTriggerStateContext);
   const onClick = ctx?.close;
-  const child = import_react104.default.Children.only(children);
-  return import_react104.default.cloneElement(child, { ...(0, import_utils29.mergeProps)(child.props, { onClick }) });
+  const child = import_react103.default.Children.only(children);
+  return import_react103.default.cloneElement(child, { ...(0, import_utils29.mergeProps)(child.props, { onClick }) });
 };
 CloseToggle.displayName = "Popover.CloseToggle";
-Popover3.CloseToggle = CloseToggle;
+Popover2.CloseToggle = CloseToggle;
 
 // src/molecules/Dropdown/Dropdown.tsx
 var Dropdown = ({ children, content, placement = "bottom-left" }) => {
-  return /* @__PURE__ */ import_react105.default.createElement(Popover3, { placement }, /* @__PURE__ */ import_react105.default.createElement(Popover3.Trigger, null, children), /* @__PURE__ */ import_react105.default.createElement(Popover3.Panel, { className: "Aquarium-Dropdown" }, content));
+  return /* @__PURE__ */ import_react104.default.createElement(Popover2, { placement }, /* @__PURE__ */ import_react104.default.createElement(Popover2.Trigger, null, children), /* @__PURE__ */ import_react104.default.createElement(Popover2.Panel, { className: "Aquarium-Dropdown" }, content));
 };
 var DropdownMenu3 = ({
   title,
@@ -15719,13 +15796,13 @@ var DropdownMenu3 = ({
   triggerId,
   setClose = () => void 0
 }) => {
-  const menuRef = import_react105.default.useRef(null);
-  import_react105.default.useEffect(() => {
+  const menuRef = import_react104.default.useRef(null);
+  import_react104.default.useEffect(() => {
     const id = setTimeout(() => (menuRef.current?.children[0]).focus());
     return () => clearTimeout(id);
   }, [menuRef.current]);
-  return /* @__PURE__ */ import_react105.default.createElement("div", { style: { minWidth: "250px" }, className: tw("py-3 bg-popover-content") }, !!title && /* @__PURE__ */ import_react105.default.createElement("div", { className: tw("px-4 py-4 text-left text-intense typography-default-strong") }, title), /* @__PURE__ */ import_react105.default.createElement("ol", { role: "menu", ref: menuRef, id: contentId, "aria-labelledby": triggerId }, import_react105.default.Children.map(children, (child) => {
-    return import_react105.default.cloneElement(child, { setClose });
+  return /* @__PURE__ */ import_react104.default.createElement("div", { style: { minWidth: "250px" }, className: tw("py-3 bg-popover-content") }, !!title && /* @__PURE__ */ import_react104.default.createElement("div", { className: tw("px-4 py-4 text-left text-intense typography-default-strong") }, title), /* @__PURE__ */ import_react104.default.createElement("ol", { role: "menu", ref: menuRef, id: contentId, "aria-labelledby": triggerId }, import_react104.default.Children.map(children, (child) => {
+    return import_react104.default.cloneElement(child, { setClose });
   })));
 };
 var DropdownItem = ({
@@ -15738,7 +15815,7 @@ var DropdownItem = ({
   setClose = () => void 0,
   ...props
 }) => {
-  const ctx = import_react105.default.useContext(import_react_aria_components19.OverlayTriggerStateContext);
+  const ctx = import_react104.default.useContext(import_react_aria_components17.OverlayTriggerStateContext);
   const handleSelect = () => {
     onSelect?.();
     ctx?.close();
@@ -15772,8 +15849,8 @@ var DropdownItem = ({
       handleSelect();
     }
   };
-  const itemContent = /* @__PURE__ */ import_react105.default.createElement("div", { className: tw("py-3 px-4") }, children);
-  return /* @__PURE__ */ import_react105.default.createElement(
+  const itemContent = /* @__PURE__ */ import_react104.default.createElement("div", { className: tw("py-3 px-4") }, children);
+  return /* @__PURE__ */ import_react104.default.createElement(
     "li",
     {
       role: "menuitem",
@@ -15790,14 +15867,14 @@ var DropdownItem = ({
         })
       )
     },
-    tooltip ? /* @__PURE__ */ import_react105.default.createElement(Tooltip, { content: tooltip, placement: tooltipPlacement, display: "block" }, /* @__PURE__ */ import_react105.default.createElement("div", { tabIndex: 0, className: tw("grow") }, itemContent)) : itemContent
+    tooltip ? /* @__PURE__ */ import_react104.default.createElement(Tooltip, { content: tooltip, placement: tooltipPlacement, display: "block" }, /* @__PURE__ */ import_react104.default.createElement("div", { tabIndex: 0, className: tw("grow") }, itemContent)) : itemContent
   );
 };
 Dropdown.Menu = DropdownMenu3;
 Dropdown.Item = DropdownItem;
 
 // src/molecules/EmptyState/EmptyState.tsx
-var import_react106 = __toESM(require("react"));
+var import_react105 = __toESM(require("react"));
 var EmptyStateLayout = /* @__PURE__ */ ((EmptyStateLayout2) => {
   EmptyStateLayout2["Vertical"] = "vertical";
   EmptyStateLayout2["Horizontal"] = "horizontal";
@@ -15835,7 +15912,7 @@ var EmptyState = ({
   fullHeight = isVerticalLayout(layout) ? true : false
 }) => {
   const template = layoutStyle(layout);
-  return /* @__PURE__ */ import_react106.default.createElement(
+  return /* @__PURE__ */ import_react105.default.createElement(
     Box,
     {
       className: classNames(
@@ -15851,7 +15928,7 @@ var EmptyState = ({
       backgroundColor: "transparent",
       borderColor: "default"
     },
-    /* @__PURE__ */ import_react106.default.createElement(
+    /* @__PURE__ */ import_react105.default.createElement(
       Box.Flex,
       {
         style: { gap: "56px" },
@@ -15860,19 +15937,144 @@ var EmptyState = ({
         alignItems: template.layout === "row" ? "center" : template.alignItems,
         height: fullHeight ? "full" : void 0
       },
-      Image2 && (typeof Image2 === "string" ? /* @__PURE__ */ import_react106.default.createElement(
+      Image2 && (typeof Image2 === "string" ? /* @__PURE__ */ import_react105.default.createElement(
         "img",
         {
           src: Image2,
           alt: imageAlt,
           style: { width: imageWidth ? `${imageWidth}px` : void 0, height: "auto" }
         }
-      ) : /* @__PURE__ */ import_react106.default.createElement("div", { className: tw("animate-draw") }, /* @__PURE__ */ import_react106.default.createElement(Image2, null))),
-      /* @__PURE__ */ import_react106.default.createElement(Box.Flex, { flexDirection: "column", justifyContent: template.justifyContent, alignItems: template.alignItems }, /* @__PURE__ */ import_react106.default.createElement(Typography2.Heading, { htmlTag: "h2" }, title), children && /* @__PURE__ */ import_react106.default.createElement(Box, { marginTop: "5" }, /* @__PURE__ */ import_react106.default.createElement(Typography2.Default, null, children)), (secondaryAction ?? primaryAction) && /* @__PURE__ */ import_react106.default.createElement(Box.Flex, { marginTop: "7", gap: "4", justifyContent: "center", alignItems: "center", flexWrap: "wrap" }, primaryAction && renderAction({ kind: "primary", action: primaryAction }), secondaryAction && renderAction({ kind: "secondary", action: secondaryAction })), footer && /* @__PURE__ */ import_react106.default.createElement(Box, { marginTop: "5" }, /* @__PURE__ */ import_react106.default.createElement(Typography2.Small, { color: "default" }, footer)))
+      ) : /* @__PURE__ */ import_react105.default.createElement("div", { className: tw("animate-draw") }, /* @__PURE__ */ import_react105.default.createElement(Image2, null))),
+      /* @__PURE__ */ import_react105.default.createElement(Box.Flex, { flexDirection: "column", justifyContent: template.justifyContent, alignItems: template.alignItems }, /* @__PURE__ */ import_react105.default.createElement(Typography2.Heading, { htmlTag: "h2" }, title), children && /* @__PURE__ */ import_react105.default.createElement(Box, { marginTop: "5" }, /* @__PURE__ */ import_react105.default.createElement(Typography2.Default, null, children)), (secondaryAction ?? primaryAction) && /* @__PURE__ */ import_react105.default.createElement(Box.Flex, { marginTop: "7", gap: "4", justifyContent: "center", alignItems: "center", flexWrap: "wrap" }, primaryAction && renderAction({ kind: "primary", action: primaryAction }), secondaryAction && renderAction({ kind: "secondary", action: secondaryAction })), footer && /* @__PURE__ */ import_react105.default.createElement(Box, { marginTop: "5" }, /* @__PURE__ */ import_react105.default.createElement(Typography2.Small, { color: "default" }, footer)))
     )
   );
 };
 
+// src/atoms/Filter/Filter.tsx
+var import_react106 = __toESM(require("react"));
+var import_react_aria_components18 = require("react-aria-components");
+var import_tailwind_variants14 = require("tailwind-variants");
+var import_cross7 = __toESM(require_cross());
+var DATE_FORMAT_OPTIONS = {
+  locale: "en-GB",
+  options: { day: "numeric", month: "numeric", year: "numeric" }
+};
+var filterWrapper = (0, import_tailwind_variants14.tv)({
+  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 = import_react106.default.useContext(import_react_aria_components18.DatePickerStateContext);
+  const ariaDateRangePickerState = import_react106.default.useContext(import_react_aria_components18.DateRangePickerStateContext);
+  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__ */ import_react106.default.createElement(
+    import_react_aria_components18.Group,
+    {
+      ...props,
+      isInvalid: error2,
+      className: (renderProps) => filterWrapper({ ...renderProps, hasValue: hasValue || !!badge })
+    },
+    /* @__PURE__ */ import_react106.default.createElement(import_react106.default.Fragment, null, /* @__PURE__ */ import_react106.default.createElement(
+      import_react_aria_components18.Button,
+      {
+        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__ */ import_react106.default.createElement("div", { className: tw("flex items-center gap-3 divide-x divide-grey-20") }, /* @__PURE__ */ import_react106.default.createElement("div", { className: tw("flex items-center gap-3") }, /* @__PURE__ */ import_react106.default.createElement("div", { className: tw("flex items-center gap-2") }, /* @__PURE__ */ import_react106.default.createElement(InlineIcon, { icon }), /* @__PURE__ */ import_react106.default.createElement(Typography2.Small, null, labelText)), badge && /* @__PURE__ */ import_react106.default.createElement(Typography2, { color: "primary-active", className: tw("flex items-center") }, /* @__PURE__ */ import_react106.default.createElement(Badge, { dense: true, value: badge }))), hasValue && /* @__PURE__ */ import_react106.default.createElement("div", { className: "pl-3" }, /* @__PURE__ */ import_react106.default.createElement(
+        Typography2.Small,
+        {
+          className: tw("truncate max-w-[233px]"),
+          color: error2 ? "danger-intense" : "primary-active"
+        },
+        value,
+        isUsedInsideDatePicker && /* @__PURE__ */ import_react106.default.createElement(DateDisplay, { state: ariaDatePickerState }),
+        isUsedInsideDateRangePicker && /* @__PURE__ */ import_react106.default.createElement(DateDisplay, { state: ariaDateRangePickerState })
+      )))
+    ), showClearButton && /* @__PURE__ */ import_react106.default.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__ */ import_react106.default.createElement(Box.Flex, { gap: "2" }, /* @__PURE__ */ import_react106.default.createElement("span", null, primary), secondary && /* @__PURE__ */ import_react106.default.createElement(import_react106.default.Fragment, null, /* @__PURE__ */ import_react106.default.createElement("span", { "aria-hidden": true, className: tw("text-muted") }, "-"), /* @__PURE__ */ import_react106.default.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__ */ import_react106.default.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__ */ import_react106.default.createElement(InlineIcon, { icon: import_cross7.default })
+  )
+);
+var Filter = () => null;
+FilterTrigger.displayName = "Filter.Trigger";
+Filter.Trigger = FilterTrigger;
+
 // src/molecules/LineClamp/LineClamp.tsx
 var import_react107 = __toESM(require("react"));
 var LineClamp2 = ({
@@ -15944,9 +16146,9 @@ var ListItem = ({ name, icon, active = false }) => {
 
 // src/molecules/Modal/Modal.tsx
 var import_react110 = __toESM(require("react"));
-var import_react_aria_components20 = require("react-aria-components");
+var import_react_aria_components19 = require("react-aria-components");
 var import_lodash_es38 = require("lodash-es");
-var import_cross7 = __toESM(require_cross());
+var import_cross8 = __toESM(require_cross());
 var Modal2 = ({
   open,
   onClose,
@@ -15965,7 +16167,7 @@ var Modal2 = ({
   const styles = modalStyles({ kind: "dialog", size });
   const hasTabs = isComponentType(children, ModalTabs);
   return /* @__PURE__ */ import_react110.default.createElement(
-    import_react_aria_components20.ModalOverlay,
+    import_react_aria_components19.ModalOverlay,
     {
       isOpen: open,
       onOpenChange: (isOpen) => !isOpen && onClose(),
@@ -15974,7 +16176,7 @@ var Modal2 = ({
       className: styles.overlay({ className: "Aquarium-Modal" })
     },
     size !== "screen" && /* @__PURE__ */ import_react110.default.createElement(Modal.BackDrop, { className: styles.backdrop() }),
-    /* @__PURE__ */ import_react110.default.createElement(import_react_aria_components20.Modal, { className: styles.dialog() }, /* @__PURE__ */ import_react110.default.createElement(import_react_aria_components20.Dialog, { className: "flex flex-col grow overflow-y-auto" }, ({ close }) => /* @__PURE__ */ import_react110.default.createElement(import_react110.default.Fragment, null, /* @__PURE__ */ import_react110.default.createElement(Modal.CloseButtonContainer, null, /* @__PURE__ */ import_react110.default.createElement(Button2.Icon, { "aria-label": "Close", icon: import_cross7.default, onClick: close })), headerImage !== void 0 && /* @__PURE__ */ import_react110.default.createElement(Modal.HeaderImage, { backgroundImage: headerImage }), /* @__PURE__ */ import_react110.default.createElement(
+    /* @__PURE__ */ import_react110.default.createElement(import_react_aria_components19.Modal, { className: styles.dialog() }, /* @__PURE__ */ import_react110.default.createElement(import_react_aria_components19.Dialog, { className: "flex flex-col grow overflow-y-auto" }, ({ close }) => /* @__PURE__ */ import_react110.default.createElement(import_react110.default.Fragment, null, /* @__PURE__ */ import_react110.default.createElement(Modal.CloseButtonContainer, null, /* @__PURE__ */ import_react110.default.createElement(Button2.Icon, { "aria-label": "Close", icon: import_cross8.default, onClick: close })), headerImage !== void 0 && /* @__PURE__ */ import_react110.default.createElement(Modal.HeaderImage, { backgroundImage: headerImage }), /* @__PURE__ */ import_react110.default.createElement(
       Modal.Header,
       {
         kind: "dialog",
@@ -16687,7 +16889,7 @@ var import_lodash_es43 = require("lodash-es");
 
 // src/atoms/PageHeader/PageHeader.tsx
 var import_react117 = __toESM(require("react"));
-var PageHeader = ({ children, className, ...rest }) => /* @__PURE__ */ import_react117.default.createElement("div", { className: classNames(tw("flex flex-row gap-4 pb-6"), className), ...rest }, children);
+var PageHeader = ({ children, className, ...rest }) => /* @__PURE__ */ import_react117.default.createElement("div", { className: classNames(tw("flex flex-row flex-wrap gap-4 pb-6"), className), ...rest }, children);
 PageHeader.Container = ({ children, className, ...rest }) => /* @__PURE__ */ import_react117.default.createElement("div", { className: classNames(tw("flex flex-col grow gap-0"), className), ...rest }, children);
 PageHeader.TitleContainer = ({ children, className, ...rest }) => /* @__PURE__ */ import_react117.default.createElement("div", { className: classNames(tw("flex flex-col justify-center gap-2"), className), ...rest }, children);
 PageHeader.Title = ({ isSubHeader = false, children, ...rest }) => /* @__PURE__ */ import_react117.default.createElement(
@@ -16747,9 +16949,9 @@ PageHeader2.SubHeader.displayName = "PageHeader.SubHeader";
 
 // src/molecules/Popover/PopoverContext.tsx
 var import_react119 = require("react");
-var PopoverContext2 = (0, import_react119.createContext)(null);
+var PopoverContext = (0, import_react119.createContext)(null);
 var usePopoverContext = () => {
-  const ctx = (0, import_react119.useContext)(PopoverContext2);
+  const ctx = (0, import_react119.useContext)(PopoverContext);
   if (ctx === null) {
     throw new Error("PopoverContext was used outside of provider.");
   }
@@ -16781,12 +16983,12 @@ var PopoverDialogPropsContext = (0, import_react121.createContext)({
   primaryAction: { text: "", onClick: import_lodash_es44.noop }
 });
 var PopoverDialog2 = ({ placement, open, children, ...props }) => {
-  return /* @__PURE__ */ import_react121.default.createElement(Popover3, { placement }, /* @__PURE__ */ import_react121.default.createElement(PopoverDialogPropsContext.Provider, { value: props }, children));
+  return /* @__PURE__ */ import_react121.default.createElement(Popover2, { placement }, /* @__PURE__ */ import_react121.default.createElement(PopoverDialogPropsContext.Provider, { value: props }, children));
 };
-PopoverDialog2.Trigger = Popover3.Trigger;
+PopoverDialog2.Trigger = Popover2.Trigger;
 var Prompt = ({ children }) => {
   const { title, primaryAction, secondaryAction } = import_react121.default.useContext(PopoverDialogPropsContext);
-  return /* @__PURE__ */ import_react121.default.createElement(Popover3.Panel, { className: "Aquarium-PopoverDialog max-w-[300px]" }, /* @__PURE__ */ import_react121.default.createElement(PopoverDialog.Header, null, /* @__PURE__ */ import_react121.default.createElement(PopoverDialog.Title, null, title)), /* @__PURE__ */ import_react121.default.createElement(PopoverDialog.Body, null, children), /* @__PURE__ */ import_react121.default.createElement(PopoverDialog.Footer, null, /* @__PURE__ */ import_react121.default.createElement(PopoverDialog.Actions, null, secondaryAction && /* @__PURE__ */ import_react121.default.createElement(Popover3.CloseToggle, null, /* @__PURE__ */ import_react121.default.createElement(Button2, { key: secondaryAction.text, kind: "secondary", dense: true, ...(0, import_lodash_es44.omit)(secondaryAction, "text") }, secondaryAction.text)), /* @__PURE__ */ import_react121.default.createElement(Popover3.CloseToggle, null, /* @__PURE__ */ import_react121.default.createElement(Button2, { key: primaryAction.text, kind: "ghost", dense: true, ...(0, import_lodash_es44.omit)(primaryAction, "text") }, primaryAction.text)))));
+  return /* @__PURE__ */ import_react121.default.createElement(Popover2.Panel, { className: "Aquarium-PopoverDialog max-w-[300px]" }, /* @__PURE__ */ import_react121.default.createElement(PopoverDialog.Header, null, /* @__PURE__ */ import_react121.default.createElement(PopoverDialog.Title, null, title)), /* @__PURE__ */ import_react121.default.createElement(PopoverDialog.Body, null, children), /* @__PURE__ */ import_react121.default.createElement(PopoverDialog.Footer, null, /* @__PURE__ */ import_react121.default.createElement(PopoverDialog.Actions, null, secondaryAction && /* @__PURE__ */ import_react121.default.createElement(Popover2.CloseToggle, null, /* @__PURE__ */ import_react121.default.createElement(Button2, { key: secondaryAction.text, kind: "secondary", dense: true, ...(0, import_lodash_es44.omit)(secondaryAction, "text") }, secondaryAction.text)), /* @__PURE__ */ import_react121.default.createElement(Popover2.CloseToggle, null, /* @__PURE__ */ import_react121.default.createElement(Button2, { key: primaryAction.text, kind: "ghost", dense: true, ...(0, import_lodash_es44.omit)(primaryAction, "text") }, primaryAction.text)))));
 };
 Prompt.displayName = "PopoverDialog.Prompt";
 PopoverDialog2.Prompt = Prompt;
@@ -17520,7 +17722,7 @@ Timeline2.Skeleton.displayName = "Timeline.Skeleton";
 
 // src/molecules/TimePicker/TimePicker.tsx
 var import_react138 = __toESM(require("react"));
-var TimePicker = (props) => /* @__PURE__ */ import_react138.default.createElement(TimeField, { ...props });
+var TimePicker = (props) => /* @__PURE__ */ import_react138.default.createElement(TimeField2, { ...props });
 
 // src/utils/table/sortByColumn.ts
 var sortByColumn = (items, column, sortState) => {
@@ -17821,6 +18023,7 @@ var system_default = {
   EmptyState,
   EmptyStateLayout,
   FileInput,
+  Filter,
   FormControl,
   Grid,
   HelperText,