@povio/ui 2.2.0 → 2.2.2

package/dist/{Checkbox.js → components/inputs/Checkbox/Checkbox.js}

@@ -1,9 +1,9 @@
-import { UIStyle } from "./uiStyle.context.js";
+import { UIStyle } from "../../../config/uiStyle.context.js";
+import { UIConfig } from "../../../config/uiConfig.context.js";
 import { checkboxIndicatorClass, checkboxTypography } from "./checkbox.cva.js";
-import { FormFieldError } from "./FormFieldError.js";
-import { CheckContent } from "./CheckContent.js";
-import { UIConfig } from "./uiConfig.context.js";
-import { CheckboxCheckmark } from "./CheckboxCheckmark2.js";
+import { FormFieldError } from "../FormField/FormFieldError.js";
+import { CheckContent } from "../shared/CheckContent.js";
+import { CheckboxCheckmark } from "./CheckboxCheckmark.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Checkbox } from "react-aria-components";
@@ -11,8 +11,8 @@ import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
 var CheckboxBase = (props) => {
 	const ui = UIConfig.useConfig();
-	const checkboxTypographyMap = UIStyle.useConfig()?.checkbox?.typography ?? checkboxTypography;
-	const { className, children, isDisabled, error, variant = ui.checkbox.variant, hideLabel = ui.input.hideLabel,...rest } = props;
+	const checkboxTypographyMap = UIStyle.useMapper("checkbox.typography", checkboxTypography);
+	const { className, children, isDisabled, error, variant = ui.checkbox.variant, hideLabel = ui.input.hideLabel, ...rest } = props;
 	const formFieldErrorProps = {
 		error,
 		isDisabled
@@ -39,7 +39,7 @@ var CheckboxBase = (props) => {
 };
 const Checkbox$1 = (props) => {
 	if ("formControl" in props && props.formControl) {
-		const { formControl, ref,...innerProps } = props;
+		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
 			control: formControl.control,
 			name: formControl.name,

package/dist/{CheckboxCheckmark2.js → components/inputs/Checkbox/CheckboxCheckmark.js}

@@ -1,12 +1,11 @@
-import { CheckboxCheckmarkIcon } from "./CheckboxCheckmark.js";
-import { CheckboxIndeterminateIcon } from "./CheckboxIndeterminate.js";
-import { UIStyle } from "./uiStyle.context.js";
+import { CheckboxCheckmarkIcon } from "../../../assets/icons/CheckboxCheckmark.js";
+import { CheckboxIndeterminateIcon } from "../../../assets/icons/CheckboxIndeterminate.js";
+import { UIStyle } from "../../../config/uiStyle.context.js";
 import { checkbox, checkboxIcon } from "./checkbox.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-const CheckboxCheckmark = ({ variant, className, selectedIcon: SelectedIcon = CheckboxCheckmarkIcon, indeterminateIcon: IndeterminateIcon = CheckboxIndeterminateIcon,...props }) => {
-	const uiStyle = UIStyle.useConfig();
-	const checkboxCva = uiStyle?.checkbox?.cva ?? checkbox;
-	const checkboxIconCva = uiStyle?.checkbox?.iconCva ?? checkboxIcon;
+const CheckboxCheckmark = ({ variant, className, selectedIcon: SelectedIcon = CheckboxCheckmarkIcon, indeterminateIcon: IndeterminateIcon = CheckboxIndeterminateIcon, ...props }) => {
+	const checkboxCva = UIStyle.useCva("checkbox.cva", checkbox);
+	const checkboxIconCva = UIStyle.useCva("checkbox.iconCva", checkboxIcon);
 	return /* @__PURE__ */ jsxs("div", {
 		className: checkboxCva({
 			variant,

package/dist/{checkbox.cva.js → components/inputs/Checkbox/checkbox.cva.js}

@@ -1,5 +1,5 @@
-import { uiGroupOutlineClass } from "./outline.clsx.js";
-import { compoundMapper } from "./compoundMapper.js";
+import { uiGroupOutlineClass } from "../../outline.clsx.js";
+import { compoundMapper } from "../../../utils/compoundMapper.js";
 import { cva } from "class-variance-authority";
 const checkbox = cva([
 	"flex items-center justify-center border-2",

package/dist/{DatePicker.js → components/inputs/DateTime/DatePicker/DatePicker.js}

@@ -1,24 +1,23 @@
-import { UIConfig } from "./uiConfig.context.js";
-import { Calendar } from "./Calendar2.js";
-import { DatePickerInput } from "./DatePickerInput.js";
-import { DateTimeDialog } from "./DateTimeDialog.js";
-import { DateTimeDialogFooter } from "./DateTimeDialogFooter.js";
-import { FormField } from "./FormField.js";
-import { TooltipWrapper } from "./TooltipWrapper.js";
-import { DateTimeUtils } from "./date-time.utils.js";
+import { UIConfig } from "../../../../config/uiConfig.context.js";
+import { Calendar } from "../shared/Calendar.js";
+import { DatePickerInput } from "../shared/DatePickerInput.js";
+import { DateTimeDialog } from "../shared/DateTimeDialog.js";
+import { DateTimeDialogFooter } from "../shared/DateTimeDialogFooter.js";
+import { FormField } from "../../FormField/FormField.js";
+import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
+import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useImperativeHandle, useMemo, useRef } from "react";
 import { useDatePicker, useLocale } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
-import { CalendarDate, createCalendar, getLocalTimeZone, toCalendarDate, today } from "@internationalized/date";
+import { createCalendar, getLocalTimeZone, toCalendarDate, today } from "@internationalized/date";
 import { DateTime } from "luxon";
 import { useCalendarState, useDatePickerState } from "react-stately";
-var PLACEHOLDER_VALUE = new CalendarDate(2024, 1, 1);
 var DatePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
-	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDirty, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, onChange, value, disableDropdown, className, placeholder, as = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry,...rest } = props;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDirty, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, onChange, value, disableDropdown, className, placeholder, as = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, ...rest } = props;
 	const formFieldProps = {
 		error,
 		label,
@@ -114,10 +113,7 @@ var DatePickerBase = (props) => {
 				ref: mergeRefs(ref, datePickerInputRef),
 				as,
 				groupProps,
-				fieldProps: {
-					...fieldProps,
-					placeholderValue: PLACEHOLDER_VALUE
-				},
+				fieldProps,
 				buttonProps,
 				isDirty,
 				isDisabled,
@@ -152,7 +148,7 @@ var DatePickerBase = (props) => {
 		})
 	});
 };
-const DatePicker = ({ fullIso = true, minValue, maxValue,...props }) => {
+const DatePicker = ({ fullIso = true, minValue, maxValue, ...props }) => {
 	const formatCalendarDate = (calendarDate) => {
 		if (calendarDate === null) return null;
 		if (fullIso) return DateTimeUtils.fromCalendarDateToUTCISO(calendarDate);
@@ -170,7 +166,7 @@ const DatePicker = ({ fullIso = true, minValue, maxValue,...props }) => {
 		maxValue: typeof maxValue === "string" ? parseCalendarDate(maxValue) : maxValue
 	};
 	if ("formControl" in props && props.formControl) {
-		const { formControl, ref,...innerProps } = props;
+		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
 			control: formControl.control,
 			name: formControl.name,

package/dist/{DateRangePicker.js → components/inputs/DateTime/DateRangePicker/DateRangePicker.js}

@@ -1,13 +1,13 @@
-import { Typography } from "./Typography.js";
-import { UIConfig } from "./uiConfig.context.js";
-import { ns } from "./i18n.js";
-import { DatePickerInput } from "./DatePickerInput.js";
-import { DateTimeDialog } from "./DateTimeDialog.js";
-import { DateTimeDialogFooter } from "./DateTimeDialogFooter.js";
-import { FormField } from "./FormField.js";
-import { TooltipWrapper } from "./TooltipWrapper.js";
-import { DateTimeUtils } from "./date-time.utils.js";
-import { RangeCalendar } from "./RangeCalendar.js";
+import { Typography } from "../../../text/Typography/Typography.js";
+import { UIConfig } from "../../../../config/uiConfig.context.js";
+import { ns } from "../../../../config/i18n.js";
+import { DatePickerInput } from "../shared/DatePickerInput.js";
+import { DateTimeDialog } from "../shared/DateTimeDialog.js";
+import { DateTimeDialogFooter } from "../shared/DateTimeDialogFooter.js";
+import { FormField } from "../../FormField/FormField.js";
+import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
+import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
+import { RangeCalendar } from "../shared/RangeCalendar.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useCallback, useImperativeHandle, useMemo, useRef, useState } from "react";
@@ -15,15 +15,14 @@ import { Button } from "react-aria-components";
 import { useDateRangePicker, useLocale as useLocale$1 } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
-import { CalendarDate, createCalendar, endOfMonth, endOfWeek, endOfYear, getLocalTimeZone, startOfMonth, startOfWeek, startOfYear, toCalendarDate, today } from "@internationalized/date";
+import { createCalendar, endOfMonth, endOfWeek, endOfYear, getLocalTimeZone, startOfMonth, startOfWeek, startOfYear, toCalendarDate, today } from "@internationalized/date";
 import { DateTime } from "luxon";
 import { useDateRangePickerState, useRangeCalendarState } from "react-stately";
 import { useTranslation } from "react-i18next";
-var PLACEHOLDER_VALUE = new CalendarDate(2024, 1, 1);
 var DateRangePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
 	const { t } = useTranslation();
-	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, value, disableDropdown, className, hideSidebar, placeholder, hideLabel = ui.input.hideLabel, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry,...rest } = props;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, value, disableDropdown, className, hideSidebar, placeholder, hideLabel = ui.input.hideLabel, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, ...rest } = props;
 	const [validationRangeError, setValidationRangeError] = useState();
 	const datePickerInputRef = useRef(null);
 	const dateRangePickerRef = useMemo(() => ({ get current() {
@@ -464,14 +463,8 @@ var DateRangePickerBase = (props) => {
 				ref: mergeRefs(ref, datePickerInputRef),
 				as,
 				groupProps,
-				fieldProps: {
-					...startFieldProps,
-					placeholderValue: PLACEHOLDER_VALUE
-				},
-				endFieldProps: {
-					...endFieldProps,
-					placeholderValue: PLACEHOLDER_VALUE
-				},
+				fieldProps: startFieldProps,
+				endFieldProps,
 				buttonProps,
 				isDisabled,
 				isInvalid: !!error,
@@ -534,7 +527,7 @@ var DateRangePickerBase = (props) => {
 		})
 	});
 };
-const DateRangePicker = ({ fullIso = true, minValue, maxValue,...props }) => {
+const DateRangePicker = ({ fullIso = true, minValue, maxValue, ...props }) => {
 	const formatDateRange = (range) => {
 		if (!range?.start || !range?.end) return null;
 		if (fullIso) return {
@@ -574,7 +567,7 @@ const DateRangePicker = ({ fullIso = true, minValue, maxValue,...props }) => {
 		maxValue: typeof maxValue === "string" ? parseCalendarDate(maxValue) : maxValue
 	};
 	if ("formControl" in props && props.formControl) {
-		const { formControl, ref,...innerProps } = props;
+		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
 			control: formControl.control,
 			name: formControl.name,

package/dist/{DateTimePicker.js → components/inputs/DateTime/DateTimePicker/DateTimePicker.js}

@@ -1,22 +1,21 @@
-import { UIConfig } from "./uiConfig.context.js";
-import { Calendar } from "./Calendar2.js";
-import { DatePickerInput } from "./DatePickerInput.js";
-import { DateTimeDialog } from "./DateTimeDialog.js";
-import { DateTimeDialogFooter } from "./DateTimeDialogFooter.js";
-import { FormField } from "./FormField.js";
-import { TooltipWrapper } from "./TooltipWrapper.js";
-import { DateTimeUtils } from "./date-time.utils.js";
+import { UIConfig } from "../../../../config/uiConfig.context.js";
+import { Calendar } from "../shared/Calendar.js";
+import { DatePickerInput } from "../shared/DatePickerInput.js";
+import { DateTimeDialog } from "../shared/DateTimeDialog.js";
+import { DateTimeDialogFooter } from "../shared/DateTimeDialogFooter.js";
+import { FormField } from "../../FormField/FormField.js";
+import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
+import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useImperativeHandle, useMemo, useRef } from "react";
 import { useDatePicker, useLocale } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
-import { CalendarDateTime, Time, createCalendar, getLocalTimeZone, now, toCalendarDateTime, today } from "@internationalized/date";
+import { Time, createCalendar, getLocalTimeZone, now, toCalendarDateTime, today } from "@internationalized/date";
 import { useCalendarState, useDatePickerState } from "react-stately";
-var PLACEHOLDER_VALUE = new CalendarDateTime(2024, 1, 1);
 var DateTimePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
-	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, value, disableDropdown, isTimeOptional, placeholder, hideLabel = ui.input.hideLabel, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry,...rest } = props;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, value, disableDropdown, isTimeOptional, placeholder, hideLabel = ui.input.hideLabel, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, ...rest } = props;
 	const formFieldProps = {
 		error,
 		label,
@@ -129,7 +128,6 @@ var DateTimePickerBase = (props) => {
 				groupProps,
 				fieldProps: {
 					...fieldProps,
-					placeholderValue: PLACEHOLDER_VALUE,
 					onBlur: (e) => {
 						fieldProps.onBlur?.(e);
 						onInputBlur(e);
@@ -173,7 +171,7 @@ var DateTimePickerBase = (props) => {
 		})
 	});
 };
-const DateTimePicker = ({ fullIso = true,...props }) => {
+const DateTimePicker = ({ fullIso = true, ...props }) => {
 	const formatDateValue = (dateValue) => {
 		if (dateValue === null) return null;
 		if (fullIso) return DateTimeUtils.fromCalendarDateTimeToUTCISO(dateValue);
@@ -184,7 +182,7 @@ const DateTimePicker = ({ fullIso = true,...props }) => {
 		return DateTimeUtils.fromUTCISOToCalendarDateTime(isoString);
 	};
 	if ("formControl" in props && props.formControl) {
-		const { formControl, ref,...innerProps } = props;
+		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
 			control: formControl.control,
 			name: formControl.name,

package/dist/{TimePicker.js → components/inputs/DateTime/TimePicker/TimePicker.js}

@@ -1,11 +1,11 @@
-import { UIConfig } from "./uiConfig.context.js";
-import { TimePickerForm } from "./TimePickerForm.js";
-import { DateTimeDialog } from "./DateTimeDialog.js";
-import { DateTimeDialogFooter } from "./DateTimeDialogFooter.js";
-import { FormField } from "./FormField.js";
-import { TooltipWrapper } from "./TooltipWrapper.js";
-import { DateTimeUtils } from "./date-time.utils.js";
-import { TimePickerInput } from "./TimePickerInput.js";
+import { UIConfig } from "../../../../config/uiConfig.context.js";
+import { TimePickerForm } from "../shared/TimePickerForm.js";
+import { DateTimeDialog } from "../shared/DateTimeDialog.js";
+import { DateTimeDialogFooter } from "../shared/DateTimeDialogFooter.js";
+import { FormField } from "../../FormField/FormField.js";
+import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
+import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
+import { TimePickerInput } from "../shared/TimePickerInput.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { useLocale, useTimeField } from "react-aria";
@@ -16,7 +16,7 @@ import { DateTime } from "luxon";
 import { useTimeFieldState } from "react-stately";
 var TimePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
-	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, value, disableDropdown, placeholder, 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, value, disableDropdown, placeholder, 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 formFieldProps = {
 		error,
 		label,
@@ -134,7 +134,7 @@ const TimePicker = (props) => {
 		return toTime(DateTimeUtils.fromISOtoZonedDateTime(isoString));
 	};
 	if ("formControl" in props && props.formControl) {
-		const { formControl, ref,...innerProps } = props;
+		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
 			control: formControl.control,
 			name: formControl.name,

package/dist/{Calendar2.js → components/inputs/DateTime/shared/Calendar.js}

@@ -7,7 +7,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useState } from "react";
 import { useCalendar } from "@react-aria/calendar";
-const Calendar = ({ className, includesTime, datePickerState, hourCycle, onApply,...props }) => {
+const Calendar = ({ className, includesTime, datePickerState, hourCycle, onApply, ...props }) => {
 	const [toggleState, setToggleState] = useState(null);
 	const { calendarProps, prevButtonProps, nextButtonProps } = useCalendar(props.calendarProps, props.state);
 	const handleDateChange = () => {

package/dist/{CalendarCell.js → components/inputs/DateTime/shared/CalendarCell.js}

@@ -1,4 +1,4 @@
-import { Typography } from "./Typography.js";
+import { Typography } from "../../../text/Typography/Typography.js";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useCallback, useMemo, useRef } from "react";
@@ -9,7 +9,7 @@ import { useFocusRing } from "@react-aria/focus";
 var isRange = (state) => {
 	return "highlightedRange" in state;
 };
-const CalendarCell = ({ state, onApply, shouldCloseOnSelect = true, onDateSelection, onDateHover, rangeSelection, hoverDate, onKeyboardNavigation,...props }) => {
+const CalendarCell = ({ state, onApply, shouldCloseOnSelect = true, onDateSelection, onDateHover, rangeSelection, hoverDate, onKeyboardNavigation, ...props }) => {
 	const ref = useRef(null);
 	const { cellProps, buttonProps, formattedDate, isSelected, isDisabled, isOutsideVisibleRange } = useCalendarCell(props, state, ref);
 	const { focusProps } = useFocusRing();

package/dist/{CalendarGrid.js → components/inputs/DateTime/shared/CalendarGrid.js}

@@ -1,4 +1,4 @@
-import { Typography } from "./Typography.js";
+import { Typography } from "../../../text/Typography/Typography.js";
 import { CalendarCell } from "./CalendarCell.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
@@ -11,7 +11,7 @@ var WEEK_INDICES = [
 	4,
 	5
 ];
-const CalendarGrid = ({ state, onApply, shouldCloseOnSelect, offset = {}, onDateSelection, onDateHover, rangeSelection, hoverDate, onKeyboardNavigation, className, calendarSide,...props }) => {
+const CalendarGrid = ({ state, onApply, shouldCloseOnSelect, offset = {}, onDateSelection, onDateHover, rangeSelection, hoverDate, onKeyboardNavigation, className, calendarSide, ...props }) => {
 	const { gridProps, headerProps, weekDays } = useCalendarGrid({
 		...props,
 		weekdayStyle: "short"

package/dist/{CalendarHeader.js → components/inputs/DateTime/shared/CalendarHeader.js}

@@ -1,8 +1,8 @@
-import { ArrowDropDownIcon } from "./ArrowDropDown.js";
-import { ArrowDropUpIcon } from "./ArrowDropUp.js";
-import { ChevronLeftIcon } from "./ChevronLeft.js";
-import { ChevronRightIcon } from "./ChevronRight.js";
-import { PillButton } from "./PillButton.js";
+import { ArrowDropDownIcon } from "../../../../assets/icons/ArrowDropDown.js";
+import { ArrowDropUpIcon } from "../../../../assets/icons/ArrowDropUp.js";
+import { ChevronLeftIcon } from "../../../../assets/icons/ChevronLeft.js";
+import { ChevronRightIcon } from "../../../../assets/icons/ChevronRight.js";
+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";

package/dist/{CalendarSelectHeader.js → components/inputs/DateTime/shared/CalendarSelectHeader.js}

@@ -1,12 +1,12 @@
-import { ArrowDropDownIcon } from "./ArrowDropDown.js";
-import { ChevronLeftIcon } from "./ChevronLeft.js";
-import { ChevronRightIcon } from "./ChevronRight.js";
-import { ChevronsLeftIcon } from "./ChevronsLeft.js";
-import { ChevronsRightIcon } from "./ChevronsRight.js";
-import { InlineIconButton } from "./InlineIconButton.js";
-import { PillButton } from "./PillButton.js";
-import { ns } from "./i18n.js";
-import { Select } from "./Select.js";
+import { ArrowDropDownIcon } from "../../../../assets/icons/ArrowDropDown.js";
+import { ChevronLeftIcon } from "../../../../assets/icons/ChevronLeft.js";
+import { ChevronRightIcon } from "../../../../assets/icons/ChevronRight.js";
+import { ChevronsLeftIcon } from "../../../../assets/icons/ChevronsLeft.js";
+import { ChevronsRightIcon } from "../../../../assets/icons/ChevronsRight.js";
+import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
+import { PillButton } from "../../../buttons/PillButton/PillButton.js";
+import { ns } from "../../../../config/i18n.js";
+import { Select } from "../../Selection/Select/Select.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { useDateFormatter } from "@react-aria/i18n";

package/dist/{DateField.js → components/inputs/DateTime/shared/DateField.js}

@@ -5,7 +5,7 @@ import { useEffect, useImperativeHandle, useRef } from "react";
 import { useDateField, useLocale } from "react-aria";
 import { createCalendar } from "@internationalized/date";
 import { useDateFieldState } from "react-stately";
-const DateField = ({ ref, onClearChange, hidePlaceholder, isDisabled, disableManualEntry,...props }) => {
+const DateField = ({ ref, onClearChange, hidePlaceholder, isDisabled, disableManualEntry, ...props }) => {
 	const { locale } = useLocale();
 	const state = useDateFieldState({
 		...props,

package/dist/{DatePickerInput.js → components/inputs/DateTime/shared/DatePickerInput.js}

@@ -1,24 +1,23 @@
-import { CalendarIcon } from "./Calendar.js";
-import { DateTimeIcon } from "./DateTime.js";
-import { UIStyle } from "./uiStyle.context.js";
-import { Typography } from "./Typography.js";
-import { IconButton } from "./IconButton.js";
-import { InlineIconButton } from "./InlineIconButton.js";
-import { TodayIcon } from "./Today.js";
+import { CalendarIcon } from "../../../../assets/icons/Calendar.js";
+import { DateTimeIcon } from "../../../../assets/icons/DateTime.js";
+import { UIStyle } from "../../../../config/uiStyle.context.js";
+import { Typography } from "../../../text/Typography/Typography.js";
+import { IconButton } from "../../../buttons/IconButton/IconButton.js";
+import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
+import { TodayIcon } from "../../../../assets/icons/Today.js";
 import { DateField } from "./DateField.js";
-import { inputSide, useInputCva } from "./input.cva.js";
-import { FormFieldLabel } from "./FormFieldLabel.js";
-import { InputClear } from "./InputClear.js";
+import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
+import { InputClear } from "../../shared/InputClear.js";
+import { inputBase, inputSize } from "../../shared/input.cva.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { useCallback, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { useCallback, useImperativeHandle, useRef, useState } from "react";
 import { Button } from "react-aria-components";
 import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
 import { getLocalTimeZone, now, toCalendarDateTime, today } from "@internationalized/date";
-import useMeasure from "react-use-measure";
-const DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, isClearable, headerProps, todayIcon, isDirty, isRequired, disableManualEntry, placeholder, onOpenDropdown,...props }) => {
-	const inputCva = useInputCva();
-	const inputSideCva = UIStyle.useConfig()?.input?.sideCva ?? inputSide;
+const DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, isClearable, headerProps, todayIcon, isDirty, isRequired, disableManualEntry, placeholder, onOpenDropdown, ...props }) => {
+	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
+	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
 	const [canClear, setCanClear] = useState(false);
 	const { hoverProps, isHovered } = useHover({ isDisabled });
 	const [isFocused, setIsFocused] = useState(false);
@@ -33,8 +32,6 @@ const DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, butto
 	const dateFieldRef = useRef(null);
 	const endDateFieldRef = useRef(null);
 	const containerRef = useRef(null);
-	const [labelContentRef, { width: labelWidth }] = useMeasure();
-	const [trailingContentRef, { width: trailingWidth }] = useMeasure();
 	useImperativeHandle(ref, () => ({
 		clear: () => {
 			dateFieldRef.current?.clearField();
@@ -66,30 +63,11 @@ const DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, butto
 		}
 	};
 	const hidePlaceholder = as === "floating" && !fieldProps.value && !isFocused;
-	const style = useMemo(() => {
-		return {
-			paddingLeft: as === "filter" ? `calc(var(${inputSideCva({
-				size,
-				type: "var"
-			})}) + ${labelWidth}px)` : "0px",
-			paddingRight: `calc(var(${inputSideCva({
-				size,
-				type: "var"
-			})}) + ${trailingWidth}px)`
-		};
-	}, [
-		labelWidth,
-		trailingWidth,
-		as,
-		size,
-		inputSideCva
-	]);
 	return /* @__PURE__ */ jsxs("div", {
 		ref: containerRef,
-		className: inputCva({
+		className: inputBaseCva({
 			variant,
 			as,
-			size,
 			...props,
 			className: clsx("group/date-picker-content relative flex min-w-input-width-min-width items-center justify-between gap-2")
 		}),
@@ -107,63 +85,70 @@ const DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, butto
 		...groupProps,
 		...focusWithinProps,
 		...hoverProps,
-		children: [/* @__PURE__ */ jsxs("div", { children: [as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
-			ref: labelContentRef,
-			as,
-			...headerProps
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: clsx(inputSizeCva({
+				size,
+				as
+			}), "flex w-full items-center gap-input-gap-input-text-to-elements pr-0!"),
+			children: [as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
+				as,
+				...headerProps
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-input-gap-input-text-to-elements",
+				children: [
+					disableManualEntry && /* @__PURE__ */ jsx(Button, {
+						onPress: onOpenDropdown,
+						className: "absolute inset-0 z-0",
+						isDisabled
+					}),
+					todayIcon && /* @__PURE__ */ jsx(IconButton, {
+						label: "",
+						icon: TodayIcon,
+						size: "none",
+						onPress: onToday,
+						className: "relative z-1"
+					}),
+					disableManualEntry && placeholder && !fieldProps.value ? /* @__PURE__ */ jsx(Typography, {
+						size: "label-1",
+						className: "text-text-default-3",
+						children: placeholder
+					}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DateField, {
+						ref: dateFieldRef,
+						...fieldProps,
+						isDisabled,
+						isInvalid,
+						onClearChange,
+						hidePlaceholder,
+						disableManualEntry
+					}), endFieldProps && /* @__PURE__ */ jsxs(Fragment, { children: [!((as === "floating" || as === "filter") && hidePlaceholder) && /* @__PURE__ */ jsx("span", {
+						className: clsx("pointer-events-none select-none", isDisabled && "text-interactive-text-secondary-disabled"),
+						children: "–"
+					}), /* @__PURE__ */ jsx(DateField, {
+						ref: endDateFieldRef,
+						...endFieldProps,
+						isDisabled,
+						isInvalid,
+						onClearChange,
+						hidePlaceholder,
+						disableManualEntry
+					})] })] })
+				]
+			})]
 		}), /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-2",
-			style,
-			children: [
-				disableManualEntry && /* @__PURE__ */ jsx(Button, {
-					onPress: onOpenDropdown,
-					className: "absolute inset-0 z-0",
-					isDisabled
-				}),
-				todayIcon && /* @__PURE__ */ jsx(IconButton, {
-					label: "",
-					icon: TodayIcon,
-					size: "none",
-					onPress: onToday,
-					className: "relative z-1"
-				}),
-				disableManualEntry && placeholder && !fieldProps.value ? /* @__PURE__ */ jsx(Typography, {
-					size: "label-1",
-					className: "text-text-default-3",
-					children: placeholder
-				}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DateField, {
-					ref: dateFieldRef,
-					...fieldProps,
-					isDisabled,
-					isInvalid,
-					onClearChange,
-					hidePlaceholder,
-					disableManualEntry
-				}), endFieldProps && /* @__PURE__ */ jsxs(Fragment, { children: [!((as === "floating" || as === "filter") && hidePlaceholder) && /* @__PURE__ */ jsx("span", {
-					className: clsx("pointer-events-none select-none", isDisabled && "text-interactive-text-secondary-disabled"),
-					children: "–"
-				}), /* @__PURE__ */ jsx(DateField, {
-					ref: endDateFieldRef,
-					...endFieldProps,
-					isDisabled,
-					isInvalid,
-					onClearChange,
-					hidePlaceholder,
-					disableManualEntry
-				})] })] })
-			]
-		})] }), /* @__PURE__ */ jsxs("div", {
-			ref: trailingContentRef,
-			className: clsx("absolute top-1/2 flex -translate-y-1/2 items-center gap-2", inputSideCva({
+			className: clsx(inputSizeCva({
 				size,
-				type: "right"
-			})),
-			children: [isClearable && canClear && /* @__PURE__ */ jsx(InputClear, { onClear }), (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(InlineIconButton, {
+				as
+			}), "flex items-center gap-input-gap-trailing-elements py-0! pl-0!"),
+			children: [isClearable && /* @__PURE__ */ jsx(InputClear, {
+				onClear,
+				show: canClear
+			}), (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(InlineIconButton, {
 				label: "",
 				color: "secondary",
 				...buttonProps,
 				icon: isDateTime ? DateTimeIcon : CalendarIcon,
-				isDisabled
+				isDisabled,
+				className: "border-0!"
 			})]
 		})]
 	});

package/dist/{DateTimeDialog.js → components/inputs/DateTime/shared/DateTimeDialog.js}

@@ -1,7 +1,7 @@
-import { BottomSheet } from "./BottomSheet.js";
-import { useBreakpoint } from "./useBreakpoint.js";
-import { FormFieldHeader } from "./FormFieldHeader.js";
-import { FormFieldHeaderClose } from "./FormFieldHeaderClose.js";
+import { BottomSheet } from "../../../overlays/BottomSheet/BottomSheet.js";
+import { useBreakpoint } from "../../../../hooks/useBreakpoint.js";
+import { FormFieldHeader } from "../../FormField/FormFieldHeader.js";
+import { FormFieldHeaderClose } from "../../FormField/FormFieldHeaderClose.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Dialog, Popover } from "react-aria-components";
 const DateTimeDialog = ({ hideSidebar, children, footer, sidebar, label, isOpen, triggerRef, dialogProps, onOpenChange }) => {

package/dist/{DateTimeDialogFooter.js → components/inputs/DateTime/shared/DateTimeDialogFooter.js}

@@ -1,5 +1,5 @@
-import { TextButton } from "./TextButton.js";
-import { ns } from "./i18n.js";
+import { TextButton } from "../../../buttons/TextButton/TextButton.js";
+import { ns } from "../../../../config/i18n.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useTranslation } from "react-i18next";

package/dist/{MonthPicker.js → components/inputs/DateTime/shared/MonthPicker.js}

@@ -1,4 +1,4 @@
-import { Typography } from "./Typography.js";
+import { Typography } from "../../../text/Typography/Typography.js";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { ListBox, ListBoxItem } from "react-aria-components";