How to use the @kiwicom/orbit-design-tokens.defaultTokens.fontSizeTextLarge function in @kiwicom/orbit-design-tokens

type LocalizedPriceProps = {|
  +localizedPrice: string,
  +style?: StylePropType,
|};

export default function LocalizedPrice({
  localizedPrice,
  style,
}: LocalizedPriceProps) {
  return ;
}
const styles = StyleSheet.create({
  price: {
    fontWeight: 'bold',
    color: defaultTokens.colorTextLinkPrimary,
    fontSize: parseFloat(defaultTokens.fontSizeTextLarge),
    web: {
      color: '#2e353b', // // @TODO repeating value - should be added to design-tokens
      fontSize: 18,
    },
  },
});

paddingHorizontal: parseInt(defaultTokens.spaceSmall, 10),
    justifyContent: 'center',
  },
  counter: {
    flex: 1,
    paddingEnd: parseInt(defaultTokens.spaceSmall, 10),
    flexDirection: 'row',
    alignItems: 'center',
  },
  counterUnderline: {
    borderBottomColor: defaultTokens.paletteInkLighter,
    borderBottomWidth: StyleSheet.hairlineWidth,
  },
  label: {
    flex: 1,
    fontSize: parseInt(defaultTokens.fontSizeTextLarge, 10),
    color: defaultTokens.colorTextAttention,
  },
  stepperNumber: {
    width: parseInt(defaultTokens.spaceXXXLarge, 10),
    textAlign: 'center',
    fontSize: parseInt(defaultTokens.fontSizeTextNormal, 10),
    color: defaultTokens.colorTextAttention,
  },
});

export default PassengersInputsLine;

},
  citiesContainer: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 3,
    paddingTop: 8,
  },
  headerLeftcontainer: {
    flexDirection: 'column',
    paddingStart: 16,
  },
  departureCity: {
    fontWeight: 'bold',
    marginEnd: 5,
    fontSize: parseFloat(defaultTokens.fontSizeTextLarge),
    color: defaultTokens.colorTextAttention,
  },
  arrivalCity: {
    fontWeight: 'bold',
    marginStart: 5,
    fontSize: parseFloat(defaultTokens.fontSizeTextLarge),
    color: defaultTokens.colorTextAttention,
  },
  badgeText: {
    fontSize: parseFloat(defaultTokens.fontSizeTextSmall),
    color: defaultTokens.colorTextPrimary,
  },
  badge: {
    backgroundColor: defaultTokens.paletteCloudNormal,
  },
  row: {

);
}

Tag.defaultProps = {
  fontSize: parseFloat(defaultTokens.fontSizeTextLarge),
};

const styles = StyleSheet.create({
  wrapper: {
    paddingHorizontal: 6,
    paddingVertical: 5,
    alignSelf: 'flex-start',
    flexDirection: 'row',
    alignItems: 'center',
    flexWrap: 'wrap',
    borderRadius: parseFloat(defaultTokens.borderRadiusNormal),
    backgroundColor: defaultTokens.backgroundButtonPrimary,
    web: {
      width: 'fit-content',
    },
  },

type LocalizedPriceProps = {|
  +localizedPrice: string,
  +style?: StylePropType,
|};

export default function LocalizedPrice({
  localizedPrice,
  style,
}: LocalizedPriceProps) {
  return ;
}
const styles = StyleSheet.create({
  price: {
    fontWeight: 'bold',
    color: defaultTokens.colorTextLinkPrimary,
    fontSize: parseFloat(defaultTokens.fontSizeTextLarge),
    web: {
      color: designTokens.paletteBlueDark,
      fontSize: 18,
    },
  },
});

+onBlur?: () => void,
  +disabled?: boolean,
  +maxWidth?: number,
  +placeholder?: string,
  +onKeyPress?: (e: ViewLayoutEvent) => void,
  +autoFocus?: boolean,
  +autoCorrect?: boolean,
|};

type State = {|
  componentWidth: number,
|};

class InputField extends React.Component {
  static defaultProps = {
    fontSize: parseFloat(defaultTokens.fontSizeTextLarge),
    disabled: false,
  };

  constructor(props: Props) {
    super(props);
    this.state = {
      componentWidth: props.minWidth ?? INPUT_MIN_WIDTH,
    };
  }

  shouldComponentUpdate(nextProps, nextState) {
    const { fontSize, maxWidth, minWidth, placeholder, value } = this.props;

    if (
      fontSize !== nextProps.fontSize ||
      maxWidth !== nextProps.maxWidth ||

flexDirection: 'row',
    alignItems: 'center',
    paddingTop: 4,
  },
  headerLeftContainer: {
    flexDirection: 'column',
    paddingStart: 16,
    android: {
      paddingStart: 40,
    },
    alignItems: Platform.OS === 'web' ? 'center' : 'stretch',
    flex: 1,
  },
  city: {
    marginEnd: 5,
    fontSize: parseFloat(defaultTokens.fontSizeTextLarge),
    color: defaultTokens.colorTextAttention,
  },
  badgeText: {
    fontSize: parseFloat(defaultTokens.fontSizeTextSmall),
    color: defaultTokens.colorTextPrimary,
  },
  badge: {
    backgroundColor: defaultTokens.paletteCloudNormal,
    alignSelf: 'center',
  },
  date: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingBottom: 8,
  },
  gradientOverlap: {

paddingTop: 8,
  },
  headerLeftcontainer: {
    flexDirection: 'column',
    paddingStart: 16,
  },
  departureCity: {
    fontWeight: 'bold',
    marginEnd: 5,
    fontSize: parseFloat(defaultTokens.fontSizeTextLarge),
    color: defaultTokens.colorTextAttention,
  },
  arrivalCity: {
    fontWeight: 'bold',
    marginStart: 5,
    fontSize: parseFloat(defaultTokens.fontSizeTextLarge),
    color: defaultTokens.colorTextAttention,
  },
  badgeText: {
    fontSize: parseFloat(defaultTokens.fontSizeTextSmall),
    color: defaultTokens.colorTextPrimary,
  },
  badge: {
    backgroundColor: defaultTokens.paletteCloudNormal,
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
  },
});

weekStartsOn={weekStartsOn}
            isChoosingPastDatesEnabled={isChoosingPastDatesEnabled}
            renderedCalendarRange={renderedCalendarRange}
          />
        ))}
      
    );
  }
}

const styles = StyleSheet.create({
  monthLabel: {
    marginTop: 20,
    marginBottom: parseFloat(defaultTokens.spaceMedium),
    marginHorizontal: parseFloat(defaultTokens.spaceXSmall),
    fontSize: parseFloat(defaultTokens.fontSizeTextLarge),
  },
  year: {
    color: defaultTokens.colorTextSecondary,
  },
});

);
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    marginStart: parseFloat(defaultTokens.spaceSmall),
  },
  icon: {
    marginEnd: parseFloat(defaultTokens.spaceSmall),
  },
  label: {
    fontSize: parseFloat(defaultTokens.fontSizeTextLarge),
  },
});