@flikk/ui 1.0.0-beta.31 → 1.0.0-beta.33

package/dist/components/forms/ColorPicker/ColorPickerBody.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
-import { useContext, useRef, useEffect } from 'react';
+import { useContext, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { useSelectPortal } from '../../../hooks/useSelectPortal.js';
 import { cn } from '../../../utils/cn.js';
@@ -16,15 +16,19 @@ import { useIsClient } from '../../../hooks/useIsClient.js';
  */
 const ColorPickerBody = ({ children, className, portal = true, animation = true, ...rest }) => {
     const context = useContext(ColorPickerContext);
-    const contentRef = useRef(null);
     const shouldReduceMotion = useReducedMotion();
     const isClient = useIsClient();
     if (!context) {
         throw new Error('ColorPicker.Body must be used within a ColorPicker');
     }
     const { isOpen, setIsOpen, theme, triggerRef, placement, offset, dialogId } = context;
-    // Use positioning hook (same as Dropdown/Select)
-    const { position, cssVariables } = useSelectPortal({
+    // Use positioning hook (same as Dropdown/Select).
+    // 🔴 `contentRef` MUST come from the hook and be attached to the panel below:
+    // the hook measures the panel through it to clamp against the viewport. Body
+    // used to declare its own ref, leaving the hook's forever null — so
+    // `measureDropdownWidth` fell through to the TRIGGER's width, clamping fitted
+    // a ~32px box, and the ~320px panel ran straight off the right edge.
+    const { position, cssVariables, contentRef } = useSelectPortal({
         triggerRef,
         isOpen: isOpen || false,
         placement,

package/dist/components/forms/ColorPicker/ColorPickerHeader.js

@@ -25,7 +25,7 @@ const ColorPickerHeader = ({ modes = ['solid'], activeMode: activeModeFromProp,
     };
     return (jsxs("div", { className: cn('flex items-center justify-between border-b border-[var(--color-border)] -mx-4 -mt-4 px-4', className), ...props, children: [jsx("div", { className: "flex items-center gap-4", children: modes.map((mode) => (jsxs("button", { type: "button", onClick: () => handleModeChange(mode), className: cn('py-3 text-sm font-medium transition-colors relative cursor-pointer', activeMode === mode
                         ? 'text-[var(--color-primary)]'
-                        : 'text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)]'), "aria-selected": activeMode === mode, role: "tab", children: [modeLabels[mode], activeMode === mode && (jsx("div", { className: "absolute bottom-0 left-0 right-0 h-0.5 bg-[var(--color-primary)] rounded-full" }))] }, mode))) }), showClose && (jsx("button", { type: "button", onClick: () => setIsOpen(false), className: "p-1 text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors rounded-md hover:bg-[var(--color-background-secondary)] cursor-pointer", "aria-label": "Close color picker", children: jsx(X, { className: "size-5" }) }))] }));
+                        : 'text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)]'), "aria-selected": activeMode === mode, role: "tab", children: [modeLabels[mode], activeMode === mode && (jsx("div", { className: "absolute bottom-0 left-0 right-0 h-0.5 bg-[var(--color-primary)] rounded-full" }))] }, mode))) }), showClose && (jsx("button", { type: "button", onClick: () => setIsOpen(false), className: "p-1 text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors rounded-md hover:bg-[var(--color-surface)] cursor-pointer", "aria-label": "Close color picker", children: jsx(X, { className: "size-5" }) }))] }));
 };
 ColorPickerHeader.displayName = 'ColorPickerHeader';
 

package/dist/components/forms/ColorPicker/ColorPickerImage.js

@@ -141,7 +141,7 @@ const ColorPickerImage = ({ className, ...props }) => {
             /* Upload dropzone */
             jsxs("div", { onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, className: cn('flex flex-col items-center justify-center gap-2 h-[200px] rounded-xl border-2 border-dashed cursor-pointer transition-colors', isDragOver
                     ? 'border-[var(--color-primary)] bg-[var(--color-primary-50)]'
-                    : 'border-[var(--color-border)] hover:border-[var(--color-primary)] hover:bg-[var(--color-background-secondary)]'), children: [jsx(UploadSimple, { className: "size-8 text-[var(--color-text-muted)]" }), jsx("div", { className: "text-sm text-[var(--color-text-muted)]", children: "Click or drag an image" }), jsx("div", { className: "text-xs text-[var(--color-text-placeholder)]", children: "PNG, JPG, SVG, WebP" }), jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", onChange: handleFileChange, className: "hidden", "aria-label": "Upload image" })] })) : (
+                    : 'border-[var(--color-border)] hover:border-[var(--color-primary)] hover:bg-[var(--color-surface)]'), children: [jsx(UploadSimple, { className: "size-8 text-[var(--color-text-muted)]" }), jsx("div", { className: "text-sm text-[var(--color-text-muted)]", children: "Click or drag an image" }), jsx("div", { className: "text-xs text-[var(--color-text-placeholder)]", children: "PNG, JPG, SVG, WebP" }), jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", onChange: handleFileChange, className: "hidden", "aria-label": "Upload image" })] })) : (
             /* Canvas with color picking */
             jsxs("div", { className: "space-y-2", children: [jsxs("div", { className: "relative inline-block rounded-xl overflow-hidden ring-1 ring-inset ring-black/5", children: [jsx("canvas", { ref: canvasRef, onClick: handleCanvasClick, className: "cursor-crosshair block" }), cursorPos && (jsx("div", { className: "absolute w-5 h-5 border-2 border-white rounded-full pointer-events-none", style: {
                                     left: `${cursorPos.x}%`,

package/dist/components/forms/Combobox/Combobox.js

@@ -134,7 +134,7 @@ const ComboboxOptions = ({ isOpen, onClose, triggerRef, portal, placement, offse
  * ```
  */
 const ComboboxInner = ({ options, value, onChange, placeholder = "Search...", label, helperText, size = "md", state = "default", clearable = true, iconStart, iconEnd, openOnFocus = true, filterFn = defaultFilterFn, emptyMessage = "No results found", creatable = false, onCreateOption, createLabel, required = false, name, className, wrapperClassName, inputClassName, dropdownClassName, theme: themeOverrides, portal = true, placement = "bottom-start", offset = 8, elevation, lift, id, ...props }, ref) => {
-    var _a;
+    var _a, _b, _c, _d, _e, _f, _g;
     // Merge theme
     const theme = React__default.useMemo(() => ({ ...comboboxTheme, ...(themeOverrides || {}) }), [themeOverrides]);
     // Generate unique ID
@@ -169,6 +169,8 @@ const ComboboxInner = ({ options, value, onChange, placeholder = "Search...", la
         options: selectOptions,
         value,
         onChange: (newValue) => {
+            // useSelectState's payload is widened to `T | T[]` for Select's multi mode.
+            // Combobox has no `multiple` prop, so this is always the single value.
             onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
         },
         searchable: true, // Combobox is always searchable
@@ -403,8 +405,12 @@ const ComboboxInner = ({ options, value, onChange, placeholder = "Search...", la
     // Icon padding
     const hasLeftIcon = Boolean(iconStart);
     const hasRightIcon = Boolean(iconEnd);
-    const iconStartPadding = hasLeftIcon ? theme.iconPadding.left : "";
-    const iconEndPadding = hasRightIcon ? theme.iconPadding.right : "";
+    const iconStartPadding = hasLeftIcon
+        ? ((_c = (_b = theme.iconPaddings) === null || _b === void 0 ? void 0 : _b.left) === null || _c === void 0 ? void 0 : _c[size]) || theme.iconPadding.left
+        : "";
+    const iconEndPadding = hasRightIcon
+        ? ((_e = (_d = theme.iconPaddings) === null || _d === void 0 ? void 0 : _d.right) === null || _e === void 0 ? void 0 : _e[size]) || theme.iconPadding.right
+        : "";
     // Create a modified selectState for the provider with our custom filtered options
     const modifiedSelectState = React__default.useMemo(() => ({
         ...selectState,
@@ -414,7 +420,7 @@ const ComboboxInner = ({ options, value, onChange, placeholder = "Search...", la
     return (jsx(SelectProvider, { selectState: modifiedSelectState, size: size, componentState: state, theme: theme, searchable: true, enableTypeahead: false, children: jsxs("div", { ref: ref, className: cn("relative", containerClasses, stateClass, wrapperClassName), ...props, children: [label && (typeof label === 'string' ? (jsx(FormLabel, { htmlFor: comboboxId, state: state, required: required, children: label })) : (label)), jsxs("div", { ref: wrapperRef, className: theme.wrapperStyle, children: [jsx("div", { className: cn(inputGroupClasses, stateClasses, className), children: jsxs("div", { className: "relative flex-1", children: [jsx("input", { ref: inputRef, id: comboboxId, type: "text", role: "combobox", "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-controls": listboxId, "aria-activedescendant": highlightedIndex >= 0 &&
                                             customFilteredOptions[highlightedIndex]
                                             ? `${comboboxId}-option-${customFilteredOptions[highlightedIndex].id}`
-                                            : undefined, "aria-autocomplete": "list", "aria-invalid": isInvalid, "aria-describedby": helperText ? `${comboboxId}-helper` : undefined, autoComplete: "off", className: cn(inputClasses, sizeClasses, iconStartPadding, (hasRightIcon || showClearButton) && iconEndPadding, showClearButton && "pr-8", inputClassName), value: searchValue, onChange: handleInputChange, onFocus: handleInputFocus, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: isDisabled, required: required }), hasLeftIcon && (jsx("div", { className: theme.iconStartStyle, children: iconStart })), showClearButton && (jsx("button", { type: "button", className: theme.clearButtonStyle, onClick: handleClear, "aria-label": "Clear selection", tabIndex: -1, children: jsx(X, { className: theme.clearIconStyle }) })), hasRightIcon && !showClearButton && (jsx("div", { className: theme.iconEndStyle, children: iconEnd }))] }) }), jsx(ComboboxOptions, { isOpen: isOpen, onClose: () => setIsOpen(false), triggerRef: wrapperRef, portal: portal, placement: placement, offset: offset, emptyMessage: emptyMessage, className: dropdownClassName, listboxId: listboxId, comboboxId: comboboxId, elevation: elevation, lift: lift })] }), helperText && (typeof helperText === 'string' ? (jsx("p", { id: `${comboboxId}-helper`, className: cn(helperTextClasses, helperTextStateClasses), children: helperText })) : (helperText)), name && (jsx("input", { type: "hidden", name: name, value: value !== undefined ? String(value) : "" }))] }) }));
+                                            : undefined, "aria-autocomplete": "list", "aria-invalid": isInvalid, "aria-describedby": helperText ? `${comboboxId}-helper` : undefined, autoComplete: "off", className: cn(inputClasses, sizeClasses, iconStartPadding, (hasRightIcon || showClearButton) && iconEndPadding, showClearButton && "pr-8", inputClassName), value: searchValue, onChange: handleInputChange, onFocus: handleInputFocus, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: isDisabled, required: required }), hasLeftIcon && (jsx("div", { className: ((_f = theme.iconStartStyles) === null || _f === void 0 ? void 0 : _f[size]) || theme.iconStartStyle, children: iconStart })), showClearButton && (jsx("button", { type: "button", className: theme.clearButtonStyle, onClick: handleClear, "aria-label": "Clear selection", tabIndex: -1, children: jsx(X, { className: theme.clearIconStyle }) })), hasRightIcon && !showClearButton && (jsx("div", { className: ((_g = theme.iconEndStyles) === null || _g === void 0 ? void 0 : _g[size]) || theme.iconEndStyle, children: iconEnd }))] }) }), jsx(ComboboxOptions, { isOpen: isOpen, onClose: () => setIsOpen(false), triggerRef: wrapperRef, portal: portal, placement: placement, offset: offset, emptyMessage: emptyMessage, className: dropdownClassName, listboxId: listboxId, comboboxId: comboboxId, elevation: elevation, lift: lift })] }), helperText && (typeof helperText === 'string' ? (jsx("p", { id: `${comboboxId}-helper`, className: cn(helperTextClasses, helperTextStateClasses), children: helperText })) : (helperText)), name && (jsx("input", { type: "hidden", name: name, value: value !== undefined ? String(value) : "" }))] }) }));
 };
 const ComboboxForwarded = React__default.forwardRef(ComboboxInner);
 ComboboxForwarded.displayName = "Combobox";

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

@@ -31,6 +31,15 @@ const comboboxTheme = {
     iconEndStyle: "absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none text-[var(--color-text-muted)]",
     // Icon padding configuration
     iconPadding: formsBaseTheme.iconStyles.padding,
+    // Size-aware icon geometry: slot inset from --form-px-*, glyph from
+    // --form-icon-size-*. Flat keys above stay as the fallback.
+    iconStartStyles: formsBaseTheme.iconStyles.leftSizes,
+    iconEndStyles: formsBaseTheme.iconStyles.rightSizes,
+    iconSizes: formsBaseTheme.iconStyles.sizes,
+    iconPaddings: {
+        left: formsBaseTheme.iconStyles.paddingLeftSizes,
+        right: formsBaseTheme.iconStyles.paddingRightSizes,
+    },
     // Clear button styles
     clearButtonStyle: "absolute inset-y-0 right-0 flex items-center pr-2 cursor-pointer " +
         "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors z-10",

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

@@ -97,8 +97,21 @@ export interface ComboboxTheme {
     sizes: Record<ComboboxSize, string>;
     states: Record<ComboboxState, string>;
     focusStates: Record<ComboboxState, string>;
+    /** @deprecated size-blind; superseded by `iconStartStyles` */
     iconStartStyle: string;
+    /** @deprecated size-blind; superseded by `iconEndStyles` */
     iconEndStyle: string;
+    /** Per-size leading icon slot (position + inset) */
+    iconStartStyles?: Partial<Record<ComboboxSize, string>>;
+    /** Per-size trailing icon slot (position + inset) */
+    iconEndStyles?: Partial<Record<ComboboxSize, string>>;
+    /** Per-size sizing for built-in icons */
+    iconSizes?: Record<ComboboxSize, string>;
+    /** Per-size text runway reserved for each icon slot */
+    iconPaddings?: {
+        left?: Partial<Record<ComboboxSize, string>>;
+        right?: Partial<Record<ComboboxSize, string>>;
+    };
     iconPadding: {
         left: string;
         right: string;

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

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React__default, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import React__default, { useState, useRef, useCallback, useMemo } from 'react';
 import { datePickerTheme } from './DatePicker.theme.js';
 import { FormLabel } from '../FormLabel/FormLabel.js';
 import { DatePickerTrigger } from './DatePickerTrigger.js';
@@ -50,30 +50,38 @@ const DatePickerComponent = React__default.forwardRef(({ id, name, mode = "singl
     const theme = { ...datePickerTheme };
     // State
     const [isOpen, setIsOpen] = useState(false);
-    const [selectedValue, setSelectedValue] = useState(value || defaultValue);
+    // 🔴 §9: mode is DERIVED per render, never stored. `value` used to be mirrored
+    // into state and re-synced from an unconditional `useEffect(…, [value])` —
+    // which on mount fired with `value === undefined` and wiped the `defaultValue`
+    // seed, and in controlled mode let an ignored change stick because an
+    // unchanged prop never re-ran the effect.
+    const isControlled = value !== undefined;
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const selectedValue = isControlled ? value : uncontrolledValue;
     // Refs
     const triggerRef = useRef(null);
     const contentRef = useRef(null);
-    // Update internal state when prop value changes
-    useEffect(() => {
-        setSelectedValue(value);
-    }, [value]);
     // Date selection handler (single mode)
     const handleDateSelect = useCallback((newDate) => {
         if (mode === "single") {
-            if (newDate !== selectedValue) {
-                setSelectedValue(newDate);
+            // Compared by time, not identity: every calendar click builds a NEW Date,
+            // so an identity check was always true and the guard never fired.
+            const isSameSelection = selectedValue instanceof Date && selectedValue.getTime() === newDate.getTime();
+            if (!isSameSelection) {
+                if (!isControlled)
+                    setUncontrolledValue(newDate);
                 onChange === null || onChange === void 0 ? void 0 : onChange(newDate);
             }
             setIsOpen(false);
         }
-    }, [mode, selectedValue, onChange]);
+    }, [mode, selectedValue, isControlled, onChange]);
     // Range selection handler (range mode)
     const handleRangeSelect = useCallback((newRange) => {
-        setSelectedValue(newRange);
+        if (!isControlled)
+            setUncontrolledValue(newRange);
         onChange === null || onChange === void 0 ? void 0 : onChange(newRange);
         // Don't auto-close anymore - footer Apply button handles this
-    }, [onChange]);
+    }, [isControlled, onChange]);
     // Button click handler
     const handleButtonClick = useCallback(() => {
         if (!disabled) {
@@ -105,7 +113,6 @@ const DatePickerComponent = React__default.forwardRef(({ id, name, mode = "singl
             isOpen,
             setIsOpen,
             selectedValue,
-            setSelectedValue,
             minDate,
             maxDate,
             isDateDisabled,

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

@@ -26,6 +26,11 @@ const datePickerTheme = {
     triggerFocusStates: formsBaseTheme.focusStates,
     iconEndStyle: formsBaseTheme.iconStyles.right,
     iconEndPadding: formsBaseTheme.iconStyles.padding.right,
+    // Size-aware icon geometry: slot inset from --form-px-*, glyph from
+    // --form-icon-size-*. Flat keys above stay as the fallback.
+    iconEndStyles: formsBaseTheme.iconStyles.rightSizes,
+    iconEndPaddings: formsBaseTheme.iconStyles.paddingRightSizes,
+    iconSizes: formsBaseTheme.iconStyles.sizes,
     // Dropdown body - surface painted by the relative-elevation engine (surfaceClasses)
     bodyStyle: "min-w-fit max-w-none backdrop-blur-md border border-[var(--color-border)] rounded-[var(--popover-radius)] p-0 overflow-hidden z-[1000] fixed",
     bodyWithPresetsStyle: "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",

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

@@ -155,8 +155,16 @@ export interface DatePickerTheme {
     triggerStates: Record<DatePickerState, string>;
     triggerHoverStates: Record<DatePickerState, string>;
     triggerFocusStates: Record<DatePickerState, string>;
+    /** @deprecated size-blind; superseded by `iconEndStyles` */
     iconEndStyle: string;
+    /** @deprecated size-blind; superseded by `iconEndPaddings` */
     iconEndPadding: string;
+    /** Per-size trailing icon slot (position + inset) */
+    iconEndStyles?: Partial<Record<DatePickerSize, string>>;
+    /** Per-size text runway reserved for the trailing icon */
+    iconEndPaddings?: Partial<Record<DatePickerSize, string>>;
+    /** Per-size sizing for the built-in calendar icon */
+    iconSizes?: Record<DatePickerSize, string>;
     bodyStyle: string;
     bodyWithPresetsStyle: string;
     presetsContainerStyle: string;

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

@@ -5,7 +5,6 @@ export interface DatePickerContextType {
     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;

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

@@ -10,7 +10,7 @@ import { DatePickerContext } from './DatePickerContext.js';
  * Displays selected date or placeholder text
  */
 const DatePickerTrigger = ({ id, disabled, isOpen, state = "default", size = "md", className, onClick, onFocus, onBlur, children, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedby, }) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f;
     const context = useContext(DatePickerContext);
     if (!context) {
         throw new Error("DatePickerTrigger must be used within a DatePicker");
@@ -21,7 +21,9 @@ const DatePickerTrigger = ({ id, disabled, isOpen, state = "default", size = "md
     const stateStyle = ((_b = theme.triggerStates) === null || _b === void 0 ? void 0 : _b[state]) || "";
     const hoverStateStyle = ((_c = theme.triggerHoverStates) === null || _c === void 0 ? void 0 : _c[state]) || "";
     const focusStateStyle = ((_d = theme.triggerFocusStates) === null || _d === void 0 ? void 0 : _d[state]) || "";
-    const iconEndStyle = theme.iconEndStyle || "";
+    const iconEndStyle = ((_e = theme.iconEndStyles) === null || _e === void 0 ? void 0 : _e[size]) || theme.iconEndStyle || "";
+    // Glyph ramps with the control (--form-icon-size-*), not a flat h-4 w-4.
+    const iconSizeStyle = ((_f = theme.iconSizes) === null || _f === void 0 ? void 0 : _f[size]) || "size-4";
     const iconEndPadding = theme.iconEndPadding || ""; // Always apply right padding for built-in calendar icon
     const triggerButtonStyle = theme.triggerButtonStyle || "";
     // Apply focused styles when open - same pattern as SelectButton
@@ -29,7 +31,7 @@ const DatePickerTrigger = ({ id, disabled, isOpen, state = "default", size = "md
         ? focusStateStyle ||
             "shadow-[inset_0_0_0_1px_var(--color-primary-600)] ring-4 ring-[var(--color-primary)]/10"
         : "";
-    return (jsx("div", { className: "relative w-full", children: jsxs("button", { ref: triggerRef, id: id, type: "button", className: cn(baseStyle, sizeStyle, stateStyle, hoverStateStyle, activeFocusState, iconEndPadding, triggerButtonStyle, "text-left", className), onClick: onClick, onFocus: onFocus, onBlur: onBlur, disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-label": "Open calendar", "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, children: [children, jsx("span", { className: iconEndStyle, children: jsx(Calendar, { className: "h-4 w-4" }) })] }) }));
+    return (jsx("div", { className: "relative w-full", children: jsxs("button", { ref: triggerRef, id: id, type: "button", className: cn(baseStyle, sizeStyle, stateStyle, hoverStateStyle, activeFocusState, iconEndPadding, triggerButtonStyle, "text-left", className), onClick: onClick, onFocus: onFocus, onBlur: onBlur, disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-label": "Open calendar", "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, children: [children, jsx("span", { className: iconEndStyle, children: jsx(Calendar, { className: iconSizeStyle }) })] }) }));
 };
 
 export { DatePickerTrigger };

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

@@ -19,6 +19,11 @@ const dateRangePickerTheme = {
     triggerFocusStates: formsBaseTheme.focusStates,
     iconEndStyle: formsBaseTheme.iconStyles.right,
     iconEndPadding: formsBaseTheme.iconStyles.padding.right,
+    // Size-aware icon geometry: slot inset from --form-px-*, glyph from
+    // --form-icon-size-*. Flat keys above stay as the fallback.
+    iconEndStyles: formsBaseTheme.iconStyles.rightSizes,
+    iconEndPaddings: formsBaseTheme.iconStyles.paddingRightSizes,
+    iconSizes: formsBaseTheme.iconStyles.sizes,
     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 " +
@@ -29,7 +34,7 @@ const dateRangePickerTheme = {
     presetCheckmarkStyle: "size-4 text-[var(--color-primary)] shrink-0",
     mobilePresetsContainerStyle: "sm:hidden px-3 pt-3 pb-1",
     mobilePresetButtonStyle: "whitespace-nowrap px-3 py-1.5 text-xs font-medium rounded-full transition-colors cursor-pointer shrink-0 " +
-        "bg-[var(--color-background-secondary)] text-[var(--color-text-secondary)] " +
+        "bg-[var(--color-surface)] text-[var(--color-text-secondary)] " +
         "hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] " +
         "data-[active=true]:bg-[var(--color-primary-50)] data-[active=true]:text-[var(--color-primary)] " +
         "dark:data-[active=true]:bg-[var(--color-primary-950)] dark:data-[active=true]:text-[var(--color-primary-300)]",

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

@@ -163,8 +163,16 @@ export interface DateRangePickerTheme {
     triggerStates: Record<DateRangePickerState, string>;
     triggerHoverStates: Record<DateRangePickerState, string>;
     triggerFocusStates: Record<DateRangePickerState, string>;
+    /** @deprecated size-blind; superseded by `iconEndStyles` */
     iconEndStyle: string;
+    /** @deprecated size-blind; superseded by `iconEndPaddings` */
     iconEndPadding: string;
+    /** Per-size trailing icon slot (position + inset) */
+    iconEndStyles?: Partial<Record<DateRangePickerSize, string>>;
+    /** Per-size text runway reserved for the trailing icon */
+    iconEndPaddings?: Partial<Record<DateRangePickerSize, string>>;
+    /** Per-size sizing for the built-in calendar icon */
+    iconSizes?: Record<DateRangePickerSize, string>;
     bodyStyle: string;
     presetsContainerStyle: string;
     presetButtonStyle: string;

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

@@ -1,3 +1,4 @@
+"use client";
 import { createContext } from 'react';
 
 const DateRangePickerContext = createContext(undefined);

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

@@ -9,7 +9,7 @@ import { DateRangePickerContext } from './DateRangePickerContext.js';
  * DateRangePicker Trigger Component — styled like form input
  */
 const DateRangePickerTrigger = ({ id, disabled, isOpen, state = "default", size = "md", className, onClick, onFocus, onBlur, children, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedby, }) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f;
     const context = useContext(DateRangePickerContext);
     if (!context) {
         throw new Error("DateRangePickerTrigger must be used within a DateRangePicker");
@@ -20,14 +20,16 @@ const DateRangePickerTrigger = ({ id, disabled, isOpen, state = "default", size
     const stateStyle = ((_b = theme.triggerStates) === null || _b === void 0 ? void 0 : _b[state]) || "";
     const hoverStateStyle = ((_c = theme.triggerHoverStates) === null || _c === void 0 ? void 0 : _c[state]) || "";
     const focusStateStyle = ((_d = theme.triggerFocusStates) === null || _d === void 0 ? void 0 : _d[state]) || "";
-    const iconEndStyle = theme.iconEndStyle || "";
+    const iconEndStyle = ((_e = theme.iconEndStyles) === null || _e === void 0 ? void 0 : _e[size]) || theme.iconEndStyle || "";
+    // Glyph ramps with the control (--form-icon-size-*), not a flat h-4 w-4.
+    const iconSizeStyle = ((_f = theme.iconSizes) === null || _f === void 0 ? void 0 : _f[size]) || "size-4";
     const iconEndPadding = theme.iconEndPadding || "";
     const triggerButtonStyle = theme.triggerButtonStyle || "";
     const activeFocusState = isOpen
         ? focusStateStyle ||
             "shadow-[inset_0_0_0_1px_var(--color-primary-600)] ring-4 ring-[var(--color-primary)]/10"
         : "";
-    return (jsx("div", { className: "relative w-full", children: jsxs("button", { ref: triggerRef, id: id, type: "button", className: cn(baseStyle, sizeStyle, stateStyle, hoverStateStyle, activeFocusState, iconEndPadding, triggerButtonStyle, "text-left", className), onClick: onClick, onFocus: onFocus, onBlur: onBlur, disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-label": "Open date range picker", "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, children: [children, jsx("span", { className: iconEndStyle, children: jsx(Calendar, { className: "h-4 w-4" }) })] }) }));
+    return (jsx("div", { className: "relative w-full", children: jsxs("button", { ref: triggerRef, id: id, type: "button", className: cn(baseStyle, sizeStyle, stateStyle, hoverStateStyle, activeFocusState, iconEndPadding, triggerButtonStyle, "text-left", className), onClick: onClick, onFocus: onFocus, onBlur: onBlur, disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-label": "Open date range picker", "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, children: [children, jsx("span", { className: iconEndStyle, children: jsx(Calendar, { className: iconSizeStyle }) })] }) }));
 };
 
 export { DateRangePickerTrigger };

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

@@ -2,7 +2,7 @@ const fileUploadTheme = {
     // Root container
     containerStyle: "w-full",
     // Dropzone area (default state)
-    dropzoneStyle: "relative flex flex-col items-center justify-center w-full min-h-[160px] p-6 border border-dashed border-[var(--color-border)] rounded-[var(--form-radius)] bg-[var(--color-surface)] hover:border-[var(--color-border-hover)] transition-colors duration-400 cursor-pointer",
+    dropzoneStyle: "relative flex flex-col items-center justify-center w-full min-h-[160px] p-6 border border-dashed border-[var(--color-border)] rounded-[var(--form-radius)] bg-[var(--color-surface)] hover:border-[var(--color-border-hover)] transition-colors duration-[var(--motion-duration-slower)] cursor-pointer",
     // Dragging over — translucent primary tint composites over the surface in both modes
     dropzoneActiveStyle: "border-solid border-[var(--color-primary)] bg-[var(--color-primary)]/5",
     // Disabled
@@ -20,7 +20,7 @@ const fileUploadTheme = {
     // Non-image tile — centered document icon (filename surfaced via title tooltip)
     previewFileStyle: "flex items-center justify-center size-full text-[var(--color-text-muted)]",
     // Remove button (revealed on item hover)
-    removeButtonStyle: "absolute top-1 right-1 -translate-y-1 opacity-0 group-hover:opacity-100 transition-all duration-400 group-hover:-translate-y-0",
+    removeButtonStyle: "absolute top-1 right-1 -translate-y-1 opacity-0 group-hover:opacity-100 transition-all duration-[var(--motion-duration-slower)] group-hover:-translate-y-0",
 };
 
 export { fileUploadTheme };

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

@@ -1,7 +1,7 @@
 const fileUploadProgressTheme = {
     containerStyle: "flex flex-col gap-3",
     itemStyle: "w-full flex items-center gap-x-3",
-    iconContainerStyle: "flex items-center justify-center rounded-lg shrink-0 border border-[var(--color-border)] bg-[var(--color-background-secondary)]",
+    iconContainerStyle: "flex items-center justify-center rounded-lg shrink-0 border border-[var(--color-border)] bg-[var(--color-surface)]",
     iconStyle: "shrink-0 size-5 text-[var(--color-text-muted)]",
     fileInfoStyle: "flex-1 min-w-0",
     fileNameStyle: "text-sm font-medium text-[var(--color-text-primary)] truncate",

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

@@ -20,16 +20,16 @@ const PasswordToggleButton = ({ showPassword, onToggle, passwordToggleClasses, }
             }
         }, children: showPassword ? (jsx(EyeSlash, { className: toggleIconActive, "aria-hidden": "true" })) : (jsx(Eye, { className: toggleIconInactive, "aria-hidden": "true" })) }));
 };
-const NumberButtons = ({ isDisabled, isAtMax, isAtMin, onIncrement, onDecrement, numberButtonsContainerClasses, numberButtonClasses, }) => {
+const NumberButtons = ({ isDisabled, isAtMax, isAtMin, onIncrement, onDecrement, numberButtonsContainerClasses, numberButtonClasses, iconSizeClass, }) => {
     const incrementIconStyle = inputTheme.typeStyles.number.incrementIconStyle;
     const decrementIconStyle = inputTheme.typeStyles.number.decrementIconStyle;
     return (jsxs("div", { className: numberButtonsContainerClasses, children: [jsx("button", { type: "button", className: `${numberButtonClasses}`, onClick: (e) => {
                     e.stopPropagation();
                     onDecrement();
-                }, disabled: isDisabled || isAtMin, "aria-label": "Decrease value", tabIndex: -1, children: jsx(Minus, { className: cn("size-4", decrementIconStyle), "aria-hidden": "true" }) }), jsx("button", { type: "button", className: `${numberButtonClasses}`, onClick: (e) => {
+                }, disabled: isDisabled || isAtMin, "aria-label": "Decrease value", tabIndex: -1, children: jsx(Minus, { className: cn(iconSizeClass, decrementIconStyle), "aria-hidden": "true" }) }), jsx("button", { type: "button", className: `${numberButtonClasses}`, onClick: (e) => {
                     e.stopPropagation();
                     onIncrement();
-                }, disabled: isDisabled || isAtMax, "aria-label": "Increase value", tabIndex: -1, children: jsx(Plus, { className: cn("size-4", incrementIconStyle), "aria-hidden": "true" }) })] }));
+                }, disabled: isDisabled || isAtMax, "aria-label": "Increase value", tabIndex: -1, children: jsx(Plus, { className: cn(iconSizeClass, incrementIconStyle), "aria-hidden": "true" }) })] }));
 };
 const getActiveDots = (strength) => {
     switch (strength) {
@@ -68,6 +68,7 @@ const PasswordStrengthIndicator = ({ inline = false, passwordStrengthIndicator,
 // Main Input Component
 // ============================================================================
 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) => {
+    var _a, _b, _c, _d, _e, _f, _g;
     const [isFocused, setIsFocused] = useState(false);
     const [showPassword, setShowPassword] = useState(false);
     const generatedId = React__default.useId();
@@ -81,9 +82,12 @@ const Input = React__default.forwardRef(({ size = "md", state = "default", class
         : undefined);
     const inputRef = useRef(null);
     const cursorPositionRef = useRef(null);
-    // Default icons based on input type
-    const defaultPasswordIcon = showTypeIcon && type === "password" && !iconStart ? (jsx(Lock, { className: "size-5 text-[var(--color-text-muted)]" })) : null;
-    const defaultSearchIcon = showTypeIcon && type === "search" && !iconStart ? (jsx(MagnifyingGlass, { className: cn("size-5", inputTheme.typeStyles.search.iconStyle) })) : null;
+    // Default icons based on input type. Sized from the shared control-icon
+    // ramp (--form-icon-size-*) rather than a flat size-5, so they scale with
+    // the field and with a theme that retunes it.
+    const iconSizeClass = ((_a = inputTheme.iconSizes) === null || _a === void 0 ? void 0 : _a[size]) || "size-4";
+    const defaultPasswordIcon = showTypeIcon && type === "password" && !iconStart ? (jsx(Lock, { className: cn(iconSizeClass, "text-[var(--color-text-muted)]") })) : null;
+    const defaultSearchIcon = showTypeIcon && type === "search" && !iconStart ? (jsx(MagnifyingGlass, { className: cn(iconSizeClass, inputTheme.typeStyles.search.iconStyle) })) : null;
     // Use the provided iconStart or the default icon based on input type
     const finalLeftIcon = iconStart || defaultPasswordIcon || defaultSearchIcon;
     // Derived state flags for internal use
@@ -253,11 +257,12 @@ const Input = React__default.forwardRef(({ size = "md", state = "default", class
     const sizeClasses = inputTheme.sizes[size];
     const stateClasses = inputTheme.states[state];
     const helperTextClasses = inputTheme.helperText;
-    // Icon classes using design tokens
-    const iconStartClasses = inputTheme.iconStartStyle;
-    const iconEndClasses = inputTheme.iconEndStyle;
-    const iconStartPadding = inputTheme.iconPadding.left;
-    const iconEndPadding = inputTheme.iconPadding.right;
+    // Icon classes using design tokens — size-aware slot inset and text runway,
+    // falling back to the flat originals if a theme only overrode those.
+    const iconStartClasses = ((_b = inputTheme.iconStartStyles) === null || _b === void 0 ? void 0 : _b[size]) || inputTheme.iconStartStyle;
+    const iconEndClasses = ((_c = inputTheme.iconEndStyles) === null || _c === void 0 ? void 0 : _c[size]) || inputTheme.iconEndStyle;
+    const iconStartPadding = ((_e = (_d = inputTheme.iconPaddings) === null || _d === void 0 ? void 0 : _d.left) === null || _e === void 0 ? void 0 : _e[size]) || inputTheme.iconPadding.left;
+    const iconEndPadding = ((_g = (_f = inputTheme.iconPaddings) === null || _f === void 0 ? void 0 : _f.right) === null || _g === void 0 ? void 0 : _g[size]) || inputTheme.iconPadding.right;
     // Content classes - size-aware
     const contentStyleClasses = inputTheme.contentStyle[size];
     const contentStartStyle = inputTheme.contentStartStyle;
@@ -282,7 +287,7 @@ const Input = React__default.forwardRef(({ size = "md", state = "default", class
                                     }, 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 }), displayedMessage && (typeof displayedMessage === 'string' ? (jsx("div", { id: `${inputId}-helper`, className: cn(helperTextClasses, helperTextClassName), role: isInvalid ? "alert" : undefined, children: displayedMessage })) : (displayedMessage))] }));
+                                    }, 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, iconSizeClass: iconSizeClass })), 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";
 

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

@@ -45,6 +45,16 @@ const inputTheme = {
     // Icon positioning styles
     iconStartStyle: formsBaseTheme.iconStyles.left,
     iconEndStyle: formsBaseTheme.iconStyles.right,
+    // Size-aware icon geometry: slot inset from --form-px-*, glyph from
+    // --form-icon-size-*. The flat keys above stay as the fallback for a theme
+    // that only overrode those.
+    iconStartStyles: formsBaseTheme.iconStyles.leftSizes,
+    iconEndStyles: formsBaseTheme.iconStyles.rightSizes,
+    iconSizes: formsBaseTheme.iconStyles.sizes,
+    iconPaddings: {
+        left: formsBaseTheme.iconStyles.paddingLeftSizes,
+        right: formsBaseTheme.iconStyles.paddingRightSizes,
+    },
     // Icon padding configuration
     iconPadding: formsBaseTheme.iconStyles.padding,
     // Content styles - prefix/suffix content with size-aware font sizes

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

@@ -115,12 +115,26 @@ export interface InputTheme {
     sizes: Record<InputSize, string>;
     states: Record<InputState, string>;
     helperText: string;
+    /** @deprecated size-blind; superseded by `iconStartStyles` */
     iconStartStyle: string;
+    /** @deprecated size-blind; superseded by `iconEndStyles` */
     iconEndStyle: string;
+    /** @deprecated size-blind; superseded by `iconPaddings` */
     iconPadding: {
         left: string;
         right: string;
     };
+    /** Per-size leading icon slot (position + inset) */
+    iconStartStyles?: Partial<Record<InputSize, string>>;
+    /** Per-size trailing icon slot (position + inset) */
+    iconEndStyles?: Partial<Record<InputSize, string>>;
+    /** Per-size text runway reserved for each icon slot */
+    iconPaddings?: {
+        left?: Partial<Record<InputSize, string>>;
+        right?: Partial<Record<InputSize, string>>;
+    };
+    /** Per-size sizing for the built-in type icons (lock, search) */
+    iconSizes?: Record<InputSize, string>;
     contentStyle: Record<InputSize, string>;
     contentStartStyle: string;
     contentEndStyle: string;

package/dist/components/forms/InputAddress/InputAddress.js

@@ -75,7 +75,7 @@ const DEFAULT_COUNTRIES = [
  * />
  * ```
  */
-const InputAddress = React__default.forwardRef(({ state = 'default', errorMessage, showCountrySelector = true, showPostalCode = true, availableCountries = [], defaultCountry = "United States", onCountryChange, onPostalCodeChange, countryLabel = "Country", postalCodeLabel = "ZIP / Postal code", legendText = "Billing address", streetInputProps = {}, stateInputProps = {}, countryInputProps = {}, postalCodeInputProps = {}, className = "", theme = {}, }, ref) => {
+const InputAddress = React__default.forwardRef(({ state = 'default', size = 'md', errorMessage, showCountrySelector = true, showPostalCode = true, availableCountries = [], defaultCountry = "United States", onCountryChange, onPostalCodeChange, countryLabel = "Country", postalCodeLabel = "ZIP / Postal code", legendText = "Billing address", streetInputProps = {}, stateInputProps = {}, countryInputProps = {}, postalCodeInputProps = {}, className = "", theme = {}, }, ref) => {
     var _a;
     const isDisabled = state === 'disabled';
     // Clear the error visually as soon as the user starts re-entering after an error.
@@ -140,10 +140,10 @@ const InputAddress = React__default.forwardRef(({ state = 'default', errorMessag
     const isBottomRowSplit = showCountrySelector && showPostalCode;
     // Merge group state into each field's props; strip per-field helperText so only the
     // consolidated message shows at the bottom.
-    const { helperText: _st, onChange: _stOnChange, ...streetProps } = { state: fieldState, ...streetInputProps };
-    const { helperText: _sa, onChange: _saOnChange, ...stateProps } = { state: fieldState, ...stateInputProps };
-    const { helperText: _co, className: _coClass, ...countryProps } = { state: fieldState, ...countryInputProps };
-    const { helperText: _pc, ...postalProps } = { state: fieldState, ...postalCodeInputProps };
+    const { helperText: _st, onChange: _stOnChange, ...streetProps } = { state: fieldState, size, ...streetInputProps };
+    const { helperText: _sa, onChange: _saOnChange, ...stateProps } = { state: fieldState, size, ...stateInputProps };
+    const { helperText: _co, className: _coClass, ...countryProps } = { state: fieldState, size, ...countryInputProps };
+    const { helperText: _pc, ...postalProps } = { state: fieldState, size, ...postalCodeInputProps };
     return (jsxs("fieldset", { ref: ref, className: `w-full border-0 m-0 p-0 ${isInvalid ? 'state-invalid' : ''} ${className}`, "data-testid": "input-address-fieldset", "aria-invalid": isInvalid || undefined, "aria-errormessage": isInvalid && errorMessage ? errorId : undefined, children: [jsx("legend", { className: `block text-sm/6 font-medium mb-2 text-[var(--color-text-primary)] ${(_a = mergedTheme.legendStyles) !== null && _a !== void 0 ? _a : ""}`, children: legendText }), jsxs("div", { className: `relative grid gap-0 ${mergedTheme.contentStyles}`, "data-testid": "input-address-content", children: [jsx("div", { className: "w-full relative focus-within:z-10 hover:z-10", "data-testid": "input-address-street", children: jsx(Input, { id: streetId, type: "text", placeholder: "Street address", "aria-label": "street address", inputGroupClassName: "rounded-b-none", ...streetProps, onChange: markDirty(_stOnChange) }) }), jsx("div", { className: "w-full -mt-[0.5px] relative focus-within:z-10 hover:z-10", "data-testid": "input-address-state", children: jsx(Input, { id: stateId, type: "text", placeholder: "State", "aria-label": "state", inputGroupClassName: showBottomRow ? "rounded-none" : "rounded-t-none", ...stateProps, onChange: markDirty(_saOnChange) }) }), showBottomRow && (jsxs("div", { className: cn("grid grid-cols-1 w-full -mt-px relative focus-within:z-10 hover:z-10", isBottomRowSplit && "sm:grid-cols-2"), children: [showCountrySelector && (jsx("div", { className: `${mergedTheme.countryWrapperStyles} w-full sm:pr-0 relative focus-within:z-10 hover:z-10`, "data-testid": "input-address-country", children: jsx(Select, { id: countryId, options: countryOptions, value: country, onChange: handleCountryChange, placeholder: countryLabel, searchable: true, searchPlaceholder: `Search ${countryLabel.toLowerCase()}`, disabled: isDisabled, 
                                     // className lands on the Select trigger button (which carries the same
                                     // inputGroup border/radius as Input's inputGroupClassName target), so the

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { InputProps, InputTheme } from '../Input/Input.types';
-import { SelectProps } from '../Select/Select.types';
+import { SelectSingleProps } from '../Select/Select.types';
 /**
  * InputAddress component props
  * @property {boolean} showCountrySelector - Whether to show the country selector
@@ -17,6 +17,13 @@ import { SelectProps } from '../Select/Select.types';
 export interface InputAddressProps {
     /** Visual/validation state of the entire address group */
     state?: 'default' | 'disabled' | 'invalid';
+    /**
+     * Size of every field in the group, from the shared `--form-*` scale, so the
+     * address block lines up with the Inputs and Selects around it. A per-field
+     * `*InputProps.size` still wins.
+     * @default 'md'
+     */
+    size?: InputProps['size'];
     /** Consolidated error message shown below all fields when `state="invalid"` */
     errorMessage?: React.ReactNode;
     /** Whether to show the country selector */
@@ -42,7 +49,7 @@ export interface InputAddressProps {
     /** Props passed to the state input */
     stateInputProps?: Omit<InputProps, 'ref'>;
     /** Props passed to the country Select (e.g. `searchable`, `placement`, `theme`) */
-    countryInputProps?: Partial<SelectProps<string>>;
+    countryInputProps?: Partial<SelectSingleProps<string>>;
     /** Props passed to the postal code input */
     postalCodeInputProps?: Omit<InputProps, 'ref'>;
     /** Class name for the container */