@multiplatform.one/forms 7.4.1 → 7.6.0

package/dist/esm/FormGrid.native.js

@@ -19,13 +19,17 @@ function FormGrid(param) {
   } = useResolvedKnobs(compact === void 0 ? void 0 : {
     compact
   });
-  var resolvedGap = gap !== null && gap !== void 0 ? gap : knobProps.gap.gap;
+  var gapFragment = gap === void 0 ? knobProps.gap : {
+    gap
+  };
+  var resolvedGap = gapFragment.gap;
   var wideColumns = resolveWideColumns(columns, maxColumns);
   if (isWeb) {
     return /* @__PURE__ */_jsx(FormGridWeb, {
       columns: wideColumns,
       maxColumns,
       gap: resolvedGap,
+      gapFragment,
       density: knobProps.density,
       size: knobProps.size,
       children
@@ -35,6 +39,7 @@ function FormGrid(param) {
     columns: wideColumns,
     maxColumns,
     gap: resolvedGap,
+    gapFragment,
     density: knobProps.density,
     size: knobProps.size,
     children
@@ -45,6 +50,7 @@ function FormGridWeb(param) {
     columns,
     maxColumns,
     gap,
+    gapFragment,
     density,
     size,
     children
@@ -97,7 +103,7 @@ function FormGridWeb(param) {
     "data-gap": String(gap),
     "data-density": density,
     "data-size": size,
-    gap,
+    ...gapFragment,
     width: "100%",
     minWidth: 0,
     style,
@@ -109,6 +115,7 @@ function FormGridNative(param) {
     columns,
     maxColumns,
     gap,
+    gapFragment,
     density,
     size,
     children
@@ -137,7 +144,7 @@ function FormGridNative(param) {
     rows.push(childArray.slice(i, i + effectiveColumns));
   }
   return /* @__PURE__ */_jsx(YStack, {
-    gap,
+    ...gapFragment,
     width: "100%",
     "data-mpo-form-grid": "",
     "data-columns": effectiveColumns,
@@ -148,7 +155,7 @@ function FormGridNative(param) {
     "data-size": size,
     children: rows.map(function (row, rowIndex) {
       return /* @__PURE__ */_jsx(XStack, {
-        gap,
+        ...gapFragment,
         children: row.map(function (child, colIndex) {
           return /* @__PURE__ */_jsx(YStack, {
             flex: 1,

package/dist/esm/FormGrid.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["jsx","_jsx","Children","useEffect","useLayoutEffect","useRef","useState","useResolvedKnobs","XStack","YStack","isWeb","useMedia","FORM_GRID_COLLAPSE_WIDTH","resolveWideColumns","columns","maxColumns","Math","min","FormGrid","param","gap","compact","children","knobProps","resolvedGap","wideColumns","FormGridWeb","density","size","FormGridNative","ref","containerWide","setContainerWide","el","current","update","update2","width","getBoundingClientRect","ResizeObserver","onResize","onResize2","window","addEventListener","removeEventListener","ro","entries","_ref","_entries_","contentRect","observe","disconnect","effectiveColumns","style","display","gridTemplateColumns","containerType","String","minWidth","media","canUseDomResize","innerWidth","domViewportWide","setDomViewportWide","handler","handler2","viewportWide","xs","childArray","toArray","rows","i","length","push","slice","map","row","rowIndex","child","colIndex","flex"],"sources":["FormGrid.native.js"],"sourcesContent":["import { jsx as _jsx } from \"react/jsx-runtime\";\nimport { Children, useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport { useResolvedKnobs } from \"@multiplatform.one/theme\";\nimport { XStack, YStack, isWeb, useMedia } from \"tamagui\";\nvar FORM_GRID_COLLAPSE_WIDTH = 480;\nfunction resolveWideColumns(columns, maxColumns) {\n  return Math.min(columns, maxColumns);\n}\nfunction FormGrid(param) {\n  var { columns = 1, maxColumns = 2, gap, compact, children } = param;\n  var { knobProps } = useResolvedKnobs(compact === void 0 ? void 0 : {\n    compact\n  });\n  var resolvedGap = gap !== null && gap !== void 0 ? gap : knobProps.gap.gap;\n  var wideColumns = resolveWideColumns(columns, maxColumns);\n  if (isWeb) {\n    return /* @__PURE__ */ _jsx(FormGridWeb, {\n      columns: wideColumns,\n      maxColumns,\n      gap: resolvedGap,\n      density: knobProps.density,\n      size: knobProps.size,\n      children\n    });\n  }\n  return /* @__PURE__ */ _jsx(FormGridNative, {\n    columns: wideColumns,\n    maxColumns,\n    gap: resolvedGap,\n    density: knobProps.density,\n    size: knobProps.size,\n    children\n  });\n}\nfunction FormGridWeb(param) {\n  var { columns, maxColumns, gap, density, size, children } = param;\n  var ref = useRef(null);\n  var [containerWide, setContainerWide] = useState(true);\n  useLayoutEffect(function() {\n    var el = ref.current;\n    if (!el || columns <= 1) {\n      setContainerWide(true);\n      return;\n    }\n    var update = function update2(width) {\n      setContainerWide(width >= FORM_GRID_COLLAPSE_WIDTH);\n    };\n    update(el.getBoundingClientRect().width);\n    if (typeof ResizeObserver === \"undefined\") {\n      var onResize = function onResize2() {\n        return update(el.getBoundingClientRect().width);\n      };\n      window.addEventListener(\"resize\", onResize);\n      return function() {\n        return window.removeEventListener(\"resize\", onResize);\n      };\n    }\n    var ro = new ResizeObserver(function(entries) {\n      var _ref;\n      var _entries_;\n      var width = (_ref = (_entries_ = entries[0]) === null || _entries_ === void 0 ? void 0 : _entries_.contentRect.width) !== null && _ref !== void 0 ? _ref : el.getBoundingClientRect().width;\n      update(width);\n    });\n    ro.observe(el);\n    return function() {\n      return ro.disconnect();\n    };\n  }, [\n    columns\n  ]);\n  var effectiveColumns = columns <= 1 || !containerWide ? 1 : columns;\n  var style = {\n    display: \"grid\",\n    gridTemplateColumns: `repeat(${effectiveColumns}, minmax(0, 1fr))`,\n    // Enable container queries for consumers / CSS extensions (DG-FORM-09).\n    containerType: columns > 1 ? \"inline-size\" : void 0\n  };\n  return /* @__PURE__ */ _jsx(YStack, {\n    ref,\n    \"data-mpo-form-grid\": \"\",\n    \"data-columns\": effectiveColumns,\n    \"data-max-columns\": maxColumns,\n    \"data-requested-columns\": columns,\n    \"data-gap\": String(gap),\n    \"data-density\": density,\n    \"data-size\": size,\n    gap,\n    width: \"100%\",\n    minWidth: 0,\n    style,\n    children\n  });\n}\nfunction FormGridNative(param) {\n  var { columns, maxColumns, gap, density, size, children } = param;\n  var media = useMedia();\n  var canUseDomResize = typeof window !== \"undefined\" && typeof window.addEventListener === \"function\" && typeof window.innerWidth === \"number\";\n  var [domViewportWide, setDomViewportWide] = useState(function() {\n    return canUseDomResize ? window.innerWidth >= FORM_GRID_COLLAPSE_WIDTH : true;\n  });\n  useEffect(function() {\n    if (!canUseDomResize) return;\n    var handler = function handler2() {\n      return setDomViewportWide(window.innerWidth >= FORM_GRID_COLLAPSE_WIDTH);\n    };\n    handler();\n    window.addEventListener(\"resize\", handler);\n    return function() {\n      return window.removeEventListener(\"resize\", handler);\n    };\n  }, [\n    canUseDomResize\n  ]);\n  var viewportWide = canUseDomResize ? domViewportWide : media.xs === true;\n  var effectiveColumns = columns <= 1 || !viewportWide ? 1 : columns;\n  var childArray = Children.toArray(children);\n  var rows = [];\n  for (var i = 0; i < childArray.length; i += effectiveColumns) {\n    rows.push(childArray.slice(i, i + effectiveColumns));\n  }\n  return /* @__PURE__ */ _jsx(YStack, {\n    gap,\n    width: \"100%\",\n    \"data-mpo-form-grid\": \"\",\n    \"data-columns\": effectiveColumns,\n    \"data-max-columns\": maxColumns,\n    \"data-requested-columns\": columns,\n    \"data-gap\": String(gap),\n    \"data-density\": density,\n    \"data-size\": size,\n    children: rows.map(function(row, rowIndex) {\n      return /* @__PURE__ */ _jsx(XStack, {\n        gap,\n        children: row.map(function(child, colIndex) {\n          return /* @__PURE__ */ _jsx(YStack, {\n            flex: 1,\n            minWidth: 0,\n            children: child\n          }, colIndex);\n        })\n      }, rowIndex);\n    })\n  });\n}\nexport {\n  FORM_GRID_COLLAPSE_WIDTH,\n  FormGrid\n};\n//# sourceMappingURL=FormGrid.js.map\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["jsx","_jsx","Children","useEffect","useLayoutEffect","useRef","useState","useResolvedKnobs","XStack","YStack","isWeb","useMedia","FORM_GRID_COLLAPSE_WIDTH","resolveWideColumns","columns","maxColumns","Math","min","FormGrid","param","gap","compact","children","knobProps","gapFragment","resolvedGap","wideColumns","FormGridWeb","density","size","FormGridNative","ref","containerWide","setContainerWide","el","current","update","update2","width","getBoundingClientRect","ResizeObserver","onResize","onResize2","window","addEventListener","removeEventListener","ro","entries","_ref","_entries_","contentRect","observe","disconnect","effectiveColumns","style","display","gridTemplateColumns","containerType","String","minWidth","media","canUseDomResize","innerWidth","domViewportWide","setDomViewportWide","handler","handler2","viewportWide","xs","childArray","toArray","rows","i","length","push","slice","map","row","rowIndex","child","colIndex","flex"],"sources":["FormGrid.native.js"],"sourcesContent":["import { jsx as _jsx } from \"react/jsx-runtime\";\nimport { Children, useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport { useResolvedKnobs } from \"@multiplatform.one/theme\";\nimport { XStack, YStack, isWeb, useMedia } from \"tamagui\";\nvar FORM_GRID_COLLAPSE_WIDTH = 480;\nfunction resolveWideColumns(columns, maxColumns) {\n  return Math.min(columns, maxColumns);\n}\nfunction FormGrid(param) {\n  var { columns = 1, maxColumns = 2, gap, compact, children } = param;\n  var { knobProps } = useResolvedKnobs(compact === void 0 ? void 0 : {\n    compact\n  });\n  var gapFragment = gap === void 0 ? knobProps.gap : {\n    gap\n  };\n  var resolvedGap = gapFragment.gap;\n  var wideColumns = resolveWideColumns(columns, maxColumns);\n  if (isWeb) {\n    return /* @__PURE__ */ _jsx(FormGridWeb, {\n      columns: wideColumns,\n      maxColumns,\n      gap: resolvedGap,\n      gapFragment,\n      density: knobProps.density,\n      size: knobProps.size,\n      children\n    });\n  }\n  return /* @__PURE__ */ _jsx(FormGridNative, {\n    columns: wideColumns,\n    maxColumns,\n    gap: resolvedGap,\n    gapFragment,\n    density: knobProps.density,\n    size: knobProps.size,\n    children\n  });\n}\nfunction FormGridWeb(param) {\n  var { columns, maxColumns, gap, gapFragment, density, size, children } = param;\n  var ref = useRef(null);\n  var [containerWide, setContainerWide] = useState(true);\n  useLayoutEffect(function() {\n    var el = ref.current;\n    if (!el || columns <= 1) {\n      setContainerWide(true);\n      return;\n    }\n    var update = function update2(width) {\n      setContainerWide(width >= FORM_GRID_COLLAPSE_WIDTH);\n    };\n    update(el.getBoundingClientRect().width);\n    if (typeof ResizeObserver === \"undefined\") {\n      var onResize = function onResize2() {\n        return update(el.getBoundingClientRect().width);\n      };\n      window.addEventListener(\"resize\", onResize);\n      return function() {\n        return window.removeEventListener(\"resize\", onResize);\n      };\n    }\n    var ro = new ResizeObserver(function(entries) {\n      var _ref;\n      var _entries_;\n      var width = (_ref = (_entries_ = entries[0]) === null || _entries_ === void 0 ? void 0 : _entries_.contentRect.width) !== null && _ref !== void 0 ? _ref : el.getBoundingClientRect().width;\n      update(width);\n    });\n    ro.observe(el);\n    return function() {\n      return ro.disconnect();\n    };\n  }, [\n    columns\n  ]);\n  var effectiveColumns = columns <= 1 || !containerWide ? 1 : columns;\n  var style = {\n    display: \"grid\",\n    gridTemplateColumns: `repeat(${effectiveColumns}, minmax(0, 1fr))`,\n    // Enable container queries for consumers / CSS extensions (DG-FORM-09).\n    containerType: columns > 1 ? \"inline-size\" : void 0\n  };\n  return /* @__PURE__ */ _jsx(YStack, {\n    ref,\n    \"data-mpo-form-grid\": \"\",\n    \"data-columns\": effectiveColumns,\n    \"data-max-columns\": maxColumns,\n    \"data-requested-columns\": columns,\n    \"data-gap\": String(gap),\n    \"data-density\": density,\n    \"data-size\": size,\n    ...gapFragment,\n    width: \"100%\",\n    minWidth: 0,\n    style,\n    children\n  });\n}\nfunction FormGridNative(param) {\n  var { columns, maxColumns, gap, gapFragment, density, size, children } = param;\n  var media = useMedia();\n  var canUseDomResize = typeof window !== \"undefined\" && typeof window.addEventListener === \"function\" && typeof window.innerWidth === \"number\";\n  var [domViewportWide, setDomViewportWide] = useState(function() {\n    return canUseDomResize ? window.innerWidth >= FORM_GRID_COLLAPSE_WIDTH : true;\n  });\n  useEffect(function() {\n    if (!canUseDomResize) return;\n    var handler = function handler2() {\n      return setDomViewportWide(window.innerWidth >= FORM_GRID_COLLAPSE_WIDTH);\n    };\n    handler();\n    window.addEventListener(\"resize\", handler);\n    return function() {\n      return window.removeEventListener(\"resize\", handler);\n    };\n  }, [\n    canUseDomResize\n  ]);\n  var viewportWide = canUseDomResize ? domViewportWide : media.xs === true;\n  var effectiveColumns = columns <= 1 || !viewportWide ? 1 : columns;\n  var childArray = Children.toArray(children);\n  var rows = [];\n  for (var i = 0; i < childArray.length; i += effectiveColumns) {\n    rows.push(childArray.slice(i, i + effectiveColumns));\n  }\n  return /* @__PURE__ */ _jsx(YStack, {\n    ...gapFragment,\n    width: \"100%\",\n    \"data-mpo-form-grid\": \"\",\n    \"data-columns\": effectiveColumns,\n    \"data-max-columns\": maxColumns,\n    \"data-requested-columns\": columns,\n    \"data-gap\": String(gap),\n    \"data-density\": density,\n    \"data-size\": size,\n    children: rows.map(function(row, rowIndex) {\n      return /* @__PURE__ */ _jsx(XStack, {\n        ...gapFragment,\n        children: row.map(function(child, colIndex) {\n          return /* @__PURE__ */ _jsx(YStack, {\n            flex: 1,\n            minWidth: 0,\n            children: child\n          }, colIndex);\n        })\n      }, rowIndex);\n    })\n  });\n}\nexport {\n  FORM_GRID_COLLAPSE_WIDTH,\n  FormGrid\n};\n//# sourceMappingURL=FormGrid.js.map\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/FormSection.mjs

@@ -43,8 +43,10 @@ function FormSection({
     } : {}),
     children: [label ? useFieldset ? /* @__PURE__ */jsx(Text, {
       render: "legend",
+      "data-mpo-legend": "",
       ...knobProps.label,
-      ...knobProps.heading,
+      fontWeight: "400",
+      color: knobProps.textAccentColor,
       style: {
         padding: 0,
         marginBottom: 0,
@@ -54,14 +56,19 @@ function FormSection({
       children: label
     }) : /* @__PURE__ */jsx(Text, {
       ...knobProps.label,
-      ...knobProps.heading,
+      fontWeight: "400",
+      color: knobProps.textAccentColor,
       role: "heading",
       "aria-level": 3,
       children: label
     }) : null, children]
   });
 }
-const Fieldset = FormSection;
+function Fieldset(props) {
+  return /* @__PURE__ */jsx(FormSection, {
+    ...props
+  });
+}
 function FormSectionStack({
   children,
   gap

package/dist/esm/FormSection.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["useResolvedKnobs","Text","YStack","isWeb","formReadableMaxWidth","formFieldGap","formReadableMaxWidth2","formSectionGap","jsx","jsxs","FormSection","label","children","maxWidth","gap","testID","fieldset","compact","useFieldset","knobProps","resolvedGap","render","String","density","size","width","alignSelf","style","borderWidth","margin","minWidth","padding","heading","marginBottom","float","role","Fieldset","FormSectionStack","gapLg"],"sources":["../../src/FormSection.tsx"],"sourcesContent":[null],"mappings":"AACA,SAASA,gBAAA,QAAwB;AACjC,SAASC,IAAA,EAAMC,MAAA,EAAQC,KAAA,QAAa;AACpC,SAASC,oBAAA,QAA4B;AAqIrC,SAASC,YAAA,EAAcD,oBAAA,IAAAE,qBAAA,EAAsBC,cAAA,QAAsB;AAjF/D,SA0BMC,GAAA,EA1BNC,IAAA;AAdG,SAASC,YAAY;EAC1BC,KAAA;EACAC,QAAA;EACAC,QAAA,GAAWT,oBAAA;EACXU,GAAA;EACAC,MAAA;EACAC,QAAA,GAAW;EACXC;AACF,GAAqB;EACnB,MAAMC,WAAA,GAAcF,QAAA,IAAYb,KAAA;EAChC,MAAM;IAAEgB;EAAU,IAAInB,gBAAA,CAAiBiB,OAAA,KAAY,SAAY,SAAY;IAAEA;EAAQ,CAAC;EACtF,MAAMG,WAAA,GAAcN,GAAA,IAAOK,SAAA,CAAUL,GAAA,CAAIA,GAAA;EAEzC,OACE,eAAAL,IAAA,CAACP,MAAA;IACE,IAAIgB,WAAA,GAAc;MAAEG,MAAA,EAAQ;IAAoB,IAAI,CAAC;IACtD,yBAAsB;IACtB,qBAAmBH,WAAA,GAAc,KAAK;IACtC,kBAAgBI,MAAA,CAAOF,WAAW;IAClC,gBAAcD,SAAA,CAAUI,OAAA;IACxB,aAAWJ,SAAA,CAAUK,IAAA;IACrB,eAAaT,MAAA;IACbD,GAAA,EAAKM,WAAA;IACLK,KAAA,EAAM;IACNZ,QAAA,EAAUA,QAAA,KAAa,UAAU,SAAYA,QAAA;IAC7Ca,SAAA,EAAWb,QAAA,KAAa,UAAU,SAAY;IAE7C,IAAIK,WAAA,GACD;MACES,KAAA,EAAO;QACLC,WAAA,EAAa;QACbC,MAAA,EAAQ;QACRC,QAAA,EAAU;QACVC,OAAA,EAAS;MACX;IACF,IACA,CAAC;IAEJnB,QAAA,GAAAD,KAAA,GACCO,WAAA,GACE,eAAAV,GAAA,CAACP,IAAA;MACCoB,MAAA,EAAO;MACN,GAAGF,SAAA,CAAUR,KAAA;MACb,GAAGQ,SAAA,CAAUa,OAAA;MAEdL,KAAA,EAAO;QAAEI,OAAA,EAAS;QAAGE,YAAA,EAAc;QAAGC,KAAA,EAAO;QAAQT,KAAA,EAAO;MAAO;MAElEb,QAAA,EAAAD;IAAA,CACH,IAEA,eAAAH,GAAA,CAACP,IAAA;MAAM,GAAGkB,SAAA,CAAUR,KAAA;MAAQ,GAAGQ,SAAA,CAAUa,OAAA;MAASG,IAAA,EAAK;MAAU,cAAY;MAC1EvB,QAAA,EAAAD;IAAA,CACH,IAEA,MACHC,QAAA;EAAA,CACH;AAEJ;AAMO,MAAMwB,QAAA,GAAW1B,WAAA;AAcjB,SAAS2B,iBAAiB;EAAEzB,QAAA;EAAUE;AAAI,GAA0B;EACzE,MAAM;IAAEK;EAAU,IAAInB,gBAAA,CAAiB;EACvC,MAAMoB,WAAA,GAAcN,GAAA,IAAOK,SAAA,CAAUmB,KAAA,CAAMxB,GAAA;EAC3C,OACE,eAAAN,GAAA,CAACN,MAAA;IACC,+BAA4B;IAC5B,oBAAkBoB,MAAA,CAAOF,WAAW;IACpC,gBAAcD,SAAA,CAAUI,OAAA;IACxB,aAAWJ,SAAA,CAAUK,IAAA;IACrBV,GAAA,EAAKM,WAAA;IACLK,KAAA,EAAM;IAELb;EAAA,CACH;AAEJ","ignoreList":[]}
+{"version":3,"names":["useResolvedKnobs","Text","YStack","isWeb","formReadableMaxWidth","formFieldGap","formReadableMaxWidth2","formSectionGap","jsx","jsxs","FormSection","label","children","maxWidth","gap","testID","fieldset","compact","useFieldset","knobProps","resolvedGap","render","String","density","size","width","alignSelf","style","borderWidth","margin","minWidth","padding","fontWeight","color","textAccentColor","marginBottom","float","role","Fieldset","props","FormSectionStack","gapLg"],"sources":["../../src/FormSection.tsx"],"sourcesContent":[null],"mappings":"AACA,SAASA,gBAAA,QAAwB;AACjC,SAASC,IAAA,EAAMC,MAAA,EAAQC,KAAA,QAAa;AACpC,SAASC,oBAAA,QAA4B;AA+IrC,SAASC,YAAA,EAAcD,oBAAA,IAAAE,qBAAA,EAAsBC,cAAA,QAAsB;AA3F/D,SA0BMC,GAAA,EA1BNC,IAAA;AAdG,SAASC,YAAY;EAC1BC,KAAA;EACAC,QAAA;EACAC,QAAA,GAAWT,oBAAA;EACXU,GAAA;EACAC,MAAA;EACAC,QAAA,GAAW;EACXC;AACF,GAAqB;EACnB,MAAMC,WAAA,GAAcF,QAAA,IAAYb,KAAA;EAChC,MAAM;IAAEgB;EAAU,IAAInB,gBAAA,CAAiBiB,OAAA,KAAY,SAAY,SAAY;IAAEA;EAAQ,CAAC;EACtF,MAAMG,WAAA,GAAcN,GAAA,IAAOK,SAAA,CAAUL,GAAA,CAAIA,GAAA;EAEzC,OACE,eAAAL,IAAA,CAACP,MAAA;IACE,IAAIgB,WAAA,GAAc;MAAEG,MAAA,EAAQ;IAAoB,IAAI,CAAC;IACtD,yBAAsB;IACtB,qBAAmBH,WAAA,GAAc,KAAK;IACtC,kBAAgBI,MAAA,CAAOF,WAAW;IAClC,gBAAcD,SAAA,CAAUI,OAAA;IACxB,aAAWJ,SAAA,CAAUK,IAAA;IACrB,eAAaT,MAAA;IACbD,GAAA,EAAKM,WAAA;IACLK,KAAA,EAAM;IACNZ,QAAA,EAAUA,QAAA,KAAa,UAAU,SAAYA,QAAA;IAC7Ca,SAAA,EAAWb,QAAA,KAAa,UAAU,SAAY;IAE7C,IAAIK,WAAA,GACD;MACES,KAAA,EAAO;QACLC,WAAA,EAAa;QACbC,MAAA,EAAQ;QACRC,QAAA,EAAU;QACVC,OAAA,EAAS;MACX;IACF,IACA,CAAC;IAEJnB,QAAA,GAAAD,KAAA,GACCO,WAAA,GACE,eAAAV,GAAA,CAACP,IAAA;MACCoB,MAAA,EAAO;MACP,mBAAgB;MACf,GAAGF,SAAA,CAAUR,KAAA;MACdqB,UAAA,EAAW;MACXC,KAAA,EAAOd,SAAA,CAAUe,eAAA;MAEjBP,KAAA,EAAO;QAAEI,OAAA,EAAS;QAAGI,YAAA,EAAc;QAAGC,KAAA,EAAO;QAAQX,KAAA,EAAO;MAAO;MAElEb,QAAA,EAAAD;IAAA,CACH,IAEA,eAAAH,GAAA,CAACP,IAAA;MACE,GAAGkB,SAAA,CAAUR,KAAA;MACdqB,UAAA,EAAW;MACXC,KAAA,EAAOd,SAAA,CAAUe,eAAA;MACjBG,IAAA,EAAK;MACL,cAAY;MAEXzB,QAAA,EAAAD;IAAA,CACH,IAEA,MACHC,QAAA;EAAA,CACH;AAEJ;AAMO,SAAS0B,SAASC,KAAA,EAAyB;EAChD,OAAO,eAAA/B,GAAA,CAACE,WAAA;IAAa,GAAG6B;EAAA,CAAO;AACjC;AAcO,SAASC,iBAAiB;EAAE5B,QAAA;EAAUE;AAAI,GAA0B;EACzE,MAAM;IAAEK;EAAU,IAAInB,gBAAA,CAAiB;EACvC,MAAMoB,WAAA,GAAcN,GAAA,IAAOK,SAAA,CAAUsB,KAAA,CAAM3B,GAAA;EAC3C,OACE,eAAAN,GAAA,CAACN,MAAA;IACC,+BAA4B;IAC5B,oBAAkBoB,MAAA,CAAOF,WAAW;IACpC,gBAAcD,SAAA,CAAUI,OAAA;IACxB,aAAWJ,SAAA,CAAUK,IAAA;IACrBV,GAAA,EAAKM,WAAA;IACLK,KAAA,EAAM;IAELb;EAAA,CACH;AAEJ","ignoreList":[]}

package/dist/esm/FormSection.native.js

@@ -45,8 +45,10 @@ function FormSection(param) {
     } : {}),
     children: [label ? useFieldset ? /* @__PURE__ */_jsx(Text, {
       render: "legend",
+      "data-mpo-legend": "",
       ...knobProps.label,
-      ...knobProps.heading,
+      fontWeight: "400",
+      color: knobProps.textAccentColor,
       // legend is inline by default; stretch to a full heading row
       style: {
         padding: 0,
@@ -57,14 +59,19 @@ function FormSection(param) {
       children: label
     }) : /* @__PURE__ */_jsx(Text, {
       ...knobProps.label,
-      ...knobProps.heading,
+      fontWeight: "400",
+      color: knobProps.textAccentColor,
       role: "heading",
       "aria-level": 3,
       children: label
     }) : null, children]
   });
 }
-var Fieldset = FormSection;
+function Fieldset(props) {
+  return /* @__PURE__ */_jsx(FormSection, {
+    ...props
+  });
+}
 function FormSectionStack(param) {
   var {
     children,

package/dist/esm/FormSection.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","useResolvedKnobs","Text","YStack","isWeb","formReadableMaxWidth","formFieldGap","formReadableMaxWidth2","formSectionGap","FormSection","param","label","children","maxWidth","gap","testID","fieldset","compact","useFieldset","knobProps","resolvedGap","render","String","density","size","width","alignSelf","style","borderWidth","margin","minWidth","padding","heading","marginBottom","float","role","Fieldset","FormSectionStack","gapLg"],"sources":["FormSection.native.js"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useResolvedKnobs } from \"@multiplatform.one/theme\";\nimport { Text, YStack, isWeb } from \"tamagui\";\nimport { formReadableMaxWidth } from \"./formSpacing\";\nimport { formFieldGap, formReadableMaxWidth as formReadableMaxWidth2, formSectionGap } from \"./formSpacing\";\nfunction FormSection(param) {\n  var { label, children, maxWidth = formReadableMaxWidth, gap, testID, fieldset = true, compact } = param;\n  var useFieldset = fieldset && isWeb;\n  var { knobProps } = useResolvedKnobs(compact === void 0 ? void 0 : {\n    compact\n  });\n  var resolvedGap = gap !== null && gap !== void 0 ? gap : knobProps.gap.gap;\n  return /* @__PURE__ */ _jsxs(YStack, {\n    ...useFieldset ? {\n      render: \"fieldset\"\n    } : {},\n    \"data-mpo-form-section\": \"\",\n    \"data-mpo-fieldset\": useFieldset ? \"\" : void 0,\n    \"data-field-gap\": String(resolvedGap),\n    \"data-density\": knobProps.density,\n    \"data-size\": knobProps.size,\n    \"data-testid\": testID,\n    gap: resolvedGap,\n    width: \"100%\",\n    maxWidth: maxWidth === \"fluid\" ? void 0 : maxWidth,\n    alignSelf: maxWidth === \"fluid\" ? void 0 : \"flex-start\",\n    // Reset browser fieldset chrome; we own spacing via tokens.\n    ...useFieldset ? {\n      style: {\n        borderWidth: 0,\n        margin: 0,\n        minWidth: 0,\n        padding: 0\n      }\n    } : {},\n    children: [\n      label ? useFieldset ? /* @__PURE__ */ _jsx(Text, {\n        render: \"legend\",\n        ...knobProps.label,\n        ...knobProps.heading,\n        // legend is inline by default; stretch to a full heading row\n        style: {\n          padding: 0,\n          marginBottom: 0,\n          float: \"left\",\n          width: \"100%\"\n        },\n        children: label\n      }) : /* @__PURE__ */ _jsx(Text, {\n        ...knobProps.label,\n        ...knobProps.heading,\n        role: \"heading\",\n        \"aria-level\": 3,\n        children: label\n      }) : null,\n      children\n    ]\n  });\n}\nvar Fieldset = FormSection;\nfunction FormSectionStack(param) {\n  var { children, gap } = param;\n  var { knobProps } = useResolvedKnobs();\n  var resolvedGap = gap !== null && gap !== void 0 ? gap : knobProps.gapLg.gap;\n  return /* @__PURE__ */ _jsx(YStack, {\n    \"data-mpo-form-section-stack\": \"\",\n    \"data-section-gap\": String(resolvedGap),\n    \"data-density\": knobProps.density,\n    \"data-size\": knobProps.size,\n    gap: resolvedGap,\n    width: \"100%\",\n    children\n  });\n}\nexport {\n  Fieldset,\n  FormSection,\n  FormSectionStack,\n  formFieldGap,\n  formReadableMaxWidth2 as formReadableMaxWidth,\n  formSectionGap\n};\n//# sourceMappingURL=FormSection.js.map\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","useResolvedKnobs","Text","YStack","isWeb","formReadableMaxWidth","formFieldGap","formReadableMaxWidth2","formSectionGap","FormSection","param","label","children","maxWidth","gap","testID","fieldset","compact","useFieldset","knobProps","resolvedGap","render","String","density","size","width","alignSelf","style","borderWidth","margin","minWidth","padding","fontWeight","color","textAccentColor","marginBottom","float","role","Fieldset","props","FormSectionStack","gapLg"],"sources":["FormSection.native.js"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useResolvedKnobs } from \"@multiplatform.one/theme\";\nimport { Text, YStack, isWeb } from \"tamagui\";\nimport { formReadableMaxWidth } from \"./formSpacing\";\nimport { formFieldGap, formReadableMaxWidth as formReadableMaxWidth2, formSectionGap } from \"./formSpacing\";\nfunction FormSection(param) {\n  var { label, children, maxWidth = formReadableMaxWidth, gap, testID, fieldset = true, compact } = param;\n  var useFieldset = fieldset && isWeb;\n  var { knobProps } = useResolvedKnobs(compact === void 0 ? void 0 : {\n    compact\n  });\n  var resolvedGap = gap !== null && gap !== void 0 ? gap : knobProps.gap.gap;\n  return /* @__PURE__ */ _jsxs(YStack, {\n    ...useFieldset ? {\n      render: \"fieldset\"\n    } : {},\n    \"data-mpo-form-section\": \"\",\n    \"data-mpo-fieldset\": useFieldset ? \"\" : void 0,\n    \"data-field-gap\": String(resolvedGap),\n    \"data-density\": knobProps.density,\n    \"data-size\": knobProps.size,\n    \"data-testid\": testID,\n    gap: resolvedGap,\n    width: \"100%\",\n    maxWidth: maxWidth === \"fluid\" ? void 0 : maxWidth,\n    alignSelf: maxWidth === \"fluid\" ? void 0 : \"flex-start\",\n    // Reset browser fieldset chrome; we own spacing via tokens.\n    ...useFieldset ? {\n      style: {\n        borderWidth: 0,\n        margin: 0,\n        minWidth: 0,\n        padding: 0\n      }\n    } : {},\n    children: [\n      label ? useFieldset ? /* @__PURE__ */ _jsx(Text, {\n        render: \"legend\",\n        \"data-mpo-legend\": \"\",\n        ...knobProps.label,\n        fontWeight: \"400\",\n        color: knobProps.textAccentColor,\n        // legend is inline by default; stretch to a full heading row\n        style: {\n          padding: 0,\n          marginBottom: 0,\n          float: \"left\",\n          width: \"100%\"\n        },\n        children: label\n      }) : /* @__PURE__ */ _jsx(Text, {\n        ...knobProps.label,\n        fontWeight: \"400\",\n        color: knobProps.textAccentColor,\n        role: \"heading\",\n        \"aria-level\": 3,\n        children: label\n      }) : null,\n      children\n    ]\n  });\n}\nfunction Fieldset(props) {\n  return /* @__PURE__ */ _jsx(FormSection, {\n    ...props\n  });\n}\nfunction FormSectionStack(param) {\n  var { children, gap } = param;\n  var { knobProps } = useResolvedKnobs();\n  var resolvedGap = gap !== null && gap !== void 0 ? gap : knobProps.gapLg.gap;\n  return /* @__PURE__ */ _jsx(YStack, {\n    \"data-mpo-form-section-stack\": \"\",\n    \"data-section-gap\": String(resolvedGap),\n    \"data-density\": knobProps.density,\n    \"data-size\": knobProps.size,\n    gap: resolvedGap,\n    width: \"100%\",\n    children\n  });\n}\nexport {\n  Fieldset,\n  FormSection,\n  FormSectionStack,\n  formFieldGap,\n  formReadableMaxWidth2 as formReadableMaxWidth,\n  formSectionGap\n};\n//# sourceMappingURL=FormSection.js.map\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/InputParts/index.mjs

@@ -2,7 +2,7 @@ import { getFontSized } from "@tamagui/get-font-sized";
 import { useEffect, useState } from "react";
 import { Pressable as RNPressable } from "react-native-web";
 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 { ensureCompositeFocusRing, ensureFocusVisibleRing, isTouchSurface, recipeFamilies, resolveGlyphPaint, sizeRecipeBoxVariants, sizeRecipeForToken, sizeRecipeIconVariants, sizeRecipeTypeVariants, textFieldInset, useResolvedKnobs, warnOutlineNone, warnPositiveTabIndex, warnSizeRecipeEscape } from "@multiplatform.one/theme";
 import { formButtonColors, formCommonColors, formInputColors } from "../shared/colorRamps.mjs";
 import { useControlGrouped } from "../shared/groupContext.mjs";
 import { useIsInTableCell } from "../shared/tableCellContext.mjs";
@@ -167,6 +167,11 @@ const inputPartsRingCss = `/* LC-71: ring on Box (adornments inside); Area never
 [data-mp-input-box] [contenteditable] {
   outline: none !important;
   box-shadow: none !important;
+}
+/* LC-84: Area is chromeless. Zero UA pad on the single-line input only \u2014
+   textarea keeps ThemedTextArea's equal padX/padY inset. */
+input[data-mp-input-area] {
+  padding: 0 !important;
 }`;
 const INPUT_PARTS_RING_STYLE_ID = "mp-input-parts-ring-anatomy";
 function ensureInputPartsFocusRing() {
@@ -253,54 +258,6 @@ const InputGroupFrame = styled(XGroup, {
     unstyled: process.env.TAMAGUI_HEADLESS === "1"
   }
 });
-const nativeElevationShadow = {
-  $1: {
-    shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: 1
-    },
-    shadowOpacity: 0.12,
-    // house light angle: blur = 2 x y-offset on every tier (Axiom 14)
-    shadowRadius: 2,
-    elevation: 2
-  },
-  $2: {
-    shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: 3
-    },
-    shadowOpacity: 0.15,
-    shadowRadius: 6,
-    elevation: 4
-  },
-  $4: {
-    shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: 10
-    },
-    shadowOpacity: 0.15,
-    shadowRadius: 20,
-    elevation: 8
-  }
-};
-const elevationKeyAlias = {
-  "20": "$1",
-  "28": "$2",
-  "44": "$4"
-};
-function getBoxElevationProps(token) {
-  if (token == null) return {
-    elevation: void 0
-  };
-  if (isWeb) return {
-    elevation: token
-  };
-  const key = elevationKeyAlias[String(token)] ?? String(token);
-  return nativeElevationShadow[key] || nativeElevationShadow.$2;
-}
 function wrapNativePressable(onPress, disabled, node) {
   if (isWeb || !onPress) return node;
   return /* @__PURE__ */jsx(RNPressable, {
@@ -345,7 +302,8 @@ const InputGroupImpl = InputGroupFrame.styleable((groupProps, forwardedRef) => {
     disabled
   };
   const paintsRing = !grouped && !inTableCell;
-  const boxOverflow = paintsRing ? "hidden" : "visible";
+  const hasElevation = knobProps.elevation != null;
+  const boxOverflow = paintsRing && !(hasElevation && !isWeb) ? "hidden" : "visible";
   const ringMode = boxRingMode(boxOverflow, paintsRing);
   if (isWeb) {
     ensureCompositeFocusRing();
@@ -393,6 +351,10 @@ const InputGroupImpl = InputGroupFrame.styleable((groupProps, forwardedRef) => {
       paddingHorizontal: paddingHorizontalProp
     } : void 0)
   };
+  const fieldInset = heightProp === "auto" ? 0 : textFieldInset(familyRecipe);
+  const insetPadProps = sizeRecipeEscaped || typeof paddingHorizontalProp !== "number" && paddingHorizontalProp != null ? void 0 : {
+    paddingHorizontal: fieldInset
+  };
   if (inTableCell) {
     return /* @__PURE__ */jsx(FocusContext.Provider, {
       focused,
@@ -410,6 +372,7 @@ const InputGroupImpl = InputGroupFrame.styleable((groupProps, forwardedRef) => {
         elevation: void 0,
         ...props,
         ...passthroughSizeProps,
+        ...insetPadProps,
         ...sizeRecipeEscapeOverride,
         ...framePressProps,
         ...boxRingAttrs,
@@ -428,6 +391,7 @@ const InputGroupImpl = InputGroupFrame.styleable((groupProps, forwardedRef) => {
       elevation: void 0,
       ...props,
       ...passthroughSizeProps,
+      ...insetPadProps,
       ...sizeRecipeEscapeOverride,
       ...framePressProps,
       ...boxRingAttrs,
@@ -453,8 +417,10 @@ const InputGroupImpl = InputGroupFrame.styleable((groupProps, forwardedRef) => {
       ...knobProps.body,
       size: knobProps.sizeToken,
       ...controlFragment,
-      backgroundColor: knobProps.outlined ? "transparent" : formInputColors.background.base,
-      ...getBoxElevationProps(knobProps.elevation),
+      backgroundColor: knobProps.inputBackground,
+      ...(knobProps.elevation == null ? {
+        elevation: void 0
+      } : knobProps.elevationChrome),
       ...knobProps.borderRadius,
       ...getInputFrameTransitionProps(typeof knobProps.transition === "string" ? knobProps.transition : void 0),
       hoverStyle: {
@@ -476,6 +442,7 @@ const InputGroupImpl = InputGroupFrame.styleable((groupProps, forwardedRef) => {
       }),
       ...props,
       ...passthroughSizeProps,
+      ...insetPadProps,
       ...sizeRecipeEscapeOverride,
       ...framePressProps,
       ...boxRingAttrs,
@@ -510,13 +477,35 @@ const InputGroupImpl = InputGroupFrame.styleable((groupProps, forwardedRef) => {
     }))
   });
 });
+const KEYBOARD_TO_INPUT_MODE = {
+  "phone-pad": "tel",
+  "number-pad": "numeric",
+  "decimal-pad": "decimal",
+  "email-address": "email",
+  numeric: "numeric"
+};
+const INPUT_MODE_TO_KEYBOARD = {
+  tel: "phone-pad",
+  numeric: "number-pad",
+  decimal: "decimal-pad",
+  email: "email-address"
+};
+function mapKeyboardTypeToInputMode(keyboardType) {
+  if (!keyboardType) return void 0;
+  return KEYBOARD_TO_INPUT_MODE[keyboardType];
+}
+function mapInputModeToKeyboardType(inputMode) {
+  if (!inputMode) return void 0;
+  return INPUT_MODE_TO_KEYBOARD[inputMode];
+}
 const inputSizeVariant = (val = "$true") => {
   const recipe = sizeRecipeForToken(String(val || "$true"), {
     touch: isTouchSurface()
   });
   return {
     fontSize: recipe.fontSize,
-    paddingHorizontal: recipe.paddingHorizontal
+    // LC-84: Area is chromeless — inset lives on Input.Box / ThemedTextArea.
+    paddingHorizontal: 0
   };
 };
 const InputFrame = styled(TInput, {
@@ -525,6 +514,10 @@ const InputFrame = styled(TInput, {
   // 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.
+  // LC-84: Area is chromeless — pad lives on Box (or ThemedTextArea).
+  padding: 0,
+  paddingHorizontal: 0,
+  paddingVertical: 0,
   outlineWidth: 0,
   outlineStyle: "none",
   outlineColor: "transparent",
@@ -569,6 +562,7 @@ const InputAreaImpl = InputFrame.styleable((areaProps, ref) => {
     focusStyle: focusStyleProp,
     focusVisibleStyle: focusVisibleStyleProp,
     className: classNameProp,
+    inputMode: inputModeProp,
     ...props
   } = areaProps;
   const {
@@ -579,6 +573,8 @@ const InputAreaImpl = InputFrame.styleable((areaProps, ref) => {
   const nativeA11yProps = useNativeFieldA11yProps();
   const inTableCell = useIsInTableCell();
   if (isWeb) ensureInputPartsFocusRing();
+  const resolvedInputMode = inputModeProp ?? mapKeyboardTypeToInputMode(keyboardType);
+  const resolvedKeyboardType = keyboardType ?? mapInputModeToKeyboardType(resolvedInputMode);
   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
@@ -605,8 +601,13 @@ const InputAreaImpl = InputFrame.styleable((areaProps, ref) => {
         } : void 0),
         ...knobProps.body,
         type: secureTextEntry ? "password" : props.type,
-        inputMode: keyboardType === "numeric" ? "numeric" : keyboardType === "email-address" ? "email" : void 0,
-        autoComplete: textContentType === "emailAddress" ? "email" : textContentType === "password" ? "current-password" : void 0,
+        padding: 0,
+        paddingHorizontal: 0,
+        paddingVertical: 0,
+        keyboardType: resolvedKeyboardType,
+        textContentType,
+        inputMode: resolvedInputMode,
+        autoComplete: textContentType === "emailAddress" ? "email" : textContentType === "password" ? "current-password" : textContentType === "telephoneNumber" ? "tel" : textContentType === "oneTimeCode" ? "one-time-code" : void 0,
         ...props,
         ...webAreaAttrs(classNameProp),
         ...AREA_NO_OUTLINE,
@@ -668,13 +669,84 @@ const InputButton = styled(TButton, {
     }
   }
 });
-const InputButtonImpl = InputButton.styleable((props, ref) => {
+const InputGlyphButton = styled(View, {
+  name: "InputGlyphButton",
+  context: InputContext,
+  justifyContent: "center",
+  alignItems: "center",
+  backgroundColor: "transparent",
+  borderWidth: 0,
+  borderRadius: 0,
+  cursor: "pointer",
+  flexShrink: 0,
+  outlineWidth: 0,
+  focusStyle: {
+    outlineWidth: 0
+  },
+  focusVisibleStyle: {
+    outlineWidth: 0
+  },
+  variants: {
+    scaleIcon: {
+      ":number": {}
+    },
+    size: {
+      ...sizeRecipeEndCapVariants,
+      "...size": sizeRecipeEndCapFallback
+    }
+  }
+});
+const InputButtonImpl = InputButton.styleable((buttonProps, ref) => {
   const {
-    size
+    children,
+    color: colorProp,
+    glyphRing,
+    size: sizeProp,
+    tabIndex: tabIndexProp,
+    className,
+    ...props
+  } = buttonProps;
+  const {
+    size: contextSize,
+    color: contextColor
   } = InputContext.useStyledContext();
   const {
     knobProps
   } = useResolvedKnobs();
+  const theme = useTheme();
+  const size = sizeProp ?? contextSize;
+  const paint = resolveGlyphPaint(theme, colorProp ?? contextColor);
+  const getThemedIcon = useGetThemedIcon({
+    size: knobProps.controlIcon.width,
+    color: paint
+  });
+  if (glyphRing) {
+    const square2 = sizeRecipeForToken(String(size ?? "$true"), {
+      touch: isTouchSurface()
+    }).height;
+    const disabled = props.disabled === true;
+    if (isWeb) ensureCompositeFocusRing();
+    return /* @__PURE__ */jsx(InputGlyphButton, {
+      ref,
+      role: "button",
+      size,
+      height: square2,
+      width: square2,
+      paddingHorizontal: 0,
+      opacity: disabled ? 0.5 : 1,
+      ...props,
+      "aria-disabled": disabled || void 0,
+      tabIndex: tabIndexProp ?? (disabled ? -1 : 0),
+      className: isWeb ? ["mp-chip-dismiss", className].filter(Boolean).join(" ") : className ?? void 0,
+      "data-end-cap": square2,
+      children: /* @__PURE__ */jsx(View, {
+        className: isWeb ? "mp-chip-dismiss-ring" : void 0,
+        alignItems: "center",
+        justifyContent: "center",
+        children
+      })
+    });
+  }
   const square = knobProps.control.height;
   return /* @__PURE__ */jsx(InputButton, {
     ref,
@@ -682,8 +754,13 @@ const InputButtonImpl = InputButton.styleable((props, ref) => {
     height: square,
     width: square,
     paddingHorizontal: 0,
+    color: paint,
+    focusable: false,
     tabIndex: -1,
-    ...props
+    className,
+    "data-end-cap": square,
+    ...props,
+    children: getThemedIcon(children)
   });
 });
 const InputIconFrame = styled(View, {
@@ -723,7 +800,7 @@ const InputIcon = InputIconFrame.styleable((iconProps, ref) => {
   const resolvedScaleIcon = scaleIconProp ?? scaleIcon;
   const theme = useTheme();
   const rawColor = colorProp ?? contextColor;
-  const color = getVariable(rawColor ? theme[rawColor]?.get("web") ?? rawColor : theme.borderColor?.get("web"));
+  const color = getVariable(resolveGlyphPaint(theme, rawColor ? String(rawColor) : "borderColor"));
   const iconSize = knobProps.controlIcon.width * resolvedScaleIcon;
   const getThemedIcon = useGetThemedIcon({
     size: iconSize,
@@ -939,5 +1016,5 @@ const InputCompound = Object.assign(InputContainerImpl, {
   })
 });
 const Input = InputCompound;
-export { FocusContext, FocusWiredTextArea, Input, InputContainerFrame, InputContext, InputFieldMeta, InputIconFrame, InputInfo, InputLabel, boxRingMode, boxRingOffset, defaultInputGroupStyles, ensureInputPartsFocusRing, getInputFrameTransitionProps, inputPartsRingCss, inputSizeVariant, useForwardFocus };
+export { FocusContext, FocusWiredTextArea, INPUT_MODE_TO_KEYBOARD, Input, InputContainerFrame, InputContext, InputFieldMeta, InputIconFrame, InputInfo, InputLabel, KEYBOARD_TO_INPUT_MODE, boxRingMode, boxRingOffset, defaultInputGroupStyles, ensureInputPartsFocusRing, getInputFrameTransitionProps, inputPartsRingCss, inputSizeVariant, mapInputModeToKeyboardType, mapKeyboardTypeToInputMode, useForwardFocus };
 //# sourceMappingURL=index.mjs.map