@igne-agency/react-web-ui 0.3.0 → 0.4.0

package/dist/lib/calendar/temporal.d.ts

@@ -2,8 +2,7 @@ import type { CalendarDate } from "@internationalized/date";
 import { type ReactNode, type Ref } from "react";
 import { type DateInputProps as AriaDateInputProps, type CalendarProps as AriaCalendarProps, type DateSegmentProps as AriaDateSegmentProps, type DialogProps as AriaDialogProps, type GroupProps as AriaGroupProps, type PopoverProps as AriaPopoverProps, type RangeCalendarProps as AriaRangeCalendarProps } from "react-aria-components";
 import { type FieldProps, type FieldState } from "../../components/field/index.ts";
-import type { SvgComponent } from "../../components/icon/index.ts";
-import { type CalendarNavigationLabels } from "./calendar-navigation.tsx";
+import { type CalendarNavigationIcons, type CalendarNavigationLabels } from "./calendar-navigation.tsx";
 /** The copy a calendar popup announces: its month steppers and its month and year lists. */
 export type CalendarLabels = CalendarNavigationLabels & Readonly<{
     /** Accessible name of the button that shows the previous month. */
@@ -11,6 +10,13 @@ export type CalendarLabels = CalendarNavigationLabels & Readonly<{
     /** Accessible name of the button that shows the next month. */
     nextMonthLabel: string;
 }>;
+/** The icons a calendar popup shows: its month steppers and its month and year lists. */
+export type CalendarIcons = CalendarNavigationIcons & Readonly<{
+    /** The icon of the button that shows the previous month. */
+    previousIcon: ReactNode;
+    /** The icon of the button that shows the next month. */
+    nextIcon: ReactNode;
+}>;
 export type TemporalStateProps = Readonly<{
     /** Projected onto the element as presence-style `data-*` attributes. */
     state?: FieldState;
@@ -66,18 +72,18 @@ export declare const TemporalRangeSpacer: () => ReactNode;
 export type TemporalTriggerProps = Readonly<{
     /** Accessible name, surfaced as the tooltip hint and the `aria-label`. */
     label: string;
-    /** Glyph for the trigger. */
-    icon: SvgComponent;
     /** The button itself, for the popup to align to. */
     ref?: Ref<HTMLButtonElement>;
+    /** The icon the button shows. */
+    children: ReactNode;
 }>;
 /**
  * The icon-only button that opens the calendar.
  *
  * @example
- * <TemporalTrigger label="Open calendar" icon={CalendarIcon} ref={triggerRef} />
+ * <TemporalTrigger label="Open calendar" ref={triggerRef}><CalendarIcon /></TemporalTrigger>
  */
-export declare const TemporalTrigger: ({ label, icon, ref, }: TemporalTriggerProps) => ReactNode;
+export declare const TemporalTrigger: ({ label, ref, children, }: TemporalTriggerProps) => ReactNode;
 export type TemporalPopupProps = Omit<AriaPopoverProps, "children"> & Readonly<{
     children: AriaDialogProps["children"];
 }>;
@@ -89,16 +95,16 @@ export type TemporalPopupProps = Omit<AriaPopoverProps, "children"> & Readonly<{
  * <TemporalPopup triggerRef={triggerRef}><TemporalCalendar {...labels} /></TemporalPopup>
  */
 export declare const TemporalPopup: ({ children, placement, ...props }: TemporalPopupProps) => ReactNode;
-export type TemporalCalendarProps = Omit<AriaCalendarProps<CalendarDate>, "children"> & CalendarLabels;
+export type TemporalCalendarProps = Omit<AriaCalendarProps<CalendarDate>, "children"> & CalendarLabels & CalendarIcons;
 /**
  * A month of days, selecting one. Today, and the month it opens on without a
  * value, are read in the `TimeZoneProvider`'s zone.
  *
  * @example
- * <TemporalCalendar {...calendarLabels} />
+ * <TemporalCalendar {...calendarLabels} {...calendarIcons} />
  */
-export declare const TemporalCalendar: ({ className, previousMonthLabel, nextMonthLabel, monthLabel, yearLabel, noMatchingYearLabel, ...props }: TemporalCalendarProps) => ReactNode;
-export type TemporalRangeCalendarProps = Omit<AriaRangeCalendarProps<CalendarDate>, "children" | "visibleDuration"> & CalendarLabels & Readonly<{
+export declare const TemporalCalendar: ({ className, previousMonthLabel, nextMonthLabel, monthLabel, yearLabel, noMatchingYearLabel, previousIcon, nextIcon, checkIcon, expandIcon, ...props }: TemporalCalendarProps) => ReactNode;
+export type TemporalRangeCalendarProps = Omit<AriaRangeCalendarProps<CalendarDate>, "children" | "visibleDuration"> & CalendarLabels & CalendarIcons & Readonly<{
     /** Months shown side by side. @default 1 */
     visibleMonths?: number;
 }>;
@@ -108,9 +114,9 @@ export type TemporalRangeCalendarProps = Omit<AriaRangeCalendarProps<CalendarDat
  * `TimeZoneProvider`'s zone.
  *
  * @example
- * <TemporalRangeCalendar visibleMonths={2} {...calendarLabels} />
+ * <TemporalRangeCalendar visibleMonths={2} {...calendarLabels} {...calendarIcons} />
  */
-export declare const TemporalRangeCalendar: ({ visibleMonths, className, previousMonthLabel, nextMonthLabel, monthLabel, yearLabel, noMatchingYearLabel, ...props }: TemporalRangeCalendarProps) => ReactNode;
+export declare const TemporalRangeCalendar: ({ visibleMonths, className, previousMonthLabel, nextMonthLabel, monthLabel, yearLabel, noMatchingYearLabel, previousIcon, nextIcon, checkIcon, expandIcon, ...props }: TemporalRangeCalendarProps) => ReactNode;
 export type TemporalFrameIds = Readonly<{
     labelId: string;
     describedBy?: string;

package/dist/lib/calendar/temporal.js

@@ -1,7 +1,5 @@
-import SvgChevronLeft from "../../vendor/@material-design-icons/svg/outlined/chevron_left.js";
-import SvgChevronRight from "../../vendor/@material-design-icons/svg/outlined/chevron_right.js";
 import { Button as Button$1 } from "../../components/button/button.js";
-import { Field, useFieldIds } from "../../components/field/field.js";
+import { Field } from "../../components/field/field.js";
 import { fieldStateAttributes } from "../../components/field/field-state.js";
 import { useFieldFocus, withFieldFocus } from "../../components/field/use-field-focus.js";
 import { focusControlOnRim } from "../../components/field/rim-focus.js";
@@ -11,9 +9,9 @@ import { CalendarNavigation } from "./calendar-navigation.js";
 import { todayIn } from "./temporal-value.js";
 import temporal_module_default from "./temporal.module.js";
 import { c } from "react/compiler-runtime";
-import { useContext } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
 import { Button, Calendar, CalendarCell, CalendarGrid, CalendarGridBody, CalendarGridHeader, CalendarHeaderCell, DateInput, DatePickerStateContext, DateRangePickerStateContext, DateSegment, Dialog, Group, Popover, RangeCalendar } from "react-aria-components";
 // src/lib/calendar/temporal.tsx
 /**
@@ -234,11 +232,11 @@ var TemporalRangeSpacer = () => {
 * The icon-only button that opens the calendar.
 *
 * @example
-* <TemporalTrigger label="Open calendar" icon={CalendarIcon} ref={triggerRef} />
+* <TemporalTrigger label="Open calendar" ref={triggerRef}><CalendarIcon /></TemporalTrigger>
 */
 var TemporalTrigger = (t0) => {
 	const $ = c(6);
-	const { label, icon, ref } = t0;
+	const { label, ref, children } = t0;
 	let t1;
 	if ($[0] !== ref) {
 		t1 = /* @__PURE__ */ jsx(Button, { ref });
@@ -246,17 +244,17 @@ var TemporalTrigger = (t0) => {
 		$[1] = t1;
 	} else t1 = $[1];
 	let t2;
-	if ($[2] !== icon || $[3] !== label || $[4] !== t1) {
+	if ($[2] !== children || $[3] !== label || $[4] !== t1) {
 		t2 = /* @__PURE__ */ jsx(Button$1, {
 			iconOnly: true,
-			icon,
+			icon: children,
 			label,
 			variant: "tertiary",
 			size: "sm",
 			className: temporal_module_default.trigger,
 			render: t1
 		});
-		$[2] = icon;
+		$[2] = children;
 		$[3] = label;
 		$[4] = t1;
 		$[5] = t2;
@@ -312,58 +310,64 @@ var TemporalPopup = (t0) => {
 	return t3;
 };
 var CalendarChrome = (t0) => {
-	const $ = c(17);
-	const { previousMonthLabel, nextMonthLabel, monthLabel, yearLabel, noMatchingYearLabel, children } = t0;
+	const $ = c(21);
+	const { previousMonthLabel, nextMonthLabel, monthLabel, yearLabel, noMatchingYearLabel, previousIcon, nextIcon, checkIcon, expandIcon, children } = t0;
 	let t1;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
 		t1 = /* @__PURE__ */ jsx(Button, { slot: "previous" });
 		$[0] = t1;
 	} else t1 = $[0];
 	let t2;
-	if ($[1] !== previousMonthLabel) {
+	if ($[1] !== previousIcon || $[2] !== previousMonthLabel) {
 		t2 = /* @__PURE__ */ jsx(Button$1, {
 			iconOnly: true,
-			icon: SvgChevronLeft,
+			icon: previousIcon,
 			label: previousMonthLabel,
 			variant: "tertiary",
 			size: "md",
 			render: t1
 		});
-		$[1] = previousMonthLabel;
-		$[2] = t2;
-	} else t2 = $[2];
+		$[1] = previousIcon;
+		$[2] = previousMonthLabel;
+		$[3] = t2;
+	} else t2 = $[3];
 	let t3;
-	if ($[3] !== monthLabel || $[4] !== noMatchingYearLabel || $[5] !== yearLabel) {
+	if ($[4] !== checkIcon || $[5] !== expandIcon || $[6] !== monthLabel || $[7] !== noMatchingYearLabel || $[8] !== yearLabel) {
 		t3 = /* @__PURE__ */ jsx(CalendarNavigation, {
 			monthLabel,
 			yearLabel,
-			noMatchingYearLabel
+			noMatchingYearLabel,
+			checkIcon,
+			expandIcon
 		});
-		$[3] = monthLabel;
-		$[4] = noMatchingYearLabel;
-		$[5] = yearLabel;
-		$[6] = t3;
-	} else t3 = $[6];
+		$[4] = checkIcon;
+		$[5] = expandIcon;
+		$[6] = monthLabel;
+		$[7] = noMatchingYearLabel;
+		$[8] = yearLabel;
+		$[9] = t3;
+	} else t3 = $[9];
 	let t4;
-	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
 		t4 = /* @__PURE__ */ jsx(Button, { slot: "next" });
-		$[7] = t4;
-	} else t4 = $[7];
+		$[10] = t4;
+	} else t4 = $[10];
 	let t5;
-	if ($[8] !== nextMonthLabel) {
+	if ($[11] !== nextIcon || $[12] !== nextMonthLabel) {
 		t5 = /* @__PURE__ */ jsx(Button$1, {
 			iconOnly: true,
-			icon: SvgChevronRight,
+			icon: nextIcon,
 			label: nextMonthLabel,
 			variant: "tertiary",
 			size: "md",
 			render: t4
 		});
-		$[8] = nextMonthLabel;
-		$[9] = t5;
-	} else t5 = $[9];
+		$[11] = nextIcon;
+		$[12] = nextMonthLabel;
+		$[13] = t5;
+	} else t5 = $[13];
 	let t6;
-	if ($[10] !== t2 || $[11] !== t3 || $[12] !== t5) {
+	if ($[14] !== t2 || $[15] !== t3 || $[16] !== t5) {
 		t6 = /* @__PURE__ */ jsxs("header", {
 			className: temporal_module_default.header,
 			children: [
@@ -372,18 +376,18 @@ var CalendarChrome = (t0) => {
 				t5
 			]
 		});
-		$[10] = t2;
-		$[11] = t3;
-		$[12] = t5;
-		$[13] = t6;
-	} else t6 = $[13];
+		$[14] = t2;
+		$[15] = t3;
+		$[16] = t5;
+		$[17] = t6;
+	} else t6 = $[17];
 	let t7;
-	if ($[14] !== children || $[15] !== t6) {
-		t7 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t6, children] });
-		$[14] = children;
-		$[15] = t6;
-		$[16] = t7;
-	} else t7 = $[16];
+	if ($[18] !== children || $[19] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(Fragment, { children: [t6, children] });
+		$[18] = children;
+		$[19] = t6;
+		$[20] = t7;
+	} else t7 = $[20];
 	return t7;
 };
 var MonthGrid = (t0) => {
@@ -428,90 +432,110 @@ var MonthGrid = (t0) => {
 * value, are read in the `TimeZoneProvider`'s zone.
 *
 * @example
-* <TemporalCalendar {...calendarLabels} />
+* <TemporalCalendar {...calendarLabels} {...calendarIcons} />
 */
 var TemporalCalendar = (t0) => {
-	const $ = c(26);
+	const $ = c(34);
+	let checkIcon;
 	let className;
+	let expandIcon;
 	let monthLabel;
+	let nextIcon;
 	let nextMonthLabel;
 	let noMatchingYearLabel;
+	let previousIcon;
 	let previousMonthLabel;
 	let props;
 	let yearLabel;
 	if ($[0] !== t0) {
-		({className, previousMonthLabel, nextMonthLabel, monthLabel, yearLabel, noMatchingYearLabel, ...props} = t0);
+		({className, previousMonthLabel, nextMonthLabel, monthLabel, yearLabel, noMatchingYearLabel, previousIcon, nextIcon, checkIcon, expandIcon, ...props} = t0);
 		$[0] = t0;
-		$[1] = className;
-		$[2] = monthLabel;
-		$[3] = nextMonthLabel;
-		$[4] = noMatchingYearLabel;
-		$[5] = previousMonthLabel;
-		$[6] = props;
-		$[7] = yearLabel;
+		$[1] = checkIcon;
+		$[2] = className;
+		$[3] = expandIcon;
+		$[4] = monthLabel;
+		$[5] = nextIcon;
+		$[6] = nextMonthLabel;
+		$[7] = noMatchingYearLabel;
+		$[8] = previousIcon;
+		$[9] = previousMonthLabel;
+		$[10] = props;
+		$[11] = yearLabel;
 	} else {
-		className = $[1];
-		monthLabel = $[2];
-		nextMonthLabel = $[3];
-		noMatchingYearLabel = $[4];
-		previousMonthLabel = $[5];
-		props = $[6];
-		yearLabel = $[7];
+		checkIcon = $[1];
+		className = $[2];
+		expandIcon = $[3];
+		monthLabel = $[4];
+		nextIcon = $[5];
+		nextMonthLabel = $[6];
+		noMatchingYearLabel = $[7];
+		previousIcon = $[8];
+		previousMonthLabel = $[9];
+		props = $[10];
+		yearLabel = $[11];
 	}
 	const t1 = useTimeZone();
 	let t2;
-	if ($[8] !== t1) {
+	if ($[12] !== t1) {
 		t2 = todayIn(t1);
-		$[8] = t1;
-		$[9] = t2;
-	} else t2 = $[9];
+		$[12] = t1;
+		$[13] = t2;
+	} else t2 = $[13];
 	const today = t2;
 	const picked = useContext(DatePickerStateContext)?.value ?? null;
 	let t3;
-	if ($[10] !== className) {
+	if ($[14] !== className) {
 		t3 = clsx(temporal_module_default.calendar, className);
-		$[10] = className;
-		$[11] = t3;
-	} else t3 = $[11];
+		$[14] = className;
+		$[15] = t3;
+	} else t3 = $[15];
 	const t4 = picked === null ? today : void 0;
 	let t5;
-	if ($[12] !== today) {
+	if ($[16] !== today) {
 		t5 = /* @__PURE__ */ jsx(MonthGrid, { today });
-		$[12] = today;
-		$[13] = t5;
-	} else t5 = $[13];
+		$[16] = today;
+		$[17] = t5;
+	} else t5 = $[17];
 	let t6;
-	if ($[14] !== monthLabel || $[15] !== nextMonthLabel || $[16] !== noMatchingYearLabel || $[17] !== previousMonthLabel || $[18] !== t5 || $[19] !== yearLabel) {
+	if ($[18] !== checkIcon || $[19] !== expandIcon || $[20] !== monthLabel || $[21] !== nextIcon || $[22] !== nextMonthLabel || $[23] !== noMatchingYearLabel || $[24] !== previousIcon || $[25] !== previousMonthLabel || $[26] !== t5 || $[27] !== yearLabel) {
 		t6 = /* @__PURE__ */ jsx(CalendarChrome, {
 			previousMonthLabel,
 			nextMonthLabel,
 			monthLabel,
 			yearLabel,
 			noMatchingYearLabel,
+			previousIcon,
+			nextIcon,
+			checkIcon,
+			expandIcon,
 			children: t5
 		});
-		$[14] = monthLabel;
-		$[15] = nextMonthLabel;
-		$[16] = noMatchingYearLabel;
-		$[17] = previousMonthLabel;
-		$[18] = t5;
-		$[19] = yearLabel;
-		$[20] = t6;
-	} else t6 = $[20];
+		$[18] = checkIcon;
+		$[19] = expandIcon;
+		$[20] = monthLabel;
+		$[21] = nextIcon;
+		$[22] = nextMonthLabel;
+		$[23] = noMatchingYearLabel;
+		$[24] = previousIcon;
+		$[25] = previousMonthLabel;
+		$[26] = t5;
+		$[27] = yearLabel;
+		$[28] = t6;
+	} else t6 = $[28];
 	let t7;
-	if ($[21] !== props || $[22] !== t3 || $[23] !== t4 || $[24] !== t6) {
+	if ($[29] !== props || $[30] !== t3 || $[31] !== t4 || $[32] !== t6) {
 		t7 = /* @__PURE__ */ jsx(Calendar, {
 			className: t3,
 			defaultFocusedValue: t4,
 			...props,
 			children: t6
 		});
-		$[21] = props;
-		$[22] = t3;
-		$[23] = t4;
-		$[24] = t6;
-		$[25] = t7;
-	} else t7 = $[25];
+		$[29] = props;
+		$[30] = t3;
+		$[31] = t4;
+		$[32] = t6;
+		$[33] = t7;
+	} else t7 = $[33];
 	return t7;
 };
 /**
@@ -520,102 +544,122 @@ var TemporalCalendar = (t0) => {
 * `TimeZoneProvider`'s zone.
 *
 * @example
-* <TemporalRangeCalendar visibleMonths={2} {...calendarLabels} />
+* <TemporalRangeCalendar visibleMonths={2} {...calendarLabels} {...calendarIcons} />
 */
 var TemporalRangeCalendar = (t0) => {
-	const $ = c(33);
+	const $ = c(41);
+	let checkIcon;
 	let className;
+	let expandIcon;
 	let monthLabel;
+	let nextIcon;
 	let nextMonthLabel;
 	let noMatchingYearLabel;
+	let previousIcon;
 	let previousMonthLabel;
 	let props;
 	let t1;
 	let yearLabel;
 	if ($[0] !== t0) {
-		({visibleMonths: t1, className, previousMonthLabel, nextMonthLabel, monthLabel, yearLabel, noMatchingYearLabel, ...props} = t0);
+		({visibleMonths: t1, className, previousMonthLabel, nextMonthLabel, monthLabel, yearLabel, noMatchingYearLabel, previousIcon, nextIcon, checkIcon, expandIcon, ...props} = t0);
 		$[0] = t0;
-		$[1] = className;
-		$[2] = monthLabel;
-		$[3] = nextMonthLabel;
-		$[4] = noMatchingYearLabel;
-		$[5] = previousMonthLabel;
-		$[6] = props;
-		$[7] = t1;
-		$[8] = yearLabel;
+		$[1] = checkIcon;
+		$[2] = className;
+		$[3] = expandIcon;
+		$[4] = monthLabel;
+		$[5] = nextIcon;
+		$[6] = nextMonthLabel;
+		$[7] = noMatchingYearLabel;
+		$[8] = previousIcon;
+		$[9] = previousMonthLabel;
+		$[10] = props;
+		$[11] = t1;
+		$[12] = yearLabel;
 	} else {
-		className = $[1];
-		monthLabel = $[2];
-		nextMonthLabel = $[3];
-		noMatchingYearLabel = $[4];
-		previousMonthLabel = $[5];
-		props = $[6];
-		t1 = $[7];
-		yearLabel = $[8];
+		checkIcon = $[1];
+		className = $[2];
+		expandIcon = $[3];
+		monthLabel = $[4];
+		nextIcon = $[5];
+		nextMonthLabel = $[6];
+		noMatchingYearLabel = $[7];
+		previousIcon = $[8];
+		previousMonthLabel = $[9];
+		props = $[10];
+		t1 = $[11];
+		yearLabel = $[12];
 	}
 	const visibleMonths = t1 === void 0 ? 1 : t1;
 	const t2 = useTimeZone();
 	let t3;
-	if ($[9] !== t2) {
+	if ($[13] !== t2) {
 		t3 = todayIn(t2);
-		$[9] = t2;
-		$[10] = t3;
-	} else t3 = $[10];
+		$[13] = t2;
+		$[14] = t3;
+	} else t3 = $[14];
 	const today = t3;
 	const picked = useContext(DateRangePickerStateContext)?.value.start ?? null;
 	const months = Math.max(1, visibleMonths);
 	let t4;
-	if ($[11] !== className) {
+	if ($[15] !== className) {
 		t4 = clsx(temporal_module_default.calendar, temporal_module_default.rangeCalendar, className);
-		$[11] = className;
-		$[12] = t4;
-	} else t4 = $[12];
+		$[15] = className;
+		$[16] = t4;
+	} else t4 = $[16];
 	let t5;
-	if ($[13] !== months) {
+	if ($[17] !== months) {
 		t5 = { months };
-		$[13] = months;
-		$[14] = t5;
-	} else t5 = $[14];
+		$[17] = months;
+		$[18] = t5;
+	} else t5 = $[18];
 	const t6 = picked === null ? today : void 0;
 	let t7;
-	if ($[15] !== months || $[16] !== today) {
+	if ($[19] !== months || $[20] !== today) {
 		let t8;
-		if ($[18] !== today) {
+		if ($[22] !== today) {
 			t8 = (_, month) => /* @__PURE__ */ jsx(MonthGrid, {
 				today,
 				monthOffset: month
 			}, month);
-			$[18] = today;
-			$[19] = t8;
-		} else t8 = $[19];
+			$[22] = today;
+			$[23] = t8;
+		} else t8 = $[23];
 		t7 = /* @__PURE__ */ jsx("div", {
 			className: temporal_module_default.months,
 			children: Array.from({ length: months }, t8)
 		});
-		$[15] = months;
-		$[16] = today;
-		$[17] = t7;
-	} else t7 = $[17];
+		$[19] = months;
+		$[20] = today;
+		$[21] = t7;
+	} else t7 = $[21];
 	let t8;
-	if ($[20] !== monthLabel || $[21] !== nextMonthLabel || $[22] !== noMatchingYearLabel || $[23] !== previousMonthLabel || $[24] !== t7 || $[25] !== yearLabel) {
+	if ($[24] !== checkIcon || $[25] !== expandIcon || $[26] !== monthLabel || $[27] !== nextIcon || $[28] !== nextMonthLabel || $[29] !== noMatchingYearLabel || $[30] !== previousIcon || $[31] !== previousMonthLabel || $[32] !== t7 || $[33] !== yearLabel) {
 		t8 = /* @__PURE__ */ jsx(CalendarChrome, {
 			previousMonthLabel,
 			nextMonthLabel,
 			monthLabel,
 			yearLabel,
 			noMatchingYearLabel,
+			previousIcon,
+			nextIcon,
+			checkIcon,
+			expandIcon,
 			children: t7
 		});
-		$[20] = monthLabel;
-		$[21] = nextMonthLabel;
-		$[22] = noMatchingYearLabel;
-		$[23] = previousMonthLabel;
-		$[24] = t7;
-		$[25] = yearLabel;
-		$[26] = t8;
-	} else t8 = $[26];
+		$[24] = checkIcon;
+		$[25] = expandIcon;
+		$[26] = monthLabel;
+		$[27] = nextIcon;
+		$[28] = nextMonthLabel;
+		$[29] = noMatchingYearLabel;
+		$[30] = previousIcon;
+		$[31] = previousMonthLabel;
+		$[32] = t7;
+		$[33] = yearLabel;
+		$[34] = t8;
+	} else t8 = $[34];
 	let t9;
-	if ($[27] !== props || $[28] !== t4 || $[29] !== t5 || $[30] !== t6 || $[31] !== t8) {
+	if ($[35] !== props || $[36] !== t4 || $[37] !== t5 || $[38] !== t6 || $[39] !== t8) {
 		t9 = /* @__PURE__ */ jsx(RangeCalendar, {
 			className: t4,
 			visibleDuration: t5,
@@ -623,13 +667,13 @@ var TemporalRangeCalendar = (t0) => {
 			...props,
 			children: t8
 		});
-		$[27] = props;
-		$[28] = t4;
-		$[29] = t5;
-		$[30] = t6;
-		$[31] = t8;
-		$[32] = t9;
-	} else t9 = $[32];
+		$[35] = props;
+		$[36] = t4;
+		$[37] = t5;
+		$[38] = t6;
+		$[39] = t8;
+		$[40] = t9;
+	} else t9 = $[40];
 	return t9;
 };
 /**
@@ -645,7 +689,7 @@ var TemporalRangeCalendar = (t0) => {
 var TemporalFrame = (t0) => {
 	const $ = c(43);
 	const { label, description, errors, requiredness, optionalLabel, dirty, touched, className, children } = t0;
-	const ids = useFieldIds();
+	const ids = Field.useIds();
 	const { labelId, descriptionId, errorId, controlId } = ids;
 	let t1;
 	if ($[0] !== errors) {

package/dist/lib/table-storage.d.ts

@@ -26,7 +26,7 @@ export type StoredValueShape<T> = Readonly<{
  *
  * @example
  * const filters = tableStoredValue(
- * 	"declarations",
+ * 	"invoices",
  * 	"filters",
  * 	{ schema: z.object({ status: z.array(z.string()) }), fallback: { status: [] } },
  * 	localStorageAdapter,
@@ -38,6 +38,6 @@ export declare const tableStoredValue: <T>(tableId: string, name: string, { sche
  * none is stored.
  *
  * @example
- * storedPageSize("nza-rates", [10, 25, 50, 100], 10, localStorageAdapter).read(); // 50, or 10
+ * storedPageSize("hourly-rates", [10, 25, 50, 100], 10, localStorageAdapter).read(); // 50, or 10
  */
 export declare const storedPageSize: (tableId: string, options: readonly number[], fallback: number, storage: StorageAdapter) => StoredValue<number>;

package/dist/lib/table-storage.js

@@ -19,7 +19,7 @@ var check = (schema, value) => {
 *
 * @example
 * const filters = tableStoredValue(
-* 	"declarations",
+* 	"invoices",
 * 	"filters",
 * 	{ schema: z.object({ status: z.array(z.string()) }), fallback: { status: [] } },
 * 	localStorageAdapter,
@@ -53,7 +53,7 @@ var pageSizeSchema = (options) => ({ "~standard": {
 * none is stored.
 *
 * @example
-* storedPageSize("nza-rates", [10, 25, 50, 100], 10, localStorageAdapter).read(); // 50, or 10
+* storedPageSize("hourly-rates", [10, 25, 50, 100], 10, localStorageAdapter).read(); // 50, or 10
 */
 var storedPageSize = (tableId, options, fallback, storage) => tableStoredValue(tableId, "page-size", {
 	schema: pageSizeSchema(options),

package/dist/lib/unsaved-changes/leave-guard.js

@@ -2,8 +2,8 @@ import { ConfirmDialog } from "../../components/confirm-dialog/confirm-dialog.js
 import { useBeforeUnload } from "./before-unload.js";
 import { useUnsavedChanges } from "./registry.js";
 import { c } from "react/compiler-runtime";
-import { useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
+import { useRef, useState } from "react";
 // src/lib/unsaved-changes/leave-guard.tsx
 var STAY = () => void 0;
 /**