@lolmath/ui 9.2.0 → 9.3.0

package/dist/index.css

@@ -1086,7 +1086,7 @@
 	}
 }
 @layer lol {
-	._group_xtlnv_2 {
+	._group_1dgbw_2 {
 		display: flex;
 		align-items: stretch;
 		gap: 1px;
@@ -1103,20 +1103,20 @@
 			background-image: var(--lol-gradient-gold-hover);
 		}
 
-		&._small_xtlnv_19 {
+		&._small_1dgbw_19 {
 			min-height: var(--lol-form-height-small);
 		}
 
-		&._medium_xtlnv_23 {
+		&._medium_1dgbw_23 {
 			min-height: var(--lol-form-height-medium);
 		}
 
-		&._large_xtlnv_27 {
+		&._large_1dgbw_27 {
 			min-height: var(--lol-form-height-large);
 		}
 	}
 
-	._input_xtlnv_32 {
+	._input_1dgbw_32 {
 		flex: 1;
 		display: flex;
 		align-items: center;
@@ -1131,13 +1131,17 @@
 		}
 	}
 
-	._separator_xtlnv_47 {
+	._separator_1dgbw_47 {
 		display: flex;
 		align-items: center;
 		background-color: var(--lol-color-hextech-black);
 		color: var(--lol-color-grey-100);
 		padding: 0 0.125rem;
 		font-family: var(--lol-font-family-spiegel);
+		/* Match the date segments' line-height so flex-centering the dash
+		   against the same line-box height keeps it optically level. */
+		font-size: 0.75rem;
+		line-height: 1rem;
 		/*
 		 * `.group`'s `gap` is what shows its gold background between every
 		 * pair of children — including the two 1px slivers flanking this
@@ -1154,7 +1158,7 @@
 		}
 	}
 
-	._button_xtlnv_70 {
+	._button_1dgbw_74 {
 		/* A <button> we never paint: without this it falls back to the UA's
 		   `buttonface` slab, which is grey under `color-scheme: dark`. */
 		appearance: none;
@@ -1190,7 +1194,7 @@
 	 * of separately-filled sections. The visible "hextech" gradient lives on
 	 * selected dates themselves (see calendar.module.css), not the popover.
 	 */
-	._popover_xtlnv_106 {
+	._popover_1dgbw_110 {
 		padding: 0.75rem;
 		border: 2px solid transparent;
 		box-shadow: 0 2px 4px 0 var(--lol-color-grey-300);
@@ -1349,6 +1353,92 @@
 		flex-grow: 1;
 	}
 }
+@layer lol {
+	._group_74tda_2 {
+		display: flex;
+		align-items: stretch;
+		outline: none;
+
+		/*
+		 * Unlike NumberField's Group, the pieces here (name + tag, start date +
+		 * end date, ...) read as one field, not separately-boxed controls — so
+		 * the border and fill are drawn once, on the group itself, instead of
+		 * per-child with gaps between them.
+		 */
+		background:
+			var(--lol-input-background-gradient) padding-box,
+			var(--lol-input-border-gradient) border-box;
+
+		--lol-input-border-gradient: var(--lol-gradient-gold);
+		--lol-input-background-gradient: var(--lol-gradient-hextech-black);
+
+		border: 1px solid transparent;
+
+		&[data-disabled] {
+			--lol-input-border-gradient: var(--lol-gradient-disabled);
+		}
+
+		&[data-focus-within] {
+			--lol-input-border-gradient: var(--lol-gradient-gold-hover);
+		}
+
+		&._small_74tda_30 {
+			min-height: var(--lol-form-height-small);
+		}
+
+		&._medium_74tda_34 {
+			min-height: var(--lol-form-height-medium);
+		}
+
+		&._large_74tda_38 {
+			min-height: var(--lol-form-height-large);
+		}
+	}
+
+	._input_74tda_43 {
+		/* Transparent so the group's own fill shows through with no seam. */
+		border: 0;
+		margin: 0;
+		flex: 1;
+		min-width: 0;
+		background-color: transparent;
+		color: var(--lol-color-gold-100);
+		font-family: var(--lol-font-family-spiegel);
+		font-weight: 500;
+		font-size: 0.75rem;
+		line-height: 1rem;
+		letter-spacing: 0.025em;
+		padding: 0 0.75rem;
+		outline: none;
+
+		&[data-disabled] {
+			background-color: var(--lol-color-grey-300);
+			color: var(--lol-color-grey-100);
+		}
+
+		&[data-focused] {
+			background-image: var(--lol-gradient-grey-focus);
+		}
+	}
+
+	._separator_74tda_69 {
+		display: flex;
+		align-items: center;
+		flex: none;
+		color: var(--lol-color-gold-300);
+		font-family: var(--lol-font-family-spiegel);
+		font-weight: 700;
+		font-size: 0.75rem;
+		/* Match `.input`'s line-height so flex-centering both glyphs against
+		   the same line-box height keeps them optically level. */
+		line-height: 1rem;
+		padding: 0 0.5rem;
+
+		&[data-disabled] {
+			color: var(--lol-color-grey-150);
+		}
+	}
+}
 @layer lol {
 	._heading_4cie6_2 {
 		/* Rendered as h1-h5, which the UA gives block margins scaled to the font. */

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { Autocomplete, AutocompleteContext, AutocompleteStateContext, BreadcrumbProps, BreadcrumbsProps, ButtonProps, CalendarCellProps, CalendarGridHeaderProps, CalendarGridProps, CalendarHeaderCellProps, CalendarProps as CalendarProps$1, CellProps, CheckboxButtonProps, CheckboxFieldProps, Collection, ColumnProps, ColumnResizerProps, DateFieldProps, DateInput as DateInput$1, DateInputProps, DatePickerProps, DateRangePickerProps, DateSegmentProps, DateValue, DateValue as DateValue$1, Dialog, DialogProps, DialogTrigger, DisclosurePanelProps, DisclosureProps, FieldError, GridLayout, Group, Header, HeadingProps, Input, InputProps, Key, Key as Key$1, LabelProps, LinkProps, ListBoxItem, ListBoxItemProps, ListBoxProps, ListLayout, MenuItemProps, MenuItemProps as MenuItemProps$1, MenuProps, MenuProps as MenuProps$1, MenuSectionProps, MenuTrigger as MenuTrigger$1, ModalOverlayProps, NumberFieldProps, Popover as UnstyledPopover, PopoverProps, ProgressBarProps, RadioButtonProps, RadioFieldProps, RadioGroupProps, RangeCalendarProps as RangeCalendarProps$1, ResizableTableContainer, RouterProvider, RowProps, SearchFieldProps, Select, SelectProps, SelectValue, Selection, SeparatorProps, Size, SliderFillRenderProps, SliderOutputProps, SliderProps, SliderThumbProps, SliderTrackProps, SliderTrackRenderProps, SortDescriptor, SortDirection, SwitchButtonProps, SwitchFieldProps, TabListProps, TabPanelProps, TabProps, TableBodyProps as TableBodyProps$1, TableFooterProps as TableFooterProps$1, TableHeader, TableLayout, TableProps as TableProps$1, TagGroupProps as TagGroupProps$1, TagListProps as TagListProps$1, TagProps as TagProps$1, TextAreaProps, TextFieldProps, TextProps, TimeFieldProps, TimeValue, TimeValue as TimeValue$1, ToggleButtonGroupProps as ToggleButtonGroupProps$1, ToggleButtonProps, ToolbarProps as ToolbarProps$1, TreeItemContentProps as TreeItemContentProps$1, TreeItemProps as TreeItemProps$1, TreeLoadMoreItemProps as TreeLoadMoreItemProps$1, TreeProps as TreeProps$1, Virtualizer, VirtualizerProps, WaterfallLayout, useFilter } from "react-aria-components";
+import { Autocomplete, AutocompleteContext, AutocompleteStateContext, BreadcrumbProps, BreadcrumbsProps, ButtonProps, CalendarCellProps, CalendarGridHeaderProps, CalendarGridProps, CalendarHeaderCellProps, CalendarProps as CalendarProps$1, CellProps, CheckboxButtonProps, CheckboxFieldProps, Collection, ColumnProps, ColumnResizerProps, DateFieldProps, DateInput as DateInput$1, DateInputProps, DatePickerProps, DateRangePickerProps, DateSegmentProps, DateValue, DateValue as DateValue$1, Dialog, DialogProps, DialogTrigger, DisclosurePanelProps, DisclosureProps, FieldError, GridLayout, Group as Group$1, GroupProps as GroupProps$1, Header, HeadingProps, Input, InputProps, Key, Key as Key$1, LabelProps, LinkProps, ListBoxItem, ListBoxItemProps, ListBoxProps, ListLayout, MenuItemProps, MenuItemProps as MenuItemProps$1, MenuProps, MenuProps as MenuProps$1, MenuSectionProps, MenuTrigger as MenuTrigger$1, ModalOverlayProps, NumberFieldProps, Popover as UnstyledPopover, PopoverProps, ProgressBarProps, RadioButtonProps, RadioFieldProps, RadioGroupProps, RangeCalendarProps as RangeCalendarProps$1, ResizableTableContainer, RouterProvider, RowProps, SearchFieldProps, Select, SelectProps, SelectValue, Selection, SeparatorProps, Size, SliderFillRenderProps, SliderOutputProps, SliderProps, SliderThumbProps, SliderTrackProps, SliderTrackRenderProps, SortDescriptor, SortDirection, SwitchButtonProps, SwitchFieldProps, TabListProps, TabPanelProps, TabProps, TableBodyProps as TableBodyProps$1, TableFooterProps as TableFooterProps$1, TableHeader, TableLayout, TableProps as TableProps$1, TagGroupProps as TagGroupProps$1, TagListProps as TagListProps$1, TagProps as TagProps$1, TextAreaProps, TextFieldProps, TextProps, TimeFieldProps, TimeValue, TimeValue as TimeValue$1, ToggleButtonGroupProps as ToggleButtonGroupProps$1, ToggleButtonProps, ToolbarProps as ToolbarProps$1, TreeItemContentProps as TreeItemContentProps$1, TreeItemProps as TreeItemProps$1, TreeLoadMoreItemProps as TreeLoadMoreItemProps$1, TreeProps as TreeProps$1, Virtualizer, VirtualizerProps, WaterfallLayout, useFilter } from "react-aria-components";
 import React$1, { ComponentProps, JSX, Ref } from "react";
 import { ExternalToast, ToasterProps } from "sonner";
 //#region src/components/breadcrumbs/breadcrumbs.d.ts
@@ -117,7 +117,7 @@ declare function PickerDateInput({ className, children, ...props }: Omit<Compone
 declare function DatePickerButton({ className, children, ...props }: ButtonProps): import("react").JSX.Element;
 declare function DatePickerPopover({ className, ...props }: PopoverProps): import("react").JSX.Element;
 declare function DatePicker<T extends DateValue$1>({ children, groupProps, inputProps, buttonProps, popoverProps, calendarProps, size, ...props }: DatePickerProps<T> & {
-  groupProps?: ComponentProps<typeof Group>;
+  groupProps?: ComponentProps<typeof Group$1>;
   inputProps?: ComponentProps<typeof PickerDateInput>;
   buttonProps?: ButtonProps;
   popoverProps?: PopoverProps;
@@ -127,7 +127,7 @@ declare function DatePicker<T extends DateValue$1>({ children, groupProps, input
 //#endregion
 //#region src/components/calendar/date-range-picker.d.ts
 declare function DateRangePicker<T extends DateValue$1>({ children, groupProps, startInputProps, endInputProps, buttonProps, popoverProps, calendarProps, size, shouldCloseOnSelect, ...props }: DateRangePickerProps<T> & {
-  groupProps?: ComponentProps<typeof Group>;
+  groupProps?: ComponentProps<typeof Group$1>;
   startInputProps?: ComponentProps<typeof PickerDateInput>;
   endInputProps?: ComponentProps<typeof PickerDateInput>;
   buttonProps?: ButtonProps;
@@ -161,6 +161,32 @@ interface DividerProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare function Divider({ preset, hrProps: { className: hrClassName, ...hrProps }, childrenWrapperProps: { className: childrenWrapperClassName, ...childrenWrapperProps }, className, children, ...rest }: DividerProps): import("react").JSX.Element;
 //#endregion
+//#region src/components/group.d.ts
+declare const group: (props?: ({
+  size?: "small" | "medium" | "large" | undefined;
+} & ({
+  class?: import("cva").ClassValue;
+  className?: never;
+} | {
+  class?: never;
+  className?: import("cva").ClassValue;
+})) | undefined) => string;
+interface GroupProps extends GroupProps$1 {
+  size?: "small" | "medium" | "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`.
+ */
+declare function Group({ size, className, ...props }: GroupProps): import("react").JSX.Element;
+/** A borderless text input for use as a segment inside a `Group`. */
+declare function GroupInput({ className, ...props }: ComponentProps<typeof Input>): import("react").JSX.Element;
+/** A static, non-interactive segment for use inside a `Group`, e.g. a `#` between a name and its tag. */
+declare function GroupSeparator({ className, ...props }: ComponentProps<"span">): import("react").JSX.Element;
+//#endregion
 //#region src/components/menu/menu.d.ts
 declare const MenuTrigger: typeof MenuTrigger$1;
 declare const SubmenuTrigger: (props: import("react-aria-components").SubmenuTriggerProps & React.RefAttributes<HTMLDivElement>) => import("react").ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
@@ -188,7 +214,7 @@ declare function DialogButtons({ children }: {
 type NumberFieldPreset = "normal" | "dimmed";
 declare function NumberField({ inputProps, groupProps, children, preset, size, ...props }: NumberFieldProps & {
   inputProps?: ComponentProps<typeof Input>;
-  groupProps?: ComponentProps<typeof Group>;
+  groupProps?: ComponentProps<typeof Group$1>;
   preset?: NumberFieldPreset;
   size?: "small" | "medium" | "large";
 }): import("react").JSX.Element;
@@ -593,5 +619,5 @@ interface LabelProps$1 extends LabelProps {
 }
 declare function Label({ preset, color, className, ...rest }: LabelProps$1): JSX.Element;
 //#endregion
-export { Autocomplete, AutocompleteContext, AutocompleteStateContext, Breadcrumb, Breadcrumbs, Button, ButtonLink, ButtonPreset, ButtonShape, ButtonSize, Calendar, CalendarCell, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarIcon, CalendarProps, Checkbox, CheckboxButton, CheckboxField, Collection, DateField, DateInput, DatePicker, DatePickerButton, DatePickerPopover, DateRangePicker, DateSegment, type DateValue, Dialog, DialogButtons, DialogHeading, DialogTrigger, Disclosure, DisclosureButton, DisclosureGroup, DisclosurePanel, Divider, FieldError, GridLayout, Heading, HeadingColor, HeadingElement, type Key, Label, ListBoxItem, ListLayout, Menu, MenuHeader, MenuItem, type MenuItemProps, MenuPopover, type MenuProps, MenuSection, MenuSeparator, MenuTrigger, MenuVirtualizer, Modal, MultipleSelect, MultipleSelectProps, NumberField, PickerDateInput, Popover, PopoverBody, ProgressBar, Radio, RadioButton, RadioField, RadioGroup, RangeCalendar, RangeCalendarProps, ResizableTableContainer, RouterProvider, SearchField, Select, SelectButton, SelectListBox, SelectListBoxItem, SelectPopover, SelectValue, SelectVirtualizer, type Selection, Size, Slider, SliderOutput, Sonner, SonnerProps, type SortDescriptor, type SortDirection, Spinner, SubmenuTrigger, Switch, SwitchButton, SwitchField, Tab, TabList, TabPanel, Table, TableAlign, TableBody, TableBodyProps, TableCell, TableCellProps, TableColumn, TableColumnProps, TableColumnResizer, TableColumnResizerProps, TableFooter, TableFooterProps, TableHeader, TableLayout, TableProps, TableRow, TableRowProps, Tabs, Tag, TagGroup, TagGroupProps, TagList, TagListProps, TagProps, Text, TextArea, TextColor, TextElement, TextField, TextPreset, TimeField, type TimeValue, ToastVariant, ToggleButton, ToggleButtonGroup, ToggleButtonGroupProps, ToggleButtonPreset, Toolbar, ToolbarProps, ToolbarSeparator, ToolbarSeparatorProps, Tree, TreeItem, TreeItemContent, TreeItemContentProps, TreeItemProps, TreeLoadMoreItem, TreeLoadMoreItemProps, TreeProps, UnstyledPopover, Virtualizer, WaterfallLayout, button, dateGroup, dateInput, heading, select, sonner, table, tableCell, tableColumn, tableRow, tagGroup, tagList, text, textField, tree, treeItem, useFilter };
+export { Autocomplete, AutocompleteContext, AutocompleteStateContext, Breadcrumb, Breadcrumbs, Button, ButtonLink, ButtonPreset, ButtonShape, ButtonSize, Calendar, CalendarCell, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarIcon, CalendarProps, Checkbox, CheckboxButton, CheckboxField, Collection, DateField, DateInput, DatePicker, DatePickerButton, DatePickerPopover, DateRangePicker, DateSegment, type DateValue, Dialog, DialogButtons, DialogHeading, DialogTrigger, Disclosure, DisclosureButton, DisclosureGroup, DisclosurePanel, Divider, FieldError, GridLayout, Group, GroupInput, GroupProps, GroupSeparator, Heading, HeadingColor, HeadingElement, type Key, Label, ListBoxItem, ListLayout, Menu, MenuHeader, MenuItem, type MenuItemProps, MenuPopover, type MenuProps, MenuSection, MenuSeparator, MenuTrigger, MenuVirtualizer, Modal, MultipleSelect, MultipleSelectProps, NumberField, PickerDateInput, Popover, PopoverBody, ProgressBar, Radio, RadioButton, RadioField, RadioGroup, RangeCalendar, RangeCalendarProps, ResizableTableContainer, RouterProvider, SearchField, Select, SelectButton, SelectListBox, SelectListBoxItem, SelectPopover, SelectValue, SelectVirtualizer, type Selection, Size, Slider, SliderOutput, Sonner, SonnerProps, type SortDescriptor, type SortDirection, Spinner, SubmenuTrigger, Switch, SwitchButton, SwitchField, Tab, TabList, TabPanel, Table, TableAlign, TableBody, TableBodyProps, TableCell, TableCellProps, TableColumn, TableColumnProps, TableColumnResizer, TableColumnResizerProps, TableFooter, TableFooterProps, TableHeader, TableLayout, TableProps, TableRow, TableRowProps, Tabs, Tag, TagGroup, TagGroupProps, TagList, TagListProps, TagProps, Text, TextArea, TextColor, TextElement, TextField, TextPreset, TimeField, type TimeValue, ToastVariant, ToggleButton, ToggleButtonGroup, ToggleButtonGroupProps, ToggleButtonPreset, Toolbar, ToolbarProps, ToolbarSeparator, ToolbarSeparatorProps, Tree, TreeItem, TreeItemContent, TreeItemContentProps, TreeItemProps, TreeLoadMoreItem, TreeLoadMoreItemProps, TreeProps, UnstyledPopover, Virtualizer, WaterfallLayout, button, dateGroup, dateInput, group, heading, select, sonner, table, tableCell, tableColumn, tableRow, tagGroup, tagList, text, textField, tree, treeItem, useFilter };
 //# sourceMappingURL=index.d.mts.map

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, 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, 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 { 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";
@@ -483,14 +483,14 @@ function DateField({ inputProps = {}, children, size = "medium", ...props }) {
 //#endregion
 //#region src/components/calendar/date-picker.module.css
 var date_picker_module_default = {
-	"group": "_group_xtlnv_2",
-	"small": "_small_xtlnv_19",
-	"medium": "_medium_xtlnv_23",
-	"large": "_large_xtlnv_27",
-	"input": "_input_xtlnv_32",
-	"separator": "_separator_xtlnv_47",
-	"button": "_button_xtlnv_70",
-	"popover": "_popover_xtlnv_106"
+	"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
@@ -548,7 +548,7 @@ function DatePicker({ children, groupProps = {}, inputProps = {}, buttonProps =
 		...props,
 		children: (values) => /* @__PURE__ */ jsxs(Fragment, { children: [
 			typeof children === "function" ? children(values) : children,
-			/* @__PURE__ */ jsxs(Group, {
+			/* @__PURE__ */ jsxs(Group$1, {
 				...groupProps,
 				className: composeRenderProps(groupProps.className, (className, v) => dateGroup({
 					className,
@@ -572,7 +572,7 @@ function DateRangePicker({ children, groupProps = {}, startInputProps = {}, endI
 		shouldCloseOnSelect,
 		children: (values) => /* @__PURE__ */ jsxs(Fragment, { children: [
 			typeof children === "function" ? children(values) : children,
-			/* @__PURE__ */ jsxs(Group, {
+			/* @__PURE__ */ jsxs(Group$1, {
 				...groupProps,
 				className: composeRenderProps(groupProps.className, (className, v) => dateGroup({
 					className,
@@ -753,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",
@@ -943,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,
@@ -1780,6 +1833,6 @@ function TreeLoadMoreItem({ children, className, ...props }) {
 	});
 }
 //#endregion
-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, 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, 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