@multiplatform.one/forms 6.6.0 → 7.0.0

package/dist/esm/InputParts/index.native.js

@@ -1,15 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { getFontSized } from "@tamagui/get-font-sized";
-import { getSpace } from "@tamagui/get-token";
 import { useEffect, useState } from "react";
 import { Pressable as RNPressable } from "react-native";
-import { Button as TButton, Input as TInput, Label, Text, View, XGroup, createStyledContext, getFontSize, getVariable, isWeb, styled, useGetThemedIcon, useTheme } from "tamagui";
-import { ensureFocusVisibleRing, useResolvedKnobs, warnOutlineNone, warnPositiveTabIndex } from "@multiplatform.one/theme";
+import { Button as TButton, Input as TInput, Label, Text, View, XGroup, createStyledContext, getVariable, isWeb, styled, useGetThemedIcon, useTheme } from "tamagui";
+import { ensureCompositeFocusRing, ensureFocusVisibleRing, isTouchSurface, recipeFamilies, sizeRecipeBoxVariants, sizeRecipeForToken, sizeRecipeIconVariants, sizeRecipeTypeVariants, useResolvedKnobs, warnOutlineNone, warnPositiveTabIndex, warnSizeRecipeEscape } from "@multiplatform.one/theme";
 import { formButtonColors, formCommonColors, formInputColors } from "../shared/colorRamps.native.js";
 import { useControlGrouped } from "../shared/groupContext.native.js";
 import { useIsInTableCell } from "../shared/tableCellContext.native.js";
 import { useFieldA11y, useFieldDescribedBy } from "../fieldLayout.native.js";
 import { ThemedTextArea } from "../themedPrimitives.native.js";
+var _recipeFamilies_control_boxVariants;
+var _recipeFamilies_control_typeVariants;
+var _recipeFamilies_control_iconVariants;
 function useNativeFieldA11yProps() {
   var fieldA11y = useFieldA11y();
   if (isWeb || !fieldA11y) return void 0;
@@ -24,10 +26,63 @@ function useNativeFieldA11yProps() {
 }
 var defaultContextValues = {
   size: "$true",
-  scaleIcon: 1.2,
+  scaleIcon: 1,
   color: void 0
 };
 var InputContext = createStyledContext(defaultContextValues);
+function endCapVariantsFromHeights(heightVariants) {
+  return Object.fromEntries(Object.entries(heightVariants).map(function (param) {
+    var [token, {
+      height
+    }] = param;
+    return [token, {
+      height,
+      width: height,
+      paddingHorizontal: 0
+    }];
+  }));
+}
+var sizeRecipeEndCapVariants = endCapVariantsFromHeights(recipeFamilies.control.heightVariants);
+function sizeRecipeBoxFallback(val) {
+  var recipe = sizeRecipeForToken(String(val !== null && val !== void 0 ? val : "$true"), {
+    touch: isTouchSurface()
+  });
+  return {
+    height: recipe.height,
+    paddingHorizontal: recipe.paddingHorizontal,
+    gap: recipe.gap
+  };
+}
+function sizeRecipeTypeFallback(val) {
+  return {
+    fontSize: sizeRecipeForToken(String(val !== null && val !== void 0 ? val : "$true"), {
+      touch: isTouchSurface()
+    }).fontSize
+  };
+}
+function sizeRecipeIconFallback(val) {
+  var {
+    iconSize
+  } = sizeRecipeForToken(String(val !== null && val !== void 0 ? val : "$true"), {
+    touch: isTouchSurface()
+  });
+  return {
+    width: iconSize,
+    height: iconSize
+  };
+}
+function sizeRecipeEndCapFallback(val) {
+  var {
+    height
+  } = sizeRecipeForToken(String(val !== null && val !== void 0 ? val : "$true"), {
+    touch: isTouchSurface()
+  });
+  return {
+    height,
+    width: height,
+    paddingHorizontal: 0
+  };
+}
 var FocusContext = createStyledContext({
   setFocused: function setFocused(_val) {},
   focused: false
@@ -81,8 +136,80 @@ var inputOutlineRest = {
 var inputOutlineFocus = {
   outlineColor: "$outlineColor",
   outlineWidth: 2,
-  outlineStyle: "solid"
+  outlineStyle: "solid",
+  // Inset: Input.Box clips children with overflow:hidden; an outer +2px
+  // ring is severed (LC-71 clipping carve-out).
+  outlineOffset: -2
 };
+var AREA_NO_OUTLINE = {
+  outlineWidth: 0,
+  outlineStyle: "none",
+  outlineColor: "transparent"
+};
+function boxRingMode(overflow, paintsRing) {
+  if (!paintsRing) return void 0;
+  return overflow === "hidden" ? "inset" : "outset";
+}
+function boxRingOffset(mode) {
+  return mode === "outset" ? 2 : -2;
+}
+var inputPartsRingCss = `/* LC-71: ring on Box (adornments inside); Area never outlines.
+   Inset iff the Box clips (overflow:hidden). Do not :has(:focus-visible) on
+   every descendant \u2014 SearchInput clear \u2715 is a second focusable. */
+[data-mp-input-box][data-mp-ring="inset"]:has(input:focus),
+[data-mp-input-box][data-mp-ring="inset"]:has(textarea:focus),
+[data-mp-input-box][data-mp-ring="inset"]:has([data-mp-input-area]:focus),
+[data-mp-input-box][data-mp-ring="inset"]:focus-visible {
+  outline: 2px solid var(--outlineColor, var(--c-outlineColor, CanvasText)) !important;
+  outline-offset: -2px !important;
+}
+[data-mp-input-box][data-mp-ring="outset"]:has(input:focus),
+[data-mp-input-box][data-mp-ring="outset"]:has(textarea:focus),
+[data-mp-input-box][data-mp-ring="outset"]:has([data-mp-input-area]:focus),
+[data-mp-input-box][data-mp-ring="outset"]:focus-visible {
+  outline: 2px solid var(--outlineColor, var(--c-outlineColor, CanvasText)) !important;
+  outline-offset: 2px !important;
+}
+[data-mp-input-area],
+[data-mp-input-area]:focus,
+[data-mp-input-area]:focus-visible,
+[data-mp-input-box] input,
+[data-mp-input-box] textarea,
+[data-mp-input-box] [contenteditable] {
+  outline: none !important;
+  box-shadow: none !important;
+}`;
+var INPUT_PARTS_RING_STYLE_ID = "mp-input-parts-ring-anatomy";
+function ensureInputPartsFocusRing() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(INPUT_PARTS_RING_STYLE_ID)) return;
+  var tag = document.createElement("style");
+  tag.id = INPUT_PARTS_RING_STYLE_ID;
+  tag.textContent = inputPartsRingCss;
+  document.head.appendChild(tag);
+}
+function webBoxRingAttrs(overflow, paintsRing, extraClass) {
+  if (!isWeb) return void 0;
+  var mode = boxRingMode(overflow, paintsRing);
+  var className = [paintsRing ? "mp-composite-ring" : void 0, extraClass].filter(Boolean).join(" ");
+  return {
+    ...(className ? {
+      className
+    } : void 0),
+    "data-mp-input-box": "true",
+    ...(mode ? {
+      "data-mp-ring": mode
+    } : void 0)
+  };
+}
+function webAreaAttrs(extraClass) {
+  if (!isWeb) return void 0;
+  var className = ["mp-input-area", extraClass].filter(Boolean).join(" ");
+  return {
+    className,
+    "data-mp-input-area": "true"
+  };
+}
 var defaultInputGroupStyles = {
   size: "$true",
   fontFamily: "$body",
@@ -100,9 +227,11 @@ var defaultInputGroupStyles = {
   hoverStyle: {
     borderColor: formInputColors.border.hover
   },
+  // LC-71: any-focus only shifts the border. The ring lives on
+  // `focusVisibleStyle` and on `[data-mp-ring]:has(input:focus)` so
+  // button-like Boxes (Select, pagination) do not ring on mouse click.
   focusStyle: {
-    borderColor: formInputColors.border.focus,
-    ...inputOutlineFocus
+    borderColor: formInputColors.border.focus
   },
   focusVisibleStyle: {
     borderColor: formInputColors.border.focus,
@@ -114,6 +243,11 @@ var InputGroupFrame = styled(XGroup, {
   alignItems: "center",
   context: InputContext,
   overflow: "hidden",
+  // LC-71: className on XGroup is best-effort (often dropped). The styleable
+  // spread stamps data-mp-input-box / data-mp-ring; CSS keys off those.
+  ...(isWeb ? {
+    className: "mp-composite-ring"
+  } : {}),
   variants: {
     unstyled: {
       false: defaultInputGroupStyles
@@ -122,15 +256,8 @@ var InputGroupFrame = styled(XGroup, {
       ":number": {}
     },
     size: {
-      "...size": function (val, param) {
-        var {
-          tokens
-        } = param;
-        return {
-          height: val,
-          borderRadius: tokens.radius[val]
-        };
-      }
+      ...((_recipeFamilies_control_boxVariants = recipeFamilies.control.boxVariants) !== null && _recipeFamilies_control_boxVariants !== void 0 ? _recipeFamilies_control_boxVariants : sizeRecipeBoxVariants),
+      "...size": sizeRecipeBoxFallback
     }
   },
   defaultVariants: {
@@ -203,11 +330,34 @@ function wrapNativePressable(onPress, disabled, node) {
     })
   });
 }
-var InputGroupImpl = InputGroupFrame.styleable(function (groupProps, forwardedRef) {
+var InputGroupImpl = InputGroupFrame.styleable(
+/**
+* OVERLAY_ANCHOR_GAP rule (theme/layoutTokens) — one surface owner per
+* overlay: while a floating panel intentionally covers this box (Select's
+* macOS-style listbox), the box must not paint its focus ring. The ring
+* sits outside the border box (outline + offset), so a covering panel can
+* never hide it — it ghosts around the panel's corners as a doubled edge.
+*/
+/**
+* Size-recipe family. Input stays on `"control"` (same as Button default).
+* No per-input tweaks.
+*/
+/**
+* Opt-in to an explicit numeric `height` / `paddingHorizontal`. Required
+* when those props are numbers; without it DEV-warns `size-recipe-escape`
+* and the size recipe still wins.
+*/
+function (groupProps, forwardedRef) {
+  var _props_size;
   var {
     children,
     onPress,
     disabled,
+    suppressFocusRing,
+    recipeFamily = "control",
+    sizeRecipeEscape,
+    height: heightProp,
+    paddingHorizontal: paddingHorizontalProp,
     ...props
   } = groupProps;
   var [focused, setFocused2] = useState(false);
@@ -224,6 +374,14 @@ var InputGroupImpl = InputGroupFrame.styleable(function (groupProps, forwardedRe
   } : {
     disabled
   };
+  var paintsRing = !grouped && !inTableCell;
+  var boxOverflow = paintsRing ? "hidden" : "visible";
+  var ringMode = boxRingMode(boxOverflow, paintsRing);
+  if (isWeb) {
+    ensureCompositeFocusRing();
+    ensureInputPartsFocusRing();
+  }
+  var boxRingAttrs = webBoxRingAttrs(boxOverflow, paintsRing, props.className);
   warnPositiveTabIndex({
     value: props.tabIndex,
     component: "Input.Box"
@@ -231,6 +389,40 @@ var InputGroupImpl = InputGroupFrame.styleable(function (groupProps, forwardedRe
   warnOutlineNone(props.focusVisibleStyle, {
     component: "Input.Box"
   });
+  warnSizeRecipeEscape({
+    height: heightProp,
+    paddingHorizontal: paddingHorizontalProp,
+    sizeRecipeEscape,
+    component: "Input.Box",
+    id: typeof props.id === "string" ? props.id : void 0
+  });
+  var sizeToken = String((_props_size = props.size) !== null && _props_size !== void 0 ? _props_size : knobProps.sizeToken);
+  var familyRecipe = sizeRecipeForToken(sizeToken, {
+    touch: isTouchSurface(),
+    family: recipeFamily
+  });
+  var controlFragment = recipeFamily === "control" ? knobProps.control : {
+    height: familyRecipe.height,
+    paddingHorizontal: familyRecipe.paddingHorizontal,
+    gap: familyRecipe.gap
+  };
+  var sizeRecipeEscaped = typeof sizeRecipeEscape === "string" && sizeRecipeEscape.trim().length > 0;
+  var sizeRecipeEscapeOverride = sizeRecipeEscaped ? {
+    ...(typeof heightProp === "number" ? {
+      height: heightProp
+    } : void 0),
+    ...(typeof paddingHorizontalProp === "number" ? {
+      paddingHorizontal: paddingHorizontalProp
+    } : void 0)
+  } : void 0;
+  var passthroughSizeProps = {
+    ...(typeof heightProp !== "number" && heightProp != null ? {
+      height: heightProp
+    } : void 0),
+    ...(typeof paddingHorizontalProp !== "number" && paddingHorizontalProp != null ? {
+      paddingHorizontal: paddingHorizontalProp
+    } : void 0)
+  };
   if (inTableCell) {
     return /* @__PURE__ */_jsx(FocusContext.Provider, {
       focused,
@@ -255,8 +447,11 @@ var InputGroupImpl = InputGroupFrame.styleable(function (groupProps, forwardedRe
         minWidth: 0,
         elevation: void 0,
         ...props,
+        ...passthroughSizeProps,
+        ...sizeRecipeEscapeOverride,
         ...framePressProps,
-        overflow: "visible",
+        ...boxRingAttrs,
+        overflow: boxOverflow,
         children
       }))
     });
@@ -270,11 +465,24 @@ var InputGroupImpl = InputGroupFrame.styleable(function (groupProps, forwardedRe
       flex: 1,
       elevation: void 0,
       ...props,
+      ...passthroughSizeProps,
+      ...sizeRecipeEscapeOverride,
       ...framePressProps,
-      overflow: "visible",
+      ...boxRingAttrs,
+      overflow: boxOverflow,
       children
     }));
   }
+  var suppressedRingProps = suppressFocusRing ? {
+    focusStyle: {
+      borderColor: formInputColors.border.focus,
+      ...inputOutlineRest
+    },
+    focusVisibleStyle: {
+      borderColor: formInputColors.border.focus,
+      ...inputOutlineRest
+    }
+  } : void 0;
   return /* @__PURE__ */_jsx(FocusContext.Provider, {
     focused,
     setFocused: setFocused2,
@@ -282,6 +490,7 @@ var InputGroupImpl = InputGroupFrame.styleable(function (groupProps, forwardedRe
       ref: forwardedRef,
       ...knobProps.body,
       size: knobProps.sizeToken,
+      ...controlFragment,
       backgroundColor: knobProps.outlined ? "transparent" : formInputColors.background.base,
       ...getBoxElevationProps(knobProps.elevation),
       ...knobProps.borderRadius,
@@ -295,24 +504,31 @@ var InputGroupImpl = InputGroupFrame.styleable(function (groupProps, forwardedRe
       },
       focusStyle: {
         borderColor: formInputColors.border.focus,
-        ...inputOutlineFocus,
         ...control.focusKnobProps
       },
       focusVisibleStyle: ensureFocusVisibleRing({
         borderColor: formInputColors.border.focus,
         ...inputOutlineFocus,
-        ...control.focusVisibleKnobProps
+        ...control.focusVisibleKnobProps,
+        outlineOffset: boxRingOffset(ringMode)
       }),
       ...props,
+      ...passthroughSizeProps,
+      ...sizeRecipeEscapeOverride,
       ...framePressProps,
-      ...(focused ? {
-        // Focus is forwarded from the inner input, so the ring is applied
-        // as inline props rather than focusStyle.
+      ...boxRingAttrs,
+      ...(focused && !suppressFocusRing ? {
+        // Text-entry carve-out (LC-71): inner Area focus means typing
+        // is next, so the Box rings on any focus — including click.
+        // CSS `[data-mp-ring]` is the sync path; this is the token-
+        // resolved backup (and the native path). Button-like Boxes
+        // (Select) do not set `focused` (no Area onFocus).
         borderColor: formInputColors.border.focus,
         ...ensureFocusVisibleRing({
           ...inputOutlineFocus,
           ...control.focusKnobProps,
-          ...control.focusVisibleKnobProps
+          ...control.focusVisibleKnobProps,
+          outlineOffset: boxRingOffset(ringMode)
         })
       } : {
         // Explicit rest — avoid leaving theme `$outlineColor` (near-white in
@@ -320,6 +536,7 @@ var InputGroupImpl = InputGroupFrame.styleable(function (groupProps, forwardedRe
         // Keep outline-transparent rest (border-flicker fix); do not warn.
         ...inputOutlineRest
       }),
+      ...suppressedRingProps,
       // LC-40 DISABLED-VISIBLE: the input frame is text-bearing chrome —
       // keepLabel washes fill/border (value text keeps >= AA) and
       // dimWhole leaves the dim to the FieldLayout assembly. Read-only
@@ -330,38 +547,47 @@ var InputGroupImpl = InputGroupFrame.styleable(function (groupProps, forwardedRe
           ...disabledState.surfaceKnobProps
         }
       } : void 0),
-      overflow: "hidden",
+      overflow: boxOverflow,
       children
     }))
   });
 });
 var inputSizeVariant = function inputSizeVariant2() {
-  var val = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "$true",
-    extras = arguments.length > 1 ? arguments[1] : void 0;
-  var size = val || "$true";
-  var paddingHorizontal = getSpace(size, {
-    shift: -1,
-    bounds: [2]
+  var val = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "$true";
+  var recipe = sizeRecipeForToken(String(val || "$true"), {
+    touch: isTouchSurface()
   });
-  var fontStyle = getFontSized(size, extras);
-  var {
-    lineHeight: _lh,
-    ...safeFontStyle
-  } = !isWeb && fontStyle ? fontStyle : {
-    lineHeight: void 0,
-    ...fontStyle
-  };
   return {
-    ...safeFontStyle,
-    paddingHorizontal
+    fontSize: recipe.fontSize,
+    paddingHorizontal: recipe.paddingHorizontal
   };
 };
 var InputFrame = styled(TInput, {
   unstyled: true,
   context: InputContext,
+  // LC-71: the Area never paints a ring. Chrome's UA :focus-visible outline
+  // on <input> is the "ring cuts the control in half" defect (magnifier sits
+  // outside). Kill it at rest and on focus; the Box owns the ring.
+  outlineWidth: 0,
+  outlineStyle: "none",
+  outlineColor: "transparent",
+  ...(isWeb ? {
+    className: "mp-input-area"
+  } : {}),
+  focusStyle: {
+    outlineWidth: 0,
+    outlineStyle: "none",
+    outlineColor: "transparent"
+  },
+  focusVisibleStyle: {
+    outlineWidth: 0,
+    outlineStyle: "none",
+    outlineColor: "transparent"
+  },
   variants: {
     size: {
-      "...size": inputSizeVariant
+      ...((_recipeFamilies_control_typeVariants = recipeFamilies.control.typeVariants) !== null && _recipeFamilies_control_typeVariants !== void 0 ? _recipeFamilies_control_typeVariants : sizeRecipeTypeVariants),
+      "...size": sizeRecipeTypeFallback
     },
     scaleIcon: {
       ":number": {}
@@ -385,6 +611,9 @@ var InputAreaImpl = InputFrame.styleable(function (areaProps, ref) {
     onChange: onChangeProp,
     onFocus: onFocusProp,
     onBlur: onBlurProp,
+    focusStyle: focusStyleProp,
+    focusVisibleStyle: focusVisibleStyleProp,
+    className: classNameProp,
     ...props
   } = areaProps;
   var {
@@ -394,6 +623,7 @@ var InputAreaImpl = InputFrame.styleable(function (areaProps, ref) {
   var fieldDescribedBy = useFieldDescribedBy();
   var nativeA11yProps = useNativeFieldA11yProps();
   var inTableCell = useIsInTableCell();
+  if (isWeb) ensureInputPartsFocusRing();
   return (
     // LC-06/LC-10 (UX-P12): in a table cell the flex wrapper and the raw
     // input must be allowed to shrink below the <input>'s intrinsic width
@@ -411,6 +641,7 @@ var InputAreaImpl = InputFrame.styleable(function (areaProps, ref) {
         ...nativeA11yProps,
         ref,
         size,
+        ...knobProps.controlType,
         color: knobProps.textAccentColor,
         placeholderTextColor: (_ref = (_theme_placeholderColor = theme.placeholderColor) === null || _theme_placeholderColor === void 0 ? void 0 : _theme_placeholderColor.val) !== null && _ref !== void 0 ? _ref : "$placeholderColor",
         ...(inTableCell ? {
@@ -422,6 +653,16 @@ var InputAreaImpl = InputFrame.styleable(function (areaProps, ref) {
         inputMode: keyboardType === "numeric" ? "numeric" : keyboardType === "email-address" ? "email" : void 0,
         autoComplete: textContentType === "emailAddress" ? "email" : textContentType === "password" ? "current-password" : void 0,
         ...props,
+        ...webAreaAttrs(classNameProp),
+        ...AREA_NO_OUTLINE,
+        focusStyle: {
+          ...focusStyleProp,
+          ...AREA_NO_OUTLINE
+        },
+        focusVisibleStyle: {
+          ...focusVisibleStyleProp,
+          ...AREA_NO_OUTLINE
+        },
         onFocus: function onFocus(e) {
           setFocused2(true);
           onFocusProp === null || onFocusProp === void 0 ? void 0 : onFocusProp(e);
@@ -469,14 +710,8 @@ var InputButton = styled(TButton, {
       ":number": {}
     },
     size: {
-      "...size": function () {
-        var val = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "$true";
-        return {
-          paddingHorizontal: 0,
-          height: val,
-          width: val
-        };
-      }
+      ...sizeRecipeEndCapVariants,
+      "...size": sizeRecipeEndCapFallback
     }
   }
 });
@@ -484,9 +719,17 @@ var InputButtonImpl = InputButton.styleable(function (props, ref) {
   var {
     size
   } = InputContext.useStyledContext();
+  var {
+    knobProps
+  } = useResolvedKnobs();
+  var square = knobProps.control.height;
   return /* @__PURE__ */_jsx(InputButton, {
     ref,
     size,
+    height: square,
+    width: square,
+    paddingHorizontal: 0,
+    // size-recipe-escape: square end-cap; pad lives on Input.Box
     tabIndex: -1,
     ...props
   });
@@ -501,10 +744,8 @@ var InputIconFrame = styled(View, {
       ":number": {}
     },
     size: {
-      // Don't apply padding here - let adornment variant handle it for proper leading/trailing spacing
-      "...size": function () {
-        return {};
-      }
+      ...((_recipeFamilies_control_iconVariants = recipeFamilies.control.iconVariants) !== null && _recipeFamilies_control_iconVariants !== void 0 ? _recipeFamilies_control_iconVariants : sizeRecipeIconVariants),
+      "...size": sizeRecipeIconFallback
     },
     adornment: {
       leading: {},
@@ -512,9 +753,6 @@ var InputIconFrame = styled(View, {
     }
   }
 });
-var getIconSize = function getIconSize2(size, scale) {
-  return (typeof size === "number" ? size * 0.5 : getFontSize(size)) * scale;
-};
 var InputIcon = InputIconFrame.styleable(function (iconProps, ref) {
   var _ref;
   var _theme_rawColor, _theme_borderColor;
@@ -522,7 +760,6 @@ var InputIcon = InputIconFrame.styleable(function (iconProps, ref) {
     children,
     color: colorProp,
     scaleIcon: scaleIconProp,
-    adornment,
     ...props
   } = iconProps;
   var {
@@ -530,31 +767,24 @@ var InputIcon = InputIconFrame.styleable(function (iconProps, ref) {
     color: contextColor,
     scaleIcon = 1
   } = InputContext.useStyledContext();
+  var {
+    knobProps
+  } = useResolvedKnobs();
   var resolvedScaleIcon = scaleIconProp !== null && scaleIconProp !== void 0 ? scaleIconProp : scaleIcon;
   var theme = useTheme();
   var rawColor = colorProp !== null && colorProp !== void 0 ? colorProp : contextColor;
   var color = getVariable(rawColor ? (_ref = (_theme_rawColor = theme[rawColor]) === null || _theme_rawColor === void 0 ? void 0 : _theme_rawColor.get("web")) !== null && _ref !== void 0 ? _ref : rawColor : (_theme_borderColor = theme.borderColor) === null || _theme_borderColor === void 0 ? void 0 : _theme_borderColor.get("web"));
-  var iconSize = getIconSize(size, resolvedScaleIcon);
-  var padding = getSpace(size, {
-    shift: 0,
-    bounds: [2]
-  });
-  var paddingProps = adornment === "leading" ? {
-    paddingInlineStart: padding,
-    paddingInlineEnd: 0
-  } : adornment === "trailing" ? {
-    paddingInlineEnd: padding,
-    paddingInlineStart: 0
-  } : {
-    paddingHorizontal: padding
-  };
+  var iconSize = knobProps.controlIcon.width * resolvedScaleIcon;
   var getThemedIcon = useGetThemedIcon({
     size: iconSize,
     color
   });
   return /* @__PURE__ */_jsx(InputIconFrame, {
     ref,
-    ...paddingProps,
+    size,
+    ...knobProps.controlIcon,
+    width: iconSize,
+    height: iconSize,
     ...props,
     children: getThemedIcon(children)
   });
@@ -701,15 +931,8 @@ var InputXGroup = styled(XGroup, {
       ":number": {}
     },
     size: {
-      "...size": function (val, param) {
-        var {
-          tokens
-        } = param;
-        var _tokens_radius_val;
-        var radiusToken = (_tokens_radius_val = tokens.radius[val]) !== null && _tokens_radius_val !== void 0 ? _tokens_radius_val : tokens.radius.$true;
-        return {
-          borderRadius: radiusToken
-        };
+      "...size": function () {
+        return {};
       }
     }
   }
@@ -722,17 +945,39 @@ function FocusWiredTextArea(props) {
     innerRef,
     onFocus,
     onBlur,
+    className,
+    focusStyle,
+    focusVisibleStyle,
+    "aria-describedby": describedByProp,
     ...rest
   } = props;
   var fieldDescribedBy = useFieldDescribedBy();
   var nativeA11yProps = useNativeFieldA11yProps();
+  var describedBy = [fieldDescribedBy, describedByProp].filter(Boolean).join(" ") || void 0;
+  if (isWeb) ensureInputPartsFocusRing();
+  var killInnerRing = {
+    ...webAreaAttrs(className),
+    ...AREA_NO_OUTLINE,
+    focusStyle: {
+      ...focusStyle,
+      ...AREA_NO_OUTLINE
+    },
+    focusVisibleStyle: {
+      ...focusVisibleStyle,
+      ...AREA_NO_OUTLINE
+    }
+  };
   return /* @__PURE__ */_jsx(View, {
     flex: 1,
+    minWidth: 0,
     children: /* @__PURE__ */_jsx(ThemedTextArea, {
-      "aria-describedby": fieldDescribedBy,
+      "aria-describedby": describedBy,
+      "aria-multiline": "true",
       ...nativeA11yProps,
       ref: innerRef,
       width: "100%",
+      ...rest,
+      ...killInnerRing,
       onFocus: function onFocus1(e) {
         setFocused2(true);
         onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
@@ -740,8 +985,7 @@ function FocusWiredTextArea(props) {
       onBlur: function onBlur1(e) {
         setFocused2(false);
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
-      },
-      ...rest
+      }
     })
   });
 }
@@ -760,5 +1004,5 @@ var InputCompound = Object.assign(InputContainerImpl, {
   })
 });
 var Input = InputCompound;
-export { FocusContext, FocusWiredTextArea, Input, InputContainerFrame, InputContext, InputFieldMeta, InputIconFrame, InputInfo, InputLabel, defaultInputGroupStyles, getInputFrameTransitionProps, inputSizeVariant, useForwardFocus };
+export { FocusContext, FocusWiredTextArea, Input, InputContainerFrame, InputContext, InputFieldMeta, InputIconFrame, InputInfo, InputLabel, boxRingMode, boxRingOffset, defaultInputGroupStyles, ensureInputPartsFocusRing, getInputFrameTransitionProps, inputPartsRingCss, inputSizeVariant, useForwardFocus };
 //# sourceMappingURL=index.native.js.map