smartsell-ui-kit 0.1.4 → 0.1.6

package/dist/index.d.cts

@@ -47,10 +47,10 @@ interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'dan
     label?: ReactNode;
     hint?: ReactNode;
     error?: ReactNode;
-    controlSize?: ControlSize;
+    size?: ControlSize;
     indeterminate?: boolean;
 }
-declare function Checkbox({ label, hint, error, controlSize, id, checked, defaultChecked, disabled, indeterminate, required, className, style, onChange, onFocus, onBlur, ...rest }: CheckboxProps): react_jsx_runtime.JSX.Element;
+declare function Checkbox({ label, hint, error, size, id, checked, defaultChecked, disabled, indeterminate, required, className, style, onChange, onFocus, onBlur, ...rest }: CheckboxProps): react_jsx_runtime.JSX.Element;
 
 interface ModalSlotIds {
     header: string;
@@ -110,7 +110,7 @@ interface DatePickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'd
     label?: ReactNode;
     hint?: ReactNode;
     error?: ReactNode;
-    controlSize?: ControlSize;
+    size?: ControlSize;
     value?: DatePickerValue;
     defaultValue?: DatePickerValue;
     onChange?: (value: string | null, context: DatePickerChangeContext) => void;
@@ -129,18 +129,18 @@ interface DatePickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'd
     pickerButtonLabel?: string;
     clearButtonLabel?: string;
 }
-declare function DatePicker({ label, hint, error, controlSize, value, defaultValue, onChange, mode, format, allowPastDates, allowFutureDates, minDate, maxDate, minuteStep, clearable, showPickerButton, isDateUnavailable, invalidDateMessage, unavailableDateMessage, pickerButtonLabel, clearButtonLabel, id, name, disabled, readOnly, required, style, className, placeholder, onBlur, onClick, onFocus, onKeyDown, ...rest }: DatePickerProps): react_jsx_runtime.JSX.Element;
+declare function DatePicker({ label, hint, error, size, value, defaultValue, onChange, mode, format, allowPastDates, allowFutureDates, minDate, maxDate, minuteStep, clearable, showPickerButton, isDateUnavailable, invalidDateMessage, unavailableDateMessage, pickerButtonLabel, clearButtonLabel, id, name, disabled, readOnly, required, style, className, placeholder, onBlur, onClick, onFocus, onKeyDown, ...rest }: DatePickerProps): react_jsx_runtime.JSX.Element;
 
 interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'dangerouslySetInnerHTML' | 'size'> {
     label?: ReactNode;
     hint?: ReactNode;
     error?: ReactNode;
-    controlSize?: ControlSize;
+    size?: ControlSize;
     showPasswordToggle?: boolean;
     fileButtonLabel?: ReactNode;
     icon?: ReactNode;
 }
-declare function Input({ label, hint, error, controlSize, className, showPasswordToggle, fileButtonLabel, icon, id, disabled, placeholder, onChange, style, type, ...rest }: InputProps): react_jsx_runtime.JSX.Element;
+declare function Input({ label, hint, error, size, className, showPasswordToggle, fileButtonLabel, icon, id, disabled, placeholder, onChange, style, type, ...rest }: InputProps): react_jsx_runtime.JSX.Element;
 
 type ModalActionAppearance = 'text' | 'outlined' | 'contained' | 'link';
 type ModalThemeColors = {
@@ -208,7 +208,7 @@ interface SharedSelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>
     hint?: ReactNode;
     error?: ReactNode;
     placeholder?: ReactNode;
-    controlSize?: ControlSize;
+    size?: ControlSize;
     isMulti?: boolean;
     isFilterable?: boolean;
 }
@@ -367,8 +367,8 @@ interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>
     label?: ReactNode;
     hint?: ReactNode;
     error?: ReactNode;
-    controlSize?: ControlSize;
+    size?: ControlSize;
 }
-declare function Textarea({ label, hint, error, controlSize, id, disabled, style, rows, ...rest }: TextareaProps): react_jsx_runtime.JSX.Element;
+declare function Textarea({ label, hint, error, size, id, disabled, style, rows, ...rest }: TextareaProps): react_jsx_runtime.JSX.Element;
 
 export { Button, type ButtonProps, Card, type CardProps, CardSmall, type CardSmallProps, Checkbox, type CheckboxProps, ComposableModal, type ComposableModalProps, type ComposableModalSlotRenderProps, type ComposableModalSlotRenderer, type ControlSize, DatePicker, type DatePickerChangeContext, type DatePickerChangeReason, type DatePickerMode, type DatePickerProps, type DatePickerValue, Input, type InputProps, Modal, type ModalAction, type ModalProps, type ModalSlotContext, type ModalSlotIds, type ModalTheme, type ModalThemeSource, Select, SelectAsync, type SelectAsyncLoadContext, type SelectAsyncLoadResult, type SelectAsyncOption, type SelectAsyncOptionValue, type SelectAsyncProps, type SelectProps, Separator, type SeparatorOrientation, type SeparatorProps, type SharedTableProps, type StandardModalProps, Table, type TableAction, type TableActionSource, type TableActionTone, TableAsync, type TableAsyncLoadContext, type TableAsyncLoadResult, type TableAsyncProps, type TableColumn, type TableColumnAlign, type TableColumnType, type TableLabels, type TableProps, Textarea, type TextareaProps, type UiKitTheme, createModalSlotIds, useUiKitTheme };

package/dist/index.d.ts

@@ -47,10 +47,10 @@ interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'dan
     label?: ReactNode;
     hint?: ReactNode;
     error?: ReactNode;
-    controlSize?: ControlSize;
+    size?: ControlSize;
     indeterminate?: boolean;
 }
-declare function Checkbox({ label, hint, error, controlSize, id, checked, defaultChecked, disabled, indeterminate, required, className, style, onChange, onFocus, onBlur, ...rest }: CheckboxProps): react_jsx_runtime.JSX.Element;
+declare function Checkbox({ label, hint, error, size, id, checked, defaultChecked, disabled, indeterminate, required, className, style, onChange, onFocus, onBlur, ...rest }: CheckboxProps): react_jsx_runtime.JSX.Element;
 
 interface ModalSlotIds {
     header: string;
@@ -110,7 +110,7 @@ interface DatePickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'd
     label?: ReactNode;
     hint?: ReactNode;
     error?: ReactNode;
-    controlSize?: ControlSize;
+    size?: ControlSize;
     value?: DatePickerValue;
     defaultValue?: DatePickerValue;
     onChange?: (value: string | null, context: DatePickerChangeContext) => void;
@@ -129,18 +129,18 @@ interface DatePickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'd
     pickerButtonLabel?: string;
     clearButtonLabel?: string;
 }
-declare function DatePicker({ label, hint, error, controlSize, value, defaultValue, onChange, mode, format, allowPastDates, allowFutureDates, minDate, maxDate, minuteStep, clearable, showPickerButton, isDateUnavailable, invalidDateMessage, unavailableDateMessage, pickerButtonLabel, clearButtonLabel, id, name, disabled, readOnly, required, style, className, placeholder, onBlur, onClick, onFocus, onKeyDown, ...rest }: DatePickerProps): react_jsx_runtime.JSX.Element;
+declare function DatePicker({ label, hint, error, size, value, defaultValue, onChange, mode, format, allowPastDates, allowFutureDates, minDate, maxDate, minuteStep, clearable, showPickerButton, isDateUnavailable, invalidDateMessage, unavailableDateMessage, pickerButtonLabel, clearButtonLabel, id, name, disabled, readOnly, required, style, className, placeholder, onBlur, onClick, onFocus, onKeyDown, ...rest }: DatePickerProps): react_jsx_runtime.JSX.Element;
 
 interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'dangerouslySetInnerHTML' | 'size'> {
     label?: ReactNode;
     hint?: ReactNode;
     error?: ReactNode;
-    controlSize?: ControlSize;
+    size?: ControlSize;
     showPasswordToggle?: boolean;
     fileButtonLabel?: ReactNode;
     icon?: ReactNode;
 }
-declare function Input({ label, hint, error, controlSize, className, showPasswordToggle, fileButtonLabel, icon, id, disabled, placeholder, onChange, style, type, ...rest }: InputProps): react_jsx_runtime.JSX.Element;
+declare function Input({ label, hint, error, size, className, showPasswordToggle, fileButtonLabel, icon, id, disabled, placeholder, onChange, style, type, ...rest }: InputProps): react_jsx_runtime.JSX.Element;
 
 type ModalActionAppearance = 'text' | 'outlined' | 'contained' | 'link';
 type ModalThemeColors = {
@@ -208,7 +208,7 @@ interface SharedSelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>
     hint?: ReactNode;
     error?: ReactNode;
     placeholder?: ReactNode;
-    controlSize?: ControlSize;
+    size?: ControlSize;
     isMulti?: boolean;
     isFilterable?: boolean;
 }
@@ -367,8 +367,8 @@ interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>
     label?: ReactNode;
     hint?: ReactNode;
     error?: ReactNode;
-    controlSize?: ControlSize;
+    size?: ControlSize;
 }
-declare function Textarea({ label, hint, error, controlSize, id, disabled, style, rows, ...rest }: TextareaProps): react_jsx_runtime.JSX.Element;
+declare function Textarea({ label, hint, error, size, id, disabled, style, rows, ...rest }: TextareaProps): react_jsx_runtime.JSX.Element;
 
 export { Button, type ButtonProps, Card, type CardProps, CardSmall, type CardSmallProps, Checkbox, type CheckboxProps, ComposableModal, type ComposableModalProps, type ComposableModalSlotRenderProps, type ComposableModalSlotRenderer, type ControlSize, DatePicker, type DatePickerChangeContext, type DatePickerChangeReason, type DatePickerMode, type DatePickerProps, type DatePickerValue, Input, type InputProps, Modal, type ModalAction, type ModalProps, type ModalSlotContext, type ModalSlotIds, type ModalTheme, type ModalThemeSource, Select, SelectAsync, type SelectAsyncLoadContext, type SelectAsyncLoadResult, type SelectAsyncOption, type SelectAsyncOptionValue, type SelectAsyncProps, type SelectProps, Separator, type SeparatorOrientation, type SeparatorProps, type SharedTableProps, type StandardModalProps, Table, type TableAction, type TableActionSource, type TableActionTone, TableAsync, type TableAsyncLoadContext, type TableAsyncLoadResult, type TableAsyncProps, type TableColumn, type TableColumnAlign, type TableColumnType, type TableLabels, type TableProps, Textarea, type TextareaProps, type UiKitTheme, createModalSlotIds, useUiKitTheme };

package/dist/index.js

@@ -114,6 +114,16 @@ var DISABLED_FIELD_OPACITY = 0.7;
 
 // src/foundation/controlSize.ts
 var CONTROL_LEADING_ICON_SHIFT = 5;
+var CONTROL_TEXT_VERTICAL_SHIFT = 1;
+var SELECT_TEXT_VERTICAL_SHIFT_REDUCTION = 1;
+var getControlTextVerticalPadding = (size, shift = CONTROL_TEXT_VERTICAL_SHIFT) => {
+  const metrics = getControlMetrics(size);
+  return {
+    top: Math.max(0, metrics.paddingY - shift),
+    bottom: metrics.paddingY + shift
+  };
+};
+var getSelectTextVerticalShift = () => Math.max(0, CONTROL_TEXT_VERTICAL_SHIFT - SELECT_TEXT_VERTICAL_SHIFT_REDUCTION);
 var CONTROL_METRICS_BY_SIZE = {
   sm: {
     height: 30,
@@ -154,6 +164,23 @@ var getControlLeadingIconInset = (size) => {
 var getControlLeadingAdornmentWidth = (size, iconSize) => {
   return getControlLeadingIconInset(size) + iconSize;
 };
+var getTextInputPadding = (size, options = {}) => {
+  var _a, _b;
+  const metrics = getControlMetrics(size);
+  const { top, bottom } = getControlTextVerticalPadding(size);
+  const leadingPadding = (_a = options.leadingPadding) != null ? _a : metrics.paddingX;
+  const trailingPadding = (_b = options.trailingPadding) != null ? _b : metrics.paddingX;
+  return `${top}px ${trailingPadding}px ${bottom}px ${leadingPadding}px`;
+};
+var getSelectControlPadding = (size) => {
+  const metrics = getControlMetrics(size);
+  const { top, bottom } = getControlTextVerticalPadding(size, getSelectTextVerticalShift());
+  return `${top}px ${metrics.selectPaddingRight}px ${bottom}px ${metrics.paddingX}px`;
+};
+var getControlTextNudgeStyle = (shift = CONTROL_TEXT_VERTICAL_SHIFT) => ({
+  transform: `translateY(-${shift}px)`
+});
+var getSelectTextNudgeStyle = () => getControlTextNudgeStyle(getSelectTextVerticalShift());
 var getSelectIndicatorOffset = (size) => getControlMetrics(size).selectIndicatorOffset;
 
 // src/foundation/shadow.ts
@@ -484,7 +511,7 @@ function CardSmall({
 // src/components/Checkbox.tsx
 import { useEffect as useEffect2, useId, useRef, useState } from "react";
 import { jsx as jsx3, jsxs as jsxs4 } from "react/jsx-runtime";
-var CHECKBOX_SIZE_BY_CONTROL_SIZE = {
+var CHECKBOX_SIZE_BY_SIZE = {
   sm: 14,
   md: 16,
   lg: 20
@@ -494,7 +521,7 @@ var CHECKBOX_LABEL_CLASSNAMES = {
   md: "text-sm leading-[18px]",
   lg: "text-[15px] leading-[18px]"
 };
-var getCheckboxSize = (controlSize) => CHECKBOX_SIZE_BY_CONTROL_SIZE[controlSize];
+var getCheckboxSize = (size) => CHECKBOX_SIZE_BY_SIZE[size];
 var hasNodeContent = (value) => {
   if (Array.isArray(value)) {
     return value.some(hasNodeContent);
@@ -566,7 +593,7 @@ function Checkbox({
   label,
   hint,
   error,
-  controlSize = "sm",
+  size = "sm",
   id,
   checked,
   defaultChecked,
@@ -582,7 +609,7 @@ function Checkbox({
 }) {
   const theme = useUiKitTheme();
   const mutedText = theme.colors.textLight;
-  const indicatorSize = getCheckboxSize(controlSize);
+  const indicatorSize = getCheckboxSize(size);
   const hasLabel = hasNodeContent(label);
   const hasHint = hasNodeContent(hint);
   const hasError = hasNodeContent(error);
@@ -676,7 +703,7 @@ function Checkbox({
                   hasSecondaryContent ? "justify-start" : "justify-center"
                 ),
                 children: [
-                  label ? /* @__PURE__ */ jsxs4("span", { className: cx("font-semibold text-[var(--theme-text)]", CHECKBOX_LABEL_CLASSNAMES[controlSize]), children: [
+                  label ? /* @__PURE__ */ jsxs4("span", { className: cx("font-semibold text-[var(--theme-text)]", CHECKBOX_LABEL_CLASSNAMES[size]), children: [
                     label,
                     required ? /* @__PURE__ */ jsx3("span", { className: "ml-1 text-[var(--theme-negative)]", children: "*" }) : null
                   ] }) : null,
@@ -1525,7 +1552,7 @@ function Input({
   label,
   hint,
   error,
-  controlSize = "sm",
+  size = "sm",
   className,
   showPasswordToggle = true,
   fileButtonLabel,
@@ -1539,8 +1566,8 @@ function Input({
   ...rest
 }) {
   useUiKitTheme();
-  const controlMetrics = getControlMetrics(controlSize);
-  const passwordToggleMetrics = getPasswordToggleMetrics(controlSize);
+  const controlMetrics = getControlMetrics(size);
+  const passwordToggleMetrics = getPasswordToggleMetrics(size);
   const generatedId = useId2();
   const inputId = id != null ? id : generatedId;
   const fileInputRef = useRef2(null);
@@ -1574,15 +1601,16 @@ function Input({
   const showUploadLabel = hasFileButtonLabel && !hasSelectedFiles;
   const passwordLockIconSize = passwordToggleMetrics.iconSize + 2;
   const leadingContentGap = Math.max(0, Math.round(controlMetrics.paddingX / 3));
-  const leadingIconInset = getControlLeadingIconInset(controlSize);
+  const leadingIconInset = getControlLeadingIconInset(size);
+  const controlTextNudgeStyle = getControlTextNudgeStyle();
   const hasExternalError = error !== void 0 && error !== null && error !== "";
   const resolvedError = hasExternalError ? error : validationError;
   const hasResolvedError = resolvedError !== void 0 && resolvedError !== null && resolvedError !== "";
   const fileSelectionText = selectedFileNames.length === 0 ? placeholder != null ? placeholder : "" : selectedFileNames.length === 1 ? selectedFileNames[0] : `${selectedFileNames.length} files selected`;
   const fileIconSize = Math.max(controlMetrics.fontSize + 3, 16);
-  const fileTriggerWidth = getControlLeadingAdornmentWidth(controlSize, fileIconSize);
-  const leadingAdornmentWidth = getControlLeadingAdornmentWidth(controlSize, fileIconSize);
-  const passwordAdornmentWidth = getControlLeadingAdornmentWidth(controlSize, passwordLockIconSize);
+  const fileTriggerWidth = getControlLeadingAdornmentWidth(size, fileIconSize);
+  const leadingAdornmentWidth = getControlLeadingAdornmentWidth(size, fileIconSize);
+  const passwordAdornmentWidth = getControlLeadingAdornmentWidth(size, passwordLockIconSize);
   const defaultLeadingIcon = isEmailField ? /* @__PURE__ */ jsx6(EmailIcon, { size: fileIconSize }) : isLoginField ? /* @__PURE__ */ jsx6(LoginIcon, { size: fileIconSize }) : null;
   const resolvedLeadingIcon = icon != null ? icon : defaultLeadingIcon;
   const hasLeadingIcon = isRenderableNode(resolvedLeadingIcon);
@@ -1593,8 +1621,8 @@ function Input({
     "w-full box-border rounded-2xl border border-solid bg-[var(--theme-surface)]",
     "text-[var(--theme-text)] outline-none transition-[border-color,box-shadow,background-color]",
     "duration-150 placeholder:text-[var(--theme-textLight)]",
-    FIELD_HEIGHT_CLASSNAMES[controlSize],
-    FIELD_TEXT_CLASSNAMES[controlSize],
+    FIELD_HEIGHT_CLASSNAMES[size],
+    FIELD_TEXT_CLASSNAMES[size],
     hasResolvedError ? "border-[var(--theme-negative)]" : "border-[var(--theme-textLight)]",
     disabled ? "cursor-not-allowed opacity-70" : "cursor-text"
   );
@@ -1604,15 +1632,15 @@ function Input({
     "border border-solid bg-[var(--theme-surface)] text-[var(--theme-text)] text-left",
     "transition-[border-color,box-shadow,background-color] duration-150",
     "shadow-[0px_4px_5px_var(--theme-shadow)]",
-    FIELD_HEIGHT_CLASSNAMES[controlSize],
-    FIELD_TEXT_CLASSNAMES[controlSize],
+    FIELD_HEIGHT_CLASSNAMES[size],
+    FIELD_TEXT_CLASSNAMES[size],
     hasResolvedError ? "border-[var(--theme-negative)]" : "border-[var(--theme-textLight)]",
     disabled ? "opacity-70" : null
   );
   const adornedInputClassName = cx(
     "h-full min-w-0 flex-1 border-0 bg-transparent text-[var(--theme-text)] outline-none",
     "placeholder:text-[var(--theme-textLight)]",
-    FIELD_TEXT_CLASSNAMES[controlSize],
+    FIELD_TEXT_CLASSNAMES[size],
     disabled ? "cursor-not-allowed" : "cursor-text"
   );
   const adornmentColorClassName = hasResolvedError ? "text-[var(--theme-negative)]" : "text-[var(--theme-textLight)]";
@@ -1676,7 +1704,7 @@ function Input({
               className: cx(
                 "inline-flex shrink-0 self-stretch whitespace-nowrap border-0 bg-transparent",
                 "items-center text-[var(--theme-text)] appearance-none",
-                FIELD_TEXT_CLASSNAMES[controlSize],
+                FIELD_TEXT_CLASSNAMES[size],
                 disabled ? "cursor-not-allowed" : "cursor-pointer",
                 showUploadLabel ? "justify-start font-bold" : "justify-center"
               ),
@@ -1702,7 +1730,7 @@ function Input({
                     children: resolvedFileIcon
                   }
                 ),
-                showUploadLabel ? fileButtonLabel : null
+                showUploadLabel ? /* @__PURE__ */ jsx6("span", { style: controlTextNudgeStyle, children: fileButtonLabel }) : null
               ]
             }
           ),
@@ -1724,10 +1752,13 @@ function Input({
                 {
                   className: cx(
                     "flex h-full min-w-0 flex-1 items-center overflow-hidden text-ellipsis whitespace-nowrap",
-                    FIELD_TEXT_CLASSNAMES[controlSize],
+                    FIELD_TEXT_CLASSNAMES[size],
                     hasSelectedFiles ? "text-[var(--theme-text)]" : "text-[var(--theme-textLight)]"
                   ),
-                  style: { padding: `0 ${controlMetrics.paddingX}px 0 ${leadingContentGap}px` },
+                  style: {
+                    padding: `0 ${controlMetrics.paddingX}px 0 ${leadingContentGap}px`,
+                    ...controlTextNudgeStyle
+                  },
                   children: fileSelectionText
                 }
               ) : null
@@ -1781,7 +1812,9 @@ function Input({
             onChange: handleValidatedInputChange,
             className: cx(adornedInputClassName, className),
             "aria-invalid": hasResolvedError,
-            style: { padding: `0 ${controlMetrics.paddingX}px 0 ${leadingContentGap}px` }
+            style: {
+              padding: getTextInputPadding(size, { leadingPadding: leadingContentGap })
+            }
           }
         )
       ]
@@ -1820,7 +1853,9 @@ function Input({
             onChange: handleValidatedInputChange,
             className: cx(adornedInputClassName, className),
             "aria-invalid": hasResolvedError,
-            style: { padding: `0 ${controlMetrics.paddingX}px 0 ${leadingContentGap}px` }
+            style: {
+              padding: getTextInputPadding(size, { leadingPadding: leadingContentGap })
+            }
           }
         )
       ]
@@ -1835,8 +1870,12 @@ function Input({
       disabled,
       onChange: handleValidatedInputChange,
       "aria-invalid": hasResolvedError,
-      className: cx(fieldBaseClassName, FIELD_PADDING_X_CLASSNAMES[controlSize], className),
-      style: { boxShadow: "0px 4px 5px var(--theme-shadow)", ...style }
+      className: cx(fieldBaseClassName, FIELD_PADDING_X_CLASSNAMES[size], className),
+      style: {
+        boxShadow: "0px 4px 5px var(--theme-shadow)",
+        padding: getTextInputPadding(size),
+        ...style
+      }
     }
   );
   return /* @__PURE__ */ jsx6(
@@ -2081,7 +2120,7 @@ function DatePicker({
   label,
   hint,
   error,
-  controlSize = "sm",
+  size = "sm",
   value,
   defaultValue,
   onChange,
@@ -2115,8 +2154,8 @@ function DatePicker({
 }) {
   var _a;
   useUiKitTheme();
-  const controlMetrics = getControlMetrics(controlSize);
-  const accessoryMetrics = ACCESSORY_METRICS_BY_SIZE[controlSize];
+  const controlMetrics = getControlMetrics(size);
+  const accessoryMetrics = ACCESSORY_METRICS_BY_SIZE[size];
   const generatedIdRef = useRef3();
   const visibleInputRef = useRef3(null);
   const nativeInputRef = useRef3(null);
@@ -2174,8 +2213,8 @@ function DatePicker({
   const canOpenPicker = !disabled && !readOnly && !hasConfigurationConflict;
   const canClear = clearable && !disabled && !readOnly && !required && hasAnyValue;
   const leadingContentGap = Math.max(0, Math.round(controlMetrics.paddingX / 3));
-  const leadingIconInset = getControlLeadingIconInset(controlSize);
-  const pickerAdornmentWidth = getControlLeadingAdornmentWidth(controlSize, accessoryMetrics.iconSize);
+  const leadingIconInset = getControlLeadingIconInset(size);
+  const pickerAdornmentWidth = getControlLeadingAdornmentWidth(size, accessoryMetrics.iconSize);
   const trailingButtonCount = Number(canClear);
   const trailingInset = trailingButtonCount > 0 ? Math.max(
     0,
@@ -2187,8 +2226,8 @@ function DatePicker({
     "w-full box-border rounded-2xl border border-solid bg-[var(--theme-surface)]",
     "text-[var(--theme-text)] outline-none transition-[border-color,box-shadow,background-color]",
     "duration-150 placeholder:text-[var(--theme-textLight)]",
-    FIELD_HEIGHT_CLASSNAMES2[controlSize],
-    FIELD_TEXT_CLASSNAMES2[controlSize],
+    FIELD_HEIGHT_CLASSNAMES2[size],
+    FIELD_TEXT_CLASSNAMES2[size],
     resolvedError ? "border-[var(--theme-negative)]" : "border-[var(--theme-textLight)]",
     disabled ? "cursor-not-allowed" : readOnly ? "cursor-default" : "cursor-text"
   );
@@ -2196,15 +2235,15 @@ function DatePicker({
     "box-border flex w-full items-center gap-0 overflow-hidden rounded-2xl",
     "bg-[var(--theme-surface)] text-[var(--theme-text)]",
     "transition-[border-color,box-shadow,background-color] duration-150",
-    FIELD_HEIGHT_CLASSNAMES2[controlSize],
-    FIELD_TEXT_CLASSNAMES2[controlSize],
+    FIELD_HEIGHT_CLASSNAMES2[size],
+    FIELD_TEXT_CLASSNAMES2[size],
     disabled ? "cursor-not-allowed" : readOnly ? "cursor-default" : "cursor-text"
   );
   const integratedFieldBoxShadow = getInsetBorderShadow(fieldBorderColor, resolvedError ? { outerShadow: "0 0 0 3px var(--theme-negative)", componentShadow: "0px 4px 5px var(--theme-shadow)" } : { componentShadow: "0px 4px 5px var(--theme-shadow)" });
   const integratedInputClassName = cx(
     "h-full w-full box-border border-0 bg-transparent text-[var(--theme-text)]",
     "outline-none placeholder:text-[var(--theme-textLight)]",
-    FIELD_TEXT_CLASSNAMES2[controlSize],
+    FIELD_TEXT_CLASSNAMES2[size],
     disabled ? "cursor-not-allowed" : readOnly ? "cursor-default" : "cursor-text"
   );
   const pickerAdornmentClassName = cx(
@@ -2449,7 +2488,10 @@ function DatePicker({
               ...visibleInputProps,
               className: cx(integratedInputClassName, className),
               style: {
-                padding: `${controlMetrics.paddingY}px ${controlMetrics.paddingX + trailingInset}px ${controlMetrics.paddingY}px ${leadingContentGap}px`
+                padding: getTextInputPadding(size, {
+                  leadingPadding: leadingContentGap,
+                  trailingPadding: controlMetrics.paddingX + trailingInset
+                })
               }
             }
           ),
@@ -2463,9 +2505,11 @@ function DatePicker({
       "input",
       {
         ...visibleInputProps,
-        className: cx(fieldBaseClassName, FIELD_PADDING_X_CLASSNAMES2[controlSize], className),
+        className: cx(fieldBaseClassName, FIELD_PADDING_X_CLASSNAMES2[size], className),
         style: {
-          paddingRight: controlMetrics.paddingX + trailingInset,
+          padding: getTextInputPadding(size, {
+            trailingPadding: controlMetrics.paddingX + trailingInset
+          }),
           boxShadow: resolvedError ? "0 0 0 3px var(--theme-negative), 0px 4px 5px var(--theme-shadow)" : "0px 4px 5px var(--theme-shadow)",
           ...style,
           ...disabledFieldStyle
@@ -2600,7 +2644,7 @@ function SelectBase({
   hint,
   error,
   placeholder,
-  controlSize = "sm",
+  size = "sm",
   id,
   disabled,
   style,
@@ -2673,8 +2717,8 @@ function SelectBase({
   const visibleEnabledValues = visibleEnabledOptions.map((option) => option.value);
   const selectedValuesKey = selectedValues.join("\0");
   const visibleEnabledValuesKey = visibleEnabledValues.join("\0");
-  const indicatorOffset = getSelectIndicatorOffset(controlSize);
-  const controlMetrics = getControlMetrics(controlSize);
+  const indicatorOffset = getSelectIndicatorOffset(size);
+  const controlTextNudgeStyle = getSelectTextNudgeStyle();
   const listboxId = `${resolvedId}-listbox`;
   const searchInputId = `${resolvedId}-search`;
   const scrollbarThumbColor = theme.colors.secondary;
@@ -2693,8 +2737,8 @@ function SelectBase({
     "m-0 box-border flex w-full min-w-0 items-center justify-between gap-3 rounded-2xl border-0 appearance-none",
     "bg-[var(--theme-surface)] outline-none transition-[border-color,box-shadow,background-color]",
     "duration-150 text-left",
-    FIELD_HEIGHT_CLASSNAMES3[controlSize],
-    FIELD_TEXT_CLASSNAMES3[controlSize],
+    FIELD_HEIGHT_CLASSNAMES3[size],
+    FIELD_TEXT_CLASSNAMES3[size],
     hasSelection ? "text-[var(--theme-text)]" : "text-[var(--theme-textLight)]",
     isTriggerDisabled ? "cursor-not-allowed" : "cursor-pointer"
   );
@@ -3084,7 +3128,7 @@ function SelectBase({
             onBlur: handleTriggerBlur,
             onKeyDown: handleTriggerKeyDown,
             style: {
-              padding: `${controlMetrics.paddingY}px ${controlMetrics.selectPaddingRight}px ${controlMetrics.paddingY}px ${controlMetrics.paddingX}px`,
+              padding: getSelectControlPadding(size),
               boxShadow: triggerBoxShadow,
               ...style,
               ...isTriggerDisabled ? { opacity: DISABLED_FIELD_OPACITY } : {}
@@ -3094,6 +3138,7 @@ function SelectBase({
                 "span",
                 {
                   className: "block min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap",
+                  style: controlTextNudgeStyle,
                   children: displayContent
                 }
               ),
@@ -3290,7 +3335,7 @@ function SelectBase({
                                 className: cx(
                                   "flex w-full min-w-0 items-center justify-between gap-3 rounded-xl box-border",
                                   "transition-[background-color,color] duration-150",
-                                  OPTION_PADDING_CLASSNAMES[controlSize],
+                                  OPTION_PADDING_CLASSNAMES[size],
                                   option.disabled ? "cursor-not-allowed text-[var(--theme-secondary)]" : "cursor-pointer",
                                   !option.disabled && isActive ? "text-[var(--theme-onPrimary)]" : null,
                                   !option.disabled && !isActive ? "text-[var(--theme-text)]" : null,
@@ -5229,7 +5274,7 @@ function Textarea({
   label,
   hint,
   error,
-  controlSize = "sm",
+  size = "sm",
   id,
   disabled,
   style,
@@ -5250,7 +5295,7 @@ function Textarea({
         "duration-150 placeholder:opacity-100 disabled:cursor-not-allowed",
         "placeholder:text-[var(--theme-textLight)]",
         error ? "border-[var(--theme-negative)]" : "border-[var(--theme-textLight)]",
-        TEXTAREA_SIZE_CLASSNAMES[controlSize]
+        TEXTAREA_SIZE_CLASSNAMES[size]
       ),
       style: {
         boxShadow: error ? "0 0 0 3px var(--theme-negative), 0px 4px 5px var(--theme-shadow)" : "0px 4px 5px var(--theme-shadow)",