@galaxy-io/dls 1.6.1 → 2.0.0

package/dist/inputs/DateInput.js

@@ -1,496 +1,1154 @@
-import { withTheme } from "../theme/GalaxyTheme.js";
-import { getCssSizeValue } from "../utils/linaria.js";
-import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
-import Dropdown, { DropdownVariant } from "../dropdown/Dropdown.js";
+import VisuallyHidden from "../a11y/VisuallyHidden.js";
+import { Orientation } from "../theme/enums.js";
+import Text, { TextSize, TextTransform, TextVariant, TextWeight } from "../text/Text.js";
+import { useControlledState } from "../hooks/useControlledState.js";
+import { useControlledOpenState } from "../hooks/useControlledOpenState.js";
+import Flex, { AlignItems, FlexDirection } from "../layout/Flex.js";
+import Box from "../layout/Box.js";
+import Divider from "../layout/Divider.js";
+import Popover, { PopoverRole, PopoverTrigger, PopoverVariant } from "../overlays/Popover.js";
 import Icon, { IconVariant } from "../icons/Icon.js";
-import FlexWrapper, { AlignItems, FlexDirection, JustifyContent } from "../containers/FlexWrapper.js";
-import Spacing from "../containers/Spacing.js";
-import { InputLabel, InputSize, InputVariant, getInputBorderColor, getInputHeight, getInputIconSize, getInputPadding, getInputSurfaceColor, getInputTextSize } from "./Input.js";
-import GridWrapper from "../containers/GridWrapper.js";
-import SelectInput from "./SelectInput.js";
+import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
+import FlexItem from "../layout/FlexItem.js";
+import { FieldContext } from "../hooks/useField.js";
+import { useDevWarning } from "./internal/devWarn.js";
+import { useFieldWiring } from "./internal/fieldWiring.js";
+import Field, { FieldSize } from "./Field.js";
+import { rootStyle, useOwnField } from "./internal/ownField.js";
+import { BareFieldContext, useIsBareField } from "./internal/bareField.js";
+import "./internal/innerButton.js";
+import { useDedupedOpen, useRestoreFocusAfterOutsidePress, useRetriedFocus } from "./internal/useComboboxPopover.js";
+import SelectInput, { SelectInputSize, SelectInputVariant } from "./SelectInput.js";
 /* empty css                    */
 import { styled } from "@linaria/react";
-import { useCallback, useMemo, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { CalendarBlankIcon, CaretLeftIcon, CaretRightIcon } from "@phosphor-icons/react";
+import { forwardRef, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+import { useMergeRefs } from "@floating-ui/react";
+import { CalendarBlankIcon, CaretLeftIcon, CaretRightIcon, XIcon } from "@phosphor-icons/react";
 //#region src/inputs/DateInput.tsx
-var DateMonth = /* @__PURE__ */ function(DateMonth) {
-	DateMonth["JANUARY"] = "JANUARY";
-	DateMonth["FEBRUARY"] = "FEBRUARY";
-	DateMonth["MARCH"] = "MARCH";
-	DateMonth["APRIL"] = "APRIL";
-	DateMonth["MAY"] = "MAY";
-	DateMonth["JUNE"] = "JUNE";
-	DateMonth["JULY"] = "JULY";
-	DateMonth["AUGUST"] = "AUGUST";
-	DateMonth["SEPTEMBER"] = "SEPTEMBER";
-	DateMonth["OCTOBER"] = "OCTOBER";
-	DateMonth["NOVEMBER"] = "NOVEMBER";
-	DateMonth["DECEMBER"] = "DECEMBER";
-	return DateMonth;
-}(DateMonth || {});
-var DateDay = /* @__PURE__ */ function(DateDay) {
-	DateDay["SUNDAY"] = "SUNDAY";
-	DateDay["MONDAY"] = "MONDAY";
-	DateDay["TUESDAY"] = "TUESDAY";
-	DateDay["WEDNESDAY"] = "WEDNESDAY";
-	DateDay["THURSDAY"] = "THURSDAY";
-	DateDay["FRIDAY"] = "FRIDAY";
-	DateDay["SATURDAY"] = "SATURDAY";
-	return DateDay;
-}(DateDay || {});
-var DATE_MONTH_TO_LABEL = {
-	["JANUARY"]: "January",
-	["FEBRUARY"]: "February",
-	["MARCH"]: "March",
-	["APRIL"]: "April",
-	["MAY"]: "May",
-	["JUNE"]: "June",
-	["JULY"]: "July",
-	["AUGUST"]: "August",
-	["SEPTEMBER"]: "September",
-	["OCTOBER"]: "October",
-	["NOVEMBER"]: "November",
-	["DECEMBER"]: "December"
+/**
+* The form control for choosing a calendar date, a date and time, or a range of either. A field
+* shows the chosen value (or a placeholder) and opens a calendar panel below it: a month grid
+* navigated with the arrow keys or the pointer, month and year selects, optional hour and minute
+* selects (`hasTime`), and the app's presets ("Last 7 days"). The value is a `Date` (or a
+* `{ start, end }` pair with `isRange`), never a string. `min` / `max` disable the days outside a
+* window; `timeZone` reads the calendar, the time and the field text in an IANA zone and shows its
+* short name.
+*
+* The field is a select-only combobox with a dialog popup (`Popover` `MANUAL`, `DIALOG`);
+* DateInput moves focus into the grid on open (the WAI-ARIA date picker dialog). Calendar math runs
+* on `{ year, month, day }` records through `Intl`, so DST and month lengths cannot shift a day.
+*
+* It does not validate (the app passes `error`), accept typed dates, or pick durations
+* (`DurationInput`) or schedules (`CronInput`).
+*
+* SSR: closed by default, so the server renders the field only. Without `timeZone`, the field's
+* text is formatted in the server's zone. Nothing here touches `window` or `document` at module
+* scope; "today" is read when the panel renders.
+*/
+/** Canonical rungs; DateInput supports all five (the Input rung table). */
+var DateInputSize = /* @__PURE__ */ function(DateInputSize) {
+	/** 20px field, caption text, 12px icon. */
+	DateInputSize["X_SMALL"] = "X_SMALL";
+	/** 24px field, body_sm text, 12px icon. */
+	DateInputSize["SMALL"] = "SMALL";
+	/** 32px field, body_md text, 14px icon. The default (1.x `MEDIUM` was 28px). */
+	DateInputSize["MEDIUM"] = "MEDIUM";
+	/** 36px field, body_lg text, 14px icon. */
+	DateInputSize["LARGE"] = "LARGE";
+	/** 40px field, body_lg text, 16px icon. */
+	DateInputSize["X_LARGE"] = "X_LARGE";
+	return DateInputSize;
+}({});
+/** Resting fill of the field (Constitution V-A surface set; 1.x `InputVariant` unchanged). */
+var DateInputVariant = /* @__PURE__ */ function(DateInputVariant) {
+	/** `background.base` fill. */
+	DateInputVariant["BASE"] = "BASE";
+	/** `background.primary` fill. The default. */
+	DateInputVariant["PRIMARY"] = "PRIMARY";
+	/** `background.secondary` fill. */
+	DateInputVariant["SECONDARY"] = "SECONDARY";
+	/** `background.tertiary` fill. */
+	DateInputVariant["TERTIARY"] = "TERTIARY";
+	return DateInputVariant;
+}({});
+/** Field widths without `fillWidth` (no width token exists; the `MENU_MAX_WIDTH` precedent). */
+/** The presets column's narrowest width. */
+/** The year select's width and the hour / minute selects' width (px, for `Box width`). */
+var DATE_INPUT_YEAR_SELECT_WIDTH = 72;
+/** The month carets: 10px on the panel's 24px (`SMALL`) buttons (the collapsible Widget's caret, small rung). */
+var MONTH_CARET_PX = 10;
+var DATE_INPUT_TIME_SELECT_WIDTH = 64;
+/** Years shown without a bound: the current year − 100 to + 10 (1.x's range). */
+var DATE_INPUT_YEARS_BEFORE = 100;
+var DATE_INPUT_YEARS_AFTER = 10;
+/** Frames to wait for the panel's portal before giving up on moving focus into the grid. */
+var DATE_INPUT_FOCUS_RETRY_FRAMES = 10;
+/** Fixed English copy (the DLS's built-in copy is English; Field Decision 15). */
+var MONTH_NAMES = [
+	"January",
+	"February",
+	"March",
+	"April",
+	"May",
+	"June",
+	"July",
+	"August",
+	"September",
+	"October",
+	"November",
+	"December"
+];
+var WEEKDAY_NAMES = [
+	"Sunday",
+	"Monday",
+	"Tuesday",
+	"Wednesday",
+	"Thursday",
+	"Friday",
+	"Saturday"
+];
+/** Field icon px per rung: one step below the rung's III-A.4 icon (Mitch, 2026-10-04). */
+var DATE_INPUT_SIZE_TO_ICON_PX_MAP = {
+	["X_SMALL"]: 12,
+	["SMALL"]: 12,
+	["MEDIUM"]: 14,
+	["LARGE"]: 14,
+	["X_LARGE"]: 16
 };
-var DATE_DAY_TO_LABEL = {
-	["SUNDAY"]: "Sun",
-	["MONDAY"]: "Mon",
-	["TUESDAY"]: "Tue",
-	["WEDNESDAY"]: "Wed",
-	["THURSDAY"]: "Thu",
-	["FRIDAY"]: "Fri",
-	["SATURDAY"]: "Sat"
+/** The clear button's rung: 20px up to MEDIUM, 24px for LARGE and X_LARGE (Input's). */
+var DATE_INPUT_SIZE_TO_BUTTON_SIZE_MAP = {
+	["X_SMALL"]: ButtonSize.X_SMALL,
+	["SMALL"]: ButtonSize.X_SMALL,
+	["MEDIUM"]: ButtonSize.X_SMALL,
+	["LARGE"]: ButtonSize.SMALL,
+	["X_LARGE"]: ButtonSize.SMALL
 };
-var INPUT_VARIANT_TO_DROPDOWN_VARIANT = {
-	[InputVariant.TRANSPARENT]: DropdownVariant.TRANSPARENT,
-	[InputVariant.BASE]: DropdownVariant.PRIMARY,
-	[InputVariant.PRIMARY]: DropdownVariant.PRIMARY,
-	[InputVariant.SECONDARY]: DropdownVariant.SECONDARY,
-	[InputVariant.TERTIARY]: DropdownVariant.TERTIARY
+/** The clear button's px per rung, for the reserved padding (16 on X_SMALL: `X_SMALL_INNER_BUTTON_CSS`). */
+/** Field text step per rung (the canonical control text). */
+var DATE_INPUT_SIZE_TO_TEXT_SIZE_MAP = {
+	["X_SMALL"]: TextSize.CAPTION,
+	["SMALL"]: TextSize.BODY_SM,
+	["MEDIUM"]: TextSize.BODY_MD,
+	["LARGE"]: TextSize.BODY_LG,
+	["X_LARGE"]: TextSize.BODY_LG
 };
-var _exp = () => ({ $size }) => `0 ${getInputPadding($size)}`;
-var _exp2 = () => ({ $size }) => getInputHeight($size);
-var _exp3 = () => ({ $width, $fillWidth }) => $fillWidth ? "100%" : $width ? getCssSizeValue($width) : "auto";
-var _exp4 = () => ({ $isDisabled }) => $isDisabled ? "not-allowed" : "pointer";
-var _exp5 = () => ({ $isDisabled }) => $isDisabled ? .5 : 1;
-var _exp6 = () => ({ theme, $variant }) => getInputSurfaceColor(theme, $variant);
-var _exp7 = () => ({ theme, $variant, $isActive, $isError }) => {
-	if ($isActive) return theme.color.border.selected;
-	if ($isError) return theme.color.border.error;
-	return getInputBorderColor(theme, $variant);
+/** The `Field` a DateInput renders for its own `label` / `error` uses the same rung. */
+var DATE_INPUT_SIZE_TO_FIELD_SIZE_MAP = {
+	["X_SMALL"]: FieldSize.X_SMALL,
+	["SMALL"]: FieldSize.SMALL,
+	["MEDIUM"]: FieldSize.MEDIUM,
+	["LARGE"]: FieldSize.LARGE,
+	["X_LARGE"]: FieldSize.X_LARGE
 };
-var _exp8 = () => ({ theme, $variant, $isActive, $isDisabled }) => {
-	if ($isDisabled) return getInputBorderColor(theme, $variant);
-	if ($isActive) return theme.color.border.selected;
-	return getInputBorderColor(theme, $variant);
+/** Panel fill: SelectInput's map. A ghost field (`isGhost`) gets a readable `BASE` panel instead. */
+var DATE_INPUT_VARIANT_TO_POPOVER_VARIANT_MAP = {
+	["BASE"]: PopoverVariant.PRIMARY,
+	["PRIMARY"]: PopoverVariant.PRIMARY,
+	["SECONDARY"]: PopoverVariant.SECONDARY,
+	["TERTIARY"]: PopoverVariant.TERTIARY
 };
-var StyledDateInput = withTheme(/*#__PURE__*/ styled("div")({
-	name: "StyledDateInput",
-	class: "s1902pw9",
-	propsAsIs: false,
-	vars: {
-		"s1902pw9-0": [_exp()],
-		"s1902pw9-1": [_exp2()],
-		"s1902pw9-2": [_exp3()],
-		"s1902pw9-3": [_exp4()],
-		"s1902pw9-4": [_exp5()],
-		"s1902pw9-5": [_exp6()],
-		"s1902pw9-6": [_exp7()],
-		"s1902pw9-7": [_exp8()]
-	}
-}));
-var CalendarContainer = withTheme(/*#__PURE__*/ styled("div")({
-	name: "CalendarContainer",
-	class: "c179xo5d",
+/** Holds the field box, the trailing parts and the status region. */
+var Wrapper = /*#__PURE__*/ styled("div")({
+	name: "Wrapper",
+	class: "gx-DateInput-Wrapper-w1902pw9",
 	propsAsIs: false
-}));
-var _exp9 = () => ({ $isDisabled }) => $isDisabled ? "not-allowed" : "pointer";
-var _exp0 = () => ({ $isDisabled, $isCurrentMonth }) => {
-	if ($isDisabled) return .3;
-	if (!$isCurrentMonth) return .4;
-	return 1;
+});
+/** Without `isRange`: 240px. */
+var SINGLE_WIDTH_CSS = "gx-DateInput-SINGLE_WIDTH_CSS-s179xo5d";
+/** With `isRange`: 320px. */
+var RANGE_WIDTH_CSS = "gx-DateInput-RANGE_WIDTH_CSS-r60emtx";
+/**
+* The combobox (focused element and Popover's reference). No outline; focus is `FOCUS_CSS`.
+* Declared before the frame maps.
+*/
+var Control = /*#__PURE__*/ styled("div")({
+	name: "Control",
+	class: "gx-DateInput-Control-c1e2nwo7",
+	propsAsIs: false
+});
+/** Rest look per variant: fill and hairline color. */
+var DATE_INPUT_VARIANT_TO_CSS_MAP = {
+	["BASE"]: "gx-DateInput-BASE-b1phezo9",
+	["PRIMARY"]: "gx-DateInput-PRIMARY-p132k297",
+	["SECONDARY"]: "gx-DateInput-SECONDARY-s14lrrd7",
+	["TERTIARY"]: "gx-DateInput-TERTIARY-t19rohk5"
+};
+/** `isGhost`: no fill and no hairline at rest. Declared after the variant map, which it replaces. */
+var GHOST_CSS = "gx-DateInput-GHOST_CSS-g1mgixmn";
+/** Hover on an editable field: `border.hovered` (stronger than `border.primary`, Constitution III.6). */
+var DATE_INPUT_VARIANT_TO_HOVER_CSS_MAP = {
+	["BASE"]: "gx-DateInput-BASE-bvno65u",
+	["PRIMARY"]: "gx-DateInput-PRIMARY-p1c49qmz",
+	["SECONDARY"]: "gx-DateInput-SECONDARY-s2trf89",
+	["TERTIARY"]: "gx-DateInput-TERTIARY-texkd8z"
+};
+/** Hover on an editable ghost field: the frame appears, `border.hovered` with no fill. */
+var GHOST_HOVER_CSS = "gx-DateInput-GHOST_HOVER_CSS-gymba5f";
+/**
+* Height, start inset, gap and the end inset that reserves the icon zone (rung padding + icon +
+* gap) per rung (SelectInput's table). The start inset subtracts the 0.5px hairline so the value
+* starts on a whole pixel.
+*/
+var DATE_INPUT_SIZE_TO_CSS_MAP = {
+	["X_SMALL"]: "gx-DateInput-X_SMALL-x1a1xhli",
+	["SMALL"]: "gx-DateInput-SMALL-s7h8e7l",
+	["MEDIUM"]: "gx-DateInput-MEDIUM-m6tdnlc",
+	["LARGE"]: "gx-DateInput-LARGE-l4w2d6x",
+	["X_LARGE"]: "gx-DateInput-X_LARGE-xhdfnp7"
 };
-var _exp1 = () => ({ theme, $isSelected, $isToday }) => {
-	if ($isSelected) return theme.color.background.tertiary;
-	if ($isToday) return theme.color.background.tertiary;
-	return "transparent";
+/** With `isClearable`: the end inset also reserves the clear button and a gap. */
+var DATE_INPUT_SIZE_TO_CLEARABLE_CSS_MAP = {
+	["X_SMALL"]: "gx-DateInput-X_SMALL-xomc7wv",
+	["SMALL"]: "gx-DateInput-SMALL-s63pu89",
+	["MEDIUM"]: "gx-DateInput-MEDIUM-m1218f0q",
+	["LARGE"]: "gx-DateInput-LARGE-l1raveum",
+	["X_LARGE"]: "gx-DateInput-X_LARGE-x19gz466"
 };
-var _exp10 = () => ({ theme, $isSelected }) => {
-	if ($isSelected) return `0.5px solid ${theme.color.border.primary}`;
-	return "0.5px solid transparent";
+/**
+* Focus, from the mouse or the keyboard: `FIELD_FOCUS`, `border.focused` at 1px inside the frame. `:focus:hover`
+* beats the hover map, so a ghost field keeps it. Not applied while disabled (the disabled
+* combobox is a `tabIndex={-1}` div, which a click can still focus).
+*/
+var FOCUS_CSS = "gx-DateInput-FOCUS_CSS-f3bchrm";
+/** Open: `border.focused` (1.x's "selected" border). */
+var OPEN_CSS = "gx-DateInput-OPEN_CSS-odi2lp8";
+/** Error border at rest, on hover, with focus and while open. */
+var ERROR_CSS = "gx-DateInput-ERROR_CSS-e10br3dp";
+/** Disabled keeps the resting hairline; the text, the icon and the cursor say disabled. */
+var DISABLED_CSS = "gx-DateInput-DISABLED_CSS-d19thxo8";
+/** Read-only: no pointer affordance. */
+var READ_ONLY_CSS = "gx-DateInput-READ_ONLY_CSS-r1fk36c6";
+/** Stretch to the parent's width (wrapper, and the `Field` wrapper when there is one). */
+var FILL_WIDTH_CSS = "gx-DateInput-FILL_WIDTH_CSS-f977rni";
+/** The month buttons: a square of their 24px rung around the 10px caret (TableCore's expand button). */
+var MONTH_CARET_BUTTON_CSS = "gx-DateInput-MONTH_CARET_BUTTON_CSS-mlmbz05";
+/** The value (or placeholder) and the zone name, 2px apart. */
+var ValueDisplay = /*#__PURE__*/ styled("span")({
+	name: "ValueDisplay",
+	class: "gx-DateInput-ValueDisplay-v5174l8",
+	propsAsIs: false
+});
+/** The zone name after the value: never wraps, never shrinks. */
+var ZoneName = /*#__PURE__*/ styled("span")({
+	name: "ZoneName",
+	class: "gx-DateInput-ZoneName-z1v2jgx0",
+	propsAsIs: false
+});
+/** The calendar icon and the clear button, laid over the field's end. */
+var Trailing = /*#__PURE__*/ styled("span")({
+	name: "Trailing",
+	class: "gx-DateInput-Trailing-t14on8ff",
+	propsAsIs: false
+});
+/** Trailing inset (the rung padding) and gap per rung. */
+var DATE_INPUT_SIZE_TO_TRAILING_CSS_MAP = {
+	["X_SMALL"]: "gx-DateInput-X_SMALL-xvfwun5",
+	["SMALL"]: "gx-DateInput-SMALL-s1mzi1x2",
+	["MEDIUM"]: "gx-DateInput-MEDIUM-m11jzfeq",
+	["LARGE"]: "gx-DateInput-LARGE-l17kufpy",
+	["X_LARGE"]: "gx-DateInput-X_LARGE-xzsw3xs"
 };
-var _exp11 = () => ({ theme, $isSelected }) => $isSelected ? theme.color.background.tertiary : theme.color.background.secondary;
-var DayCell = withTheme(/*#__PURE__*/ styled("button")({
+/** Wraps the clear button: the only part of `Trailing` that takes the pointer. */
+var ClearSlot = /*#__PURE__*/ styled("span")({
+	name: "ClearSlot",
+	class: "gx-DateInput-ClearSlot-cq0zkkh",
+	propsAsIs: false
+});
+/** Hidden clear button: keeps its width, leaves the tab order and the accessibility tree. */
+var CLEAR_HIDDEN_CSS = "gx-DateInput-CLEAR_HIDDEN_CSS-c1t1xs4o";
+/** The polite status region (VisuallyHidden takes no `role`). */
+var StatusRegion = /*#__PURE__*/ styled("span")({
+	name: "StatusRegion",
+	class: "gx-DateInput-StatusRegion-su3lrrj",
+	propsAsIs: false
+});
+/** The panel content: presets, then the calendar column, 12px in and 12px apart. */
+var PanelBody = /*#__PURE__*/ styled("div")({
+	name: "PanelBody",
+	class: "gx-DateInput-PanelBody-p18n6mtb",
+	propsAsIs: false
+});
+/** The presets column. */
+var PresetList = /*#__PURE__*/ styled("div")({
+	name: "PresetList",
+	class: "gx-DateInput-PresetList-p1bpicw8",
+	propsAsIs: false
+});
+/** One preset. Declared before its state classes. */
+var PresetButton = /*#__PURE__*/ styled("button")({
+	name: "PresetButton",
+	class: "gx-DateInput-PresetButton-p1n53t67",
+	propsAsIs: false
+});
+/** The preset whose value is the current value. */
+var SELECTED_PRESET_CSS = "gx-DateInput-SELECTED_PRESET_CSS-s1if4h5q";
+/** The month grid: seven 32px columns, no gaps, so a range band is continuous. */
+var GridTable = /*#__PURE__*/ styled("table")({
+	name: "GridTable",
+	class: "gx-DateInput-GridTable-g6roixn",
+	propsAsIs: false
+});
+/** A weekday header cell. */
+var WeekdayCell = /*#__PURE__*/ styled("th")({
+	name: "WeekdayCell",
+	class: "gx-DateInput-WeekdayCell-w1tj9b6w",
+	propsAsIs: false
+});
+/** A day cell: 32 × 32, carries the range band. */
+var DayCell = /*#__PURE__*/ styled("td")({
 	name: "DayCell",
-	class: "d60emtx",
-	propsAsIs: false,
-	vars: {
-		"d60emtx-0": [_exp9()],
-		"d60emtx-1": [_exp0()],
-		"d60emtx-2": [_exp1()],
-		"d60emtx-3": [_exp10()],
-		"d60emtx-4": [_exp11()]
+	class: "gx-DateInput-DayCell-d1fe1lym",
+	propsAsIs: false
+});
+/** Days strictly inside a committed range, and its ends' cells: the soft selection band. */
+var IN_RANGE_CSS = "gx-DateInput-IN_RANGE_CSS-ic4r4p6";
+/** While the range's end is pending: the band from the start to the hovered or active day. */
+var RANGE_PREVIEW_CSS = "gx-DateInput-RANGE_PREVIEW_CSS-r12h464";
+/** The band's start rounds its outer corners. */
+var RANGE_START_CSS = "gx-DateInput-RANGE_START_CSS-r1w8ol8n";
+/** The band's end rounds its outer corners. */
+var RANGE_END_CSS = "gx-DateInput-RANGE_END_CSS-r1frmmpr";
+/** A day. Declared before the day-state map. */
+var DayButton = /*#__PURE__*/ styled("button")({
+	name: "DayButton",
+	class: "gx-DateInput-DayButton-dovvx2o",
+	propsAsIs: false
+});
+/** Text color, hover and fill per day state. */
+var DAY_STATE_TO_CSS_MAP = {
+	DEFAULT: "gx-DateInput-DEFAULT-d1n3n4g9",
+	OUTSIDE: "gx-DateInput-OUTSIDE-o1l3iklu",
+	DISABLED: "gx-DateInput-DISABLED-d3avu2d",
+	SELECTED: "gx-DateInput-SELECTED-s1dkcpo"
+};
+/** Today: a hairline, and medium weight on the number (set on the text). */
+var TODAY_CSS = "gx-DateInput-TODAY_CSS-tzq1kut";
+/** Cached zone formatters (created lazily; no browser global involved). */
+var ZONED_FORMATTERS = /* @__PURE__ */ new Map();
+/** The `formatToParts` formatter for a zone. */
+function getZonedFormatter(timeZone) {
+	let formatter = ZONED_FORMATTERS.get(timeZone);
+	if (formatter === void 0) {
+		formatter = new Intl.DateTimeFormat("en-US", {
+			timeZone,
+			hourCycle: "h23",
+			year: "numeric",
+			month: "numeric",
+			day: "numeric",
+			hour: "numeric",
+			minute: "numeric"
+		});
+		ZONED_FORMATTERS.set(timeZone, formatter);
 	}
-}));
-var DEFAULT_MAX_DATE = /* @__PURE__ */ new Date();
-function defaultDateFormat(date) {
-	return date.toLocaleDateString("en-US", {
+	return formatter;
+}
+/** The wall-clock parts of an instant, in `timeZone` (or the runtime's zone). */
+function toZonedParts(date, timeZone) {
+	if (timeZone === void 0) return {
+		year: date.getFullYear(),
+		month: date.getMonth(),
+		day: date.getDate(),
+		hour: date.getHours(),
+		minute: date.getMinutes()
+	};
+	const values = {};
+	for (const part of getZonedFormatter(timeZone).formatToParts(date)) if (part.type !== "literal") values[part.type] = Number.parseInt(part.value, 10);
+	return {
+		year: values.year ?? 1970,
+		month: (values.month ?? 1) - 1,
+		day: values.day ?? 1,
+		hour: (values.hour ?? 0) % 24,
+		minute: values.minute ?? 0
+	};
+}
+/** The instant of wall-clock parts in `timeZone`. A skipped time lands after the gap; a repeated one takes the earlier instant. */
+function fromZonedParts(parts, timeZone) {
+	if (timeZone === void 0) return new Date(parts.year, parts.month, parts.day, parts.hour, parts.minute);
+	const guess = Date.UTC(parts.year, parts.month, parts.day, parts.hour, parts.minute);
+	const offset = (ms) => {
+		const zoned = toZonedParts(new Date(ms), timeZone);
+		return Date.UTC(zoned.year, zoned.month, zoned.day, zoned.hour, zoned.minute) - Math.floor(ms / 6e4) * 6e4;
+	};
+	let instant = guess - offset(guess);
+	const corrected = guess - offset(instant);
+	if (corrected !== instant) instant = corrected;
+	return new Date(instant);
+}
+/** A sortable number for a day. */
+function dayKey(day) {
+	return day.year * 1e4 + day.month * 100 + day.day;
+}
+/** Days in a month. */
+function daysInMonth(year, month) {
+	return new Date(Date.UTC(year, month + 1, 0)).getUTCDate();
+}
+/** 0 = Sunday. */
+function weekdayOf(day) {
+	return new Date(Date.UTC(day.year, day.month, day.day)).getUTCDay();
+}
+/** The day `count` days later (or earlier). */
+function addDays(day, count) {
+	const date = new Date(Date.UTC(day.year, day.month, day.day + count));
+	return {
+		year: date.getUTCFullYear(),
+		month: date.getUTCMonth(),
+		day: date.getUTCDate()
+	};
+}
+/** The same day `count` months later, clamped to that month's length. */
+function addMonths(day, count) {
+	const index = day.year * 12 + day.month + count;
+	const year = Math.floor(index / 12);
+	const month = index - year * 12;
+	return {
+		year,
+		month,
+		day: Math.min(day.day, daysInMonth(year, month))
+	};
+}
+/** True when two days are the same. */
+function isSameDay(a, b) {
+	return a != null && b != null && dayKey(a) === dayKey(b);
+}
+/** Clamps a day into `[min, max]` (either may be absent). */
+function clampDay(day, minDay, maxDay) {
+	if (minDay !== null && dayKey(day) < dayKey(minDay)) return minDay;
+	if (maxDay !== null && dayKey(day) > dayKey(maxDay)) return maxDay;
+	return day;
+}
+/** Clamps an instant into `[min, max]`. */
+function clampInstant(date, min, max) {
+	if (min !== void 0 && date.getTime() < min.getTime()) return new Date(min.getTime());
+	if (max !== void 0 && date.getTime() > max.getTime()) return new Date(max.getTime());
+	return date;
+}
+/** Two digits ("07"). */
+function pad2(value) {
+	return String(value).padStart(2, "0");
+}
+/** The full date for a day button's name ("Saturday, October 3, 2026"). */
+function fullDateLabel(day) {
+	return `${WEEKDAY_NAMES[weekdayOf(day)] ?? ""}, ${MONTH_NAMES[day.month] ?? ""} ${day.day}, ${day.year}`;
+}
+/** The default field text: "Oct 3, 2026" (or "Oct 3, 2026, 14:30" with time) in the zone. */
+function defaultFormat(date, hasTime, timeZone) {
+	const options = {
 		month: "short",
 		day: "numeric",
 		year: "numeric"
+	};
+	if (hasTime) Object.assign(options, {
+		hour: "2-digit",
+		minute: "2-digit",
+		hourCycle: "h23"
 	});
+	if (timeZone !== void 0) options.timeZone = timeZone;
+	return new Intl.DateTimeFormat("en-US", options).format(date);
 }
-var getInitialViewDate = (value) => {
-	return value || /* @__PURE__ */ new Date();
-};
-/**
-* A date field with a calendar popover. Fully controlled — you own `value`.
-*
-* Works in `Date` objects throughout; there is no string parsing to get wrong.
-*/
-var DateInput = ({ label, variant = InputVariant.PRIMARY, size = InputSize.MEDIUM, value, placeholder = "Select date...", onChange, width, fillWidth = false, isDisabled = false, isRequired = false, error, minDate = new Date(1970, 0, 1), maxDate = DEFAULT_MAX_DATE, format = defaultDateFormat }) => {
-	const [state, setState] = useState({
-		isOpen: false,
-		isHovered: false,
-		viewDate: getInitialViewDate(value),
-		isMonthSelectOpen: false,
-		isYearSelectOpen: false
+/** The zone's short name for an instant ("UTC", "EDT", "GMT+2"). */
+function zoneName(date, timeZone) {
+	return new Intl.DateTimeFormat("en-US", {
+		timeZone,
+		timeZoneName: "short"
+	}).formatToParts(date).find((part) => part.type === "timeZoneName")?.value ?? timeZone;
+}
+/** True for a `DateRange` value. */
+function isDateRange(value) {
+	return value !== null && !(value instanceof Date);
+}
+/** True when two values are the same instant(s). */
+function isSameValue(a, b) {
+	if (a === null) return false;
+	if (isDateRange(a) && isDateRange(b)) return a.start.getTime() === b.start.getTime() && a.end.getTime() === b.end.getTime();
+	if (a instanceof Date && b instanceof Date) return a.getTime() === b.getTime();
+	return false;
+}
+/** The 42 days shown for a month: Sunday first, padded with the neighboring months. */
+function monthGrid(view) {
+	const first = {
+		year: view.year,
+		month: view.month,
+		day: 1
+	};
+	const start = addDays(first, -weekdayOf(first));
+	return Array.from({ length: 42 }, (_, index) => addDays(start, index));
+}
+/** The field, the trailing parts and the calendar panel, wired to the nearest Field. */
+function DateInputFrame({ dateProps, forwardedRef, isRoot }) {
+	const { isRange = false, value, defaultValue = null, onChange, presets, hasTime = false, min, max, timeZone, format, size = "MEDIUM", variant = "PRIMARY", isGhost = false, label: _label, placeholder, error, isError = false, isClearable = false, isDisabled = false, isReadOnly = false, isRequired = false, fillWidth = false, ariaLabel, isOpen, defaultIsOpen = false, onOpenChange, id, "aria-describedby": ariaDescribedBy, className, style, ...rest } = dateProps;
+	const isBare = useIsBareField();
+	const { field, controlId, describedBy, isInvalid, isRequired: isRequiredState, hasName } = useFieldWiring({
+		id,
+		ariaLabel,
+		ariaLabelAttribute: rest["aria-label"],
+		ariaLabelledBy: rest["aria-labelledby"],
+		ariaDescribedBy,
+		error,
+		isError,
+		isRequired
+	});
+	const panelId = `${controlId}-calendar`;
+	const headingId = `${controlId}-heading`;
+	const timeLabelId = `${controlId}-time`;
+	const startLabelId = `${controlId}-start`;
+	const endLabelId = `${controlId}-end`;
+	const controlRef = useRef(null);
+	const mergedRef = useMergeRefs([controlRef, forwardedRef]);
+	const panelRef = useRef(null);
+	const wrapperRef = useRef(null);
+	const isEditable = !isDisabled && !isReadOnly;
+	const [currentValue, setValue] = useControlledState({
+		value,
+		defaultValue,
+		onChange
 	});
-	const selectInteractionRef = useRef(false);
-	const [prevValue, setPrevValue] = useState(value);
-	if (value !== prevValue) {
-		setPrevValue(value);
-		if (value) setState((prev) => ({
-			...prev,
-			viewDate: value
-		}));
+	const { isOpen: isOpenState, setOpen: setOpenState } = useControlledOpenState({
+		isOpen,
+		defaultIsOpen,
+		onOpenChange
+	});
+	const isShown = isOpenState && isEditable;
+	const { setOpen, isShownRef } = useDedupedOpen(isShown, setOpenState);
+	const minDay = min === void 0 ? null : toZonedParts(min, timeZone);
+	const maxDay = max === void 0 ? null : toZonedParts(max, timeZone);
+	const isDayDisabled = (day) => minDay !== null && dayKey(day) < dayKey(minDay) || maxDay !== null && dayKey(day) > dayKey(maxDay);
+	const rangeValue = isRange && isDateRange(currentValue) ? currentValue : null;
+	const singleValue = !isRange && currentValue instanceof Date ? currentValue : null;
+	const hasValue = rangeValue !== null || singleValue !== null;
+	/** The day the grid starts on: the value's day (a range's start), else today, clamped. */
+	const initialActiveDay = () => {
+		return clampDay(toZonedParts(rangeValue?.start ?? singleValue ?? /* @__PURE__ */ new Date(), timeZone), minDay, maxDay);
+	};
+	const [activeDay, setActiveDay] = useState(() => initialActiveDay());
+	const [viewMonth, setViewMonth] = useState(() => ({
+		year: activeDay.year,
+		month: activeDay.month
+	}));
+	const [pendingStart, setPendingStart] = useState(null);
+	const [previewDay, setPreviewDay] = useState(null);
+	const [announcement, setAnnouncement] = useState("");
+	const shouldFocusDayRef = useRef(false);
+	const [lastShown, setLastShown] = useState(isShown);
+	if (lastShown !== isShown) {
+		setLastShown(isShown);
+		if (isShown) {
+			const next = initialActiveDay();
+			setActiveDay(next);
+			setViewMonth({
+				year: next.year,
+				month: next.month
+			});
+			shouldFocusDayRef.current = true;
+		} else {
+			setPendingStart(null);
+			setPreviewDay(null);
+			setAnnouncement("");
+		}
 	}
-	const handleToggle = useCallback(() => {
-		if (isDisabled) return;
-		setState((prev) => ({
-			...prev,
-			isOpen: !prev.isOpen
-		}));
-	}, [isDisabled]);
-	const handleClose = useCallback(() => {
-		setState((prev) => {
-			if (prev.isMonthSelectOpen || prev.isYearSelectOpen) return prev;
-			if (selectInteractionRef.current) {
-				selectInteractionRef.current = false;
-				return prev;
-			}
-			return {
-				...prev,
-				isOpen: false
-			};
-		});
-	}, []);
-	const handleMouseEnter = useCallback(() => {
-		setState((prev) => ({
-			...prev,
-			isHovered: true
-		}));
-	}, []);
-	const handleMouseLeave = useCallback(() => {
-		setState((prev) => ({
-			...prev,
-			isHovered: false
-		}));
-	}, []);
-	const handlePrevMonth = useCallback((e) => {
-		e.stopPropagation();
-		setState((prev) => {
-			const newDate = new Date(prev.viewDate);
-			newDate.setMonth(newDate.getMonth() - 1);
-			return {
-				...prev,
-				viewDate: newDate
-			};
-		});
-	}, []);
-	const handleNextMonth = useCallback((e) => {
-		e.stopPropagation();
-		setState((prev) => {
-			const newDate = new Date(prev.viewDate);
-			newDate.setMonth(newDate.getMonth() + 1);
-			return {
-				...prev,
-				viewDate: newDate
-			};
-		});
-	}, []);
-	const handleMonthChange = useCallback((option) => {
-		selectInteractionRef.current = true;
-		setState((prev) => {
-			const newDate = new Date(prev.viewDate);
-			newDate.setMonth(option.value);
-			return {
-				...prev,
-				viewDate: newDate,
-				isMonthSelectOpen: false
-			};
+	const dayButtonId = (day) => `${panelId}-day-${day.year}-${day.month}-${day.day}`;
+	const activeDayId = dayButtonId(activeDay);
+	useRetriedFocus(shouldFocusDayRef, isShown, () => controlRef.current?.ownerDocument.getElementById(activeDayId) ?? null, DATE_INPUT_FOCUS_RETRY_FRAMES);
+	/** Moves the active day (clamped into the bounds), follows it with the view, and focuses it. */
+	const moveActive = (next) => {
+		const clamped = clampDay(next, minDay, maxDay);
+		setActiveDay(clamped);
+		setViewMonth({
+			year: clamped.year,
+			month: clamped.month
 		});
-	}, []);
-	const handleYearChange = useCallback((option) => {
-		selectInteractionRef.current = true;
-		setState((prev) => {
-			const newDate = new Date(prev.viewDate);
-			newDate.setFullYear(option.value);
-			return {
-				...prev,
-				viewDate: newDate,
-				isYearSelectOpen: false
-			};
-		});
-	}, []);
-	const handleMonthSelectOpenChange = useCallback((isOpen) => {
-		setState((prev) => ({
-			...prev,
-			isMonthSelectOpen: isOpen,
-			isYearSelectOpen: false
-		}));
-	}, []);
-	const handleYearSelectOpenChange = useCallback((isOpen) => {
-		setState((prev) => ({
-			...prev,
-			isYearSelectOpen: isOpen,
-			isMonthSelectOpen: false
-		}));
-	}, []);
-	const handleDateSelect = useCallback((date) => {
-		if (onChange) onChange(date);
-		setState((prev) => ({
-			...prev,
-			isOpen: false,
-			isMonthSelectOpen: false,
-			isYearSelectOpen: false
-		}));
-	}, [onChange]);
-	const isDateDisabled = useCallback((date) => {
-		if (minDate && date < minDate) return true;
-		if (maxDate && date > maxDate) return true;
-		return false;
-	}, [minDate, maxDate]);
-	const calendarDays = useMemo(() => {
-		const year = state.viewDate.getFullYear();
-		const month = state.viewDate.getMonth();
-		const firstDayOfMonth = new Date(year, month, 1);
-		const lastDayOfMonth = new Date(year, month + 1, 0);
-		const startDay = firstDayOfMonth.getDay();
-		const daysInMonth = lastDayOfMonth.getDate();
-		const days = [];
-		const prevMonthLastDay = new Date(year, month, 0).getDate();
-		for (let i = startDay - 1; i >= 0; i--) {
-			const date = new Date(year, month - 1, prevMonthLastDay - i);
-			days.push({
-				date,
-				isCurrentMonth: false,
-				isToday: isSameDay(date, /* @__PURE__ */ new Date()),
-				isSelected: value ? isSameDay(date, value) : false,
-				isDisabled: isDateDisabled(date)
-			});
+		shouldFocusDayRef.current = true;
+	};
+	/** Changes the viewed month (header controls) and keeps the active day in it. */
+	const showMonth = (next) => {
+		setViewMonth(next);
+		const day = Math.min(activeDay.day, daysInMonth(next.year, next.month));
+		setActiveDay(clampDay({
+			...next,
+			day
+		}, minDay, maxDay));
+	};
+	const close = () => setOpen(false);
+	useRestoreFocusAfterOutsidePress({
+		isShown,
+		focusRef: controlRef,
+		insideRefs: [wrapperRef, panelRef],
+		focusScopeRefs: [panelRef]
+	});
+	const commit = (next) => setValue(next);
+	/** Chooses a day (Selection rules). */
+	const chooseDay = (day) => {
+		if (isDayDisabled(day)) return;
+		setActiveDay(day);
+		if (!isRange) {
+			if (!hasTime) {
+				commit(fromZonedParts({
+					...day,
+					hour: 0,
+					minute: 0
+				}, timeZone));
+				close();
+				return;
+			}
+			const time = singleValue === null ? {
+				hour: 0,
+				minute: 0
+			} : toZonedParts(singleValue, timeZone);
+			commit(clampInstant(fromZonedParts({
+				...day,
+				hour: time.hour,
+				minute: time.minute
+			}, timeZone), min, max));
+			return;
 		}
-		for (let day = 1; day <= daysInMonth; day++) {
-			const date = new Date(year, month, day);
-			days.push({
-				date,
-				isCurrentMonth: true,
-				isToday: isSameDay(date, /* @__PURE__ */ new Date()),
-				isSelected: value ? isSameDay(date, value) : false,
-				isDisabled: isDateDisabled(date)
-			});
+		if (pendingStart === null) {
+			setPendingStart(day);
+			setPreviewDay(day);
+			setAnnouncement("Start date selected. Choose the end date.");
+			return;
 		}
-		const remainingDays = 42 - days.length;
-		for (let i = 1; i <= remainingDays; i++) {
-			const date = new Date(year, month + 1, i);
-			days.push({
-				date,
-				isCurrentMonth: false,
-				isToday: isSameDay(date, /* @__PURE__ */ new Date()),
-				isSelected: value ? isSameDay(date, value) : false,
-				isDisabled: isDateDisabled(date)
+		const [first, last] = dayKey(day) < dayKey(pendingStart) ? [day, pendingStart] : [pendingStart, day];
+		setPendingStart(null);
+		setPreviewDay(null);
+		setAnnouncement("");
+		if (!hasTime) {
+			commit({
+				start: fromZonedParts({
+					...first,
+					hour: 0,
+					minute: 0
+				}, timeZone),
+				end: fromZonedParts({
+					...last,
+					hour: 0,
+					minute: 0
+				}, timeZone)
 			});
+			close();
+			return;
 		}
-		return days;
-	}, [
-		state.viewDate,
-		value,
-		isDateDisabled
-	]);
-	const textVariant = useMemo(() => {
-		if (value) return TextVariant.PRIMARY;
-		if (state.isOpen || state.isHovered) return TextVariant.SECONDARY;
-		return TextVariant.TERTIARY;
-	}, [
-		value,
-		state.isOpen,
-		state.isHovered
-	]);
-	const displayValue = useMemo(() => {
-		if (value) return format(value);
-		return placeholder;
-	}, [
-		value,
-		placeholder,
-		format
-	]);
-	const monthOptions = useMemo(() => Object.values(DateMonth).map((month, index) => ({
-		id: String(index),
-		label: DATE_MONTH_TO_LABEL[month],
-		value: index
-	})), []);
-	const yearOptions = useMemo(() => {
-		const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
-		const minYear = minDate ? minDate.getFullYear() : currentYear - 100;
-		const maxYear = maxDate ? maxDate.getFullYear() : currentYear + 10;
-		const years = [];
-		for (let year = maxYear; year >= minYear; year--) years.push({
-			id: String(year),
-			label: String(year),
-			value: year
+		const startTime = rangeValue === null ? {
+			hour: 0,
+			minute: 0
+		} : toZonedParts(rangeValue.start, timeZone);
+		const endTime = rangeValue === null ? {
+			hour: 23,
+			minute: 59
+		} : toZonedParts(rangeValue.end, timeZone);
+		const start = clampInstant(fromZonedParts({
+			...first,
+			hour: startTime.hour,
+			minute: startTime.minute
+		}, timeZone), min, max);
+		const end = clampInstant(fromZonedParts({
+			...last,
+			hour: endTime.hour,
+			minute: endTime.minute
+		}, timeZone), min, max);
+		commit({
+			start,
+			end: end.getTime() < start.getTime() ? start : end
 		});
-		return years;
-	}, [minDate, maxDate]);
-	const selectedMonthOption = useMemo(() => monthOptions.find((opt) => opt.value === state.viewDate.getMonth()), [monthOptions, state.viewDate]);
-	const selectedYearOption = useMemo(() => yearOptions.find((opt) => opt.value === state.viewDate.getFullYear()), [yearOptions, state.viewDate]);
-	const calendarBody = /* @__PURE__ */ jsxs(CalendarContainer, {
-		onClick: (e) => e.stopPropagation(),
-		children: [/* @__PURE__ */ jsxs(FlexWrapper, {
+	};
+	const handleGridKeyDown = (event) => {
+		const step = {
+			ArrowRight: () => addDays(activeDay, 1),
+			ArrowLeft: () => addDays(activeDay, -1),
+			ArrowDown: () => addDays(activeDay, 7),
+			ArrowUp: () => addDays(activeDay, -7),
+			Home: () => addDays(activeDay, -weekdayOf(activeDay)),
+			End: () => addDays(activeDay, 6 - weekdayOf(activeDay)),
+			PageDown: () => addMonths(activeDay, event.shiftKey ? 12 : 1),
+			PageUp: () => addMonths(activeDay, event.shiftKey ? -12 : -1)
+		}[event.key];
+		if (step === void 0) return;
+		event.preventDefault();
+		const next = step();
+		moveActive(next);
+		if (pendingStart !== null) setPreviewDay(clampDay(next, minDay, maxDay));
+	};
+	/** The field's keys: Enter, Space, ArrowDown and Alt+ArrowDown open the panel. */
+	const handleControlKeyDown = (event) => {
+		if (event.defaultPrevented || !isEditable || isShown) return;
+		if (event.key === "Enter" || event.key === " " || event.key === "ArrowDown") {
+			event.preventDefault();
+			setOpen(true);
+		}
+	};
+	const handleControlClick = () => {
+		if (!isEditable) return;
+		setOpen(!isShown);
+	};
+	/** Focus leaving both the field and the panel for another element closes the panel. */
+	const handleFocusOut = (event) => {
+		if (!isShownRef.current) return;
+		const next = event.relatedTarget;
+		if (next === null) return;
+		if (panelRef.current?.contains(next) || controlRef.current?.contains(next)) return;
+		close();
+	};
+	const clear = () => {
+		commit(null);
+		if (isShown) close();
+		controlRef.current?.focus();
+	};
+	const formatDate = (date) => (format ?? ((d) => defaultFormat(d, hasTime, timeZone)))(date);
+	const valueText = rangeValue !== null ? `${formatDate(rangeValue.start)} – ${formatDate(rangeValue.end)}` : singleValue !== null ? formatDate(singleValue) : null;
+	const zoneLabel = timeZone === void 0 ? null : zoneName(rangeValue?.start ?? singleValue ?? /* @__PURE__ */ new Date(), timeZone);
+	useDevWarning(!hasName, "[@galaxy-io/dls] DateInput has no accessible name. Pass `label`, wrap it in a labelled `Field`, or set `ariaLabel`. `placeholder` is not a name.");
+	const textSize = DATE_INPUT_SIZE_TO_TEXT_SIZE_MAP[size];
+	const shownPlaceholder = placeholder ?? (isRange ? "Select dates…" : "Select date…");
+	const isClearHidden = !hasValue || !isEditable;
+	const today = isShown ? toZonedParts(/* @__PURE__ */ new Date(), timeZone) : null;
+	const viewFirst = {
+		...viewMonth,
+		day: 1
+	};
+	const viewLast = {
+		...viewMonth,
+		day: daysInMonth(viewMonth.year, viewMonth.month)
+	};
+	const isMonthOutside = (month) => {
+		const first = {
+			...month,
+			day: 1
+		};
+		const last = {
+			...month,
+			day: daysInMonth(month.year, month.month)
+		};
+		return minDay !== null && dayKey(last) < dayKey(minDay) || maxDay !== null && dayKey(first) > dayKey(maxDay);
+	};
+	const previousMonth = addMonths(viewFirst, -1);
+	const nextMonth = addMonths(viewLast, 1);
+	const currentYear = today?.year ?? toZonedParts(/* @__PURE__ */ new Date(), timeZone).year;
+	const newestYear = Math.max(maxDay?.year ?? currentYear + DATE_INPUT_YEARS_AFTER, viewMonth.year);
+	const oldestYear = Math.min(minDay?.year ?? currentYear - DATE_INPUT_YEARS_BEFORE, viewMonth.year);
+	const yearOptions = [];
+	for (let year = newestYear; year >= oldestYear; year -= 1) yearOptions.push({
+		id: String(year),
+		label: String(year)
+	});
+	const monthOptions = MONTH_NAMES.map((name, month) => ({
+		id: String(month),
+		label: name,
+		...isMonthOutside({
+			year: viewMonth.year,
+			month
+		}) ? { isDisabled: true } : {}
+	}));
+	const valueStartDay = rangeValue !== null ? toZonedParts(rangeValue.start, timeZone) : singleValue !== null ? toZonedParts(singleValue, timeZone) : null;
+	const valueEndDay = rangeValue !== null ? toZonedParts(rangeValue.end, timeZone) : null;
+	const previewEnd = pendingStart !== null ? previewDay ?? pendingStart : null;
+	const [previewFirst, previewLast] = pendingStart !== null && previewEnd !== null ? dayKey(previewEnd) < dayKey(pendingStart) ? [previewEnd, pendingStart] : [pendingStart, previewEnd] : [null, null];
+	const renderDay = (day) => {
+		const key = dayKey(day);
+		const isOutside = day.month !== viewMonth.month || day.year !== viewMonth.year;
+		const isDisabledDay = isDayDisabled(day);
+		const isPendingStart = isSameDay(day, pendingStart);
+		const isValueEnd = isSameDay(day, valueStartDay) || isSameDay(day, valueEndDay);
+		const isInCommitted = pendingStart === null && valueStartDay !== null && valueEndDay !== null && key >= dayKey(valueStartDay) && key <= dayKey(valueEndDay);
+		const isInPreview = previewFirst !== null && previewLast !== null && key >= dayKey(previewFirst) && key <= dayKey(previewLast);
+		const isSelected = isPendingStart || pendingStart === null && isValueEnd;
+		const state = isSelected ? "SELECTED" : isDisabledDay ? "DISABLED" : isOutside ? "OUTSIDE" : "DEFAULT";
+		const isToday = isSameDay(day, today);
+		const isActive = isSameDay(day, activeDay);
+		const isBandStart = isInCommitted && valueStartDay !== null && key === dayKey(valueStartDay) || isInPreview && previewFirst !== null && key === dayKey(previewFirst);
+		const isBandEnd = isInCommitted && valueEndDay !== null && key === dayKey(valueEndDay) || isInPreview && previewLast !== null && key === dayKey(previewLast);
+		return /* @__PURE__ */ jsx(DayCell, {
+			role: "gridcell",
+			"aria-selected": isSelected || isInCommitted,
+			className: cx(isRange && isInCommitted && IN_RANGE_CSS, isRange && isInPreview && RANGE_PREVIEW_CSS, isRange && isBandStart && RANGE_START_CSS, isRange && isBandEnd && RANGE_END_CSS),
+			children: /* @__PURE__ */ jsx(DayButton, {
+				type: "button",
+				id: dayButtonId(day),
+				tabIndex: isActive ? 0 : -1,
+				"aria-label": fullDateLabel(day),
+				...isToday ? { "aria-current": "date" } : {},
+				...isDisabledDay ? { "aria-disabled": true } : {},
+				onClick: () => chooseDay(day),
+				onPointerEnter: () => {
+					if (pendingStart !== null && !isDisabledDay) setPreviewDay(day);
+				},
+				onFocus: () => {
+					if (!isActive) setActiveDay(day);
+				},
+				className: cx(DAY_STATE_TO_CSS_MAP[state], isToday && TODAY_CSS),
+				children: /* @__PURE__ */ jsx(Text, {
+					as: "span",
+					size: TextSize.BODY_SM,
+					variant: TextVariant.INHERIT,
+					weight: isToday ? TextWeight.MEDIUM : TextWeight.REGULAR,
+					isTabular: true,
+					children: day.day
+				})
+			})
+		}, key);
+	};
+	const days = monthGrid(viewMonth);
+	const weeks = Array.from({ length: 6 }, (_, week) => days.slice(week * 7, week * 7 + 7));
+	/** One time row: a label, the hour and minute selects, and the zone name. */
+	const renderTimeRow = (which) => {
+		const labelId = which === "single" ? timeLabelId : which === "start" ? startLabelId : endLabelId;
+		const labelText = which === "single" ? "Time" : which === "start" ? "Start" : "End";
+		const instant = which === "single" ? singleValue : which === "start" ? rangeValue?.start : rangeValue?.end;
+		const isTimeDisabled = instant === null || instant === void 0;
+		const parts = isTimeDisabled ? null : toZonedParts(instant, timeZone);
+		const setTime = (hour, minute) => {
+			if (isTimeDisabled) return;
+			const next = clampInstant(fromZonedParts({
+				...toZonedParts(instant, timeZone),
+				hour,
+				minute
+			}, timeZone), min, max);
+			if (which === "single") {
+				commit(next);
+				return;
+			}
+			if (rangeValue === null) return;
+			if (which === "start") commit({
+				start: next,
+				end: next.getTime() > rangeValue.end.getTime() ? next : rangeValue.end
+			});
+			else commit({
+				start: rangeValue.start,
+				end: next.getTime() < rangeValue.start.getTime() ? rangeValue.start : next
+			});
+		};
+		const hourId = `${labelId}-hour`;
+		const minuteId = `${labelId}-minute`;
+		return /* @__PURE__ */ jsxs(Flex, {
 			alignItems: AlignItems.CENTER,
-			justifyContent: JustifyContent.SPACE_BETWEEN,
-			padding: "0 0 12px 0",
+			gap: 4,
 			children: [
-				/* @__PURE__ */ jsx(FlexWrapper, {
-					onClick: handlePrevMonth,
-					children: /* @__PURE__ */ jsx(Icon, {
-						component: CaretLeftIcon,
-						size: 16,
-						variant: IconVariant.SECONDARY
+				/* @__PURE__ */ jsx(Box, {
+					minWidth: 40,
+					children: /* @__PURE__ */ jsx(Text, {
+						as: "span",
+						id: labelId,
+						size: TextSize.BODY_SM,
+						variant: TextVariant.SECONDARY,
+						children: labelText
 					})
 				}),
-				/* @__PURE__ */ jsxs(FlexWrapper, {
-					alignItems: AlignItems.CENTER,
-					gap: 4,
-					onClick: (e) => e.stopPropagation(),
-					onMouseDown: (e) => e.stopPropagation(),
-					children: [/* @__PURE__ */ jsx(SelectInput, {
-						variant,
-						size: InputSize.SMALL,
-						options: monthOptions,
-						value: selectedMonthOption,
-						onChange: handleMonthChange,
-						isOpen: state.isMonthSelectOpen,
-						onOpenChange: handleMonthSelectOpenChange,
-						width: 120
-					}), /* @__PURE__ */ jsx(SelectInput, {
-						variant,
-						size: InputSize.SMALL,
-						options: yearOptions,
-						value: selectedYearOption,
-						onChange: handleYearChange,
-						isOpen: state.isYearSelectOpen,
-						onOpenChange: handleYearSelectOpenChange,
-						width: 70
-					})]
-				}),
-				/* @__PURE__ */ jsx(FlexWrapper, {
-					onClick: handleNextMonth,
-					children: /* @__PURE__ */ jsx(Icon, {
-						component: CaretRightIcon,
-						size: 16,
-						variant: IconVariant.SECONDARY
+				/* @__PURE__ */ jsx(Box, {
+					width: DATE_INPUT_TIME_SELECT_WIDTH,
+					children: /* @__PURE__ */ jsx(SelectInput, {
+						id: hourId,
+						ariaLabel: "Hour",
+						"aria-labelledby": `${labelId} ${hourId}`,
+						options: HOUR_OPTIONS,
+						value: parts === null ? null : pad2(parts.hour),
+						onChange: (next) => {
+							if (next !== null && parts !== null) setTime(Number(next), parts.minute);
+						},
+						size: SelectInputSize.SMALL,
+						variant: SelectInputVariant.SECONDARY,
+						isDisabled: isTimeDisabled,
+						placeholder: "--",
+						fillWidth: true
 					})
-				})
-			]
-		}), /* @__PURE__ */ jsxs(GridWrapper, {
-			columns: 7,
-			gap: 2,
-			children: [Object.values(DateDay).map((day) => /* @__PURE__ */ jsx(FlexWrapper, {
-				alignItems: AlignItems.CENTER,
-				justifyContent: JustifyContent.CENTER,
-				height: 32,
-				children: /* @__PURE__ */ jsx(Text, {
-					size: TextSize.CAPTION,
+				}),
+				/* @__PURE__ */ jsx(Text, {
+					as: "span",
+					size: TextSize.BODY_SM,
 					variant: TextVariant.TERTIARY,
-					weight: TextWeight.MEDIUM,
-					children: DATE_DAY_TO_LABEL[day].toUpperCase()
-				})
-			}, day)), calendarDays.map((day, index) => /* @__PURE__ */ jsx(DayCell, {
-				$isSelected: day.isSelected,
-				$isToday: day.isToday,
-				$isCurrentMonth: day.isCurrentMonth,
-				$isDisabled: day.isDisabled,
-				onClick: () => !day.isDisabled && handleDateSelect(day.date),
-				disabled: day.isDisabled,
-				children: /* @__PURE__ */ jsx(Text, {
+					"aria-hidden": true,
+					children: ":"
+				}),
+				/* @__PURE__ */ jsx(Box, {
+					width: DATE_INPUT_TIME_SELECT_WIDTH,
+					children: /* @__PURE__ */ jsx(SelectInput, {
+						id: minuteId,
+						ariaLabel: "Minute",
+						"aria-labelledby": `${labelId} ${minuteId}`,
+						options: MINUTE_OPTIONS,
+						value: parts === null ? null : pad2(parts.minute),
+						onChange: (next) => {
+							if (next !== null && parts !== null) setTime(parts.hour, Number(next));
+						},
+						size: SelectInputSize.SMALL,
+						variant: SelectInputVariant.SECONDARY,
+						isDisabled: isTimeDisabled,
+						placeholder: "--",
+						fillWidth: true
+					})
+				}),
+				zoneLabel !== null && /* @__PURE__ */ jsx(Text, {
+					as: "span",
 					size: TextSize.BODY_SM,
-					variant: day.isSelected ? TextVariant.PRIMARY : TextVariant.SECONDARY,
-					weight: day.isSelected || day.isToday ? TextWeight.MEDIUM : TextWeight.REGULAR,
-					children: day.date.getDate()
+					variant: TextVariant.TERTIARY,
+					children: zoneLabel
 				})
-			}, index))]
-		})]
-	});
-	return /* @__PURE__ */ jsxs(FlexWrapper, {
-		direction: FlexDirection.COLUMN,
-		gap: 4,
-		fillWidth,
-		children: [
-			label && /* @__PURE__ */ jsx(InputLabel, {
-				label,
-				isRequired
-			}),
-			/* @__PURE__ */ jsx(Dropdown, {
-				variant: INPUT_VARIANT_TO_DROPDOWN_VARIANT[variant],
-				body: calendarBody,
-				isOpen: state.isOpen,
-				onClose: handleClose,
-				noPadding: true,
-				fillWidth,
-				children: /* @__PURE__ */ jsxs(StyledDateInput, {
-					$size: size,
-					$variant: variant,
-					$isActive: state.isOpen,
-					$isDisabled: isDisabled,
-					$isError: !!error,
-					$width: width,
-					$fillWidth: fillWidth,
-					onClick: handleToggle,
-					onMouseEnter: handleMouseEnter,
-					onMouseLeave: handleMouseLeave,
-					role: "button",
-					tabIndex: isDisabled ? -1 : 0,
-					"aria-haspopup": "dialog",
-					"aria-expanded": state.isOpen,
-					"aria-label": value ? displayValue : placeholder,
+			]
+		}, which);
+	};
+	const presetList = presets;
+	const hasPresets = presetList !== void 0 && presetList.length > 0;
+	const isPresetDisabled = (preset) => {
+		return (isDateRange(preset.value) ? [preset.value.start, preset.value.end] : [preset.value]).some((instant) => isDayDisabled(toZonedParts(instant, timeZone)));
+	};
+	const body = /* @__PURE__ */ jsx(FieldContext.Provider, {
+		value: null,
+		children: /* @__PURE__ */ jsxs(PanelBody, {
+			onBlur: handleFocusOut,
+			children: [
+				hasPresets && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(PresetList, {
+					role: "group",
+					"aria-label": "Presets",
+					children: presetList.map((preset) => {
+						const isPresetSelected = isSameValue(currentValue, preset.value);
+						const isBlocked = isPresetDisabled(preset);
+						return /* @__PURE__ */ jsx(PresetButton, {
+							type: "button",
+							"aria-pressed": isPresetSelected,
+							disabled: isBlocked,
+							onClick: () => {
+								commit(preset.value);
+								close();
+							},
+							className: cx(isPresetSelected && SELECTED_PRESET_CSS),
+							children: /* @__PURE__ */ jsx(Text, {
+								as: "span",
+								size: TextSize.BODY_SM,
+								variant: isBlocked ? TextVariant.DISABLED : isPresetSelected ? TextVariant.PRIMARY : TextVariant.SECONDARY,
+								children: preset.label
+							})
+						}, preset.label);
+					})
+				}), /* @__PURE__ */ jsx(Divider, { orientation: Orientation.VERTICAL })] }),
+				/* @__PURE__ */ jsxs(Flex, {
+					direction: FlexDirection.COLUMN,
+					gap: 12,
 					children: [
-						/* @__PURE__ */ jsx(Text, {
-							variant: textVariant,
-							size: getInputTextSize(size),
-							isEllipsis: true,
-							cursor: !isDisabled ? "pointer" : "not-allowed",
-							children: displayValue
+						/* @__PURE__ */ jsxs(Flex, {
+							alignItems: AlignItems.CENTER,
+							gap: 4,
+							children: [
+								/* @__PURE__ */ jsx(Button, {
+									variant: ButtonVariant.TERTIARY,
+									size: ButtonSize.SMALL,
+									leading: /* @__PURE__ */ jsx(Icon, {
+										component: CaretLeftIcon,
+										size: MONTH_CARET_PX,
+										variant: IconVariant.INHERIT
+									}),
+									ariaLabel: "Previous month",
+									className: MONTH_CARET_BUTTON_CSS,
+									isDisabled: isMonthOutside(previousMonth),
+									onClick: () => showMonth({
+										year: previousMonth.year,
+										month: previousMonth.month
+									})
+								}),
+								/* @__PURE__ */ jsx(FlexItem, {
+									grow: 1,
+									minWidth: 0,
+									children: /* @__PURE__ */ jsx(SelectInput, {
+										ariaLabel: "Month",
+										options: monthOptions,
+										value: String(viewMonth.month),
+										onChange: (next) => {
+											if (next !== null) showMonth({
+												year: viewMonth.year,
+												month: Number(next)
+											});
+										},
+										size: SelectInputSize.SMALL,
+										isGhost: true,
+										fillWidth: true
+									})
+								}),
+								/* @__PURE__ */ jsx(Box, {
+									width: DATE_INPUT_YEAR_SELECT_WIDTH,
+									children: /* @__PURE__ */ jsx(SelectInput, {
+										ariaLabel: "Year",
+										options: yearOptions,
+										value: String(viewMonth.year),
+										onChange: (next) => {
+											if (next === null) return;
+											const target = clampDay({
+												year: Number(next),
+												month: viewMonth.month,
+												day: 1
+											}, minDay, maxDay);
+											showMonth({
+												year: target.year,
+												month: target.month
+											});
+										},
+										size: SelectInputSize.SMALL,
+										isGhost: true,
+										fillWidth: true
+									})
+								}),
+								/* @__PURE__ */ jsx(Button, {
+									variant: ButtonVariant.TERTIARY,
+									size: ButtonSize.SMALL,
+									leading: /* @__PURE__ */ jsx(Icon, {
+										component: CaretRightIcon,
+										size: MONTH_CARET_PX,
+										variant: IconVariant.INHERIT
+									}),
+									ariaLabel: "Next month",
+									className: MONTH_CARET_BUTTON_CSS,
+									isDisabled: isMonthOutside(nextMonth),
+									onClick: () => showMonth({
+										year: nextMonth.year,
+										month: nextMonth.month
+									})
+								})
+							]
 						}),
-						/* @__PURE__ */ jsx(Spacing, { left: 8 }),
-						/* @__PURE__ */ jsx(Icon, {
-							component: CalendarBlankIcon,
-							size: getInputIconSize(size),
-							variant: state.isOpen || state.isHovered ? IconVariant.SECONDARY : IconVariant.TERTIARY
-						})
+						/* @__PURE__ */ jsx(VisuallyHidden, {
+							as: "h2",
+							id: headingId,
+							"aria-live": "polite",
+							children: `${MONTH_NAMES[viewMonth.month] ?? ""} ${viewMonth.year}`
+						}),
+						/* @__PURE__ */ jsxs(GridTable, {
+							role: "grid",
+							"aria-labelledby": headingId,
+							onKeyDown: handleGridKeyDown,
+							children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: WEEKDAY_NAMES.map((weekday) => /* @__PURE__ */ jsx(WeekdayCell, {
+								scope: "col",
+								abbr: weekday,
+								children: /* @__PURE__ */ jsx(Text, {
+									as: "span",
+									size: TextSize.CAPTION,
+									weight: TextWeight.MEDIUM,
+									variant: TextVariant.TERTIARY,
+									transform: TextTransform.UPPERCASE,
+									children: weekday.slice(0, 3)
+								})
+							}, weekday)) }) }), /* @__PURE__ */ jsx("tbody", { children: weeks.map((week) => /* @__PURE__ */ jsx("tr", { children: week.map(renderDay) }, dayKey(week[0] ?? viewFirst))) })]
+						}),
+						hasTime && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Divider, {}), /* @__PURE__ */ jsx(Flex, {
+							direction: FlexDirection.COLUMN,
+							gap: 8,
+							children: isRange ? /* @__PURE__ */ jsxs(Fragment$1, { children: [renderTimeRow("start"), renderTimeRow("end")] }) : renderTimeRow("single")
+						})] })
 					]
+				}),
+				/* @__PURE__ */ jsx(StatusRegion, {
+					role: "status",
+					"aria-live": "polite",
+					children: announcement
 				})
+			]
+		})
+	});
+	const labelId = field?.labelId;
+	return /* @__PURE__ */ jsxs(Wrapper, {
+		ref: wrapperRef,
+		className: cx(isRange ? RANGE_WIDTH_CSS : SINGLE_WIDTH_CSS, fillWidth && FILL_WIDTH_CSS, isRoot ? className : void 0),
+		...rootStyle(isRoot, style),
+		children: [/* @__PURE__ */ jsx(Popover, {
+			ref: panelRef,
+			trigger: PopoverTrigger.MANUAL,
+			role: PopoverRole.DIALOG,
+			variant: isGhost ? PopoverVariant.BASE : DATE_INPUT_VARIANT_TO_POPOVER_VARIANT_MAP[variant],
+			isOpen: isShown,
+			onOpenChange: setOpen,
+			isDisabled: !isEditable,
+			id: panelId,
+			ariaLabel: isRange ? "Choose dates" : "Choose date",
+			body: /* @__PURE__ */ jsx(BareFieldContext.Provider, {
+				value: false,
+				children: body
 			}),
-			error && /* @__PURE__ */ jsx(Text, {
-				variant: TextVariant.ERROR,
-				size: TextSize.BODY_SM,
-				children: error
+			children: /* @__PURE__ */ jsx(Control, {
+				ref: mergedRef,
+				id: controlId,
+				role: "combobox",
+				tabIndex: isDisabled ? -1 : 0,
+				"aria-labelledby": labelId,
+				"aria-label": ariaLabel,
+				"aria-describedby": describedBy,
+				"aria-invalid": isInvalid ? true : void 0,
+				"aria-required": isRequiredState ? true : void 0,
+				"aria-readonly": isReadOnly ? true : void 0,
+				"aria-disabled": isDisabled ? true : void 0,
+				onKeyDown: handleControlKeyDown,
+				onClick: handleControlClick,
+				onBlur: handleFocusOut,
+				...rest,
+				className: cx(isGhost ? GHOST_CSS : DATE_INPUT_VARIANT_TO_CSS_MAP[variant], DATE_INPUT_SIZE_TO_CSS_MAP[size], isClearable && DATE_INPUT_SIZE_TO_CLEARABLE_CSS_MAP[size], isEditable && !isInvalid && (isGhost ? GHOST_HOVER_CSS : DATE_INPUT_VARIANT_TO_HOVER_CSS_MAP[variant]), !isDisabled && FOCUS_CSS, isShown && OPEN_CSS, isInvalid && !isDisabled && ERROR_CSS, isDisabled && DISABLED_CSS, isReadOnly && READ_ONLY_CSS, isBare && "gx-bareField-BARE_FIELD_CSS-b1memido"),
+				children: /* @__PURE__ */ jsxs(ValueDisplay, { children: [/* @__PURE__ */ jsx(Text, {
+					as: "span",
+					size: textSize,
+					variant: isDisabled ? TextVariant.DISABLED : valueText === null ? TextVariant.TERTIARY : TextVariant.PRIMARY,
+					lineClamp: 1,
+					isTabular: valueText !== null,
+					children: valueText ?? shownPlaceholder
+				}), zoneLabel !== null && /* @__PURE__ */ jsx(ZoneName, { children: /* @__PURE__ */ jsx(Text, {
+					as: "span",
+					size: textSize,
+					variant: isDisabled ? TextVariant.DISABLED : TextVariant.TERTIARY,
+					children: zoneLabel
+				}) })] })
 			})
-		]
+		}), /* @__PURE__ */ jsxs(Trailing, {
+			className: DATE_INPUT_SIZE_TO_TRAILING_CSS_MAP[size],
+			children: [isClearable && /* @__PURE__ */ jsx(ClearSlot, {
+				className: cx(isClearHidden && CLEAR_HIDDEN_CSS),
+				children: /* @__PURE__ */ jsx(Button, {
+					variant: ButtonVariant.TERTIARY,
+					size: DATE_INPUT_SIZE_TO_BUTTON_SIZE_MAP[size],
+					icon: XIcon,
+					ariaLabel: "Clear",
+					onClick: clear,
+					className: cx(size === "X_SMALL" && "gx-innerButton-X_SMALL_INNER_BUTTON_CSS-x1ep0pcd")
+				})
+			}), /* @__PURE__ */ jsx(Icon, {
+				component: CalendarBlankIcon,
+				size: DATE_INPUT_SIZE_TO_ICON_PX_MAP[size],
+				variant: isDisabled ? IconVariant.DISABLED : IconVariant.SECONDARY,
+				"aria-hidden": true
+			})]
+		})]
 	});
-};
-function isSameDay(date1, date2) {
-	return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate();
 }
+/** Hours "00"–"23". */
+var HOUR_OPTIONS = Array.from({ length: 24 }, (_, hour) => ({
+	id: pad2(hour),
+	label: pad2(hour)
+}));
+/** Minutes "00"–"59". */
+var MINUTE_OPTIONS = Array.from({ length: 60 }, (_, minute) => ({
+	id: pad2(minute),
+	label: pad2(minute)
+}));
+/** Choose a date, a date and time, or a range of either, in a field that opens a calendar. */
+var DateInput = forwardRef(function DateInput(props, ref) {
+	const { label, error, isRequired = false, size = "MEDIUM", fillWidth = false } = props;
+	const { id, className, style } = props;
+	const ownField = useOwnField({
+		componentName: "DateInput",
+		label,
+		error,
+		isRequired,
+		size: DATE_INPUT_SIZE_TO_FIELD_SIZE_MAP[size],
+		id,
+		className,
+		style,
+		rootClassName: fillWidth && FILL_WIDTH_CSS
+	});
+	if (ownField !== null) return /* @__PURE__ */ jsx(Field, {
+		...ownField,
+		children: /* @__PURE__ */ jsx(DateInputFrame, {
+			dateProps: props,
+			forwardedRef: ref,
+			isRoot: false
+		})
+	});
+	return /* @__PURE__ */ jsx(DateInputFrame, {
+		dateProps: props,
+		forwardedRef: ref,
+		isRoot: true
+	});
+});
+DateInput.displayName = "DateInput";
 //#endregion
-export { DateInput as default, defaultDateFormat };
+export { DateInputSize, DateInputVariant, DateInput as default };