@povio/ui 3.2.4-rc.5 → 3.2.4-rc.6

package/dist/components/inputs/DateTime/DatePicker/DatePicker.js

@@ -361,7 +361,6 @@ var DatePickerInner = (t0) => {
 		const disableManualEntry = props.disableManualEntry ?? ui.dateInput.disableManualEntry;
 		const showDropdown = !props.disableDropdown || disableManualEntry;
 		const staticSegments = getStaticCalendarDateSegments({
-			intl: ui.intl,
 			value: dateValue,
 			locale,
 			shouldForceLeadingZeros,

package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.js

@@ -817,7 +817,6 @@ var DateRangePickerInner = (t0) => {
 		const disableManualEntry = props.disableManualEntry ?? ui.dateInput.disableManualEntry;
 		const showDropdown = !props.disableDropdown || disableManualEntry;
 		const staticSegments = getStaticDateRangeSegments({
-			intl: ui.intl,
 			start: startDateValue,
 			end: endDateValue,
 			locale,

package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.js

@@ -285,7 +285,6 @@ var DateTimePickerInner = (t0) => {
 		const disableManualEntry = props.disableManualEntry ?? ui.dateInput.disableManualEntry;
 		const showDropdown = !props.disableDropdown || disableManualEntry;
 		const staticSegments = getStaticCalendarDateTimeSegments({
-			intl: ui.intl,
 			value: dateTimeValue,
 			locale,
 			shouldForceLeadingZeros,

package/dist/components/inputs/DateTime/TimePicker/TimePicker.js

@@ -503,7 +503,6 @@ var TimePickerInner = (t0) => {
 		const shouldForceLeadingZeros = props.shouldForceLeadingZeros ?? ui.dateInput.shouldForceLeadingZeros;
 		const showDropdown = !props.disableDropdown || disableManualEntry;
 		const staticSegments = getStaticTimeSegments({
-			intl: ui.intl,
 			value: timeValue_0,
 			locale,
 			shouldForceLeadingZeros,

package/dist/components/inputs/DateTime/shared/staticDateTimeSegments.d.ts

@@ -1,11 +1,9 @@
 import { CalendarDate } from '@internationalized/date';
 import { ReactNode } from 'react';
 import { DateValue, TimeValue } from 'react-aria';
-import { IntlFormatters } from '../../../../utils/intl.utils';
 interface StaticSegmentProps {
     isDisabled?: boolean;
     hidePlaceholder?: boolean;
-    intl?: IntlFormatters;
 }
 interface StaticManualEntryPlaceholderProps {
     disableManualEntry?: boolean;
@@ -34,10 +32,10 @@ interface StaticTimeSegmentsProps extends StaticSegmentProps, StaticManualEntryP
     locale: string;
     shouldForceLeadingZeros?: boolean;
 }
-export declare const getStaticCalendarDateSegments: ({ value, locale, shouldForceLeadingZeros, isDisabled, hidePlaceholder, disableManualEntry, placeholder, intl, dateGranularity, }: StaticCalendarDateSegmentsProps) => import("react/jsx-runtime").JSX.Element;
-export declare const getStaticCalendarDateTimeSegments: ({ value, locale, shouldForceLeadingZeros, isDisabled, hidePlaceholder, disableManualEntry, placeholder, intl, }: StaticCalendarDateTimeSegmentsProps) => import("react/jsx-runtime").JSX.Element;
-export declare const getStaticDateRangeSegments: ({ start, end, locale, shouldForceLeadingZeros, isDisabled, hidePlaceholder, disableManualEntry, placeholder, intl, }: StaticDateRangeSegmentsProps) => import("react/jsx-runtime").JSX.Element;
-export declare const getStaticTimeSegments: ({ value, locale, shouldForceLeadingZeros, isDisabled, hidePlaceholder, disableManualEntry, placeholder, intl, }: StaticTimeSegmentsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const getStaticCalendarDateSegments: ({ value, locale, shouldForceLeadingZeros, isDisabled, hidePlaceholder, disableManualEntry, placeholder, dateGranularity, }: StaticCalendarDateSegmentsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const getStaticCalendarDateTimeSegments: ({ value, locale, shouldForceLeadingZeros, isDisabled, hidePlaceholder, disableManualEntry, placeholder, }: StaticCalendarDateTimeSegmentsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const getStaticDateRangeSegments: ({ start, end, locale, shouldForceLeadingZeros, isDisabled, hidePlaceholder, disableManualEntry, placeholder, }: StaticDateRangeSegmentsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const getStaticTimeSegments: ({ value, locale, shouldForceLeadingZeros, isDisabled, hidePlaceholder, disableManualEntry, placeholder, }: StaticTimeSegmentsProps) => import("react/jsx-runtime").JSX.Element;
 export declare const getStaticDateTimePlaceholder: (placeholder: ReactNode) => import("react/jsx-runtime").JSX.Element;
 export declare const getStaticDateTimeFocusTarget: (container: HTMLElement, staticTarget: EventTarget | null) => HTMLElement | null;
 export {};

package/dist/components/inputs/DateTime/shared/staticDateTimeSegments.js

@@ -3,28 +3,28 @@ import { DateSegmentItemView } from "./DateSegmentItem.js";
 import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/inputs/DateTime/shared/staticDateTimeSegments.tsx
-var getStaticCalendarDateSegments = ({ value, locale, shouldForceLeadingZeros, isDisabled, hidePlaceholder, disableManualEntry, placeholder, intl, dateGranularity = "day" }) => {
+var getStaticCalendarDateSegments = ({ value, locale, shouldForceLeadingZeros, isDisabled, hidePlaceholder, disableManualEntry, placeholder, dateGranularity = "day" }) => {
 	if (disableManualEntry && placeholder && !value) return getStaticDateTimePlaceholder(placeholder);
-	return renderStaticDateTimeParts(DateTimeUtils.formatCalendarDatePartsLocalized(value, locale, { shouldForceLeadingZeros }, intl), {
+	return renderStaticDateTimeParts(DateTimeUtils.formatCalendarDatePartsLocalized(value, locale, { shouldForceLeadingZeros }), {
 		isDisabled,
 		hidePlaceholder,
 		dateGranularity
 	});
 };
-var getStaticCalendarDateTimeSegments = ({ value, locale, shouldForceLeadingZeros, isDisabled, hidePlaceholder, disableManualEntry, placeholder, intl }) => {
+var getStaticCalendarDateTimeSegments = ({ value, locale, shouldForceLeadingZeros, isDisabled, hidePlaceholder, disableManualEntry, placeholder }) => {
 	const hasValue = !!(value && "hour" in value);
 	if (disableManualEntry && placeholder && !hasValue) return getStaticDateTimePlaceholder(placeholder);
-	return renderStaticDateTimeParts(DateTimeUtils.formatCalendarDateTimePartsLocalized(hasValue ? value : null, locale, { shouldForceLeadingZeros }, intl), {
+	return renderStaticDateTimeParts(DateTimeUtils.formatCalendarDateTimePartsLocalized(hasValue ? value : null, locale, { shouldForceLeadingZeros }), {
 		isDisabled,
 		hidePlaceholder,
 		segmentRole: "spinbutton"
 	});
 };
-var getStaticDateRangeSegments = ({ start, end, locale, shouldForceLeadingZeros, isDisabled, hidePlaceholder, disableManualEntry, placeholder, intl }) => {
+var getStaticDateRangeSegments = ({ start, end, locale, shouldForceLeadingZeros, isDisabled, hidePlaceholder, disableManualEntry, placeholder }) => {
 	if (disableManualEntry && placeholder && !start && !end) return getStaticDateTimePlaceholder(placeholder);
 	const showSeparator = !hidePlaceholder;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		renderStaticDateTimeParts(DateTimeUtils.formatCalendarDatePartsLocalized(start, locale, { shouldForceLeadingZeros }, intl), {
+		renderStaticDateTimeParts(DateTimeUtils.formatCalendarDatePartsLocalized(start, locale, { shouldForceLeadingZeros }), {
 			isDisabled,
 			hidePlaceholder: hidePlaceholder && !start,
 			segmentGroup: "start"
@@ -33,16 +33,16 @@ var getStaticDateRangeSegments = ({ start, end, locale, shouldForceLeadingZeros,
 			className: isDisabled ? "pointer-events-none select-none text-interactive-text-secondary-disabled" : "pointer-events-none select-none",
 			children: "–"
 		}),
-		renderStaticDateTimeParts(DateTimeUtils.formatCalendarDatePartsLocalized(end, locale, { shouldForceLeadingZeros }, intl), {
+		renderStaticDateTimeParts(DateTimeUtils.formatCalendarDatePartsLocalized(end, locale, { shouldForceLeadingZeros }), {
 			isDisabled,
 			hidePlaceholder: hidePlaceholder && !end,
 			segmentGroup: "end"
 		})
 	] });
 };
-var getStaticTimeSegments = ({ value, locale, shouldForceLeadingZeros, isDisabled, hidePlaceholder, disableManualEntry, placeholder, intl }) => {
+var getStaticTimeSegments = ({ value, locale, shouldForceLeadingZeros, isDisabled, hidePlaceholder, disableManualEntry, placeholder }) => {
 	if (disableManualEntry && placeholder && !value) return getStaticDateTimePlaceholder(placeholder);
-	return renderStaticDateTimeParts(DateTimeUtils.formatTimePartsLocalized(value, locale, { shouldForceLeadingZeros }, intl), {
+	return renderStaticDateTimeParts(DateTimeUtils.formatTimePartsLocalized(value, locale, { shouldForceLeadingZeros }), {
 		isDisabled,
 		hidePlaceholder,
 		timePickerOnly: true

package/dist/components/inputs/Input/NumberInput/NumberInput.js

@@ -2,6 +2,7 @@ import { UIOverrides } from "../../../../config/uiOverrides.context.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { FormField } from "../../FormField/FormField.js";
 import { inputBaseDefinition } from "../../shared/input.cva.js";
+import { IntlUtils } from "../../../../utils/intl.utils.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
 import { InputFrame } from "../../Skeleton/InputFrame.js";
 import { useStaticInputHandoff } from "../../shared/useStaticInputHandoff.js";
@@ -338,7 +339,7 @@ var NumberInputInner = (t0) => {
 	if (!renderInput) {
 		const staticValue = props.value ?? props.defaultValue;
 		const formatOptions = props.formatOptions ?? ui.numberInput.formatOptions;
-		const displayValue = getStaticNumberDisplayValue(staticValue, ui.intl.getNumberFormatter(locale, formatOptions)) ?? "";
+		const displayValue = getStaticNumberDisplayValue(staticValue, IntlUtils.getNumberFormatter(locale, formatOptions)) ?? "";
 		const hasValue = displayValue !== "";
 		const as = props.as ?? ui.input.as;
 		let isDisabled = !!props.isDisabled;

package/dist/components/inputs/Input/NumberRangeInput/NumberRangeInput.js

@@ -2,6 +2,7 @@ import { UIOverrides } from "../../../../config/uiOverrides.context.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
 import { inputBaseDefinition, inputSizeDefinition } from "../../shared/input.cva.js";
+import { IntlUtils } from "../../../../utils/intl.utils.js";
 import { InputClear } from "../../shared/InputClear.js";
 import { InputFrame } from "../../Skeleton/InputFrame.js";
 import { useStaticInputHandoff } from "../../shared/useStaticInputHandoff.js";
@@ -381,7 +382,7 @@ var NumberRangeInputInner = (t0) => {
 	if (!renderInput) {
 		const staticValue = normalizeRangeValue(props.value, props.minValue, props.maxValue);
 		const formatOptions = props.formatOptions ?? ui.numberInput.formatOptions;
-		const formatter = ui.intl.getNumberFormatter(locale, formatOptions);
+		const formatter = IntlUtils.getNumberFormatter(locale, formatOptions);
 		const minDisplay = getStaticNumberDisplayValue(staticValue.min, formatter);
 		const maxDisplay = getStaticNumberDisplayValue(staticValue.max, formatter);
 		const hasValue = minDisplay !== null || maxDisplay !== null;

package/dist/components/inputs/Selection/Autocomplete/QueryAutocomplete.js

@@ -20,6 +20,8 @@ var LoadedQueryAutocompleteContent = ({ query, queryParams, queryOptions, queryM
 		mapInitialToSelectItem: props.mapInitialToSelectItem
 	});
 	const shouldEnableInitialQuery = selectedIdsToResolve.count > 0;
+	const isInitialQueryDisabled = props.isInitialQueryDisabled ?? ui.queryAutocomplete?.isInitialQueryDisabled;
+	const shouldDisableInitialQuery = !isQueryEnabledInitially && !shouldEnableInitialQuery && (selectedIdsToResolve.isResolvedByInitialSelection || isInitialQueryDisabled);
 	const { items, totalItems, isLoading, handleEnableQuery, hasNextPage, fetchNextPage } = useQueryAutocomplete({
 		query,
 		queryParams,
@@ -27,7 +29,7 @@ var LoadedQueryAutocompleteContent = ({ query, queryParams, queryOptions, queryM
 		mapItems: (data) => getQueryItems(data, queryMap),
 		resolveSelectedItemsWithIds: resolveSelectedItemsWithIds ?? ui.queryAutocomplete?.resolveSelectedItemsWithIds,
 		search,
-		initialQueryState: isQueryEnabledInitially || shouldEnableInitialQuery ? false : selectedIdsToResolve.isResolvedByInitialSelection || (props.isInitialQueryDisabled ?? ui.queryAutocomplete?.isInitialQueryDisabled),
+		initialQueryState: shouldDisableInitialQuery,
 		selectedIdsToResolve: selectedIdsToResolve.items
 	});
 	const handleChange = (value_0) => {

package/dist/components/inputs/Selection/Select/QuerySelect.js

@@ -22,6 +22,8 @@ var LoadedQuerySelectContent = (t0) => {
 		mapInitialToSelectItem: props.mapInitialToSelectItem
 	});
 	const shouldEnableInitialQuery = selectedIdsToResolve.count > 0;
+	const isInitialQueryDisabled = props.isInitialQueryDisabled ?? ui.querySelect?.isInitialQueryDisabled;
+	const shouldDisableInitialQuery = !isQueryEnabledInitially && !shouldEnableInitialQuery && (selectedIdsToResolve.isResolvedByInitialSelection || isInitialQueryDisabled);
 	let t2;
 	if ($[0] !== queryMap) {
 		t2 = (data) => getQueryItems(data, queryMap);
@@ -30,36 +32,35 @@ var LoadedQuerySelectContent = (t0) => {
 	} else t2 = $[1];
 	const t3 = resolveSelectedItemsWithIds ?? ui.querySelect?.resolveSelectedItemsWithIds;
 	const t4 = isSearchable ? search : void 0;
-	const t5 = isQueryEnabledInitially || shouldEnableInitialQuery ? false : selectedIdsToResolve.isResolvedByInitialSelection || (props.isInitialQueryDisabled ?? ui.querySelect?.isInitialQueryDisabled);
-	let t6;
-	if ($[2] !== query || $[3] !== queryOptions || $[4] !== queryParams || $[5] !== selectedIdsToResolve.items || $[6] !== t2 || $[7] !== t3 || $[8] !== t4 || $[9] !== t5) {
-		t6 = {
+	let t5;
+	if ($[2] !== query || $[3] !== queryOptions || $[4] !== queryParams || $[5] !== selectedIdsToResolve.items || $[6] !== shouldDisableInitialQuery || $[7] !== t2 || $[8] !== t3 || $[9] !== t4) {
+		t5 = {
 			query,
 			queryParams,
 			queryOptions,
 			mapItems: t2,
 			resolveSelectedItemsWithIds: t3,
 			search: t4,
-			initialQueryState: t5,
+			initialQueryState: shouldDisableInitialQuery,
 			selectedIdsToResolve: selectedIdsToResolve.items
 		};
 		$[2] = query;
 		$[3] = queryOptions;
 		$[4] = queryParams;
 		$[5] = selectedIdsToResolve.items;
-		$[6] = t2;
-		$[7] = t3;
-		$[8] = t4;
-		$[9] = t5;
-		$[10] = t6;
-	} else t6 = $[10];
-	const { items, totalItems, isLoading, handleEnableQuery, hasNextPage, fetchNextPage } = useQueryAutocomplete(t6);
+		$[6] = shouldDisableInitialQuery;
+		$[7] = t2;
+		$[8] = t3;
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	const { items, totalItems, isLoading, handleEnableQuery, hasNextPage, fetchNextPage } = useQueryAutocomplete(t5);
 	let onSearchChange;
 	let selectProps;
 	if ($[11] !== props) {
-		const { isInitialQueryDisabled: _, onSearchChange: t7, ...t8 } = props;
-		onSearchChange = t7;
-		selectProps = t8;
+		const { isInitialQueryDisabled: _, onSearchChange: t6, ...t7 } = props;
+		onSearchChange = t6;
+		selectProps = t7;
 		$[11] = props;
 		$[12] = onSearchChange;
 		$[13] = selectProps;
@@ -67,9 +68,9 @@ var LoadedQuerySelectContent = (t0) => {
 		onSearchChange = $[12];
 		selectProps = $[13];
 	}
-	let t7;
+	let t6;
 	if ($[14] !== handleEnableQuery || $[15] !== onSearchChange || $[16] !== setSearch) {
-		t7 = (value_0) => {
+		t6 = (value_0) => {
 			setSearch(value_0);
 			handleEnableQuery();
 			onSearchChange?.(value_0);
@@ -77,33 +78,33 @@ var LoadedQuerySelectContent = (t0) => {
 		$[14] = handleEnableQuery;
 		$[15] = onSearchChange;
 		$[16] = setSearch;
-		$[17] = t7;
-	} else t7 = $[17];
-	const handleSearchChange = t7;
-	const t8 = props.searchDebounceDelay ?? ui.querySelect?.searchDebounceDelay;
-	let t9;
+		$[17] = t6;
+	} else t6 = $[17];
+	const handleSearchChange = t6;
+	const t7 = props.searchDebounceDelay ?? ui.querySelect?.searchDebounceDelay;
+	let t8;
 	if ($[18] !== handleSearchChange || $[19] !== isSearchable) {
-		t9 = isSearchable && {
+		t8 = isSearchable && {
 			isClientSearchDisabled: true,
 			onSearchChange: handleSearchChange
 		};
 		$[18] = handleSearchChange;
 		$[19] = isSearchable;
-		$[20] = t9;
-	} else t9 = $[20];
-	let t10;
-	if ($[21] !== fetchNextPage || $[22] !== handleEnableQuery || $[23] !== hasNextPage || $[24] !== isLoading || $[25] !== items || $[26] !== selectProps || $[27] !== t8 || $[28] !== t9 || $[29] !== totalItems) {
-		t10 = /* @__PURE__ */ jsx(Select, {
+		$[20] = t8;
+	} else t8 = $[20];
+	let t9;
+	if ($[21] !== fetchNextPage || $[22] !== handleEnableQuery || $[23] !== hasNextPage || $[24] !== isLoading || $[25] !== items || $[26] !== selectProps || $[27] !== t7 || $[28] !== t8 || $[29] !== totalItems) {
+		t9 = /* @__PURE__ */ jsx(Select, {
 			...selectProps,
 			items,
 			isLoading,
 			totalItems,
 			hasLoadMore: hasNextPage,
 			onLoadMore: fetchNextPage,
-			searchDebounceDelay: t8,
+			searchDebounceDelay: t7,
 			onMouseEnter: handleEnableQuery,
 			onFocusCapture: handleEnableQuery,
-			...t9
+			...t8
 		});
 		$[21] = fetchNextPage;
 		$[22] = handleEnableQuery;
@@ -111,12 +112,12 @@ var LoadedQuerySelectContent = (t0) => {
 		$[24] = isLoading;
 		$[25] = items;
 		$[26] = selectProps;
-		$[27] = t8;
-		$[28] = t9;
+		$[27] = t7;
+		$[28] = t8;
 		$[29] = totalItems;
-		$[30] = t10;
-	} else t10 = $[30];
-	return t10;
+		$[30] = t9;
+	} else t9 = $[30];
+	return t9;
 };
 var QuerySelectContent = (props) => {
 	const $ = c(9);

package/dist/components/inputs/Selection/shared/SelectDesktop.js

@@ -16,7 +16,7 @@ import { useLabel, usePreventScroll } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
 //#region src/components/inputs/Selection/shared/SelectDesktop.tsx
 var SelectDesktop = (t0) => {
-	const $ = c(129);
+	const $ = c(132);
 	let containerClassName;
 	let customTrigger;
 	let error;
@@ -102,8 +102,9 @@ var SelectDesktop = (t0) => {
 	} else t3 = $[27];
 	const { labelProps, fieldProps } = useLabel(t3);
 	const triggerRef = useRef(null);
-	const closeComboBoxRef = useRef(null);
 	const wrapperRef = useRef(null);
+	const [portalContainer, setPortalContainer] = useState(null);
+	const closeComboBoxRef = useRef(null);
 	const [popoverWidth, setPopoverWidth] = useState(void 0);
 	const { fieldState, isOpen, setIsOpen, onInputChange, onChange, onClear, onSelectAll, listItems, selectableListItems, selectedIds, isMultiple } = SelectContext.useSelect();
 	const t4 = !isOpen;
@@ -116,8 +117,22 @@ var SelectDesktop = (t0) => {
 	usePreventScroll(t5);
 	let t6;
 	let t7;
-	if ($[30] !== isOpen) {
+	if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
 		t6 = () => {
+			setPortalContainer(wrapperRef.current?.closest("dialog, [role='dialog']") ?? null);
+		};
+		t7 = [];
+		$[30] = t6;
+		$[31] = t7;
+	} else {
+		t6 = $[30];
+		t7 = $[31];
+	}
+	useLayoutEffect(t6, t7);
+	let t8;
+	let t9;
+	if ($[32] !== isOpen) {
+		t8 = () => {
 			if (!isOpen || !wrapperRef.current) return;
 			setPopoverWidth(wrapperRef.current.getBoundingClientRect().width);
 			const observer = new ResizeObserver((entries) => {
@@ -128,18 +143,18 @@ var SelectDesktop = (t0) => {
 				observer.disconnect();
 			};
 		};
-		t7 = [isOpen];
-		$[30] = isOpen;
-		$[31] = t6;
-		$[32] = t7;
+		t9 = [isOpen];
+		$[32] = isOpen;
+		$[33] = t8;
+		$[34] = t9;
 	} else {
-		t6 = $[31];
-		t7 = $[32];
+		t8 = $[33];
+		t9 = $[34];
 	}
-	useLayoutEffect(t6, t7);
-	let t8;
-	if ($[33] !== fieldState.value || $[34] !== isMultiple || $[35] !== onChange || $[36] !== onClear || $[37] !== onSelectAll || $[38] !== selectableListItems || $[39] !== selectedIds) {
-		t8 = (value) => {
+	useLayoutEffect(t8, t9);
+	let t10;
+	if ($[35] !== fieldState.value || $[36] !== isMultiple || $[37] !== onChange || $[38] !== onClear || $[39] !== onSelectAll || $[40] !== selectableListItems || $[41] !== selectedIds) {
+		t10 = (value) => {
 			if (!value) return;
 			if (value === "all-item-id") {
 				if (selectedIds.length === selectableListItems.length) onClear();
@@ -157,131 +172,131 @@ var SelectDesktop = (t0) => {
 			if (fieldState.value.includes(value)) onChange(fieldState.value.filter((id) => id !== value));
 			else onChange(fieldState.value.concat(value));
 		};
-		$[33] = fieldState.value;
-		$[34] = isMultiple;
-		$[35] = onChange;
-		$[36] = onClear;
-		$[37] = onSelectAll;
-		$[38] = selectableListItems;
-		$[39] = selectedIds;
-		$[40] = t8;
-	} else t8 = $[40];
-	const onSelectionChange = t8;
-	let t9;
-	if ($[41] !== setIsOpen) {
-		t9 = (value_0) => {
+		$[35] = fieldState.value;
+		$[36] = isMultiple;
+		$[37] = onChange;
+		$[38] = onClear;
+		$[39] = onSelectAll;
+		$[40] = selectableListItems;
+		$[41] = selectedIds;
+		$[42] = t10;
+	} else t10 = $[42];
+	const onSelectionChange = t10;
+	let t11;
+	if ($[43] !== setIsOpen) {
+		t11 = (value_0) => {
 			if (closeComboBoxRef.current && value_0) {
 				closeComboBoxRef.current.setOpen(false);
 				closeComboBoxRef.current = null;
 			} else setIsOpen(value_0);
 		};
-		$[41] = setIsOpen;
-		$[42] = t9;
-	} else t9 = $[42];
-	const openChangeHandler = t9;
+		$[43] = setIsOpen;
+		$[44] = t11;
+	} else t11 = $[44];
+	const openChangeHandler = t11;
 	const WrapperComponent = isSearchable ? ComboBox : Fragment$1;
-	const t10 = isMultiple ? null : fieldState.value;
-	const t11 = fieldState.inputValue;
-	const t12 = !!error;
-	let t13;
-	if ($[43] !== containerClassName) {
-		t13 = clsx("group w-full", containerClassName);
-		$[43] = containerClassName;
-		$[44] = t13;
-	} else t13 = $[44];
-	let t14;
-	if ($[45] !== fieldState.inputValue || $[46] !== isDisabled || $[47] !== listItems || $[48] !== onInputChange || $[49] !== onSelectionChange || $[50] !== openChangeHandler || $[51] !== t10 || $[52] !== t12 || $[53] !== t13) {
-		t14 = {
+	const t12 = isMultiple ? null : fieldState.value;
+	const t13 = fieldState.inputValue;
+	const t14 = !!error;
+	let t15;
+	if ($[45] !== containerClassName) {
+		t15 = clsx("group w-full", containerClassName);
+		$[45] = containerClassName;
+		$[46] = t15;
+	} else t15 = $[46];
+	let t16;
+	if ($[47] !== fieldState.inputValue || $[48] !== isDisabled || $[49] !== listItems || $[50] !== onInputChange || $[51] !== onSelectionChange || $[52] !== openChangeHandler || $[53] !== t12 || $[54] !== t14 || $[55] !== t15) {
+		t16 = {
 			items: listItems,
-			selectedKey: t10,
+			selectedKey: t12,
 			onSelectionChange,
-			inputValue: t11,
+			inputValue: t13,
 			onInputChange,
 			onOpenChange: openChangeHandler,
 			allowsEmptyCollection: true,
 			isDisabled,
-			isInvalid: t12,
+			isInvalid: t14,
 			menuTrigger: "focus",
-			className: t13
+			className: t15
 		};
-		$[45] = fieldState.inputValue;
-		$[46] = isDisabled;
-		$[47] = listItems;
-		$[48] = onInputChange;
-		$[49] = onSelectionChange;
-		$[50] = openChangeHandler;
-		$[51] = t10;
-		$[52] = t12;
-		$[53] = t13;
+		$[47] = fieldState.inputValue;
+		$[48] = isDisabled;
+		$[49] = listItems;
+		$[50] = onInputChange;
+		$[51] = onSelectionChange;
+		$[52] = openChangeHandler;
+		$[53] = t12;
 		$[54] = t14;
-	} else t14 = $[54];
-	const comboBoxProps = t14;
-	const t15 = hideLabel || isHeaderHidden;
-	let t16;
-	if ($[55] !== headerClassName || $[56] !== helperText || $[57] !== isDisabled || $[58] !== isRequired || $[59] !== label || $[60] !== labelProps || $[61] !== rightContent || $[62] !== t15 || $[63] !== tooltipText) {
-		t16 = {
+		$[55] = t15;
+		$[56] = t16;
+	} else t16 = $[56];
+	const comboBoxProps = t16;
+	const t17 = hideLabel || isHeaderHidden;
+	let t18;
+	if ($[57] !== headerClassName || $[58] !== helperText || $[59] !== isDisabled || $[60] !== isRequired || $[61] !== label || $[62] !== labelProps || $[63] !== rightContent || $[64] !== t17 || $[65] !== tooltipText) {
+		t18 = {
 			label,
 			tooltipText,
 			helperText,
 			isRequired,
 			rightContent,
-			isHeaderHidden: t15,
+			isHeaderHidden: t17,
 			isDisabled,
 			className: headerClassName,
 			labelProps
 		};
-		$[55] = headerClassName;
-		$[56] = helperText;
-		$[57] = isDisabled;
-		$[58] = isRequired;
-		$[59] = label;
-		$[60] = labelProps;
-		$[61] = rightContent;
-		$[62] = t15;
-		$[63] = tooltipText;
-		$[64] = t16;
-	} else t16 = $[64];
-	const headerProps = t16;
-	let t17;
-	if ($[65] !== isOpen || $[66] !== setIsOpen) {
-		t17 = {
+		$[57] = headerClassName;
+		$[58] = helperText;
+		$[59] = isDisabled;
+		$[60] = isRequired;
+		$[61] = label;
+		$[62] = labelProps;
+		$[63] = rightContent;
+		$[64] = t17;
+		$[65] = tooltipText;
+		$[66] = t18;
+	} else t18 = $[66];
+	const headerProps = t18;
+	let t19;
+	if ($[67] !== isOpen || $[68] !== setIsOpen) {
+		t19 = {
 			isOpen,
 			onOpenChange: setIsOpen
 		};
-		$[65] = isOpen;
-		$[66] = setIsOpen;
-		$[67] = t17;
-	} else t17 = $[67];
-	const dialogTriggerProps = t17;
-	let t18;
-	if ($[68] !== isLoading || $[69] !== listItems) {
-		t18 = listItems.filter(_temp).length > 0 || isLoading;
-		$[68] = isLoading;
-		$[69] = listItems;
-		$[70] = t18;
-	} else t18 = $[70];
-	const showPopover = t18;
-	let t19;
-	if ($[71] !== comboBoxProps || $[72] !== isSearchable) {
-		t19 = isSearchable ? comboBoxProps : {};
-		$[71] = comboBoxProps;
-		$[72] = isSearchable;
-		$[73] = t19;
-	} else t19 = $[73];
+		$[67] = isOpen;
+		$[68] = setIsOpen;
+		$[69] = t19;
+	} else t19 = $[69];
+	const dialogTriggerProps = t19;
 	let t20;
-	if ($[74] !== containerClassName || $[75] !== isSearchable || $[76] !== labelProps) {
-		t20 = !isSearchable && {
+	if ($[70] !== isLoading || $[71] !== listItems) {
+		t20 = listItems.filter(_temp).length > 0 || isLoading;
+		$[70] = isLoading;
+		$[71] = listItems;
+		$[72] = t20;
+	} else t20 = $[72];
+	const showPopover = t20;
+	let t21;
+	if ($[73] !== comboBoxProps || $[74] !== isSearchable) {
+		t21 = isSearchable ? comboBoxProps : {};
+		$[73] = comboBoxProps;
+		$[74] = isSearchable;
+		$[75] = t21;
+	} else t21 = $[75];
+	let t22;
+	if ($[76] !== containerClassName || $[77] !== isSearchable || $[78] !== labelProps) {
+		t22 = !isSearchable && {
 			labelProps,
 			className: clsx("group w-full", containerClassName)
 		};
-		$[74] = containerClassName;
-		$[75] = isSearchable;
-		$[76] = labelProps;
-		$[77] = t20;
-	} else t20 = $[77];
-	let t21;
-	if ($[78] !== as || $[79] !== className || $[80] !== collapseAfter || $[81] !== customTrigger || $[82] !== dialogTriggerProps || $[83] !== error || $[84] !== fieldProps || $[85] !== headerProps || $[86] !== hideDropdownIcon || $[87] !== inputClassName || $[88] !== isClearable || $[89] !== isDirty || $[90] !== isDisabled || $[91] !== isRequired || $[92] !== isSearchable || $[93] !== leadingContent || $[94] !== onBlur || $[95] !== placeholder || $[96] !== ref || $[97] !== selectedTagsType || $[98] !== showSelectionContent || $[99] !== size || $[100] !== trailingContent || $[101] !== variant) {
-		t21 = customTrigger ? /* @__PURE__ */ jsx(DialogTrigger, {
+		$[76] = containerClassName;
+		$[77] = isSearchable;
+		$[78] = labelProps;
+		$[79] = t22;
+	} else t22 = $[79];
+	let t23;
+	if ($[80] !== as || $[81] !== className || $[82] !== collapseAfter || $[83] !== customTrigger || $[84] !== dialogTriggerProps || $[85] !== error || $[86] !== fieldProps || $[87] !== headerProps || $[88] !== hideDropdownIcon || $[89] !== inputClassName || $[90] !== isClearable || $[91] !== isDirty || $[92] !== isDisabled || $[93] !== isRequired || $[94] !== isSearchable || $[95] !== leadingContent || $[96] !== onBlur || $[97] !== placeholder || $[98] !== ref || $[99] !== selectedTagsType || $[100] !== showSelectionContent || $[101] !== size || $[102] !== trailingContent || $[103] !== variant) {
+		t23 = customTrigger ? /* @__PURE__ */ jsx(DialogTrigger, {
 			...dialogTriggerProps,
 			children: /* @__PURE__ */ jsx("div", {
 				...fieldProps,
@@ -315,35 +330,36 @@ var SelectDesktop = (t0) => {
 			fieldProps,
 			headerProps
 		});
-		$[78] = as;
-		$[79] = className;
-		$[80] = collapseAfter;
-		$[81] = customTrigger;
-		$[82] = dialogTriggerProps;
-		$[83] = error;
-		$[84] = fieldProps;
-		$[85] = headerProps;
-		$[86] = hideDropdownIcon;
-		$[87] = inputClassName;
-		$[88] = isClearable;
-		$[89] = isDirty;
-		$[90] = isDisabled;
-		$[91] = isRequired;
-		$[92] = isSearchable;
-		$[93] = leadingContent;
-		$[94] = onBlur;
-		$[95] = placeholder;
-		$[96] = ref;
-		$[97] = selectedTagsType;
-		$[98] = showSelectionContent;
-		$[99] = size;
-		$[100] = trailingContent;
-		$[101] = variant;
-		$[102] = t21;
-	} else t21 = $[102];
-	let t22;
-	if ($[103] !== ignoreTriggerWidth || $[104] !== isOpen || $[105] !== isSearchable || $[106] !== popoverCva || $[107] !== popoverWidth || $[108] !== props || $[109] !== selectPopoverCva || $[110] !== setIsOpen || $[111] !== showPopover) {
-		t22 = (!isSearchable || showPopover) && /* @__PURE__ */ jsx(Popover, {
+		$[80] = as;
+		$[81] = className;
+		$[82] = collapseAfter;
+		$[83] = customTrigger;
+		$[84] = dialogTriggerProps;
+		$[85] = error;
+		$[86] = fieldProps;
+		$[87] = headerProps;
+		$[88] = hideDropdownIcon;
+		$[89] = inputClassName;
+		$[90] = isClearable;
+		$[91] = isDirty;
+		$[92] = isDisabled;
+		$[93] = isRequired;
+		$[94] = isSearchable;
+		$[95] = leadingContent;
+		$[96] = onBlur;
+		$[97] = placeholder;
+		$[98] = ref;
+		$[99] = selectedTagsType;
+		$[100] = showSelectionContent;
+		$[101] = size;
+		$[102] = trailingContent;
+		$[103] = variant;
+		$[104] = t23;
+	} else t23 = $[104];
+	let t24;
+	if ($[105] !== ignoreTriggerWidth || $[106] !== isOpen || $[107] !== isSearchable || $[108] !== popoverCva || $[109] !== popoverWidth || $[110] !== portalContainer || $[111] !== props || $[112] !== selectPopoverCva || $[113] !== setIsOpen || $[114] !== showPopover) {
+		t24 = (!isSearchable || showPopover) && /* @__PURE__ */ jsx(Popover, {
+			UNSTABLE_portalContainer: portalContainer ?? void 0,
 			triggerRef,
 			isOpen,
 			onOpenChange: setIsOpen,
@@ -356,61 +372,62 @@ var SelectDesktop = (t0) => {
 				autoFocus: !isSearchable
 			})
 		});
-		$[103] = ignoreTriggerWidth;
-		$[104] = isOpen;
-		$[105] = isSearchable;
-		$[106] = popoverCva;
-		$[107] = popoverWidth;
-		$[108] = props;
-		$[109] = selectPopoverCva;
-		$[110] = setIsOpen;
-		$[111] = showPopover;
-		$[112] = t22;
-	} else t22 = $[112];
-	let t23;
-	if ($[113] !== as || $[114] !== formFieldProps || $[115] !== onFocusCapture || $[116] !== onMouseEnter || $[117] !== t20 || $[118] !== t21 || $[119] !== t22) {
-		t23 = /* @__PURE__ */ jsxs(FormField, {
+		$[105] = ignoreTriggerWidth;
+		$[106] = isOpen;
+		$[107] = isSearchable;
+		$[108] = popoverCva;
+		$[109] = popoverWidth;
+		$[110] = portalContainer;
+		$[111] = props;
+		$[112] = selectPopoverCva;
+		$[113] = setIsOpen;
+		$[114] = showPopover;
+		$[115] = t24;
+	} else t24 = $[115];
+	let t25;
+	if ($[116] !== as || $[117] !== formFieldProps || $[118] !== onFocusCapture || $[119] !== onMouseEnter || $[120] !== t22 || $[121] !== t23 || $[122] !== t24) {
+		t25 = /* @__PURE__ */ jsxs(FormField, {
 			...formFieldProps,
-			...t20,
+			...t22,
 			as,
 			onMouseEnter,
 			onFocusCapture,
 			ref: wrapperRef,
-			children: [t21, t22]
+			children: [t23, t24]
 		});
-		$[113] = as;
-		$[114] = formFieldProps;
-		$[115] = onFocusCapture;
-		$[116] = onMouseEnter;
-		$[117] = t20;
-		$[118] = t21;
-		$[119] = t22;
-		$[120] = t23;
-	} else t23 = $[120];
-	let t24;
-	if ($[121] !== WrapperComponent || $[122] !== t19 || $[123] !== t23) {
-		t24 = /* @__PURE__ */ jsx(WrapperComponent, {
-			...t19,
-			children: t23
+		$[116] = as;
+		$[117] = formFieldProps;
+		$[118] = onFocusCapture;
+		$[119] = onMouseEnter;
+		$[120] = t22;
+		$[121] = t23;
+		$[122] = t24;
+		$[123] = t25;
+	} else t25 = $[123];
+	let t26;
+	if ($[124] !== WrapperComponent || $[125] !== t21 || $[126] !== t25) {
+		t26 = /* @__PURE__ */ jsx(WrapperComponent, {
+			...t21,
+			children: t25
 		});
-		$[121] = WrapperComponent;
-		$[122] = t19;
-		$[123] = t23;
-		$[124] = t24;
-	} else t24 = $[124];
-	let t25;
-	if ($[125] !== as || $[126] !== error || $[127] !== t24) {
-		t25 = /* @__PURE__ */ jsx(TooltipWrapper, {
+		$[124] = WrapperComponent;
+		$[125] = t21;
+		$[126] = t25;
+		$[127] = t26;
+	} else t26 = $[127];
+	let t27;
+	if ($[128] !== as || $[129] !== error || $[130] !== t26) {
+		t27 = /* @__PURE__ */ jsx(TooltipWrapper, {
 			as,
 			error,
-			children: t24
+			children: t26
 		});
-		$[125] = as;
-		$[126] = error;
-		$[127] = t24;
-		$[128] = t25;
-	} else t25 = $[128];
-	return t25;
+		$[128] = as;
+		$[129] = error;
+		$[130] = t26;
+		$[131] = t27;
+	} else t27 = $[131];
+	return t27;
 };
 function _temp(item) {
 	return !item.isSelectAllItem;

package/dist/config/uiConfig.context.d.ts

@@ -15,13 +15,11 @@ import { ToastPosition } from 'react-toastify';
 import { CellTextProps } from '../components/table/CellText';
 import { HeaderTextProps } from '../components/table/HeaderText';
 import { TagProps } from '../components/text/Tag/Tag';
-import { IntlFormatters } from '../utils/intl.utils';
 export declare namespace UIConfig {
     type DeepRequired<T> = {
-        [P in keyof T]-?: T[P] extends (...args: never[]) => unknown ? Exclude<T[P], null | undefined> : T[P] extends object ? DeepRequired<T[P]> : Exclude<T[P], null | undefined>;
+        [P in keyof T]-?: T[P] extends object ? DeepRequired<T[P]> : Exclude<T[P], null | undefined>;
     };
     export interface Options {
-        intl: IntlFormatters;
         renderStaticInput: boolean;
         input: Pick<TextInputProps, "variant" | "isClearable" | "hideLabel" | "as" | "size"> & {
             alwaysShowClear?: boolean;

package/dist/config/uiConfig.context.js

@@ -3,7 +3,6 @@ import { ClockIcon } from "../assets/icons/Clock.js";
 import { DateTimeIcon } from "../assets/icons/DateTime.js";
 import { ObjectUtils } from "../utils/object.utils.js";
 import { useDeepCompareMemo } from "../hooks/useDeepCompare.js";
-import { IntlUtils } from "../utils/intl.utils.js";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 import { createContext, use } from "react";
@@ -11,7 +10,6 @@ import { createContext, use } from "react";
 var UIConfig;
 (function(_UIConfig) {
 	const DEFAULT_CONFIG = {
-		intl: IntlUtils,
 		renderStaticInput: true,
 		input: {
 			variant: "outlined",

package/dist/index.d.ts

@@ -183,7 +183,6 @@ export { UIRouter } from './config/router.context';
 export { ThemeContext } from './config/theme.context';
 export { UIConfig } from './config/uiConfig.context';
 export { UIOverrides } from './config/uiOverrides.context';
-export type { IntlFormatters } from './utils/intl.utils';
 export { breadcrumbChevronDefinition, breadcrumbIconDefinition, breadcrumbItemDefinition, breadcrumbsDefinition, breadcrumbSegmentDefinition, } from './components/Breadcrumbs/breadcrumbs.cva';
 export { buttonContentDefinition, buttonDefinition, buttonIconSizeDefinition, buttonSizeDefinition, } from './components/buttons/Button/button.cva';
 export { pillButtonContentDefinition, pillButtonDefinition } from './components/buttons/PillButton/pillButton.cva';

package/dist/index.js

@@ -53,7 +53,6 @@ import { Loader } from "./components/status/Loader/Loader.js";
 import { ObjectUtils } from "./utils/object.utils.js";
 import { isEqual } from "./utils/isEqual.js";
 import { useDeepCompareEffect, useDeepCompareLayoutEffect, useDeepCompareMemo } from "./hooks/useDeepCompare.js";
-import { IntlUtils } from "./utils/intl.utils.js";
 import { UIConfig } from "./config/uiConfig.context.js";
 import { uiOutlineClass } from "./components/outline.clsx.js";
 import { compoundMapper } from "./utils/compoundMapper.js";
@@ -83,6 +82,7 @@ import { inputBaseDefinition, inputClearClassDefinition, inputContentWrapperDefi
 import { CheckboxGroup } from "./components/inputs/Checkbox/CheckboxGroup.js";
 import { useLongPressRepeat } from "./hooks/useLongPressRepeat.js";
 import { useScrollableListBox } from "./hooks/useScrollableListBox.js";
+import { IntlUtils } from "./utils/intl.utils.js";
 import { DateTimeUtils } from "./utils/date-time.utils.js";
 import { datePickerInputContentRowDefinition } from "./components/inputs/DateTime/shared/datePickerInput.cva.js";
 import { popoverDefinition } from "./components/shared/popover.cva.js";

package/dist/utils/date-time.utils.d.ts

@@ -1,5 +1,4 @@
 import { CalendarDate, CalendarDateTime, DateValue, ZonedDateTime } from '@internationalized/date';
-import { IntlFormatters } from './intl.utils';
 export declare namespace DateTimeUtils {
     interface LocalizedDateFormatOptions {
         shouldForceLeadingZeros?: boolean;
@@ -10,22 +9,22 @@ export declare namespace DateTimeUtils {
         placeholder: string;
         isPlaceholder: boolean;
     }
-    export function getDatePlaceholder(locale?: string, options?: LocalizedDateFormatOptions, intl?: IntlFormatters): string;
-    export function getTimePlaceholder(locale?: string, intl?: IntlFormatters): string;
+    export function getDatePlaceholder(locale?: string, options?: LocalizedDateFormatOptions): string;
+    export function getTimePlaceholder(locale?: string): string;
     export function getDateTimePlaceholder(locale?: string, options?: LocalizedDateFormatOptions): string;
     export function getDateRangePlaceholder(locale?: string, options?: LocalizedDateFormatOptions): string;
-    export function formatCalendarDateLocalized(calendarDate: CalendarDate, locale?: string, options?: LocalizedDateFormatOptions, intl?: IntlFormatters): string;
-    export function formatCalendarDatePartsLocalized(calendarDate?: CalendarDate | null, locale?: string, options?: LocalizedDateFormatOptions, intl?: IntlFormatters): LocalizedDatePart[];
-    export function formatCalendarDateTimePartsLocalized(calendarDateTime?: Pick<CalendarDateTime, "day" | "month" | "year" | "hour" | "minute"> | null, locale?: string, options?: LocalizedDateFormatOptions, intl?: IntlFormatters): LocalizedDatePart[];
+    export function formatCalendarDateLocalized(calendarDate: CalendarDate, locale?: string, options?: LocalizedDateFormatOptions): string;
+    export function formatCalendarDatePartsLocalized(calendarDate?: CalendarDate | null, locale?: string, options?: LocalizedDateFormatOptions): LocalizedDatePart[];
+    export function formatCalendarDateTimePartsLocalized(calendarDateTime?: Pick<CalendarDateTime, "day" | "month" | "year" | "hour" | "minute"> | null, locale?: string, options?: LocalizedDateFormatOptions): LocalizedDatePart[];
     export function formatTimeLocalized(timeValue: {
         hour: number;
         minute: number;
-    }, locale?: string, options?: LocalizedDateFormatOptions, intl?: IntlFormatters): string;
+    }, locale?: string, options?: LocalizedDateFormatOptions): string;
     export function formatTimePartsLocalized(timeValue?: {
         hour: number;
         minute: number;
-    } | null, locale?: string, options?: LocalizedDateFormatOptions, intl?: IntlFormatters): LocalizedDatePart[];
-    export function formatCalendarDateTimeLocalized(calendarDateTime: Pick<CalendarDateTime, "day" | "month" | "year" | "hour" | "minute">, locale?: string, options?: LocalizedDateFormatOptions, intl?: IntlFormatters): string;
+    } | null, locale?: string, options?: LocalizedDateFormatOptions): LocalizedDatePart[];
+    export function formatCalendarDateTimeLocalized(calendarDateTime: Pick<CalendarDateTime, "day" | "month" | "year" | "hour" | "minute">, locale?: string, options?: LocalizedDateFormatOptions): string;
     export function fromISOtoZonedDateTime(isoString: string, timeZone?: string): ZonedDateTime;
     export function fromDateValueToISO(dateValue: DateValue, timeZone?: string): string;
     export function fromDateValueFieldsToUTCISO(dateValue: DateValue): string;

package/dist/utils/date-time.utils.js

@@ -9,32 +9,27 @@ var DateTimeUtils;
 	const timeFormatters = /* @__PURE__ */ new Map();
 	const getDayMonthFormat = (shouldForceLeadingZeros = false) => shouldForceLeadingZeros ? "2-digit" : "numeric";
 	const getTimeHourFormat = (shouldForceLeadingZeros = false) => shouldForceLeadingZeros ? "2-digit" : "numeric";
-	const getDatePlaceholderFormatter = (locale, options, intl = IntlUtils) => intl.getDateTimeFormatter(locale, {
+	const getDatePlaceholderFormatter = (locale, options) => IntlUtils.getDateTimeFormatter(locale, {
 		day: getDayMonthFormat(options?.shouldForceLeadingZeros),
 		month: getDayMonthFormat(options?.shouldForceLeadingZeros),
 		year: "numeric"
 	});
-	const getTimePlaceholderFormatter = (locale, intl = IntlUtils) => intl.getDateTimeFormatter(locale, {
+	const getTimePlaceholderFormatter = (locale) => IntlUtils.getDateTimeFormatter(locale, {
 		hour: "2-digit",
 		minute: "2-digit"
 	});
-	const getResolvedLocale = (locale, intl = IntlUtils) => {
+	const getResolvedLocale = (locale) => {
 		if (locale) return locale;
-		return intl.getDateTimeFormatter().resolvedOptions().locale;
+		return IntlUtils.getDateTimeFormatter().resolvedOptions().locale;
 	};
-	const getDateFormatter = (locale, options, intl = IntlUtils) => intl.getDateTimeFormatter(getResolvedLocale(locale, intl), {
+	const getDateFormatter = (locale, options) => IntlUtils.getDateTimeFormatter(getResolvedLocale(locale), {
 		day: getDayMonthFormat(options?.shouldForceLeadingZeros),
 		month: getDayMonthFormat(options?.shouldForceLeadingZeros),
 		year: "numeric",
 		timeZone: "UTC"
 	});
-	const getTimeFormatter = (locale, options, intl = IntlUtils) => {
-		const resolvedLocale = getResolvedLocale(locale, intl);
-		if (intl !== IntlUtils) return intl.getDateTimeFormatter(resolvedLocale, {
-			hour: getTimeHourFormat(options?.shouldForceLeadingZeros),
-			minute: "2-digit",
-			timeZone: "UTC"
-		});
+	const getTimeFormatter = (locale, options) => {
+		const resolvedLocale = getResolvedLocale(locale);
 		const key = `${resolvedLocale}|${options?.shouldForceLeadingZeros ?? false}`;
 		const cachedFormatter = timeFormatters.get(key);
 		if (cachedFormatter) return cachedFormatter;
@@ -46,7 +41,7 @@ var DateTimeUtils;
 		timeFormatters.set(key, formatter);
 		return formatter;
 	};
-	const getDateTimeFormatter = (locale, options, intl = IntlUtils) => intl.getDateTimeFormatter(getResolvedLocale(locale, intl), {
+	const getDateTimeFormatter = (locale, options) => IntlUtils.getDateTimeFormatter(getResolvedLocale(locale), {
 		day: getDayMonthFormat(options?.shouldForceLeadingZeros),
 		month: getDayMonthFormat(options?.shouldForceLeadingZeros),
 		year: "numeric",
@@ -54,47 +49,46 @@ var DateTimeUtils;
 		minute: "2-digit",
 		timeZone: "UTC"
 	});
-	const repeatLocalizedFieldLabel = (type, length, locale, intl = IntlUtils) => {
-		const resolvedLocale = getResolvedLocale(locale, intl);
-		const placeholderChar = intl.getDisplayNamesFormatter(resolvedLocale, { type: "dateTimeField" }).of(type)?.trim().charAt(0).toLocaleLowerCase(resolvedLocale);
+	const repeatLocalizedFieldLabel = (type, length, locale) => {
+		const placeholderChar = IntlUtils.getDisplayNamesFormatter(getResolvedLocale(locale), { type: "dateTimeField" }).of(type)?.trim().charAt(0).toLocaleLowerCase(getResolvedLocale(locale));
 		if (!placeholderChar) return null;
 		return placeholderChar.repeat(length);
 	};
-	const mapTypeToPlaceholder = (type, locale, intl = IntlUtils) => {
+	const mapTypeToPlaceholder = (type, locale) => {
 		switch (type) {
-			case "day": return repeatLocalizedFieldLabel(type, 2, locale, intl);
-			case "month": return repeatLocalizedFieldLabel(type, 2, locale, intl);
-			case "year": return repeatLocalizedFieldLabel(type, 4, locale, intl);
+			case "day": return repeatLocalizedFieldLabel(type, 2, locale);
+			case "month": return repeatLocalizedFieldLabel(type, 2, locale);
+			case "year": return repeatLocalizedFieldLabel(type, 4, locale);
 			case "hour": return "hh";
 			case "minute": return "mm";
 			default: return null;
 		}
 	};
-	const formatPlaceholder = (formatter, sampleDate, intl = IntlUtils) => {
-		return formatter.formatToParts(sampleDate).map((part) => mapTypeToPlaceholder(part.type, formatter.resolvedOptions().locale, intl) ?? part.value).join("");
+	const formatPlaceholder = (formatter, sampleDate) => {
+		return formatter.formatToParts(sampleDate).map((part) => mapTypeToPlaceholder(part.type, formatter.resolvedOptions().locale) ?? part.value).join("");
 	};
 	const removeDateSeparatorSpacing = (value) => value.replace(/([./-])\s+(?=[\p{Letter}\p{Number}])/gu, "$1");
 	const formatLocalizedDateParts = (formatter, date) => {
 		return removeDateSeparatorSpacing(formatter.format(date));
 	};
-	const formatLocalizedDatePartList = (formatter, date, isPlaceholder, intl = IntlUtils) => {
+	const formatLocalizedDatePartList = (formatter, date, isPlaceholder) => {
 		const locale = formatter.resolvedOptions().locale;
 		return formatter.formatToParts(date).map((part) => {
 			const value = part.type === "literal" ? part.value.replace(/([./-])\s+/gu, "$1") : part.value.replace(/\s+/gu, "");
 			return {
 				type: part.type,
 				value,
-				placeholder: mapTypeToPlaceholder(part.type, locale, intl) ?? value,
+				placeholder: mapTypeToPlaceholder(part.type, locale) ?? value,
 				isPlaceholder
 			};
 		});
 	};
-	function getDatePlaceholder(locale, options, intl = IntlUtils) {
-		return removeDateSeparatorSpacing(formatPlaceholder(getDatePlaceholderFormatter(locale, options, intl), DATE_SAMPLE_DATE_UTC, intl));
+	function getDatePlaceholder(locale, options) {
+		return removeDateSeparatorSpacing(formatPlaceholder(getDatePlaceholderFormatter(locale, options), DATE_SAMPLE_DATE_UTC));
 	}
 	_DateTimeUtils.getDatePlaceholder = getDatePlaceholder;
-	function getTimePlaceholder(locale, intl = IntlUtils) {
-		return formatPlaceholder(getTimePlaceholderFormatter(locale, intl), TIME_SAMPLE_DATE_UTC, intl);
+	function getTimePlaceholder(locale) {
+		return formatPlaceholder(getTimePlaceholderFormatter(locale), TIME_SAMPLE_DATE_UTC);
 	}
 	_DateTimeUtils.getTimePlaceholder = getTimePlaceholder;
 	function getDateTimePlaceholder(locale, options) {
@@ -106,32 +100,32 @@ var DateTimeUtils;
 		return `${datePlaceholder} – ${datePlaceholder}`;
 	}
 	_DateTimeUtils.getDateRangePlaceholder = getDateRangePlaceholder;
-	function formatCalendarDateLocalized(calendarDate, locale, options, intl = IntlUtils) {
-		return formatLocalizedDateParts(getDateFormatter(locale, options, intl), calendarDate.toDate("UTC"));
+	function formatCalendarDateLocalized(calendarDate, locale, options) {
+		return formatLocalizedDateParts(getDateFormatter(locale, options), calendarDate.toDate("UTC"));
 	}
 	_DateTimeUtils.formatCalendarDateLocalized = formatCalendarDateLocalized;
-	function formatCalendarDatePartsLocalized(calendarDate, locale, options, intl = IntlUtils) {
-		return formatLocalizedDatePartList(getDateFormatter(locale, options, intl), calendarDate?.toDate("UTC") ?? DATE_SAMPLE_DATE_UTC, !calendarDate, intl);
+	function formatCalendarDatePartsLocalized(calendarDate, locale, options) {
+		return formatLocalizedDatePartList(getDateFormatter(locale, options), calendarDate?.toDate("UTC") ?? DATE_SAMPLE_DATE_UTC, !calendarDate);
 	}
 	_DateTimeUtils.formatCalendarDatePartsLocalized = formatCalendarDatePartsLocalized;
-	function formatCalendarDateTimePartsLocalized(calendarDateTime, locale, options, intl = IntlUtils) {
+	function formatCalendarDateTimePartsLocalized(calendarDateTime, locale, options) {
 		const normalizedValue = calendarDateTime ? new CalendarDateTime(calendarDateTime.year, calendarDateTime.month, calendarDateTime.day, calendarDateTime.hour, calendarDateTime.minute) : null;
-		return formatLocalizedDatePartList(getDateTimeFormatter(locale, options, intl), normalizedValue?.toDate("UTC") ?? TIME_SAMPLE_DATE_UTC, !calendarDateTime, intl);
+		return formatLocalizedDatePartList(getDateTimeFormatter(locale, options), normalizedValue?.toDate("UTC") ?? TIME_SAMPLE_DATE_UTC, !calendarDateTime);
 	}
 	_DateTimeUtils.formatCalendarDateTimePartsLocalized = formatCalendarDateTimePartsLocalized;
-	function formatTimeLocalized(timeValue, locale, options, intl = IntlUtils) {
+	function formatTimeLocalized(timeValue, locale, options) {
 		const dateTime = new CalendarDateTime(2e3, 11, 22, timeValue.hour, timeValue.minute);
-		return getTimeFormatter(locale, options, intl).format(dateTime.toDate("UTC"));
+		return getTimeFormatter(locale, options).format(dateTime.toDate("UTC"));
 	}
 	_DateTimeUtils.formatTimeLocalized = formatTimeLocalized;
-	function formatTimePartsLocalized(timeValue, locale, options, intl = IntlUtils) {
+	function formatTimePartsLocalized(timeValue, locale, options) {
 		const normalizedValue = new CalendarDateTime(2e3, 11, 22, timeValue?.hour ?? 6, timeValue?.minute ?? 45);
-		return formatLocalizedDatePartList(getTimeFormatter(locale, options, intl), normalizedValue.toDate("UTC"), !timeValue, intl);
+		return formatLocalizedDatePartList(getTimeFormatter(locale, options), normalizedValue.toDate("UTC"), !timeValue);
 	}
 	_DateTimeUtils.formatTimePartsLocalized = formatTimePartsLocalized;
-	function formatCalendarDateTimeLocalized(calendarDateTime, locale, options, intl = IntlUtils) {
+	function formatCalendarDateTimeLocalized(calendarDateTime, locale, options) {
 		const normalizedValue = new CalendarDateTime(calendarDateTime.year, calendarDateTime.month, calendarDateTime.day, calendarDateTime.hour, calendarDateTime.minute);
-		return formatLocalizedDateParts(getDateTimeFormatter(locale, options, intl), normalizedValue.toDate("UTC"));
+		return formatLocalizedDateParts(getDateTimeFormatter(locale, options), normalizedValue.toDate("UTC"));
 	}
 	_DateTimeUtils.formatCalendarDateTimeLocalized = formatCalendarDateTimeLocalized;
 	function resolveTimeZone(timeZone) {

package/dist/utils/intl.utils.d.ts

@@ -1,9 +1,4 @@
 type IntlLocale = Intl.LocalesArgument;
-export interface IntlFormatters {
-    getDateTimeFormatter: (locale?: IntlLocale, options?: Intl.DateTimeFormatOptions) => Intl.DateTimeFormat;
-    getDisplayNamesFormatter: (locale: IntlLocale, options: Intl.DisplayNamesOptions) => Intl.DisplayNames;
-    getNumberFormatter: (locale?: IntlLocale, options?: Intl.NumberFormatOptions) => Intl.NumberFormat;
-}
 export declare namespace IntlUtils {
     const getDateTimeFormatter: (locale?: IntlLocale, options?: Intl.DateTimeFormatOptions) => Intl.DateTimeFormat;
     const getDisplayNamesFormatter: (locale: IntlLocale, options: Intl.DisplayNamesOptions) => Intl.DisplayNames;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@povio/ui",
-  "version": "3.2.4-rc.5",
+  "version": "3.2.4-rc.6",
   "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",