@flikk/ui 1.0.0-beta.29 → 1.0.0-beta.30

package/dist/components/forms/DatePicker/DatePicker.types.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import type { SurfaceElevation } from "../../../theme/SurfaceContext";
 /**
  * Size variants for DatePicker components
  */
@@ -93,6 +94,13 @@ export interface DatePickerProps extends Omit<React.HTMLAttributes<HTMLDivElemen
     placement?: DatePickerPlacement;
     /** Offset from trigger element */
     offset?: number;
+    /**
+     * Pin the popover surface elevation rung (overrides the automatic relative lift).
+     * A rung number (1–8) or a semantic alias ("surface"/"raised"/"overlay"…).
+     */
+    elevation?: SurfaceElevation;
+    /** `false` opts out of the relative lift — paints at the popover's base rung. */
+    lift?: boolean;
     /** Children (for compound component usage) */
     children?: React.ReactNode;
 }
@@ -124,6 +132,13 @@ export interface DatePickerBodyProps {
     placement?: DatePickerPlacement;
     offset?: number;
     presets?: DateRangePreset[];
+    /**
+     * Pin the popover surface elevation rung (overrides the automatic relative lift).
+     * A rung number (1–8) or a semantic alias ("surface"/"raised"/"overlay"…).
+     */
+    elevation?: SurfaceElevation;
+    /** `false` opts out of the relative lift — paints at the popover's base rung. */
+    lift?: boolean;
     children?: React.ReactNode;
 }
 /**

package/dist/components/forms/DatePicker/DatePickerBody.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React__default, { useContext, useState, useCallback, useMemo, useEffect } from 'react';
 import { AnimatePresence, motion } from 'motion/react';
@@ -6,19 +7,23 @@ import { Calendar } from '../../core/Calendar/Calendar.js';
 import '../../core/Calendar/CalendarMini/CalendarMini.js';
 import { Button } from '../../core/Button/Button.js';
 import { cn } from '../../../utils/cn.js';
-import { DatePickerContext } from './DatePicker.js';
+import { DatePickerContext } from './DatePickerContext.js';
 import { DatePickerPresets } from './DatePickerPresets.js';
 import { useSelectPortal } from '../../../hooks/useSelectPortal.js';
 import { formatDateCustom } from '../../../utils/dateUtils.js';
 import { createDropdownAnimations } from './DatePicker.animations.js';
 import { useIsClient } from '../../../hooks/useIsClient.js';
 import { useDarkMode } from '../../../hooks/useDarkMode.js';
+import { useSurfaceElevation, SurfaceProvider, surfaceClasses } from '../../../theme/SurfaceContext.js';
 
 /**
  * DatePicker Body Component - contains the Calendar and optional Presets
  * Uses portal positioning like Select component
  */
-const DatePickerBody = ({ isOpen, className, onClose, portal = true, placement = "bottom-start", offset = 4, presets, children, }) => {
+const DatePickerBody = ({ isOpen, className, onClose, portal = true, placement = "bottom-start", offset = 4, presets, elevation, lift, children, }) => {
+    // Relative elevation: the popover lifts above its host surface (overlay base = 5)
+    // so a DatePicker inside a Popover/Modal still reads as a higher plane.
+    const surfaceLevel = useSurfaceElevation({ baseRung: 5, offset: 2, elevation, lift });
     const context = useContext(DatePickerContext);
     if (!context) {
         throw new Error("DatePickerBody must be used within a DatePicker");
@@ -165,7 +170,7 @@ const DatePickerBody = ({ isOpen, className, onClose, portal = true, placement =
             document.removeEventListener("keydown", handleKeyDown);
         };
     }, [isOpen, onClose]);
-    const contentElement = (jsx(AnimatePresence, { mode: "wait", children: isOpen && (jsxs(motion.div, { ref: combinedRef, className: cn(showPresets ? theme.bodyWithPresetsStyle : theme.bodyStyle, className), style: {
+    const contentElement = (jsx(AnimatePresence, { mode: "wait", children: isOpen && (jsx(motion.div, { ref: combinedRef, className: cn(surfaceClasses(surfaceLevel, { translucent: true, shadow: !showPresets }), showPresets ? theme.bodyWithPresetsStyle : theme.bodyStyle, className), style: {
                 ...cssVariables,
                 ...(portal
                     ? {
@@ -174,26 +179,26 @@ const DatePickerBody = ({ isOpen, className, onClose, portal = true, placement =
                         minWidth: `${position.width}px`,
                     }
                     : {}),
-            }, variants: animations, initial: "initial", animate: isReady ? "visible" : "initial", exit: "exit", children: [showPresets && presets && (jsx(DatePickerPresets, { presets: presets, setTempRange: setTempRange, onPresetSelect: handlePresetSelect })), jsx("div", { className: "flex flex-col flex-1", children: mode === "range" ? (
-                    // Dual calendar for range mode
-                    jsxs(Fragment, { children: [jsx("div", { className: "flex justify-between items-start gap-6 p-4", children: children || (jsxs(Fragment, { children: [jsx("div", { className: "flex-1 min-w-fit", children: jsx(Calendar, { mode: "range", value: tempRange, onChange: (value) => {
-                                                    setTempRange(value); // Update temp state only
-                                                }, viewDate: leftCalendarDate, onViewDateChange: setLeftCalendarDate, onNavigatePrev: handleNavigatePrev, onNavigateNext: null, minDate: minDate, maxDate: maxDate, isDateDisabled: isDateDisabled, showToday: showToday, selectTodayByDefault: selectTodayByDefault, weekdays: weekdays, months: months, yearRange: yearRange, size: "md" }) }), jsx("div", { className: "flex-1 min-w-fit", children: jsx(Calendar, { mode: "range", value: tempRange, onChange: (value) => {
-                                                    setTempRange(value); // Update temp state only
-                                                }, viewDate: rightCalendarDate, onViewDateChange: (newDate) => {
-                                                    // Adjust left calendar when right calendar changes
-                                                    const adjustedLeft = new Date(newDate);
-                                                    adjustedLeft.setMonth(adjustedLeft.getMonth() - 1);
-                                                    setLeftCalendarDate(adjustedLeft);
-                                                }, onNavigatePrev: null, onNavigateNext: handleNavigateNext, minDate: minDate, maxDate: maxDate, isDateDisabled: isDateDisabled, showToday: showToday, selectTodayByDefault: false, weekdays: weekdays, months: months, yearRange: yearRange, size: "md" }) })] })) }), jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-t border-[var(--color-border)]", children: [jsx("div", { className: "text-sm text-[var(--color-text-muted)]", children: formatRangeDisplay(tempRange) }), jsxs("div", { className: "flex items-center gap-2", children: [jsx(Button, { variant: "outline", color: "neutral", size: "sm", onClick: handleCancel, children: "Cancel" }), jsx(Button, { variant: "filled", size: "sm", onClick: handleApply, disabled: !(tempRange === null || tempRange === void 0 ? void 0 : tempRange.start) || !(tempRange === null || tempRange === void 0 ? void 0 : tempRange.end), children: "Apply" })] })] })] })) : (
-                    // Single calendar for single mode
-                    jsx("div", { className: "flex-1 p-4", children: children || (jsx(Calendar, { mode: "single", value: selectedValue, onChange: (value) => {
-                                handleDateSelect(value);
-                                onClose === null || onClose === void 0 ? void 0 : onClose();
-                            }, minDate: minDate, maxDate: maxDate, isDateDisabled: isDateDisabled, showToday: showToday, selectTodayByDefault: selectTodayByDefault, weekdays: weekdays, months: months, yearRange: yearRange, size: "md" })) })) })] })) }));
+            }, variants: animations, initial: "initial", animate: isReady ? "visible" : "initial", exit: "exit", children: jsxs(SurfaceProvider, { level: surfaceLevel, children: [showPresets && presets && (jsx(DatePickerPresets, { presets: presets, setTempRange: setTempRange, onPresetSelect: handlePresetSelect })), jsx("div", { className: "flex flex-col flex-1", children: mode === "range" ? (
+                        // Dual calendar for range mode
+                        jsxs(Fragment, { children: [jsx("div", { className: "flex justify-between items-start gap-6 p-4", children: children || (jsxs(Fragment, { children: [jsx("div", { className: "flex-1 min-w-fit", children: jsx(Calendar, { mode: "range", value: tempRange, onChange: (value) => {
+                                                        setTempRange(value); // Update temp state only
+                                                    }, viewDate: leftCalendarDate, onViewDateChange: setLeftCalendarDate, onNavigatePrev: handleNavigatePrev, onNavigateNext: null, minDate: minDate, maxDate: maxDate, isDateDisabled: isDateDisabled, showToday: showToday, selectTodayByDefault: selectTodayByDefault, weekdays: weekdays, months: months, yearRange: yearRange, size: "md" }) }), jsx("div", { className: "flex-1 min-w-fit", children: jsx(Calendar, { mode: "range", value: tempRange, onChange: (value) => {
+                                                        setTempRange(value); // Update temp state only
+                                                    }, viewDate: rightCalendarDate, onViewDateChange: (newDate) => {
+                                                        // Adjust left calendar when right calendar changes
+                                                        const adjustedLeft = new Date(newDate);
+                                                        adjustedLeft.setMonth(adjustedLeft.getMonth() - 1);
+                                                        setLeftCalendarDate(adjustedLeft);
+                                                    }, onNavigatePrev: null, onNavigateNext: handleNavigateNext, minDate: minDate, maxDate: maxDate, isDateDisabled: isDateDisabled, showToday: showToday, selectTodayByDefault: false, weekdays: weekdays, months: months, yearRange: yearRange, size: "md" }) })] })) }), jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-t border-[var(--color-border)]", children: [jsx("div", { className: "text-sm text-[var(--color-text-muted)]", children: formatRangeDisplay(tempRange) }), jsxs("div", { className: "flex items-center gap-2", children: [jsx(Button, { variant: "outline", color: "neutral", size: "sm", onClick: handleCancel, children: "Cancel" }), jsx(Button, { variant: "filled", size: "sm", onClick: handleApply, disabled: !(tempRange === null || tempRange === void 0 ? void 0 : tempRange.start) || !(tempRange === null || tempRange === void 0 ? void 0 : tempRange.end), children: "Apply" })] })] })] })) : (
+                        // Single calendar for single mode
+                        jsx("div", { className: "flex-1 p-4", children: children || (jsx(Calendar, { mode: "single", value: selectedValue, onChange: (value) => {
+                                    handleDateSelect(value);
+                                    onClose === null || onClose === void 0 ? void 0 : onClose();
+                                }, minDate: minDate, maxDate: maxDate, isDateDisabled: isDateDisabled, showToday: showToday, selectTodayByDefault: selectTodayByDefault, weekdays: weekdays, months: months, yearRange: yearRange, size: "md" })) })) })] }) })) }));
     // Use portal if enabled and client-side - wrap with dark class for dark mode support
     if (portal && isClient) {
-        return createPortal(jsx("div", { className: isDarkMode ? "dark" : undefined, children: contentElement }), document.body);
+        return createPortal(jsx("div", { "data-flikkui-portal": "", className: isDarkMode ? "dark" : undefined, children: contentElement }), document.body);
     }
     return contentElement;
 };

package/dist/components/forms/DatePicker/DatePickerContext.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+import type { DatePickerState, DatePickerSize, DateRange, DatePickerMode, DatePickerTheme } from "./DatePicker.types";
+export interface DatePickerContextType {
+    mode: DatePickerMode;
+    isOpen: boolean;
+    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    selectedValue: Date | DateRange | undefined;
+    setSelectedValue: React.Dispatch<React.SetStateAction<Date | DateRange | undefined>>;
+    minDate?: Date;
+    maxDate?: Date;
+    isDateDisabled?: (date: Date) => boolean;
+    showToday?: boolean;
+    selectTodayByDefault?: boolean;
+    weekdays?: string[];
+    months?: string[];
+    yearRange?: {
+        start: number;
+        end: number;
+    };
+    handleDateSelect: (date: Date) => void;
+    handleRangeSelect?: (range: DateRange) => void;
+    size: DatePickerSize;
+    state: DatePickerState;
+    theme: DatePickerTheme;
+    triggerRef: React.RefObject<HTMLButtonElement | null>;
+    contentRef: React.RefObject<HTMLDivElement | null>;
+}
+export declare const DatePickerContext: React.Context<DatePickerContextType | undefined>;
+export declare const useDatePickerContext: () => DatePickerContextType;

package/dist/components/forms/DatePicker/DatePickerContext.js

@@ -0,0 +1,6 @@
+"use client";
+import { createContext } from 'react';
+
+const DatePickerContext = createContext(undefined);
+
+export { DatePickerContext };

package/dist/components/forms/DatePicker/DatePickerPresets.js

@@ -1,6 +1,7 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { useContext } from 'react';
-import { DatePickerContext } from './DatePicker.js';
+import { DatePickerContext } from './DatePickerContext.js';
 import { cn } from '../../../utils/cn.js';
 
 const DatePickerPresets = ({ presets, className, setTempRange, onPresetSelect, }) => {

package/dist/components/forms/DatePicker/DatePickerTrigger.js

@@ -1,8 +1,9 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useContext } from 'react';
 import { CalendarIcon } from '@heroicons/react/24/outline';
 import { cn } from '../../../utils/cn.js';
-import { DatePickerContext } from './DatePicker.js';
+import { DatePickerContext } from './DatePickerContext.js';
 
 /**
  * DatePicker Trigger Component - styled like form input

package/dist/components/forms/DateRangePicker/DateRangePicker.d.ts

@@ -1,30 +1,10 @@
 import React from "react";
-import type { DateRangePickerProps, DateRangePickerState, DateRangePickerSize, DateRangePickerTheme, DateRange } from "./DateRangePicker.types";
+import type { DateRangePickerProps } from "./DateRangePicker.types";
 import { DateRangePickerTrigger } from "./DateRangePickerTrigger";
 import { DateRangePickerBody } from "./DateRangePickerBody";
 import { DateRangePickerPresets } from "./DateRangePickerPresets";
-interface DateRangePickerContextType {
-    isOpen: boolean;
-    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
-    selectedRange: DateRange | undefined;
-    handleRangeSelect: (range: DateRange) => void;
-    minDate?: Date;
-    maxDate?: Date;
-    isDateDisabled?: (date: Date) => boolean;
-    showToday?: boolean;
-    weekdays?: string[];
-    months?: string[];
-    yearRange?: {
-        start: number;
-        end: number;
-    };
-    size: DateRangePickerSize;
-    state: DateRangePickerState;
-    theme: DateRangePickerTheme;
-    triggerRef: React.RefObject<HTMLButtonElement | null>;
-    contentRef: React.RefObject<HTMLDivElement | null>;
-}
-export declare const DateRangePickerContext: React.Context<DateRangePickerContextType | undefined>;
+import { DateRangePickerContext } from "./DateRangePickerContext";
+export { DateRangePickerContext };
 /**
  * DateRangePicker Component — dedicated range picker with presets and dual calendars
  */

package/dist/components/forms/DateRangePicker/DateRangePicker.js

@@ -1,5 +1,6 @@
+"use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React__default, { createContext, useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import React__default, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
 import { dateRangePickerTheme } from './DateRangePicker.theme.js';
 import { DEFAULT_DATE_RANGE_PRESETS } from './dateRangePresets.js';
 import { FormLabel } from '../FormLabel/FormLabel.js';
@@ -8,8 +9,8 @@ import { DateRangePickerBody } from './DateRangePickerBody.js';
 import { DateRangePickerPresets } from './DateRangePickerPresets.js';
 import { cn } from '../../../utils/cn.js';
 import { formatDateCustom } from '../../../utils/dateUtils.js';
+import { DateRangePickerContext } from './DateRangePickerContext.js';
 
-const DateRangePickerContext = createContext(undefined);
 /**
  * Format date for display
  */
@@ -38,7 +39,7 @@ const formatDateRange = (range, formatString, options) => {
 /**
  * DateRangePicker Component — dedicated range picker with presets and dual calendars
  */
-const DateRangePickerComponent = React__default.forwardRef(({ id, name, size = "md", state = "default", value, defaultValue, placeholder = "Select date range...", disabled = false, required = false, label, helperText, onChange, onFocus, onBlur, presets = DEFAULT_DATE_RANGE_PRESETS, showPresets = true, minDate, maxDate, isDateDisabled, showToday = true, weekdays, months, dateFormat, formatString, yearRange, className = "", wrapperClassName = "", portal = true, placement = "bottom-start", offset = 4, ...rest }, ref) => {
+const DateRangePickerComponent = React__default.forwardRef(({ id, name, size = "md", state = "default", value, defaultValue, placeholder = "Select date range...", disabled = false, required = false, label, helperText, errorMessage, onChange, onFocus, onBlur, presets = DEFAULT_DATE_RANGE_PRESETS, showPresets = true, minDate, maxDate, isDateDisabled, showToday = true, weekdays, months, dateFormat, formatString, yearRange, className = "", wrapperClassName = "", portal = true, placement = "bottom-start", offset = 4, elevation, lift, ...rest }, ref) => {
     var _a, _b;
     const theme = { ...dateRangePickerTheme };
     const [isOpen, setIsOpen] = useState(false);
@@ -52,9 +53,16 @@ const DateRangePickerComponent = React__default.forwardRef(({ id, name, size = "
         }
     }, [value]);
     const handleRangeSelect = useCallback((newRange) => {
-        setSelectedRange(newRange);
+        // Only update internal state in uncontrolled mode — in controlled mode
+        // (`value` provided), the displayed range must come from the `value`
+        // prop alone, so it doesn't drift ahead of the parent if it rejects
+        // or otherwise doesn't echo the change back. `onChange` still always
+        // fires so the parent can decide.
+        if (value === undefined) {
+            setSelectedRange(newRange);
+        }
         onChange === null || onChange === void 0 ? void 0 : onChange(newRange);
-    }, [onChange]);
+    }, [value, onChange]);
     const handleButtonClick = useCallback(() => {
         if (!disabled) {
             setIsOpen((prev) => !prev);
@@ -65,6 +73,9 @@ const DateRangePickerComponent = React__default.forwardRef(({ id, name, size = "
         : placeholder;
     const generatedId = React__default.useId();
     const pickerId = id || generatedId;
+    // errorMessage takes precedence over helperText while invalid; helperText
+    // behavior is unchanged otherwise.
+    const displayedMessage = state === "invalid" && errorMessage ? errorMessage : helperText;
     return (jsx(DateRangePickerContext.Provider, { value: useMemo(() => ({
             isOpen,
             setIsOpen,
@@ -96,9 +107,9 @@ const DateRangePickerComponent = React__default.forwardRef(({ id, name, size = "
             size,
             state,
             theme,
-        ]), children: jsxs("div", { ref: ref, className: cn(theme.containerStyle, wrapperClassName), ...rest, children: [label && (typeof label === 'string' ? (jsx(FormLabel, { htmlFor: pickerId, state: state, required: required, children: label })) : (label)), jsx(DateRangePickerTrigger, { id: pickerId, disabled: disabled, isOpen: isOpen, state: state, size: size, onClick: handleButtonClick, onFocus: onFocus, onBlur: onBlur, className: className, "aria-invalid": state === 'invalid' || undefined, "aria-describedby": helperText ? `${pickerId}-helper` : undefined, children: jsx("span", { className: cn("block truncate", selectedRange && (selectedRange.start || selectedRange.end)
+        ]), children: jsxs("div", { ref: ref, className: cn(theme.containerStyle, wrapperClassName), ...rest, children: [label && (typeof label === 'string' ? (jsx(FormLabel, { htmlFor: pickerId, state: state, required: required, children: label })) : (label)), jsx(DateRangePickerTrigger, { id: pickerId, disabled: disabled, isOpen: isOpen, state: state, size: size, onClick: handleButtonClick, onFocus: onFocus, onBlur: onBlur, className: className, "aria-invalid": state === 'invalid' || undefined, "aria-describedby": displayedMessage ? `${pickerId}-helper` : undefined, children: jsx("span", { className: cn("block truncate", selectedRange && (selectedRange.start || selectedRange.end)
                             ? theme.valueTextStyle
-                            : theme.placeholderTextStyle), children: displayValue }) }), jsx(DateRangePickerBody, { isOpen: isOpen, onClose: () => setIsOpen(false), portal: portal, placement: placement, offset: offset, presets: presets, showPresets: showPresets }), helperText && (typeof helperText === 'string' ? (jsx("p", { id: `${pickerId}-helper`, className: cn(theme.helperTextStyle, theme.helperTextStates[state]), children: helperText })) : (helperText)), name && selectedRange && (jsxs(Fragment, { children: [jsx("input", { type: "hidden", name: `${name}[start]`, value: ((_a = selectedRange.start) === null || _a === void 0 ? void 0 : _a.toISOString()) || "" }), jsx("input", { type: "hidden", name: `${name}[end]`, value: ((_b = selectedRange.end) === null || _b === void 0 ? void 0 : _b.toISOString()) || "" })] }))] }) }));
+                            : theme.placeholderTextStyle), children: displayValue }) }), jsx(DateRangePickerBody, { isOpen: isOpen, onClose: () => setIsOpen(false), portal: portal, placement: placement, offset: offset, presets: presets, showPresets: showPresets, elevation: elevation, lift: lift }), displayedMessage && (typeof displayedMessage === 'string' ? (jsx("p", { id: `${pickerId}-helper`, role: state === 'invalid' ? 'alert' : undefined, className: cn(theme.helperTextStyle, theme.helperTextStates[state]), children: displayedMessage })) : (displayedMessage)), name && selectedRange && (jsxs(Fragment, { children: [jsx("input", { type: "hidden", name: `${name}[start]`, value: ((_a = selectedRange.start) === null || _a === void 0 ? void 0 : _a.toISOString()) || "" }), jsx("input", { type: "hidden", name: `${name}[end]`, value: ((_b = selectedRange.end) === null || _b === void 0 ? void 0 : _b.toISOString()) || "" })] }))] }) }));
 });
 DateRangePickerComponent.displayName = "DateRangePicker";
 // Compound component

package/dist/components/forms/DateRangePicker/DateRangePicker.theme.js

@@ -6,7 +6,7 @@ import { formsBaseTheme } from '../forms.theme.js';
 const dateRangePickerTheme = {
     containerStyle: formsBaseTheme.wrapperStyle,
     baseStyle: formsBaseTheme.inputGroupBaseStyle + " justify-between cursor-pointer",
-    triggerButtonStyle: "w-full cursor-pointer bg-[var(--color-surface)]",
+    triggerButtonStyle: "w-full cursor-pointer bg-[var(--field-fill)]",
     placeholderTextStyle: "text-[var(--color-text-placeholder)]",
     valueTextStyle: "text-[var(--color-text-primary)]",
     triggerSizes: {
@@ -19,7 +19,7 @@ const dateRangePickerTheme = {
     triggerFocusStates: formsBaseTheme.focusStates,
     iconEndStyle: formsBaseTheme.iconStyles.right,
     iconEndPadding: formsBaseTheme.iconStyles.padding.right,
-    bodyStyle: "flex flex-col sm:flex-row w-fit max-w-[calc(100vw-2rem)] sm:max-w-none bg-[var(--color-surface-overlay)]/80 backdrop-blur-md border border-[var(--color-border)] rounded-[var(--popover-radius)] shadow-lg p-0 overflow-hidden z-[1000] fixed",
+    bodyStyle: "flex flex-col sm:flex-row w-fit max-w-[calc(100vw-2rem)] sm:max-w-none backdrop-blur-md border border-[var(--color-border)] rounded-[var(--popover-radius)] shadow-lg p-0 overflow-hidden z-[1000] fixed",
     presetsContainerStyle: "hidden sm:flex flex-col gap-1 p-3 sm:border-r border-[var(--color-border)] bg-[var(--color-surface-sunken)] sm:min-w-[180px]",
     presetButtonStyle: "w-full text-left px-3 py-2 text-sm font-medium rounded-[calc(var(--radius-base)*0.75)] transition-colors cursor-pointer " +
         "flex items-center justify-between gap-2 " +

package/dist/components/forms/DateRangePicker/DateRangePicker.types.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import type { DateRange } from "../../core/Calendar/Calendar.types";
+import type { SurfaceElevation } from "../../../theme/SurfaceContext";
 export type { DateRange };
 /**
  * Size variants for DateRangePicker
@@ -47,6 +48,12 @@ export interface DateRangePickerProps extends Omit<React.HTMLAttributes<HTMLDivE
     label?: React.ReactNode;
     /** Helper text below the field */
     helperText?: React.ReactNode;
+    /**
+     * Error message shown instead of `helperText` when `state="invalid"`.
+     * Takes precedence over `helperText` while invalid; `helperText` is
+     * unaffected/still shown as normal otherwise.
+     */
+    errorMessage?: React.ReactNode;
     /** Callback fired when a range is applied */
     onChange?: (range: DateRange | null) => void;
     /** Array of preset date ranges */
@@ -88,6 +95,13 @@ export interface DateRangePickerProps extends Omit<React.HTMLAttributes<HTMLDivE
     placement?: DateRangePickerPlacement;
     /** Offset from trigger element */
     offset?: number;
+    /**
+     * Pin the popover surface elevation rung (overrides the automatic relative lift).
+     * A rung number (1–8) or a semantic alias ("surface"/"raised"/"overlay"…).
+     */
+    elevation?: SurfaceElevation;
+    /** `false` opts out of the relative lift — paints at the popover's base rung. */
+    lift?: boolean;
 }
 /**
  * DateRangePicker trigger button props
@@ -118,6 +132,13 @@ export interface DateRangePickerBodyProps {
     offset?: number;
     presets?: DateRangePreset[];
     showPresets?: boolean;
+    /**
+     * Pin the popover surface elevation rung (overrides the automatic relative lift).
+     * A rung number (1–8) or a semantic alias ("surface"/"raised"/"overlay"…).
+     */
+    elevation?: SurfaceElevation;
+    /** `false` opts out of the relative lift — paints at the popover's base rung. */
+    lift?: boolean;
 }
 /**
  * DateRangePicker presets props

package/dist/components/forms/DateRangePicker/DateRangePickerBody.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default, { useContext, useState, useEffect, useCallback, useMemo } from 'react';
 import { AnimatePresence, motion } from 'motion/react';
@@ -6,7 +7,7 @@ import { Calendar } from '../../core/Calendar/Calendar.js';
 import '../../core/Calendar/CalendarMini/CalendarMini.js';
 import { Button } from '../../core/Button/Button.js';
 import { cn } from '../../../utils/cn.js';
-import { DateRangePickerContext } from './DateRangePicker.js';
+import { DateRangePickerContext } from './DateRangePickerContext.js';
 import { DateRangePickerPresets } from './DateRangePickerPresets.js';
 import { useSelectPortal } from '../../../hooks/useSelectPortal.js';
 import { formatDateCustom } from '../../../utils/dateUtils.js';
@@ -14,11 +15,15 @@ import { createDropdownAnimations } from '../DatePicker/DatePicker.animations.js
 import { useIsClient } from '../../../hooks/useIsClient.js';
 import { useMediaQuery } from '../../../hooks/useMediaQuery.js';
 import { useDarkMode } from '../../../hooks/useDarkMode.js';
+import { useSurfaceElevation, SurfaceProvider, surfaceClasses } from '../../../theme/SurfaceContext.js';
 
 /**
  * DateRangePicker Body Component — dual calendars + presets sidebar + footer
  */
-const DateRangePickerBody = ({ isOpen, className, onClose, portal = true, placement = "bottom-start", offset = 4, presets, showPresets = true, }) => {
+const DateRangePickerBody = ({ isOpen, className, onClose, portal = true, placement = "bottom-start", offset = 4, presets, showPresets = true, elevation, lift, }) => {
+    // Relative elevation: the popover lifts above its host surface (overlay base = 5)
+    // so a DateRangePicker inside a Popover/Modal still reads as a higher plane.
+    const surfaceLevel = useSurfaceElevation({ baseRung: 5, offset: 2, elevation, lift });
     const context = useContext(DateRangePickerContext);
     if (!context) {
         throw new Error("DateRangePickerBody must be used within a DateRangePicker");
@@ -153,7 +158,7 @@ const DateRangePickerBody = ({ isOpen, className, onClose, portal = true, placem
             document.removeEventListener("keydown", handleKeyDown);
         };
     }, [isOpen, onClose]);
-    const contentElement = (jsx(AnimatePresence, { mode: "wait", children: isOpen && (jsxs(motion.div, { ref: combinedRef, className: cn(theme.bodyStyle, className), style: {
+    const contentElement = (jsx(AnimatePresence, { mode: "wait", children: isOpen && (jsx(motion.div, { ref: combinedRef, className: cn(surfaceClasses(surfaceLevel, { translucent: true, shadow: false }), theme.bodyStyle, className), style: {
                 ...cssVariables,
                 ...(portal
                     ? {
@@ -162,17 +167,17 @@ const DateRangePickerBody = ({ isOpen, className, onClose, portal = true, placem
                         minWidth: `${position.width}px`,
                     }
                     : {}),
-            }, variants: animations, initial: "initial", animate: isReady ? "visible" : "initial", exit: "exit", children: [hasPresets && presets && (jsx(DateRangePickerPresets, { presets: presets, tempRange: tempRange, setTempRange: setTempRange, onPresetSelect: handlePresetSelect })), jsxs("div", { className: "flex flex-col flex-1", children: [jsxs("div", { className: "flex flex-col sm:flex-row justify-between items-center sm:items-start gap-2 sm:gap-6 p-3 sm:p-4", children: [jsx("div", { className: "flex-1 min-w-fit", children: jsx(Calendar, { mode: "range", value: tempRange, onChange: (value) => {
-                                            setTempRange(value);
-                                        }, viewDate: leftCalendarDate, onViewDateChange: setLeftCalendarDate, onNavigatePrev: handleNavigatePrev, onNavigateNext: isMobile ? handleNavigateNext : null, minDate: minDate, maxDate: maxDate, isDateDisabled: isDateDisabled, showToday: showToday, selectTodayByDefault: false, weekdays: weekdays, months: months, yearRange: yearRange, showOtherMonthDays: false, headerMode: "static", size: "md" }) }), jsx("div", { className: "hidden sm:block flex-1 min-w-fit", children: jsx(Calendar, { mode: "range", value: tempRange, onChange: (value) => {
-                                            setTempRange(value);
-                                        }, viewDate: rightCalendarDate, onViewDateChange: (newDate) => {
-                                            const adjustedLeft = new Date(newDate);
-                                            adjustedLeft.setMonth(adjustedLeft.getMonth() - 1);
-                                            setLeftCalendarDate(adjustedLeft);
-                                        }, onNavigatePrev: null, onNavigateNext: handleNavigateNext, minDate: minDate, maxDate: maxDate, isDateDisabled: isDateDisabled, showToday: showToday, selectTodayByDefault: false, weekdays: weekdays, months: months, yearRange: yearRange, showOtherMonthDays: false, headerMode: "static", size: "md" }) })] }), jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 px-3 sm:px-4 py-3 border-t border-[var(--color-border)]", children: [jsx("div", { className: "text-sm text-center sm:text-left text-[var(--color-text-muted)]", children: formatRangeDisplay(tempRange) }), jsxs("div", { className: "flex w-full sm:w-auto items-center gap-2", children: [jsx(Button, { variant: "outline", color: "neutral", size: "sm", className: "flex-1 sm:flex-initial", onClick: handleCancel, children: "Cancel" }), jsx(Button, { variant: "filled", size: "sm", className: "flex-1 sm:flex-initial", onClick: handleApply, disabled: !(tempRange === null || tempRange === void 0 ? void 0 : tempRange.start) || !(tempRange === null || tempRange === void 0 ? void 0 : tempRange.end), children: "Apply" })] })] })] })] })) }));
+            }, variants: animations, initial: "initial", animate: isReady ? "visible" : "initial", exit: "exit", children: jsxs(SurfaceProvider, { level: surfaceLevel, children: [hasPresets && presets && (jsx(DateRangePickerPresets, { presets: presets, tempRange: tempRange, setTempRange: setTempRange, onPresetSelect: handlePresetSelect })), jsxs("div", { className: "flex flex-col flex-1", children: [jsxs("div", { className: "flex flex-col sm:flex-row justify-between items-center sm:items-start gap-2 sm:gap-6 p-3 sm:p-4", children: [jsx("div", { className: "flex-1 min-w-fit", children: jsx(Calendar, { mode: "range", value: tempRange, onChange: (value) => {
+                                                setTempRange(value);
+                                            }, viewDate: leftCalendarDate, onViewDateChange: setLeftCalendarDate, onNavigatePrev: handleNavigatePrev, onNavigateNext: isMobile ? handleNavigateNext : null, minDate: minDate, maxDate: maxDate, isDateDisabled: isDateDisabled, showToday: showToday, selectTodayByDefault: false, weekdays: weekdays, months: months, yearRange: yearRange, showOtherMonthDays: false, headerMode: "static", size: "md" }) }), jsx("div", { className: "hidden sm:block flex-1 min-w-fit", children: jsx(Calendar, { mode: "range", value: tempRange, onChange: (value) => {
+                                                setTempRange(value);
+                                            }, viewDate: rightCalendarDate, onViewDateChange: (newDate) => {
+                                                const adjustedLeft = new Date(newDate);
+                                                adjustedLeft.setMonth(adjustedLeft.getMonth() - 1);
+                                                setLeftCalendarDate(adjustedLeft);
+                                            }, onNavigatePrev: null, onNavigateNext: handleNavigateNext, minDate: minDate, maxDate: maxDate, isDateDisabled: isDateDisabled, showToday: showToday, selectTodayByDefault: false, weekdays: weekdays, months: months, yearRange: yearRange, showOtherMonthDays: false, headerMode: "static", size: "md" }) })] }), jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 px-3 sm:px-4 py-3 border-t border-[var(--color-border)]", children: [jsx("div", { className: "text-sm text-center sm:text-left text-[var(--color-text-muted)]", children: formatRangeDisplay(tempRange) }), jsxs("div", { className: "flex w-full sm:w-auto items-center gap-2", children: [jsx(Button, { variant: "outline", color: "neutral", size: "sm", className: "flex-1 sm:flex-initial", onClick: handleCancel, children: "Cancel" }), jsx(Button, { variant: "filled", size: "sm", className: "flex-1 sm:flex-initial", onClick: handleApply, disabled: !(tempRange === null || tempRange === void 0 ? void 0 : tempRange.start) || !(tempRange === null || tempRange === void 0 ? void 0 : tempRange.end), children: "Apply" })] })] })] })] }) })) }));
     if (portal && isClient) {
-        return createPortal(jsx("div", { className: isDarkMode ? "dark" : undefined, children: contentElement }), document.body);
+        return createPortal(jsx("div", { "data-flikkui-portal": "", className: isDarkMode ? "dark" : undefined, children: contentElement }), document.body);
     }
     return contentElement;
 };

package/dist/components/forms/DateRangePicker/DateRangePickerContext.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import type { DateRangePickerState, DateRangePickerSize, DateRangePickerTheme, DateRange } from "./DateRangePicker.types";
+export interface DateRangePickerContextType {
+    isOpen: boolean;
+    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    selectedRange: DateRange | undefined;
+    handleRangeSelect: (range: DateRange) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    isDateDisabled?: (date: Date) => boolean;
+    showToday?: boolean;
+    weekdays?: string[];
+    months?: string[];
+    yearRange?: {
+        start: number;
+        end: number;
+    };
+    size: DateRangePickerSize;
+    state: DateRangePickerState;
+    theme: DateRangePickerTheme;
+    triggerRef: React.RefObject<HTMLButtonElement | null>;
+    contentRef: React.RefObject<HTMLDivElement | null>;
+}
+export declare const DateRangePickerContext: React.Context<DateRangePickerContextType | undefined>;

package/dist/components/forms/DateRangePicker/DateRangePickerContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const DateRangePickerContext = createContext(undefined);
+
+export { DateRangePickerContext };

package/dist/components/forms/DateRangePicker/DateRangePickerPresets.js

@@ -1,7 +1,8 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useContext } from 'react';
 import { CheckIcon } from '@heroicons/react/24/outline';
-import { DateRangePickerContext } from './DateRangePicker.js';
+import { DateRangePickerContext } from './DateRangePickerContext.js';
 import { cn } from '../../../utils/cn.js';
 
 /**

package/dist/components/forms/DateRangePicker/DateRangePickerTrigger.js

@@ -1,8 +1,9 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useContext } from 'react';
 import { CalendarIcon } from '@heroicons/react/24/outline';
 import { cn } from '../../../utils/cn.js';
-import { DateRangePickerContext } from './DateRangePicker.js';
+import { DateRangePickerContext } from './DateRangePickerContext.js';
 
 /**
  * DateRangePicker Trigger Component — styled like form input

package/dist/components/forms/FileUpload/FileUpload.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useMemo, useId, useRef, useCallback, useState, useEffect } from 'react';
 import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
@@ -5,8 +6,8 @@ import { fileUploadTheme } from './FileUpload.theme.js';
 import { PREVIEW_LAYOUT_SPRING, PREVIEW_ITEM } from './FileUpload.animations.js';
 import { cn } from '../../../utils/cn.js';
 import { CloudArrowUpIcon, DocumentIcon, XMarkIcon } from '@heroicons/react/24/outline';
-import { FormLabel } from '../FormLabel/FormLabel.js';
 import { Button } from '../../core/Button/Button.js';
+import { FormLabel } from '../FormLabel/FormLabel.js';
 
 /**
  * FileUpload component - Drag-and-drop file uploader with previews

package/dist/components/forms/FileUpload/FileUploadProgress.js

@@ -1,7 +1,8 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default, { useState, useEffect } from 'react';
 import { useReducedMotion, motion, AnimatePresence } from 'motion/react';
-import { DocumentIcon, TrashIcon, ArrowPathIcon, XMarkIcon } from '@heroicons/react/24/outline';
+import { DocumentIcon, TrashIcon, ArrowPathIcon, XMarkIcon, CheckIcon } from '@heroicons/react/24/outline';
 import { Icon } from '../../core/Icon/Icon.js';
 import { fileTypes } from '../../core/Icon/data/fileTypes.js';
 import { cn } from '../../../utils/cn.js';
@@ -60,7 +61,7 @@ const RadialProgress = ({ progress, status, strokeWidth, trackColor, progressCol
             setConfirmOpen(open);
             if (!open)
                 setIsHovered(false);
-        }, placement: "bottom-end", offset: offsetValue, triggerType: "click", children: [jsx(Popover.Trigger, { children: trigger }), jsxs(Popover.Body, { className: "flex items-center p-1 border-[0.5px] rounded-xl gap-0.5 bg-opacity-50 backdrop-blur-md", children: [jsx("span", { className: "text-sm font-semibold text-[var(--color-text-secondary)] px-3", children: label }), jsxs("div", { className: "flex gap-1", children: [jsx(Button, { size: "sm", color: "danger", variant: "filled", onClick: handleConfirm, children: "Yes" }), jsx(Button, { size: "sm", variant: "soft", color: "neutral", onClick: () => setConfirmOpen(false), children: "No" })] })] })] }));
+        }, placement: "bottom-end", offset: offsetValue, triggerType: "click", children: [jsx(Popover.Trigger, { children: trigger }), jsxs(Popover.Body, { className: "flex items-center p-1 border-[0.5px] rounded-xl gap-0.5 bg-opacity-50 backdrop-blur-md", children: [jsx("span", { className: "text-sm font-semibold text-[var(--color-text-secondary)] px-3", children: label }), jsxs("div", { className: "flex gap-1", children: [jsx(Button, { size: "sm", color: "danger", variant: "filled", onClick: handleConfirm, children: "Yesss" }), jsx(Button, { size: "sm", variant: "soft", color: "neutral", onClick: () => setConfirmOpen(false), children: "No" })] })] })] }));
     // Shared remove button used after completion tick
     const removeButton = (jsx(motion.div, { initial: shouldReduceMotion ? false : REMOVE_BUTTON_ENTER.initial, animate: REMOVE_BUTTON_ENTER.animate, transition: REMOVE_BUTTON_ENTER.transition, className: "shrink-0", children: jsx(Button, { size: "sm", variant: "soft", color: "neutral", "aria-label": "Remove file", iconOnly: true, className: "rounded-full size-8", onClick: confirmRemove ? undefined : () => onRemove === null || onRemove === void 0 ? void 0 : onRemove(), children: jsx(TrashIcon, { className: "size-3.5", strokeWidth: 2 }) }) }, "remove-btn"));
     // Error state: retry + delete buttons (no progress arc/percentage).
@@ -81,7 +82,7 @@ const RadialProgress = ({ progress, status, strokeWidth, trackColor, progressCol
                     handleClick();
                 }
             }
-            : undefined, children: [jsxs("svg", { viewBox: `0 0 ${VIEWBOX} ${VIEWBOX}`, className: "w-full h-full -rotate-90", children: [jsx("circle", { cx: CENTER, cy: CENTER, r: radius, fill: "none", stroke: trackColor, strokeWidth: strokeWidth }), jsx(motion.circle, { cx: CENTER, cy: CENTER, r: radius, fill: "none", stroke: progressColor, strokeWidth: strokeWidth, strokeLinecap: "round", strokeDasharray: circumference, initial: { strokeDashoffset: circumference }, animate: { strokeDashoffset: isComplete ? 0 : offset }, transition: shouldReduceMotion ? { duration: 0 } : PROGRESS_SPRING })] }), jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: jsxs(AnimatePresence, { mode: "wait", initial: false, children: [isUploading && !isHovered && (jsx(motion.span, { className: centerTextStyle, ...(shouldReduceMotion ? {} : CROSSFADE), children: progress }, "percent")), isUploading && isHovered && onRemove && (jsx(motion.span, { ...(shouldReduceMotion ? {} : CROSSFADE), children: jsx(XMarkIcon, { className: "size-4 text-[var(--color-text-muted)]", strokeWidth: 2.5 }) }, "close")), isComplete && !showRemove && (jsx(motion.span, { ...(shouldReduceMotion ? {} : CROSSFADE), children: jsx("svg", { viewBox: "0 0 24 24", fill: "none", className: cn("size-4", statusIconColor), children: jsx("path", { d: "M5 13l4.5 4.5L19 7", stroke: "currentColor", strokeWidth: 3.5, strokeLinecap: "round", strokeLinejoin: "round" }) }) }, "check"))] }) })] }));
+            : undefined, children: [jsxs("svg", { viewBox: `0 0 ${VIEWBOX} ${VIEWBOX}`, className: "w-full h-full -rotate-90", children: [jsx("circle", { cx: CENTER, cy: CENTER, r: radius, fill: "none", stroke: trackColor, strokeWidth: strokeWidth }), jsx(motion.circle, { cx: CENTER, cy: CENTER, r: radius, fill: "none", stroke: progressColor, strokeWidth: strokeWidth, strokeLinecap: "round", strokeDasharray: circumference, initial: { strokeDashoffset: circumference }, animate: { strokeDashoffset: isComplete ? 0 : offset }, transition: shouldReduceMotion ? { duration: 0 } : PROGRESS_SPRING })] }), jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: jsxs(AnimatePresence, { mode: "wait", initial: false, children: [isUploading && !isHovered && (jsx(motion.span, { className: centerTextStyle, ...(shouldReduceMotion ? {} : CROSSFADE), children: progress }, "percent")), isUploading && isHovered && onRemove && (jsx(motion.span, { ...(shouldReduceMotion ? {} : CROSSFADE), children: jsx(XMarkIcon, { className: "size-4 text-[var(--color-text-muted)]", strokeWidth: 2.5 }) }, "close")), isComplete && !showRemove && (jsx(motion.span, { ...(shouldReduceMotion ? {} : CROSSFADE), children: jsx(CheckIcon, { className: cn("size-4", statusIconColor), strokeWidth: 3.5 }) }, "check"))] }) })] }));
     // Determine what to render: radial indicator or remove button
     const showRemoveButton = isComplete && showRemove && onRemove;
     const triggerElement = showRemoveButton ? removeButton : radialElement;

package/dist/components/forms/Input/Input.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default, { useState, useRef, useEffect, useCallback } from 'react';
 import { FormLabel } from '../FormLabel/FormLabel.js';
@@ -67,7 +68,7 @@ const PasswordStrengthIndicator = ({ inline = false, passwordStrengthIndicator,
 // ============================================================================
 // Main Input Component
 // ============================================================================
-const Input = React__default.forwardRef(({ size = "md", state = "default", className = "", label, labelClassName = "", helperText, helperTextClassName = "", wrapperClassName = "", inputGroupClassName = "", iconStart, iconEnd, contentStart, contentEnd, keyboardShortcut, id, required, type = "text", passwordToggle = type === "password", passwordStrengthIndicator, showNumberControls = false, min, max, step = 1, onChange, onValueChange, onFocus, onBlur, value, currencyDecimalPlaces, darkMode = false, showTypeIcon = true, ...props }, ref) => {
+const Input = React__default.forwardRef(({ size = "md", state = "default", className = "", label, labelClassName = "", helperText, errorMessage, helperTextClassName = "", wrapperClassName = "", inputGroupClassName = "", iconStart, iconEnd, contentStart, contentEnd, keyboardShortcut, id, required, type = "text", passwordToggle = type === "password", passwordStrengthIndicator, showNumberControls = false, min, max, step = 1, onChange, onValueChange, onFocus, onBlur, value, currencyDecimalPlaces, darkMode = false, showTypeIcon = true, ...props }, ref) => {
     const [isFocused, setIsFocused] = useState(false);
     const [showPassword, setShowPassword] = useState(false);
     const generatedId = React__default.useId();
@@ -90,6 +91,9 @@ const Input = React__default.forwardRef(({ size = "md", state = "default", class
     const hasLeftIcon = Boolean(finalLeftIcon);
     const isDisabled = state === "disabled";
     const isInvalid = state === "invalid";
+    // errorMessage takes precedence over helperText while invalid; helperText
+    // behavior is unchanged otherwise.
+    const displayedMessage = isInvalid && errorMessage ? errorMessage : helperText;
     const hasRightIcon = Boolean(iconEnd);
     const hasContentStart = Boolean(contentStart);
     const hasContentEnd = Boolean(contentEnd);
@@ -273,13 +277,13 @@ const Input = React__default.forwardRef(({ size = "md", state = "default", class
         typeof min === "number" &&
         numberValue <= min;
     return (jsxs("div", { className: cn(wrapperClasses, stateClass, darkMode && "dark", wrapperClassName), children: [label && (typeof label === 'string' ? (jsxs("div", { className: "flex justify-between items-center", children: [jsx(FormLabel, { htmlFor: inputId, className: labelClassName, state: state, required: required, children: label }), showStrengthWithLabel && (jsx(PasswordStrengthIndicator, { inline: true, passwordStrengthIndicator: passwordStrengthIndicator }))] })) : (jsxs("div", { className: "flex justify-between items-center", children: [label, showStrengthWithLabel && (jsx(PasswordStrengthIndicator, { inline: true, passwordStrengthIndicator: passwordStrengthIndicator }))] }))), jsx("div", { children: jsxs("div", { className: cn(inputGroupClasses, stateClasses, isFocused && (isInvalid ? inputTheme.inputGroupFocusInvalidStyle : inputTheme.inputGroupFocusStyle), inputGroupClassName), onClick: handleInputGroupClick, role: "presentation", children: [hasContentStart && (jsx("div", { "data-slot": "content-start", className: cn(contentStyleClasses, contentStartStyle), children: contentStart })), jsxs("div", { className: "relative flex-1", children: [jsx("input", { ref: setInputRef, id: inputId, type: actualInputType, className: cn(baseClasses, sizeClasses, hasLeftIcon && iconStartPadding, (hasRightIcon || isPasswordField || displayNumberControls) &&
-                                        iconEndPadding, className), disabled: isDisabled, "aria-invalid": isInvalid, "aria-describedby": helperText ? `${inputId}-helper` : undefined, required: required, min: min, max: max, step: step, value: value, onChange: handleInputChange, onFocus: (e) => {
+                                        iconEndPadding, className), disabled: isDisabled, "aria-invalid": isInvalid, "aria-describedby": displayedMessage ? `${inputId}-helper` : undefined, required: required, min: min, max: max, step: step, value: value, onChange: handleInputChange, onFocus: (e) => {
                                         setIsFocused(true);
                                         onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
                                     }, onBlur: (e) => {
                                         setIsFocused(false);
                                         onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
-                                    }, placeholder: props.placeholder, ...props }), hasLeftIcon && (jsx("div", { className: iconStartClasses, children: finalLeftIcon })), hasRightIcon && !isPasswordField && !displayNumberControls && (jsx("div", { className: iconEndClasses, children: iconEnd })), isPasswordField && (jsx(PasswordToggleButton, { showPassword: showPassword, onToggle: handleTogglePassword, passwordToggleClasses: passwordToggleClasses })), displayNumberControls && (jsx(NumberButtons, { isDisabled: isDisabled, isAtMax: isAtMax, isAtMin: isAtMin, onIncrement: handleIncrement, onDecrement: handleDecrement, numberButtonsContainerClasses: numberButtonsContainerClasses, numberButtonClasses: numberButtonClasses })), hasKeyboardShortcut && (jsx("div", { className: inputTheme.keyboardShortcutStyle, children: keyboardShortcut }))] }), hasContentEnd && (jsx("div", { "data-slot": "content-end", className: cn(contentStyleClasses, contentEndStyle), children: contentEnd }))] }) }), showStrengthBelow && jsx(PasswordStrengthIndicator, { inline: false, passwordStrengthIndicator: passwordStrengthIndicator }), helperText && (typeof helperText === 'string' ? (jsx("div", { id: `${inputId}-helper`, className: cn(helperTextClasses, helperTextClassName), role: isInvalid ? "alert" : undefined, children: helperText })) : (helperText))] }));
+                                    }, placeholder: props.placeholder, ...props }), hasLeftIcon && (jsx("div", { className: iconStartClasses, children: finalLeftIcon })), hasRightIcon && !isPasswordField && !displayNumberControls && (jsx("div", { className: iconEndClasses, children: iconEnd })), isPasswordField && (jsx(PasswordToggleButton, { showPassword: showPassword, onToggle: handleTogglePassword, passwordToggleClasses: passwordToggleClasses })), displayNumberControls && (jsx(NumberButtons, { isDisabled: isDisabled, isAtMax: isAtMax, isAtMin: isAtMin, onIncrement: handleIncrement, onDecrement: handleDecrement, numberButtonsContainerClasses: numberButtonsContainerClasses, numberButtonClasses: numberButtonClasses })), hasKeyboardShortcut && (jsx("div", { className: inputTheme.keyboardShortcutStyle, children: keyboardShortcut }))] }), hasContentEnd && (jsx("div", { "data-slot": "content-end", className: cn(contentStyleClasses, contentEndStyle), children: contentEnd }))] }) }), showStrengthBelow && jsx(PasswordStrengthIndicator, { inline: false, passwordStrengthIndicator: passwordStrengthIndicator }), displayedMessage && (typeof displayedMessage === 'string' ? (jsx("div", { id: `${inputId}-helper`, className: cn(helperTextClasses, helperTextClassName), role: isInvalid ? "alert" : undefined, children: displayedMessage })) : (displayedMessage))] }));
 });
 Input.displayName = "Input";