@avenue-ticketing/ui 0.12.0-beta.7 → 0.12.0-beta.8

package/dist/react/date-range-picker.js

@@ -0,0 +1,1836 @@
+import { createContext, useMemo, useState, useEffect, isValidElement, useContext, Fragment as Fragment$1, useLayoutEffect, useRef, useCallback } from 'react';
+import { today, getLocalTimeZone, endOfMonth, startOfMonth, endOfWeek, startOfWeek, getDayOfWeek, isToday } from '@internationalized/date';
+import { useControlledState } from '@react-stately/utils';
+import { CalendarBlankIcon } from '@phosphor-icons/react/dist/csr/CalendarBlank';
+import { useDateFormatter } from 'react-aria';
+import { useLocale, DateRangePicker as DateRangePicker$1, Group, Dialog, Link, Button as Button$1, OverlayTriggerStateContext, Popover as Popover$1, useSlottedContext, RangeCalendarContext, RangeCalendar as RangeCalendar$1, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarGridBody, DateInput, DateSegment, RangeCalendarStateContext, CalendarCell as CalendarCell$1, TooltipTrigger as TooltipTrigger$1, Tooltip as Tooltip$1, OverlayArrow, Select as Select$1, ListBox, Label as Label$1, SelectValue as SelectValue$1, Text, ComboBox as ComboBox$1, ListBoxItem, ComboBoxStateContext, Input } from 'react-aria-components';
+import { extendTailwindMerge } from 'tailwind-merge';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { QuestionIcon } from '@phosphor-icons/react/dist/csr/Question';
+import { InfoIcon } from '@phosphor-icons/react/dist/csr/Info';
+import '@phosphor-icons/react/dist/csr/Eye';
+import '@phosphor-icons/react/dist/csr/EyeSlash';
+import { XIcon } from '@phosphor-icons/react/dist/csr/X';
+import { CaretLeftIcon } from '@phosphor-icons/react/dist/csr/CaretLeft';
+import { CaretRightIcon } from '@phosphor-icons/react/dist/csr/CaretRight';
+import { CaretDownIcon } from '@phosphor-icons/react/dist/csr/CaretDown';
+import { UserIcon } from '@phosphor-icons/react/dist/csr/User';
+import '@phosphor-icons/react/dist/csr/Plus';
+import { MagnifyingGlassIcon } from '@phosphor-icons/react/dist/csr/MagnifyingGlass';
+import { createPortal } from 'react-dom';
+import { CheckIcon } from '@phosphor-icons/react/dist/csr/Check';
+
+var twMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      text: ["display-xs", "display-sm", "display-md", "display-lg", "display-xl", "display-2xl"]
+    }
+  }
+});
+var cx = twMerge;
+function sortCx(classes) {
+  return classes;
+}
+
+// ../../utils/is-react-component.ts
+var isFunctionComponent = (component) => {
+  return typeof component === "function";
+};
+var isClassComponent = (component) => {
+  return typeof component === "function" && component.prototype && (!!component.prototype.isReactComponent || !!component.prototype.render);
+};
+var isForwardRefComponent = (component) => {
+  return typeof component === "object" && component !== null && component.$$typeof.toString() === "Symbol(react.forward_ref)";
+};
+var isReactComponent = (component) => {
+  return isFunctionComponent(component) || isForwardRefComponent(component) || isClassComponent(component);
+};
+var focusShadowPlain = "focus-visible:outline-none focus-visible:[box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]";
+var focusShadowSkeuomorphic = "focus-visible:outline-none focus-visible:[box-shadow:var(--shadow-xs-skeuomorphic),0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]";
+var skeuomorphicGradientBorderClass = [
+  "ring-1 ring-inset ring-transparent",
+  "before:pointer-events-none before:absolute before:inset-px before:rounded-[inherit] before:border before:border-[#ffffff1f] before:content-['']",
+  "before:[mask-image:linear-gradient(to_bottom,#000,transparent)]"
+].join(" ");
+var skeuomorphicShadowClass = ["shadow-xs-skeuomorphic", focusShadowSkeuomorphic, "overflow-hidden"].join(" ");
+var focusShadowSecondary = "focus-visible:outline-none focus-visible:[box-shadow:0px_1px_2px_0px_rgba(0,0,0,0.05),0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]";
+var secondaryInnerShadow = "after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:content-[''] after:[box-shadow:inset_0px_-1px_0px_0px_rgba(0,0,0,0.05)]";
+var secondaryShadowClass = ["relative overflow-hidden shadow-xs", secondaryInnerShadow, focusShadowSecondary].join(" ");
+var inputNumberButtonClass = [
+  "in-data-number-input:border-0 in-data-number-input:shadow-none in-data-number-input:!rounded-none in-data-number-input:!h-full in-data-number-input:!min-h-0 in-data-number-input:self-stretch in-data-number-input:overflow-hidden",
+  "in-data-number-input:before:hidden in-data-number-input:after:hidden",
+  "in-data-number-input:focus-visible:outline-none in-data-number-input:focus-visible:shadow-none in-data-number-input:focus-visible:ring-0 in-data-number-input:focus-visible:![box-shadow:none]"
+].join(" ");
+var inputAddonButtonClass = [
+  "in-data-input-wrapper:border-0 in-data-input-wrapper:shadow-none in-data-input-wrapper:!rounded-none in-data-input-wrapper:overflow-hidden",
+  "in-data-input-wrapper:in-data-trailing:border-l in-data-input-wrapper:in-data-trailing:border-solid in-data-input-wrapper:in-data-trailing:border-primary",
+  "in-data-input-wrapper:in-data-leading:border-r in-data-input-wrapper:in-data-leading:border-solid in-data-input-wrapper:in-data-leading:border-primary",
+  "in-data-input-wrapper:group-invalid:in-data-trailing:border-error_subtle in-data-input-wrapper:group-invalid:in-data-leading:border-error_subtle",
+  "in-data-input-wrapper:before:hidden in-data-input-wrapper:after:hidden",
+  "in-data-input-wrapper:focus-visible:outline-none in-data-input-wrapper:focus-visible:shadow-none in-data-input-wrapper:focus-visible:ring-0 in-data-input-wrapper:focus-visible:![box-shadow:none]"
+].join(" ");
+var styles = sortCx({
+  common: {
+    root: [
+      "group relative inline-flex shrink-0 cursor-pointer items-center justify-center whitespace-nowrap rounded-full font-body outline-none before:absolute",
+      "font-semibold transition-[color,background-color,border-color,box-shadow,opacity,transform] duration-150 ease-out",
+      "pressed:scale-[0.985] pressed:duration-100 pressed:ease-linear motion-reduce:pressed:scale-100",
+      "disabled:pointer-events-none disabled:cursor-not-allowed in-data-input-wrapper:disabled:opacity-100",
+      inputAddonButtonClass,
+      inputNumberButtonClass,
+      // Stretch to InputGroup row height; padding/typography follow `data-input-size` on the field (Figma 85:1269).
+      "in-data-input-wrapper:!h-full in-data-input-wrapper:!min-h-0 in-data-input-wrapper:self-stretch",
+      "in-data-input-wrapper:in-data-[input-size=sm]:gap-1 in-data-input-wrapper:in-data-[input-size=sm]:px-3 in-data-input-wrapper:in-data-[input-size=sm]:py-2 in-data-input-wrapper:in-data-[input-size=sm]:text-sm",
+      "in-data-input-wrapper:in-data-[input-size=md]:gap-1 in-data-input-wrapper:in-data-[input-size=md]:px-3.5 in-data-input-wrapper:in-data-[input-size=md]:py-2.5 in-data-input-wrapper:in-data-[input-size=md]:text-sm",
+      "in-data-input-wrapper:in-data-[input-size=lg]:gap-1.5 in-data-input-wrapper:in-data-[input-size=lg]:px-4 in-data-input-wrapper:in-data-[input-size=lg]:py-2.5 in-data-input-wrapper:in-data-[input-size=lg]:text-md",
+      "*:data-icon:pointer-events-none *:data-icon:shrink-0 *:data-icon:transition-inherit-all"
+    ].join(" "),
+    icon: "pointer-events-none shrink-0 transition-inherit-all"
+  },
+  sizes: {
+    xs: {
+      root: [
+        "h-8 min-h-8 gap-1 px-[0.625rem] py-1.5 text-sm data-icon-only:size-8 data-icon-only:min-h-8 data-icon-only:min-w-8 data-icon-only:p-2",
+        "in-data-input-wrapper:data-icon-only:p-2.5",
+        "*:data-icon:size-4"
+      ].join(" "),
+      linkRoot: "h-auto min-h-0 gap-1 px-0! py-0! text-sm *:data-text:underline-offset-3"
+    },
+    sm: {
+      root: [
+        "h-9 min-h-9 gap-1 px-3 py-2 text-sm data-icon-only:size-9 data-icon-only:min-h-9 data-icon-only:min-w-9 data-icon-only:p-2",
+        "in-data-input-wrapper:data-icon-only:p-2.5",
+        "*:data-icon:size-5"
+      ].join(" "),
+      linkRoot: "h-auto min-h-0 gap-1 px-0! py-0! text-sm *:data-text:underline-offset-3"
+    },
+    md: {
+      root: [
+        "h-10 min-h-10 gap-1 px-3.5 py-2.5 text-sm data-icon-only:size-10 data-icon-only:min-h-10 data-icon-only:min-w-10 data-icon-only:p-2.5",
+        "in-data-input-wrapper:data-icon-only:p-3",
+        "*:data-icon:size-5"
+      ].join(" "),
+      linkRoot: "h-auto min-h-0 gap-1 px-0! py-0! text-sm *:data-text:underline-offset-4"
+    },
+    lg: {
+      root: "h-11 min-h-11 gap-1.5 px-4 py-2.5 text-md data-icon-only:size-11 data-icon-only:min-h-11 data-icon-only:min-w-11 data-icon-only:p-3 *:data-icon:size-5",
+      linkRoot: "h-auto min-h-0 gap-1.5 px-0! py-0! text-md *:data-text:underline-offset-4"
+    },
+    xl: {
+      root: "h-12 min-h-12 gap-1.5 px-[1.125rem] py-3 text-md data-icon-only:size-12 data-icon-only:min-h-12 data-icon-only:min-w-12 data-icon-only:p-3 data-icon-only:*:data-icon:size-6 *:data-icon:size-5",
+      linkRoot: "h-auto min-h-0 gap-1.5 px-0! py-0! text-md *:data-text:underline-offset-4"
+    }
+  },
+  colors: {
+    /** Figma Hierarchy=Primary — dark neutral solid; hover lightens to fg-tertiary_hover (#404040). */
+    primary: {
+      root: [
+        "bg-primary-solid text-white",
+        skeuomorphicShadowClass,
+        skeuomorphicGradientBorderClass,
+        "hover:bg-fg-tertiary_hover dark:hover:bg-quaternary",
+        "disabled:opacity-30",
+        "data-loading:bg-fg-tertiary_hover dark:data-loading:bg-quaternary",
+        "*:data-icon:not([data-icon=loading]):text-white/70"
+      ].join(" ")
+    },
+    /** Figma Hierarchy=Brand — purple solid; hover darkens to bg-brand-solid_hover (#6d28d9). */
+    brand: {
+      root: [
+        "bg-brand-solid text-primary_on-brand",
+        skeuomorphicShadowClass,
+        skeuomorphicGradientBorderClass,
+        "hover:bg-brand-solid_hover",
+        "disabled:opacity-50",
+        "data-loading:bg-brand-solid_hover",
+        "*:data-icon:not([data-icon=loading]):text-primary_on-brand"
+      ].join(" ")
+    },
+    /** Figma Hierarchy=Secondary — border-primary + shadow-xs + skeuomorphic inner rim overlay. */
+    secondary: {
+      root: [
+        "border border-solid border-primary bg-primary text-secondary",
+        secondaryShadowClass,
+        "hover:bg-primary_hover hover:text-secondary_hover",
+        "disabled:opacity-50",
+        "data-loading:bg-primary_hover",
+        "*:data-icon:text-fg-secondary"
+      ].join(" ")
+    },
+    /** Figma Hierarchy=Tertiary */
+    tertiary: {
+      root: [
+        "border border-transparent bg-transparent text-tertiary",
+        focusShadowPlain,
+        "hover:bg-primary_hover hover:text-tertiary_hover",
+        "disabled:opacity-50",
+        "*:data-icon:text-fg-tertiary"
+      ].join(" ")
+    },
+    /** Figma Hierarchy=Link color — text + icons share brand-secondary; hover underlines with fg-brand-secondary. */
+    "link-color": {
+      root: [
+        "h-auto min-h-0 border-0 bg-transparent px-0! py-0! text-brand-secondary shadow-none",
+        focusShadowPlain,
+        "hover:text-brand-secondary_hover",
+        "disabled:opacity-50",
+        "*:data-text:underline *:data-text:decoration-transparent *:data-text:decoration-solid hover:*:data-text:decoration-fg-brand-secondary"
+      ].join(" ")
+    },
+    /** Figma Hierarchy=Link gray — text + icons share tertiary; hover underlines with fg-quaternary. */
+    "link-gray": {
+      root: [
+        "h-auto min-h-0 border-0 bg-transparent px-0! py-0! text-tertiary shadow-none",
+        focusShadowPlain,
+        "hover:text-tertiary_hover",
+        "disabled:opacity-50",
+        "*:data-text:underline *:data-text:decoration-transparent *:data-text:decoration-solid hover:*:data-text:decoration-fg-quaternary"
+      ].join(" ")
+    },
+    "primary-destructive": {
+      root: [
+        "bg-error-solid text-white",
+        skeuomorphicShadowClass,
+        skeuomorphicGradientBorderClass,
+        "hover:bg-error-solid_hover",
+        "disabled:opacity-50",
+        "data-loading:bg-error-solid_hover",
+        "*:data-icon:not([data-icon=loading]):text-white/70"
+      ].join(" ")
+    },
+    "secondary-destructive": {
+      root: [
+        "border border-solid border-primary bg-primary text-error-primary",
+        secondaryShadowClass,
+        "hover:bg-error-primary hover:text-error-primary_hover",
+        "disabled:opacity-50",
+        "data-loading:bg-error-primary",
+        "*:data-icon:text-fg-error-secondary hover:*:data-icon:text-fg-error-primary"
+      ].join(" ")
+    },
+    "tertiary-destructive": {
+      root: [
+        "border border-transparent bg-transparent text-error-primary",
+        focusShadowPlain,
+        "hover:bg-error-primary hover:text-error-primary_hover",
+        "disabled:opacity-50",
+        "*:data-icon:text-fg-error-secondary hover:*:data-icon:text-fg-error-primary"
+      ].join(" ")
+    },
+    /** Figma Hierarchy=Link (destructive) — text + icons share error-primary; hover underlines. */
+    "link-destructive": {
+      root: [
+        "h-auto min-h-0 border-0 bg-transparent px-0! py-0! text-error-primary shadow-none",
+        focusShadowPlain,
+        "hover:text-error-primary_hover",
+        "disabled:opacity-50",
+        "*:data-text:underline *:data-text:decoration-transparent *:data-text:decoration-solid hover:*:data-text:decoration-current"
+      ].join(" ")
+    }
+  }
+});
+var Button = ({
+  size = "md",
+  color = "primary",
+  children,
+  className,
+  noTextPadding,
+  iconLeading: IconLeading,
+  iconTrailing: IconTrailing,
+  isDisabled: disabled,
+  isLoading: loading,
+  showTextWhileLoading,
+  ...props
+}) => {
+  const href = "href" in props ? props.href : void 0;
+  const isIcon = (IconLeading || IconTrailing) && !children;
+  const isLinkType = ["link-gray", "link-color", "link-destructive"].includes(color);
+  noTextPadding = isLinkType || noTextPadding;
+  const commonChildren = /* @__PURE__ */ jsxs(Fragment, { children: [
+    isValidElement(IconLeading) && IconLeading,
+    isReactComponent(IconLeading) && /* @__PURE__ */ jsx(IconLeading, { "data-icon": "leading", className: styles.common.icon }),
+    loading && /* @__PURE__ */ jsx(
+      "svg",
+      {
+        fill: "none",
+        "data-icon": "loading",
+        viewBox: "0 0 256 256",
+        "aria-hidden": true,
+        className: cx(
+          styles.common.icon,
+          "size-5 animate-spin",
+          !showTextWhileLoading && "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+        ),
+        children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            fill: "currentColor",
+            d: "M232,128a104,104,0,0,1-208,0c0-41,23.81-78.36,60.66-95.27a8,8,0,0,1,6.68,14.54C60,61.46,40,93.27,40,128a88,88,0,0,0,176,0c0-34.73-20-66.54-51.34-80.73a8,8,0,0,1,6.68-14.54C208.19,49.64,232,87,232,128Z"
+          }
+        )
+      }
+    ),
+    children && /* @__PURE__ */ jsx("span", { "data-text": true, className: cx("transition-inherit-all", !noTextPadding && !isLinkType && "px-0.5"), children }),
+    isValidElement(IconTrailing) && IconTrailing,
+    isReactComponent(IconTrailing) && /* @__PURE__ */ jsx(IconTrailing, { "data-icon": "trailing", className: styles.common.icon })
+  ] });
+  const commonProps = {
+    "data-icon-only": isIcon ? true : void 0,
+    "data-loading": loading ? true : void 0,
+    ...props,
+    isDisabled: disabled || loading,
+    className: cx(
+      styles.common.root,
+      styles.sizes[size].root,
+      styles.colors[color].root,
+      isLinkType && styles.sizes[size].linkRoot,
+      (loading || href && (disabled || loading)) && "pointer-events-none",
+      loading && (showTextWhileLoading ? "[&>*:not([data-icon=loading]):not([data-text])]:hidden" : "[&>*:not([data-icon=loading])]:invisible"),
+      className
+    ),
+    children: commonChildren
+  };
+  if ("href" in commonProps) {
+    return /* @__PURE__ */ jsx(Link, { ...commonProps, href: disabled || loading ? void 0 : href });
+  }
+  return /* @__PURE__ */ jsx(Button$1, { ...commonProps, type: commonProps.type || "button", isPending: loading });
+};
+var HintText = ({ isInvalid, className, size = "md", ...props }) => {
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      ...props,
+      slot: isInvalid ? "errorMessage" : "description",
+      className: cx(
+        "text-sm text-tertiary",
+        // Size
+        size === "sm" && "text-xs",
+        "in-data-[input-size=sm]:text-xs",
+        // Invalid state
+        isInvalid && "text-error-primary",
+        "group-invalid:text-error-primary",
+        className
+      )
+    }
+  );
+};
+HintText.displayName = "HintText";
+var Tooltip = ({
+  title,
+  description,
+  children,
+  arrow = false,
+  delay = 100,
+  closeDelay = 0,
+  trigger,
+  isDisabled,
+  isOpen,
+  defaultOpen,
+  offset = 6,
+  crossOffset,
+  placement = "top",
+  onOpenChange,
+  ...tooltipProps
+}) => {
+  const isTopOrBottomLeft = ["top left", "top end", "bottom left", "bottom end"].includes(placement);
+  const isTopOrBottomRight = ["top right", "top start", "bottom right", "bottom start"].includes(placement);
+  const calculatedCrossOffset = isTopOrBottomLeft ? -12 : isTopOrBottomRight ? 12 : 0;
+  return /* @__PURE__ */ jsxs(TooltipTrigger$1, { ...{ trigger, delay, closeDelay, isDisabled, isOpen, defaultOpen, onOpenChange }, children: [
+    children,
+    /* @__PURE__ */ jsx(
+      Tooltip$1,
+      {
+        ...tooltipProps,
+        offset,
+        placement,
+        crossOffset: crossOffset ?? calculatedCrossOffset,
+        className: ({ isEntering, isExiting }) => cx(isEntering && "ease-out animate-in", isExiting && "ease-in animate-out"),
+        children: ({ isEntering, isExiting }) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cx(
+              "z-50 flex max-w-xs origin-(--trigger-anchor-point) flex-col items-start gap-1 rounded-lg bg-primary-solid px-3 shadow-lg will-change-transform",
+              description ? "py-3" : "py-2",
+              isEntering && "ease-out animate-in fade-in zoom-in-95 in-placement-left:slide-in-from-right-0.5 in-placement-right:slide-in-from-left-0.5 in-placement-top:slide-in-from-bottom-0.5 in-placement-bottom:slide-in-from-top-0.5",
+              isExiting && "ease-in animate-out fade-out zoom-out-95 in-placement-left:slide-out-to-right-0.5 in-placement-right:slide-out-to-left-0.5 in-placement-top:slide-out-to-bottom-0.5 in-placement-bottom:slide-out-to-top-0.5"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-white", children: title }),
+              description && /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-tooltip-supporting-text", children: description }),
+              arrow && /* @__PURE__ */ jsx(OverlayArrow, { children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  viewBox: "0 0 100 100",
+                  className: "size-2.5 fill-bg-primary-solid in-placement-left:-rotate-90 in-placement-right:rotate-90 in-placement-top:rotate-0 in-placement-bottom:rotate-180",
+                  children: /* @__PURE__ */ jsx("path", { d: "M0,0 L35.858,35.858 Q50,50 64.142,35.858 L100,0 Z" })
+                }
+              ) })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+};
+var TooltipTrigger = ({ children, className, ...buttonProps }) => {
+  return /* @__PURE__ */ jsx(Button$1, { ...buttonProps, className: (values) => cx("h-max w-max outline-hidden", typeof className === "function" ? className(values) : className), children });
+};
+var Label = ({ isInvalid, isRequired, tooltip, tooltipDescription, className, ...props }) => {
+  return /* @__PURE__ */ jsxs(
+    Label$1,
+    {
+      "data-label": "true",
+      ...props,
+      className: cx("flex cursor-default items-center gap-0.5 text-sm font-medium text-secondary", className),
+      children: [
+        props.children,
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cx(
+              "hidden text-brand-tertiary",
+              isRequired && "block",
+              typeof isRequired === "undefined" && "group-required:block",
+              isInvalid && "text-error-primary",
+              typeof isInvalid === "undefined" && "group-invalid:text-error-primary"
+            ),
+            children: "*"
+          }
+        ),
+        tooltip && /* @__PURE__ */ jsx(Tooltip, { title: tooltip, description: tooltipDescription, placement: "top", children: /* @__PURE__ */ jsx(
+          TooltipTrigger,
+          {
+            isDisabled: false,
+            className: "cursor-pointer text-fg-quaternary transition duration-200 hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover",
+            children: /* @__PURE__ */ jsx(QuestionIcon, { className: "size-4" })
+          }
+        ) })
+      ]
+    }
+  );
+};
+Label.displayName = "Label";
+var inputFocusRingShadow = "border-brand ring-1 ring-inset ring-brand";
+var inputErrorFocusRingShadow = "border-error ring-1 ring-inset ring-error";
+createContext({});
+var DateFieldContext = createContext({});
+var InputDateBase = ({
+  tooltip,
+  shortcut,
+  groupRef,
+  size = "md",
+  isInvalid,
+  isDisabled,
+  icon: Icon,
+  wrapperClassName,
+  tooltipClassName,
+  iconClassName,
+  ...inputProps
+}) => {
+  const hasTrailingIcon = tooltip || isInvalid;
+  const hasLeadingIcon = Icon;
+  const context = useContext(DateFieldContext);
+  const inputSize = context?.size || size;
+  const sizes5 = sortCx({
+    sm: {
+      root: cx("px-3 py-2 text-sm", hasTrailingIcon && "pr-9", hasLeadingIcon && "pl-8.5"),
+      iconLeading: "left-3 size-4 stroke-[2.25px]",
+      iconTrailing: "right-3",
+      shortcut: "pr-2.5"
+    },
+    md: {
+      root: cx("px-3 py-2 text-md", hasTrailingIcon && "pr-9", hasLeadingIcon && "pl-10"),
+      iconLeading: "left-3 size-5",
+      iconTrailing: "right-3",
+      shortcut: "pr-2.5"
+    },
+    lg: {
+      root: cx("px-3.5 py-2.5 text-md", hasTrailingIcon && "pr-9.5", hasLeadingIcon && "pl-10.5"),
+      iconLeading: "left-3.5 size-5",
+      iconTrailing: "right-3.5",
+      shortcut: "pr-3"
+    }
+  });
+  return /* @__PURE__ */ jsxs(
+    Group,
+    {
+      ...{ isDisabled, isInvalid },
+      ref: groupRef,
+      className: ({ isFocusWithin, isDisabled: isDisabled2, isInvalid: isInvalid2 }) => cx(
+        "group/input relative flex w-full flex-row place-content-center place-items-center rounded-lg border border-solid border-primary bg-primary shadow-xs transition-[border-color,box-shadow] duration-100 ease-linear",
+        isFocusWithin && !isDisabled2 && !isInvalid2 && inputFocusRingShadow,
+        // Disabled state styles
+        isDisabled2 && "cursor-not-allowed opacity-50 in-data-input-wrapper:opacity-100",
+        "group-disabled:cursor-not-allowed group-disabled:opacity-50 in-data-input-wrapper:group-disabled:opacity-100",
+        // Invalid state styles
+        isInvalid2 && !isFocusWithin && "border-error_subtle",
+        "group-invalid:border-error_subtle",
+        "group-invalid:focus-within:border-error group-invalid:focus-within:ring-1 group-invalid:focus-within:ring-inset group-invalid:focus-within:ring-error",
+        isInvalid2 && isFocusWithin && inputErrorFocusRingShadow,
+        context?.wrapperClassName,
+        wrapperClassName
+      ),
+      children: [
+        Icon && /* @__PURE__ */ jsx(Icon, { className: cx("pointer-events-none absolute text-fg-quaternary", sizes5[inputSize].iconLeading, context?.iconClassName, iconClassName) }),
+        /* @__PURE__ */ jsx(DateInput, { ...inputProps, className: cx("flex w-full", sizes5[size].root, typeof inputProps.className === "string" && inputProps.className), children: (segment) => /* @__PURE__ */ jsx(
+          DateSegment,
+          {
+            segment,
+            className: cx(
+              "rounded px-0.5 text-primary tabular-nums caret-transparent focus:bg-brand-solid focus:font-medium focus:text-white focus:outline-hidden",
+              // The placeholder segment.
+              segment.isPlaceholder && "text-placeholder uppercase",
+              // The separator "/" segment.
+              segment.type === "literal" && "text-fg-quaternary"
+            )
+          }
+        ) }),
+        tooltip && /* @__PURE__ */ jsx(Tooltip, { title: tooltip, placement: "top", children: /* @__PURE__ */ jsx(
+          TooltipTrigger,
+          {
+            className: cx(
+              "absolute cursor-pointer text-fg-quaternary transition duration-200 group-invalid/input:hidden hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover",
+              sizes5[inputSize].iconTrailing,
+              context?.tooltipClassName,
+              tooltipClassName
+            ),
+            children: /* @__PURE__ */ jsx(QuestionIcon, { className: "size-4 stroke-[2.25px]" })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          InfoIcon,
+          {
+            className: cx(
+              "pointer-events-none absolute hidden size-4 stroke-[2.25px] text-fg-error-secondary group-invalid/input:block",
+              sizes5[inputSize].iconTrailing,
+              context?.tooltipClassName,
+              tooltipClassName
+            )
+          }
+        ),
+        shortcut && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cx(
+              "pointer-events-none absolute inset-y-0.5 right-0.5 z-10 flex items-center rounded-r-[inherit] bg-linear-to-r from-transparent to-bg-primary to-40% pl-8",
+              sizes5[inputSize].shortcut
+            ),
+            children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "pointer-events-none rounded px-1 py-px text-xs font-medium text-quaternary ring-1 ring-secondary select-none ring-inset",
+                children: typeof shortcut === "string" ? shortcut : "\u2318K"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+var MOBILE_SHEET_MAX_PX = 1024;
+function useIsMobile(breakpoint = MOBILE_SHEET_MAX_PX + 1) {
+  const [isMobile, setIsMobile] = useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia(`(max-width: ${breakpoint - 1}px)`).matches;
+  });
+  useEffect(() => {
+    const mq = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
+    const handler = (e) => setIsMobile(e.matches);
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, [breakpoint]);
+  return isMobile;
+}
+
+// ../../components/application/date-picker/date-picker-mobile-overlay.ts
+function resolveDatePickerMobileOptions(mobileOptions) {
+  return {
+    fullScreen: mobileOptions?.fullScreen ?? true,
+    title: mobileOptions?.title,
+    panelClassName: mobileOptions?.className,
+    contentClassName: mobileOptions?.contentClassName
+  };
+}
+var MOBILE_SHEET_MOTION_MS = 175;
+var MOBILE_SHEET_ENTRY_EASING = "cubic-bezier(0.85, 0, 0.15, 1)";
+var MOBILE_SHEET_EXIT_EASING = "cubic-bezier(0.85, 0, 1, 0.15)";
+var MOBILE_SHEET_SLIDE_ENTRANCE_OFFSET_PX = 120;
+function resolveSelectMobileOptions(mobileOptions) {
+  return {
+    sheet: mobileOptions?.sheet ?? true,
+    title: mobileOptions?.title,
+    sheetClassName: mobileOptions?.className,
+    contentClassName: mobileOptions?.contentClassName
+  };
+}
+function useMobileSheetAnimation(open, enabled, slideEntrance = true, slideOffsetPx = MOBILE_SHEET_SLIDE_ENTRANCE_OFFSET_PX) {
+  const [shouldRender, setShouldRender] = useState(open);
+  const [isAnimating, setIsAnimating] = useState(false);
+  useLayoutEffect(() => {
+    if (!enabled) {
+      setShouldRender(open);
+      return;
+    }
+    if (open) {
+      setShouldRender(true);
+    }
+  }, [open, enabled]);
+  useEffect(() => {
+    if (!enabled || open) return;
+    const timer = setTimeout(() => setShouldRender(false), MOBILE_SHEET_MOTION_MS);
+    return () => clearTimeout(timer);
+  }, [open, enabled]);
+  useLayoutEffect(() => {
+    if (!enabled || open || !shouldRender) return;
+    setIsAnimating(false);
+  }, [enabled, open, shouldRender]);
+  useEffect(() => {
+    if (!enabled || !shouldRender || !open) return;
+    let raf2 = 0;
+    const raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() => setIsAnimating(true));
+    });
+    return () => {
+      cancelAnimationFrame(raf1);
+      if (raf2) cancelAnimationFrame(raf2);
+    };
+  }, [shouldRender, open, enabled]);
+  const motionEasing = open ? MOBILE_SHEET_ENTRY_EASING : MOBILE_SHEET_EXIT_EASING;
+  const hiddenTransform = slideEntrance ? `translateY(${slideOffsetPx}px)` : "translateY(100%)";
+  const panelStyle = enabled ? {
+    transform: isAnimating ? "translateY(0)" : hiddenTransform,
+    opacity: isAnimating ? 1 : 0,
+    transitionProperty: "transform, opacity",
+    transitionDuration: `${MOBILE_SHEET_MOTION_MS}ms`,
+    transitionTimingFunction: motionEasing
+  } : void 0;
+  const backdropStyle = enabled ? {
+    opacity: isAnimating ? 1 : 0,
+    transitionProperty: "opacity",
+    transitionDuration: `${MOBILE_SHEET_MOTION_MS}ms`,
+    transitionTimingFunction: motionEasing
+  } : void 0;
+  return { shouldRender, isAnimating, panelStyle, backdropStyle };
+}
+function MobileFullScreenCloseButton({ onClose }) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: (e) => {
+        e.stopPropagation();
+        onClose();
+      },
+      className: "relative z-20 flex size-12 shrink-0 cursor-pointer items-center justify-center rounded-full bg-primary text-fg-primary transition duration-100 ease-linear hover:bg-primary_hover active:scale-[0.96] focus-visible:outline-none focus-visible:[box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]",
+      children: [
+        /* @__PURE__ */ jsx(XIcon, { className: "size-5", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+      ]
+    }
+  );
+}
+function MobileFullScreenChrome({
+  title,
+  contentClassName,
+  onClose,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cx(
+          "flex w-full shrink-0 items-center py-2 pl-4 pr-2",
+          title ? "justify-between gap-3" : "justify-end"
+        ),
+        children: [
+          title ? /* @__PURE__ */ jsx("p", { className: "min-w-0 flex-1 truncate text-base font-semibold text-primary", children: title }) : null,
+          /* @__PURE__ */ jsx(MobileFullScreenCloseButton, { onClose })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: cx("flex min-h-0 w-full flex-1 flex-col overflow-x-hidden overflow-y-auto", contentClassName), children })
+  ] });
+}
+var DatePickerOverlay = ({ mobileOptions, children, className, style, offset, ...props }) => {
+  const isMobile = useIsMobile();
+  const resolvedMobile = useMemo(() => resolveDatePickerMobileOptions(mobileOptions), [mobileOptions]);
+  const useMobileFullScreen = isMobile && resolvedMobile.fullScreen;
+  const overlayState = useContext(OverlayTriggerStateContext);
+  const open = overlayState?.isOpen ?? false;
+  const { shouldRender, panelStyle } = useMobileSheetAnimation(open, useMobileFullScreen);
+  useEffect(() => {
+    if (!useMobileFullScreen || !open) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [useMobileFullScreen, open]);
+  const close = () => overlayState?.close();
+  const showMobileFullScreen = useMobileFullScreen && shouldRender;
+  const isMobileFullScreenExiting = showMobileFullScreen && !open;
+  return /* @__PURE__ */ jsx(
+    Popover$1,
+    {
+      placement: "bottom",
+      containerPadding: 0,
+      isNonModal: useMobileFullScreen,
+      ...props,
+      offset: useMobileFullScreen ? 0 : offset ?? 8,
+      isExiting: isMobileFullScreenExiting,
+      ...useMobileFullScreen ? { "data-date-picker-mobile-overlay": true } : {},
+      style: useMobileFullScreen ? void 0 : style,
+      className: (state) => cx(
+        "outline-hidden",
+        useMobileFullScreen && "pointer-events-none fixed! inset-0! z-50 size-full! max-w-none! border-0 bg-transparent shadow-none",
+        !useMobileFullScreen && (typeof className === "function" ? className(state) : className)
+      ),
+      children: (state) => {
+        const content = typeof children === "function" ? children(state) : children;
+        if (useMobileFullScreen) {
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: panelStyle,
+              className: cx(
+                "pointer-events-auto fixed inset-0 z-50 flex h-dvh min-h-dvh w-full will-change-transform flex-col overflow-hidden rounded-none border-0 bg-primary shadow-none",
+                resolvedMobile.panelClassName
+              ),
+              children: /* @__PURE__ */ jsx(
+                MobileFullScreenChrome,
+                {
+                  title: resolvedMobile.title,
+                  contentClassName: resolvedMobile.contentClassName,
+                  onClose: close,
+                  children: content
+                }
+              )
+            }
+          );
+        }
+        return content;
+      }
+    }
+  );
+};
+var sizes = {
+  xs: "size-1.5",
+  sm: "size-2",
+  md: "size-2.5",
+  lg: "size-3",
+  xl: "size-3.5",
+  "2xl": "size-4",
+  "3xl": "size-4.5",
+  "4xl": "size-5"
+};
+var AvatarOnlineIndicator = ({ size, status, className }) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    className: cx(
+      "absolute right-0 bottom-0 flex justify-center rounded-full ring-[1.5px] ring-bg-primary",
+      status === "online" ? "bg-fg-success-secondary" : "bg-utility-neutral-300",
+      sizes[size],
+      className
+    ),
+    style: {
+      backgroundImage: "radial-gradient(43.75% 43.75% at 50% 28.75%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.00) 100%), radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.00) 74.66%, rgba(255, 255, 255, 0.18) 100%), radial-gradient(75% 75% at 50% 0%, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.00) 50%, rgba(255, 255, 255, 0.08) 99%, rgba(255, 255, 255, 0.00) 100%)"
+    },
+    children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 7.2 2.85", fill: "none", className: "mt-[10%] h-[20%] w-[60%]", children: [
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M7.2 1.83107C7.2 2.84235 5.58823 2.19729 3.6 2.19729C1.61177 2.19729 0 2.84235 0 1.83107C0 0.8198 1.61177 0 3.6 0C5.58823 0 7.2 0.8198 7.2 1.83107Z",
+          fill: "url(#reflection-gradient)",
+          fillOpacity: "0.4"
+        }
+      ),
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "reflection-gradient", x1: "3.6", y1: "0", x2: "3.6", y2: "2.4", gradientUnits: "userSpaceOnUse", children: [
+        /* @__PURE__ */ jsx("stop", { stopColor: "white" }),
+        /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "white", stopOpacity: "0.1" })
+      ] }) })
+    ] })
+  }
+);
+var sizes2 = {
+  xs: "size-2.5",
+  sm: "size-3",
+  md: "size-3.5",
+  lg: "size-4",
+  xl: "size-4.5",
+  "2xl": "size-5",
+  "3xl": "size-6",
+  "4xl": "size-8"
+};
+var VerifiedTick = ({ size, className }) => /* @__PURE__ */ jsxs("svg", { className: cx("z-10 text-utility-blue-500", sizes2[size], className), viewBox: "0 0 10 10", fill: "none", children: [
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M7.72237 1.77098C7.81734 2.00068 7.99965 2.18326 8.2292 2.27858L9.03413 2.61199C9.26384 2.70714 9.44635 2.88965 9.5415 3.11936C9.63665 3.34908 9.63665 3.60718 9.5415 3.83689L9.20833 4.64125C9.11313 4.87106 9.113 5.12943 9.20863 5.35913L9.54122 6.16325C9.58839 6.27702 9.61268 6.39897 9.6127 6.52214C9.61272 6.6453 9.58847 6.76726 9.54134 6.88105C9.4942 6.99484 9.42511 7.09823 9.33801 7.18531C9.2509 7.27238 9.14749 7.34144 9.03369 7.38854L8.22934 7.72171C7.99964 7.81669 7.81706 7.99899 7.72174 8.22855L7.38833 9.03348C7.29318 9.26319 7.11067 9.4457 6.88096 9.54085C6.65124 9.636 6.39314 9.636 6.16343 9.54085L5.35907 9.20767C5.12935 9.11276 4.87134 9.11295 4.64177 9.20821L3.83684 9.54115C3.60725 9.63608 3.34937 9.636 3.11984 9.54092C2.89032 9.44585 2.70791 9.26356 2.6127 9.03409L2.27918 8.22892C2.18421 7.99923 2.0019 7.81665 1.77235 7.72133L0.967421 7.38792C0.737807 7.29281 0.555355 7.11041 0.460169 6.88083C0.364983 6.65125 0.364854 6.39327 0.45981 6.16359L0.792984 5.35924C0.8879 5.12952 0.887707 4.87151 0.792445 4.64193L0.459749 3.83642C0.41258 3.72265 0.388291 3.60069 0.388272 3.47753C0.388252 3.35436 0.412501 3.2324 0.459634 3.11861C0.506767 3.00482 0.57586 2.90144 0.662965 2.81436C0.75007 2.72728 0.853479 2.65822 0.967283 2.61113L1.77164 2.27795C2.00113 2.18306 2.1836 2.00099 2.27899 1.7717L2.6124 0.966768C2.70755 0.737054 2.89006 0.554547 3.11978 0.459397C3.34949 0.364246 3.60759 0.364246 3.83731 0.459397L4.64166 0.792571C4.87138 0.887487 5.12939 0.887293 5.35897 0.792031L6.16424 0.459913C6.39392 0.364816 6.65197 0.364836 6.88164 0.459968C7.11131 0.555099 7.29379 0.737554 7.38895 0.967208L7.72247 1.77238L7.72237 1.77098Z",
+      className: "fill-current"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M6.95829 3.68932C7.02509 3.58439 7.04747 3.45723 7.02051 3.3358C6.99356 3.21437 6.91946 3.10862 6.81454 3.04182C6.70961 2.97502 6.58245 2.95264 6.46102 2.97959C6.33959 3.00655 6.23384 3.08064 6.16704 3.18557L4.33141 6.06995L3.49141 5.01995C3.41375 4.92281 3.30069 4.8605 3.17709 4.84673C3.05349 4.83296 2.92949 4.86885 2.83235 4.94651C2.73522 5.02417 2.67291 5.13723 2.65914 5.26083C2.64536 5.38443 2.68125 5.50843 2.75891 5.60557L4.00891 7.16807C4.0555 7.22638 4.11533 7.27271 4.18344 7.30323C4.25154 7.33375 4.32595 7.34757 4.40047 7.34353C4.47499 7.3395 4.54747 7.31773 4.61188 7.28004C4.67629 7.24234 4.73077 7.18981 4.77079 7.12682L6.95829 3.68932Z",
+      fill: "white"
+    }
+  )
+] });
+var AvatarCount = ({ count, className }) => /* @__PURE__ */ jsx("div", { className: cx("absolute right-0 bottom-0 p-px", className), children: /* @__PURE__ */ jsx("div", { className: "flex size-3.5 items-center justify-center rounded-full bg-fg-error-primary text-center text-[10px] leading-[13px] font-bold text-white", children: count }) });
+var styles2 = {
+  xs: { root: "size-6", rootWithBorder: "p-px", initials: "text-xs font-semibold", icon: "size-4" },
+  sm: { root: "size-8", rootWithBorder: "p-px", initials: "text-sm font-semibold", icon: "size-5" },
+  md: { root: "size-10", rootWithBorder: "p-px", initials: "text-md font-semibold", icon: "size-6" },
+  lg: { root: "size-12", rootWithBorder: "p-[1.5px]", initials: "text-lg font-semibold", icon: "size-7" },
+  xl: { root: "size-14", rootWithBorder: "p-0.5", initials: "text-xl font-semibold", icon: "size-8" },
+  "2xl": { root: "size-16", rootWithBorder: "p-0.5", initials: "text-display-xs font-semibold", icon: "size-8" }
+};
+var Avatar = ({
+  size = "md",
+  src,
+  alt,
+  initials,
+  placeholder,
+  placeholderIcon: PlaceholderIcon,
+  border,
+  badge,
+  status,
+  verified,
+  count,
+  focusable = false,
+  rounded = true,
+  className,
+  contentClassName
+}) => {
+  const [isFailed, setIsFailed] = useState(false);
+  const canShowImage = src && !isFailed;
+  const renderMainContent = () => {
+    if (canShowImage) {
+      return /* @__PURE__ */ jsx("img", { "data-avatar-img": true, className: "size-full object-cover", src, alt, onError: () => setIsFailed(true) });
+    }
+    if (initials) {
+      return /* @__PURE__ */ jsx("span", { className: cx("text-quaternary", styles2[size].initials), children: initials });
+    }
+    if (PlaceholderIcon) {
+      return /* @__PURE__ */ jsx(PlaceholderIcon, { className: cx("text-fg-quaternary", styles2[size].icon) });
+    }
+    return placeholder || /* @__PURE__ */ jsx(UserIcon, { className: cx("text-fg-quaternary", styles2[size].icon) });
+  };
+  const renderBadgeContent = () => {
+    if (status) {
+      return /* @__PURE__ */ jsx(AvatarOnlineIndicator, { status, size });
+    }
+    if (verified) {
+      return /* @__PURE__ */ jsx(VerifiedTick, { size, className: cx("absolute right-0 bottom-0", size === "xs" && "-right-px -bottom-px") });
+    }
+    if (count) {
+      return /* @__PURE__ */ jsx(AvatarCount, { count });
+    }
+    return badge;
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-avatar": true,
+      className: cx(
+        "relative inline-flex shrink-0 rounded-[7px]",
+        rounded && "rounded-full",
+        // Focus styles
+        focusable && "outline-none group-focus-visible:[box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]",
+        border && "ring-1 ring-secondary_alt",
+        border && styles2[size].rootWithBorder,
+        styles2[size].root,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cx(
+              "relative inline-flex size-full shrink-0 items-center justify-center overflow-hidden rounded-md bg-tertiary outline-[0.5px] -outline-offset-[0.5px] outline-black/16 before:inset-[0.5px]",
+              rounded && "rounded-full",
+              canShowImage && size !== "xs" && "before:absolute before:inset-0 before:rounded-[inherit] before:border before:border-white/32 before:mask-[linear-gradient(to_bottom,black_0%,transparent_25%,transparent_75%,black_100%)]",
+              contentClassName
+            ),
+            children: renderMainContent()
+          }
+        ),
+        renderBadgeContent()
+      ]
+    }
+  );
+};
+function MobileSheetCloseButton({ onClose }) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: (e) => {
+        e.stopPropagation();
+        onClose();
+      },
+      className: "flex size-12 shrink-0 cursor-pointer items-center justify-center rounded-full text-fg-primary transition duration-100 ease-linear hover:bg-primary_hover active:scale-[0.96] focus-visible:outline-none focus-visible:[box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]",
+      children: [
+        /* @__PURE__ */ jsx(XIcon, { className: "size-5", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+      ]
+    }
+  );
+}
+function MobileSheetChrome({
+  title,
+  contentClassName,
+  onClose,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: cx("flex w-full shrink-0 items-center py-2 pl-4 pr-2", title ? "justify-between gap-3" : "justify-end"), children: [
+      title ? /* @__PURE__ */ jsx("p", { className: "min-w-0 flex-1 truncate text-base font-semibold text-primary", children: title }) : null,
+      /* @__PURE__ */ jsx(MobileSheetCloseButton, { onClose })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cx(
+          "min-h-0 flex-1 overflow-y-auto pb-[calc(5rem+env(safe-area-inset-bottom,0px))]",
+          contentClassName
+        ),
+        children
+      }
+    )
+  ] });
+}
+var Popover = ({ mobileOptions, children, size, className, style, compoundContent = false, ...props }) => {
+  const isMobile = useIsMobile();
+  const resolvedMobile = useMemo(() => resolveSelectMobileOptions(mobileOptions), [mobileOptions]);
+  const useMobileSheet = isMobile && resolvedMobile.sheet;
+  const overlayState = useContext(OverlayTriggerStateContext);
+  const open = overlayState?.isOpen ?? false;
+  const { shouldRender, panelStyle, backdropStyle } = useMobileSheetAnimation(open, useMobileSheet);
+  useEffect(() => {
+    if (!useMobileSheet || !open) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [useMobileSheet, open]);
+  const close = () => overlayState?.close();
+  const showMobileSheet = useMobileSheet && shouldRender;
+  const isMobileSheetExiting = showMobileSheet && !open;
+  const mobileScrim = useMobileSheet && shouldRender && typeof document !== "undefined" ? createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "fixed inset-0 z-50 bg-overlay/70",
+        style: backdropStyle,
+        onClick: close,
+        "aria-hidden": "true"
+      }
+    ),
+    document.body
+  ) : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    mobileScrim,
+    /* @__PURE__ */ jsx(
+      Popover$1,
+      {
+        placement: "bottom",
+        containerPadding: 0,
+        offset: 4,
+        ...props,
+        isExiting: isMobileSheetExiting,
+        ...useMobileSheet ? { "data-select-mobile-sheet": true } : {},
+        style: useMobileSheet ? { ...panelStyle, ...style } : style,
+        className: (state) => cx(
+          "outline-hidden",
+          !useMobileSheet && [
+            "w-(--trigger-width) origin-(--trigger-anchor-point) rounded-lg bg-primary shadow-lg ring-1 ring-secondary_alt will-change-transform",
+            compoundContent ? "overflow-hidden outline-hidden" : "overflow-x-hidden overflow-y-auto py-1 outline-hidden",
+            state.isEntering && "duration-150 ease-out animate-in fade-in placement-right:slide-in-from-left-0.5 placement-top:slide-in-from-bottom-0.5 placement-bottom:slide-in-from-top-0.5",
+            state.isExiting && "duration-100 ease-in animate-out fade-out placement-right:slide-out-to-left-0.5 placement-top:slide-out-to-bottom-0.5 placement-bottom:slide-out-to-top-0.5",
+            !compoundContent && size === "sm" && "max-h-56!",
+            !compoundContent && size === "md" && "max-h-64!",
+            !compoundContent && size === "lg" && "max-h-80!"
+          ],
+          useMobileSheet && [
+            "fixed! inset-x-0! bottom-0! top-auto! left-0! right-0! z-[51] flex w-full! max-w-none! flex-col overflow-hidden rounded-t-2xl rounded-b-none border-x-0 border-t border-secondary bg-primary shadow-xl",
+            "max-h-[min(90dvh,calc(100dvh-env(safe-area-inset-bottom,0px)))]",
+            resolvedMobile.sheetClassName
+          ],
+          typeof className === "function" ? className(state) : className
+        ),
+        children: (state) => {
+          const content = typeof children === "function" ? children(state) : children;
+          if (useMobileSheet) {
+            return /* @__PURE__ */ jsx(
+              MobileSheetChrome,
+              {
+                title: resolvedMobile.title,
+                contentClassName: resolvedMobile.contentClassName,
+                onClose: close,
+                children: content
+              }
+            );
+          }
+          return content;
+        }
+      }
+    )
+  ] });
+};
+var sizes3 = {
+  sm: {
+    root: "py-2 pl-3 pr-2.5 gap-2 *:data-icon:size-4 *:data-icon:stroke-[2.25px]",
+    withIcon: "",
+    text: "text-sm",
+    textContainer: "gap-x-1.5",
+    shortcut: "pr-2.5"
+  },
+  md: { root: "py-2 px-3 gap-2 *:data-icon:size-5", withIcon: "", text: "text-md", textContainer: "gap-x-1.5", shortcut: "pr-2.5" },
+  lg: { root: "py-2.5 px-3.5 gap-2 *:data-icon:size-5", withIcon: "", text: "text-md", textContainer: "gap-x-1.5", shortcut: "pr-3" }
+};
+var searchSizes = {
+  sm: { wrapper: "py-1", root: "px-3 py-2 gap-2 *:data-icon:size-4 *:data-icon:stroke-[2.25px]", text: "text-sm" },
+  md: { wrapper: "py-0.5", root: "px-3 py-2 gap-2 *:data-icon:size-5", text: "text-md" },
+  lg: { wrapper: "py-0.5", root: "px-3.5 py-2.5 gap-2 *:data-icon:size-5", text: "text-md" }
+};
+var SelectContext = createContext({ size: "md" });
+function hasResizeObserver() {
+  return typeof window.ResizeObserver !== "undefined";
+}
+function useResizeObserver(options) {
+  const { ref, box, onResize } = options;
+  useEffect(() => {
+    const element = ref?.current;
+    if (!element) {
+      return;
+    }
+    if (!hasResizeObserver()) {
+      window.addEventListener("resize", onResize, false);
+      return () => {
+        window.removeEventListener("resize", onResize, false);
+      };
+    } else {
+      const resizeObserverInstance = new window.ResizeObserver((entries) => {
+        if (!entries.length) {
+          return;
+        }
+        onResize();
+      });
+      resizeObserverInstance.observe(element, { box });
+      return () => {
+        if (element) {
+          resizeObserverInstance.unobserve(element);
+        }
+      };
+    }
+  }, [onResize, ref, box]);
+}
+var ComboBoxMobileTrigger = ({ size, placeholder, icon: IconProp, isInvalid, onPointerEnter, ref }) => {
+  const state = useContext(ComboBoxStateContext);
+  const selectedItem = state?.selectedItem?.value ?? null;
+  return /* @__PURE__ */ jsxs(
+    Button$1,
+    {
+      ref,
+      onPress: () => state?.open(),
+      onPointerEnter,
+      className: ({ isFocusVisible, isDisabled }) => cx(
+        "relative flex w-full cursor-pointer items-center gap-2 rounded-lg border border-solid border-primary bg-primary text-left shadow-xs outline-hidden transition-[border-color,box-shadow] duration-100 ease-linear",
+        isDisabled && "cursor-not-allowed opacity-50",
+        !isInvalid && (isFocusVisible || state?.isOpen) && inputFocusRingShadow,
+        isInvalid && !(isFocusVisible || state?.isOpen) && "border-error_subtle",
+        isInvalid && (isFocusVisible || state?.isOpen) && inputErrorFocusRingShadow,
+        "*:data-icon:shrink-0 *:data-icon:text-fg-quaternary",
+        sizes3[size].root
+      ),
+      children: [
+        isReactComponent(IconProp) ? /* @__PURE__ */ jsx(IconProp, { "data-icon": true, className: "pointer-events-none", "aria-hidden": "true" }) : isValidElement(IconProp) ? IconProp : /* @__PURE__ */ jsx(MagnifyingGlassIcon, { "data-icon": true, className: "pointer-events-none", "aria-hidden": "true" }),
+        selectedItem ? /* @__PURE__ */ jsxs("section", { className: cx("flex w-full truncate", sizes3[size].textContainer), children: [
+          /* @__PURE__ */ jsx("p", { className: cx("truncate font-medium text-primary", sizes3[size].text), children: selectedItem.label }),
+          selectedItem.supportingText && /* @__PURE__ */ jsx("p", { className: cx("text-tertiary", sizes3[size].text), children: selectedItem.supportingText })
+        ] }) : /* @__PURE__ */ jsx("p", { className: cx("truncate text-placeholder", sizes3[size].text), children: placeholder })
+      ]
+    }
+  );
+};
+var ComboBoxSheetSearch = ({ size, placeholder, icon: IconProp }) => /* @__PURE__ */ jsx("div", { className: cx("shrink-0 border-b border-secondary", searchSizes[size].wrapper), children: /* @__PURE__ */ jsxs("div", { className: cx("flex items-center", searchSizes[size].root), children: [
+  isReactComponent(IconProp) ? /* @__PURE__ */ jsx(IconProp, { "data-icon": true, "aria-hidden": "true", className: "shrink-0 text-fg-quaternary" }) : isValidElement(IconProp) ? IconProp : /* @__PURE__ */ jsx(MagnifyingGlassIcon, { "data-icon": true, "aria-hidden": "true", className: "shrink-0 text-fg-quaternary" }),
+  /* @__PURE__ */ jsx(
+    Input,
+    {
+      placeholder,
+      className: cx(
+        "w-full appearance-none bg-transparent text-primary caret-alpha-black/90 outline-hidden placeholder:text-placeholder",
+        searchSizes[size].text
+      )
+    }
+  )
+] }) });
+var ComboBoxValue = ({ size, shortcut, placeholder, shortcutClassName, icon: IconProp, isInvalid, ref, ...otherProps }) => {
+  const state = useContext(ComboBoxStateContext);
+  const value = state?.selectedItem?.value || null;
+  const inputValue = state?.inputValue || null;
+  const first = inputValue?.split(value?.supportingText)?.[0] || "";
+  const last = inputValue?.split(first)[1];
+  return /* @__PURE__ */ jsxs(
+    Group,
+    {
+      ref,
+      ...otherProps,
+      isInvalid,
+      className: ({ isDisabled, isInvalid: isGroupInvalid }) => cx(
+        "relative flex w-full items-center gap-2 rounded-lg border border-solid border-primary bg-primary shadow-xs outline-hidden transition-[border-color,box-shadow] duration-100 ease-linear",
+        isDisabled && "cursor-not-allowed opacity-50",
+        !isGroupInvalid && state?.isOpen && inputFocusRingShadow,
+        !isGroupInvalid && "has-[input:focus-visible]:border-brand has-[input:focus-visible]:ring-1 has-[input:focus-visible]:ring-inset has-[input:focus-visible]:ring-brand",
+        isGroupInvalid && !state?.isOpen && "border-error_subtle",
+        isGroupInvalid && state?.isOpen && inputErrorFocusRingShadow,
+        isGroupInvalid && "has-[input:focus-visible]:border-error has-[input:focus-visible]:ring-1 has-[input:focus-visible]:ring-inset has-[input:focus-visible]:ring-error",
+        // Icon styles
+        "*:data-icon:shrink-0 *:data-icon:text-fg-quaternary",
+        sizes3[size].root
+      ),
+      children: [
+        isReactComponent(IconProp) ? /* @__PURE__ */ jsx(IconProp, { "data-icon": true, className: "pointer-events-none", "aria-hidden": "true" }) : isValidElement(IconProp) ? IconProp : /* @__PURE__ */ jsx(MagnifyingGlassIcon, { "data-icon": true, className: "pointer-events-none", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxs("div", { className: "relative flex w-full items-center", children: [
+          inputValue && /* @__PURE__ */ jsxs("span", { className: cx("absolute top-1/2 z-0 inline-flex w-full -translate-y-1/2 truncate", sizes3[size].textContainer), "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx("p", { className: cx("font-medium text-primary", sizes3[size].text), children: first }),
+            last && /* @__PURE__ */ jsx("p", { className: cx("-ml-0.75 text-tertiary", sizes3[size].text), children: last })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              placeholder,
+              className: cx(
+                "z-10 w-full appearance-none bg-transparent text-transparent caret-alpha-black/90 placeholder:text-placeholder focus:outline-hidden disabled:cursor-not-allowed",
+                sizes3[size].text
+              )
+            }
+          )
+        ] }),
+        shortcut && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cx(
+              "absolute inset-y-0.5 right-0.5 z-10 hidden items-center rounded-r-[inherit] bg-linear-to-r from-transparent to-bg-primary to-40% pl-8 md:flex",
+              sizes3[size].shortcut,
+              shortcutClassName
+            ),
+            children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "pointer-events-none rounded px-1 py-px text-xs font-medium text-quaternary ring-1 ring-secondary select-none ring-inset",
+                "aria-hidden": "true",
+                children: "\u2318K"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+var ComboBox = ({
+  placeholder = "Search",
+  shortcut = true,
+  size = "md",
+  children,
+  items,
+  shortcutClassName,
+  icon,
+  hideRequiredIndicator,
+  mobileOptions,
+  ...otherProps
+}) => {
+  const isMobile = useIsMobile();
+  const resolvedMobile = useMemo(() => resolveSelectMobileOptions(mobileOptions), [mobileOptions]);
+  const useMobileSheet = isMobile && resolvedMobile.sheet;
+  const triggerRef = useRef(null);
+  const [popoverWidth, setPopoverWidth] = useState("");
+  const onResize = useCallback(() => {
+    if (!triggerRef.current) return;
+    const divRect = triggerRef.current.getBoundingClientRect();
+    setPopoverWidth(divRect.width + "px");
+  }, []);
+  useResizeObserver({
+    ref: triggerRef,
+    box: "border-box",
+    onResize
+  });
+  return /* @__PURE__ */ jsx(SelectContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx(ComboBox$1, { menuTrigger: useMobileSheet ? "manual" : "focus", ...otherProps, children: (state) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+    otherProps.label && /* @__PURE__ */ jsx(Label, { isRequired: hideRequiredIndicator ? false : state.isRequired, tooltip: otherProps.tooltip, children: otherProps.label }),
+    useMobileSheet ? /* @__PURE__ */ jsx(
+      ComboBoxMobileTrigger,
+      {
+        ref: triggerRef,
+        placeholder,
+        icon,
+        size,
+        isInvalid: state.isInvalid,
+        onPointerEnter: onResize
+      }
+    ) : /* @__PURE__ */ jsx(
+      ComboBoxValue,
+      {
+        ref: triggerRef,
+        placeholder,
+        shortcut,
+        shortcutClassName,
+        icon,
+        size,
+        isInvalid: state.isInvalid,
+        onFocus: onResize,
+        onPointerEnter: onResize
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        size,
+        triggerRef,
+        compoundContent: useMobileSheet,
+        style: useMobileSheet ? void 0 : { width: popoverWidth },
+        className: otherProps.popoverClassName,
+        mobileOptions: { title: otherProps.label, ...mobileOptions },
+        children: useMobileSheet ? /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-col overflow-hidden outline-hidden", children: [
+          /* @__PURE__ */ jsx(ComboBoxSheetSearch, { size, placeholder, icon }),
+          /* @__PURE__ */ jsx(ListBox, { items, className: "min-h-0 flex-1 overflow-y-auto py-1 outline-hidden", children })
+        ] }) : /* @__PURE__ */ jsx(ListBox, { items, className: "size-full outline-hidden", children })
+      }
+    ),
+    otherProps.hint && /* @__PURE__ */ jsx(HintText, { isInvalid: state.isInvalid, className: cx(size === "sm" && "text-xs"), children: otherProps.hint })
+  ] }) }) });
+};
+var CHECKBOX_TICK_DELAY_MS = 60;
+var CHECKBOX_TICK_DRAW_MS = 100;
+function CheckboxAnimatedCheckMark({ pixelSize, className }) {
+  const pathRef = useRef(null);
+  useLayoutEffect(() => {
+    const path = pathRef.current;
+    if (!path || typeof path.getTotalLength !== "function") return;
+    const len = path.getTotalLength();
+    if (len <= 0) return;
+    path.style.strokeDasharray = `${len}`;
+    path.style.strokeDashoffset = `${len}`;
+    if (typeof path.animate !== "function") {
+      path.style.strokeDashoffset = "0";
+      return;
+    }
+    const anim = path.animate([{ strokeDashoffset: len }, { strokeDashoffset: 0 }], {
+      duration: CHECKBOX_TICK_DRAW_MS,
+      delay: CHECKBOX_TICK_DELAY_MS,
+      easing: "cubic-bezier(0.45, 0, 0.2, 1)",
+      fill: "forwards"
+    });
+    return () => anim.cancel();
+  }, []);
+  return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", width: pixelSize, height: pixelSize, viewBox: "0 0 14 14", fill: "none", className: cx("block", className), children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      ref: pathRef,
+      d: "M2.33325 7L5.24992 9.91667L11.6666 3.5",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+var focusRingShadow = "outline-none [box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]";
+var CheckboxBase = ({ className, isSelected, isDisabled, isIndeterminate, size = "sm", isFocusVisible = false }) => {
+  const isChecked = isSelected || isIndeterminate;
+  const iconPixelSize = size === "sm" ? 10 : 14;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(
+        "relative flex shrink-0 cursor-pointer appearance-none items-center justify-center overflow-clip border border-solid border-primary",
+        size === "sm" ? "size-4 rounded-xs" : "size-5 rounded-sm",
+        isChecked ? "border-transparent bg-brand-solid" : "bg-primary",
+        !isChecked && !isDisabled && "group-hover:bg-primary_hover",
+        isDisabled && "cursor-not-allowed opacity-50",
+        isDisabled && !isChecked && "bg-tertiary",
+        isFocusVisible && !isDisabled && focusRingShadow,
+        className
+      ),
+      children: [
+        isIndeterminate && /* @__PURE__ */ jsx(
+          "svg",
+          {
+            "aria-hidden": "true",
+            width: iconPixelSize,
+            height: iconPixelSize,
+            viewBox: "0 0 14 14",
+            fill: "none",
+            className: "pointer-events-none block text-fg-white",
+            children: /* @__PURE__ */ jsx("path", { d: "M2.91675 7H11.0834", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+          }
+        ),
+        isSelected && !isIndeterminate && /* @__PURE__ */ jsx(CheckboxAnimatedCheckMark, { pixelSize: iconPixelSize, className: "pointer-events-none text-fg-white" })
+      ]
+    }
+  );
+};
+CheckboxBase.displayName = "CheckboxBase";
+var sizes4 = {
+  sm: {
+    root: "p-2 pr-2.5 gap-2 *:data-icon:size-4 *:data-icon:stroke-[2.25px]",
+    text: "text-sm",
+    textContainer: "gap-x-1.5",
+    check: "size-4 stroke-[2.25px]",
+    checkbox: "sm"
+  },
+  md: {
+    root: "p-2 pr-2.5 gap-2 *:data-icon:size-5",
+    text: "text-md",
+    textContainer: "gap-x-2",
+    check: "size-5",
+    checkbox: "sm"
+  },
+  lg: {
+    root: "p-2.5 pl-2 gap-2 *:data-icon:size-5",
+    text: "text-md",
+    textContainer: "gap-x-2",
+    check: "size-5",
+    checkbox: "md"
+  }
+};
+var SelectItem = ({
+  label,
+  id,
+  value,
+  avatarUrl,
+  supportingText,
+  isDisabled,
+  icon: Icon,
+  className,
+  children,
+  selectionIndicator = "checkmark",
+  selectionIndicatorAlign = "right",
+  ...props
+}) => {
+  const { size } = useContext(SelectContext);
+  const labelOrChildren = label || (typeof children === "string" ? children : "");
+  const textValue = supportingText ? labelOrChildren + " " + supportingText : labelOrChildren;
+  const isLeft = selectionIndicatorAlign === "left";
+  return /* @__PURE__ */ jsx(
+    ListBoxItem,
+    {
+      id,
+      value: value ?? {
+        id,
+        label: labelOrChildren,
+        avatarUrl,
+        supportingText,
+        isDisabled,
+        icon: Icon
+      },
+      textValue,
+      isDisabled,
+      ...props,
+      className: (state) => cx("w-full py-px outline-hidden", size === "sm" ? "px-1" : "px-1.5", typeof className === "function" ? className(state) : className),
+      children: (state) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cx(
+            "flex cursor-pointer items-center rounded-md outline-hidden select-none",
+            (state.isFocused || state.isHovered) && !(state.isSelected && selectionIndicator !== "checkbox") && "bg-primary_hover",
+            state.isSelected && selectionIndicator !== "checkbox" && "bg-brand-primary_alt",
+            state.isDisabled && "cursor-not-allowed opacity-50",
+            // Icon styles
+            "*:data-icon:shrink-0 *:data-icon:text-fg-quaternary",
+            sizes4[size].root
+          ),
+          children: [
+            isLeft && selectionIndicator === "checkbox" && /* @__PURE__ */ jsx(CheckboxBase, { size: sizes4[size].checkbox, isSelected: state.isSelected, isDisabled: state.isDisabled }),
+            avatarUrl ? /* @__PURE__ */ jsx(Avatar, { "aria-hidden": "true", size: "xs", src: avatarUrl, alt: label, className: cx(size === "sm" && "size-5") }) : isReactComponent(Icon) ? /* @__PURE__ */ jsx(Icon, { "data-icon": true, "aria-hidden": "true" }) : isValidElement(Icon) ? Icon : null,
+            /* @__PURE__ */ jsxs("div", { className: cx("flex w-full min-w-0 flex-1 flex-wrap", sizes4[size].textContainer), children: [
+              /* @__PURE__ */ jsx(Text, { slot: "label", className: cx("truncate font-medium whitespace-nowrap text-primary", sizes4[size].text), children: label || (typeof children === "function" ? children(state) : children) }),
+              supportingText && /* @__PURE__ */ jsx(Text, { slot: "description", className: cx("whitespace-nowrap text-tertiary", sizes4[size].text), children: supportingText })
+            ] }),
+            state.isSelected && selectionIndicator === "checkmark" && /* @__PURE__ */ jsx(CheckIcon, { "aria-hidden": "true", className: cx("ml-auto text-fg-brand-primary", sizes4[size].check) }),
+            !isLeft && selectionIndicator === "checkbox" && /* @__PURE__ */ jsx(CheckboxBase, { size: sizes4[size].checkbox, isSelected: state.isSelected, isDisabled: state.isDisabled, className: "ml-auto" })
+          ]
+        }
+      )
+    }
+  );
+};
+var SelectValue = ({ isOpen, isFocusVisible, isDisabled, isInvalid, size, placeholder, icon, ref }) => {
+  const isActive = isOpen || isFocusVisible;
+  return /* @__PURE__ */ jsx(
+    Button$1,
+    {
+      ref,
+      className: cx(
+        "relative flex w-full cursor-pointer items-center rounded-lg border border-solid border-primary bg-primary shadow-xs outline-hidden transition-[border-color,box-shadow] duration-100 ease-linear",
+        !isInvalid && isActive && inputFocusRingShadow,
+        isInvalid && !isActive && "border-error_subtle",
+        isInvalid && isActive && inputErrorFocusRingShadow,
+        isDisabled && "cursor-not-allowed opacity-50"
+      ),
+      children: /* @__PURE__ */ jsx(
+        SelectValue$1,
+        {
+          className: (state) => cx(
+            "flex h-max w-full items-center justify-start truncate text-left align-middle",
+            sizes3[size].root,
+            // With icon
+            (state.selectedItems[0]?.icon || icon) && sizes3[size].withIcon,
+            // Icon styles
+            "*:data-icon:shrink-0 *:data-icon:text-fg-quaternary"
+          ),
+          children: (state) => {
+            const selectedItem = state.selectedItems[0];
+            const Icon = selectedItem?.icon || icon;
+            return /* @__PURE__ */ jsxs(Fragment, { children: [
+              selectedItem?.avatarUrl ? /* @__PURE__ */ jsx(Avatar, { size: "xs", src: selectedItem.avatarUrl, alt: selectedItem.label, className: cx(size === "sm" && "size-5") }) : isReactComponent(Icon) ? /* @__PURE__ */ jsx(Icon, { "data-icon": true, "aria-hidden": "true" }) : isValidElement(Icon) ? Icon : null,
+              selectedItem ? /* @__PURE__ */ jsxs("section", { className: cx("flex w-full truncate", sizes3[size].textContainer), children: [
+                /* @__PURE__ */ jsx("p", { className: cx("truncate font-medium text-primary", sizes3[size].text), children: selectedItem?.label }),
+                selectedItem?.supportingText && /* @__PURE__ */ jsx("p", { className: cx("text-tertiary", sizes3[size].text), children: selectedItem?.supportingText })
+              ] }) : /* @__PURE__ */ jsx("p", { className: cx("text-placeholder", sizes3[size].text), children: placeholder }),
+              /* @__PURE__ */ jsx(
+                CaretDownIcon,
+                {
+                  "aria-hidden": "true",
+                  className: cx("ml-auto shrink-0 text-fg-quaternary", size === "lg" ? "size-5" : "size-4 stroke-[2.25px]")
+                }
+              )
+            ] });
+          }
+        }
+      )
+    }
+  );
+};
+var Select = ({ placeholder = "Select", icon, size = "md", children, items, label, hint, tooltip, hideRequiredIndicator, mobileOptions, className, ...rest }) => {
+  return /* @__PURE__ */ jsx(SelectContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx(Select$1, { ...rest, className: (state) => cx("flex flex-col gap-1.5", typeof className === "function" ? className(state) : className), children: (state) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    label && /* @__PURE__ */ jsx(Label, { isRequired: hideRequiredIndicator ? false : state.isRequired, tooltip, children: label }),
+    /* @__PURE__ */ jsx(SelectValue, { ...state, ...{ size, placeholder }, icon }),
+    /* @__PURE__ */ jsx(Popover, { size, className: rest.popoverClassName, mobileOptions: { title: label, ...mobileOptions }, children: /* @__PURE__ */ jsx(ListBox, { items, className: "size-full outline-hidden", children }) }),
+    hint && /* @__PURE__ */ jsx(HintText, { isInvalid: state.isInvalid, className: cx(size === "sm" && "text-xs"), children: hint })
+  ] }) }) });
+};
+var _Select = Select;
+_Select.ComboBox = ComboBox;
+_Select.Item = SelectItem;
+var screens = {
+  sm: "640px",
+  md: "768px",
+  lg: "1024px",
+  xl: "1280px",
+  "2xl": "1536px"
+};
+var useBreakpoint = (size) => {
+  const [matches, setMatches] = useState(typeof window !== "undefined" ? window.matchMedia(`(min-width: ${screens[size]})`).matches : true);
+  useEffect(() => {
+    const breakpoint = window.matchMedia(`(min-width: ${screens[size]})`);
+    setMatches(breakpoint.matches);
+    const handleChange = (value) => setMatches(value.matches);
+    breakpoint.addEventListener("change", handleChange);
+    return () => breakpoint.removeEventListener("change", handleChange);
+  }, [size]);
+  return matches;
+};
+var CalendarCell = ({ date, isHighlighted, showOutOfRangeDates = false, fluid = false, ...props }) => {
+  const { locale } = useLocale();
+  const dayOfWeek = getDayOfWeek(date, locale);
+  const rangeCalendarContext = useSlottedContext(RangeCalendarContext);
+  const isRangeCalendar = !!rangeCalendarContext;
+  const start = rangeCalendarContext?.value?.start;
+  const end = rangeCalendarContext?.value?.end;
+  const isAfterStart = start ? date.compare(start) > 0 : true;
+  const isBeforeEnd = end ? date.compare(end) < 0 : true;
+  const isAfterOrOnStart = start && date.compare(start) >= 0;
+  const isBeforeOrOnEnd = end && date.compare(end) <= 0;
+  const isInRange = isAfterOrOnStart && isBeforeOrOnEnd;
+  const lastDayOfMonth = new Date(date.year, date.month, 0).getDate();
+  const isLastDayOfMonth = date.day === lastDayOfMonth;
+  const isFirstDayOfMonth = date.day === 1;
+  const isTodayDate = isToday(date, getLocalTimeZone());
+  return /* @__PURE__ */ jsx(
+    CalendarCell$1,
+    {
+      ...props,
+      date,
+      className: ({ isDisabled, isFocusVisible, isSelectionStart, isSelectionEnd, isSelected, isOutsideMonth }) => {
+        const isRoundedLeft = isSelectionStart || dayOfWeek === 0;
+        const isRoundedRight = isSelectionEnd || dayOfWeek === 6;
+        return cx(
+          "relative focus:outline-hidden",
+          fluid ? "aspect-square w-full" : "size-10",
+          isRoundedLeft && "rounded-l-full",
+          isRoundedRight && "rounded-r-full",
+          isInRange && isDisabled && "bg-secondary",
+          isSelected && isRangeCalendar && "bg-secondary",
+          isDisabled ? "pointer-events-none" : "cursor-pointer",
+          isFocusVisible ? "z-10" : "z-0",
+          isOutsideMonth && "opacity-50",
+          isRangeCalendar && isOutsideMonth && !showOutOfRangeDates && "hidden",
+          // Show gradient on last day of month if it's within the selected range.
+          isLastDayOfMonth && isSelected && isBeforeEnd && isRangeCalendar && "after:absolute after:inset-0 after:translate-x-full after:bg-gradient-to-l after:from-transparent after:to-bg-secondary in-[[role=gridcell]:last-child]:after:hidden",
+          // Show gradient on first day of month if it's within the selected range.
+          isFirstDayOfMonth && isSelected && isAfterStart && isRangeCalendar && "after:absolute after:inset-0 after:-translate-x-full after:bg-gradient-to-r after:from-transparent after:to-bg-secondary in-[[role=gridcell]:first-child]:after:hidden"
+        );
+      },
+      children: ({ isDisabled, isFocusVisible, isSelectionStart, isSelectionEnd, isSelected, formattedDate }) => {
+        const markedAsSelected = isSelectionStart || isSelectionEnd || isSelected && !isDisabled && !isRangeCalendar;
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cx(
+              "relative flex size-full items-center justify-center rounded-full text-sm text-secondary hover:text-secondary_hover",
+              // Disabled state.
+              isDisabled && "text-secondary/50",
+              // Focus ring, visible while the cell has keyboard focus.
+              isFocusVisible ? "outline-2 outline-offset-2 outline-focus-ring" : "",
+              // Hover state for cells in the middle of the range.
+              isSelected && !isDisabled && isRangeCalendar ? "font-medium" : "",
+              markedAsSelected && "bg-brand-solid font-medium text-white hover:bg-brand-solid_hover hover:text-white",
+              // Hover state for non-selected cells.
+              !isSelected && !isDisabled ? "hover:bg-primary_hover hover:font-medium!" : "",
+              !isSelected && isTodayDate ? "bg-secondary font-medium hover:bg-secondary_hover" : ""
+            ),
+            children: [
+              formattedDate,
+              (isHighlighted || isTodayDate) && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cx(
+                    "absolute bottom-1 left-1/2 size-1.25 -translate-x-1/2 rounded-full",
+                    markedAsSelected ? "bg-fg-white" : "bg-fg-brand-primary",
+                    isDisabled && "opacity-50"
+                  )
+                }
+              )
+            ]
+          }
+        );
+      }
+    }
+  );
+};
+var RangeCalendarContextProvider = ({ children }) => {
+  const [value, onChange] = useState(null);
+  const [focusedValue, onFocusChange] = useState();
+  return /* @__PURE__ */ jsx(RangeCalendarContext.Provider, { value: { value, onChange, focusedValue, onFocusChange }, children });
+};
+var RangeCalendarTitle = ({ part }) => {
+  const context = useContext(RangeCalendarStateContext);
+  if (!context) {
+    throw new Error("<RangeCalendarTitle /> must be used within a <RangeCalendar /> component.");
+  }
+  const formatter = useDateFormatter({
+    month: "long",
+    year: "numeric",
+    calendar: context.visibleRange.start.calendar.identifier,
+    timeZone: context.timeZone
+  });
+  return part === "start" ? formatter.format(context.visibleRange.start.toDate(context.timeZone)) : formatter.format(context.visibleRange.end.toDate(context.timeZone));
+};
+var RangePresetButton = ({ value, className, children, ...props }) => {
+  const context = useSlottedContext(RangeCalendarContext);
+  const isSelected = context?.value?.start?.compare(value.start) === 0 && context?.value?.end?.compare(value.end) === 0;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...props,
+      className: cx(
+        "cursor-pointer rounded-md px-3 py-2 text-left text-sm font-medium text-white outline-focus-ring transition duration-100 ease-linear focus-visible:outline-2 focus-visible:outline-offset-2",
+        isSelected ? "bg-secondary text-secondary_hover hover:bg-secondary_hover" : "text-secondary hover:bg-primary_hover hover:text-secondary_hover",
+        className
+      ),
+      children
+    }
+  );
+};
+var MobilePresetButton = ({ value, children, ...props }) => {
+  const context = useContext(RangeCalendarStateContext);
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...props,
+      slot: null,
+      size: "sm",
+      color: "link-color",
+      onClick: () => {
+        context?.setValue(value);
+        context?.setFocusedDate(value.start);
+      },
+      children
+    }
+  );
+};
+var MobilePresetSelect = ({ presets }) => {
+  const context = useContext(RangeCalendarStateContext);
+  const entries = Object.entries(presets);
+  const items = entries.map(([id, preset]) => ({ id, label: preset.label }));
+  const current = context?.value;
+  const selectedKey = current?.start && current?.end ? entries.find(([, preset]) => preset.value.start.compare(current.start) === 0 && preset.value.end.compare(current.end) === 0)?.[0] ?? null : null;
+  return /* @__PURE__ */ jsx(
+    _Select,
+    {
+      "aria-label": "Date range presets",
+      size: "sm",
+      placeholder: "Select a range",
+      items,
+      selectedKey,
+      mobileOptions: { title: "Select a range", className: "h-dvh! max-h-dvh! rounded-none", contentClassName: "px-2" },
+      onSelectionChange: (key) => {
+        const preset = key != null ? presets[String(key)] : void 0;
+        if (!preset) return;
+        context?.setValue(preset.value);
+        context?.setFocusedDate(preset.value.start);
+      },
+      children: (item) => /* @__PURE__ */ jsx(_Select.Item, { id: item.id, children: item.label })
+    }
+  );
+};
+var RangeCalendar = ({
+  presets,
+  visibleDuration,
+  showOutOfRangeDates = false,
+  showPresetsOnDesktop = false,
+  fluid = false,
+  ...props
+}) => {
+  const isDesktop = useBreakpoint("md") && !fluid;
+  const context = useSlottedContext(RangeCalendarContext);
+  const ContextWrapper = context ? Fragment$1 : RangeCalendarContextProvider;
+  const visibleDurationMonths = fluid ? 1 : visibleDuration?.months || (isDesktop ? 2 : 1);
+  return /* @__PURE__ */ jsx(ContextWrapper, { children: /* @__PURE__ */ jsxs(
+    RangeCalendar$1,
+    {
+      ...props,
+      className: (state) => cx(
+        fluid ? "flex w-full flex-col items-stretch" : "flex items-start",
+        typeof props.className === "function" ? props.className(state) : props.className
+      ),
+      visibleDuration: {
+        months: visibleDurationMonths
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: cx("flex flex-col gap-3 md:gap-2", fluid ? "w-full px-4 pt-1 pb-4" : "px-6 py-5"), children: [
+          /* @__PURE__ */ jsxs("header", { className: cx("relative flex items-center", visibleDurationMonths > 1 ? "justify-start" : "justify-between"), children: [
+            /* @__PURE__ */ jsx(Button, { slot: "previous", iconLeading: CaretLeftIcon, size: "sm", color: "tertiary", className: "size-8" }),
+            /* @__PURE__ */ jsx("h2", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-sm font-semibold text-fg-secondary", children: /* @__PURE__ */ jsx(RangeCalendarTitle, { part: "start" }) }),
+            visibleDurationMonths === 1 && /* @__PURE__ */ jsx(Button, { slot: "next", iconLeading: CaretRightIcon, size: "sm", color: "tertiary", className: "size-8" })
+          ] }),
+          !isDesktop && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cx(
+                "flex w-full gap-2",
+                fluid ? "flex-col items-stretch" : "items-center",
+                !fluid && "md:hidden"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(InputDateBase, { slot: "start", size: "sm", wrapperClassName: "min-w-0 flex-1" }),
+                !fluid && /* @__PURE__ */ jsx("div", { className: "text-md text-quaternary", children: "\u2013" }),
+                /* @__PURE__ */ jsx(InputDateBase, { slot: "end", size: "sm", wrapperClassName: "min-w-0 flex-1" })
+              ]
+            }
+          ),
+          fluid && presets ? /* @__PURE__ */ jsx("div", { className: "mt-1", children: /* @__PURE__ */ jsx(MobilePresetSelect, { presets }) }) : (showPresetsOnDesktop || !isDesktop) && presets ? /* @__PURE__ */ jsx("div", { className: "mt-1 flex justify-between gap-3 px-2", children: Object.values(presets).map((preset) => /* @__PURE__ */ jsx(MobilePresetButton, { value: preset.value, children: preset.label }, preset.label)) }) : null,
+          /* @__PURE__ */ jsxs(CalendarGrid, { weekdayStyle: "short", className: cx(fluid ? "w-full table-fixed" : "w-max"), children: [
+            /* @__PURE__ */ jsx(CalendarGridHeader, { children: (day) => /* @__PURE__ */ jsx(CalendarHeaderCell, { className: "border-b-4 border-transparent p-0", children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cx(
+                  "flex items-center justify-center text-sm font-medium text-secondary",
+                  fluid ? "h-10 w-full" : "size-10"
+                ),
+                children: day.slice(0, 2)
+              }
+            ) }) }),
+            /* @__PURE__ */ jsx(CalendarGridBody, { className: "[&_td]:p-0 [&_tr]:border-b-4 [&_tr]:border-transparent [&_tr:last-of-type]:border-none", children: (date) => /* @__PURE__ */ jsx(CalendarCell, { date, fluid, showOutOfRangeDates }) })
+          ] })
+        ] }),
+        visibleDurationMonths > 1 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 border-l border-secondary px-6 py-5", children: [
+          /* @__PURE__ */ jsxs("header", { className: "relative flex items-center justify-end", children: [
+            /* @__PURE__ */ jsx("h2", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-sm font-semibold text-fg-secondary", children: /* @__PURE__ */ jsx(RangeCalendarTitle, { part: "end" }) }),
+            /* @__PURE__ */ jsx(Button, { slot: "next", iconLeading: CaretRightIcon, size: "sm", color: "tertiary", className: "size-8" })
+          ] }),
+          /* @__PURE__ */ jsxs(CalendarGrid, { weekdayStyle: "short", offset: { months: 1 }, className: "w-max", children: [
+            /* @__PURE__ */ jsx(CalendarGridHeader, { children: (day) => /* @__PURE__ */ jsx(CalendarHeaderCell, { className: "border-b-4 border-transparent p-0", children: /* @__PURE__ */ jsx("div", { className: "flex size-10 items-center justify-center text-sm font-medium text-secondary", children: day.slice(0, 2) }) }) }),
+            /* @__PURE__ */ jsx(CalendarGridBody, { className: "[&_td]:p-0 [&_tr]:border-b-4 [&_tr]:border-transparent [&_tr:last-of-type]:border-none", children: (date) => /* @__PURE__ */ jsx(CalendarCell, { date }) })
+          ] })
+        ] })
+      ]
+    }
+  ) });
+};
+var now = today(getLocalTimeZone());
+var highlightedDates = [today(getLocalTimeZone())];
+var DateRangePicker = ({
+  value: valueProp,
+  defaultValue,
+  onChange,
+  onApply,
+  onCancel,
+  size = "sm",
+  mobileOptions,
+  ...props
+}) => {
+  const isMobile = useIsMobile();
+  const resolvedMobile = useMemo(() => resolveDatePickerMobileOptions(mobileOptions), [mobileOptions]);
+  const useMobileFullScreen = isMobile && resolvedMobile.fullScreen;
+  const { locale } = useLocale();
+  const formatter = useDateFormatter({
+    month: "short",
+    day: "numeric",
+    year: "numeric"
+  });
+  const [value, setValue] = useControlledState(valueProp, defaultValue || null, onChange);
+  const [focusedValue, setFocusedValue] = useState(null);
+  const formattedStartDate = value?.start ? formatter.format(value.start.toDate(getLocalTimeZone())) : "Select date";
+  const formattedEndDate = value?.end ? formatter.format(value.end.toDate(getLocalTimeZone())) : "Select date";
+  const presets = useMemo(
+    () => ({
+      today: { label: "Today", value: { start: now, end: now } },
+      yesterday: { label: "Yesterday", value: { start: now.subtract({ days: 1 }), end: now.subtract({ days: 1 }) } },
+      thisWeek: { label: "This week", value: { start: startOfWeek(now, locale), end: endOfWeek(now, locale) } },
+      lastWeek: {
+        label: "Last week",
+        value: {
+          start: startOfWeek(now, locale).subtract({ weeks: 1 }),
+          end: endOfWeek(now, locale).subtract({ weeks: 1 })
+        }
+      },
+      thisMonth: { label: "This month", value: { start: startOfMonth(now), end: endOfMonth(now) } },
+      lastMonth: {
+        label: "Last month",
+        value: {
+          start: startOfMonth(now).subtract({ months: 1 }),
+          end: endOfMonth(now).subtract({ months: 1 })
+        }
+      },
+      thisYear: { label: "This year", value: { start: startOfMonth(now.set({ month: 1 })), end: endOfMonth(now.set({ month: 12 })) } },
+      lastYear: {
+        label: "Last year",
+        value: {
+          start: startOfMonth(now.set({ month: 1 }).subtract({ years: 1 })),
+          end: endOfMonth(now.set({ month: 12 }).subtract({ years: 1 }))
+        }
+      },
+      allTime: {
+        label: "All time",
+        value: {
+          start: now.set({ year: 2e3, month: 1, day: 1 }),
+          end: now
+        }
+      }
+    }),
+    [locale]
+  );
+  return /* @__PURE__ */ jsxs(DateRangePicker$1, { "aria-label": "Date range picker", shouldCloseOnSelect: false, ...props, value, onChange: setValue, children: [
+    /* @__PURE__ */ jsx(Group, { children: /* @__PURE__ */ jsx(Button, { size, color: "secondary", iconLeading: CalendarBlankIcon, children: !value ? /* @__PURE__ */ jsx("span", { className: "text-placeholder", children: "Select dates" }) : `${formattedStartDate} \u2013 ${formattedEndDate}` }) }),
+    /* @__PURE__ */ jsx(
+      DatePickerOverlay,
+      {
+        placement: "bottom right",
+        offset: 8,
+        mobileOptions: { title: "Select dates", ...mobileOptions },
+        className: ({ isEntering, isExiting }) => cx(
+          "origin-(--trigger-anchor-point) will-change-transform",
+          isEntering && "duration-150 ease-out animate-in fade-in placement-right:slide-in-from-left-0.5 placement-top:slide-in-from-bottom-0.5 placement-bottom:slide-in-from-top-0.5",
+          isExiting && "duration-100 ease-in animate-out fade-out placement-right:slide-out-to-left-0.5 placement-top:slide-out-to-bottom-0.5 placement-bottom:slide-out-to-top-0.5"
+        ),
+        children: /* @__PURE__ */ jsx(
+          Dialog,
+          {
+            "aria-label": "Date range picker",
+            className: cx(
+              "flex outline-hidden",
+              useMobileFullScreen ? "min-h-0 flex-1 flex-col overflow-hidden bg-primary" : "rounded-2xl bg-primary shadow-xl ring ring-secondary_alt focus:outline-hidden"
+            ),
+            children: ({ close }) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: cx("flex min-h-0 flex-1", useMobileFullScreen ? "flex-col overflow-hidden" : "flex-row"), children: [
+              /* @__PURE__ */ jsx("div", { className: "hidden w-38 flex-col gap-0.5 border-r border-solid border-secondary p-3 lg:flex", children: Object.values(presets).map((preset) => /* @__PURE__ */ jsx(
+                RangePresetButton,
+                {
+                  value: preset.value,
+                  onClick: () => {
+                    setValue(preset.value);
+                    setFocusedValue(preset.value.start);
+                  },
+                  children: preset.label
+                },
+                preset.label
+              )) }),
+              /* @__PURE__ */ jsxs("div", { className: cx("flex flex-col", useMobileFullScreen && "min-h-0 w-full flex-1 overflow-hidden"), children: [
+                /* @__PURE__ */ jsx("div", { className: cx(useMobileFullScreen && "min-h-0 w-full flex-1 overflow-x-hidden overflow-y-auto"), children: /* @__PURE__ */ jsx(
+                  RangeCalendar,
+                  {
+                    fluid: useMobileFullScreen,
+                    focusedValue,
+                    onFocusChange: setFocusedValue,
+                    highlightedDates,
+                    presets: useMobileFullScreen ? presets : {
+                      lastWeek: presets.lastWeek,
+                      lastMonth: presets.lastMonth,
+                      lastYear: presets.lastYear
+                    }
+                  }
+                ) }),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: cx(
+                      "flex justify-between gap-3 border-t border-secondary p-4",
+                      useMobileFullScreen && "shrink-0 pb-[max(1rem,env(safe-area-inset-bottom))]"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxs("div", { className: cx("hidden items-center gap-2", !useMobileFullScreen && "md:flex"), children: [
+                        /* @__PURE__ */ jsx(InputDateBase, { slot: "start", size: "sm" }),
+                        /* @__PURE__ */ jsx("div", { className: "text-md text-quaternary", children: "\u2013" }),
+                        /* @__PURE__ */ jsx(InputDateBase, { slot: "end", size: "sm" })
+                      ] }),
+                      /* @__PURE__ */ jsxs("div", { className: "grid w-full grid-cols-2 gap-3 md:flex md:w-auto", children: [
+                        /* @__PURE__ */ jsx(
+                          Button,
+                          {
+                            size: "sm",
+                            color: "secondary",
+                            onClick: () => {
+                              onCancel?.();
+                              close();
+                            },
+                            children: "Cancel"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Button,
+                          {
+                            size: "sm",
+                            color: "primary",
+                            onClick: () => {
+                              onApply?.();
+                              close();
+                            },
+                            children: "Apply"
+                          }
+                        )
+                      ] })
+                    ]
+                  }
+                )
+              ] })
+            ] }) })
+          }
+        )
+      }
+    )
+  ] });
+};
+
+export { DateRangePicker };
+//# sourceMappingURL=date-range-picker.js.map
+//# sourceMappingURL=date-range-picker.js.map