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

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

@@ -361,6 +361,7 @@ 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,6 +817,7 @@ 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,6 +285,7 @@ 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,6 +503,7 @@ 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,9 +1,11 @@
 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;
@@ -32,10 +34,10 @@ interface StaticTimeSegmentsProps extends StaticSegmentProps, StaticManualEntryP
     locale: string;
     shouldForceLeadingZeros?: boolean;
 }
-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 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 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, dateGranularity = "day" }) => {
+var getStaticCalendarDateSegments = ({ value, locale, shouldForceLeadingZeros, isDisabled, hidePlaceholder, disableManualEntry, placeholder, intl, dateGranularity = "day" }) => {
 	if (disableManualEntry && placeholder && !value) return getStaticDateTimePlaceholder(placeholder);
-	return renderStaticDateTimeParts(DateTimeUtils.formatCalendarDatePartsLocalized(value, locale, { shouldForceLeadingZeros }), {
+	return renderStaticDateTimeParts(DateTimeUtils.formatCalendarDatePartsLocalized(value, locale, { shouldForceLeadingZeros }, intl), {
 		isDisabled,
 		hidePlaceholder,
 		dateGranularity
 	});
 };
-var getStaticCalendarDateTimeSegments = ({ value, locale, shouldForceLeadingZeros, isDisabled, hidePlaceholder, disableManualEntry, placeholder }) => {
+var getStaticCalendarDateTimeSegments = ({ value, locale, shouldForceLeadingZeros, isDisabled, hidePlaceholder, disableManualEntry, placeholder, intl }) => {
 	const hasValue = !!(value && "hour" in value);
 	if (disableManualEntry && placeholder && !hasValue) return getStaticDateTimePlaceholder(placeholder);
-	return renderStaticDateTimeParts(DateTimeUtils.formatCalendarDateTimePartsLocalized(hasValue ? value : null, locale, { shouldForceLeadingZeros }), {
+	return renderStaticDateTimeParts(DateTimeUtils.formatCalendarDateTimePartsLocalized(hasValue ? value : null, locale, { shouldForceLeadingZeros }, intl), {
 		isDisabled,
 		hidePlaceholder,
 		segmentRole: "spinbutton"
 	});
 };
-var getStaticDateRangeSegments = ({ start, end, locale, shouldForceLeadingZeros, isDisabled, hidePlaceholder, disableManualEntry, placeholder }) => {
+var getStaticDateRangeSegments = ({ start, end, locale, shouldForceLeadingZeros, isDisabled, hidePlaceholder, disableManualEntry, placeholder, intl }) => {
 	if (disableManualEntry && placeholder && !start && !end) return getStaticDateTimePlaceholder(placeholder);
 	const showSeparator = !hidePlaceholder;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		renderStaticDateTimeParts(DateTimeUtils.formatCalendarDatePartsLocalized(start, locale, { shouldForceLeadingZeros }), {
+		renderStaticDateTimeParts(DateTimeUtils.formatCalendarDatePartsLocalized(start, locale, { shouldForceLeadingZeros }, intl), {
 			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 }), {
+		renderStaticDateTimeParts(DateTimeUtils.formatCalendarDatePartsLocalized(end, locale, { shouldForceLeadingZeros }, intl), {
 			isDisabled,
 			hidePlaceholder: hidePlaceholder && !end,
 			segmentGroup: "end"
 		})
 	] });
 };
-var getStaticTimeSegments = ({ value, locale, shouldForceLeadingZeros, isDisabled, hidePlaceholder, disableManualEntry, placeholder }) => {
+var getStaticTimeSegments = ({ value, locale, shouldForceLeadingZeros, isDisabled, hidePlaceholder, disableManualEntry, placeholder, intl }) => {
 	if (disableManualEntry && placeholder && !value) return getStaticDateTimePlaceholder(placeholder);
-	return renderStaticDateTimeParts(DateTimeUtils.formatTimePartsLocalized(value, locale, { shouldForceLeadingZeros }), {
+	return renderStaticDateTimeParts(DateTimeUtils.formatTimePartsLocalized(value, locale, { shouldForceLeadingZeros }, intl), {
 		isDisabled,
 		hidePlaceholder,
 		timePickerOnly: true

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

@@ -2,7 +2,6 @@ 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";
@@ -339,7 +338,7 @@ var NumberInputInner = (t0) => {
 	if (!renderInput) {
 		const staticValue = props.value ?? props.defaultValue;
 		const formatOptions = props.formatOptions ?? ui.numberInput.formatOptions;
-		const displayValue = getStaticNumberDisplayValue(staticValue, IntlUtils.getNumberFormatter(locale, formatOptions)) ?? "";
+		const displayValue = getStaticNumberDisplayValue(staticValue, ui.intl.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,7 +2,6 @@ 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";
@@ -382,7 +381,7 @@ var NumberRangeInputInner = (t0) => {
 	if (!renderInput) {
 		const staticValue = normalizeRangeValue(props.value, props.minValue, props.maxValue);
 		const formatOptions = props.formatOptions ?? ui.numberInput.formatOptions;
-		const formatter = IntlUtils.getNumberFormatter(locale, formatOptions);
+		const formatter = ui.intl.getNumberFormatter(locale, formatOptions);
 		const minDisplay = getStaticNumberDisplayValue(staticValue.min, formatter);
 		const maxDisplay = getStaticNumberDisplayValue(staticValue.max, formatter);
 		const hasValue = minDisplay !== null || maxDisplay !== null;

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

@@ -15,11 +15,13 @@ 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 object ? DeepRequired<T[P]> : Exclude<T[P], null | undefined>;
+        [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>;
     };
     export interface Options {
+        intl: IntlFormatters;
         renderStaticInput: boolean;
         input: Pick<TextInputProps, "variant" | "isClearable" | "hideLabel" | "as" | "size"> & {
             alwaysShowClear?: boolean;

package/dist/config/uiConfig.context.js

@@ -3,6 +3,7 @@ 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";
@@ -10,6 +11,7 @@ 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,6 +183,7 @@ 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,6 +53,7 @@ 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";
@@ -82,7 +83,6 @@ 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,4 +1,5 @@
 import { CalendarDate, CalendarDateTime, DateValue, ZonedDateTime } from '@internationalized/date';
+import { IntlFormatters } from './intl.utils';
 export declare namespace DateTimeUtils {
     interface LocalizedDateFormatOptions {
         shouldForceLeadingZeros?: boolean;
@@ -9,22 +10,22 @@ export declare namespace DateTimeUtils {
         placeholder: string;
         isPlaceholder: boolean;
     }
-    export function getDatePlaceholder(locale?: string, options?: LocalizedDateFormatOptions): string;
-    export function getTimePlaceholder(locale?: string): string;
+    export function getDatePlaceholder(locale?: string, options?: LocalizedDateFormatOptions, intl?: IntlFormatters): string;
+    export function getTimePlaceholder(locale?: string, intl?: IntlFormatters): 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): 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 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 formatTimeLocalized(timeValue: {
         hour: number;
         minute: number;
-    }, locale?: string, options?: LocalizedDateFormatOptions): string;
+    }, locale?: string, options?: LocalizedDateFormatOptions, intl?: IntlFormatters): string;
     export function formatTimePartsLocalized(timeValue?: {
         hour: number;
         minute: number;
-    } | null, locale?: string, options?: LocalizedDateFormatOptions): LocalizedDatePart[];
-    export function formatCalendarDateTimeLocalized(calendarDateTime: Pick<CalendarDateTime, "day" | "month" | "year" | "hour" | "minute">, locale?: string, options?: LocalizedDateFormatOptions): string;
+    } | 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;
     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,27 +9,32 @@ 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) => IntlUtils.getDateTimeFormatter(locale, {
+	const getDatePlaceholderFormatter = (locale, options, intl = IntlUtils) => intl.getDateTimeFormatter(locale, {
 		day: getDayMonthFormat(options?.shouldForceLeadingZeros),
 		month: getDayMonthFormat(options?.shouldForceLeadingZeros),
 		year: "numeric"
 	});
-	const getTimePlaceholderFormatter = (locale) => IntlUtils.getDateTimeFormatter(locale, {
+	const getTimePlaceholderFormatter = (locale, intl = IntlUtils) => intl.getDateTimeFormatter(locale, {
 		hour: "2-digit",
 		minute: "2-digit"
 	});
-	const getResolvedLocale = (locale) => {
+	const getResolvedLocale = (locale, intl = IntlUtils) => {
 		if (locale) return locale;
-		return IntlUtils.getDateTimeFormatter().resolvedOptions().locale;
+		return intl.getDateTimeFormatter().resolvedOptions().locale;
 	};
-	const getDateFormatter = (locale, options) => IntlUtils.getDateTimeFormatter(getResolvedLocale(locale), {
+	const getDateFormatter = (locale, options, intl = IntlUtils) => intl.getDateTimeFormatter(getResolvedLocale(locale, intl), {
 		day: getDayMonthFormat(options?.shouldForceLeadingZeros),
 		month: getDayMonthFormat(options?.shouldForceLeadingZeros),
 		year: "numeric",
 		timeZone: "UTC"
 	});
-	const getTimeFormatter = (locale, options) => {
-		const resolvedLocale = getResolvedLocale(locale);
+	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 key = `${resolvedLocale}|${options?.shouldForceLeadingZeros ?? false}`;
 		const cachedFormatter = timeFormatters.get(key);
 		if (cachedFormatter) return cachedFormatter;
@@ -41,7 +46,7 @@ var DateTimeUtils;
 		timeFormatters.set(key, formatter);
 		return formatter;
 	};
-	const getDateTimeFormatter = (locale, options) => IntlUtils.getDateTimeFormatter(getResolvedLocale(locale), {
+	const getDateTimeFormatter = (locale, options, intl = IntlUtils) => intl.getDateTimeFormatter(getResolvedLocale(locale, intl), {
 		day: getDayMonthFormat(options?.shouldForceLeadingZeros),
 		month: getDayMonthFormat(options?.shouldForceLeadingZeros),
 		year: "numeric",
@@ -49,46 +54,47 @@ var DateTimeUtils;
 		minute: "2-digit",
 		timeZone: "UTC"
 	});
-	const repeatLocalizedFieldLabel = (type, length, locale) => {
-		const placeholderChar = IntlUtils.getDisplayNamesFormatter(getResolvedLocale(locale), { type: "dateTimeField" }).of(type)?.trim().charAt(0).toLocaleLowerCase(getResolvedLocale(locale));
+	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);
 		if (!placeholderChar) return null;
 		return placeholderChar.repeat(length);
 	};
-	const mapTypeToPlaceholder = (type, locale) => {
+	const mapTypeToPlaceholder = (type, locale, intl = IntlUtils) => {
 		switch (type) {
-			case "day": return repeatLocalizedFieldLabel(type, 2, locale);
-			case "month": return repeatLocalizedFieldLabel(type, 2, locale);
-			case "year": return repeatLocalizedFieldLabel(type, 4, locale);
+			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 "hour": return "hh";
 			case "minute": return "mm";
 			default: return null;
 		}
 	};
-	const formatPlaceholder = (formatter, sampleDate) => {
-		return formatter.formatToParts(sampleDate).map((part) => mapTypeToPlaceholder(part.type, formatter.resolvedOptions().locale) ?? part.value).join("");
+	const formatPlaceholder = (formatter, sampleDate, intl = IntlUtils) => {
+		return formatter.formatToParts(sampleDate).map((part) => mapTypeToPlaceholder(part.type, formatter.resolvedOptions().locale, intl) ?? 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) => {
+	const formatLocalizedDatePartList = (formatter, date, isPlaceholder, intl = IntlUtils) => {
 		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) ?? value,
+				placeholder: mapTypeToPlaceholder(part.type, locale, intl) ?? value,
 				isPlaceholder
 			};
 		});
 	};
-	function getDatePlaceholder(locale, options) {
-		return removeDateSeparatorSpacing(formatPlaceholder(getDatePlaceholderFormatter(locale, options), DATE_SAMPLE_DATE_UTC));
+	function getDatePlaceholder(locale, options, intl = IntlUtils) {
+		return removeDateSeparatorSpacing(formatPlaceholder(getDatePlaceholderFormatter(locale, options, intl), DATE_SAMPLE_DATE_UTC, intl));
 	}
 	_DateTimeUtils.getDatePlaceholder = getDatePlaceholder;
-	function getTimePlaceholder(locale) {
-		return formatPlaceholder(getTimePlaceholderFormatter(locale), TIME_SAMPLE_DATE_UTC);
+	function getTimePlaceholder(locale, intl = IntlUtils) {
+		return formatPlaceholder(getTimePlaceholderFormatter(locale, intl), TIME_SAMPLE_DATE_UTC, intl);
 	}
 	_DateTimeUtils.getTimePlaceholder = getTimePlaceholder;
 	function getDateTimePlaceholder(locale, options) {
@@ -100,32 +106,32 @@ var DateTimeUtils;
 		return `${datePlaceholder} – ${datePlaceholder}`;
 	}
 	_DateTimeUtils.getDateRangePlaceholder = getDateRangePlaceholder;
-	function formatCalendarDateLocalized(calendarDate, locale, options) {
-		return formatLocalizedDateParts(getDateFormatter(locale, options), calendarDate.toDate("UTC"));
+	function formatCalendarDateLocalized(calendarDate, locale, options, intl = IntlUtils) {
+		return formatLocalizedDateParts(getDateFormatter(locale, options, intl), calendarDate.toDate("UTC"));
 	}
 	_DateTimeUtils.formatCalendarDateLocalized = formatCalendarDateLocalized;
-	function formatCalendarDatePartsLocalized(calendarDate, locale, options) {
-		return formatLocalizedDatePartList(getDateFormatter(locale, options), calendarDate?.toDate("UTC") ?? DATE_SAMPLE_DATE_UTC, !calendarDate);
+	function formatCalendarDatePartsLocalized(calendarDate, locale, options, intl = IntlUtils) {
+		return formatLocalizedDatePartList(getDateFormatter(locale, options, intl), calendarDate?.toDate("UTC") ?? DATE_SAMPLE_DATE_UTC, !calendarDate, intl);
 	}
 	_DateTimeUtils.formatCalendarDatePartsLocalized = formatCalendarDatePartsLocalized;
-	function formatCalendarDateTimePartsLocalized(calendarDateTime, locale, options) {
+	function formatCalendarDateTimePartsLocalized(calendarDateTime, locale, options, intl = IntlUtils) {
 		const normalizedValue = calendarDateTime ? new CalendarDateTime(calendarDateTime.year, calendarDateTime.month, calendarDateTime.day, calendarDateTime.hour, calendarDateTime.minute) : null;
-		return formatLocalizedDatePartList(getDateTimeFormatter(locale, options), normalizedValue?.toDate("UTC") ?? TIME_SAMPLE_DATE_UTC, !calendarDateTime);
+		return formatLocalizedDatePartList(getDateTimeFormatter(locale, options, intl), normalizedValue?.toDate("UTC") ?? TIME_SAMPLE_DATE_UTC, !calendarDateTime, intl);
 	}
 	_DateTimeUtils.formatCalendarDateTimePartsLocalized = formatCalendarDateTimePartsLocalized;
-	function formatTimeLocalized(timeValue, locale, options) {
+	function formatTimeLocalized(timeValue, locale, options, intl = IntlUtils) {
 		const dateTime = new CalendarDateTime(2e3, 11, 22, timeValue.hour, timeValue.minute);
-		return getTimeFormatter(locale, options).format(dateTime.toDate("UTC"));
+		return getTimeFormatter(locale, options, intl).format(dateTime.toDate("UTC"));
 	}
 	_DateTimeUtils.formatTimeLocalized = formatTimeLocalized;
-	function formatTimePartsLocalized(timeValue, locale, options) {
+	function formatTimePartsLocalized(timeValue, locale, options, intl = IntlUtils) {
 		const normalizedValue = new CalendarDateTime(2e3, 11, 22, timeValue?.hour ?? 6, timeValue?.minute ?? 45);
-		return formatLocalizedDatePartList(getTimeFormatter(locale, options), normalizedValue.toDate("UTC"), !timeValue);
+		return formatLocalizedDatePartList(getTimeFormatter(locale, options, intl), normalizedValue.toDate("UTC"), !timeValue, intl);
 	}
 	_DateTimeUtils.formatTimePartsLocalized = formatTimePartsLocalized;
-	function formatCalendarDateTimeLocalized(calendarDateTime, locale, options) {
+	function formatCalendarDateTimeLocalized(calendarDateTime, locale, options, intl = IntlUtils) {
 		const normalizedValue = new CalendarDateTime(calendarDateTime.year, calendarDateTime.month, calendarDateTime.day, calendarDateTime.hour, calendarDateTime.minute);
-		return formatLocalizedDateParts(getDateTimeFormatter(locale, options), normalizedValue.toDate("UTC"));
+		return formatLocalizedDateParts(getDateTimeFormatter(locale, options, intl), normalizedValue.toDate("UTC"));
 	}
 	_DateTimeUtils.formatCalendarDateTimeLocalized = formatCalendarDateTimeLocalized;
 	function resolveTimeZone(timeZone) {

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

@@ -1,4 +1,9 @@
 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.4",
+  "version": "3.2.4-rc.5",
   "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",