braid-design-system 32.1.0 → 32.2.0

package/dist/styles/lib/components/private/touchable/debugTouchable.mjs

@@ -7,5 +7,5 @@ const debugTouchable = ({ after = false } = {}) => process.env.NODE_ENV === "pro
   }
 };
 export {
-  debugTouchable as d
+  debugTouchable
 };

package/dist/styles/lib/components/private/touchable/hitArea.mjs

@@ -1,4 +1,4 @@
 const hitArea = "44px";
 export {
-  hitArea as h
+  hitArea
 };

package/dist/styles/lib/components/private/touchable/virtualTouchable.css.mjs

@@ -1,7 +1,7 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
-import { d as debugTouchable } from "./debugTouchable.mjs";
-import { v as virtualTouchableRules } from "./virtualTouchableRules.mjs";
+import { debugTouchable } from "./debugTouchable.mjs";
+import { virtualTouchableRules } from "./virtualTouchableRules.mjs";
 setFileScope("src/lib/components/private/touchable/virtualTouchable.css.ts?used", "braid-design-system");
 const virtualTouchable = style([{
   position: "relative",
@@ -23,6 +23,6 @@ const yAxisOnly = style({
 }, "yAxisOnly");
 endFileScope();
 export {
-  virtualTouchable as v,
-  yAxisOnly as y
+  virtualTouchable,
+  yAxisOnly
 };

package/dist/styles/lib/components/private/touchable/virtualTouchableRules.mjs

@@ -1,4 +1,4 @@
-import { h as hitArea } from "./hitArea.mjs";
+import { hitArea } from "./hitArea.mjs";
 const virtualTouchableRules = {
   transform: "translateY(-50%)",
   minHeight: hitArea,
@@ -7,5 +7,5 @@ const virtualTouchableRules = {
   top: "50%"
 };
 export {
-  virtualTouchableRules as v
+  virtualTouchableRules
 };

package/dist/styles/lib/components/useToast/Toast.css.mjs

@@ -6,5 +6,5 @@ const toast = style({
 }, "toast");
 endFileScope();
 export {
-  toast as t
+  toast
 };

package/dist/styles/lib/css/atoms/atomicProperties.mjs

@@ -1,4 +1,4 @@
-import { v as vars } from "../../themes/vars.css.mjs";
+import { vars } from "../../themes/vars.css.mjs";
 const sizes = {
   full: "100%",
   touchable: vars.touchableSize
@@ -120,9 +120,9 @@ const responsiveProperties = {
   textAlign: ["left", "center", "right"]
 };
 export {
-  colorProperties as c,
-  pseudoProperties as p,
-  responsiveProperties as r,
-  space as s,
-  unresponsiveProperties as u
+  colorProperties,
+  pseudoProperties,
+  responsiveProperties,
+  space,
+  unresponsiveProperties
 };

package/dist/styles/lib/css/atoms/atoms.mjs

@@ -1,5 +1,5 @@
-import { b as base, e as element } from "../reset/reset.css.mjs";
-import { s as sprinkles } from "./sprinkles.css.mjs";
+import { base, element } from "../reset/reset.css.mjs";
+import { sprinkles } from "./sprinkles.css.mjs";
 const atoms = ({ reset, ...rest }) => {
   if (!reset) {
     return sprinkles(rest);
@@ -9,5 +9,5 @@ const atoms = ({ reset, ...rest }) => {
   return `${base}${elementReset ? ` ${elementReset}` : ""}${sprinklesClasses ? ` ${sprinklesClasses}` : ""}`;
 };
 export {
-  atoms as a
+  atoms
 };

package/dist/styles/lib/css/atoms/sprinkles.css.mjs

@@ -1,8 +1,8 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
 import { defineProperties, createSprinkles, createNormalizeValueFn, createMapValueFn } from "@vanilla-extract/sprinkles";
-import { b as breakpoints, a as breakpointNames } from "../breakpoints.mjs";
-import { u as unresponsiveProperties, p as pseudoProperties, c as colorProperties, r as responsiveProperties } from "./atomicProperties.mjs";
+import { breakpoints, breakpointNames } from "../breakpoints.mjs";
+import { unresponsiveProperties, pseudoProperties, colorProperties, responsiveProperties } from "./atomicProperties.mjs";
 setFileScope("src/lib/css/atoms/sprinkles.css.ts?used", "braid-design-system");
 const unresponsiveAtomicProperties = defineProperties({
   properties: unresponsiveProperties,
@@ -67,10 +67,10 @@ const mapResponsiveValue = createMapValueFn(responsiveAtomicProperties);
 const mapColorModeValue = createMapValueFn(colorAtomicProperties);
 endFileScope();
 export {
-  mapResponsiveValue as a,
-  colorModeSelectors as c,
-  darkMode as d,
-  mapColorModeValue as m,
-  normalizeResponsiveValue as n,
-  sprinkles as s
+  colorModeSelectors,
+  darkMode,
+  mapColorModeValue,
+  mapResponsiveValue,
+  normalizeResponsiveValue,
+  sprinkles
 };

package/dist/styles/lib/css/breakpoints.mjs

@@ -6,6 +6,6 @@ const breakpoints = {
   wide: 1200
 };
 export {
-  breakpointNames as a,
-  breakpoints as b
+  breakpointNames,
+  breakpoints
 };

package/dist/styles/lib/css/colorModeStyle.mjs

@@ -1,4 +1,4 @@
-import { c as colorModeSelectors } from "./atoms/sprinkles.css.mjs";
+import { colorModeSelectors } from "./atoms/sprinkles.css.mjs";
 const makeSelector = (mode, styles) => !styles || Object.keys(styles).length === 0 ? {} : {
   [colorModeSelectors[mode]]: styles
 };
@@ -14,5 +14,5 @@ const colorModeStyle = ({
   } : {}
 });
 export {
-  colorModeStyle as c
+  colorModeStyle
 };

package/dist/styles/lib/css/lineHeightContainer.css.mjs

@@ -1,7 +1,7 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { styleVariants } from "@vanilla-extract/css";
-import { r as responsiveStyle } from "./responsiveStyle.mjs";
-import { v as vars } from "../themes/vars.css.mjs";
+import { responsiveStyle } from "./responsiveStyle.mjs";
+import { vars } from "../themes/vars.css.mjs";
 setFileScope("src/lib/css/lineHeightContainer.css.ts?used", "braid-design-system");
 const lineHeightContainer = styleVariants(vars.textSize, ({
   mobile,
@@ -16,5 +16,5 @@ const lineHeightContainer = styleVariants(vars.textSize, ({
 }), "lineHeightContainer");
 endFileScope();
 export {
-  lineHeightContainer as l
+  lineHeightContainer
 };

package/dist/styles/lib/css/negativeMargin/negativeMargin.css.cjs

@@ -54,13 +54,8 @@ const right = {
   wide: stylesForBreakpoint("wide", "marginRight")
 };
 fileScope.endFileScope();
-const styles = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  bottom,
-  left,
-  preventCollapsePseudo,
-  right,
-  top
-}, Symbol.toStringTag, { value: "Module" }));
+exports.bottom = bottom;
+exports.left = left;
 exports.preventCollapsePseudo = preventCollapsePseudo;
-exports.styles = styles;
+exports.right = right;
+exports.top = top;

package/dist/styles/lib/css/negativeMargin/negativeMargin.css.mjs

@@ -1,8 +1,8 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style, styleVariants } from "@vanilla-extract/css";
 import { calc } from "@vanilla-extract/css-utils";
-import { s as space } from "../atoms/atomicProperties.mjs";
-import { r as responsiveStyle } from "../responsiveStyle.mjs";
+import { space } from "../atoms/atomicProperties.mjs";
+import { responsiveStyle } from "../responsiveStyle.mjs";
 setFileScope("src/lib/css/negativeMargin/negativeMargin.css.ts?used", "braid-design-system");
 const stylesForBreakpoint = (bp, property, mapToStyle) => styleVariants(space, (value) => {
   const styleRule = {
@@ -53,15 +53,10 @@ const right = {
   wide: stylesForBreakpoint("wide", "marginRight")
 };
 endFileScope();
-const styles = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
+export {
   bottom,
   left,
   preventCollapsePseudo,
   right,
   top
-}, Symbol.toStringTag, { value: "Module" }));
-export {
-  preventCollapsePseudo as p,
-  styles as s
 };

package/dist/styles/lib/css/reset/reset.css.mjs

@@ -1,6 +1,6 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
-import { h as hideFocusRingsDataAttribute } from "../../components/private/hideFocusRings/hideFocusRingsDataAttribute.mjs";
+import { hideFocusRingsDataAttribute } from "../../components/private/hideFocusRings/hideFocusRingsDataAttribute.mjs";
 setFileScope("src/lib/css/reset/reset.css.ts?used", "braid-design-system");
 const base = style({
   margin: 0,
@@ -107,6 +107,6 @@ const element = {
 };
 endFileScope();
 export {
-  base as b,
-  element as e
+  base,
+  element
 };

package/dist/styles/lib/css/responsiveStyle.cjs

@@ -1,6 +1,6 @@
 "use strict";
-const omit = require("lodash/omit");
-const mapValues = require("lodash/mapValues");
+const omit = require("lodash/omit.js");
+const mapValues = require("lodash/mapValues.js");
 const styles_lib_css_breakpoints_cjs = require("./breakpoints.cjs");
 const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
 const omit__default = /* @__PURE__ */ _interopDefaultCompat(omit);

package/dist/styles/lib/css/responsiveStyle.mjs

@@ -1,6 +1,6 @@
 import omit from "lodash/omit.js";
 import mapValues from "lodash/mapValues.js";
-import { b as breakpoints } from "./breakpoints.mjs";
+import { breakpoints } from "./breakpoints.mjs";
 const breakpointQuery = mapValues(
   omit(breakpoints, "mobile"),
   (bp) => `screen and (min-width: ${bp}px)`
@@ -29,6 +29,6 @@ const responsiveStyle = ({
   } : {}
 });
 export {
-  breakpointQuery as b,
-  responsiveStyle as r
+  breakpointQuery,
+  responsiveStyle
 };

package/dist/styles/lib/css/textAlignedToIcon.css.mjs

@@ -1,8 +1,8 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
 import { calc } from "@vanilla-extract/css-utils";
-import { r as responsiveStyle } from "./responsiveStyle.mjs";
-import { v as vars } from "../themes/vars.css.mjs";
+import { responsiveStyle } from "./responsiveStyle.mjs";
+import { vars } from "../themes/vars.css.mjs";
 setFileScope("src/lib/css/textAlignedToIcon.css.ts?used", "braid-design-system");
 const calculateForBreakpoint = (breakpoint) => {
   const type = vars.textSize.standard[breakpoint];
@@ -20,5 +20,5 @@ const textAlignedToIcon = {
 };
 endFileScope();
 export {
-  textAlignedToIcon as t
+  textAlignedToIcon
 };

package/dist/styles/lib/css/typography.css.cjs

@@ -158,21 +158,6 @@ const touchableText = css.styleVariants(styles_lib_themes_vars_css_cjs.vars.text
   tablet: makeTouchableSpacing(styles_lib_themes_vars_css_cjs.vars.touchableSize, textDefinition.tablet.lineHeight)
 }), "touchableText");
 fileScope.endFileScope();
-const styles = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  darkModeNeutralOverride,
-  darkModeTone,
-  fontFamily,
-  fontWeight,
-  heading,
-  headingWeight,
-  lightModeNeutralOverride,
-  lightModeTone,
-  textSizeTrimmed,
-  textSizeUntrimmed,
-  tone,
-  touchableText
-}, Symbol.toStringTag, { value: "Module" }));
 exports.darkModeNeutralOverride = darkModeNeutralOverride;
 exports.darkModeTone = darkModeTone;
 exports.fontFamily = fontFamily;
@@ -181,7 +166,7 @@ exports.heading = heading;
 exports.headingWeight = headingWeight;
 exports.lightModeNeutralOverride = lightModeNeutralOverride;
 exports.lightModeTone = lightModeTone;
-exports.styles = styles;
+exports.textSizeTrimmed = textSizeTrimmed;
 exports.textSizeUntrimmed = textSizeUntrimmed;
 exports.tone = tone;
 exports.touchableText = touchableText;

package/dist/styles/lib/css/typography.css.mjs

@@ -2,10 +2,10 @@ import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style, styleVariants, createThemeContract, assignVars } from "@vanilla-extract/css";
 import { calc } from "@vanilla-extract/css-utils";
 import { createTextStyle } from "@capsizecss/vanilla-extract";
-import { v as vars } from "../themes/vars.css.mjs";
-import { b as breakpointQuery, r as responsiveStyle } from "./responsiveStyle.mjs";
-import { c as colorModeStyle } from "./colorModeStyle.mjs";
-import { m as mapToProperty } from "../utils/index.mjs";
+import { vars } from "../themes/vars.css.mjs";
+import { breakpointQuery, responsiveStyle } from "./responsiveStyle.mjs";
+import { colorModeStyle } from "./colorModeStyle.mjs";
+import { mapToProperty } from "../utils/index.mjs";
 setFileScope("src/lib/css/typography.css.ts?used", "braid-design-system");
 const fontFamily = style({
   fontFamily: vars.fontFamily
@@ -157,8 +157,7 @@ const touchableText = styleVariants(vars.textSize, (textDefinition) => responsiv
   tablet: makeTouchableSpacing(vars.touchableSize, textDefinition.tablet.lineHeight)
 }), "touchableText");
 endFileScope();
-const styles = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
+export {
   darkModeNeutralOverride,
   darkModeTone,
   fontFamily,
@@ -171,18 +170,4 @@ const styles = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProper
   textSizeUntrimmed,
   tone,
   touchableText
-}, Symbol.toStringTag, { value: "Module" }));
-export {
-  lightModeNeutralOverride as a,
-  darkModeNeutralOverride as b,
-  fontWeight as c,
-  darkModeTone as d,
-  textSizeUntrimmed as e,
-  fontFamily as f,
-  touchableText as g,
-  headingWeight as h,
-  heading as i,
-  lightModeTone as l,
-  styles as s,
-  tone as t
 };

package/dist/styles/lib/hooks/useIcon/icon.css.mjs

@@ -1,7 +1,7 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style, styleVariants } from "@vanilla-extract/css";
-import { r as responsiveStyle } from "../../css/responsiveStyle.mjs";
-import { v as vars } from "../../themes/vars.css.mjs";
+import { responsiveStyle } from "../../css/responsiveStyle.mjs";
+import { vars } from "../../themes/vars.css.mjs";
 setFileScope("src/lib/hooks/useIcon/icon.css.ts?used", "braid-design-system");
 const iconScaleIncrease = 0.2;
 const size = style({
@@ -58,10 +58,10 @@ const blockWidths = styleVariants(vars.textSize, ({
 }), "blockWidths");
 endFileScope();
 export {
-  inline as a,
-  alignY as b,
-  cropToTextSize as c,
-  blockWidths as d,
-  inlineCrop as i,
-  size as s
+  alignY,
+  blockWidths,
+  cropToTextSize,
+  inline,
+  inlineCrop,
+  size
 };

package/dist/styles/lib/themes/apac/apacTheme.css.mjs

@@ -1,9 +1,9 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { t as tokens } from "./tokens.mjs";
-import { m as makeBraidTheme } from "../makeBraidTheme.mjs";
+import { tokens } from "./tokens.mjs";
+import { makeBraidTheme } from "../makeBraidTheme.mjs";
 setFileScope("src/lib/themes/apac/apacTheme.css.ts?used", "braid-design-system");
 const apacTheme_css = makeBraidTheme(tokens);
 endFileScope();
 export {
-  apacTheme_css as a
+  apacTheme_css
 };

package/dist/styles/lib/themes/apac/tokens.mjs

@@ -1,5 +1,5 @@
 import { darken, lighten } from "polished";
-import { p as palette, m as makeTokens } from "../../../../side-effects/lib/themes/baseTokens/apac.mjs";
+import { makeTokens, palette } from "../../../../side-effects/lib/themes/baseTokens/apac.mjs";
 const brandAccent = palette.seekPink["500"];
 const brandAccentSoft = palette.seekPink["50"];
 const tokens = makeTokens({
@@ -15,5 +15,5 @@ const tokens = makeTokens({
   brandAccentSoftHover: darken(0.025, brandAccentSoft)
 });
 export {
-  tokens as t
+  tokens
 };

package/dist/styles/lib/themes/docs/docsTheme.css.mjs

@@ -1,9 +1,9 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { t as tokens } from "./tokens.mjs";
-import { m as makeBraidTheme } from "../makeBraidTheme.mjs";
+import { tokens } from "./tokens.mjs";
+import { makeBraidTheme } from "../makeBraidTheme.mjs";
 setFileScope("src/lib/themes/docs/docsTheme.css.ts?used", "braid-design-system");
 const docsTheme_css = makeBraidTheme(tokens);
 endFileScope();
 export {
-  docsTheme_css as d
+  docsTheme_css
 };

package/dist/styles/lib/themes/docs/tokens.cjs

@@ -1,6 +1,10 @@
 "use strict";
+const appleSystemMetrics = require("@capsizecss/metrics/appleSystem.js");
 const polished = require("polished");
 const sideEffects_lib_themes_baseTokens_apac_cjs = require("../../../../side-effects/lib/themes/baseTokens/apac.cjs");
+const sideEffects_lib_themes_tokenType_cjs = require("../../../../side-effects/lib/themes/tokenType.cjs");
+const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const appleSystemMetrics__default = /* @__PURE__ */ _interopDefaultCompat(appleSystemMetrics);
 const brandAccent = sideEffects_lib_themes_baseTokens_apac_cjs.palette.grey["900"];
 const formAccent = sideEffects_lib_themes_baseTokens_apac_cjs.palette.indigo["600"];
 const focus = polished.rgba("#1e90ff", 0.7);
@@ -15,13 +19,7 @@ const tokens = {
   typography: {
     fontFamily: '-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
     webFont: null,
-    fontMetrics: {
-      capHeight: 1443,
-      ascent: 1950,
-      descent: -494,
-      lineGap: 0,
-      unitsPerEm: 2048
-    },
+    fontMetrics: sideEffects_lib_themes_tokenType_cjs.extractFontMetricsForTheme(appleSystemMetrics__default.default),
     fontWeight: {
       regular: 400,
       medium: 500,
@@ -134,7 +132,8 @@ const tokens = {
     medium: 5,
     large: 8,
     xlarge: 11,
-    xxlarge: 15
+    xxlarge: 15,
+    xxxlarge: 20
   },
   transforms: {
     touchable: "scale(0.97)"
@@ -145,6 +144,7 @@ const tokens = {
   },
   border: {
     radius: {
+      small: "4px",
       standard: "6px",
       large: "8px",
       xlarge: "12px"

package/dist/styles/lib/themes/docs/tokens.mjs

@@ -1,5 +1,7 @@
+import appleSystemMetrics from "@capsizecss/metrics/appleSystem.js";
 import { rgba, darken, lighten } from "polished";
-import { p as palette } from "../../../../side-effects/lib/themes/baseTokens/apac.mjs";
+import { palette } from "../../../../side-effects/lib/themes/baseTokens/apac.mjs";
+import { extractFontMetricsForTheme } from "../../../../side-effects/lib/themes/tokenType.mjs";
 const brandAccent = palette.grey["900"];
 const formAccent = palette.indigo["600"];
 const focus = rgba("#1e90ff", 0.7);
@@ -14,13 +16,7 @@ const tokens = {
   typography: {
     fontFamily: '-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
     webFont: null,
-    fontMetrics: {
-      capHeight: 1443,
-      ascent: 1950,
-      descent: -494,
-      lineGap: 0,
-      unitsPerEm: 2048
-    },
+    fontMetrics: extractFontMetricsForTheme(appleSystemMetrics),
     fontWeight: {
       regular: 400,
       medium: 500,
@@ -133,7 +129,8 @@ const tokens = {
     medium: 5,
     large: 8,
     xlarge: 11,
-    xxlarge: 15
+    xxlarge: 15,
+    xxxlarge: 20
   },
   transforms: {
     touchable: "scale(0.97)"
@@ -144,6 +141,7 @@ const tokens = {
   },
   border: {
     radius: {
+      small: "4px",
       standard: "6px",
       large: "8px",
       xlarge: "12px"
@@ -251,5 +249,5 @@ const tokens = {
   }
 };
 export {
-  tokens as t
+  tokens
 };

package/dist/styles/lib/themes/makeBraidTheme.mjs

@@ -1,11 +1,11 @@
 import { createTheme } from "@vanilla-extract/css";
-import { v as vars } from "./vars.css.mjs";
-import { m as makeVanillaTheme } from "./makeVanillaTheme.mjs";
-import { m as makeRuntimeTokens } from "../../../side-effects/lib/themes/makeRuntimeTokens.mjs";
+import { vars } from "./vars.css.mjs";
+import { makeVanillaTheme } from "./makeVanillaTheme.mjs";
+import { makeRuntimeTokens } from "../../../side-effects/lib/themes/makeRuntimeTokens.mjs";
 const makeBraidTheme = (tokens) => ({
   ...makeRuntimeTokens(tokens),
   vanillaTheme: createTheme(vars, makeVanillaTheme(tokens), tokens.name)
 });
 export {
-  makeBraidTheme as m
+  makeBraidTheme
 };

package/dist/styles/lib/themes/makeVanillaTheme.cjs

@@ -1,5 +1,5 @@
 "use strict";
-const mapValues = require("lodash/mapValues");
+const mapValues = require("lodash/mapValues.js");
 const core = require("@capsizecss/core");
 const vanillaExtract = require("@capsizecss/vanilla-extract");
 const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
@@ -15,13 +15,26 @@ const fontSizeToCapHeight = (grid, definition, fontMetrics) => {
     fontSize: tablet.fontSize,
     fontMetrics
   });
+  const mobileConfig = "lineGap" in mobile ? {
+    fontSize: mobile.fontSize,
+    lineGap: mobile.lineGap
+  } : {
+    fontSize: mobile.fontSize,
+    leading: mobile.rows * grid
+  };
+  const tabletConfig = "lineGap" in tablet ? {
+    fontSize: tablet.fontSize,
+    lineGap: tablet.lineGap
+  } : {
+    fontSize: tablet.fontSize,
+    leading: tablet.rows * grid
+  };
   const {
     fontSize: mobileFontSize,
     lineHeight: mobileLineHeight,
     ...mobileTrims
   } = vanillaExtract.precomputeValues({
-    fontSize: mobile.fontSize,
-    leading: mobile.rows * grid,
+    ...mobileConfig,
     fontMetrics
   });
   const {
@@ -29,8 +42,7 @@ const fontSizeToCapHeight = (grid, definition, fontMetrics) => {
     lineHeight: tabletLineHeight,
     ...tabletTrims
   } = vanillaExtract.precomputeValues({
-    fontSize: tablet.fontSize,
-    leading: tablet.rows * grid,
+    ...tabletConfig,
     fontMetrics
   });
   return {
@@ -56,8 +68,12 @@ const makeVanillaTheme = (braidTokens) => {
   const { name, displayName, ...tokens } = braidTokens;
   const { webFont, ...typography } = tokens.typography;
   const { foreground, background } = tokens.color;
+  const textSize = mapValues__default.default(
+    tokens.typography.text,
+    (definition) => fontSizeToCapHeight(tokens.grid, definition, typography.fontMetrics)
+  );
   const getInlineFieldSize = (size) => {
-    const scale = typography.text[size].mobile.rows * tokens.grid / 42;
+    const scale = parseInt(textSize[size].mobile.lineHeight, 10) / 42;
     return px(tokens.grid * Math.round(tokens.touchableSize * scale));
   };
   const resolvedTokens = {
@@ -73,10 +89,7 @@ const makeVanillaTheme = (braidTokens) => {
     backgroundColor: background,
     fontFamily: typography.fontFamily,
     fontMetrics: mapValues__default.default(typography.fontMetrics, String),
-    textSize: mapValues__default.default(
-      tokens.typography.text,
-      (definition) => fontSizeToCapHeight(tokens.grid, definition, typography.fontMetrics)
-    ),
+    textSize,
     textWeight: mapValues__default.default(typography.fontWeight, String),
     headingLevel: mapValues__default.default(
       tokens.typography.heading.level,