@ornikar/bumper 2.7.2-canary.1768566928.e85c568dc49c9180e37b7aec8792b1e8d45968a6.0 → 2.8.0

package/src/system/core/tokens/__snapshots__/fonts.stories.tsx.snap

@@ -0,0 +1,1635 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`Bumper/Core/Tokens Fonts 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "flexDirection": "column",
+        "gap": 24,
+      }
+    }
+  >
+    <Text
+      style={
+        {
+          "color": "#505050",
+          "fontFamily": "GTStandard",
+          "fontSize": 16,
+          "letterSpacing": 0.3,
+          "lineHeight": 24,
+        }
+      }
+      suppressHighlighting={true}
+    >
+      Font tokens define typography styles including variants, sizes, line heights, letter spacing, and weights.
+    </Text>
+    <View
+      style={
+        {
+          "flexDirection": "column",
+          "gap": 4,
+        }
+      }
+    >
+      <View
+        style={
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "gap": 16,
+          }
+        }
+      >
+        <View
+          style={
+            {
+              "width": 180,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "fontFamily": "GTStandardBold",
+                "fontSize": 14,
+                "letterSpacing": 0.3,
+                "lineHeight": 20,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            heading-2xl
+          </Text>
+        </View>
+        <View
+          style={
+            {
+              "width": 80,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "color": "#505050",
+                "fontFamily": "GTStandard",
+                "fontSize": 12,
+                "letterSpacing": 0.3,
+                "lineHeight": 16,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            56
+            px / 
+            64
+            px
+          </Text>
+        </View>
+        <Text
+          style={
+            {
+              "fontFamily": "GTStandardSemibold",
+              "fontSize": 56,
+              "letterSpacing": 0,
+              "lineHeight": 64,
+            }
+          }
+          suppressHighlighting={true}
+        >
+          The quick brown fox
+        </Text>
+      </View>
+      <View
+        style={
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "gap": 16,
+          }
+        }
+      >
+        <View
+          style={
+            {
+              "width": 180,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "fontFamily": "GTStandardBold",
+                "fontSize": 14,
+                "letterSpacing": 0.3,
+                "lineHeight": 20,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            heading-xl
+          </Text>
+        </View>
+        <View
+          style={
+            {
+              "width": 80,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "color": "#505050",
+                "fontFamily": "GTStandard",
+                "fontSize": 12,
+                "letterSpacing": 0.3,
+                "lineHeight": 16,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            48
+            px / 
+            56
+            px
+          </Text>
+        </View>
+        <Text
+          style={
+            {
+              "fontFamily": "GTStandardSemibold",
+              "fontSize": 48,
+              "letterSpacing": 0,
+              "lineHeight": 56,
+            }
+          }
+          suppressHighlighting={true}
+        >
+          The quick brown fox
+        </Text>
+      </View>
+      <View
+        style={
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "gap": 16,
+          }
+        }
+      >
+        <View
+          style={
+            {
+              "width": 180,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "fontFamily": "GTStandardBold",
+                "fontSize": 14,
+                "letterSpacing": 0.3,
+                "lineHeight": 20,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            heading-l
+          </Text>
+        </View>
+        <View
+          style={
+            {
+              "width": 80,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "color": "#505050",
+                "fontFamily": "GTStandard",
+                "fontSize": 12,
+                "letterSpacing": 0.3,
+                "lineHeight": 16,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            38
+            px / 
+            44
+            px
+          </Text>
+        </View>
+        <Text
+          style={
+            {
+              "fontFamily": "GTStandardSemibold",
+              "fontSize": 38,
+              "letterSpacing": 0,
+              "lineHeight": 44,
+            }
+          }
+          suppressHighlighting={true}
+        >
+          The quick brown fox
+        </Text>
+      </View>
+      <View
+        style={
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "gap": 16,
+          }
+        }
+      >
+        <View
+          style={
+            {
+              "width": 180,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "fontFamily": "GTStandardBold",
+                "fontSize": 14,
+                "letterSpacing": 0.3,
+                "lineHeight": 20,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            heading-m
+          </Text>
+        </View>
+        <View
+          style={
+            {
+              "width": 80,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "color": "#505050",
+                "fontFamily": "GTStandard",
+                "fontSize": 12,
+                "letterSpacing": 0.3,
+                "lineHeight": 16,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            28
+            px / 
+            32
+            px
+          </Text>
+        </View>
+        <Text
+          style={
+            {
+              "fontFamily": "GTStandardSemibold",
+              "fontSize": 28,
+              "letterSpacing": 0,
+              "lineHeight": 32,
+            }
+          }
+          suppressHighlighting={true}
+        >
+          The quick brown fox
+        </Text>
+      </View>
+      <View
+        style={
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "gap": 16,
+          }
+        }
+      >
+        <View
+          style={
+            {
+              "width": 180,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "fontFamily": "GTStandardBold",
+                "fontSize": 14,
+                "letterSpacing": 0.3,
+                "lineHeight": 20,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            heading-s
+          </Text>
+        </View>
+        <View
+          style={
+            {
+              "width": 80,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "color": "#505050",
+                "fontFamily": "GTStandard",
+                "fontSize": 12,
+                "letterSpacing": 0.3,
+                "lineHeight": 16,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            24
+            px / 
+            28
+            px
+          </Text>
+        </View>
+        <Text
+          style={
+            {
+              "fontFamily": "GTStandardSemibold",
+              "fontSize": 24,
+              "letterSpacing": 0,
+              "lineHeight": 28,
+            }
+          }
+          suppressHighlighting={true}
+        >
+          The quick brown fox
+        </Text>
+      </View>
+      <View
+        style={
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "gap": 16,
+          }
+        }
+      >
+        <View
+          style={
+            {
+              "width": 180,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "fontFamily": "GTStandardBold",
+                "fontSize": 14,
+                "letterSpacing": 0.3,
+                "lineHeight": 20,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            heading-xs
+          </Text>
+        </View>
+        <View
+          style={
+            {
+              "width": 80,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "color": "#505050",
+                "fontFamily": "GTStandard",
+                "fontSize": 12,
+                "letterSpacing": 0.3,
+                "lineHeight": 16,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            20
+            px / 
+            24
+            px
+          </Text>
+        </View>
+        <Text
+          style={
+            {
+              "fontFamily": "GTStandardSemibold",
+              "fontSize": 20,
+              "letterSpacing": 0,
+              "lineHeight": 24,
+            }
+          }
+          suppressHighlighting={true}
+        >
+          The quick brown fox
+        </Text>
+      </View>
+      <View
+        style={
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "gap": 16,
+          }
+        }
+      >
+        <View
+          style={
+            {
+              "width": 180,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "fontFamily": "GTStandardBold",
+                "fontSize": 14,
+                "letterSpacing": 0.3,
+                "lineHeight": 20,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            heading-2xs
+          </Text>
+        </View>
+        <View
+          style={
+            {
+              "width": 80,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "color": "#505050",
+                "fontFamily": "GTStandard",
+                "fontSize": 12,
+                "letterSpacing": 0.3,
+                "lineHeight": 16,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            20
+            px / 
+            20
+            px
+          </Text>
+        </View>
+        <Text
+          style={
+            {
+              "fontFamily": "GTStandardSemibold",
+              "fontSize": 20,
+              "letterSpacing": 0,
+              "lineHeight": 20,
+            }
+          }
+          suppressHighlighting={true}
+        >
+          The quick brown fox
+        </Text>
+      </View>
+      <View
+        style={
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "gap": 16,
+          }
+        }
+      >
+        <View
+          style={
+            {
+              "width": 180,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "fontFamily": "GTStandardBold",
+                "fontSize": 14,
+                "letterSpacing": 0.3,
+                "lineHeight": 20,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            body-xl
+          </Text>
+        </View>
+        <View
+          style={
+            {
+              "width": 80,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "color": "#505050",
+                "fontFamily": "GTStandard",
+                "fontSize": 12,
+                "letterSpacing": 0.3,
+                "lineHeight": 16,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            24
+            px / 
+            32
+            px
+          </Text>
+        </View>
+        <Text
+          style={
+            {
+              "fontFamily": "GTStandard",
+              "fontSize": 24,
+              "letterSpacing": 0.3,
+              "lineHeight": 32,
+            }
+          }
+          suppressHighlighting={true}
+        >
+          The quick brown fox
+        </Text>
+      </View>
+      <View
+        style={
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "gap": 16,
+          }
+        }
+      >
+        <View
+          style={
+            {
+              "width": 180,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "fontFamily": "GTStandardBold",
+                "fontSize": 14,
+                "letterSpacing": 0.3,
+                "lineHeight": 20,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            body-l
+          </Text>
+        </View>
+        <View
+          style={
+            {
+              "width": 80,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "color": "#505050",
+                "fontFamily": "GTStandard",
+                "fontSize": 12,
+                "letterSpacing": 0.3,
+                "lineHeight": 16,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            18
+            px / 
+            26
+            px
+          </Text>
+        </View>
+        <Text
+          style={
+            {
+              "fontFamily": "GTStandard",
+              "fontSize": 18,
+              "letterSpacing": 0.3,
+              "lineHeight": 26,
+            }
+          }
+          suppressHighlighting={true}
+        >
+          The quick brown fox
+        </Text>
+      </View>
+      <View
+        style={
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "gap": 16,
+          }
+        }
+      >
+        <View
+          style={
+            {
+              "width": 180,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "fontFamily": "GTStandardBold",
+                "fontSize": 14,
+                "letterSpacing": 0.3,
+                "lineHeight": 20,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            body-m
+          </Text>
+        </View>
+        <View
+          style={
+            {
+              "width": 80,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "color": "#505050",
+                "fontFamily": "GTStandard",
+                "fontSize": 12,
+                "letterSpacing": 0.3,
+                "lineHeight": 16,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            16
+            px / 
+            24
+            px
+          </Text>
+        </View>
+        <Text
+          style={
+            {
+              "fontFamily": "GTStandard",
+              "fontSize": 16,
+              "letterSpacing": 0.3,
+              "lineHeight": 24,
+            }
+          }
+          suppressHighlighting={true}
+        >
+          The quick brown fox
+        </Text>
+      </View>
+      <View
+        style={
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "gap": 16,
+          }
+        }
+      >
+        <View
+          style={
+            {
+              "width": 180,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "fontFamily": "GTStandardBold",
+                "fontSize": 14,
+                "letterSpacing": 0.3,
+                "lineHeight": 20,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            body-s
+          </Text>
+        </View>
+        <View
+          style={
+            {
+              "width": 80,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "color": "#505050",
+                "fontFamily": "GTStandard",
+                "fontSize": 12,
+                "letterSpacing": 0.3,
+                "lineHeight": 16,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            14
+            px / 
+            20
+            px
+          </Text>
+        </View>
+        <Text
+          style={
+            {
+              "fontFamily": "GTStandard",
+              "fontSize": 14,
+              "letterSpacing": 0.3,
+              "lineHeight": 20,
+            }
+          }
+          suppressHighlighting={true}
+        >
+          The quick brown fox
+        </Text>
+      </View>
+      <View
+        style={
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "gap": 16,
+          }
+        }
+      >
+        <View
+          style={
+            {
+              "width": 180,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "fontFamily": "GTStandardBold",
+                "fontSize": 14,
+                "letterSpacing": 0.3,
+                "lineHeight": 20,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            body-xs
+          </Text>
+        </View>
+        <View
+          style={
+            {
+              "width": 80,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "color": "#505050",
+                "fontFamily": "GTStandard",
+                "fontSize": 12,
+                "letterSpacing": 0.3,
+                "lineHeight": 16,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            12
+            px / 
+            16
+            px
+          </Text>
+        </View>
+        <Text
+          style={
+            {
+              "fontFamily": "GTStandard",
+              "fontSize": 12,
+              "letterSpacing": 0.3,
+              "lineHeight": 16,
+            }
+          }
+          suppressHighlighting={true}
+        >
+          The quick brown fox
+        </Text>
+      </View>
+      <View
+        style={
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "gap": 16,
+          }
+        }
+      >
+        <View
+          style={
+            {
+              "width": 180,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "fontFamily": "GTStandardBold",
+                "fontSize": 14,
+                "letterSpacing": 0.3,
+                "lineHeight": 20,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            label-xl
+          </Text>
+        </View>
+        <View
+          style={
+            {
+              "width": 80,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "color": "#505050",
+                "fontFamily": "GTStandard",
+                "fontSize": 12,
+                "letterSpacing": 0.3,
+                "lineHeight": 16,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            18
+            px / 
+            26
+            px
+          </Text>
+        </View>
+        <Text
+          style={
+            {
+              "fontFamily": "GTStandardSemibold",
+              "fontSize": 18,
+              "letterSpacing": 0,
+              "lineHeight": 26,
+            }
+          }
+          suppressHighlighting={true}
+        >
+          The quick brown fox
+        </Text>
+      </View>
+      <View
+        style={
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "gap": 16,
+          }
+        }
+      >
+        <View
+          style={
+            {
+              "width": 180,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "fontFamily": "GTStandardBold",
+                "fontSize": 14,
+                "letterSpacing": 0.3,
+                "lineHeight": 20,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            label-l
+          </Text>
+        </View>
+        <View
+          style={
+            {
+              "width": 80,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "color": "#505050",
+                "fontFamily": "GTStandard",
+                "fontSize": 12,
+                "letterSpacing": 0.3,
+                "lineHeight": 16,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            16
+            px / 
+            20
+            px
+          </Text>
+        </View>
+        <Text
+          style={
+            {
+              "fontFamily": "GTStandardSemibold",
+              "fontSize": 16,
+              "letterSpacing": 0,
+              "lineHeight": 20,
+            }
+          }
+          suppressHighlighting={true}
+        >
+          The quick brown fox
+        </Text>
+      </View>
+      <View
+        style={
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "gap": 16,
+          }
+        }
+      >
+        <View
+          style={
+            {
+              "width": 180,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "fontFamily": "GTStandardBold",
+                "fontSize": 14,
+                "letterSpacing": 0.3,
+                "lineHeight": 20,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            label-m
+          </Text>
+        </View>
+        <View
+          style={
+            {
+              "width": 80,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "color": "#505050",
+                "fontFamily": "GTStandard",
+                "fontSize": 12,
+                "letterSpacing": 0.3,
+                "lineHeight": 16,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            14
+            px / 
+            18
+            px
+          </Text>
+        </View>
+        <Text
+          style={
+            {
+              "fontFamily": "GTStandardSemibold",
+              "fontSize": 14,
+              "letterSpacing": 0,
+              "lineHeight": 18,
+            }
+          }
+          suppressHighlighting={true}
+        >
+          The quick brown fox
+        </Text>
+      </View>
+      <View
+        style={
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "gap": 16,
+          }
+        }
+      >
+        <View
+          style={
+            {
+              "width": 180,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "fontFamily": "GTStandardBold",
+                "fontSize": 14,
+                "letterSpacing": 0.3,
+                "lineHeight": 20,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            label-s
+          </Text>
+        </View>
+        <View
+          style={
+            {
+              "width": 80,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "color": "#505050",
+                "fontFamily": "GTStandard",
+                "fontSize": 12,
+                "letterSpacing": 0.3,
+                "lineHeight": 16,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            12
+            px / 
+            14
+            px
+          </Text>
+        </View>
+        <Text
+          style={
+            {
+              "fontFamily": "GTStandardSemibold",
+              "fontSize": 12,
+              "letterSpacing": 0,
+              "lineHeight": 14,
+            }
+          }
+          suppressHighlighting={true}
+        >
+          The quick brown fox
+        </Text>
+      </View>
+      <View
+        style={
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "gap": 16,
+          }
+        }
+      >
+        <View
+          style={
+            {
+              "width": 180,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "fontFamily": "GTStandardBold",
+                "fontSize": 14,
+                "letterSpacing": 0.3,
+                "lineHeight": 20,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            content-caps-3xl
+          </Text>
+        </View>
+        <View
+          style={
+            {
+              "width": 80,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "color": "#505050",
+                "fontFamily": "GTStandard",
+                "fontSize": 12,
+                "letterSpacing": 0.3,
+                "lineHeight": 16,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            40
+            px / 
+            40
+            px
+          </Text>
+        </View>
+        <Text
+          style={
+            {
+              "fontFamily": "GTStandardBold",
+              "fontSize": 40,
+              "letterSpacing": 0,
+              "lineHeight": 40,
+            }
+          }
+          suppressHighlighting={true}
+        >
+          The quick brown fox
+        </Text>
+      </View>
+      <View
+        style={
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "gap": 16,
+          }
+        }
+      >
+        <View
+          style={
+            {
+              "width": 180,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "fontFamily": "GTStandardBold",
+                "fontSize": 14,
+                "letterSpacing": 0.3,
+                "lineHeight": 20,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            content-caps-2xl
+          </Text>
+        </View>
+        <View
+          style={
+            {
+              "width": 80,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "color": "#505050",
+                "fontFamily": "GTStandard",
+                "fontSize": 12,
+                "letterSpacing": 0.3,
+                "lineHeight": 16,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            32
+            px / 
+            40
+            px
+          </Text>
+        </View>
+        <Text
+          style={
+            {
+              "fontFamily": "GTStandardBold",
+              "fontSize": 32,
+              "letterSpacing": 0,
+              "lineHeight": 40,
+            }
+          }
+          suppressHighlighting={true}
+        >
+          The quick brown fox
+        </Text>
+      </View>
+      <View
+        style={
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "gap": 16,
+          }
+        }
+      >
+        <View
+          style={
+            {
+              "width": 180,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "fontFamily": "GTStandardBold",
+                "fontSize": 14,
+                "letterSpacing": 0.3,
+                "lineHeight": 20,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            content-caps-xl
+          </Text>
+        </View>
+        <View
+          style={
+            {
+              "width": 80,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "color": "#505050",
+                "fontFamily": "GTStandard",
+                "fontSize": 12,
+                "letterSpacing": 0.3,
+                "lineHeight": 16,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            24
+            px / 
+            28
+            px
+          </Text>
+        </View>
+        <Text
+          style={
+            {
+              "fontFamily": "GTStandardBold",
+              "fontSize": 24,
+              "letterSpacing": 0,
+              "lineHeight": 28,
+            }
+          }
+          suppressHighlighting={true}
+        >
+          The quick brown fox
+        </Text>
+      </View>
+      <View
+        style={
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "gap": 16,
+          }
+        }
+      >
+        <View
+          style={
+            {
+              "width": 180,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "fontFamily": "GTStandardBold",
+                "fontSize": 14,
+                "letterSpacing": 0.3,
+                "lineHeight": 20,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            content-caps-l
+          </Text>
+        </View>
+        <View
+          style={
+            {
+              "width": 80,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "color": "#505050",
+                "fontFamily": "GTStandard",
+                "fontSize": 12,
+                "letterSpacing": 0.3,
+                "lineHeight": 16,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            18
+            px / 
+            20
+            px
+          </Text>
+        </View>
+        <Text
+          style={
+            {
+              "fontFamily": "GTStandardBold",
+              "fontSize": 18,
+              "letterSpacing": 0,
+              "lineHeight": 20,
+            }
+          }
+          suppressHighlighting={true}
+        >
+          The quick brown fox
+        </Text>
+      </View>
+      <View
+        style={
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "gap": 16,
+          }
+        }
+      >
+        <View
+          style={
+            {
+              "width": 180,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "fontFamily": "GTStandardBold",
+                "fontSize": 14,
+                "letterSpacing": 0.3,
+                "lineHeight": 20,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            content-caps-m
+          </Text>
+        </View>
+        <View
+          style={
+            {
+              "width": 80,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "color": "#505050",
+                "fontFamily": "GTStandard",
+                "fontSize": 12,
+                "letterSpacing": 0.3,
+                "lineHeight": 16,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            16
+            px / 
+            18
+            px
+          </Text>
+        </View>
+        <Text
+          style={
+            {
+              "fontFamily": "GTStandardBold",
+              "fontSize": 16,
+              "letterSpacing": 0,
+              "lineHeight": 18,
+            }
+          }
+          suppressHighlighting={true}
+        >
+          The quick brown fox
+        </Text>
+      </View>
+      <View
+        style={
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "gap": 16,
+          }
+        }
+      >
+        <View
+          style={
+            {
+              "width": 180,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "fontFamily": "GTStandardBold",
+                "fontSize": 14,
+                "letterSpacing": 0.3,
+                "lineHeight": 20,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            content-caps-s
+          </Text>
+        </View>
+        <View
+          style={
+            {
+              "width": 80,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "color": "#505050",
+                "fontFamily": "GTStandard",
+                "fontSize": 12,
+                "letterSpacing": 0.3,
+                "lineHeight": 16,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            14
+            px / 
+            16
+            px
+          </Text>
+        </View>
+        <Text
+          style={
+            {
+              "fontFamily": "GTStandardBold",
+              "fontSize": 14,
+              "letterSpacing": 0,
+              "lineHeight": 16,
+            }
+          }
+          suppressHighlighting={true}
+        >
+          The quick brown fox
+        </Text>
+      </View>
+      <View
+        style={
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "gap": 16,
+          }
+        }
+      >
+        <View
+          style={
+            {
+              "width": 180,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "fontFamily": "GTStandardBold",
+                "fontSize": 14,
+                "letterSpacing": 0.3,
+                "lineHeight": 20,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            content-caps-xs
+          </Text>
+        </View>
+        <View
+          style={
+            {
+              "width": 80,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "color": "#505050",
+                "fontFamily": "GTStandard",
+                "fontSize": 12,
+                "letterSpacing": 0.3,
+                "lineHeight": 16,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            12
+            px / 
+            14
+            px
+          </Text>
+        </View>
+        <Text
+          style={
+            {
+              "fontFamily": "GTStandardBold",
+              "fontSize": 12,
+              "letterSpacing": 0,
+              "lineHeight": 14,
+            }
+          }
+          suppressHighlighting={true}
+        >
+          The quick brown fox
+        </Text>
+      </View>
+    </View>
+  </View>
+</RNCSafeAreaProvider>
+`;