@povio/ui 2.3.0-rc.1 → 2.3.0-rc.3

package/dist/components/inputs/Checkbox/Checkbox.js

@@ -14,7 +14,9 @@ var CheckboxBase = (props) => {
 	const ui = UIConfig.useConfig();
 	const checkboxTypographyMap = UIStyle.useMapper("checkbox.typography", checkboxTypography);
 	const checkboxContentClassNameMap = UIStyle.useMapper("checkbox.contentClassName", checkboxContentClassName);
-	const { className, children, isDisabled, error, variant = ui.checkbox.variant, hideLabel = ui.input.hideLabel, ...rest } = props;
+	const { className, children, isDisabled, error, variant: variantProp, hideLabel: hideLabelProp, ...rest } = props;
+	const variant = variantProp ?? ui.checkbox.variant;
+	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
 	const formFieldErrorProps = {
 		error,
 		isDisabled

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

@@ -24,7 +24,20 @@ import { useCalendarState, useDatePickerState } from "react-stately";
 //#region src/components/inputs/DateTime/DatePicker/DatePicker.tsx
 var DatePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
-	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDirty, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, className, placeholder, inputClassName, as = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, todayIconButtonSize = ui.dateInput.todayIconButtonSize, todayIconPlacement = ui.dateInput.todayIconPlacement, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, shouldUpdateDateOnMonthYearChange = ui.dateInput.shouldUpdateDateOnMonthYearChange, granularity = ui.dateInput.granularity, autoFixYear = ui.dateInput.autoFixYear, format, ...rest } = props;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDirty, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, className, placeholder, inputClassName, as: asProp, hideLabel: hideLabelProp, variant: variantProp, size: sizeProp, isClearable: isClearableProp, todayIcon: todayIconProp, todayIconButtonSize: todayIconButtonSizeProp, todayIconPlacement: todayIconPlacementProp, shouldForceLeadingZeros: shouldForceLeadingZerosProp, disableManualEntry: disableManualEntryProp, shouldUpdateDateOnMonthYearChange: shouldUpdateDateOnMonthYearChangeProp, granularity: granularityProp, autoFixYear: autoFixYearProp, format, ...rest } = props;
+	const as = asProp ?? ui.input.as;
+	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
+	const variant = variantProp ?? ui.input.variant;
+	const size = sizeProp ?? ui.input.size;
+	const isClearable = isClearableProp ?? ui.input.isClearable;
+	const todayIcon = todayIconProp ?? ui.dateInput.todayIcon;
+	const todayIconButtonSize = todayIconButtonSizeProp ?? ui.dateInput.todayIconButtonSize;
+	const todayIconPlacement = todayIconPlacementProp ?? ui.dateInput.todayIconPlacement;
+	const shouldForceLeadingZeros = shouldForceLeadingZerosProp ?? ui.dateInput.shouldForceLeadingZeros;
+	const disableManualEntry = disableManualEntryProp ?? ui.dateInput.disableManualEntry;
+	const shouldUpdateDateOnMonthYearChange = shouldUpdateDateOnMonthYearChangeProp ?? ui.dateInput.shouldUpdateDateOnMonthYearChange;
+	const granularity = granularityProp ?? ui.dateInput.granularity;
+	const autoFixYear = autoFixYearProp ?? ui.dateInput.autoFixYear;
 	const normalizeByGranularity = useCallback((date) => {
 		if (granularity === "year") return date.set({
 			month: 1,
@@ -274,7 +287,6 @@ var DatePicker = ({ fullIso = true, granularity = "day", minValue, maxValue, ren
 		const staticSegments = getStaticCalendarDateSegments({
 			value: dateValue,
 			locale,
-			placeholder: props.placeholder,
 			shouldForceLeadingZeros,
 			isDisabled,
 			hidePlaceholder: as === "floating" && !dateValue

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

@@ -30,7 +30,18 @@ import { useDateRangePickerState, useRangeCalendarState } from "react-stately";
 var DateRangePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
 	const { t } = useTranslation();
-	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, className, hideSidebar, placeholder, inputClassName, hideLabel = ui.input.hideLabel, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, todayIconButtonSize = ui.dateInput.todayIconButtonSize, todayIconPlacement = ui.dateInput.todayIconPlacement, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, autoFixYear = ui.dateInput.autoFixYear, ...rest } = props;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, className, hideSidebar, placeholder, inputClassName, hideLabel: hideLabelProp, variant: variantProp, as: asProp, size: sizeProp, isClearable: isClearableProp, todayIcon: todayIconProp, todayIconButtonSize: todayIconButtonSizeProp, todayIconPlacement: todayIconPlacementProp, shouldForceLeadingZeros: shouldForceLeadingZerosProp, disableManualEntry: disableManualEntryProp, autoFixYear: autoFixYearProp, ...rest } = props;
+	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
+	const variant = variantProp ?? ui.input.variant;
+	const as = asProp ?? ui.input.as;
+	const size = sizeProp ?? ui.input.size;
+	const isClearable = isClearableProp ?? ui.input.isClearable;
+	const todayIcon = todayIconProp ?? ui.dateInput.todayIcon;
+	const todayIconButtonSize = todayIconButtonSizeProp ?? ui.dateInput.todayIconButtonSize;
+	const todayIconPlacement = todayIconPlacementProp ?? ui.dateInput.todayIconPlacement;
+	const shouldForceLeadingZeros = shouldForceLeadingZerosProp ?? ui.dateInput.shouldForceLeadingZeros;
+	const disableManualEntry = disableManualEntryProp ?? ui.dateInput.disableManualEntry;
+	const autoFixYear = autoFixYearProp ?? ui.dateInput.autoFixYear;
 	const [validationRangeError, setValidationRangeError] = useState();
 	const datePickerInputRef = useRef(null);
 	const dateRangePickerRef = useMemo(() => ({ get current() {
@@ -624,7 +635,6 @@ var DateRangePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput,
 			start: startDateValue,
 			end: endDateValue,
 			locale,
-			placeholder: props.placeholder,
 			shouldForceLeadingZeros,
 			isDisabled,
 			hidePlaceholder: as === "floating" && !hasProvidedRangeValue

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

@@ -24,7 +24,20 @@ import { useCalendarState, useDatePickerState } from "react-stately";
 //#region src/components/inputs/DateTime/DateTimePicker/DateTimePicker.tsx
 var DateTimePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
-	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, isTimeOptional, placeholder, inputClassName, hideLabel = ui.input.hideLabel, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, todayIconButtonSize = ui.dateInput.todayIconButtonSize, todayIconPlacement = ui.dateInput.todayIconPlacement, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, shouldUpdateDateOnMonthYearChange = ui.dateInput.shouldUpdateDateOnMonthYearChange, timeZone, autoFixYear = ui.dateInput.autoFixYear, format, setDateValueOnDateSelection = ui.dateInput.setDateValueOnDateSelection, ...rest } = props;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, isTimeOptional, placeholder, inputClassName, hideLabel: hideLabelProp, variant: variantProp, as: asProp, size: sizeProp, isClearable: isClearableProp, todayIcon: todayIconProp, todayIconButtonSize: todayIconButtonSizeProp, todayIconPlacement: todayIconPlacementProp, shouldForceLeadingZeros: shouldForceLeadingZerosProp, disableManualEntry: disableManualEntryProp, shouldUpdateDateOnMonthYearChange: shouldUpdateDateOnMonthYearChangeProp, timeZone, autoFixYear: autoFixYearProp, format, setDateValueOnDateSelection: setDateValueOnDateSelectionProp, ...rest } = props;
+	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
+	const variant = variantProp ?? ui.input.variant;
+	const as = asProp ?? ui.input.as;
+	const size = sizeProp ?? ui.input.size;
+	const isClearable = isClearableProp ?? ui.input.isClearable;
+	const todayIcon = todayIconProp ?? ui.dateInput.todayIcon;
+	const todayIconButtonSize = todayIconButtonSizeProp ?? ui.dateInput.todayIconButtonSize;
+	const todayIconPlacement = todayIconPlacementProp ?? ui.dateInput.todayIconPlacement;
+	const shouldForceLeadingZeros = shouldForceLeadingZerosProp ?? ui.dateInput.shouldForceLeadingZeros;
+	const disableManualEntry = disableManualEntryProp ?? ui.dateInput.disableManualEntry;
+	const shouldUpdateDateOnMonthYearChange = shouldUpdateDateOnMonthYearChangeProp ?? ui.dateInput.shouldUpdateDateOnMonthYearChange;
+	const autoFixYear = autoFixYearProp ?? ui.dateInput.autoFixYear;
+	const setDateValueOnDateSelection = setDateValueOnDateSelectionProp ?? ui.dateInput.setDateValueOnDateSelection;
 	let effectiveTimeZone = getLocalTimeZone();
 	if (timeZone) effectiveTimeZone = timeZone;
 	const formFieldProps = {
@@ -265,7 +278,6 @@ var DateTimePicker = ({ fullIso = true, renderStaticInput, ...props }) => {
 		const staticSegments = getStaticCalendarDateTimeSegments({
 			value: dateTimeValue,
 			locale,
-			placeholder: props.placeholder,
 			shouldForceLeadingZeros,
 			isDisabled,
 			hidePlaceholder: as === "floating" && !dateTimeValue

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

@@ -22,7 +22,13 @@ import { useTimeFieldState } from "react-stately";
 //#region src/components/inputs/DateTime/TimePicker/TimePicker.tsx
 var TimePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
-	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, placeholder, className, inputClassName, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, hideLabel = ui.input.hideLabel, isClearable = ui.input.isClearable, disableManualEntry = ui.dateInput.disableManualEntry, ...rest } = props;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, placeholder, className, inputClassName, variant: variantProp, as: asProp, size: sizeProp, hideLabel: hideLabelProp, isClearable: isClearableProp, disableManualEntry: disableManualEntryProp, ...rest } = props;
+	const variant = variantProp ?? ui.input.variant;
+	const as = asProp ?? ui.input.as;
+	const size = sizeProp ?? ui.input.size;
+	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
+	const isClearable = isClearableProp ?? ui.input.isClearable;
+	const disableManualEntry = disableManualEntryProp ?? ui.dateInput.disableManualEntry;
 	const formFieldProps = {
 		error,
 		label,
@@ -181,7 +187,6 @@ var TimePicker = ({ renderStaticInput, ...props }) => {
 		const staticSegments = getStaticTimeSegments({
 			value: timeValue,
 			locale,
-			placeholder: props.placeholder,
 			isDisabled,
 			hidePlaceholder: as === "floating" && !timeValue
 		});

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

@@ -6,13 +6,16 @@ import { PillButton } from "../../../buttons/PillButton/PillButton.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Button, ToggleButtonGroup } from "react-aria-components";
-import { Time } from "@internationalized/date";
+import { CalendarDateTime, Time } from "@internationalized/date";
 import { useDateFormatter } from "@react-aria/i18n";
 //#region src/components/inputs/DateTime/shared/CalendarHeader.tsx
 var HourCycle = {
 	12: "h12",
 	24: "h23"
 };
+var getTimeFormatterDate = (timeValue, timeZone) => {
+	return new CalendarDateTime(2e3, 1, 1, timeValue.hour, timeValue.minute).toDate(timeZone);
+};
 var CalendarHeader = ({ calendarState, datePickerState, prevButtonProps, nextButtonProps, includesTime, hourCycle, granularity = "day", toggleState, setToggleState }) => {
 	const formatter = useDateFormatter({
 		month: "long",
@@ -25,9 +28,7 @@ var CalendarHeader = ({ calendarState, datePickerState, prevButtonProps, nextBut
 	});
 	const year = calendarState.focusedDate.year.toString();
 	const month = formatter.format(calendarState.focusedDate.toDate(calendarState.timeZone));
-	const timeValue = datePickerState?.timeValue || new Time();
-	const date = /* @__PURE__ */ new Date();
-	date.setHours(timeValue.hour, timeValue.minute);
+	const date = getTimeFormatterDate(datePickerState?.timeValue || new Time(0, 0), calendarState.timeZone);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "inline-flex w-full items-center justify-between border-elevation-outline-default-1 border-b border-solid px-1",
 		children: [

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

@@ -7,29 +7,25 @@ interface StaticSegmentProps {
 interface StaticCalendarDateSegmentsProps extends StaticSegmentProps {
     value?: CalendarDate | null;
     locale: string;
-    placeholder?: string;
     shouldForceLeadingZeros?: boolean;
 }
 interface StaticCalendarDateTimeSegmentsProps extends StaticSegmentProps {
     value?: DateValue | null;
     locale: string;
-    placeholder?: string;
     shouldForceLeadingZeros?: boolean;
 }
 interface StaticDateRangeSegmentsProps extends StaticSegmentProps {
     start?: CalendarDate | null;
     end?: CalendarDate | null;
     locale: string;
-    placeholder?: string;
     shouldForceLeadingZeros?: boolean;
 }
 interface StaticTimeSegmentsProps extends StaticSegmentProps {
     value?: TimeValue | null;
     locale: string;
-    placeholder?: string;
 }
-export declare const getStaticCalendarDateSegments: ({ value, locale, placeholder, shouldForceLeadingZeros, isDisabled, hidePlaceholder, }: StaticCalendarDateSegmentsProps) => import("react/jsx-runtime").JSX.Element;
-export declare const getStaticCalendarDateTimeSegments: ({ value, locale, placeholder, shouldForceLeadingZeros, isDisabled, hidePlaceholder, }: StaticCalendarDateTimeSegmentsProps) => import("react/jsx-runtime").JSX.Element;
-export declare const getStaticDateRangeSegments: ({ start, end, locale, placeholder, shouldForceLeadingZeros, isDisabled, hidePlaceholder, }: StaticDateRangeSegmentsProps) => import("react/jsx-runtime").JSX.Element;
-export declare const getStaticTimeSegments: ({ value, locale, placeholder, isDisabled, hidePlaceholder, }: StaticTimeSegmentsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const getStaticCalendarDateSegments: ({ value, locale, shouldForceLeadingZeros, isDisabled, hidePlaceholder, }: StaticCalendarDateSegmentsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const getStaticCalendarDateTimeSegments: ({ value, locale, shouldForceLeadingZeros, isDisabled, hidePlaceholder, }: StaticCalendarDateTimeSegmentsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const getStaticDateRangeSegments: ({ start, end, locale, shouldForceLeadingZeros, isDisabled, hidePlaceholder, }: StaticDateRangeSegmentsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const getStaticTimeSegments: ({ value, locale, isDisabled, hidePlaceholder }: StaticTimeSegmentsProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -2,26 +2,26 @@ 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, placeholder, shouldForceLeadingZeros, isDisabled, hidePlaceholder }) => {
+var getStaticCalendarDateSegments = ({ value, locale, shouldForceLeadingZeros, isDisabled, hidePlaceholder }) => {
 	const hasValue = !!value;
-	return renderStaticSegments(value ? DateTimeUtils.formatCalendarDateLocalized(value, locale, { shouldForceLeadingZeros }) : placeholder ?? DateTimeUtils.getDatePlaceholder(locale, { shouldForceLeadingZeros }), {
+	return renderStaticSegments(value ? DateTimeUtils.formatCalendarDateLocalized(value, locale, { shouldForceLeadingZeros }) : DateTimeUtils.getDatePlaceholder(locale, { shouldForceLeadingZeros }), {
 		isPlaceholder: !hasValue,
 		isInputEmpty: !hasValue,
 		isDisabled,
 		hidePlaceholder
 	});
 };
-var getStaticCalendarDateTimeSegments = ({ value, locale, placeholder, shouldForceLeadingZeros, isDisabled, hidePlaceholder }) => {
+var getStaticCalendarDateTimeSegments = ({ value, locale, shouldForceLeadingZeros, isDisabled, hidePlaceholder }) => {
 	const hasValue = !!(value && "hour" in value);
-	return renderStaticSegments(hasValue ? DateTimeUtils.formatCalendarDateTimeLocalized(value, locale, { shouldForceLeadingZeros }) : placeholder ?? DateTimeUtils.getDateTimePlaceholder(locale, { shouldForceLeadingZeros }), {
+	return renderStaticSegments(hasValue ? DateTimeUtils.formatCalendarDateTimeLocalized(value, locale, { shouldForceLeadingZeros }) : DateTimeUtils.getDateTimePlaceholder(locale, { shouldForceLeadingZeros }), {
 		isPlaceholder: !hasValue,
 		isInputEmpty: !hasValue,
 		isDisabled,
 		hidePlaceholder
 	});
 };
-var getStaticDateRangeSegments = ({ start, end, locale, placeholder, shouldForceLeadingZeros, isDisabled, hidePlaceholder }) => {
-	const defaultPlaceholder = placeholder ?? DateTimeUtils.getDatePlaceholder(locale, { shouldForceLeadingZeros });
+var getStaticDateRangeSegments = ({ start, end, locale, shouldForceLeadingZeros, isDisabled, hidePlaceholder }) => {
+	const defaultPlaceholder = DateTimeUtils.getDatePlaceholder(locale, { shouldForceLeadingZeros });
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		renderStaticSegments(start ? DateTimeUtils.formatCalendarDateLocalized(start, locale, { shouldForceLeadingZeros }) : defaultPlaceholder, {
 			isPlaceholder: !start,
@@ -41,9 +41,9 @@ var getStaticDateRangeSegments = ({ start, end, locale, placeholder, shouldForce
 		})
 	] });
 };
-var getStaticTimeSegments = ({ value, locale, placeholder, isDisabled, hidePlaceholder }) => {
+var getStaticTimeSegments = ({ value, locale, isDisabled, hidePlaceholder }) => {
 	const hasValue = !!value;
-	return renderStaticSegments(value ? DateTimeUtils.formatTimeLocalized(value, locale) : placeholder ?? DateTimeUtils.getTimePlaceholder(locale), {
+	return renderStaticSegments(value ? DateTimeUtils.formatTimeLocalized(value, locale) : DateTimeUtils.getTimePlaceholder(locale), {
 		isPlaceholder: !hasValue,
 		isInputEmpty: !hasValue,
 		isDisabled,

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

@@ -0,0 +1 @@
+export {};

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

@@ -20,7 +20,13 @@ var NumberInputBase = (props) => {
 	const ui = UIConfig.useConfig();
 	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
 	const inputRef = useRef(null);
-	const { ref, inputClassName, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, className, unit, isLoading, action, leadingIcon, trailingIcon, value, onChange, onBlur, formatOptions = ui.numberInput.formatOptions, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, hideLabel = ui.input.hideLabel, isClearable = ui.input.isClearable, autoFocusOnMount, ...rest } = props;
+	const { ref, inputClassName, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, className, unit, isLoading, action, leadingIcon, trailingIcon, value, onChange, onBlur, formatOptions: formatOptionsProp, variant: variantProp, as: asProp, size: sizeProp, hideLabel: hideLabelProp, isClearable: isClearableProp, autoFocusOnMount, ...rest } = props;
+	const formatOptions = formatOptionsProp ?? ui.numberInput.formatOptions;
+	const variant = variantProp ?? ui.input.variant;
+	const as = asProp ?? ui.input.as;
+	const size = sizeProp ?? ui.input.size;
+	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
+	const isClearable = isClearableProp ?? ui.input.isClearable;
 	const numberFieldRef = useRef(null);
 	const { isFocusVisible } = useFocusVisible();
 	const { locale } = useLocale();

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

@@ -20,7 +20,11 @@ var TextAreaBase = (props) => {
 	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
 	const inputSideCva = UIStyle.useCva("input.sideCva", inputSide);
 	const textAreaWrapperCva = UIStyle.useCva("textArea.wrapperCva", textAreaWrapper);
-	const { ref, className, inputClassName, error, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, value, onChange, onBlur, as = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, isClearable = ui.input.isClearable, ...rest } = props;
+	const { ref, className, inputClassName, error, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, value, onChange, onBlur, as: asProp, hideLabel: hideLabelProp, variant: variantProp, isClearable: isClearableProp, ...rest } = props;
+	const as = asProp ?? ui.input.as;
+	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
+	const variant = variantProp ?? ui.input.variant;
+	const isClearable = isClearableProp ?? ui.input.isClearable;
 	const textFieldRef = useRef(null);
 	const { labelProps, inputProps } = useTextField({
 		...rest,

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

@@ -18,7 +18,12 @@ var TextInputBase = (props) => {
 	const ui = UIConfig.useConfig();
 	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
 	const inputRef = useRef(null);
-	const { ref, inputClassName, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, className, unit, isLoading, action, leadingIcon, trailingIcon, value, onChange, onBlur, as = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, size = ui.input.size, isClearable = ui.input.isClearable, autoFocusOnMount, ...rest } = props;
+	const { ref, inputClassName, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, className, unit, isLoading, action, leadingIcon, trailingIcon, value, onChange, onBlur, as: asProp, hideLabel: hideLabelProp, variant: variantProp, size: sizeProp, isClearable: isClearableProp, autoFocusOnMount, ...rest } = props;
+	const as = asProp ?? ui.input.as;
+	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
+	const variant = variantProp ?? ui.input.variant;
+	const size = sizeProp ?? ui.input.size;
+	const isClearable = isClearableProp ?? ui.input.isClearable;
 	const textFieldRef = useRef(null);
 	const { isFocusVisible } = useFocusVisible();
 	const { labelProps, inputProps } = useTextField({

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

@@ -94,7 +94,7 @@ function Autocomplete({ renderStaticInput, ...props }) {
 			dataAttributes,
 			renderStatic: true,
 			onStaticInteract: renderRealInput,
-			trailingClassName: "pl-1-5",
+			trailingClassName: "pl-1-5 gap-0!",
 			leadingContent: props.leadingContent && /* @__PURE__ */ jsx("div", {
 				className: "ml-input-side-default flex shrink-0 items-center",
 				children: props.leadingContent

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

@@ -94,7 +94,7 @@ function Select({ renderStaticInput, ...props }) {
 			labelPlacement: "content-row",
 			dataAttributes,
 			renderStatic: true,
-			trailingClassName: "pl-1-5",
+			trailingClassName: "pl-1-5 gap-0!",
 			onStaticInteract: renderRealInput,
 			leadingContent: props.leadingContent && /* @__PURE__ */ jsx("div", {
 				className: "ml-input-side-default flex shrink-0 items-center",

package/dist/components/inputs/Slider/Slider.js

@@ -10,7 +10,10 @@ import { Controller } from "react-hook-form";
 //#region src/components/inputs/Slider/Slider.tsx
 var SliderBase = (props) => {
 	const ui = UIConfig.useConfig();
-	const { label, tooltipText, helperText, isRequired, rightContent, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, unit, hideLabel = ui.input.hideLabel, minValue = ui.slider.minValue, maxValue = ui.slider.maxValue, ...rest } = props;
+	const { label, tooltipText, helperText, isRequired, rightContent, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, unit, hideLabel: hideLabelProp, minValue: minValueProp, maxValue: maxValueProp, ...rest } = props;
+	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
+	const minValue = minValueProp ?? ui.slider.minValue;
+	const maxValue = maxValueProp ?? ui.slider.maxValue;
 	const formFieldProps = {
 		error,
 		label,

package/dist/components/inputs/Toggle/Toggle.js

@@ -14,7 +14,8 @@ var ToggleBase = (props) => {
 	const toggleCva = UIStyle.useCva("toggle.cva", toggle);
 	const toggleTypographyMap = UIStyle.useMapper("toggle.typography", toggleTypography);
 	const toggleContentClassNameMap = UIStyle.useMapper("toggle.contentClassName", toggleContentClassName);
-	const { className, children, isDisabled, error, variant = ui.toggle.variant, ...rest } = props;
+	const { className, children, isDisabled, error, variant: variantProp, ...rest } = props;
+	const variant = variantProp ?? ui.toggle.variant;
 	const formFieldErrorProps = {
 		error,
 		isDisabled

package/package.json

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