@lolmath/ui 9.1.2 → 9.3.0

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { Autocomplete, Autocomplete as Autocomplete$1, AutocompleteContext, AutocompleteStateContext, Breadcrumb as Breadcrumb$1, Breadcrumbs as Breadcrumbs$1, Button as Button$1, Cell, CheckboxButton as CheckboxButton$1, CheckboxField as CheckboxField$1, Collection, Column, ColumnResizer, Dialog, Dialog as Dialog$1, DialogTrigger, Disclosure as Disclosure$1, DisclosureGroup as DisclosureGroup$1, DisclosurePanel as DisclosurePanel$1, FieldError, GridLayout, Group, Header, Heading as Heading$1, Input, Label as Label$1, Link, ListBox, ListBoxItem, ListBoxItem as ListBoxItem$1, ListLayout, ListLayout as ListLayout$1, Menu as Menu$1, MenuItem as MenuItem$1, MenuSection as MenuSection$1, MenuTrigger as MenuTrigger$1, Modal as Modal$1, ModalOverlay, NumberField as NumberField$1, OverlayArrow, Popover as Popover$1, Popover as UnstyledPopover, ProgressBar as ProgressBar$1, RadioButton as RadioButton$1, RadioField as RadioField$1, RadioGroup as RadioGroup$1, ResizableTableContainer, RouterProvider, Row, SearchField as SearchField$1, Select, Select as Select$1, SelectValue, SelectValue as SelectValue$1, SelectionIndicator, Separator, Size, Slider as Slider$1, SliderFill, SliderOutput as SliderOutput$1, SliderThumb, SliderTrack, SubmenuTrigger as SubmenuTrigger$1, SwitchButton as SwitchButton$1, SwitchField as SwitchField$1, Tab as Tab$1, TabList as TabList$1, TabPanel as TabPanel$1, Table as Table$1, TableBody as TableBody$1, TableFooter as TableFooter$1, TableHeader, TableLayout, Tabs as Tabs$1, Tag as Tag$1, TagGroup as TagGroup$1, TagList as TagList$1, Text as Text$1, TextArea as TextArea$1, TextField as TextField$1, ToggleButton as ToggleButton$1, ToggleButtonGroup as ToggleButtonGroup$1, Toolbar as Toolbar$1, Tree as Tree$1, TreeItem as TreeItem$1, TreeItemContent as TreeItemContent$1, TreeLoadMoreItem as TreeLoadMoreItem$1, Virtualizer, Virtualizer as Virtualizer$1, WaterfallLayout, composeRenderProps, useFilter, useFilter as useFilter$1 } from "react-aria-components";
+import { Autocomplete, Autocomplete as Autocomplete$1, AutocompleteContext, AutocompleteStateContext, Breadcrumb as Breadcrumb$1, Breadcrumbs as Breadcrumbs$1, Button as Button$1, Calendar as Calendar$1, CalendarCell as CalendarCell$1, CalendarGrid as CalendarGrid$1, CalendarGridBody, CalendarGridHeader as CalendarGridHeader$1, CalendarHeaderCell as CalendarHeaderCell$1, CalendarHeading, CalendarMonthPicker, CalendarYearPicker, Cell, CheckboxButton as CheckboxButton$1, CheckboxField as CheckboxField$1, Collection, Column, ColumnResizer, DateField as DateField$1, DateInput as DateInput$1, DatePicker as DatePicker$1, DateRangePicker as DateRangePicker$1, DateSegment as DateSegment$1, Dialog, Dialog as Dialog$1, DialogTrigger, Disclosure as Disclosure$1, DisclosureGroup as DisclosureGroup$1, DisclosurePanel as DisclosurePanel$1, FieldError, GridLayout, Group as Group$1, Header, Heading as Heading$1, Input, Label as Label$1, Link, ListBox, ListBoxItem, ListBoxItem as ListBoxItem$1, ListLayout, ListLayout as ListLayout$1, Menu as Menu$1, MenuItem as MenuItem$1, MenuSection as MenuSection$1, MenuTrigger as MenuTrigger$1, Modal as Modal$1, ModalOverlay, NumberField as NumberField$1, OverlayArrow, Popover as Popover$1, Popover as UnstyledPopover, ProgressBar as ProgressBar$1, RadioButton as RadioButton$1, RadioField as RadioField$1, RadioGroup as RadioGroup$1, RangeCalendar as RangeCalendar$1, ResizableTableContainer, RouterProvider, Row, SearchField as SearchField$1, Select, Select as Select$1, SelectValue, SelectValue as SelectValue$1, SelectionIndicator, Separator, Size, Slider as Slider$1, SliderFill, SliderOutput as SliderOutput$1, SliderThumb, SliderTrack, SubmenuTrigger as SubmenuTrigger$1, SwitchButton as SwitchButton$1, SwitchField as SwitchField$1, Tab as Tab$1, TabList as TabList$1, TabPanel as TabPanel$1, Table as Table$1, TableBody as TableBody$1, TableFooter as TableFooter$1, TableHeader, TableLayout, Tabs as Tabs$1, Tag as Tag$1, TagGroup as TagGroup$1, TagList as TagList$1, Text as Text$1, TextArea as TextArea$1, TextField as TextField$1, TimeField as TimeField$1, ToggleButton as ToggleButton$1, ToggleButtonGroup as ToggleButtonGroup$1, Toolbar as Toolbar$1, Tree as Tree$1, TreeItem as TreeItem$1, TreeItemContent as TreeItemContent$1, TreeLoadMoreItem as TreeLoadMoreItem$1, Virtualizer, Virtualizer as Virtualizer$1, WaterfallLayout, composeRenderProps, useFilter, useFilter as useFilter$1 } from "react-aria-components";
 import { cva, cx } from "cva";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React, { createElement, useMemo } from "react";
@@ -112,10 +112,514 @@ function ButtonLink({ children, className, preset = "secondary", shape = "normal
 	});
 }
 //#endregion
+//#region src/components/typography/text.module.css
+var text_module_default = {
+	"text": "_text_1tvjr_2",
+	"label": "_label_1tvjr_6",
+	"stat": "_stat_1tvjr_13",
+	"largeNumber": "_largeNumber_1tvjr_20",
+	"sm": "_sm_1tvjr_27",
+	"base": "_base_1tvjr_34",
+	"md": "_md_1tvjr_41",
+	"lg": "_lg_1tvjr_48",
+	"grey100": "_grey100_1tvjr_55",
+	"grey150": "_grey150_1tvjr_59",
+	"gold100": "_gold100_1tvjr_63"
+};
+//#endregion
+//#region src/components/typography/text.tsx
+const text = cva({
+	base: text_module_default.text,
+	variants: {
+		color: {
+			grey100: text_module_default.grey100,
+			grey150: text_module_default.grey150,
+			gold100: text_module_default.gold100
+		},
+		preset: {
+			sm: text_module_default.sm,
+			base: text_module_default.base,
+			md: text_module_default.md,
+			lg: text_module_default.lg,
+			label: text_module_default.label,
+			largeNumber: text_module_default.largeNumber,
+			stat: text_module_default.stat
+		}
+	}
+});
+function Text({ preset = "base", color = "grey100", className, ...rest }) {
+	return /* @__PURE__ */ jsx(Text$1, {
+		className: text({
+			preset,
+			color,
+			className
+		}),
+		...rest
+	});
+}
+function Label({ preset = "sm", color = "grey100", className, ...rest }) {
+	return /* @__PURE__ */ jsx(Label$1, {
+		className: text({
+			preset,
+			color,
+			className
+		}),
+		...rest
+	});
+}
+//#endregion
+//#region src/components/select/select.module.css
+var select_module_default = {
+	"button": "_button_2pv2a_2",
+	"small": "_small_2pv2a_47",
+	"medium": "_medium_2pv2a_51",
+	"large": "_large_2pv2a_55",
+	"singleSelect": "_singleSelect_2pv2a_60",
+	"multiSelect": "_multiSelect_2pv2a_67",
+	"listBox": "_listBox_2pv2a_73",
+	"item": "_item_2pv2a_80",
+	"focus": "_focus_2pv2a_97",
+	"selected": "_selected_2pv2a_106",
+	"popover": "_popover_2pv2a_113",
+	"emptyList": "_emptyList_2pv2a_119"
+};
+//#endregion
+//#region src/components/select/select.tsx
+const select = cva({
+	base: select_module_default.button,
+	variants: {
+		size: {
+			small: select_module_default.small,
+			medium: select_module_default.medium,
+			large: select_module_default.large
+		},
+		selectionMode: {
+			single: select_module_default.singleSelect,
+			multiple: select_module_default.multiSelect
+		}
+	}
+});
+function SelectButton({ className, size = "medium", ...props }) {
+	return /* @__PURE__ */ jsx(Button$1, {
+		...props,
+		className: composeRenderProps(className, (className, buttonValues) => select({
+			...buttonValues,
+			size,
+			className,
+			selectionMode: "single"
+		}))
+	});
+}
+function SelectPopover({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Popover$1, {
+		...props,
+		className: composeRenderProps(className, (className) => cx(className, select_module_default.popover))
+	});
+}
+function SelectListBox({ className, emptyList = "No results found", ...props }) {
+	return /* @__PURE__ */ jsx(ListBox, {
+		...props,
+		renderEmptyState: () => /* @__PURE__ */ jsx("div", {
+			className: text({
+				color: "grey150",
+				preset: "base",
+				className: select_module_default.emptyList
+			}),
+			children: emptyList
+		}),
+		className: composeRenderProps(className, (className) => cx(className, select_module_default.listBox))
+	});
+}
+const item = cva({
+	base: select_module_default.item,
+	variants: {
+		isSelected: { true: select_module_default.selected },
+		isFocused: { true: select_module_default.focus }
+	}
+});
+function SelectListBoxItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(ListBoxItem$1, {
+		...props,
+		className: composeRenderProps(className, (className, values) => item({
+			...values,
+			className
+		}))
+	});
+}
+function SelectVirtualizer(props) {
+	return /* @__PURE__ */ jsx(Virtualizer$1, {
+		layout: ListLayout$1,
+		layoutOptions: {
+			padding: 0,
+			gap: 0,
+			rowHeight: 31,
+			headingHeight: 35
+		},
+		...props
+	});
+}
+//#endregion
+//#region src/components/calendar/calendar.module.css
+var calendar_module_default = {
+	"calendar": "_calendar_dpi4c_2",
+	"rangeCalendar": "_rangeCalendar_dpi4c_3",
+	"months": "_months_dpi4c_28",
+	"month": "_month_dpi4c_16",
+	"nav": "_nav_dpi4c_39",
+	"pickerGroup": "_pickerGroup_dpi4c_46",
+	"chevronFlipped": "_chevronFlipped_dpi4c_54",
+	"heading": "_heading_dpi4c_58",
+	"grid": "_grid_dpi4c_70",
+	"gridHeader": "_gridHeader_dpi4c_97",
+	"headerCell": "_headerCell_dpi4c_101",
+	"cell": "_cell_dpi4c_82"
+};
+//#endregion
+//#region src/components/calendar/calendar.tsx
+function CalendarChevron({ flip }) {
+	return /* @__PURE__ */ jsx("svg", {
+		width: "10",
+		height: "10",
+		viewBox: "0 0 10 10",
+		fill: "none",
+		"aria-hidden": "true",
+		className: flip ? calendar_module_default.chevronFlipped : void 0,
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M7 1L3 5L7 9",
+			stroke: "currentColor",
+			strokeWidth: "1.5",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
+}
+function CalendarNavButton({ slot }) {
+	return /* @__PURE__ */ jsx(Button, {
+		preset: "text",
+		shape: "round",
+		size: "small",
+		slot,
+		"aria-label": slot === "previous" ? "Previous" : "Next",
+		children: /* @__PURE__ */ jsx(CalendarChevron, { flip: slot === "next" })
+	});
+}
+/**
+* Lets the user jump straight to a month, via a hextech-styled `Select`
+* fed by the calendar's own `CalendarMonthPicker`/`CalendarYearPicker`
+* render props (`aria-label`, `value`, `onChange`, `items`).
+*/
+function CalendarMonthYearNav() {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CalendarMonthPicker, { children: ({ "aria-label": ariaLabel, value, onChange, items }) => /* @__PURE__ */ jsxs(Select, {
+		"aria-label": ariaLabel,
+		selectedKey: value,
+		onSelectionChange: onChange,
+		children: [/* @__PURE__ */ jsx(SelectButton, {
+			size: "small",
+			style: { minWidth: "6.5rem" },
+			children: /* @__PURE__ */ jsx(SelectValue, {})
+		}), /* @__PURE__ */ jsx(SelectPopover, { children: /* @__PURE__ */ jsx(SelectListBox, {
+			items,
+			children: (item) => /* @__PURE__ */ jsx(SelectListBoxItem, {
+				id: item.id,
+				children: item.formatted
+			})
+		}) })]
+	}) }), /* @__PURE__ */ jsx(CalendarYearPicker, { children: ({ "aria-label": ariaLabel, value, onChange, items }) => /* @__PURE__ */ jsxs(Select, {
+		"aria-label": ariaLabel,
+		selectedKey: value,
+		onSelectionChange: onChange,
+		children: [/* @__PURE__ */ jsx(SelectButton, {
+			size: "small",
+			style: { minWidth: "5rem" },
+			children: /* @__PURE__ */ jsx(SelectValue, {})
+		}), /* @__PURE__ */ jsx(SelectPopover, { children: /* @__PURE__ */ jsx(SelectListBox, {
+			items,
+			children: (item) => /* @__PURE__ */ jsx(SelectListBoxItem, {
+				id: item.id,
+				children: item.formatted
+			})
+		}) })]
+	}) })] });
+}
+function CalendarHeaderCell({ className, ...props }) {
+	return /* @__PURE__ */ jsx(CalendarHeaderCell$1, {
+		...props,
+		className: cx(calendar_module_default.headerCell, className)
+	});
+}
+function CalendarGridHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx(CalendarGridHeader$1, {
+		...props,
+		className: cx(calendar_module_default.gridHeader, className)
+	});
+}
+function CalendarCell({ className, ...props }) {
+	return /* @__PURE__ */ jsx(CalendarCell$1, {
+		...props,
+		className: composeRenderProps(className, (className) => cx(calendar_module_default.cell, className))
+	});
+}
+function CalendarGrid({ className, weekdayStyle = "narrow", ...props }) {
+	return /* @__PURE__ */ jsxs(CalendarGrid$1, {
+		...props,
+		weekdayStyle,
+		className: cx(calendar_module_default.grid, className),
+		children: [/* @__PURE__ */ jsx(CalendarGridHeader, { children: (day) => /* @__PURE__ */ jsx(CalendarHeaderCell, { children: day }) }), /* @__PURE__ */ jsx(CalendarGridBody, { children: (date) => /* @__PURE__ */ jsx(CalendarCell, { date }) })]
+	});
+}
+function Calendar({ header = "heading", className, ...props }) {
+	const months = props.visibleDuration?.months ?? 1;
+	return /* @__PURE__ */ jsxs(Calendar$1, {
+		...props,
+		className: composeRenderProps(className, (className) => cx(calendar_module_default.calendar, className)),
+		children: [header === "picker" && /* @__PURE__ */ jsxs("div", {
+			className: calendar_module_default.nav,
+			children: [
+				/* @__PURE__ */ jsx(CalendarNavButton, { slot: "previous" }),
+				/* @__PURE__ */ jsx("div", {
+					className: calendar_module_default.pickerGroup,
+					children: /* @__PURE__ */ jsx(CalendarMonthYearNav, {})
+				}),
+				/* @__PURE__ */ jsx(CalendarNavButton, { slot: "next" })
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: calendar_module_default.months,
+			children: Array.from({ length: months }, (_, i) => /* @__PURE__ */ jsxs("div", {
+				className: calendar_module_default.month,
+				children: [header === "heading" && /* @__PURE__ */ jsxs("div", {
+					className: calendar_module_default.nav,
+					children: [
+						i === 0 && /* @__PURE__ */ jsx(CalendarNavButton, { slot: "previous" }),
+						/* @__PURE__ */ jsx(CalendarHeading, {
+							offset: { months: i },
+							className: calendar_module_default.heading
+						}),
+						i === months - 1 && /* @__PURE__ */ jsx(CalendarNavButton, { slot: "next" })
+					]
+				}), /* @__PURE__ */ jsx(CalendarGrid, { offset: { months: i } })]
+			}, i))
+		})]
+	});
+}
+function RangeCalendar({ header = "heading", className, ...props }) {
+	const months = props.visibleDuration?.months ?? 1;
+	return /* @__PURE__ */ jsxs(RangeCalendar$1, {
+		...props,
+		className: composeRenderProps(className, (className) => cx(calendar_module_default.rangeCalendar, className)),
+		children: [header === "picker" && /* @__PURE__ */ jsxs("div", {
+			className: calendar_module_default.nav,
+			children: [
+				/* @__PURE__ */ jsx(CalendarNavButton, { slot: "previous" }),
+				/* @__PURE__ */ jsx("div", {
+					className: calendar_module_default.pickerGroup,
+					children: /* @__PURE__ */ jsx(CalendarMonthYearNav, {})
+				}),
+				/* @__PURE__ */ jsx(CalendarNavButton, { slot: "next" })
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: calendar_module_default.months,
+			children: Array.from({ length: months }, (_, i) => /* @__PURE__ */ jsxs("div", {
+				className: calendar_module_default.month,
+				children: [header === "heading" && /* @__PURE__ */ jsxs("div", {
+					className: calendar_module_default.nav,
+					children: [
+						i === 0 && /* @__PURE__ */ jsx(CalendarNavButton, { slot: "previous" }),
+						/* @__PURE__ */ jsx(CalendarHeading, {
+							offset: { months: i },
+							className: calendar_module_default.heading
+						}),
+						i === months - 1 && /* @__PURE__ */ jsx(CalendarNavButton, { slot: "next" })
+					]
+				}), /* @__PURE__ */ jsx(CalendarGrid, { offset: { months: i } })]
+			}, i))
+		})]
+	});
+}
+//#endregion
+//#region src/components/calendar/date-field.module.css
+var date_field_module_default = {
+	"dateInput": "_dateInput_qxz9d_2",
+	"small": "_small_qxz9d_29",
+	"medium": "_medium_qxz9d_33",
+	"large": "_large_qxz9d_37",
+	"segment": "_segment_qxz9d_42"
+};
+//#endregion
+//#region src/components/calendar/date-field.tsx
+const dateInput = cva({
+	base: date_field_module_default.dateInput,
+	variants: { size: {
+		small: date_field_module_default.small,
+		medium: date_field_module_default.medium,
+		large: date_field_module_default.large
+	} }
+});
+function DateSegment({ className, ...props }) {
+	return /* @__PURE__ */ jsx(DateSegment$1, {
+		...props,
+		className: composeRenderProps(className, (className) => cx(date_field_module_default.segment, className))
+	});
+}
+function DateInput({ className, size = "medium", children, ...props }) {
+	return /* @__PURE__ */ jsx(DateInput$1, {
+		...props,
+		className: composeRenderProps(className, (className, values) => dateInput({
+			className,
+			size,
+			...values
+		})),
+		children: children ?? ((segment) => /* @__PURE__ */ jsx(DateSegment, { segment }))
+	});
+}
+function DateField({ inputProps = {}, children, size = "medium", ...props }) {
+	return /* @__PURE__ */ jsx(DateField$1, {
+		...props,
+		children: (values) => /* @__PURE__ */ jsxs(Fragment, { children: [typeof children === "function" ? children(values) : children, /* @__PURE__ */ jsx(DateInput, {
+			...inputProps,
+			size
+		})] })
+	});
+}
+//#endregion
+//#region src/components/calendar/date-picker.module.css
+var date_picker_module_default = {
+	"group": "_group_1dgbw_2",
+	"small": "_small_1dgbw_19",
+	"medium": "_medium_1dgbw_23",
+	"large": "_large_1dgbw_27",
+	"input": "_input_1dgbw_32",
+	"separator": "_separator_1dgbw_47",
+	"button": "_button_1dgbw_74",
+	"popover": "_popover_1dgbw_110"
+};
+//#endregion
+//#region src/components/calendar/date-picker.tsx
+/** A small calendar glyph for the trigger button. */
+function CalendarIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		width: "16",
+		height: "17",
+		viewBox: "0 0 32 34",
+		fill: "none",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", {
+			fillRule: "evenodd",
+			clipRule: "evenodd",
+			d: "M8.23077 30L2 24.8077V7.61692C2 6.51235 2.89543 5.61692 4 5.61692H4.61692L4.61692 5C4.61692 3.89543 5.51235 3 6.61692 3H7.80923C8.9138 3 9.80923 3.89543 9.80923 5V5.61692H21.0964L21.1212 4.9279C21.16 3.85209 22.0434 3 23.1199 3H24.3831C25.4876 3 26.3831 3.89543 26.3831 5V5.61692H27C28.1046 5.61692 29 6.51236 29 7.61692V9.48H2V11.64H29V30H8.23077ZM17.369 17.8088L15.5001 13.827L13.6311 17.8088L9.45215 18.4472L12.4762 21.5467L11.7623 25.923L15.5001 23.8568L19.238 25.923L18.5242 21.5467L21.5481 18.4472L17.369 17.8088Z",
+			fill: "currentColor"
+		})
+	});
+}
+const dateGroup = cva({
+	base: date_picker_module_default.group,
+	variants: { size: {
+		small: date_picker_module_default.small,
+		medium: date_picker_module_default.medium,
+		large: date_picker_module_default.large
+	} }
+});
+/**
+* The borderless `DateInput` used inside a `DatePicker`/`DateRangePicker`'s
+* `Group`, which draws the border itself. `DateField`/`TimeField` use the
+* standalone, self-bordered `DateInput` from "./date-field" instead.
+*/
+function PickerDateInput({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(DateInput$1, {
+		...props,
+		className: composeRenderProps(className, (className) => cx(date_picker_module_default.input, className)),
+		children: children ?? ((segment) => /* @__PURE__ */ jsx(DateSegment, { segment }))
+	});
+}
+function DatePickerButton({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Button$1, {
+		...props,
+		className: cx(date_picker_module_default.button, className),
+		children: children ?? /* @__PURE__ */ jsx(CalendarIcon, {})
+	});
+}
+function DatePickerPopover({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Popover$1, {
+		...props,
+		className: composeRenderProps(className, (className) => cx(date_picker_module_default.popover, className))
+	});
+}
+function DatePicker({ children, groupProps = {}, inputProps = {}, buttonProps = {}, popoverProps = {}, calendarProps = {}, size = "medium", ...props }) {
+	return /* @__PURE__ */ jsx(DatePicker$1, {
+		...props,
+		children: (values) => /* @__PURE__ */ jsxs(Fragment, { children: [
+			typeof children === "function" ? children(values) : children,
+			/* @__PURE__ */ jsxs(Group$1, {
+				...groupProps,
+				className: composeRenderProps(groupProps.className, (className, v) => dateGroup({
+					className,
+					size,
+					...v
+				})),
+				children: [/* @__PURE__ */ jsx(PickerDateInput, { ...inputProps }), /* @__PURE__ */ jsx(DatePickerButton, { ...buttonProps })]
+			}),
+			/* @__PURE__ */ jsx(DatePickerPopover, {
+				...popoverProps,
+				children: /* @__PURE__ */ jsx(Calendar, { ...calendarProps })
+			})
+		] })
+	});
+}
+//#endregion
+//#region src/components/calendar/date-range-picker.tsx
+function DateRangePicker({ children, groupProps = {}, startInputProps = {}, endInputProps = {}, buttonProps = {}, popoverProps = {}, calendarProps = {}, size = "medium", shouldCloseOnSelect = false, ...props }) {
+	return /* @__PURE__ */ jsx(DateRangePicker$1, {
+		...props,
+		shouldCloseOnSelect,
+		children: (values) => /* @__PURE__ */ jsxs(Fragment, { children: [
+			typeof children === "function" ? children(values) : children,
+			/* @__PURE__ */ jsxs(Group$1, {
+				...groupProps,
+				className: composeRenderProps(groupProps.className, (className, v) => dateGroup({
+					className,
+					size,
+					...v
+				})),
+				children: [
+					/* @__PURE__ */ jsx(PickerDateInput, {
+						...startInputProps,
+						slot: "start"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: date_picker_module_default.separator,
+						"aria-hidden": "true",
+						"data-disabled": values.isDisabled || void 0,
+						children: "–"
+					}),
+					/* @__PURE__ */ jsx(PickerDateInput, {
+						...endInputProps,
+						slot: "end"
+					}),
+					/* @__PURE__ */ jsx(DatePickerButton, { ...buttonProps })
+				]
+			}),
+			/* @__PURE__ */ jsx(DatePickerPopover, {
+				...popoverProps,
+				children: /* @__PURE__ */ jsx(RangeCalendar, { ...calendarProps })
+			})
+		] })
+	});
+}
+//#endregion
+//#region src/components/calendar/time-field.tsx
+function TimeField({ inputProps = {}, children, size = "medium", ...props }) {
+	return /* @__PURE__ */ jsx(TimeField$1, {
+		...props,
+		children: (values) => /* @__PURE__ */ jsxs(Fragment, { children: [typeof children === "function" ? children(values) : children, /* @__PURE__ */ jsx(DateInput, {
+			...inputProps,
+			size
+		})] })
+	});
+}
+//#endregion
 //#region src/components/checkbox/checkbox.module.css
 var checkbox_module_default = {
-	"checkbox": "_checkbox_1rldq_2",
-	"icon": "_icon_1rldq_22"
+	"checkbox": "_checkbox_6xifu_2",
+	"icon": "_icon_6xifu_22"
 };
 //#endregion
 //#region src/components/checkbox/checkbox-checked.png
@@ -249,6 +753,59 @@ function Divider({ preset = "center", hrProps: { className: hrClassName, ...hrPr
 	});
 }
 //#endregion
+//#region src/components/group.module.css
+var group_module_default = {
+	"group": "_group_74tda_2",
+	"small": "_small_74tda_30",
+	"medium": "_medium_74tda_34",
+	"large": "_large_74tda_38",
+	"input": "_input_74tda_43",
+	"separator": "_separator_74tda_69"
+};
+//#endregion
+//#region src/components/group.tsx
+const group = cva({
+	base: group_module_default.group,
+	variants: { size: {
+		small: group_module_default.small,
+		medium: group_module_default.medium,
+		large: group_module_default.large
+	} }
+});
+/**
+* Visually merges several focusable controls (inputs, buttons, static
+* segments) into what reads as a single bordered field, e.g. a summoner name
+* plus its `#`-prefixed tag. `Group` draws the border itself, so children
+* meant to sit inside it should stay borderless — see `GroupInput` and
+* `GroupSeparator`.
+*/
+function Group({ size = "medium", className, ...props }) {
+	return /* @__PURE__ */ jsx(Group$1, {
+		...props,
+		className: composeRenderProps(className, (className, values) => group({
+			className,
+			size,
+			...values
+		}))
+	});
+}
+/** A borderless text input for use as a segment inside a `Group`. */
+function GroupInput({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Input, {
+		type: "text",
+		...props,
+		className: composeRenderProps(className, (className) => cx(group_module_default.input, className))
+	});
+}
+/** A static, non-interactive segment for use inside a `Group`, e.g. a `#` between a name and its tag. */
+function GroupSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		...props,
+		className: cx(group_module_default.separator, className)
+	});
+}
+//#endregion
 //#region src/components/typography/heading.module.css
 var heading_module_default = {
 	"heading": "_heading_4cie6_2",
@@ -439,7 +996,7 @@ const numberFieldInput = cva({
 function NumberField({ inputProps = {}, groupProps = {}, children, preset = "normal", size = "medium", ...props }) {
 	return /* @__PURE__ */ jsx(NumberField$1, {
 		...props,
-		children: (values) => /* @__PURE__ */ jsxs(Fragment, { children: [typeof children === "function" ? children(values) : children, /* @__PURE__ */ jsxs(Group, {
+		children: (values) => /* @__PURE__ */ jsxs(Fragment, { children: [typeof children === "function" ? children(values) : children, /* @__PURE__ */ jsxs(Group$1, {
 			...groupProps,
 			className: composeRenderProps(groupProps.className, (className, values) => numberFieldGroup({
 				className,
@@ -472,14 +1029,15 @@ function NumberField({ inputProps = {}, groupProps = {}, children, preset = "nor
 //#endregion
 //#region src/components/popover.module.css
 var popover_module_default = {
-	"popover": "_popover_uemk0_2",
-	"top": "_top_uemk0_12",
-	"bottom": "_bottom_uemk0_16",
-	"left": "_left_uemk0_20",
-	"right": "_right_uemk0_24",
-	"arrow": "_arrow_uemk0_29",
-	"outer": "_outer_uemk0_38",
-	"inner": "_inner_uemk0_42"
+	"popover": "_popover_18zyh_2",
+	"top": "_top_18zyh_12",
+	"bottom": "_bottom_18zyh_16",
+	"left": "_left_18zyh_20",
+	"right": "_right_18zyh_24",
+	"body": "_body_18zyh_29",
+	"arrow": "_arrow_18zyh_33",
+	"outer": "_outer_18zyh_42",
+	"inner": "_inner_18zyh_46"
 };
 //#endregion
 //#region src/components/popover.tsx
@@ -530,6 +1088,12 @@ function Popover({ children, className, ...props }) {
 		}) }) }), /* @__PURE__ */ jsx(Dialog$1, { children: typeof children === "function" ? children(values) : children })] })
 	});
 }
+function PopoverBody({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cx(popover_module_default.body, className)
+	});
+}
 //#endregion
 //#region src/components/progress-bar.module.css
 var progress_bar_module_default = {
@@ -636,14 +1200,14 @@ function SearchField({ inputProps = {}, borderProps = {}, children, className, s
 //#endregion
 //#region src/components/tag-group/tag-group.module.css
 var tag_group_module_default = {
-	"tag": "_tag_baprz_3",
-	"gold": "_gold_baprz_24",
-	"hextech": "_hextech_baprz_31",
-	"grey": "_grey_baprz_38",
-	"text": "_text_baprz_45",
-	"remove": "_remove_baprz_49",
-	"tagGroup": "_tagGroup_baprz_76",
-	"tagList": "_tagList_baprz_82"
+	"tag": "_tag_1db70_3",
+	"gold": "_gold_1db70_24",
+	"hextech": "_hextech_1db70_31",
+	"grey": "_grey_1db70_38",
+	"text": "_text_1db70_45",
+	"remove": "_remove_1db70_49",
+	"tagGroup": "_tagGroup_1db70_76",
+	"tagList": "_tagList_1db70_82"
 };
 //#endregion
 //#region src/components/tag-group/tag-group.tsx
@@ -695,158 +1259,11 @@ function TagList({ children, className, selectLabel, variant = "hextech", ...pro
 //#endregion
 //#region src/components/select/multiple-select.module.css
 var multiple_select_module_default = {
-	"popover": "_popover_1bri3_2",
-	"select": "_select_1bri3_8",
-	"triggerContainer": "_triggerContainer_1bri3_14"
-};
-//#endregion
-//#region src/components/typography/text.module.css
-var text_module_default = {
-	"text": "_text_1tvjr_2",
-	"label": "_label_1tvjr_6",
-	"stat": "_stat_1tvjr_13",
-	"largeNumber": "_largeNumber_1tvjr_20",
-	"sm": "_sm_1tvjr_27",
-	"base": "_base_1tvjr_34",
-	"md": "_md_1tvjr_41",
-	"lg": "_lg_1tvjr_48",
-	"grey100": "_grey100_1tvjr_55",
-	"grey150": "_grey150_1tvjr_59",
-	"gold100": "_gold100_1tvjr_63"
-};
-//#endregion
-//#region src/components/typography/text.tsx
-const text = cva({
-	base: text_module_default.text,
-	variants: {
-		color: {
-			grey100: text_module_default.grey100,
-			grey150: text_module_default.grey150,
-			gold100: text_module_default.gold100
-		},
-		preset: {
-			sm: text_module_default.sm,
-			base: text_module_default.base,
-			md: text_module_default.md,
-			lg: text_module_default.lg,
-			label: text_module_default.label,
-			largeNumber: text_module_default.largeNumber,
-			stat: text_module_default.stat
-		}
-	}
-});
-function Text({ preset = "base", color = "grey100", className, ...rest }) {
-	return /* @__PURE__ */ jsx(Text$1, {
-		className: text({
-			preset,
-			color,
-			className
-		}),
-		...rest
-	});
-}
-function Label({ preset = "sm", color = "grey100", className, ...rest }) {
-	return /* @__PURE__ */ jsx(Label$1, {
-		className: text({
-			preset,
-			color,
-			className
-		}),
-		...rest
-	});
-}
-//#endregion
-//#region src/components/select/select.module.css
-var select_module_default = {
-	"button": "_button_y5tgp_2",
-	"small": "_small_y5tgp_47",
-	"medium": "_medium_y5tgp_51",
-	"large": "_large_y5tgp_55",
-	"singleSelect": "_singleSelect_y5tgp_60",
-	"multiSelect": "_multiSelect_y5tgp_67",
-	"listBox": "_listBox_y5tgp_73",
-	"item": "_item_y5tgp_80",
-	"focus": "_focus_y5tgp_97",
-	"selected": "_selected_y5tgp_106",
-	"popover": "_popover_y5tgp_113",
-	"emptyList": "_emptyList_y5tgp_119"
+	"popover": "_popover_1gisa_2",
+	"triggerContainer": "_triggerContainer_1gisa_8",
+	"select": "_select_1gisa_12"
 };
 //#endregion
-//#region src/components/select/select.tsx
-const select = cva({
-	base: select_module_default.button,
-	variants: {
-		size: {
-			small: select_module_default.small,
-			medium: select_module_default.medium,
-			large: select_module_default.large
-		},
-		selectionMode: {
-			single: select_module_default.singleSelect,
-			multiple: select_module_default.multiSelect
-		}
-	}
-});
-function SelectButton({ className, size = "medium", ...props }) {
-	return /* @__PURE__ */ jsx(Button$1, {
-		...props,
-		className: composeRenderProps(className, (className, buttonValues) => select({
-			...buttonValues,
-			size,
-			className,
-			selectionMode: "single"
-		}))
-	});
-}
-function SelectPopover({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Popover$1, {
-		...props,
-		className: composeRenderProps(className, (className) => cx(className, select_module_default.popover))
-	});
-}
-function SelectListBox({ className, emptyList = "No results found", ...props }) {
-	return /* @__PURE__ */ jsx(ListBox, {
-		...props,
-		renderEmptyState: () => /* @__PURE__ */ jsx("div", {
-			className: text({
-				color: "grey150",
-				preset: "base",
-				className: select_module_default.emptyList
-			}),
-			children: emptyList
-		}),
-		className: composeRenderProps(className, (className) => cx(className, select_module_default.listBox))
-	});
-}
-const item = cva({
-	base: select_module_default.item,
-	variants: {
-		isSelected: { true: select_module_default.selected },
-		isFocused: { true: select_module_default.focus }
-	}
-});
-function SelectListBoxItem({ className, ...props }) {
-	return /* @__PURE__ */ jsx(ListBoxItem$1, {
-		...props,
-		className: composeRenderProps(className, (className, values) => item({
-			...values,
-			className
-		}))
-	});
-}
-function SelectVirtualizer(props) {
-	return /* @__PURE__ */ jsx(Virtualizer$1, {
-		layout: ListLayout$1,
-		layoutOptions: {
-			padding: 0,
-			gap: 0,
-			rowHeight: 31,
-			headingHeight: 35
-		},
-		...props
-	});
-}
-//#endregion
 //#region src/components/select/multiple-select.tsx
 function MultipleSelect({ items, className, size = "medium", emptyList, emptyTags = "No items selected", tagGroupLabel = "Selected items", selectId, selectLabel, ...selectProps }) {
 	const triggerContainerRef = React.useRef(null);
@@ -1416,6 +1833,6 @@ function TreeLoadMoreItem({ children, className, ...props }) {
 	});
 }
 //#endregion
-export { Autocomplete, AutocompleteContext, AutocompleteStateContext, Breadcrumb, Breadcrumbs, Button, ButtonLink, Checkbox, CheckboxButton, CheckboxField, Collection, Dialog, DialogButtons, DialogHeading, DialogTrigger, Disclosure, DisclosureButton, DisclosureGroup, DisclosurePanel, Divider, FieldError, GridLayout, Heading, Label, ListBoxItem, ListLayout, Menu, MenuHeader, MenuItem, MenuPopover, MenuSection, MenuSeparator, MenuTrigger, MenuVirtualizer, Modal, MultipleSelect, NumberField, Popover, ProgressBar, Radio, RadioButton, RadioField, RadioGroup, ResizableTableContainer, RouterProvider, SearchField, Select, SelectButton, SelectListBox, SelectListBoxItem, SelectPopover, SelectValue, SelectVirtualizer, Size, Slider, SliderOutput, Sonner, Spinner, SubmenuTrigger, Switch, SwitchButton, SwitchField, Tab, TabList, TabPanel, Table, TableBody, TableCell, TableColumn, TableColumnResizer, TableFooter, TableHeader, TableLayout, TableRow, Tabs, Tag, TagGroup, TagList, Text, TextArea, TextField, ToggleButton, ToggleButtonGroup, Toolbar, ToolbarSeparator, Tree, TreeItem, TreeItemContent, TreeLoadMoreItem, UnstyledPopover, Virtualizer, WaterfallLayout, button, heading, select, sonner, table, tableCell, tableColumn, tableRow, tagGroup, tagList, text, textField, tree, treeItem, useFilter };
+export { Autocomplete, AutocompleteContext, AutocompleteStateContext, Breadcrumb, Breadcrumbs, Button, ButtonLink, Calendar, CalendarCell, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarIcon, Checkbox, CheckboxButton, CheckboxField, Collection, DateField, DateInput, DatePicker, DatePickerButton, DatePickerPopover, DateRangePicker, DateSegment, Dialog, DialogButtons, DialogHeading, DialogTrigger, Disclosure, DisclosureButton, DisclosureGroup, DisclosurePanel, Divider, FieldError, GridLayout, Group, GroupInput, GroupSeparator, Heading, Label, ListBoxItem, ListLayout, Menu, MenuHeader, MenuItem, MenuPopover, MenuSection, MenuSeparator, MenuTrigger, MenuVirtualizer, Modal, MultipleSelect, NumberField, PickerDateInput, Popover, PopoverBody, ProgressBar, Radio, RadioButton, RadioField, RadioGroup, RangeCalendar, ResizableTableContainer, RouterProvider, SearchField, Select, SelectButton, SelectListBox, SelectListBoxItem, SelectPopover, SelectValue, SelectVirtualizer, Size, Slider, SliderOutput, Sonner, Spinner, SubmenuTrigger, Switch, SwitchButton, SwitchField, Tab, TabList, TabPanel, Table, TableBody, TableCell, TableColumn, TableColumnResizer, TableFooter, TableHeader, TableLayout, TableRow, Tabs, Tag, TagGroup, TagList, Text, TextArea, TextField, TimeField, ToggleButton, ToggleButtonGroup, Toolbar, ToolbarSeparator, Tree, TreeItem, TreeItemContent, TreeLoadMoreItem, UnstyledPopover, Virtualizer, WaterfallLayout, button, dateGroup, dateInput, group, heading, select, sonner, table, tableCell, tableColumn, tableRow, tagGroup, tagList, text, textField, tree, treeItem, useFilter };
 
 //# sourceMappingURL=index.mjs.map